/* ToolMole — shared styles (clean white theme) */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --soft: #f8f9fa;
  --ink: #111827;
  --muted: #6b7280;
  --brand: #5e4630;
  --brand-dark: #171310;
  --accent: #f97316;
  --accent-soft: #fff3e8;
  --line: #e5e7eb;
  --green: #16a34a;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(17, 24, 39, .06);
  --shadow-lg: 0 12px 28px rgba(17, 24, 39, .10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* The browser's own [hidden] rule has the same specificity as any class, and
   an author stylesheet always outranks the UA one — so a single
   `.thing { display: flex }` anywhere quietly makes `hidden` do nothing at all
   on that element. Over a hundred controls here rely on the attribute. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img, svg { vertical-align: middle; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; gap: 28px; height: 64px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.logo .mark { width: 34px; height: 34px; }
.logo b { color: var(--brand); } .logo span { color: var(--accent); }
.nav { margin-inline-start: auto; display: flex; align-items: center; gap: 22px; font-size: .95rem; color: var(--muted); }
.nav a:hover { color: var(--ink); }
/* the page you are on, so the nav says where you are and not only where you can go */
.nav a.on { color: var(--ink); font-weight: 600; }
/* The burrow is the visitor's own corner of the site rather than another
   section of it, so it reads as a destination instead of a nav item. */
.burrow-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px 5px 9px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--brand); font-weight: 600; white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.burrow-link svg { width: 19px; height: 19px; flex: 0 0 19px; }
.burrow-link:hover { border-color: #fcd9b8; background: var(--accent-soft); color: var(--brand); }
.burrow-link.on { border-color: var(--accent); background: var(--accent-soft); }
/* A <select> is as wide as its widest option, and the list went from six
   languages to thirteen — "Bahasa Indonesia" then set the width of the header
   row, which does not wrap, so on a phone the switcher hung off the right edge
   and took every page's horizontal scroll with it. Capping it is safe: the
   closed control only has to show the current language, and the open list is
   drawn by the operating system and is not bound by this width at all. */
.lang-switch { min-width: 0; }
.lang-switch select {
  padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 8px;
  background: #fff; font-size: .88rem; color: var(--muted); cursor: pointer;
  max-width: 100%; text-overflow: ellipsis;
}
.slot { text-align: center; margin: 18px auto; max-width: 860px; }
.view-all { margin-inline-start: auto; font-size: .85rem; font-weight: 600; color: var(--accent); }
.view-all:hover { text-decoration: underline; }
.related { margin-top: 40px; }
.tool-panel > * + * { margin-top: 16px; }
.tool-panel label { color: #374151; }
/* shared non-blocking task progress UI */
.tm-progress { margin-top: 14px; }
.tm-progress-row { display: flex; align-items: center; gap: 12px; }
.tm-bar { flex: 1; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.tm-bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .18s ease-out; }
.tm-bar-fill.ok { background: var(--green); }
.tm-bar-fill.err { background: #dc2626; }
.tm-pct { font-family: Consolas, monospace; font-weight: 700; min-width: 44px; text-align: end; font-size: .9rem; }
.tm-progress-text { font-size: .86rem; margin-top: 6px; min-height: 1.2em; }
.tm-busy { opacity: .55; pointer-events: none; }
.tm-ta { width: 100%; min-height: 150px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px; font-family: inherit; resize: vertical; }
.tm-ta[readonly] { background: var(--soft); }
.tm-ta:focus { outline: none; border-color: var(--accent); }

/* Hero */
.hero { padding: 64px 0 40px; text-align: center; }
.hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p.sub { margin: 14px auto 0; max-width: 640px; color: var(--muted); font-size: 1.1rem; }
.badges { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: .88rem; }
.badges span { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: #374151; }
.search-wrap { margin: 30px auto 0; max-width: 560px; position: relative; }
.search-wrap input {
  width: 100%; padding: 15px 20px 15px 48px; font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface);
  outline: none; transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow);
}
.search-wrap input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(249, 115, 22, .12); }
.search-wrap .icon { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); }

/* Tool grid */
.section { padding: 26px 0 8px; }
.section h2 { font-size: 1.25rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 14px; }
.card {
  position: relative; display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #fcd9b8; }
.card .ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-soft); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.card h3 { font-size: .98rem; line-height: 1.3; }
.card p { font-size: .82rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.card.soon { opacity: .55; }
.card.soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.card .badge {
  position: absolute; top: 10px; inset-inline-end: 10px; font-size: .66rem; font-weight: 700;
  background: var(--soft); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}
.card .badge.live { background: #ecfdf3; color: var(--green); border-color: #bbf0cd; }

/* Why section */
.why { margin: 48px 0 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.why .item { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.why .item .big { font-size: 1.6rem; }
.why .item h3 { margin: 8px 0 4px; font-size: 1.02rem; }
.why .item p { color: var(--muted); font-size: .9rem; }

/* Footer */
.site-footer { margin-top: 60px; background: var(--brand-dark); color: #9ca3af; font-size: .9rem; }
.site-footer .container { padding: 34px 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.site-footer a { color: #d1d5db; margin-inline-end: 16px; }
.site-footer a:hover { color: #fff; }

/* ===== Tool page ===== */
.crumbs { font-size: .85rem; color: var(--muted); padding: 18px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: #d1d5db; }
.crumbs b { color: var(--ink); }
.tool-head { padding: 18px 0 10px; text-align: center; }
.tool-head h1 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.tool-head p { color: var(--muted); max-width: 620px; margin: 8px auto 0; }
.tool-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 24px; margin: 20px auto 0; max-width: 860px;
}
.dropzone {
  border: 2px dashed #d1d5db; border-radius: 14px; padding: 46px 20px; text-align: center;
  cursor: pointer; background: var(--soft); transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .big { font-size: 2.2rem; }
.dropzone strong { display: block; margin-top: 8px; font-size: 1.05rem; }
.dropzone small { color: var(--muted); }
.controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 18px; font-size: .92rem; }
.controls label { display: flex; align-items: center; gap: 8px; color: #374151; font-weight: 600; }

/* Form fields inside any tool.
   Scoped to .tool-panel rather than .controls: most tools put fields in
   grids, editors and inline labels too, and those were rendering as raw
   browser defaults next to styled ones. */
.tool-panel input[type=text],
.tool-panel input[type=number],
.tool-panel input[type=search],
.tool-panel input[type=password],
.tool-panel input[type=email],
.tool-panel input[type=url],
.tool-panel input[type=tel],
.tool-panel input[type=date],
.tool-panel input[type=time],
.tool-panel input[type=month],
.tool-panel input[type=week],
.tool-panel input[type=datetime-local],
.tool-panel select {
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: .92rem;
  font-family: inherit;
  line-height: 1.35;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.tool-panel input:focus,
.tool-panel select:focus,
.tool-panel textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .14);
}
.tool-panel input::placeholder, .tool-panel textarea::placeholder { color: #9ca3af; }
.tool-panel input:disabled, .tool-panel select:disabled {
  background: var(--soft); color: var(--muted); cursor: not-allowed;
}
/* a search field keeps its clear button legible on the light ground */
.tool-panel input[type=search] { -webkit-appearance: none; appearance: none; }

.tool-panel input[type=range] { accent-color: var(--accent); width: 150px; max-width: 100%; }
.tool-panel input[type=checkbox], .tool-panel input[type=radio] {
  accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex: 0 0 auto;
}
/* the native colour well is a grey box in most browsers — make it a swatch */
.tool-panel input[type=color] {
  -webkit-appearance: none; appearance: none;
  width: 38px; height: 30px; padding: 2px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
}
.tool-panel input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.tool-panel input[type=color]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.tool-panel input[type=color]::-moz-color-swatch { border: 0; border-radius: 5px; }

/* labels that wrap a field on their own line, outside .controls */
.tool-panel label { color: #374151; }
.tool-panel label > input[type=text],
.tool-panel label > input[type=password],
.tool-panel label > input[type=search],
.tool-panel label > textarea { margin-top: 4px; }

/* editable cards and cells (kanban, and anything else inline-editable) */
.tool-panel [contenteditable="true"] { outline: none; }
.tool-panel [contenteditable="true"]:focus-visible {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .35); border-radius: 4px;
}
#qv { min-width: 34px; text-align: center; font-weight: 700; color: var(--accent); }
.results { margin-top: 6px; }
.res-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 6px;
  border-top: 1px solid var(--line); font-size: .92rem;
}
.res-row img.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.res-row .name { flex: 1; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-row .sizes { color: var(--muted); white-space: nowrap; }
.res-row .save { font-weight: 800; color: var(--green); white-space: nowrap; }
.res-row .save.worse { color: var(--muted); font-weight: 600; }
.btn {
  display: inline-block; border: 0; cursor: pointer; font-weight: 700; font-size: .92rem;
  background: var(--accent); color: #fff; border-radius: 999px; padding: 9px 20px;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.07); }
.btn.ghost { background: #fff; color: #374151; border: 1.5px solid var(--line); }
.summary { display: none; margin-top: 16px; padding: 14px 16px; background: #f0fdf4; border: 1px solid #d3f1de; border-radius: 12px; font-size: .95rem; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.privacy-note { text-align: center; margin-top: 14px; font-size: .85rem; color: var(--muted); }
.privacy-note b { color: var(--green); }

/* SEO content blocks */
.prose { max-width: 760px; margin: 46px auto 0; }
.prose h2 { font-size: 1.3rem; margin: 30px 0 10px; }
.prose p, .prose li { color: #4b5563; font-size: .96rem; }
.prose ol, .prose ul { padding-inline-start: 22px; margin-top: 6px; }
/* Specification table. The wrapper scrolls rather than the page: a long value
   in a narrow column is the usual way a table pushes a whole layout sideways. */
.spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spec { width: 100%; border-collapse: collapse; font-size: .93rem; }
.spec th, .spec td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.spec th { width: 34%; min-width: 116px; font-weight: 600; color: #374151; background: var(--soft); }
.spec td { color: #4b5563; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
@media (max-width: 460px) { .spec th { width: 40%; } .spec th, .spec td { padding: 8px 9px; } }

/* ---- feedback form ---- */
.fb-form { max-width: 640px; margin-top: 22px; }
.fb-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 14px; margin: 0 0 18px; }
.fb-form legend { font-weight: 600; font-size: .92rem; padding: 0 6px; }
.fb-radio { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .94rem; cursor: pointer; }
.fb-radio input { flex: none; }
.fb-form label { display: block; font-weight: 600; font-size: .94rem; margin: 16px 0 6px; }
.fb-form label small { display: block; font-weight: 400; color: #6b7280; font-size: .84rem; margin-top: 3px; }
.fb-form textarea, .fb-form input[type="email"], .fb-form select {
  width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #111827;
}
.fb-form textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.fb-form [aria-invalid="true"] { border-color: #dc2626; }
.fb-form :focus-visible { outline: 2px solid var(--brand, #f59e0b); outline-offset: 1px; }

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   the stylesheet skips a hidden field but fills in one that is merely elsewhere.
   Kept out of the tab order and out of the accessibility tree by the template. */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fb-cap { margin-top: 22px; padding: 14px 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.fb-cap label { margin: 0 0 8px; }
.fb-cap-row { display: flex; align-items: center; gap: 10px; }
.fb-sum { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.fb-cap input { width: 4.5em; font: inherit; font-size: 1.05rem; text-align: center; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.fb-form .btn { margin-top: 20px; }
.fb-note { font-size: .84rem; margin-top: 14px; line-height: 1.7; }
.fb-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 12px;
  padding: 12px 16px; margin: 18px 0 0; font-size: .93rem; }
.fb-done { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin-top: 20px; }
.fb-done h2 { margin: 0 0 8px; font-size: 1.2rem; }
.fb-cta { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .92rem; color: #6b7280; }

.faq details { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-top: 10px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin-top: 8px; }

@media (max-width: 560px) {
  .site-header .container { gap: 14px; }
  /* A fixed cap on the switcher was worse than no cap: it overrode the 100% and
     pushed the select out of its own box. Give the row the space instead. The
     wordmark goes and the mole stays — it is the recognisable half, it still
     links home, and thirteen language names need the room more than the letters
     do. The name is read out for anyone who cannot see it. */
  .logo b, .logo span { display: none; }
  .logo { gap: 0; }
  /* The section links fold away, but the burrow stays: on a phone it is the
     way back to your own stash, and the footer is a long scroll from here. */
  .nav { gap: 0; }
  .nav a:not(.burrow-link) { display: none; }
  .burrow-link { padding: 5px 11px 5px 8px; font-size: .88rem; }
  .controls { gap: 12px; }
}

/* ---------------------------------------------------- burrow (app home) */
.burrow-page { max-width: 720px; padding-top: 28px; padding-bottom: 48px; }
.burrow-hero { text-align: center; margin-bottom: 20px; }
.burrow-hero h1 { font-size: 1.7rem; margin: 0 0 .4rem; }
.burrow-hero p { color: var(--muted); margin: 0; }
.burrow-mount { margin-bottom: 22px; }
.burrow-offline h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.burrow-prog { margin-top: 12px; }
.burrow-bar {
  height: 8px; border-radius: 99px; background: var(--line); overflow: hidden;
}
.burrow-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #f97316, #fbbf24);
  transition: width .18s linear;
}
.burrow-back { text-align: center; margin-top: 20px; }
.burrow-back a { color: var(--muted); text-decoration: none; font-size: .92rem; }
.burrow-back a:hover { color: var(--ink); }

/* Installed on a phone the page runs edge to edge, so the header and footer
   have to clear the notch and the home indicator themselves — the browser is
   no longer there to do it. */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top); }
  .site-footer { padding-bottom: calc(env(safe-area-inset-bottom) + 8px); }
  .burrow-page { padding-top: 12px; }
}

.burrow-how {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid #f6d9c2;
}
.burrow-how h3 { font-size: .98rem; margin: 0 0 .5rem; }
.burrow-how ol { margin: 0 0 .6rem; padding-inline-start: 1.2rem; font-size: .92rem; }
.burrow-how li { margin-bottom: .25rem; }
.burrow-how p { font-size: .84rem; margin: 0; }
.burrow-checks { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .84rem; }
.burrow-checks li { padding: 1px 0; font-family: Consolas, ui-monospace, monospace; }
.burrow-checks li.ok { color: var(--green); }
.burrow-checks li.bad { color: #dc2626; font-weight: 600; }

/* ------------------------------------------------------ invoice generator */
.inv .inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 900px) { .inv .inv-grid { grid-template-columns: 1fr; } }
.inv-field { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 12px; }
.inv-field > input, .inv-field > select, .inv-field > textarea { margin-top: 4px; width: 100%; }
.inv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-h { font-size: .95rem; margin: 18px 0 8px; }
.inv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.inv-logo {
  width: 150px; height: 74px; border: 2px dashed var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--muted); font-size: .84rem; overflow: hidden; background: var(--soft);
}
.inv-logo:hover { border-color: var(--accent); background: var(--accent-soft); }
.inv-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.inv-row { display: grid; grid-template-columns: 1fr 66px 84px 92px 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.inv-row .inv-amt { text-align: end; font-size: .88rem; font-weight: 600; }
.inv-row .tm-x {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px;
}
.inv-row .tm-x:hover { color: #b91c1c; }

/* the preview is a sheet of paper, so what you see is what prints */
.inv-preview { position: sticky; top: 84px; align-self: start; }
.inv-sheet {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-lg); padding: 26px; font-size: .8rem; color: #1c1c22;
  min-height: 420px;
}
.inv-sheet .r { text-align: end; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.inv-plogo { max-width: 140px; max-height: 64px; object-fit: contain; }
.inv-title { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; }
.inv-num { color: var(--muted); font-size: .82rem; }
.inv-parties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 14px; line-height: 1.45; }
.inv-meta { margin-inline-start: auto; font-size: .78rem; }
.inv-meta td { padding: 1px 0 1px 14px; }
.inv-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.inv-table th { background: #21263a; color: #fff; padding: 7px 8px; font-size: .74rem; font-weight: 600; text-align: start; }
.inv-table td { padding: 7px 8px; border-bottom: 1px solid #e9e9ee; vertical-align: top; }
.inv-sums { margin-inline-start: auto; margin-top: 12px; font-size: .82rem; }
.inv-sums td { padding: 3px 0 3px 22px; color: #55555f; }
.inv-sums tr.tot td { font-weight: 800; font-size: .95rem; color: #12121a; padding-top: 7px; }
.inv-note { margin-top: 16px; font-size: .76rem; color: #44444e; line-height: 1.5; }

/* -------------------------------------------------------- résumé builder */
.cv-entry { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--soft); }
.cv-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cv-rm { padding: 3px 12px; font-size: .8rem; }
.cv-sheet {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow-lg); padding: 26px 28px; margin-bottom: 14px;
  font-size: .78rem; color: #17171d; line-height: 1.45;
  /* A4 proportions, so the preview is the page rather than a suggestion */
  aspect-ratio: 210 / 297; overflow: hidden;
}
.cv-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.cv-title { font-size: .95rem; color: #55555f; }
.cv-contact { font-size: .72rem; color: #66666f; margin-top: 3px; }
.cv-head { margin-bottom: 10px; }
.cv-sec {
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px; margin: 12px 0 7px;
}
.cv-para { margin: 0 0 6px; }
.cv-entry-p { margin-bottom: 9px; }
.cv-role { font-size: .84rem; }
.cv-org { color: #55555f; font-weight: 500; }
.cv-meta { font-size: .7rem; color: #77777f; margin-top: 1px; }
.cv-bul { margin: 4px 0 0 15px; padding: 0; }
.cv-bul li { margin-bottom: 2px; }

/* --------------------------------------------------- readability checker */
.rd-head { display: flex; align-items: center; gap: 22px; margin: 20px 0 8px; flex-wrap: wrap; }
.rd-score { text-align: center; min-width: 108px; }
.rd-num { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.rd-cap { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.rd-verdict { flex: 1 1 220px; }
.rd-band { font-size: 1.3rem; font-weight: 700; }
.rd-warn {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  padding: 10px 13px; font-size: .87rem; color: #78350f; margin: 12px 0;
}
.rd-h { font-size: 1rem; margin: 22px 0 10px; }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.rd-cell {
  background: var(--soft); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 12px; text-align: center;
}
.rd-cell b { display: block; font-size: 1.25rem; font-weight: 800; }
.rd-cell span { font-size: .76rem; color: var(--muted); }
.rd-sent {
  border-inline-start: 3px solid #f59e0b; background: var(--soft);
  border-radius: 0 10px 10px 0; padding: 10px 13px; margin-bottom: 9px;
}
.rd-sent-meta { display: flex; gap: 10px; align-items: baseline; font-size: .78rem; margin-bottom: 4px; }
.rd-sent-meta span { color: var(--muted); }
.rd-sent p { margin: 0; font-size: .92rem; line-height: 1.5; }

/* ----------------------------------------------------- certificate maker */
.cert-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.15fr); gap: 22px; align-items: start; }
@media (max-width: 780px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-form .controls { margin-bottom: 4px; }
.cert-h { font-size: .95rem; margin: 16px 0 6px; }
.cert-preview { position: sticky; top: 80px; }
.cert-sheet {
  position: relative; width: 100%; aspect-ratio: 297 / 210;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  /* the preview scales with its own width, so text keeps its proportions
     whatever size the panel ends up */
  container-type: inline-size;
}
.cert-ring { position: absolute; border-style: solid; border-radius: 2px; }
.cert-t { position: absolute; white-space: nowrap; line-height: 1; }
.cert-c { transform: translateX(-50%); }
.cert-line { position: absolute; border-bottom: 1px solid #8a8a94; }

/* --------------------------------------------------------- whiteboard */
.wb-panel { padding: 14px; }
.wb-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.wb-group { display: flex; gap: 4px; align-items: center; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.wb-right { margin-inline-start: auto; background: none; border: 0; padding: 0; }
.wb-t {
  width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent;
  cursor: pointer; font-size: 1rem; line-height: 1; color: var(--ink);
}
.wb-t:hover:not(:disabled) { background: #fff; box-shadow: var(--shadow); }
.wb-t.on { background: var(--accent); color: #fff; }
.wb-t:disabled { opacity: .3; cursor: default; }
.wb-w { display: flex; align-items: center; padding: 0 6px; }
.wb-w input[type=range] { width: 84px; }
.wb-stage {
  position: relative; width: 100%; height: min(62vh, 560px);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px) 0 0 / 24px 24px,
    #fff;
  touch-action: none;             /* or the browser pans instead of drawing */
}
.wb-stage canvas { display: block; }
.wb-stage[data-tool="erase"] { cursor: cell; }
.wb-stage[data-tool="text"] { cursor: text; }
.wb-stage[data-tool="pen"] { cursor: crosshair; }
.wb-typer {
  position: absolute; border: 1px dashed var(--accent); background: rgba(255,255,255,.94);
  border-radius: 4px; padding: 2px 6px; font-family: sans-serif; outline: none; min-width: 160px;
}
.wb-status { font-size: .84rem; margin-top: 8px; }

/* ---------------------------------------------------------------- flowchart */
.fc-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); margin-bottom: 10px; }
.fc-group { display: flex; gap: 4px; align-items: center; }
.fc-group + .fc-group { padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
.fc-right { margin-inline-start: auto; border-inline-start: 0; padding-inline-start: 0; }
.fc-t { width: 38px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 16px; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); padding: 0; }
.fc-t:hover:not(:disabled) { border-color: var(--accent); }
.fc-t.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fc-t:disabled { opacity: .4; cursor: default; }

.fc-hint { margin: 0 0 8px; font-size: .88rem; color: var(--muted); min-height: 1.2em; }

.fc-stage { position: relative; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); height: 62vh; min-height: 380px; overflow: hidden;
  /* the dotted grid is a background image, so it never lands in an export */
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px; }
.fc-stage canvas { display: block; touch-action: none; cursor: default; }
.fc-stage.fc-connect canvas { cursor: crosshair; }
.fc-stage.fc-erase canvas { cursor: not-allowed; }
.fc-terminator canvas, .fc-process canvas, .fc-decision canvas,
.fc-io canvas, .fc-circle canvas { cursor: copy; }

.fc-typer { position: absolute; z-index: 3; font: 13px system-ui, sans-serif;
  text-align: center; padding: 4px 6px; border: 2px solid var(--accent);
  border-radius: 6px; background: #fff; color: #111827; }
.fc-status { margin: 10px 0 0; font-size: .85rem; }

@media (max-width: 560px) {
  .fc-group + .fc-group { padding-inline-start: 0; border-inline-start: 0; }
  .fc-right { margin-inline-start: 0; }
  .fc-stage { height: 56vh; }
}

/* ---------------------------------------------------------------------- RTL
   Arabic is served with dir="rtl" on <html>, and every directional rule above
   is written with logical properties, so the browser mirrors the layout on its
   own. What it will not mirror is content that is inherently left-to-right:
   code, numbers with units, and anything drawn on a canvas. */
[dir="rtl"] pre, [dir="rtl"] code, [dir="rtl"] .mono,
[dir="rtl"] input[type="number"], [dir="rtl"] .tm-pct { direction: ltr; }
[dir="rtl"] pre, [dir="rtl"] code { text-align: left; }
/* a canvas is drawn in its own coordinates; mirroring it would mirror the
   drawing, so the element keeps its own direction while the page flips */
[dir="rtl"] canvas { direction: ltr; }

/* -------------------------------------------------------------- typing test */
.tt-target {
  font-size: 1.15rem; line-height: 2; padding: 16px;
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
  font-family: Consolas, monospace;
  /* pre-wrap, not nowrap and not normal: the passage is rendered one character
     per span so a run of spaces has to survive, and lines still have to break
     somewhere. break-word is the backstop for a language written without them. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ------------------------------------------------- overflow containment */
/* A <pre> with no width limit does not scroll — it grows. overflow-x:auto only
   does anything once the element is actually constrained, so without max-width
   the block widens to fit its longest line and drags the whole page out with
   it. On a phone that turns a JWT or a minified stylesheet into a page that
   scrolls sideways, with the nav and the footer stretched along for the ride.
   The ones holding art rather than text — the ASCII converter, the hex dump,
   the word search — must not wrap, so scrolling inside their own box is the
   right answer for them too. */
pre { max-width: 100%; overflow-x: auto; }

/* And the reason max-width alone was not enough. A grid or flex child starts at
   min-width:auto, which means "never narrower than my own content" — so a <pre>
   holding one long line blows its track out, the track blows the panel out, and
   100% of a container that is already too wide is still too wide. The tracks
   inside a tool panel have to be allowed to shrink; the thing inside them is
   what scrolls. Scoped to the structural wrappers rather than every element, so
   controls keep their own minimums. */
.tool-panel > div,
.tool-panel > div > div,
.tool-panel > form > div { min-width: 0; }

/* Same trap, different element: a wide table pushes the page rather than
   scrolling, unless something around it is allowed to scroll instead. */
.table-scroll { max-width: 100%; overflow-x: auto; }

/* Long unbroken strings — a base64 blob, a hash, a URL, a token — have no
   break opportunity at all, so a plain <div> holding one behaves exactly like
   the <pre> above. Anything marked as output breaks mid-string rather than
   pushing the layout. */
.tm-out, .out, output { overflow-wrap: anywhere; word-break: break-word; }

/* ----------------------------------------------------- send text to phone */
.beam-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.beam-tab { flex: 1; padding: 10px; font-size: .95rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); }
.beam-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.beam-stage { display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 14px; }
/* white behind the code whatever the page theme is — a dark-mode QR with an
   inverted quiet zone is one many phone cameras will not lock on to */
.beam-stage canvas { background: #fff; border-radius: 10px; padding: 10px;
  width: min(360px, 82vw); height: auto; image-rendering: pixelated; }
.beam-stage video { width: min(420px, 92vw); border-radius: 12px; background: #000; }
.beam-bar { width: min(420px, 92vw); height: 8px; border-radius: 999px;
  background: var(--soft); overflow: hidden; }
.beam-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.beam-count { margin: 0; font-size: .88rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.beam-note { margin-top: 10px; font-size: .88rem; min-height: 1.2em; }
.beam-speed { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.beam-speed input { width: 110px; }

/* -------------------------------------------------------------- mind map */
.mm-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); margin-bottom: 10px; }
.mm-group { display: flex; gap: 4px; align-items: center; }
.mm-group + .mm-group { padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
.mm-right { margin-inline-start: auto; border-inline-start: 0; padding-inline-start: 0; }
.mm-stage { height: 60vh; min-height: 360px; }
.mm-h { font-size: .92rem; font-weight: 600; margin: 16px 0 6px; }
.mm-note { font-size: .85rem; margin-top: 8px; }
@media (max-width: 560px) {
  .mm-group + .mm-group { padding-inline-start: 0; border-inline-start: 0; }
  .mm-right { margin-inline-start: 0; }
  .mm-stage { height: 54vh; }
}

/* --------------------------------------------------------- photo collage */
.cg-h { font-size: .92rem; font-weight: 600; margin: 18px 0 8px; }
.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-chip { padding: 6px 12px; font-size: .86rem; cursor: pointer; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.cg-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* the arrangements are shown as themselves — a list of names would make you
   picture each one before you could choose it */
.cg-layouts { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-layout { padding: 5px; cursor: pointer; line-height: 0;
  border: 2px solid var(--line); border-radius: 8px; background: var(--bg); }
.cg-layout:hover { border-color: var(--accent); }
.cg-layout.on { border-color: var(--accent); background: var(--accent-soft); }
.cg-layout svg rect { fill: var(--muted); }
.cg-layout.on svg rect { fill: var(--accent); }

.cg-controls { justify-content: flex-start; gap: 18px; }
.cg-controls input[type="range"] { width: 100px; }
.cg-hint { font-size: .86rem; color: var(--muted); margin: 14px 0 8px; }
.cg-stage { text-align: center; }
.cg-stage canvas { max-width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); touch-action: none; cursor: grab; }
.cg-stage canvas:active { cursor: grabbing; }

.cg-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-thumb { position: relative; width: 74px; height: 74px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line); cursor: grab; }
.cg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-x { position: absolute; top: 2px; inset-inline-end: 2px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: .7rem; cursor: pointer; padding: 0; line-height: 20px; }
.cg-size { margin-top: 10px; font-size: .85rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- standalone documents */
.doc { max-width: 760px; padding-top: 8px; }
.doc h1 { font-size: 2rem; margin: 10px 0 6px; letter-spacing: -.02em; }
.doc-intro { font-size: 1.05rem; color: var(--muted); margin-bottom: 6px; }
.doc-date { font-size: .84rem; margin-bottom: 26px; }
.doc-body h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.doc-body p { margin-bottom: 12px; }
.doc-body code { background: var(--soft); padding: 1px 5px; border-radius: 4px;
  font-size: .92em; }

/* ------------------------------------------------------------ audio tools */
.fx-controls { justify-content: flex-start; gap: 20px; }
.fx-controls input[type="range"] { width: 110px; }
.fx-meta { text-align: center; margin-bottom: 12px; }
.fx-player { width: 100%; margin-top: 14px; }

.bpm-result { text-align: center; margin: 24px 0 10px; }
.bpm-big { font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.bpm-unit { font-size: .9rem; letter-spacing: .18em; color: var(--muted); margin-top: 4px; }
.bpm-note { text-align: center; min-height: 1.2em; margin-top: 12px; }

.vr-meta { text-align: center; margin-bottom: 12px; }

.ht-warn { background: var(--soft); border-inline-start: 3px solid #f59e0b;
  padding: 10px 14px; border-radius: 8px; font-size: .9rem; margin-bottom: 18px; }
.ht-freq { font-size: 3.2rem; font-weight: 800; text-align: center; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.ht-ask { text-align: center; margin: 4px 0 14px; }
.ht-bar { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden;
  margin: 18px auto 0; max-width: 420px; }
.ht-fill { height: 100%; width: 0; background: var(--accent); transition: width .25s; }
.ht-result { font-size: 1.05rem; text-align: center; margin: 10px 0 18px; }
.ht-table { width: 100%; max-width: 360px; margin: 0 auto; border-collapse: collapse;
  font-size: .9rem; }
.ht-table td { padding: 5px 10px; border-bottom: 1px solid var(--line); }
.ht-table td:last-child { text-align: end; }
.ht-y { color: var(--green); font-weight: 600; }
.ht-n { color: var(--muted); }
.ht-note { font-size: .84rem; text-align: center; margin-top: 16px; }

.ps-dial { display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 20px 0 6px; }
.ps-value { min-width: 120px; text-align: center; }
.ps-value span { display: block; font-size: 3rem; font-weight: 800; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.ps-value small { color: var(--muted); font-size: .86rem; }
.ps-range { width: min(420px, 90%); display: block; margin: 8px auto 18px; }