/* ═══════════════════════════════════════════════════════════════
   cleanthis.io — site.css  (2026-10 redesign: pixel / terminal-window look)
   Shared design system: tokens, type, header, footer and the eight
   building blocks every page uses (window, button, field, segmented
   control, chip, callout, data table, code block) plus the small pieces
   (score bar, stamp, traffic light, toggle, disclosure, key–value list).
   Page-specific styles live in their own files (home.css, …).
   Spec: "cleanthis.io · developer handoff" doc + the Redesign canvas.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, zero third-party requests) ─────────────── */
@font-face { font-family: "Departure Mono"; src: url("/assets/fonts/departure-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ── Tokens: light is the default, dark swaps the same names ───── */
:root {
  --bg: #EEECE3; --bg2: #E5E2D6; --surf: #FBFAF5; --surf2: #F3F1E8; --bar: #E1DED1;
  --frame: #1C2320; --line: #CBC6B5; --hard: #1C2320;
  --ink: #141A17; --ink2: #38423E; --muted: #535D58;
  --teal: #1B655D; --lime: #A8D85C; --lime-ink: #3D6B0F; --on-lime: #141A17;
  --amber: #7A5300; --red: #B42A2A; --blue: #2F6497;
  --sel: #1C2320; --on-sel: #EEECE3;
  --red-bg: rgba(180, 42, 42, .08); --amber-bg: rgba(138, 94, 0, .08); --lime-bg: rgba(110, 159, 44, .12); --teal-bg: rgba(27, 101, 93, .08);
  --code-bg: #F6F4EC; --dot: rgba(20, 26, 23, .10); --scrim: rgba(10, 14, 13, .38);
  --ring: rgba(27, 101, 93, .18);
  --soft-win: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 48px -20px rgba(28, 35, 32, .32), 0 8px 16px -10px rgba(28, 35, 32, .2);
  --soft-spr: rgba(28, 35, 32, .3);
  --soft-btn: rgba(28, 35, 32, .35);
  --lime-glow: rgba(168, 216, 92, .65);
  /* neofetch palette strip */
  --a0: #1C2320; --a1: #B4423C; --a2: #5E8C23; --a3: #A47712; --a4: #2F6497; --a5: #7D4E9C; --a6: #1F7A6E; --a7: #9AA49F;
  /* spacing, radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 28px; --space-7: 48px; --space-8: 88px;
  --radius-win: 14px; --radius-ctl: 10px; --radius-sm: 4px; --radius-pill: 999px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --font-mono: "Departure Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 52px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B100F; --bg2: #0F1614; --surf: #121A18; --surf2: #17211E; --bar: #1A2522;
  --frame: #34453F; --line: #22302C; --hard: #000000;
  --ink: #E4F1EB; --ink2: #A9BAB3; --muted: #86988F;
  --teal: #4FBFB0; --lime: #A8D85C; --lime-ink: #A8D85C; --on-lime: #0B100F;
  --amber: #F2B33D; --red: #FF6B6B; --blue: #6FA3D4;
  --sel: #4FBFB0; --on-sel: #0B100F;
  --red-bg: rgba(255, 107, 107, .10); --amber-bg: rgba(242, 179, 61, .10); --lime-bg: rgba(168, 216, 92, .10); --teal-bg: rgba(79, 191, 176, .08);
  --code-bg: #0E1513; --dot: rgba(143, 224, 211, .08); --scrim: rgba(0, 0, 0, .5);
  --ring: rgba(79, 191, 176, .22);
  --soft-win: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 0 0 1px rgba(143, 224, 211, .04), 0 24px 52px -18px rgba(143, 224, 211, .17), 0 8px 18px -10px rgba(143, 224, 211, .12);
  --soft-spr: rgba(143, 224, 211, .26);
  --soft-btn: rgba(143, 224, 211, .24);
  --a0: #1A2522; --a1: #E06C75; --a2: #98C379; --a3: #E5C07B; --a4: #6FA3D4; --a5: #C49BD9; --a6: #4FBFB0; --a7: #C8D3CD;
  color-scheme: dark;
}
/* No-JS fallback: follow the OS until theme-init.js sets data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0B100F; --bg2: #0F1614; --surf: #121A18; --surf2: #17211E; --bar: #1A2522;
    --frame: #34453F; --line: #22302C; --hard: #000000;
    --ink: #E4F1EB; --ink2: #A9BAB3; --muted: #86988F;
    --teal: #4FBFB0; --lime-ink: #A8D85C; --on-lime: #0B100F;
    --amber: #F2B33D; --red: #FF6B6B; --blue: #6FA3D4;
    --sel: #4FBFB0; --on-sel: #0B100F;
    --red-bg: rgba(255, 107, 107, .10); --amber-bg: rgba(242, 179, 61, .10); --lime-bg: rgba(168, 216, 92, .10); --teal-bg: rgba(79, 191, 176, .08);
    --code-bg: #0E1513; --dot: rgba(143, 224, 211, .08); --scrim: rgba(0, 0, 0, .5); --ring: rgba(79, 191, 176, .22);
    --soft-win: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 0 0 1px rgba(143, 224, 211, .04), 0 24px 52px -18px rgba(143, 224, 211, .17), 0 8px 18px -10px rgba(143, 224, 211, .12);
    --soft-spr: rgba(143, 224, 211, .26); --soft-btn: rgba(143, 224, 211, .24);
    --a0: #1A2522; --a1: #E06C75; --a2: #98C379; --a3: #E5C07B; --a4: #6FA3D4; --a5: #C49BD9; --a6: #4FBFB0; --a7: #C8D3CD;
    color-scheme: dark;
  }
}

/* ── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
main { flex: 1 0 auto; display: block; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--lime-ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
::selection { background: var(--sel); color: var(--on-sel); }
button { font: inherit; color: inherit; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[hidden], .hidden { display: none !important; }
code, kbd, pre, samp { font-family: var(--font-mono); }

/* Pixel cursors — fine pointers only, never over text fields. */
@media (hover: hover) and (pointer: fine) {
  html.cur-pixel, html.cur-pixel body { cursor: url("/assets/cursors/arrow.png") 0 0, auto; }
  html.cur-pixel a, html.cur-pixel button, html.cur-pixel label, html.cur-pixel summary,
  html.cur-pixel .btn, html.cur-pixel [role="button"], html.cur-pixel [role="radio"], html.cur-pixel [role="tab"],
  html.cur-pixel a *, html.cur-pixel button *, html.cur-pixel label *, html.cur-pixel summary * { cursor: url("/assets/cursors/hand.png") 10 0, pointer; }
  html.cur-pixel input[type="text"], html.cur-pixel input[type="url"], html.cur-pixel input[type="search"],
  html.cur-pixel input:not([type]), html.cur-pixel textarea { cursor: text; }
  html.cur-pixel button:disabled, html.cur-pixel .btn[aria-disabled="true"] { cursor: not-allowed; }
}

/* ── Utilities ──────────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dots { background-image: radial-gradient(var(--dot) 1.2px, transparent 1.6px); background-size: 22px 22px; }
.dither { height: 8px; background-image: conic-gradient(var(--line) 25%, transparent 0 50%, var(--line) 0 75%, transparent 0); background-size: 8px 8px; }
.muted { color: var(--muted); }
.t-lime { color: var(--lime-ink); }
.t-teal { color: var(--teal); }
.t-amber { color: var(--amber); }
.t-red { color: var(--red); }
.t-ink { color: var(--ink); }
.mark::before { content: "■"; margin-right: .5em; color: var(--lime-ink); font-family: var(--font-mono); }
.mark--amber::before { color: var(--amber); }
.mark--red::before { color: var(--red); }
.mark--muted::before { color: var(--muted); }
.honeypot { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Layout */
.shell { width: 100%; max-width: 1240px; margin: 0 auto; }
.shell--read { max-width: 1040px; }
.shell--doc { max-width: 760px; }
.pad-x { padding-left: var(--gutter); padding-right: var(--gutter-r); }
.sec { position: relative; padding: 96px var(--gutter-r) 96px var(--gutter); }
.sec--alt { background: var(--bg2); }
.sec--tight { padding-block: 64px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; }

/* Type */
.h1, .h2, .h3, .disp { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; }
.h1 { font-size: clamp(40px, 4.6vw, 58px); line-height: 1.08; text-wrap: balance; }
.h1 .accent, .h2 .accent { color: var(--lime-ink); }
.h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; text-wrap: balance; }
.h2--sm { font-size: clamp(26px, 2.6vw, 33px); line-height: 1.15; }
.h3 { font-size: 22px; line-height: 1.2; }
.eyebrow { font-family: var(--font-mono); font-size: 13px; line-height: 16px; color: var(--teal); }
.eyebrow--caps { letter-spacing: .06em; }
.lead { font-size: 18px; line-height: 1.6; color: var(--ink2); max-width: 38em; }
.body-copy { font-size: 16px; line-height: 1.65; color: var(--ink2); }
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.label { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.beta-tag { display: inline-block; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; color: var(--bg); background: var(--amber); padding: 1px 6px; border-radius: var(--radius-sm); vertical-align: middle; }
.default-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; color: var(--on-lime); background: var(--lime); padding: 2px 6px; border-radius: var(--radius-sm); vertical-align: middle; }

/* ── Logo ───────────────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 22px; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo:hover { color: var(--ink); }
.logo__this { background: var(--sel); color: var(--on-sel); padding: 2px 3px; }
.logo__tld { color: var(--muted); }
.logo__cursor { display: inline-block; width: 10px; height: 20px; background: var(--lime); margin-left: 3px; animation: blink 1s steps(1) infinite; }
.logo--sm { font-size: 13px; }
.logo--sm .logo__this { padding: 0 2px; }

/* ── Header ─────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bar); border-bottom: 2px solid var(--frame); padding-left: var(--gutter); padding-right: var(--gutter-r); font-family: var(--font-mono); }
.site-nav { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-block: 8px; font-size: 15px; min-height: 50px; }
.site-nav .logo { margin-right: 10px; }
.ws-list { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin: 0; padding: 0; list-style: none; }
.ws-list > li { display: flex; align-items: center; }
/* a dim pipe between tabs, like a terminal status bar */
.ws-list > li + li::before { content: "|"; padding: 0 6px; color: var(--muted); opacity: .5; }
.ws { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; color: var(--ink2); text-decoration: none; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; line-height: 1.3; cursor: pointer; }
.ws:hover { background: var(--surf2); color: var(--ink); }
.ws[aria-current="page"], .ws.is-current { background: var(--surf2); color: var(--ink); border-bottom-color: var(--lime); }
.ws .beta { color: var(--amber); }
.ws .caret { font-size: 9px; }
.dev { position: relative; }
.dev .ws[aria-expanded="true"] { background: var(--surf2); color: var(--ink); }
.dev-menu { position: absolute; top: calc(100% + 12px); left: 0; width: 300px; z-index: 60; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.dev-menu a { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; color: var(--ink2); text-decoration: none; border-radius: var(--radius-ctl); }
.dev-menu a:hover, .dev-menu a:focus-visible { background: var(--surf2); }
.dev-menu a b { font-weight: 400; color: var(--ink); }
.dev-menu a span { font-family: var(--font-body); font-size: 13px; color: var(--muted); }
.dev-menu__foot { border-top: 2px solid var(--line); margin-top: 4px; padding: 8px 12px 4px; font-size: 11px; color: var(--muted); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--muted); }
.trackers { white-space: nowrap; }
.theme-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--surf); border: 2px solid var(--frame); color: var(--ink); padding: 4px 10px 4px 7px; font-family: var(--font-mono); font-size: 13px; line-height: 1.2; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.theme-btn:hover { background: var(--surf2); }
/* pixel sun in light mode, moon in dark: the icon shows the current theme */
.theme-btn__ico { display: block; flex: none; width: 18px; height: 18px; }
.theme-btn__ico--sun { color: #C98A00; }
.theme-btn__ico--moon { color: #F2DE8A; display: none; }
:root[data-theme="dark"] .theme-btn__ico--sun { display: none; }
:root[data-theme="dark"] .theme-btn__ico--moon { display: block; }
/* the copy in the phone menu footer is icon-only */
.theme-btn[data-tight] { padding: 8px; }
.theme-btn[data-tight] .theme-btn__lbl { display: none; }
.menu-btn { display: none; }

/* Desktop: the tabs are folder tabs standing on the header's bottom line.
   The current page's tab is raised, takes the page's own background and
   breaks the line, so the line runs up and around it into the page.
   --tab-bg is the colour right under the header: var(--bg) on every page;
   home.js swaps it to match whichever homepage section is under the header. */
@media (min-width: 1024px) {
  .site-nav { padding-block: 0; min-height: 50px; align-items: center; }
  .ws-list { align-self: stretch; align-items: flex-end; flex-wrap: nowrap; gap: 4px; margin-bottom: -2px; }
  .ws-list > li { align-self: flex-end; }
  .ws-list > li + li::before { content: none; }
  .ws {
    height: 34px; margin-bottom: 2px; padding: 0 14px; white-space: nowrap;
    background: var(--bar); color: var(--ink2);
    border: 2px solid var(--line); border-bottom: 0;
    border-radius: 9px 9px 0 0;
    transition: background-color .15s, color .15s, height .15s, border-color .15s;
  }
  .ws:hover { background: var(--surf2); color: var(--ink); border-color: var(--frame); height: 36px; }
  .ws[aria-current="page"], .ws.is-current {
    position: relative; z-index: 1; height: 42px; margin-bottom: 0;
    background: var(--tab-bg, var(--bg)); color: var(--ink);
    border-color: var(--frame);
  }
  .ws[aria-current="page"]:hover, .ws.is-current:hover { background: var(--tab-bg, var(--bg)); height: 42px; }
  .dev .ws[aria-expanded="true"] { background: var(--surf2); color: var(--ink); border-color: var(--frame); }
  .dev .ws.is-current[aria-expanded="true"] { background: var(--tab-bg, var(--bg)); }
  .dev-menu { top: calc(100% + 8px); }
  .site-nav .logo, .nav-right { align-self: center; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .ws { transition: none; } }

/* Mid widths: drop the tracker counter and tighten the tabs so they stay on one line */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav { gap: 4px 12px; }
  .site-nav .logo { margin-right: 0; }
  .site-nav .trackers { display: none; }
  .ws { padding: 0 8px; font-size: 14px; }
  .ws-list { gap: 3px; }
  /* icon-only theme button so the six tabs stay on one line */
  .theme-btn { padding: 4px 7px; }
  .theme-btn .theme-btn__lbl { display: none; }
}
/* Narrow header + menu (the full-name tabs need ~1024px) */
@media (max-width: 1023px) {
  .site-header { padding: 0 var(--gutter-r) 0 var(--gutter); }
  .site-nav { flex-wrap: nowrap; gap: 10px; padding-block: 12px; min-height: 70px; }
  .site-nav .logo { margin-right: 0; }
  .site-nav .logo__cursor { display: none; }
  .site-nav .ws-list, .site-nav .trackers { display: none; }
  .nav-right { gap: 10px; }
  .theme-btn { font-size: 12px; padding: 8px; min-height: 44px; }
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--surf); border: 2px solid var(--frame); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; padding: 0; }
  .menu-btn__bars { display: grid; gap: 4px; }
  .menu-btn__bars i { display: block; width: 16px; height: 2px; background: currentColor; }
  .menu-btn[aria-expanded="true"] .menu-btn__bars { display: none; }
  .menu-btn__x { display: none; font-family: var(--font-mono); font-size: 22px; line-height: 1; }
  .menu-btn[aria-expanded="true"] .menu-btn__x { display: block; }
}
/* Smallest phones (320px): logo + labelled theme button + menu button is
   ~10px wider than the space, which let every page scroll sideways. Drop to
   the icon-only theme button, as the mid-width header already does. */
@media (max-width: 359px) {
  .nav-right .theme-btn .theme-btn__lbl { display: none; }
  .nav-right .theme-btn { min-width: 44px; justify-content: center; }
}
.m-menu { position: fixed; left: 0; right: 0; bottom: 0; top: var(--menu-top, 72px); z-index: 45; background: var(--scrim); overflow-y: auto; overscroll-behavior: contain; }
.m-menu nav { margin: 10px 12px 24px; font-family: var(--font-mono); }
.m-menu__rows { padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 16.5px; }
.m-menu__row { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 12px; color: var(--ink); text-decoration: none; border-radius: var(--radius-ctl); border-left: 3px solid transparent; }
.m-menu__row:hover { background: var(--surf2); color: var(--ink); }
.m-menu__row[aria-current="page"] { background: var(--surf2); border-left-color: var(--lime); }
.m-menu__row .arr { color: var(--muted); }
.m-menu__row--sub { min-height: 44px; padding-left: 28px; color: var(--ink2); font-size: 15px; }
.m-menu__group { padding: 12px 12px 4px; font-size: 12px; color: var(--muted); }
.m-menu__rule { border-top: 2px solid var(--line); margin: 8px 4px 0; }
.m-menu__foot { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 2px solid var(--frame); background: var(--bg2); }
.m-menu__foot span { font-size: 12px; color: var(--muted); flex: 1; }
body.menu-open { overflow: hidden; }
@media (min-width: 1024px) { .m-menu { display: none !important; } }

/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { border-top: 2px solid var(--frame); background: var(--bar); padding: 22px var(--gutter-r) 22px var(--gutter); font-family: var(--font-mono); }
.site-footer__in { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 13px; color: var(--muted); }
.site-footer__copy { margin-left: auto; }
@media (max-width: 767px) {
  .site-footer { padding-bottom: 28px; }
  .site-footer__in { gap: 10px 16px; font-size: 12px; }
  .site-footer__in .logo { width: 100%; }
  .site-footer__copy { margin-left: 0; width: 100%; }
}

/* ── Window ─────────────────────────────────────────────────────── */
.win {
  background-color: var(--surf);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 140px);
  border: 2px solid var(--frame); border-radius: var(--radius-win); overflow: hidden;
  box-shadow: var(--soft-win); min-width: 0;
}
.win--lime { border-color: var(--lime-ink); }
.win--red { border-color: var(--red); }
.win--amber { border-color: var(--amber); }
.win--flat { box-shadow: none; }
.win--visible { overflow: visible; }
.win__bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bar); border-bottom: 2px solid var(--frame); font-family: var(--font-mono); font-size: 12px; color: var(--ink2); min-height: 30px; }
.win__bar--lg { padding: 8px 12px; font-size: 13px; }
.win__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win__dots { margin-left: auto; display: flex; gap: 5px; flex: none; }
.win__bar--lg .win__dots { gap: 6px; }
.wb { display: inline-block; width: 8px; height: 8px; border: 2px solid var(--frame); border-radius: var(--radius-sm); }
.wb--on { background: var(--frame); }
/* the easter-egg dots (boo-follow.js [data-boo-switch]): clicked blank dots fill red, then amber */
.wb--red { background: var(--red); }
.wb--amber { background: var(--amber); }
[data-boo-switch] .wb:not(.wb--on) { cursor: pointer; transition: box-shadow .12s steps(2), border-color .12s steps(2); }
[data-boo-switch] .wb:not(.wb--on):hover { border-color: var(--ink); box-shadow: 0 0 0 2px var(--line); }
html.cur-pixel [data-boo-switch] .wb:not(.wb--on) { cursor: url("/assets/cursors/hand.png") 10 0, pointer; }
/* switching the easter egg on: Boo pops (and grins for a beat) before he takes off — boo-follow.js `.is-hello` */
[data-boo-follow].is-hello [data-boo-img] { animation: pop .45s steps(5) both; }
.win__body { padding: 22px; }
@media (max-width: 767px) { .win { border-radius: 12px; } .win__body { padding: 16px; } }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-mono); font-size: 16.5px; line-height: 1; padding: 14px 20px;
  border: 2px solid var(--frame); border-radius: var(--radius-ctl);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 20px -10px var(--soft-btn);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px var(--soft-btn); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 10px -6px var(--soft-btn); }
.btn img { flex: none; }
/* Defaults for a bare .btn / .btn--mini (variants below override them) */
.btn { background: var(--surf); color: var(--ink); }
.btn--mini { color: var(--ink2); }
.btn--mini:hover { color: var(--ink); border-color: var(--teal); }
.btn--lime, .btn--lime:hover, .btn--lime:visited, .btn--lime:focus { background: var(--lime); color: var(--on-lime); border-color: var(--hard); }
.btn--lime { box-shadow: 0 10px 24px -10px var(--lime-glow); }
.btn--lime:hover { box-shadow: 0 16px 30px -10px rgba(168, 216, 92, .75); }
.btn--ghost, .btn--ghost:hover, .btn--ghost:visited { background: var(--surf); color: var(--ink); }
.btn--danger, .btn--danger:hover { background: var(--surf); color: var(--red); border-color: var(--red); }
.btn--lg { font-size: 18px; padding: 18px 24px; }
.btn--sm { font-size: 14px; padding: 10px 14px; }
.btn--mini { font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm); gap: 6px; box-shadow: none; }
.btn--mini:hover { box-shadow: none; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row > .btn { flex: 1 1 180px; }
@media (max-width: 767px) { .btn { min-height: 44px; } }

/* Text link in mono ("Read how it works →") */
.go { font-family: var(--font-mono); font-size: 14px; }

/* ── Field ──────────────────────────────────────────────────────── */
.field {
  font-family: var(--font-mono); font-size: 15px; line-height: 1.3;
  background: var(--surf); color: var(--ink); border: 2px solid var(--frame); border-radius: var(--radius-ctl);
  padding: 14px 16px; width: 100%; min-width: 0;
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--ring); }
.field[aria-invalid="true"] { border-color: var(--red); }
.field-hint { font-size: 14px; color: var(--muted); }
.field-err { font-size: 14px; color: var(--red); }

/* ── Segmented control (radio group) ───────────────────────────── */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 2px solid var(--frame); border-radius: var(--radius-ctl); overflow: hidden; background: var(--surf2); }
.seg__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; font-family: var(--font-mono); font-size: 14px; line-height: 1.2; color: var(--ink2); background: var(--surf); border: 0; border-left: 2px solid var(--frame); cursor: pointer; min-height: 44px; }
.seg__opt:first-child { border-left: 0; }
.seg__opt:hover { color: var(--ink); background: var(--surf2); }
.seg__opt[aria-checked="true"] { background: var(--sel); color: var(--on-sel); }
.seg__opt:focus-visible { outline-offset: -4px; }
.seg__meter { letter-spacing: 1px; }
/* tab-style variant: selected option gets a lime underline instead of the dark fill */
.seg--tabs .seg__opt[aria-checked="true"], .seg--tabs .seg__opt[aria-selected="true"] { background: var(--surf); color: var(--ink); box-shadow: inset 0 -3px 0 var(--lime); }

/* ── Chip ───────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 2px solid var(--frame); border-radius: var(--radius-pill); background: var(--surf); color: var(--ink2); font-family: var(--font-mono); font-size: 13px; line-height: 1.2; text-decoration: none; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--teal); }
.chip::before { content: "■"; color: var(--lime-ink); }
.chip--plain::before { content: none; }
.chip--amber { border-color: var(--amber); } .chip--amber::before { color: var(--amber); }
.chip--red { border-color: var(--red); } .chip--red::before { color: var(--red); }
@media (max-width: 767px) { .chip { min-height: 44px; } }

/* ── Callout ────────────────────────────────────────────────────── */
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--teal); border-radius: var(--radius-ctl); background: var(--teal-bg); font-size: 14.5px; line-height: 1.6; color: var(--ink2); }
.callout > img { flex: none; margin-top: 2px; width: 18px; height: 18px; image-rendering: pixelated; }
.callout__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.callout__title { font-family: var(--font-mono); font-size: 14.5px; color: var(--ink); }
.callout--warn { border-color: var(--amber); background: var(--amber-bg); }
.callout--warn .callout__title { color: var(--amber); }
.callout--danger { border-color: var(--red); background: var(--red-bg); }
.callout--danger .callout__title { color: var(--red); }
.callout--ok { border-color: var(--lime-ink); background: var(--lime-bg); }
.callout .btn-row { gap: 10px; }
.callout .btn-row > .btn { flex: 0 0 auto; }

/* ── Data table ─────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--frame); background: var(--bar); }
.tbl td { padding: 12px 14px; border-bottom: 2px solid var(--line); vertical-align: middle; color: var(--ink2); line-height: 1.5; }
.tbl tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
  .tbl--stack thead { display: none; }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td { display: block; width: 100%; }
  .tbl--stack tr { border-bottom: 2px solid var(--line); padding: 10px 0; }
  .tbl--stack tr:last-child { border-bottom: 0; }
  .tbl--stack td { border: 0; padding: 4px 14px; }
  .tbl--stack td:first-child { font-family: var(--font-mono); color: var(--ink); }
  .tbl--stack td[data-label]::before { content: attr(data-label) " "; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
}

/* ── Code block ─────────────────────────────────────────────────── */
.code { background: var(--code-bg); }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: var(--ink2); tab-size: 2; }
.code .c-cm { color: var(--muted); }
.code .c-key { color: var(--teal); }
.code .c-str { color: var(--amber); }
.code .c-pr { color: var(--lime-ink); }
.code .c-num { color: var(--blue); }
.code-copy { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink2); background: transparent; border: 2px solid var(--frame); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; }
.code-copy:hover { color: var(--ink); background: var(--surf2); }
.badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; line-height: 1.3; padding: 1px 6px; border-radius: var(--radius-sm); border: 2px solid var(--frame); color: var(--ink2); }
.badge--ok { border-color: var(--lime-ink); color: var(--lime-ink); background: var(--lime-bg); }
.badge--get { border-color: var(--blue); color: var(--blue); }
.badge--post { border-color: var(--lime-ink); color: var(--lime-ink); }
.badge--del { border-color: var(--red); color: var(--red); }

/* ── Small pieces ───────────────────────────────────────────────── */
/* Score bar: █ filled, ░ empty + a number */
.score { font-family: var(--font-mono); font-size: 13px; line-height: 1.8; display: grid; grid-template-columns: auto 1fr auto; gap: 0 12px; align-items: baseline; }
.score__bar { letter-spacing: 1px; white-space: nowrap; }
.score--hi .score__bar { color: var(--lime-ink); }
.score--mid .score__bar { color: var(--amber); }
.score--lo .score__bar { color: var(--red); }
/* Verdict stamp */
.stamp { display: inline-block; align-self: flex-start; font-family: var(--font-mono); font-size: 33px; line-height: 1.1; letter-spacing: .08em; padding: 6px 14px; border: 3px solid var(--lime-ink); color: var(--lime-ink); border-radius: var(--radius-ctl); transform: rotate(-8deg); animation: stamp .45s steps(6) both; white-space: nowrap; }
.stamp--sm { font-size: 22px; padding: 6px 12px; }
.stamp--amber { border-color: var(--amber); color: var(--amber); }
.stamp--red { border-color: var(--red); color: var(--red); }
/* Traffic light */
.traffic { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg); border: 2px solid var(--frame); border-radius: var(--radius-sm); height: fit-content; flex: none; }
.traffic i { display: block; width: 14px; height: 14px; background: var(--line); }
.traffic--lg i { width: 22px; height: 22px; }
.traffic .on-red { background: var(--red); box-shadow: 0 0 14px var(--red); }
.traffic .on-amber { background: var(--amber); box-shadow: 0 0 14px var(--amber); }
.traffic .on-lime { background: var(--lime); box-shadow: 0 0 14px var(--lime); }
/* Toggle switch */
.toggle { position: relative; width: 44px; height: 24px; flex: none; border: 2px solid var(--frame); border-radius: var(--radius-pill); background: var(--surf2); cursor: pointer; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--frame); transition: transform .12s steps(2); }
.toggle[aria-checked="true"] { background: var(--lime); }
.toggle[aria-checked="true"]::after { transform: translateX(20px); background: var(--on-lime); }
/* Disclosure */
.disc { border: 2px solid var(--frame); border-radius: var(--radius-ctl); background: var(--surf); }
.disc > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; font-family: var(--font-mono); font-size: 15px; min-height: 48px; }
.disc > summary > img { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.disc__count { color: var(--muted); }
.disc__sub { font-family: var(--font-body); font-size: 13px; color: var(--muted); }
.disc__chev { margin-left: auto; color: var(--muted); display: inline-block; transition: transform .12s steps(2); }
.disc[open] > summary .disc__chev { transform: rotate(90deg); }
.disc__body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.disc--red { border-color: var(--red); background: var(--red-bg); }
.disc--red .disc__count { color: var(--red); }
.disc--amber { border-color: var(--amber); background: var(--amber-bg); }
.disc--amber .disc__count { color: var(--amber); }
@media (max-width: 767px) { .disc__sub { display: none; } }
/* Key–value list */
.kv { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 4px 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; padding: 10px 12px; background: var(--bg); border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--ink2); }
.kv > dt, .kv > .k { color: var(--teal); overflow-wrap: anywhere; margin: 0; }
.kv > dd, .kv > .v { margin: 0; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 767px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv > dt:not(:first-child), .kv > .k:not(:first-child) { margin-top: 6px; }
}

/* Mono log lines (scan.log / progress) */
.log { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.85; color: var(--ink2); overflow-wrap: anywhere; }
.log > div { white-space: pre-wrap; }
.log .bad { color: var(--red); }
.log .warn { color: var(--amber); }
.log .ok { color: var(--lime-ink); }
.log .hi { color: var(--ink); }
.cursor { animation: blink 1s steps(1) infinite; }

/* Block progress bar (striped block slides across) */
.pbar { position: relative; height: 18px; border: 2px solid var(--frame); border-radius: var(--radius-sm); background: var(--bg2); overflow: hidden; }
.pbar__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(90deg, var(--lime) 0 10px, var(--lime-ink) 10px 12px); transition: width .4s steps(6); }
.pbar--indet .pbar__fill { width: 30%; animation: pbarSlide 1.1s steps(8) infinite; }
@keyframes pbarSlide { 0% { left: -30%; } 100% { left: 100%; } }

/* ── FAQ list + arrow list (shared by home + inner pages) ──────── */
.qa { display: flex; flex-direction: column; border-top: 2px solid var(--line); }
.qa details { border-bottom: 2px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-family: var(--font-mono); font-size: 18px; line-height: 1.35; color: var(--ink); -webkit-text-stroke: .35px currentColor; cursor: pointer; }
.qa summary:hover { color: var(--lime-ink); }
.qa .plus { color: var(--lime-ink); transition: transform .1s steps(2); flex: none; }
.qa details[open] .plus { transform: rotate(45deg); }
.qa p { margin: 0 0 20px 2px; padding-left: 16px; border-left: 3px solid var(--lime); font-size: 15.5px; line-height: 1.7; color: var(--ink2); }
.qa p a { color: var(--ink); }
.arrows { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); font-size: 14.5px; margin: 0; padding: 0; list-style: none; }
.arrows li::before { content: "→ "; color: var(--lime-ink); }
.arrows li { display: flex; gap: 12px; line-height: 1.6; }
.arrows li::before { content: "→"; flex: none; }
@media (max-width: 767px) {
  .qa summary { font-size: 16px; padding: 16px 0; }
  .qa p { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; padding-left: 12px; }
}

/* ── Sprites (Boo) ──────────────────────────────────────────────── */
.spr { image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 10px 8px var(--soft-spr)); }
.ico { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.bob { animation: bob 1.4s steps(2) infinite; }
.shake { animation: shake .25s steps(2) 3; }
.pop { animation: pop .4s steps(5) both; }
.zap { animation: zap .5s steps(4) both; }

/* ── Boo follows the mouse (boo-follow.js; desktop, fine pointer, no reduced-motion) ── */
/* The wrapper goes position:fixed while flying; the module sets left/top/width/height
   inline and leaves an invisible placeholder in his slot. 55 = above the sticky
   header (50), below .dev-menu (60). */
[data-boo-follow].is-flying { position: fixed; right: auto; bottom: auto; margin: 0; z-index: 55; pointer-events: none; }
/* depth (2026-10-24): in flight he is BEHIND everything that paints — text included —
   because z-index −1 sits under every in-flow box in the page. The only things that must
   stay under him are the section backgrounds, so while he flies those move to an ::after
   at z −2 (the sections are position:relative, so the pseudo fills them exactly).
   Reversible: delete this block (the `boo-flying` body class is harmless on its own). */
body.boo-flying [data-boo-follow].is-flying { z-index: -1; }
body.boo-flying .hsec--alt, body.boo-flying .psec--alt, body.boo-flying .sec--alt, body.boo-flying .dots { background-color: transparent; background-image: none; }
body.boo-flying .hsec--alt::after, body.boo-flying .psec--alt::after, body.boo-flying .sec--alt::after, body.boo-flying .dots::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
body.boo-flying .hsec--alt::after, body.boo-flying .psec--alt::after, body.boo-flying .sec--alt::after { background-color: var(--bg2); }
body.boo-flying .dots::after { background-image: radial-gradient(var(--dot) 1.2px, transparent 1.6px); background-size: 22px 22px; }
/* in flight the scanner bubble stays hidden until the pointer has rested ~2 s (`.is-quiet`, boo-follow.js) */
[data-boo-follow].is-flying .sc-bubble { opacity: 0; transition: opacity .25s steps(3); }
[data-boo-follow].is-flying.is-quiet .sc-bubble { opacity: 1; }
/* the faint copies he leaves behind while moving (created/positioned by boo-follow.js;
   no drop-shadow — a shadow under a 20%-opacity sprite reads as dirt on the dark theme) */
[data-boo-follow] .boo-trail { position: absolute; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; filter: none; }

/* ── Motion ─────────────────────────────────────────────────────── */
@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pop { 0% { transform: scale(.4) translateY(10px); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: none; opacity: 1; } }
@keyframes zap { 0% { opacity: 1; transform: none; } 40% { opacity: .25; transform: translateX(3px); } 100% { opacity: .55; transform: none; } }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-8deg); opacity: 0; } 70% { transform: scale(.94) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes sweep { 0% { top: 0; } 100% { top: calc(100% - 4px); } }
.sweep { position: absolute; left: 0; right: 0; height: 4px; background: var(--lime); box-shadow: 0 0 18px var(--lime); animation: sweep 1.1s steps(12) infinite alternate; pointer-events: none; }

/* ── Responsive type + section rhythm ───────────────────────────── */
@media (max-width: 767px) {
  .h1 { font-size: 34px; line-height: 1.12; }
  .h2 { font-size: 26px; line-height: 1.2; }
  .h2--sm { font-size: 24px; }
  .h3 { font-size: 20px; }
  .lead { font-size: 16px; }
  .sec { padding-top: 48px; padding-bottom: 48px; }
  .eyebrow { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .m-menu { display: none !important; }
  body { background: #fff; color: #000; }
  [data-boo-follow].is-flying { display: none; }
}