/* ============================================================
   Stacklane — shared styles

   One accent (deep blue), neutral greys, a 4/8/12/16/24/32/48/64
   spacing scale, and one container. No framework, no build step,
   no external font or image. See DESIGN.md for the rules.
   ============================================================ */

/* The home page is built from JSON after load, so its containers are
   empty at first paint. Painting that skeleton and then filling it moved
   everything below it by a measured 0.199 CLS at 375px. While the boot
   class is on the root, main is not painted; chrome.js removes it as soon
   as the content exists. Only the home page sets the class, and only
   visibility changes, so no box is ever resized. */
.home-boot main { visibility: hidden; }
@media (scripting: none) { .home-boot main { visibility: visible; } }

:root {
  /* Colour */
  --blue-700: #1b3fa0;
  --blue-600: #1d4ed8;
  --blue-50: #eef3ff;
  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --surface: #ffffff;
  --band: #f7f9fc;
  --good: #0f7b52;
  --good-soft: #e8f5ef;
  --warn: #8a5a00;
  --warn-soft: #fff6e5;
  --danger: #b3261e;
  --danger-soft: #fdecea;

  /* Compatibility aliases used by existing markup */
  --accent: var(--blue-600);
  --accent-ink: #ffffff;
  --accent-soft: var(--blue-50);
  --ink-soft: var(--ink-2);
  --bg: var(--surface);
  --bg-soft: var(--band);

  /* Spacing: 4, 8, 12, 16, 24, 32, 48, 64 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radius and shadow */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --radius: var(--r-lg);
  --shadow-1: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 3px rgba(17, 24, 39, .04);
  --shadow-2: 0 1px 2px rgba(17, 24, 39, .06), 0 12px 32px rgba(17, 24, 39, .08);
  --shadow: var(--shadow-2);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --container: 1120px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
}

/* ---------- Type ---------- */
h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 var(--sp-3); font-weight: 700; }
h1 { font-size: clamp(2rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 2.2vw, 1.625rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 var(--sp-4); max-width: 70ch; }
small, .note { font-size: .875rem; color: var(--ink-2); }
strong { font-weight: 700; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One visible focus ring for every control. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Container ----------
   One width for every section, band or not. Bands paint edge to edge;
   their content stays in here. */
.container,
.wrap {
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) {
  .container, .wrap { padding-inline: var(--sp-5); }
}
.narrow { width: min(760px, 100%); margin-inline: auto; padding-inline: var(--sp-4); }

.eyebrow {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-3);
}
.lede { font-size: 1.0625rem; color: var(--ink-2); }

/* ---------- Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-in {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--ink);
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 28px; height: 28px; flex: none; color: var(--blue-600); }
.brand-word { color: var(--ink); }
.brand-word span { color: var(--blue-600); }

.head-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-inline-start: auto;
}
.head-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: .9375rem;
}
.head-nav > a:hover { color: var(--ink); text-decoration: none; }

/* Header search: compact field that filters into a small list. */
.head-search { position: relative; flex: 0 1 260px; }
.head-search input {
  min-height: 44px;
  font-size: .9375rem;
  padding-inline-start: 36px;
  border-radius: var(--r-pill);
  background: var(--band);
  border-color: var(--line);
}
.head-search::before {
  content: "";
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: currentColor;
  color: var(--ink-3);
  -webkit-mask: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  mask: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  pointer-events: none;
}
.head-results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--sp-2));
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  max-height: 60vh;
  overflow: auto;
  z-index: 40;
}
.head-results[hidden] { display: none; }
.head-results a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: .9375rem;
}
.head-results a:hover, .head-results a:focus-visible { background: var(--blue-50); text-decoration: none; }
.head-results .empty { padding: var(--sp-2); font-size: .875rem; color: var(--ink-2); }

/* Mobile menu: <details> only, no JavaScript. */
.menu { display: none; }
.menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: "▾"; font-size: .8em; color: var(--ink-3); }
.menu[open] > summary { border-color: var(--blue-600); color: var(--blue-600); }
.menu-panel {
  position: absolute;
  inset-inline: var(--sp-4);
  top: calc(100% + var(--sp-2));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: var(--sp-3);
  z-index: 40;
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: .9375rem;
}
.menu-panel a:hover { background: var(--blue-50); text-decoration: none; }
.menu-panel .menu-sep { height: 1px; background: var(--line); margin: var(--sp-2) 0; }

@media (max-width: 899px) {
  .head-nav { display: none; }
  /* The panel is absolutely positioned against .head-in, not against this
     <details>: measured against the details it resolved to the width of the
     "Menu" button (about 53px) and every entry wrapped into a narrow column. */
  .menu { display: block; margin-inline-start: auto; }
  .head-in { position: relative; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.btn:hover { background: var(--blue-50); border-color: var(--blue-600); color: var(--blue-600); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--band); color: var(--ink); }
.btn-secondary:active { background: var(--band); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--blue-50); }
.btn-ghost:active { background: var(--blue-50); }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

button, .icon-btn, summary, label[for] { min-height: 44px; }
button { font: inherit; }

/* ---------- Sections and bands ---------- */
section, .band {
  padding-block: var(--sp-7);
}
@media (min-width: 768px) {
  section, .band { padding-block: var(--sp-8); }
}
.section-soft, .band-soft {
  background: var(--band);
  border-block: 1px solid var(--line);
}
.section-head { max-width: 70ch; margin-bottom: var(--sp-6); }
.section-head p { margin-bottom: 0; }

/* ---------- Hero (home) ---------- */
.hero {
  background:
    radial-gradient(900px 320px at 50% -10%, var(--blue-50), transparent 70%);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding-block: var(--sp-7);
}
@media (min-width: 768px) {
  .hero { padding-block: var(--sp-8); }
}
.hero .eyebrow { margin-bottom: var(--sp-3); }
.hero h1 { max-width: 22ch; margin-inline: auto; margin-bottom: var(--sp-3); }
.hero .lede { max-width: 58ch; margin-inline: auto; font-size: 1.125rem; }
/* Hero call-to-action rows: centred, so a hero with buttons reads as one
   block (the root language picker uses this). */
.hero .btn-row { justify-content: center; margin-top: var(--sp-5); }
.hero .note { margin-top: var(--sp-3); }

.search-wrap { margin: var(--sp-6) auto 0; max-width: 620px; text-align: start; }
.search-box { position: relative; }
.search-box input {
  min-height: 56px;
  font-size: 1.0625rem;
  padding-inline-start: 44px;
  border-radius: var(--r-pill);
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
}
.search-box::before {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--ink-3);
  background: currentColor;
  -webkit-mask: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  mask: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  pointer-events: none;
}
.search-count { margin: var(--sp-2) 0 0; font-size: .875rem; color: var(--ink-2); text-align: center; }
.search-wrap .tk-field { margin-bottom: 0; }
.search-wrap > label { text-align: center; }

/* Trust strip: only claims that are true of every tool. */
.trust {
  display: grid;
  gap: var(--sp-3) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust li {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: .9375rem;
  color: var(--ink-2);
}
.trust svg { flex: none; width: 20px; height: 20px; color: var(--good); margin-top: 2px; }

.popular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.popular-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-inline-end: var(--sp-1);
}
.popular a, .chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: .9375rem;
}
.popular a:hover, .chip:hover { border-color: var(--blue-600); color: var(--blue-600); text-decoration: none; }

/* ---------- Cards and grids ---------- */
.grid, .card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: stretch;
}
.grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  color: inherit;
}
.card h3 { margin: 0 0 var(--sp-2); font-size: 1.125rem; }
.card p {
  margin: 0;
  color: var(--ink-2);
  font-size: .9375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.card, .tool-card {
  text-decoration: none;
  min-height: 44px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.card:hover, .tool-card:hover {
  border-color: var(--blue-600);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}
a.card:hover h3, .tool-card:hover h3 { color: var(--blue-600); }
.tool-card[hidden] { display: none; }
.card-kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-2);
}
.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--blue-50);
  color: var(--blue-700);
  margin-top: auto;
}
.badge-good { background: var(--good-soft); color: var(--good); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-row { margin: var(--sp-3) 0 0; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Category card: icon tile, name, one line, count. */
.cat-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-1) var(--sp-4);
  align-content: start;
  padding: var(--sp-5);
}
.cat-icon {
  grid-row: span 3;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--blue-600);
  display: grid;
  place-items: center;
}
.cat-icon svg { width: 22px; height: 22px; }
.cat-card h3 { font-size: 1.0625rem; margin: 0; }
.cat-card p { font-size: .9375rem; }
.cat-card .badge { margin-top: var(--sp-2); }

/* Compact tool row used inside a home category section. */
.tool-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
}
.tool-row:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
  text-decoration: none;
}
.tool-row .row-icon,
.row-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--blue-50);
  color: var(--blue-600);
  display: grid;
  place-items: center;
}
.tool-row .row-icon svg,
.row-icon svg { width: 18px; height: 18px; }

/* Compact row list used by the home page's per-category sections. */
.row-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.cat-section { padding-block: var(--sp-7); border-top: 1px solid var(--line); }
.cat-section:first-of-type { border-top: none; }
.cat-section > .container > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.cat-section h2 { margin: 0; font-size: 1.375rem; }
.cat-section .view-all { font-size: .9375rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Forms ---------- */
label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: var(--sp-1); color: var(--ink); }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: 1px;
  border-color: var(--blue-600);
}
textarea { resize: vertical; min-height: 120px; }
.field { margin-bottom: var(--sp-4); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.form-note { font-size: .875rem; color: var(--ink-2); margin-top: var(--sp-2); }

/* ---------- Panels, alerts, tables ---------- */
.panel {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.alert {
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: .9375rem;
  margin-bottom: var(--sp-4);
  border: 1px solid transparent;
}
.alert-info { background: var(--blue-50); color: var(--blue-700); border-color: #c7d6fb; }
.alert-warn { background: var(--warn-soft); color: var(--warn); border-color: #efd9a9; }
.alert[hidden] { display: none; }

.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th {
  text-align: start;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.table td { padding: var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.table input { padding: var(--sp-2); }
.table .num { text-align: end; }
.table .amount-cell {
  text-align: end;
  font-family: var(--mono);
  white-space: nowrap;
  padding-top: var(--sp-3);
}
@media (max-width: 700px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--surface);
  }
  .table td { border-bottom: none; padding: var(--sp-1) 0; }
  .table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 2px;
  }
  .table input { font-size: 16px; min-height: 44px; }
  .table .amount-cell { text-align: end; padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
}

/* ---------- Business tools (invoice, margin, …) ---------- */
.app { display: grid; grid-template-columns: 1.55fr .95fr; gap: var(--sp-5); align-items: start; }
.app-side { position: sticky; top: 88px; }
.tool-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.totals { font-family: var(--mono); font-size: .9375rem; }
.totals .row { display: flex; justify-content: space-between; padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line); }
.totals .row.grand {
  border-bottom: none;
  border-top: 2px solid var(--ink);
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  font-size: 1.25rem;
  font-weight: 700;
}
.totals .row.grand span:last-child { color: var(--blue-600); }

/* ---------- Business pages: card, field and answer treatment ----------
   .panel, .field and .totals are used by the seven hand-written
   Business pages only, so nothing here can reach a tool page. Every
   rule below changes colour, border-colour, radius, shadow or an
   absolutely positioned pseudo-element — never a box that carries
   text, so no field or panel changes size. */
.panel {
  background-color: var(--surface);
  background-image: linear-gradient(180deg, #fbfcff 0, var(--surface) 180px);
  border-color: var(--line);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .05),
    0 12px 28px -16px rgba(16, 24, 40, .18),
    0 32px 64px -42px rgba(29, 78, 216, .22);
}
.field input,
.field select,
.field textarea {
  border-radius: var(--r-md);
  border-color: #dfe5ee;
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #b9c6e4; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue-600);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .13), inset 0 1px 2px rgba(16, 24, 40, .04);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled { background-color: #f3f5f9; color: var(--ink-3); box-shadow: none; }
/* The total is the answer on these pages: a blue tile painted behind the
   row by a pseudo-element, so the row keeps its exact geometry. */
.totals .row.grand {
  position: relative;
  border-top-color: transparent;
  color: #fff;
}
.totals .row.grand::before {
  content: "";
  position: absolute;
  inset: -6px -14px;
  border-radius: var(--r-md);
  background-image: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  box-shadow: 0 10px 22px -14px rgba(21, 58, 168, .85), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.totals .row.grand > span { position: relative; z-index: 1; }
.totals .row.grand span:first-child { color: rgba(255, 255, 255, .9); }
.totals .row.grand span:last-child { color: #fff; }
@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; }
  .app-side { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .field input, .field select, .field textarea { transition: none; }
}

.icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
}
.icon-btn:hover { border-color: var(--danger); color: var(--danger); }
.icon-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ---------- Tool page ---------- */
.crumbs { font-size: .875rem; color: var(--ink-3); margin-bottom: var(--sp-3); }
.crumbs a {
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-1);
}
.crumbs .sep { margin-inline: var(--sp-1); color: var(--line-2); }

.tool-head { margin-bottom: var(--sp-5); }
.tool-head h1 { margin-bottom: var(--sp-2); }
.tool-head .lede { margin-bottom: 0; max-width: 65ch; }
.tool-head .badge-row .badge { margin-top: 0; }

.tool-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
@media (min-width: 1024px) {
  .tool-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-7); }
}
.tool-main { min-width: 0; }
.tool-side { min-width: 0; }
@media (min-width: 1024px) {
  .tool-side { position: sticky; top: 88px; display: grid; gap: var(--sp-5); }
}

/* The tool card is the page's centre: white surface, soft border,
   a result area that keeps its height. */
.tool-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  min-height: 200px;
}
@media (min-width: 768px) {
  .tool-panel { padding: var(--sp-5); min-height: 240px; }
}
.tool-ui { display: grid; gap: var(--sp-4); }

.tool-section { padding-block: 0; margin-block: var(--sp-6); max-width: 72ch; }
.tool-section h2 { margin-bottom: var(--sp-3); }
.tool-section p:last-child { margin-bottom: 0; }
.tool-section .note { color: var(--ink-2); }
/* Section rhythm: a short accent rule sits in the space above each h2.
   It is an absolutely positioned pseudo-element, so no heading moves.
   No step numbers are drawn: the generated copy is a single paragraph,
   not a list of steps, and numbering it would invent structure. */
.tool-section > h2 { position: relative; }
.tool-section > h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -14px;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue-600);
  opacity: .85;
}



/* Worked example as a highlighted box. */
.worked {
  background: var(--blue-50);
  border: 1px solid #cfdcfb;
  border-inline-start: 4px solid var(--blue-600);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  font-size: .9375rem;
  color: var(--ink);
  white-space: pre-wrap;
}

.faq-list { margin: 0; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-4);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--sp-3) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--blue-600); font-weight: 700; }
.faq-item[open] summary::after { content: "−"; }
.faq-item { transition: border-color .16s ease, box-shadow .16s ease; }
.faq-item:hover { border-color: #cfd8e8; }
.faq-item[open] { border-color: #cfdcfb; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.faq-item p { color: var(--ink-2); font-size: .9375rem; margin: 0 0 var(--sp-4); max-width: 68ch; }

.how-it-works p { color: var(--ink-2); font-size: .9375rem; margin: 0 0 var(--sp-4); }
.how-it-works { margin-bottom: var(--sp-6); }

.related { display: grid; gap: var(--sp-2); }
.related a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: .9375rem;
  background-image: linear-gradient(180deg, #fff 0, #fbfcfe 100%);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.related a:hover, .related a:focus-visible {
  border-color: #c3d2f4;
  color: var(--blue-700);
  text-decoration: none;
  box-shadow: 0 8px 18px -14px rgba(16, 24, 40, .5), 0 1px 2px rgba(16, 24, 40, .05);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .related a:hover, .related a:focus-visible { transform: none; }
  .related a { transition: none; }
}
#related.grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tool-side h2 { font-size: 1.125rem; margin-bottom: var(--sp-3); }

/* ---------- Ad slots: structure only, no ads ----------
   Empty, hidden containers. While [hidden] they take no space and paint
   nothing: no border, no background, no label, no text.

   THE SWITCH: add data-ads="on" to <html> and every slot on the page
   turns on at once (chrome.js then drops the hidden attribute, and the
   rules below reserve a fixed size). Nothing else is needed, and no
   script, cookie, tracker or network call lives in this block. A future
   ads batch must re-check the network's current size and placement
   rules before anything is inserted. */
.ad-slot { display: none; }
.ad-slot[hidden] { display: none !important; height: 0; margin: 0; padding: 0; border: 0; }
html[data-ads="on"] .ad-slot {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  border-radius: var(--r-md);
}
html[data-ads="on"] .ad-slot[data-slot="A"],
html[data-ads="on"] .ad-slot[data-slot="B"] {
  /* 728x90 on desktop, 320x100 on a phone. Reserved here, in CSS, so a
     late-loading ad cannot move a single pixel of the page. The reserved
     height is the height of the unit itself, not a guess above it: a slot
     that reserves more than its ad leaves a hole, and one that reserves
     less lets the ad push the page down. */
  min-height: 90px;
  margin-block: var(--sp-6);
}
html[data-ads="on"] .ad-slot[data-slot="C"] { min-height: 250px; margin-top: var(--sp-5); }
@media (max-width: 719px) {
  html[data-ads="on"] .ad-slot[data-slot="A"],
  html[data-ads="on"] .ad-slot[data-slot="B"] { min-height: 100px; }
}
/* Slot A must sit at least 32px from any control. */
.tool-main > .ad-slot[data-slot="A"] { margin-top: var(--sp-6); }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 60;
  background: var(--blue-600);
  color: #fff;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.skip-link:focus { inset-inline-start: 0; }

.load-error {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
}

/* ---------- Footer ---------- */
footer, .site-foot { border-top: 1px solid var(--line); background: var(--surface); padding-block: var(--sp-7) var(--sp-5); }
.foot-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.foot-head {
  display: block;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-3);
}
.foot-cats ul, .foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.foot-grid a, .foot-cats a {
  color: var(--ink-2);
  font-size: .9375rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.foot-grid a:hover, .foot-cats a:hover { color: var(--blue-600); }
#site-footer a { display: inline-flex; align-items: center; }
.foot-copy {
  text-align: start;
  color: var(--ink-3);
  font-size: .875rem;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.foot-tagline { max-width: 34ch; margin-bottom: var(--sp-2); font-size: .9375rem; }

.lang-switch {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0 var(--sp-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: .9375rem;
  color: var(--ink-2);
}
.lang-switch:hover { border-color: var(--blue-600); color: var(--blue-600); text-decoration: none; }

/* ---------- ToolKit components (assets/tools/shared.js) ---------- */
.tk-field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.tk-field > label { font-weight: 600; font-size: .9375rem; }
.tk-field .hint { font-weight: 400; color: var(--ink-2); font-size: .875rem; margin-inline-start: var(--sp-1); }
.tk-field input, .tk-field select, .tk-field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.tk-field textarea { min-height: 8rem; resize: vertical; font-family: var(--mono); font-size: .875rem; }
.tk-field input:focus, .tk-field select:focus, .tk-field textarea:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: 1px;
  border-color: var(--blue-600);
}
.tk-field[hidden] { display: none; }

.tk-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.tk-grid-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tk-fields { display: grid; gap: var(--sp-4); }
.tk-fields .tk-field { margin-bottom: 0; }
.tk-swap .btn { width: 100%; }

.tk-check { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; font-size: .9375rem; cursor: pointer; }
.tk-check input { width: 20px; height: 20px; min-height: 20px; flex: none; }
.tk-checks { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
@media (min-width: 720px) {
  .tk-checks { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: var(--sp-5); }
}
.tk-modes { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3) var(--sp-3); margin: 0 0 var(--sp-4); }
.tk-modes legend { font-weight: 700; font-size: .875rem; padding: 0 var(--sp-1); }
.tk-modes .tk-check { font-size: .9375rem; }

.tk-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
.tk-actions .btn { flex: 1 1 100%; }
@media (min-width: 640px) {
  .tk-actions .btn { flex: 0 1 auto; min-width: 168px; max-width: 320px; }
}

.tk-msg {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--blue-50);
  border: 1px solid #c7d6fb;
  color: var(--blue-700);
  font-size: .9375rem;
}
.tk-msg[hidden] { display: none; }
.tk-msg.error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.tk-msg.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.tk-msg.ok { background: var(--good-soft); border-color: var(--good); color: var(--good); }

.tk-out { display: grid; gap: var(--sp-1); margin-top: var(--sp-4); min-height: 7.5rem; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1); }
.tk-out[hidden] { display: none; }
#tool-ui canvas.qr-canvas[hidden] { display: block; visibility: hidden; min-height: 220px; }
.tk-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  border-bottom: 1px dashed var(--line);
  padding: var(--sp-2) 0;
  font-size: .9375rem;
}
.tk-row:last-child { border-bottom: none; }
.tk-row-label { color: var(--ink-2); min-width: 0; }
.tk-row-value {
  font-family: var(--mono);
  font-weight: 600;
  text-align: end;
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
}
.tk-row.is-strong .tk-row-value { font-size: 1.125rem; color: var(--blue-600); }
.tool-section p, .tool-section li, .worked { overflow-wrap: break-word; }

.tk-file { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; min-height: 180px; transition: border-color .16s ease, background-color .16s ease; }
.tk-file:hover { border-color: var(--blue-600); background: var(--blue-50); }
.tk-file:focus-within { border-color: var(--blue-600); background: var(--blue-50); outline: 2px solid var(--blue-600); outline-offset: -2px; }
.tk-file.has-files { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.tk-file-label { font-weight: 600; font-size: .9375rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tk-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tk-file-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.tk-file-name { font-size: .875rem; color: var(--ink-2); font-family: var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: var(--sp-2) 0 0; }
.tk-file-name.has-files { color: var(--ink); }

.drop {
  border: 2px dashed var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--ink-2);
  font-size: .9375rem;
  background: var(--band);
  margin: var(--sp-4) 0;
  cursor: default; }
.drop.is-over { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); }
.drop.has-files { border-color: var(--good); background: var(--good-soft); color: var(--good); }.tk-file-name {
  font-size: .875rem;
  color: var(--ink-2);
  font-family: var(--mono);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-file-name.has-files { color: var(--ink); }

.tk-progress {
  position: relative;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.tk-progress[hidden] { display: none; }
.tk-progress-bar { height: 100%; width: 0; background: var(--blue-600); border-radius: var(--r-pill); }
.tk-progress.is-done .tk-progress-bar { background: var(--good); }
.tk-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 600;
}
.tk-chars { font-size: .875rem; color: var(--ink-2); margin: 0 0 var(--sp-3); }
.tk-preview { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
#tool-ui canvas, #tool-ui img.tk-preview { max-width: 100%; height: auto; }
.tk-preview[hidden] { display: none; }
.tk-mono { font-family: var(--mono); font-size: .875rem; white-space: pre-wrap; word-break: break-all; margin: 0; }
.colour-swatch { width: 100%; height: 56px; border-radius: var(--r-md); border: 1px solid var(--line); margin-bottom: var(--sp-3); }

/* Result readouts and status */
.readout {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blue-600);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.readout-sub { font-size: .9375rem; color: var(--ink-2); }
.tool-status {
  font-family: var(--mono);
  font-size: .875rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--band);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.tool-status[hidden] { display: none; }
.tool-status.is-error { background: var(--warn-soft); border-color: #efd9a9; color: var(--warn); }
.tool-status.is-ok { background: var(--good-soft); border-color: #b6e0cd; color: var(--good); }
.progress { height: 8px; border-radius: var(--r-pill); background: var(--band); border: 1px solid var(--line); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--blue-600); }
.progress[hidden] { display: none; }

/* Drop zone, item list, checks, ranges */
.drop {
  border: 2px dashed var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--ink-2);
  font-size: .9375rem;
  background: var(--band);
}
.drop.is-over { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-700); }
.itemlist { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.itemlist li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  font-size: .9375rem;
}
.itemlist .item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemlist .item-meta { color: var(--ink-3); font-family: var(--mono); font-size: .875rem; flex: none; }
.checks { display: grid; gap: var(--sp-1); }
.check-row { display: flex; align-items: center; gap: var(--sp-2); font-size: .9375rem; padding: var(--sp-1) 0; cursor: pointer; }
.check-row input { flex: none; }
.range-row { display: flex; align-items: center; gap: var(--sp-3); }
.range-row input[type="range"] { flex: 1; padding: 0; border: none; min-height: 44px; }
.range-val { font-family: var(--mono); font-weight: 700; min-width: 3.5ch; text-align: center; }

/* Steps and ticks (kept for existing pages) */
.steps { counter-reset: step; display: grid; gap: var(--sp-4); }
.steps .card { position: relative; padding-top: var(--sp-6); }
.steps .card::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  display: grid;
  place-items: center;
}
ul.ticks { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
ul.ticks li { padding-left: var(--sp-6); position: relative; margin-bottom: var(--sp-2); font-size: .9375rem; color: var(--ink-2); }
ul.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.prose h3 { margin-top: var(--sp-6); }
.prose ul { padding-inline-start: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }

/* ---------- Print ---------- */
.no-print { }
@media print {
  .site-head, .menu, footer, #site-footer, .no-print, .tool-actions, .icon-btn, .ad-slot { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .app, .tool-layout { display: block; }
  .panel, .card, .tool-panel { box-shadow: none; border-color: #ddd; }
  a { color: #000; }
  section { padding-block: var(--sp-4); }
  .container, .wrap, .narrow { width: 100%; padding-inline: 0; }
}

/* ============================================================
   Header and footer used by the seven hand-written Business pages.
   Same look as the generated .site-head, different markup.
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; }
.nav-links { display: flex; align-items: center; gap: var(--sp-5); margin-inline-start: auto; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: .9375rem;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links .btn { color: #fff; }
.nav-links .btn-secondary { color: var(--ink); }
@media (max-width: 899px) {
  .nav-links a.hide-sm { display: none; }
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
}
.footer-inner a { display: inline-flex; align-items: center; min-height: 44px; }
.brand span { color: var(--blue-600); }

/* ============================================================
   RTL — Arabic pages set dir="rtl" on <html>. These flip the few
   places where the layout is not already logical. Keep them intact.
   ============================================================ */
[dir="rtl"] body { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", sans-serif; }
[dir="rtl"] .crumbs,
[dir="rtl"] .readout,
[dir="rtl"] .tool-status { direction: rtl; }
[dir="rtl"] .prose ul { padding-inline-start: var(--sp-5); }
[dir="rtl"] .search-box input { padding-inline-start: 44px; padding-inline-end: var(--sp-3); }
[dir="rtl"] .search-box::before { inset-inline-start: 16px; }
[dir="rtl"] .itemlist .item-name { direction: rtl; text-align: start; }
[dir="rtl"] .num, [dir="rtl"] input, [dir="rtl"] output, [dir="rtl"] .readout { unicode-bidi: plaintext; }
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="date"],
[dir="rtl"] output, [dir="rtl"] .range-val, [dir="rtl"] .money { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] table { direction: rtl; }
[dir="rtl"] .tk-row { flex-direction: row; }
[dir="rtl"] .tk-row-value { text-align: start; }
[dir="rtl"] .tk-actions { justify-content: flex-start; }
[dir="rtl"] .faq-item summary { flex-direction: row; }
[dir="rtl"] .skip-link { border-radius: 0 0 0 var(--r-sm); }

/* The generated /en/ and /ar/ pages open <main> right below the header. */
main#main { padding-block: var(--sp-7) var(--sp-8); }
main#main.no-pad { padding-block: 0; }

/* ---------- Phone refinements (last, so they win) ---------- */
/* Phones: two small cards per row keeps the page short without
   cramping the 44px targets. Desktop keeps the 260px card grid. */
@media (max-width: 640px) {
  .cat-grid, #popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .cat-card { grid-template-columns: 1fr; padding: var(--sp-4); }
  .cat-card .cat-icon { grid-row: auto; width: 32px; height: 32px; margin-bottom: var(--sp-2); }
  .cat-card h3 { font-size: 1rem; }
  .cat-card p { display: none; }
  .row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-row { padding: var(--sp-1) var(--sp-3); font-size: .9375rem; gap: var(--sp-2); }
  .tool-row .row-icon { width: 24px; height: 24px; }
  .cat-section { padding-block: var(--sp-6); }
  #popular-grid .card { padding: var(--sp-4); }
  #popular-grid .card h3 { font-size: 1rem; }
  #popular-grid .card p { font-size: .875rem; -webkit-line-clamp: 2; }
}

/* Home page: keep the phone page short. Cards stay >=44px targets;
   only padding, gaps and the optional description go. */
@media (max-width: 640px) {
  .hero { padding-block: var(--sp-6); }
  .hero h1 { margin-bottom: var(--sp-2); }
  .hero .lede { font-size: 1rem; }
  .search-wrap { margin-top: var(--sp-5); }
  .popular { margin-top: var(--sp-4); }
  #categories { padding-block: var(--sp-6); }
  #categories h2 { margin-bottom: var(--sp-3); }
  .cat-card { padding: var(--sp-3); }
  .cat-card h3 { line-height: 1.2; }
  #popular { padding-block: var(--sp-6); }
  #popular-grid .card { padding: var(--sp-3); gap: var(--sp-1); }
  #popular-grid .card p { display: none; }
  #popular-grid h3 { font-size: .9375rem; line-height: 1.3; }
  .cat-section { padding-block: var(--sp-5); }
  .cat-section > .container > header { margin-bottom: var(--sp-2); }
  .cat-section h2 { font-size: 1.125rem; }
  .tool-row { min-height: 44px; padding: 0 var(--sp-2); font-size: .875rem; }
  .tool-row .row-icon { display: none; }
  .row-grid { gap: var(--sp-1) var(--sp-2); }
  #trust-band { padding-block: var(--sp-5); }
}

@media (max-width: 640px) {
  .popular a { font-size: .875rem; padding: 0 var(--sp-3); }
  .popular-label { width: 100%; text-align: center; margin: 0 0 var(--sp-1); }
  .cat-section { padding-block: var(--sp-4); }
  .cat-section > .container > header { margin-bottom: var(--sp-1); }
  #popular-grid .row-icon { width: 26px; height: 26px; }
  #popular-grid .row-icon svg { width: 16px; height: 16px; }
}

@media (max-width: 640px) {
  .cat-card { padding: var(--sp-2); gap: 0 var(--sp-2); }
  .cat-card .cat-icon { width: 24px; height: 24px; margin-bottom: var(--sp-1); }
  .cat-card .cat-icon svg { width: 15px; height: 15px; }
  .cat-card h3 { font-size: .9375rem; }
  .cat-card .badge { font-size: .6875rem; padding: 1px var(--sp-2); }
}

/* Desktop: four cards per row on the home page (spec), still fluid
   between breakpoints. */
@media (min-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #popular-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Nothing on the page is set below 14px. */
.badge, .card-kicker, .popular-label { font-size: .875rem; }
/* ============================================================
   Home polish — hero, cards, section rhythm and motion.
   Visual only: no tool markup is involved.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-block: var(--sp-7);
}
@media (min-width: 768px) { .hero { padding-block: var(--sp-8); } }

.hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-shapes::before,
.hero-shapes::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  will-change: transform;
}
.hero-shapes::before {
  top: -18%;
  left: -8%;
  background: radial-gradient(circle at 30% 30%, #dbe6ff, #eef3ff 60%, transparent 72%);
  animation: drift-a 28s ease-in-out infinite alternate;
}
.hero-shapes::after {
  top: -24%;
  right: -10%;
  background: radial-gradient(circle at 60% 40%, #e2ecff, #f1f5ff 60%, transparent 74%);
  animation: drift-b 34s ease-in-out infinite alternate;
}
.hero .container { position: relative; z-index: 1; }

.hero-icons { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; }
@media (min-width: 900px) {
  .hero-icons { display: block; }
  .hero-icons svg {
    position: absolute;
    width: 44px;
    height: 44px;
    color: var(--blue-600);
    opacity: .12;
    stroke-width: 1.4;
  }
  .hero-icons svg:nth-child(1) { top: 16%; left: 7%; }
  .hero-icons svg:nth-child(2) { top: 30%; right: 9%; width: 38px; height: 38px; }
  .hero-icons svg:nth-child(3) { bottom: 18%; left: 12%; width: 36px; height: 36px; }
  .hero-icons svg:nth-child(4) { bottom: 26%; right: 6%; width: 40px; height: 40px; }
}

.hero h1 { font-size: clamp(2.25rem, 4.8vw, 2.75rem); max-width: 20ch; }
.hero .lede { font-size: 1.125rem; }

/* Enough room for the magnifier; the focus ring grows smoothly. */
.search-wrap .search-box input {
  padding-inline-start: 52px;
  padding-inline-end: var(--sp-4);
  min-height: 56px;
  font-size: 1.0625rem;
  border-color: var(--line-2);
  box-shadow: var(--shadow-1);
  transition: box-shadow .16s ease, border-color .16s ease;
}
.search-wrap .search-box::before { inset-inline-start: 18px; width: 18px; height: 18px; }
.search-wrap .search-box:focus-within input {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .12);
}
.search-wrap .search-box::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: var(--r-pill);
  border: 2px solid var(--blue-600);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.search-wrap .search-box:focus-within::after { opacity: .35; transform: none; }

/* Hero entrance: five elements, 60ms apart, under 600ms in total. */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .search-wrap,
.hero .popular { animation: rise .26s ease-out both; }
.hero .eyebrow { animation-delay: 0ms; }
.hero h1 { animation-delay: 60ms; }
.hero .lede { animation-delay: 120ms; }
.hero .search-wrap { animation-delay: 180ms; }
.hero .popular { animation-delay: 240ms; }

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(28px, 18px, 0) scale(1.06); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to { transform: translate3d(-24px, 22px, 0) scale(1); }
}

/* Trust strip sits directly under the hero. */
.trust-band { padding-block: var(--sp-5); border-bottom: 1px solid var(--line); background: var(--surface); }
.trust-band .trust { margin: 0; }

/* The popular chips are appended to #popular-row after first paint.
   Reserving the row keeps the trust band from jumping when they land. */
.hero .popular { min-height: 44px; }

/* ---------- Header ---------- */
.head-nav > a { white-space: nowrap; }
.head-search input { padding-inline-start: 36px; }
.head-search input::placeholder { opacity: .85; }
.head-results { animation: fade-in .15s ease-out both; }
.menu[open] .menu-panel { animation: fade-in .15s ease-out both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn:active, button:active { transform: scale(.98); }

/* ---------- Category cards: eight muted tints ---------- */
.cat-card {
  position: relative;
  overflow: hidden;
  --tint: #eef3ff;
  --tint-ink: #1b3fa0;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--tint-ink);
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease, opacity .18s ease;
}
.cat-card:hover::before,
.cat-card:focus-visible::before { transform: scaleX(1); }
.cat-card[data-cat="pdf"] { --tint: #eef1fb; --tint-ink: #33417a; }
.cat-card[data-cat="images"] { --tint: #eef6f1; --tint-ink: #2c5c45; }
.cat-card[data-cat="text"] { --tint: #f2f1fa; --tint-ink: #443c72; }
.cat-card[data-cat="generators"] { --tint: #f7f2ea; --tint-ink: #6b4a22; }
.cat-card[data-cat="calculators"] { --tint: #eef4f8; --tint-ink: #24546e; }
.cat-card[data-cat="converters"] { --tint: #f0f5f3; --tint-ink: #2e5a52; }
.cat-card[data-cat="developer"] { --tint: #edf2fb; --tint-ink: #1d4ed8; }
.cat-card[data-cat="fun"] { --tint: #f8eff3; --tint-ink: #7a3350; }

/* Icon and name share the first row; the blurb then gets the full
   card width, so a short one-line summary is never squeezed by the
   icon column and never needs an ellipsis. */
.cat-card {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
}
.cat-card p { grid-column: 1 / -1; font-size: .875rem; line-height: 1.45; }
.cat-card .badge { grid-column: 1 / -1; justify-self: start; }

.cat-card .cat-icon {
  grid-row: 1;
  grid-column: 1;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--tint);
  color: var(--tint-ink);
  transition: transform .18s ease;
}
.cat-card h3 { grid-row: 1; grid-column: 2; }
.cat-card:hover .cat-icon, .cat-card:focus-visible .cat-icon { transform: scale(1.05); }
.cat-card .cat-icon svg { width: 24px; height: 24px; }
.cat-card h3 { color: var(--ink); }
.cat-card p { -webkit-line-clamp: 1; }
.cat-card .badge {
  background: var(--tint);
  color: var(--tint-ink);
  font-size: .875rem;
  letter-spacing: .03em;
  text-transform: none;
  font-weight: 700;
}

/* ---------- Cards and rows: arrows, icon lift ---------- */
/* The arrow sits in the card's top-right corner so a hidden arrow
   never reserves a hole at the bottom of an equal-height card. */
.card { position: relative; }
.card-arrow {
  position: absolute;
  top: calc(var(--sp-4) + 2px);
  inset-inline-end: var(--sp-4);
  color: var(--blue-600);
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.card:hover .card-arrow,
.card:focus-visible .card-arrow,
.tool-row:hover .card-arrow,
.tool-row:focus-visible .card-arrow { opacity: 1; transform: none; }

.card .row-icon,
.tool-row .row-icon { transition: transform .18s ease; }
.card:hover .row-icon,
.card:focus-visible .row-icon,
.tool-row:hover .row-icon,
.tool-row:focus-visible .row-icon { transform: scale(1.05); }
a.card:hover, .tool-card:hover { transform: translateY(-2px); }
a.card:active, .tool-card:active { transform: translateY(0); }

.tool-row { position: relative; transition: border-color .18s ease, color .18s ease; }
.tool-row .row-title { flex: 1 1 auto; min-width: 0; }
/* Inside a row the arrow is part of the flex line, not pinned. */
.tool-row .card-arrow { position: static; inset: auto; margin: 0; }

/* ---------- Section rhythm: eyebrows, bands, no dividers ---------- */
.section-kicker {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-2);
}
.section-intro { color: var(--ink-2); font-size: 1rem; max-width: 60ch; margin: var(--sp-2) 0 0; }
#popular .section-head { margin-bottom: var(--sp-5); }
#popular .section-head h2 { margin-bottom: 0; }

.cat-section { border-top: none; }
#cat-sections .cat-section:nth-child(even) { background: var(--band); }
.cat-section > .container > header { align-items: flex-end; }
.cat-section .sec-titles { display: flex; flex-direction: column; }
.cat-section .sec-titles .section-kicker { margin-bottom: var(--sp-1); }
.cat-section h2 { margin: 0; }
.view-all .arrow {
  display: inline-block;
  margin-inline-start: var(--sp-2);
  transition: transform .18s ease;
}
.view-all:hover .arrow, .view-all:focus-visible .arrow { transform: translateX(4px); }
.view-all:hover { text-decoration: none; }

/* ---------- Footer ---------- */
@media (min-width: 768px) {
  .foot-cats ul { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
}
.foot-cats ul { gap: var(--sp-2); }
.foot-cats a { min-height: 44px; width: 100%; }
.foot-copy { text-align: start; }

/* ---------- Scroll reveal (class added by home.js only) ---------- */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.will-reveal.is-in { opacity: 1; transform: none; }

/* Empty state for tool pages - shown before any input */


/* Home page reveal */
.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}
.will-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Phone: four tools per category section ---------- */
@media (max-width: 639px) {
  .cat-section .is-extra { display: none; }
  .hero-icons { display: none; }
  .hero { padding-block: var(--sp-6); }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.25rem); }
  .trust-band { padding-block: var(--sp-4); }
  .cat-card .cat-icon { width: 28px; height: 28px; }
  .cat-card .cat-icon svg { width: 16px; height: 16px; }
  .cat-card p { display: block; -webkit-line-clamp: 2; font-size: .875rem; }
  .card-arrow { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero .search-wrap, .hero .popular,
  .head-results, .menu[open] .menu-panel {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-shapes::before, .hero-shapes::after { animation: none !important; transform: none !important; }
  .will-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  a.card:hover, .tool-card:hover, a.card:active, .tool-card:active,
  .view-all:hover .arrow, .view-all:focus-visible .arrow,
  .card:hover .card-arrow, .tool-row:hover .card-arrow,
  .card:hover .row-icon, .tool-row:hover .row-icon,
  .btn:active, button:active,
  .cat-card:hover .cat-icon { transform: none !important; }
  .card-arrow { transition: opacity .01s; }
}

/* The header is built by chrome.js after first paint. Reserving its
   height here keeps the page from shifting when it appears. */
#site-header { min-height: 65px; }
@media (max-width: 899px) { #site-header { min-height: 65px; } }

/* Phone: count badges stay at 14px, and the two card sections go
   two-up so the page does not become a single tall column. */
@media (max-width: 639px) {
  .cat-card .badge { font-size: .875rem; }
  .cat-section .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .cat-section .card-grid .card { padding: var(--sp-3); }
  .cat-section .card-grid .card p { display: none; }
  .cat-section .card-grid .card h3 { font-size: .9375rem; }
}

/* Phone: compact everything above the fold and keep each section short.
   44px minimum targets are preserved; only padding and descriptions go. */
@media (max-width: 639px) {
  .hero { padding-block: var(--sp-5); }
  .hero h1 { margin-bottom: var(--sp-2); }
  .hero .lede { font-size: 1rem; margin-bottom: var(--sp-3); }
  .search-wrap { margin-top: var(--sp-3); }
  .popular { margin-top: var(--sp-3); }
  #trust-band { padding-block: var(--sp-3); }
  .trust li { font-size: .875rem; }
  #categories { padding-block: var(--sp-5); }
  #categories h2 { margin-bottom: var(--sp-2); }
  .cat-card { padding: var(--sp-2) var(--sp-3); }
  .cat-card p { display: none; }
  .cat-card h3 { font-size: .9375rem; }
  #popular { padding-block: var(--sp-5); }
  #popular .section-head { margin-bottom: var(--sp-3); }
  #popular .section-intro { display: none; }
  .cat-section { padding-block: var(--sp-3); }
  .cat-section > .container > header { margin-bottom: var(--sp-1); }
  .cat-section .section-kicker { display: none; }
  .cat-section h2 { font-size: 1.0625rem; }
  .view-all { font-size: .875rem; }
  /* Cards rendered as compact rows on a phone. */
  .cat-section .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); }
  .cat-section .card-grid .card {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-1) 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .cat-section .card-grid .card h3 { font-size: .875rem; margin: 0; line-height: 1.3; }
  .cat-section .card-grid .card .row-icon { width: 24px; height: 24px; }
  .cat-section .card-grid .card .row-icon svg { width: 15px; height: 15px; }
  .cat-section .card-grid .card .card-arrow { display: none; }
  .cat-section .card-grid .card p { display: none; }
}

/* Footer categories in two columns on a phone too, which keeps the
   whole page shorter without shrinking any target below 44px. */
@media (max-width: 767px) {
  .foot-grid { gap: var(--sp-5); }
  .foot-cats ul { grid-template-columns: 1fr 1fr; column-gap: var(--sp-4); }
  .foot-copy { margin-top: var(--sp-5); }
}

/* Standalone links in a note are real targets, not inline prose. */
.note > a, p.note a { display: inline-flex; align-items: center; min-height: 44px; }

/* The "Back to …" link under a tool is a real target too. The negative
   block margin absorbs the extra height, so the text keeps its exact
   position and the paragraph below does not move. */
#back-cat {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: calc((44px - 1.5em) / -2);
}

/* ---------- Phone compression (home) ----------
   Keeps every target at 44px or more and hides only padding and
   optional descriptions, so the phone page does not run to five
   screens of scrolling. */
@media (max-width: 640px) {
  .hero { padding-block: var(--sp-3) var(--sp-4); }
  .hero h1 { font-size: clamp(1.75rem, 7.2vw, 2rem); line-height: 1.18; max-width: 26ch; }
  .hero .lede { font-size: .9375rem; line-height: 1.45; }
  .hero .eyebrow { margin-bottom: var(--sp-1); }
  .search-wrap { margin-top: var(--sp-2); }
  .hero .popular { margin-top: var(--sp-2); }
  /* Three chips on a phone; the rest stay in the DOM. The label and
     the chips take two rows, so the whole block is reserved here
     and the sections below never jump when the chips are added. */
  .popular a:nth-of-type(n+4) { display: none; }
  .popular a { min-height: 44px; }
  .hero .popular { min-height: 92px; }

  /* Category cards: icon and name on line one, count on line two. */
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); }
  .cat-card {
    padding: var(--sp-1) 0;
    gap: 0 var(--sp-2);
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 44px;
  }
  .cat-card::before { display: none; }
  .cat-card .cat-icon { width: 24px; height: 24px; margin: 0; }
  .cat-card .cat-icon svg { width: 15px; height: 15px; }
  .cat-card h3 { font-size: .9375rem; line-height: 1.25; }
  .cat-card .badge { padding: 0; background: none; color: var(--ink-3); font-weight: 600; }

  /* Popular: compact rows, two per line. */
  #popular-grid { gap: var(--sp-1) var(--sp-3); }
  #popular-grid .card {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-1) 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  #popular-grid .card h3 { font-size: .9375rem; line-height: 1.25; margin: 0; }
  #popular-grid .row-icon { width: 22px; height: 22px; }
  #popular-grid .row-icon svg { width: 14px; height: 14px; }
  #popular .section-kicker { display: none; }
  #popular .section-head { margin-bottom: var(--sp-2); }
  #popular { padding-block: var(--sp-3); }

  /* One preview row per category section on a phone: the name, two
     examples and the "View all" link that goes to the rest. The other
     tools stay in the DOM and on the category page. */
  .cat-section { padding-block: var(--sp-1); }
  .cat-section > .container > header { margin-bottom: 0; }
  .cat-section .row-grid > .tool-row:nth-child(n + 3),
  .cat-section .card-grid > .card:nth-child(n + 3) { display: none; }
  .trust-band { padding-block: var(--sp-2); }

  /* Footer: each block full width, so the category links get real
     columns instead of 72px slivers, and the legal links sit three
     across on one line. */
  footer, .site-foot { padding-block: var(--sp-4) var(--sp-3); }
  .foot-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .foot-head { margin-bottom: var(--sp-1); }
  /* Nine category links, three across: three rows of 44px instead of five. */
  .foot-cats ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-2); }
  .foot-grid > div:last-of-type ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-3); }
  .foot-copy { margin-top: var(--sp-3); padding-top: var(--sp-2); }
}

/* ============================================================
   Tool page polish

   Visual layer for the shared tool card and its controls. Every
   rule here changes paint only — radius, border and outline colour,
   shadows, gradients, state colours, transform and opacity motion.
   No padding, margin, min-height or font-size is touched, so no
   control moves and the zero-shift rule for #back-cat still holds.
   ============================================================ */

/* The tool card: a soft top light, a hairline, and a layered shadow
   that reads as elevation without a heavy drop. */
.tool-panel {
  background-image: linear-gradient(180deg, #fbfcff 0, var(--surface) 140px);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, .05),
    0 10px 24px -12px rgba(17, 24, 39, .18),
    0 28px 64px -36px rgba(29, 78, 216, .22);
}

/* Fields: a quiet inset surface that lifts on hover and rings on
   focus. The ring is a box-shadow, so nothing around it moves. */
.tool-panel .tk-field input,
.tool-panel .tk-field select,
.tool-panel .tk-field textarea {
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, .04);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.tool-panel .tk-field input:hover,
.tool-panel .tk-field select:hover,
.tool-panel .tk-field textarea:hover { border-color: #b9c6e4; }
.tool-panel .tk-field input:focus,
.tool-panel .tk-field select:focus,
.tool-panel .tk-field textarea:focus {
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .13);
}
.tool-panel .tk-field input:disabled,
.tool-panel .tk-field select:disabled,
.tool-panel .tk-field textarea:disabled {
  background: var(--band);
  color: var(--ink-3);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
}
.tool-panel .tk-field input::placeholder,
.tool-panel .tk-field textarea::placeholder { color: var(--ink-3); }
.tool-panel .tk-field > label { letter-spacing: .005em; }

/* Writing surfaces. A text tool is mostly one big box, so the box has to
   look like paper: a soft hairline, a faint inset, and a focus ring that
   grows without touching the layout. Nothing here sets font-size,
   line-height or height — a textarea's height is rows × line-height, so
   changing either would move the page. */
.tool-panel .tk-field textarea {
  border-color: #dfe5ee;
  background-color: var(--surface);
  caret-color: var(--blue-600);
}
.tool-panel .tk-field textarea:focus {
  border-color: var(--blue-600);
  background-color: #fff;
}

/* Output boxes read as read-only paper rather than a second input: a
   tinted band, the same inset, and mono because most of them hold code,
   markdown, CSV or a converted document. */
.tool-panel textarea[id$="-out"],
.tool-panel pre {
  background-color: var(--band);
  border-color: var(--line);
  font-family: var(--mono);
  box-shadow: inset 0 1px 3px rgba(17, 24, 39, .05);
}
.tool-panel textarea[id$="-out"]:focus {
  background-color: #fff;
  border-color: var(--blue-600);
}

/* Secondary buttons step back so the primary action is unmistakable:
   no blue cast, a hairline edge, and the shadow only on hover. */
.tool-panel .btn-secondary:not(.tk-file-btn) {
  background: var(--surface);
  border-color: var(--line-2);
  box-shadow: none;
  color: var(--ink);
}
.tool-panel .btn-secondary:not(.tk-file-btn):hover {
  background: var(--band);
  border-color: #b9c6e4;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .07);
}

/* Buttons: 12px corners inside the tool card, a lift on hover, a
   press-down on :active and a real disabled state. */
.tool-panel .btn {
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .08), 0 6px 14px -8px rgba(29, 78, 216, .55);
  transition: background-color .16s ease, border-color .16s ease,
              box-shadow .2s ease, transform .12s ease;
}
.tool-panel .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(17, 24, 39, .10), 0 12px 24px -12px rgba(29, 78, 216, .6);
}
.tool-panel .btn-secondary {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 6px 14px -10px rgba(17, 24, 39, .35);
}
.tool-panel .btn:active,
.tool-panel .btn:hover:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(17, 24, 39, .22);
}
.tool-panel .btn:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}
.tool-panel .btn:disabled,
.tool-panel .btn[aria-disabled="true"] {
  background: var(--band);
  color: var(--ink-3);
  border-color: var(--line);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* File picker as a drop zone. Every state here is an outline plus a
   background tint, both of which cost exactly zero layout, so the zone
   keeps the height it had before this rule. There is no drag handling
   underneath, so the copy never promises a drag and drop it cannot do. */
.tool-panel .tk-file {
  border-radius: var(--r-md);
  padding-inline: 0;
  /* A grid item will not shrink below its content by default, and the
     "no file chosen" sentence is set in one line. Without these two
     lines a long sentence made the whole column 346px wide inside a
     275px panel and pushed the page sideways at 375px. */
  min-width: 0;
  background: linear-gradient(180deg, rgba(29, 78, 216, .035), rgba(29, 78, 216, .012));
  outline: 2px dashed #c3d2ee;
  outline-offset: 5px;
  transition: outline-color .18s ease, background-color .18s ease, box-shadow .2s ease;
}
.tool-panel .tk-file:hover {
  background: linear-gradient(180deg, rgba(29, 78, 216, .06), rgba(29, 78, 216, .02));
  outline-color: var(--blue-600);
}
.tool-panel .tk-file:focus-within {
  background: var(--blue-50);
  outline-color: var(--blue-600);
  outline-style: solid;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .12);
}
/* A file is in the zone: the whole area reads as ready, not just the
   filename. Green only ever means "chosen", never "uploaded" — nothing
   is uploaded. */
.tool-panel .tk-file.has-files {
  background: linear-gradient(180deg, rgba(15, 123, 82, .06), rgba(15, 123, 82, .02));
  outline-color: #9ed3ba;
}
.tool-panel .tk-file.has-files:hover { outline-color: var(--good); }
.tool-panel .tk-file.has-files:focus-within {
  outline-color: var(--good);
  box-shadow: 0 0 0 4px rgba(15, 123, 82, .12);
}
.tool-panel .tk-file-btn {
  color: var(--blue-700);
  border-color: #c3d2ee;
  background: var(--surface);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.tool-panel .tk-file-btn:hover {
  background: var(--blue-50);
  border-color: var(--blue-600);
}
.tool-panel .tk-file-btn:active { transform: translateY(1px); }
.tool-panel .tk-file-btn:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}
.tool-panel .tk-file-name { transition: color .18s ease; }
.tool-panel .tk-file-name.has-files { color: var(--good); font-weight: 600; }

/* Results: when the output stops being hidden it tints, rings and
   fades in, so the eye lands there first. */
.tool-panel .tk-out:not([hidden]) {
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(29, 78, 216, .05), rgba(29, 78, 216, .015));
  box-shadow: inset 0 0 0 1px rgba(29, 78, 216, .10);
  animation: tk-result-in .22s cubic-bezier(.2, .7, .3, 1) both;
}
.tool-panel .tk-out .tk-row {
  transition: background-color .16s ease;
}
.tool-panel .tk-out .tk-row-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.tool-panel .tk-out .tk-row.is-strong .tk-row-value {
  text-shadow: 0 1px 0 rgba(29, 78, 216, .08);
}
@keyframes tk-result-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Status line: a soft card that slides in from the top. */
.tool-panel .tk-msg {
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  animation: tk-msg-in .18s ease-out both;
}
@keyframes tk-msg-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

/* Groups and checkboxes. */
.tool-panel .tk-modes {
  border-radius: var(--r-md);
  background: #fcfdff;
}
.tool-panel .tk-modes legend { color: var(--ink); }
.tool-panel .tk-check {
  border-radius: var(--r-sm);
  transition: color .16s ease;
}
.tool-panel .tk-check:hover { color: var(--blue-700); }
.tool-panel .tk-check input { accent-color: var(--blue-600); }
.tool-panel .tk-check input:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* Progress: rounded track, sheen while it runs, green when done. */
.tool-panel .tk-progress {
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, .06);
}
.tool-panel .tk-progress-bar {
  border-radius: var(--r-md);
  background-image: linear-gradient(90deg, var(--blue-600), #3b6fe8, var(--blue-600));
  background-size: 200% 100%;
  transition: width .28s ease;
  animation: tk-sheen 1.6s linear infinite;
}
.tool-panel .tk-progress.is-done .tk-progress-bar {
  background-image: none;
  background-color: var(--good);
  animation: none;
}
@keyframes tk-sheen {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* The worked example already carries a blue edge; give it the same
   soft depth as the cards around it. */
.worked { box-shadow: 0 1px 2px rgba(17, 24, 39, .04); }

/* Reduced motion: no travel, no sheen, no fade — just the colour and
   shadow states, which carry no movement. */
@media (prefers-reduced-motion: reduce) {
  .tool-panel .btn,
  .tool-panel .btn:hover,
  .tool-panel .btn:active,
  .tool-panel .btn:hover:active { transform: none; }
  .tool-panel .tk-out:not([hidden]),
  .tool-panel .tk-msg { animation: none !important; }
  /* The tiles rise 8px and the hero tile pulses a ring: both are
     movement, so both are switched off, not just shortened. */
  .tool-panel .tk-out .tk-row,
  .tool-panel .tk-out .tk-row.is-strong { animation: none !important; }
  .tool-panel .tk-out .tk-row:hover { transform: none; }
  .tool-panel .tk-progress-bar {
    animation: none !important;
    transition: none;
  }
  .tool-panel .tk-out .tk-row { transition: background-color .16s ease; }
}

/* ============================================================
   Tool result matrix — the "result event", shared by every tool

   Rows are built by ToolKit.rows, and .tk-out is display:none until a
   result exists, so nothing here can move an untouched page: the empty
   page keeps the exact height it had before this section existed.
   Everything below sets colour, shadow, radius, outline, transform and
   opacity; nothing sets padding, margin or min-height on anything that
   is visible before a result is rendered.

   Classes the stylesheet relies on (all added by ToolKit.rows):
     .tk-row             one label/value pair
     .tk-row.is-strong   the one figure the page exists for  → hero tile
     .tk-row.is-long     a value too long for a tile (hash, sentence,
                         URL list)                            → readout
     .tk-row.is-note     the formula the tool used          → fine print
   ============================================================ */

/* The container: tiles wrap into rows of three, then collapse to one
   column on narrow screens. It carries no chrome of its own any more —
   the tiles do. */
.tool-panel .tk-out:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  /* The tiles animate themselves; a fade on the container as well would
     double up on the same 220ms. */
  animation: none;
}

/* One tile. Three to a row from 720px up, full width below; the basis
   is a percentage so four or five figures wrap without leaving a hole. */
.tool-panel .tk-out .tk-row {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(17, 24, 39, .04),
    0 8px 20px -16px rgba(17, 24, 39, .35);
  animation: tk-tile-in .32s cubic-bezier(.22, .61, .36, 1) both;
  transition:
    transform .16s ease,
    box-shadow .2s ease,
    border-color .16s ease,
    background-color .2s ease;
}
@media (min-width: 720px) {
  .tool-panel .tk-out .tk-row {
    flex: 1 1 30%;
    min-width: 180px;
  }
}
.tool-panel .tk-out .tk-row:hover {
  border-color: #c7d6fb;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(17, 24, 39, .05),
    0 14px 28px -18px rgba(29, 78, 216, .45);
}

/* Labels stay quiet; figures carry the weight. */
.tool-panel .tk-out .tk-row-label {
  color: var(--ink-2);
  font-weight: 500;
}
.tool-panel .tk-out .tk-row-value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: start;
}

/* The hero: the one number the page exists for. Full width, deep blue,
   white figures, one soft ring as it lands. */
.tool-panel .tk-out .tk-row.is-strong,
.tool-panel .tk-out .tk-row.is-long,
.tool-panel .tk-out .tk-row.is-note {
  flex: 1 1 100%;
}
/* The answer leads the block even when the tool emits it later in its
   list, and the formula always closes it. Paint order only — the DOM
   order the screen reader follows is untouched. */
.tool-panel .tk-out .tk-row.is-strong { order: -1; }
.tool-panel .tk-out .tk-row.is-note { order: 3; }

.tool-panel .tk-out .tk-row.is-strong {
  border-color: transparent;
  background-image: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 100%);
  box-shadow:
    0 2px 6px rgba(17, 24, 39, .10),
    0 22px 44px -24px rgba(29, 78, 216, .75);
  animation:
    tk-tile-in .32s cubic-bezier(.22, .61, .36, 1) both,
    tk-hero-ring .9s ease-out .12s 1;
}
.tool-panel .tk-out .tk-row.is-strong .tk-row-label {
  color: rgba(255, 255, 255, .88);
}
.tool-panel .tk-out .tk-row.is-strong .tk-row-value {
  color: #fff;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(9, 20, 60, .35);
}
.tool-panel .tk-out .tk-row.is-strong:hover {
  border-color: transparent;
}

/* A value that cannot be a figure — a 64-character hash, a list of
   URLs, a sentence. It keeps the full width and drops to a wrapped
   readout instead of shouting in 32px type. */
.tool-panel .tk-out .tk-row.is-long,
.tool-panel .tk-out .tk-row.is-strong.is-long {
  border-color: var(--line);
  background-image: none;
  background-color: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  animation: tk-tile-in .32s cubic-bezier(.22, .61, .36, 1) both;
}
.tool-panel .tk-out .tk-row.is-long .tk-row-label,
.tool-panel .tk-out .tk-row.is-strong.is-long .tk-row-label {
  color: var(--ink-2);
}
.tool-panel .tk-out .tk-row.is-long .tk-row-value,
.tool-panel .tk-out .tk-row.is-strong.is-long .tk-row-value {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .9375rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
  word-break: break-all;
}

/* The fine print: the arithmetic the tool used, demoted out of the
   figure grid so it cannot be mistaken for a result. */
.tool-panel .tk-out .tk-row.is-note {
  border-style: dashed;
  border-color: var(--line);
  background: var(--band);
  box-shadow: none;
}
.tool-panel .tk-out .tk-row.is-note .tk-row-value {
  color: var(--ink-2);
  font-size: .875rem;
  font-weight: 500;
  text-shadow: none;
}
.tool-panel .tk-out .tk-row.is-note:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

/* Stagger: each tile lands 45ms after the one before it. */
.tool-panel .tk-out .tk-row:nth-child(1) { animation-delay: 0ms; }
.tool-panel .tk-out .tk-row:nth-child(2) { animation-delay: 45ms; }
.tool-panel .tk-out .tk-row:nth-child(3) { animation-delay: 90ms; }
.tool-panel .tk-out .tk-row:nth-child(4) { animation-delay: 135ms; }
.tool-panel .tk-out .tk-row:nth-child(5) { animation-delay: 180ms; }
.tool-panel .tk-out .tk-row:nth-child(6) { animation-delay: 225ms; }

@keyframes tk-tile-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes tk-hero-ring {
  0%   { box-shadow: 0 2px 6px rgba(17, 24, 39, .10), 0 0 0 0 rgba(29, 78, 216, .38); }
  100% { box-shadow: 0 2px 6px rgba(17, 24, 39, .10), 0 0 0 14px rgba(29, 78, 216, 0); }
}

/* Some figures are verdicts, not measurements — a password strength, a
   contrast pass/fail. Those rows carry a semantic class already; give
   it a colour so the verdict reads at a glance. Colour only. */
.tool-panel .tk-out .tk-row.is-good {
  border-color: #b6e0cd;
  background: var(--good-soft);
}
.tool-panel .tk-out .tk-row.is-good .tk-row-value { color: var(--good); }
.tool-panel .tk-out .tk-row.is-warn {
  border-color: #f0d9a8;
  background: var(--warn-soft);
}
.tool-panel .tk-out .tk-row.is-warn .tk-row-value { color: var(--warn); }
.tool-panel .tk-out .tk-row.is-bad {
  border-color: #f2c9c4;
  background: var(--danger-soft);
}
.tool-panel .tk-out .tk-row.is-bad .tk-row-value { color: var(--danger); }

/* ---- Category pages: the cards that list a category's tools ---- */
/* A shared icon tile so every card starts the same way, the tool's own
   category icon rather than a decorative shape. */
.tool-panel .tool-icon,
.card .tool-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 0 var(--sp-3);
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--blue-600);
}
.card .tool-icon svg { width: 20px; height: 20px; }

/* The card is the link, so the arrow is a hover cue only: it never
   takes a tap target of its own and never shifts the text. */
.card .card-arrow {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: .875rem;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.card.tool-card:hover .card-arrow,
.card.tool-card:focus-visible .card-arrow { opacity: 1; transform: none; }

/* The count of tools in this category, beside the heading. */
.count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-inline-start: var(--sp-3);
  padding: 0 var(--sp-3);
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: .875rem;
  font-weight: 600;
  vertical-align: middle;
}

/* The chosen-file list. Its markup (index, name, size, actions) existed
   with no stylesheet at all, so the spans ran together as
   "1report.pdf8 B". The rows only exist after a file is chosen, so this
   cannot shift an empty page. */
.tool-panel .tk-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
  list-style: none;
}
/* display:flex above would otherwise outrank the [hidden] rule the
   browser applies, leaving an empty list's margin in the panel. */
.tool-panel .tk-list[hidden] { display: none; }
.tool-panel .tk-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.tool-panel .tk-list-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: .875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tool-panel .tk-list-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.tool-panel .tk-list-size {
  color: var(--ink-2);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tool-panel .tk-list-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Wide enough for the actions to sit beside the file instead of under
   it: one compact row per file. */
@media (min-width: 720px) {
  .tool-panel .tk-list-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }
  .tool-panel .tk-list-actions {
    grid-column: auto;
    flex-wrap: nowrap;
  }
}

/* Notices read as trays with a coloured edge, not warning walls. */
.tool-panel .tk-msg.warn {
  border-inline-start: 3px solid var(--warn);
  background: var(--warn-soft);
}
.tool-panel .tk-msg.error {
  border-inline-start: 3px solid var(--danger);
}

/* ---- loan-calculator: the amount is the input that matters ---- */
body[data-tool="loan-calculator"] .tk-field > label {
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: .875rem;
  color: var(--ink-2);
}
body[data-tool="loan-calculator"] #loan-amount,
body[data-tool="loan-calculator"] #loan-rate,
body[data-tool="loan-calculator"] #loan-years {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  font-weight: 600;
}
body[data-tool="loan-calculator"] #loan-amount {
  font-size: 1.125rem;
  line-height: 1.15;
  font-weight: 700;
}

/* Reduced motion: no travel, no ring, no sheen — colour and shadow
   states carry no movement, so they stay. */
@media (prefers-reduced-motion: reduce) {
  .tool-panel .tk-out .tk-row,
  .tool-panel .tk-out .tk-row.is-strong,
  .tool-panel .tk-out .tk-row.is-long {
    animation: none !important;
    transition: none;
  }
  .tool-panel .tk-out .tk-row:hover { transform: none; }
}

/* ============================================================
   PER-TYPE IDENTITY — one accent, one icon, one signature detail

   Every tool page carries data-category (set in chrome.js from the
   catalogue; the nine directory pages carry it in their own HTML), so a
   block per type repaints the shared components instead of touching 73
   pages by hand.

   Nothing here changes a box that holds text: colour, border-colour,
   shadow, background, font-variant and pseudo-elements only. The
   loan-calculator guard is re-measured after every type and compared with
   the same page at commit aef2433 in the same browser, because the absolute
   numbers move with the window's pixel ratio.
   ============================================================ */

/* calculators */
body[data-category="calculators"] {
  --blue-600: #1d4ed8;
  --blue-700: #1b3fa0;
  --blue-50: #eef3ff;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M8 7h8M8 12h.01M12 12h.01M16 12h.01M8 16h.01M12 16h.01M16 16h.01'/%3E%3C/svg%3E");
}

/* text */
body[data-category="text"] {
  --blue-600: #6d28d9;
  --blue-700: #5b21b6;
  --blue-50: #f4efff;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h14M5 10h14M5 14h9M5 18h6'/%3E%3C/svg%3E");
}

/* developer */
body[data-category="developer"] {
  --blue-600: #334155;
  --blue-700: #1f2937;
  --blue-50: #eef1f5;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 8-5 4 5 4M15 8l5 4-5 4'/%3E%3C/svg%3E");
}

/* converters */
body[data-category="converters"] {
  --blue-600: #0e7490;
  --blue-700: #0b5a70;
  --blue-50: #e8f6fa;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E");
}

/* generators */
body[data-category="generators"] {
  --blue-600: #b45309;
  --blue-700: #8a3f07;
  --blue-50: #fdf3e7;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M9 9h.01M15 9h.01M9 15h.01M15 15h.01M12 12h.01'/%3E%3C/svg%3E");
}

/* images */
body[data-category="images"] {
  --blue-600: #0f766e;
  --blue-700: #0b5c56;
  --blue-50: #e9f6f4;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Ccircle cx='8.5' cy='10' r='1.5'/%3E%3Cpath d='m21 16-5-5-4 4-2-2-4 4'/%3E%3C/svg%3E");
}

/* pdf */
body[data-category="pdf"] {
  --blue-600: #b3261e;
  --blue-700: #8f1d17;
  --blue-50: #fdecea;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7Z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

/* fun */
body[data-category="fun"] {
  --blue-600: #be185d;
  --blue-700: #9d1249;
  --blue-50: #fdecf3;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.5a4.5 4.5 0 0 0 7 0M9 9h.01M15 9h.01'/%3E%3C/svg%3E");
}

/* business */
body[data-category="business"] {
  --blue-600: #4338ca;
  --blue-700: #3730a3;
  --blue-50: #eef0ff;
  --cat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3 12h18'/%3E%3C/svg%3E");
}


/* The type icon, inline ahead of the kicker above the H1. It is 15px in a
   21px line box with vertical-align -3px, so the heading line never grows.
   If a browser cannot draw a mask it simply paints nothing. */
.tool-head .card-kicker::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-inline-end: var(--sp-2);
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--cat-icon) center / 15px 15px no-repeat;
  mask: var(--cat-icon) center / 15px 15px no-repeat;
}

/* ---- signature detail per type (paint only) ----
   Each rule below touches colour, background, shadow, border-style or
   font-family — never a box metric — and every output rule is gated on
   :not(:empty), so an empty tool looks exactly as before. */
body[data-category="calculators"] .tk-out,
body[data-category="business"] .tk-out { font-variant-numeric: tabular-nums; }

/* developer: code reads as code, in the same size */
body[data-category="developer"] .tk-out:not(:empty),
body[data-category="developer"] .tk-out textarea { font-family: var(--mono); }

/* text: a writing surface with a little depth */
body[data-category="text"] .tool-panel textarea { box-shadow: inset 0 1px 3px rgb(15 23 42 / 0.06); }

/* converters: the swap mark sits quietly in the corner of a result */
body[data-category="converters"] .tk-out:not(:empty) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-opacity='0.14' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px top 12px;
  background-size: 26px 26px;
}

/* generators: a tinted result panel instead of a white void */
body[data-category="generators"] .tk-out:not(:empty) { background: var(--blue-50); border-radius: var(--r-md); }

/* fun: a playful dashed edge, only while there is something to show */
body[data-category="fun"] .tk-out:not(:empty) { border-style: dashed; }

/* images and pdf: the picker answers the pointer */
body[data-category="images"] .tk-file,
body[data-category="pdf"] .tk-file { border-radius: var(--r-md); }
body[data-category="images"] .tk-file:hover,
body[data-category="images"] .tk-file:focus-within,
body[data-category="pdf"] .tk-file:hover,
body[data-category="pdf"] .tk-file:focus-within { background: var(--blue-50); }