/* ============================================================
   Toolaki — design system
   ------------------------------------------------------------
   A single, shared stylesheet that gives every page one voice:
   warm, precise, private-by-design. Built on design tokens
   (colour ramps, type scale, spacing, radius, shadow, motion)
   with a layer of reusable components on top.

   Aesthetic: warm editorial minimal. Paper-toned surfaces, a
   single confident orange accent used sparingly, hairline
   borders, soft layered shadows, and Space Mono as the
   "engineered" voice for labels, counts and numerals.

   Older tool pages still reference legacy token names
   (--ink, --grey-600, --accent-soft…). Those are kept as
   aliases at the bottom of each token block, so every page
   inherits the refreshed palette without breaking.
   ============================================================ */

/* ---------- Fonts (self-hosted) ----------
   Served from our own /vendor/fonts/ so no visitor IP is ever sent to
   Google — the whole site stays as private as the tools themselves, and
   the fonts keep working offline. Files are the standard Google Fonts
   webfonts (SIL Open Font License; licences in /vendor/fonts/).
   Hanken Grotesk is a variable font, so one file covers weights 400–700.
   The latin-ext files only download when such a character actually appears
   (that's what unicode-range does), so English pages fetch only latin. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/vendor/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/space-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/vendor/fonts/space-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/vendor/fonts/space-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   TOKENS — light theme (the default)
   ============================================================ */
:root {
  /* ---- Brand ramp (built around Toolaki orange #ec5b27) ---- */
  --orange-50:  #fef4ef;
  --orange-100: #fde4d8;
  --orange-200: #f9c6ac;
  --orange-300: #f4a17a;
  --orange-400: #f07d4f;
  --orange-500: #ec5b27;   /* base brand */
  --orange-600: #d64c1b;
  --orange-700: #b8430f;   /* readable orange text on light */
  --orange-800: #8f3410;

  /* ---- Warm neutral ramp ---- */
  --stone-0:   #ffffff;
  --stone-50:  #faf8f5;
  --stone-100: #f4f1ec;
  --stone-150: #ece8e1;
  --stone-200: #e4dfd6;
  --stone-300: #d3ccc0;
  --stone-400: #b0a99c;
  --stone-500: #8a8478;
  --stone-600: #635d53;
  --stone-700: #47423a;
  --stone-800: #2b2823;
  --stone-900: #1b1813;

  /* ---- Semantic surfaces & lines ---- */
  --bg:            var(--stone-50);
  --bg-subtle:     var(--stone-100);
  --surface:       var(--stone-0);
  --surface-2:     #f7f4ef;      /* subtle inset / hover fill */
  --surface-sunken:#f1ede7;      /* wells, tracks, thumbnails */
  --surface-raised:#ffffff;      /* popovers, dropdowns, toasts */
  --border:        #e8e3da;      /* hairline */
  --border-subtle: #f0ece4;
  --border-strong: #d7d0c5;      /* hover / rest emphasis */

  /* ---- Semantic text ---- */
  --text:           #1b1813;
  --text-secondary: #5a544b;
  --text-muted:     #877f73;
  --text-faint:     #aca595;

  /* ---- Accent (single action colour) ---- */
  --accent:          var(--orange-500);
  --accent-hover:    var(--orange-600);
  --accent-active:   var(--orange-700);
  --accent-text:     var(--orange-700);  /* accent used as text/links */
  --accent-contrast: #ffffff;            /* text/icons on the accent */
  --accent-surface:  var(--orange-50);   /* soft tint chips/wells */
  --accent-surface-2:#fbe3d5;
  --accent-border:   #f6cdb6;
  --accent-ring:     rgba(236, 91, 39, 0.34);

  /* Dropzone icon chip. Hover deepens it in both themes, but each theme needs
     its own step so the chip keeps separating from the surface behind it
     rather than dissolving into it. */
  --chip:             var(--orange-50);
  --chip-hover:       #fbe3d5;
  --chip-glyph-hover: var(--orange-700);

  /* ---- Status ---- */
  --success:        #1f7a44;
  --success-bg:     #e5f4ea;
  --success-border: #bfe3cc;
  --warn:           #97570f;
  --warn-bg:        #fbecd6;
  --warn-border:    #f1d09f;
  --danger:         #b3271b;
  --danger-bg:      #fbe8e5;
  --danger-border:  #f2c4bc;
  --info:           #1d5fb0;
  --info-bg:        #e7eefb;
  --info-border:    #c3d6f4;

  /* ---- Effects ---- */
  --scrim:      rgba(24, 20, 15, 0.44);
  --toast-bg:   #1f1c17;
  --toast-text: #f6f3ee;
  --header-bg:  rgba(250, 248, 245, 0.75);
  --ring:       var(--accent-ring);
  --glow-1:     rgba(236, 91, 39, 0.10);
  --glow-2:     rgba(236, 91, 39, 0.05);
  --grain-opacity: 0.03;

  /* ---- Type ---- */
  --font-ui:   "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  --fs-eyebrow: 12px;
  --fs-2xs: 11.5px;
  --fs-xs:  12.5px;
  --fs-sm:  14px;
  --fs-base:15px;
  --fs-md:  16.5px;   /* body */
  --fs-lg:  18px;
  --fs-xl:  21px;
  --fs-2xl: 25px;
  --fs-3xl: 31px;
  --fs-display: clamp(33px, 5.4vw, 52px);

  --lh-tight: 1.12;
  --lh-snug:  1.32;
  --lh-body:  1.6;
  --lh-relaxed: 1.72;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s10: 40px; --s12: 48px;
  --s14: 56px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px;

  /* ---- Radius ---- */
  --r-xs:  6px;
  --r-sm:  9px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-full:999px;

  /* ---- Shadows (warm, layered) ---- */
  --shadow-xs: 0 1px 2px rgba(28, 24, 18, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 24, 18, 0.05), 0 2px 6px -3px rgba(28, 24, 18, 0.08);
  --shadow-md: 0 2px 4px rgba(28, 24, 18, 0.05), 0 12px 28px -14px rgba(28, 24, 18, 0.20);
  --shadow-lg: 0 4px 8px rgba(28, 24, 18, 0.05), 0 24px 56px -22px rgba(28, 24, 18, 0.30);
  --shadow-xl: 0 8px 16px rgba(28, 24, 18, 0.06), 0 40px 80px -28px rgba(28, 24, 18, 0.38);
  --shadow-focus: 0 0 0 4px var(--accent-ring);

  /* ---- Motion ---- */
  --dur-1: 0.12s;
  --dur-2: 0.2s;
  --dur-3: 0.32s;
  --dur-4: 0.5s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-prose: 68ch;
  --header-h: 66px;

  /* ---- Legacy aliases (older tool pages) ---- */
  --ink:        var(--text);
  --grey-900:   var(--text);
  --grey-600:   var(--text-secondary);
  --grey-400:   var(--text-muted);
  --grey-200:   var(--border);
  --grey-100:   var(--bg-subtle);
  --white:      var(--surface);
  --on-accent:  var(--accent-contrast);
  --accent-dark: var(--accent-text);
  --accent-soft: var(--accent-surface);
  --radius:     var(--r-md);
  --radius-sm:  var(--r-sm);
  --ease:       var(--ease-out);
}

/* ============================================================
   TOKENS — dark theme
   Activated by data-theme="dark" on <html> (set by theme.js).
   Only colour/effect tokens change; scale tokens stay put.
   ============================================================ */
[data-theme="dark"] {
  --bg:            #141210;
  --bg-subtle:     #1a1714;
  --surface:       #201d19;
  --surface-2:     #272320;
  --surface-sunken:#191612;
  --surface-raised:#262220;
  --border:        #332f29;
  --border-subtle: #2a2621;
  --border-strong: #433d35;

  --text:           #f3efe8;
  --text-secondary: #b7b0a5;
  --text-muted:     #8b8478;
  --text-faint:     #6a6458;

  /* Orange stays the brand orange (pops on dark, keeps white text legible);
     a lighter tint is used only where orange is set as text. */
  --accent:          var(--orange-500);
  /* Filled accent controls carry WHITE labels, so they darken on hover in dark
     mode too. Lightening (the usual "elevate = lighter" dark-mode rule) drops
     white-on-orange from 3.45:1 to 2.71:1; darkening raises it to 4.28:1.
     That rule is for neutral surfaces, not saturated accent buttons. */
  --accent-hover:    var(--orange-600);
  --accent-active:   var(--orange-700);
  --accent-text:     #ff8a5f;
  --accent-contrast: #ffffff;
  --accent-surface:  #2f1d13;
  --accent-surface-2:#3d2417;
  --accent-border:   #4a2c1a;
  --accent-ring:     rgba(255, 138, 95, 0.36);

  /* Chip rests on the lighter tint so it reads as a tile, then deepens only as
     far as it can while staying clear of --surface (#201d19). Going all the way
     to --accent-surface dropped separation to 1.04:1 and the chip dissolved.
     The glyph stays brand orange here — swinging it bright made the hover feel
     far louder than the button's. */
  --chip:             #3d2417;
  --chip-hover:       #331e0f;
  --chip-glyph-hover: var(--orange-500);

  --success:        #5cc384;
  --success-bg:     #16311f;
  --success-border: #244c31;
  --warn:           #dd9d4f;
  --warn-bg:        #2e2413;
  --warn-border:    #4a3a1f;
  --danger:         #ef9a8c;
  --danger-bg:      #351f1b;
  --danger-border:  #59312a;
  --info:           #7fb0ef;
  --info-bg:        #172538;
  --info-border:    #2b415f;

  --scrim:      rgba(0, 0, 0, 0.64);
  --toast-bg:   #ece8e1;
  --toast-text: #17140f;
  --header-bg:  rgba(20, 18, 16, 0.74);
  --glow-1:     rgba(236, 91, 39, 0.16);
  --glow-2:     rgba(150, 84, 46, 0.09);
  --grain-opacity: 0.045;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px -3px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 14px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 28px 60px -22px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.55), 0 44px 84px -28px rgba(0, 0, 0, 0.85);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- Background atmosphere ----------
   A fixed, non-interactive layer: a soft warm accent wash up top plus a
   very fine grain so large flat areas gain a little depth. Theme-aware. */
body::before {
  content: "";
  /* Anchored to the TOP OF THE PAGE (not the viewport) so this reads as light
     falling on the header/hero and scrolls away, instead of following the
     reader down and hovering over the FAQ. One viewport tall keeps the
     gradient maths identical to before at scroll-top. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 560px at 12% -12%, var(--glow-1), transparent 62%),
    radial-gradient(900px 520px at 100% -8%, var(--glow-2), transparent 60%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-surface-2); color: var(--accent-active); }
[hidden] { display: none !important; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 560px) { .wrap { padding: 0 18px; } }

main {
  flex: 1;
  width: 100%;
  padding: var(--s12) 0 var(--s20);
}
@media (max-width: 640px) { main { padding: var(--s8) 0 var(--s14); } }

.stack > * + * { margin-top: var(--s5); }

/* ---------- Skip link (accessibility) ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--accent-contrast); outline-offset: 2px; }

/* ============================================================
   HEADER + NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.brand__name { line-height: 1; }
.brand-dot { color: var(--accent); }

.header-right { display: flex; align-items: center; gap: 10px; }

/* Icon-style header buttons (theme toggle, burger) — 40px tap target */
.icon-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.icon-toggle:active { transform: scale(0.96); }
.theme-toggle { /* legacy alias name */ }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* ---- Category dropdown navigation (built by theme.js) ---- */
.site-nav { font-size: var(--fs-base); color: var(--text-secondary); }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-cat { position: relative; }
.nav-cat__link {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 9px 12px; border-radius: var(--r-sm); color: var(--text-secondary);
  font-size: var(--fs-base); font-weight: 500; white-space: nowrap;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}

.nav-cat__chevron { color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }
.nav-cat:focus-within .nav-cat__chevron { transform: rotate(180deg); color: var(--accent); }

.nav-panel {
  position: absolute; top: 100%; left: 0; margin-top: 10px; z-index: 50;
  min-width: 280px; padding: 8px;
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985);
  transform-origin: top left;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
/* Invisible bridge across the 10px gap between the trigger and the panel.
   The gap belongs to neither the <li> nor the panel, so without this the
   cursor crosses dead space, :hover drops, and the panel flickers/shakes.
   As a descendant of .nav-cat it keeps the menu open, and it inherits
   visibility:hidden so it can't capture the pointer while closed. */
.nav-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -11px; height: 11px;
}
.nav-cat:focus-within .nav-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
/* Categories with many tools flow into two columns (filled top-to-bottom,
   then across) so the dropdown stays short instead of running down the page.
   --nav-rows is set per category by theme.js = ceil(item count / 2). */
.nav-panel--cols { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--nav-rows, 4), auto); gap: 2px 6px; }
/* Anchor to the right edge when a wide panel would otherwise overflow the viewport. */
.nav-panel--right { left: auto; right: 0; transform-origin: top right; }
.nav-panel__item {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--text); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.nav-panel__name { flex: 1; }
.nav-panel__icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm); background: var(--accent-surface); color: var(--accent);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.nav-panel__arrow { flex: none; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }

.nav-burger { display: none; }
.nav-burger .i-close { display: none; }
.nav-all { display: none; }

/* Desktop: nav sits next to the logo; controls on the right */
@media (min-width: 861px) {
  .site-header .header-right { flex: 1; margin-left: 24px; }
  .site-header .site-nav { margin-right: auto; }
}

/* Mobile: burger + full-width panel with all categories expanded */
@media (max-width: 860px) {
  .nav-burger {
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
    color: var(--text-secondary); cursor: pointer;
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  /* No hover on the burger (a touch-first control); tap feedback via :active. */
  .site-nav.is-open .nav-burger .i-menu { display: none; }
  .site-nav.is-open .nav-burger .i-close { display: block; }

  .nav-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface-raised); border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg); padding: 14px 18px 20px;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .site-nav.is-open .nav-list { display: flex; }
  .nav-cat { position: static; }
  .nav-cat__link {
    padding: 12px 8px 7px; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted);
  }
  .nav-cat__link:hover { color: var(--text-muted); background: none; }
  .nav-cat__chevron { display: none; }
  .nav-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: auto; margin: 0; padding: 0 0 6px;
    background: none; border: none; box-shadow: none; border-radius: 0;
  }
  /* Always a single stacked list in the mobile menu, never two columns. */
  .nav-panel--cols { display: block; }
  /* No hover here — and with the panel static, the bridge would resolve
     against the sticky header and could swallow taps. */
  .nav-panel::before { display: none; }
  .nav-panel__item { padding: 12px 8px; font-size: var(--fs-md); }
  .nav-all { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
  .nav-all .nav-cat__link { text-transform: none; letter-spacing: 0; font-family: var(--font-ui); font-size: var(--fs-md); font-weight: 600; color: var(--accent-text); padding: 12px 8px; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-text);
}
.eyebrow--muted { color: var(--text-muted); }
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.5;
}
.eyebrow.eyebrow--nodash::before { display: none; }

h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-tighter);
  color: var(--text);
}
h2, h3, h4 { color: var(--text); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }

.lead {
  margin-top: var(--s4);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: 54ch;
}

/* Page intro block (tool pages) */
.page-intro { margin-bottom: var(--s8); }

/* Breadcrumbs */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; margin-bottom: var(--s4);
}
.crumbs a { color: var(--text-secondary); font-weight: 600; transition: color var(--dur-1) var(--ease-out); }

.crumbs__sep { color: var(--text-muted); }
.crumbs__current { color: var(--text-muted); font-weight: 600; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 6px 20px;
  font-family: var(--font-ui); font-size: var(--fs-base); font-weight: 600;
  line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  cursor: pointer; user-select: none;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.btn svg { flex: none; }

.btn--primary, .btn-primary {
  background: var(--accent); color: var(--accent-contrast);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(28,24,18,0.12), inset 0 1px 0 rgba(255,255,255,0.18);
}

.btn--primary:active, .btn-primary:active { transform: translateY(0); background: var(--accent-active); }
.btn--primary:disabled, .btn-primary:disabled { background: var(--bg-subtle); color: var(--text-faint); box-shadow: none; opacity: 1; }

.btn--secondary {
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

.btn--ghost, .btn-ghost {
  background: var(--surface); color: var(--text-secondary); border-color: var(--border);
}

.btn--quiet {
  background: transparent; color: var(--text-secondary); border-color: transparent;
}

.btn--sm, .btn-sm { --btn-h: 38px; padding: 4px 14px; font-size: var(--fs-sm); }
.btn--lg { --btn-h: 52px; padding: 0 28px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--btn-h); height: var(--btn-h); padding: 0; }

/* Icon button (compact, bordered) — 40px default */
.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text-secondary); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.icon-btn:active { transform: scale(0.95); }

/* ============================================================
   CARDS & SURFACES
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s7);
}
@media (max-width: 560px) { .card { padding: var(--s5); border-radius: var(--r-md); } }

.card--flush { padding: 0; overflow: hidden; }
.well {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field { margin-top: var(--s6); }
.field:first-child { margin-top: 0; }
.field__label {
  display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--text);
  margin-bottom: 10px;
}
.field__hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; }

.input, .textarea {
  width: 100%; font-family: var(--font-ui); font-size: var(--fs-md); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.input--mono { font-family: var(--font-mono); }
.textarea { min-height: 240px; resize: vertical; line-height: var(--lh-body); }
.field.is-invalid .input, .field.is-invalid .textarea { border-color: var(--danger-border); background: var(--danger-bg); }

/* Segmented control (radio group styled as buttons) */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; padding: 10px 8px; border-radius: var(--r-sm);
  font-weight: 600; font-size: var(--fs-sm); color: var(--text-secondary); cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.segmented input:checked + label { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-xs); border-color: var(--border); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.segmented .seg-ext { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); font-weight: 400; }

/* Native colour swatch */
.swatch {
  width: 52px; height: 46px; flex: none; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); display: block;
}
.swatch input[type="color"] { width: 150%; height: 150%; margin: -25%; border: 0; padding: 0; background: none; cursor: pointer; }
.swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input[type="color"]::-webkit-color-swatch { border: none; }

/* ============================================================
   BADGES, CHIPS, TAGS, KBD
   ============================================================ */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 7px 13px 7px 11px; box-shadow: var(--shadow-xs);
}
.badge svg { color: var(--accent); flex: none; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.02em; color: var(--accent-text);
  background: var(--accent-surface); border-radius: var(--r-full); padding: 3px 10px;
}
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 700; padding: 5px 10px; border-radius: var(--r-full);
  white-space: nowrap;
}
.tag.is-pass { background: var(--success-bg); color: var(--success); }
.tag.is-fail { background: var(--danger-bg); color: var(--danger); }

.kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  background: var(--bg-subtle); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px;
}

/* ============================================================
   ALERTS / NOTICES
   ============================================================ */
.alert, .notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.5;
  border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--danger);
}
.alert svg, .notice svg { flex: none; margin-top: 2px; }
.alert--danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger); }
.alert--success { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.alert--warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.alert--info { border-color: var(--info-border); background: var(--info-bg); color: var(--info); }

/* Privacy reassurance line (near file inputs) */
.privacy {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted);
}
/* Align the lock to the FIRST line, not the centre of a wrapped two-line block
   (where it floated in the gap on mobile). The small offset optically centres
   it against the first line of text. */
.privacy svg { color: var(--accent); flex: none; margin-top: 2px; }

/* ============================================================
   DROPZONE (shared file-drop surface)
   ============================================================ */
.dropzone {
  position: relative;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(var(--border) 1.1px, transparent 1.1px) 0 0 / 22px 22px,
    var(--surface);
  padding: 60px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}

/* Active drag: solid accent frame + soft ring glow, and the icon fills in — a clear "drop here" */
.dropzone.is-drag {
  border-style: solid; border-color: var(--accent);
  background:
    radial-gradient(var(--accent-border) 1.1px, transparent 1.1px) 0 0 / 22px 22px,
    var(--accent-surface);
  box-shadow: 0 0 0 4px var(--accent-ring), var(--shadow-md);
}
.dropzone.is-drag .dropzone__icon { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-sm); }
.dropzone__icon {
  width: 60px; height: 60px; margin: 0 auto 18px;
  border-radius: var(--r-lg); background: var(--chip); color: var(--accent);
  display: grid; place-items: center;
  /* Kept almost flat, matching the tool-card and nav icon chips. An accent-tinted
     glow read as a halo, and a white inner highlight looked embossed in dark mode. */
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.dropzone__icon svg { width: 28px; height: 28px; }
.dropzone__title { font-weight: 700; font-size: 22px; letter-spacing: var(--tracking-tight); color: var(--text); }
.dropzone__hint { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 6px; }
.dropzone__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: var(--s6);
  height: 48px; padding: 0 26px; border-radius: var(--r-sm); white-space: nowrap;
  background: var(--accent); color: var(--accent-contrast); font-weight: 600; font-size: var(--fs-base);
  box-shadow: 0 1px 3px rgba(28, 24, 18, 0.10), 0 7px 16px -12px var(--accent-ring), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background var(--dur-1) var(--ease-out);
}

/* Compact drop bar (after files added) */
.dropzone.is-compact {
  padding: 14px 18px; display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left;
  background: var(--surface-2); border-style: solid; border-color: var(--border);
}
.dropzone.is-compact .dropzone__icon, .dropzone.is-compact .dropzone__hint { display: none; }
.dropzone.is-compact .dropzone__title { font-size: var(--fs-md); margin: 0; }
.dropzone.is-compact .dropzone__btn { margin-top: 0; height: 40px; padding: 0 18px; font-size: var(--fs-sm); box-shadow: none; }
/* On narrow screens the horizontal title + button row runs out of width and the
   button label cramps, so stack it: title above a full-width "Select" button. */
@media (max-width: 560px) {
  .dropzone.is-compact { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
  .dropzone.is-compact .dropzone__btn { width: 100%; }
}

/* Full-window drop overlay */
.drop-overlay { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.drop-overlay__inner {
  width: min(420px, 100%); background: var(--surface-raised);
  border: 2px dashed var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow-xl);
  padding: 40px 32px; text-align: center;
}
.drop-overlay__icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: var(--r-lg); background: var(--accent-surface); color: var(--accent); display: grid; place-items: center; }
.drop-overlay__title { font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); color: var(--text); }
.drop-overlay__sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 4px; }

/* ============================================================
   RESULT / FILE LIST ROWS
   ============================================================ */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.toolbar--between { justify-content: space-between; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: var(--s7) 0 var(--s3); }
.panel__count { font-weight: 700; font-size: var(--fs-base); }
.panel__hint { font-size: var(--fs-xs); color: var(--text-muted); }

.items { display: flex; flex-direction: column; gap: 10px; }
.item {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px; background: var(--surface); box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}

.item__thumb { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--border); background: var(--surface-sunken); flex: none; }
.item__meta { min-width: 0; flex: 1; }
.item__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item__sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item__sub .save { color: var(--success); font-weight: 700; }
.item__sub .grew, .item__sub .kept { color: var(--text-muted); }
.item__action { flex: none; display: flex; align-items: center; gap: 10px; }

/* Batch totals summary */
.summary {
  margin-top: var(--s4); padding: 12px 14px;
  background: var(--accent-surface); border: 1px solid var(--accent-border); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text);
}
.summary .save { color: var(--success); font-weight: 700; }

/* ============================================================
   SPINNERS & SKELETONS (loading states)
   ============================================================ */
.spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite;
}
.spinner--accent { border-color: var(--accent-border); border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  position: relative; overflow: hidden;
  background: var(--surface-sunken); border-radius: var(--r-sm);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-100%); animation: shimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Busy / done button states */
.btn.is-busy, .btn.is-done { pointer-events: none; color: #fff; }
.btn.is-busy { background: var(--accent); opacity: 0.95; }
.btn.is-done { background: var(--success); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  z-index: 80; display: inline-flex; align-items: center; gap: 9px;
  background: var(--toast-bg); color: var(--toast-text);
  font-size: var(--fs-sm); font-weight: 600; padding: 11px 16px; border-radius: var(--r-full);
  box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast svg { flex: none; color: var(--success); }

/* ============================================================
   TOOL CARD (homepage grid + related-tools)
   ============================================================ */
.tool-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.tool-card__icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--accent-surface); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 16px;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.tool-card__title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--tracking-tight); color: var(--text);
}
.tool-card__title .arrow { display: inline-flex; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.tool-card__title .arrow svg { display: block; }
/* Keyboard users don't hover, so reveal the arrow on focus too. */
a.tool-card:focus-visible .tool-card__title .arrow { opacity: 1; transform: translateX(0); }

.tool-card__desc { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.55; margin-top: 6px; }

/* Coming-soon variant */
.tool-card.is-soon { background: transparent; border-style: dashed; box-shadow: none; }
.tool-card.is-soon .tool-card__icon { background: var(--bg-subtle); color: var(--text-faint); }
.tool-card.is-soon .tool-card__title { color: var(--text-secondary); }
.tool-soon-tag {
  align-self: flex-start; margin-top: 14px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-subtle); border-radius: var(--r-full); padding: 4px 11px;
}

/* ============================================================
   FAQ / DETAILS (shared)
   ============================================================ */
.faq { margin-top: var(--s5); }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--text); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 17px 0; transition: color var(--dur-1) var(--ease-out);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-size: 22px; font-weight: 400; line-height: 1; flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--text-secondary); margin: 0 0 17px; max-width: var(--maxw-prose); }

/* ============================================================
   LONG-FORM CONTENT (SEO sections, legal pages)
   ============================================================ */
.content { margin-top: var(--s16); }
.content h2 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-tight); }
.content h2:not(:first-child) { margin-top: var(--s10); }
.content h3 { font-size: var(--fs-lg); }
.content p { color: var(--text-secondary); max-width: var(--maxw-prose); margin-top: var(--s3); line-height: var(--lh-relaxed); }
.content ol, .content ul { margin: var(--s3) 0 0 1.1em; max-width: var(--maxw-prose); }
.content li { color: var(--text-secondary); margin-bottom: 8px; padding-left: 4px; line-height: var(--lh-body); }
.content li strong { color: var(--text); }
.content table { margin-top: var(--s4); border-collapse: collapse; font-size: var(--fs-sm); width: 100%; max-width: var(--maxw-prose); }
.content th, .content td { text-align: left; padding: 10px 18px 10px 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.content th { color: var(--text); font-weight: 700; }

/* Format / feature cards inside content */
.formats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: var(--s5); }
.fmt-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; background: var(--surface); box-shadow: var(--shadow-xs); }
.fmt-card h3 { font-size: var(--fs-base); }
.fmt-card p { font-size: var(--fs-sm); margin-top: 6px; }

/* ============================================================
   LEGAL PAGES + TABLE OF CONTENTS
   ============================================================ */
.legal-meta { margin-top: 10px; font-size: var(--fs-base); color: var(--text-secondary); }
.legal-meta strong { color: var(--text); font-weight: 700; }
.legal { max-width: 72ch; margin-top: 6px; }
.legal h2 { font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); color: var(--text); margin-top: var(--s10); scroll-margin-top: 84px; }
.legal h2:first-child { margin-top: var(--s6); }
.legal p { color: var(--text-secondary); margin-top: var(--s3); line-height: var(--lh-relaxed); }
.legal ul { margin: var(--s3) 0 0; padding-left: 1.2em; }
.legal li { color: var(--text-secondary); margin-top: 8px; line-height: var(--lh-body); padding-left: 4px; }
.legal strong { color: var(--text); font-weight: 700; }
.legal em { font-style: italic; }
.legal a { color: var(--accent-text); font-weight: 600; }

.toc { margin-bottom: var(--s7); padding: 2px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-xs); }
.toc[hidden] { display: none; }
.toc__title { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.toc__title::-webkit-details-marker { display: none; }
.toc__title::after { content: "+"; font-size: 18px; font-weight: 400; color: var(--accent); line-height: 1; }
.toc[open] .toc__title::after { content: "\2013"; }
.toc__body { padding-bottom: 6px; }
.toc nav ul { list-style: none; }
.toc a { display: block; padding: 7px 2px; line-height: 1.4; color: var(--text-secondary); font-weight: 500; font-size: var(--fs-sm); transition: color var(--dur-1) var(--ease-out); }

.toc a.is-active { color: var(--accent-text); font-weight: 600; }

@media (min-width: 1000px) {
  .legal-layout.has-toc { display: grid; grid-template-columns: minmax(0, 72ch) minmax(200px, 1fr); column-gap: 52px; align-items: start; }
  .legal-layout.has-toc .legal { order: 1; max-width: none; }
  .legal-layout.has-toc .toc { order: 2; }
  .toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 108px); overflow: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .toc__title { cursor: default; pointer-events: none; padding: 0 0 12px; }
  .toc__title::after { display: none; }
  .toc__body { padding: 0; }
  .toc nav ul { border-left: 1px solid var(--border); }
  .toc a { padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; }
  .toc a.is-active { border-left-color: var(--accent); color: var(--accent-text); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--s10) 0 var(--s12);
  margin-top: var(--s16);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8); align-items: flex-start; justify-content: space-between; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.footer-brand .brand { font-size: 16px; }
.footer-tagline { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.footer-cols { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s12); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col__head { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-faint); }
.footer-col a { color: var(--text-secondary); transition: color var(--dur-1) var(--ease-out); }

.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer-nav a { color: var(--text-secondary); transition: color var(--dur-1) var(--ease-out); }

.footer-bottom { display: flex; align-items: center; gap: 8px; }
.footer-version { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .02em; color: var(--text-muted); transition: color var(--dur-1) var(--ease-out); }

/* ============================================================
   FOCUS (keyboard accessibility)
   ============================================================ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.dropzone:focus-visible { outline-offset: 4px; }

/* ============================================================
   MOTION — page-load reveal + utilities
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fxRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .fx-rise { opacity: 0; animation: fxRise 0.55s var(--ease-out) both; animation-delay: var(--fx-delay, 0s); }
  main > .wrap > * { opacity: 0; animation: fxRise 0.5s var(--ease-out) both; }
  main > .wrap > *:nth-child(1) { animation-delay: 0.02s; }
  main > .wrap > *:nth-child(2) { animation-delay: 0.08s; }
  main > .wrap > *:nth-child(3) { animation-delay: 0.14s; }
  main > .wrap > *:nth-child(4) { animation-delay: 0.20s; }
  main > .wrap > *:nth-child(n + 5) { animation-delay: 0.25s; }
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); border: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Suppress transitions during theme switch so colours snap instead of animating. */
.theme-switching * { transition: none !important; }


/* ============================================================
   TOUCH FEEDBACK
   Hover is pointer-only (see the block below), so touch devices get an :active
   press instead — and we drop the default grey tap-flash so that press is the
   only feedback. :active fires on a real touch-down, never on a scroll.
   ============================================================ */
a, button, label, summary, input, [role="button"], .tool-card, .badge {
  -webkit-tap-highlight-color: transparent;
}
a.tool-card:active { transform: scale(0.985); border-color: var(--accent-border); }
.nav-panel__item:active { background: var(--accent-surface); color: var(--accent-text); }
.nav-burger:active { border-color: var(--accent); color: var(--text); }
.badge:active { border-color: var(--border-strong); }

/* ============================================================
   HOVER (pointer devices only)
   Gated so touch devices never get sticky/phantom hover from a finger
   landing on an element mid-scroll. Touch feedback comes from :active.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .icon-toggle:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
  .nav-cat__link:hover { color: var(--text); background: var(--surface-2); }
  .nav-cat:hover .nav-cat__chevron { transform: rotate(180deg); color: var(--accent); }
  .nav-cat:hover .nav-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
  .nav-panel__item:hover { background: var(--accent-surface); color: var(--accent-text); }
  .nav-panel__item:hover .nav-panel__icon { background: var(--accent); color: var(--accent-contrast); transform: scale(1.06); }
  .nav-panel__item:hover .nav-panel__arrow { opacity: 1; transform: translateX(0); }
  .crumbs a:hover { color: var(--accent-text); }
  .btn--primary:hover, .btn-primary:hover { background: var(--accent-hover);
  box-shadow: 0 8px 20px -8px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,0.18);
  transform: translateY(-1px); }
  .btn--secondary:hover { border-color: var(--text-muted); background: var(--surface-2); }
  .btn--ghost:hover, .btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-surface); }
  .btn--quiet:hover { background: var(--surface-2); color: var(--text); }
  .icon-btn:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); }
  .icon-btn.is-danger:hover { border-color: var(--danger-border); color: var(--danger); background: var(--danger-bg); }
  .input:hover, .textarea:hover { border-color: var(--text-muted); }
  .segmented label:hover { color: var(--text); background: var(--surface-2); }
  .dropzone:hover { border-color: var(--accent);
  background:
    radial-gradient(var(--accent-border) 1.1px, transparent 1.1px) 0 0 / 22px 22px,
    var(--surface); }
  .dropzone:hover .dropzone__icon { background: var(--chip-hover); color: var(--chip-glyph-hover); }
  .dropzone.is-compact:hover { border-color: var(--accent); }
  .dropzone:hover .dropzone__btn { background: var(--accent-hover); }
  .item:hover { border-color: var(--border-strong); }
  a.tool-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-3px); }
  a.tool-card:hover .tool-card__icon { background: var(--accent); color: var(--accent-contrast); transform: scale(1.05); }
  a.tool-card:hover .tool-card__title .arrow { opacity: 1; transform: translateX(0); }
  .faq summary:hover { color: var(--accent-text); }
  .legal a:hover { text-decoration: underline; }
  .toc a:hover { color: var(--accent-text); }
  .footer-col a:hover { color: var(--accent-text); }
  .footer-nav a:hover { color: var(--accent-text); }
  .footer-version:hover { color: var(--accent-text); }
}