/* ============================================================================
   RapidCircuitry design system — rc.css  (2026 revamp)
   One source of truth for tokens + shared components across every page.
   Served at /rc.css; each page keeps only page-specific styles after this.

   Architecture (2026):
     • OKLCH color — perceptually-uniform primitive ramps → semantic aliases →
       component tokens. Every legacy token name is preserved as an alias so pages
       not yet migrated keep rendering unchanged.
     • Container queries + a single responsive scale (no more ~20 ad-hoc breakpoints).
     • WCAG 2.2 AA baked in: 36px compact / 44px touch targets, a 3:1
       focus-appearance ring, visible
       focus on everything, reduced-motion honored.
     • NOTE: kept intentionally FLAT (no @layer) while pages are migrated one at a
       time — cascade layers would make unlayered page <style> blocks override the
       system regardless of specificity and shift the not-yet-migrated pages. Layers
       return in the final polish phase once every page consumes the system.

   Identity: a precision instrument with presence. Dark-first (a lab bench at night,
   lit by signal), light theme designed — not inverted. Mono carries DATA (values,
   pins, RC-codes — always tabular); sans carries prose. A blue→violet signal
   gradient is the brand's energy, used sparingly. Severity means one thing each,
   everywhere: red=error, amber=warning, green=verified, blue=informational.
   ========================================================================== */

/* Self-hosted Inter (served from /fonts) — the prose typeface across the app. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/inter-var.woff2') format('woff2')}
/* Blueprint typefaces — Archivo (prose) · IBM Plex Mono (data) · Newsreader (serif accent), self-hosted from /fonts (CSP default-src 'self'). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/archivo-400-normal-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:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/archivo-400-normal-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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/archivo-500-normal-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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/archivo-500-normal-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:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/archivo-600-normal-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:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/archivo-600-normal-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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-700-normal-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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/archivo-700-normal-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:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-800-normal-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:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/archivo-800-normal-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:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/newsreader-400-italic-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:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/newsreader-400-italic-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:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/newsreader-500-italic-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:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/newsreader-500-italic-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400-normal-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400-normal-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500-normal-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500-normal-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plexmono-600-normal-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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plexmono-600-normal-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}
/* Code Saver brand mono is intentionally unbundled (webui/fonts/ ships no .otf); the --mono stack is
   the effective typeface. Re-add @font-face here if the .otf files are ever shipped. */

  /* ---- Blueprint design system (2026): dark = cyanotype blueprint, light = drafting paper.
     Same token NAMES as before (every page/component derives from these), Blueprint VALUES.
     Type: Archivo (prose) · IBM Plex Mono (data/values/RC-codes) · Newsreader (serif accent). ---- */
  :root, :root[data-theme="dark"]{
    color-scheme:dark;
    --mono:'IBM Plex Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:'Archivo',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --serif:'Newsreader',Georgia,serif;

    /* ---- primitive ramp: cyanotype navy bg → bright ink ---- */
    --n-0:#0a1a2f;  --n-1:#0c1f3a;  --n-2:#0e2340;
    --n-3:#123156;  --n-4:#17406e;
    --n-line:rgba(120,175,255,.20); --n-line-2:rgba(120,175,255,.42);
    --n-ink:#e8f1ff; --n-muted:#93b0d6; --n-faint:#93a9c9;
    --blue:#68b0ff; --blue-2:#8ec4ff; --violet:#68b0ff;

    /* ---- semantic neutral (legacy names preserved) ---- */
    --bg:var(--n-0); --bg-2:var(--n-1); --panel:var(--n-1); --panel-2:var(--n-2); --raise:var(--n-3);
    --line:var(--n-line); --line-2:var(--n-line-2);
    --ink:var(--n-ink); --muted:var(--n-muted); --faint:var(--n-faint);

    /* ---- accent (flat blueprint blue; text ON accent uses --on-accent) ---- */
    --accent:var(--blue); --accent-2:var(--blue-2); --accent-3:var(--blue);
    --accent-rgb:104,176,255; --on-accent:#0a1a2f;
    --accent-bg:rgba(104,176,255,.14); --accent-line:rgba(104,176,255,.42);
    --accent-weak:rgba(104,176,255,.10);
    --grad:linear-gradient(135deg, #68b0ff 0%, #8ec4ff 100%);
    --grad-soft:linear-gradient(135deg, rgba(104,176,255,.16), rgba(104,176,255,.10));
    --grad-line:linear-gradient(120deg, var(--accent-line), rgba(104,176,255,.25) 70%, transparent);
    --glow:0 0 0 1px rgba(104,176,255,.35), 0 8px 24px -10px rgba(104,176,255,.5);

    /* ---- severity — fixed meanings everywhere ---- */
    --ok:#4fd39b;  --ok-bg:rgba(79,211,155,.14);  --ok-line:rgba(79,211,155,.4);  --ok-weak:rgba(79,211,155,.12);
    --warn:#f0c268; --warn-bg:rgba(240,194,104,.14); --warn-line:rgba(240,194,104,.42); --warn-weak:rgba(240,194,104,.12);
    --err:#ff7a68;  --err-bg:rgba(255,122,104,.14);  --err-line:rgba(255,122,104,.44);
    --bad:var(--err); --bad-bg:var(--err-bg); --bad-line:var(--err-line); --bad-weak:rgba(255,122,104,.12);
    --info:var(--accent);

    /* schematic canvas tokens (consumed by the editor) */
    --sym:#cfe0f5; --canvas:#0a1a2f; --grid:rgba(120,175,255,.08); --grid-dot:rgba(120,175,255,.14);

    --shadow:0 1px 0 rgba(255,255,255,.03), 0 24px 64px -32px rgba(0,0,0,.9);
    --shadow-pop:0 4px 14px -2px rgba(0,0,0,.55), 0 28px 72px -24px rgba(0,0,0,.85);
    --maxw:1180px;

    /* ---- spacing scale (4px base) ---- */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

    /* ---- motion ---- */
    --ease:cubic-bezier(.2,.8,.2,1);
    --t-fast:120ms; --t-ui:180ms; --t-modal:260ms;

    --r-s:6px; --r-m:9px; --r-l:14px; --r-xl:20px;

    /* ---- a11y: WCAG 2.2 focus appearance (3:1) + practical targets ---- */
    --tap:36px; --tap-touch:44px;
    --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--accent), 0 0 0 5px rgba(104,176,255,.35);
  }

  :root[data-theme="light"]{
    color-scheme:light;
    --n-0:#f2f0ea; --n-1:#fbfaf6; --n-2:#e9e7df;
    --n-3:#fbfaf6; --n-4:#ddd9cf;
    --n-line:rgba(20,22,28,.15); --n-line-2:rgba(20,22,28,.28);
    --n-ink:#17191c; --n-muted:#545861; --n-faint:#5b5f67;
    --blue:#1c4fd8; --blue-2:#1642b8; --violet:#1c4fd8;
    --bg:var(--n-0); --bg-2:#e9e7df;
    --accent-rgb:28,79,216; --on-accent:#ffffff;
    --accent-bg:rgba(28,79,216,.10); --accent-line:rgba(28,79,216,.30); --accent-weak:rgba(28,79,216,.08);
    --grad:linear-gradient(135deg, #1c4fd8 0%, #1642b8 100%);
    --grad-soft:linear-gradient(135deg, rgba(28,79,216,.10), rgba(28,79,216,.06));
    --glow:0 0 0 1px rgba(28,79,216,.22), 0 10px 28px -10px rgba(28,79,216,.4);
    --ok:#177a4f; --ok-bg:rgba(31,143,95,.12); --ok-line:rgba(31,143,95,.34); --ok-weak:rgba(31,143,95,.1);
    --warn:#8a5a12; --warn-bg:rgba(183,121,31,.12); --warn-line:rgba(183,121,31,.32); --warn-weak:rgba(183,121,31,.1);
    --err:#c5301f; --err-bg:rgba(216,64,46,.09); --err-line:rgba(216,64,46,.32);
    --bad-weak:rgba(216,64,46,.08);
    --sym:#1a2b40; --canvas:#f7f5ef; --grid:rgba(20,40,80,.06); --grid-dot:rgba(20,40,80,.1);
    --shadow:0 1px 2px rgba(20,22,28,.06), 0 24px 56px -36px rgba(20,22,28,.28);
    --shadow-pop:0 4px 14px -4px rgba(20,22,28,.14), 0 28px 60px -24px rgba(20,22,28,.24);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--rc-nav-height, 58px) + 12px)}
  html,body{margin:0;max-inline-size:100%;overflow-x:clip}
  body{
    font-family:var(--sans); color:var(--ink);
    /* drafting-paper grid backdrop (Blueprint identity); solid panels occlude it over content */
    background-color:var(--bg);
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:32px 32px;
    -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:clip;
  }
  ::selection{background:var(--accent-bg); color:var(--ink)}
  a{color:inherit; text-decoration:none}
  a.text{color:var(--accent)} a.text:hover{text-decoration:underline; text-underline-offset:3px}
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
  [contenteditable="true"]:focus-visible{outline:2px solid transparent; outline-offset:2px; box-shadow:var(--focus)}
  :target{scroll-margin-block-start:calc(var(--rc-nav-height, 58px) + 12px)}
  main, header, footer, section, .wrap, .nav-in{min-width:0}
  img, video{max-width:100%; height:auto}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
  .mono, code, kbd, .num{font-family:var(--mono); font-variant-numeric:tabular-nums}
  p, li{max-width:72ch}
  .rule{height:1px; background:var(--grad-line)}

  h1,h2,h3{line-height:1.15; letter-spacing:-.018em; margin:0 0 .5em; font-weight:680}
  h1{font-size:clamp(28px,4.5vw,44px); letter-spacing:-.028em}
  h2{font-size:clamp(20px,2.6vw,26px)}
  h3{font-size:16px}
  .eyebrow{
    font-family:var(--mono); font-size:11.5px; font-weight:650;
    letter-spacing:.14em; text-transform:uppercase;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .grad-ink{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

  *{scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px; border:2px solid var(--bg)}
  *::-webkit-scrollbar-track{background:transparent}

  /* ------------------------------------------------------------------- nav */
  nav.top{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
    border-bottom:1px solid var(--line);
  }
  nav.top::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--grad-line); opacity:.7}
  .nav-in{display:flex; align-items:center; gap:6px; height:58px; max-width:var(--maxw); margin:0 auto; padding:0 28px}
  .brand{display:flex; align-items:center; font-family:var(--mono); font-weight:700; font-size:14.5px; letter-spacing:-.02em; margin-right:14px}
  .brand .mark, .brand .dot{
    width:18px; height:18px; border-radius:6px; margin-right:10px; flex:none;
    background:var(--grad);
    box-shadow:inset 0 0 0 4.5px var(--bg), 0 0 0 1px var(--accent-line), 0 2px 10px -2px oklch(66% .17 258 / .7);
  }
  .brand small{color:var(--faint); font-weight:500; margin-left:8px}
  .nav-links{display:flex; gap:4px; align-items:center; counter-reset:step}
  .nav-links a{
    position:relative; display:flex; align-items:center; gap:9px; min-height:var(--tap);
    font-family:var(--sans); font-size:13px; font-weight:550; color:var(--muted);
    padding:6px 14px 6px 8px; border-radius:999px; white-space:nowrap;
    transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  }
  .nav-links a::before{
    counter-increment:step; content:counter(step);
    width:21px; height:21px; flex:none; border-radius:50%; display:grid; place-items:center;
    font-family:var(--mono); font-size:11px; font-weight:700; color:var(--muted);
    background:var(--panel-2); border:1px solid var(--line-2);
    transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .nav-links a::after{content:""; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:9px; height:2px; border-radius:2px; background:var(--line-2)}
  .nav-links a:last-child::after{display:none}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::before{border-color:var(--accent-line); color:var(--ink)}
  .nav-links a[aria-current="page"], .nav-links a.active{color:var(--ink); background:var(--accent-bg)}
  .nav-links a[aria-current="page"]::before, .nav-links a.active::before{background:var(--accent); color:#fff; border-color:transparent; box-shadow:0 0 0 3px var(--accent-bg)}
  a.navlink{display:inline-flex; align-items:center; min-height:var(--tap); font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--muted); padding:7px 11px; border-radius:var(--r-s)}
  a.navlink:hover{color:var(--ink); background:var(--panel-2)}
  a.navlink.active{color:var(--ink); background:var(--panel-2); box-shadow:inset 0 -2px 0 var(--accent)}
  /* guided-flow gate: a step locked until the previous one is completed (rc-flow.js) */
  .nav-links a.locked{opacity:.5; cursor:not-allowed; pointer-events:none}
  .nav-links a.locked::before{counter-increment:step; content:"🔒"; font-size:10px; background:var(--panel-2); color:var(--faint); border-color:var(--line); box-shadow:none}
  #rcflow-bar{position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; gap:14px;
    background:var(--panel); border:1px solid var(--line-2); border-radius:14px; padding:11px 13px 11px 18px;
    box-shadow:var(--shadow-pop); animation:rcflow-rise .3s var(--ease)}
  @keyframes rcflow-rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
  #rcflow-bar .rcflow-ok{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--ok); white-space:nowrap}
  /* dark ink on the brand gradient (the AA-safe pattern .btn.primary uses) — white-on-accent failed
     WCAG on both themes (3.13 dark / 4.36 light); dark text on the mid-tone gradient clears AA. */
  #rcflow-bar .rcflow-next{font-family:var(--sans); font-weight:700; font-size:14px; color:var(--on-accent); white-space:nowrap;
    background:var(--grad); padding:9px 16px; border-radius:10px; transition:filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease)}
  #rcflow-bar .rcflow-next:hover{filter:brightness(1.05); transform:translateY(-1px)}
  .nav-spacer{flex:1}
  .rc-open-testing-status{flex:none; white-space:nowrap; font-family:var(--mono); font-size:10px;
    font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ok);
    background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:999px; padding:5px 8px}
  /* nav chrome buttons must never shrink below their WCAG-2.2 target size in a crowded nav row
     (the review nav squeezed #keybtn/#themebtn to ~12px wide — target-size failure). */
  nav.top .btn{flex:none}
  nav.top button{min-block-size:var(--tap) !important; min-inline-size:var(--tap)}

  /* --------------------------------------------------------------- buttons */
  .btn{
    font-family:var(--mono); font-size:13px; font-weight:600; line-height:1;
    border-radius:var(--r-m); padding:10px 16px; min-height:36px;
    border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink);
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative;
    transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
               transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  }
  .btn, .tabs .tab, .tabs button, .seg button, .seg .seg-btn{min-block-size:var(--tap) !important}
  .btn::after{content:""; position:absolute; inset:-4px; pointer-events:none}
  .btn:hover{background:var(--raise); border-color:var(--line-2); transform:translateY(-1px)}
  .btn:active{transform:scale(.97)}
  .btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
  .btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
  .btn.primary{background:var(--grad); border-color:transparent; color:var(--on-accent); background-size:140% 140%; background-position:0% 50%}
  .btn.primary:hover{background-position:100% 50%; transform:translateY(-1px); box-shadow:var(--glow)}
  .btn.primary:active{transform:scale(.97)}
  .btn.danger{background:var(--err-bg); border-color:var(--err-line); color:var(--err)}
  .btn.danger:hover{background:var(--err-bg); border-color:var(--err); color:var(--err)}
  .btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
  .btn.ghost:hover{color:var(--ink); background:var(--panel-2)}
  .btn.sm{padding:6px 10px; min-height:var(--tap); font-size:12px; border-radius:var(--r-s)}
  .btn.icon{padding:0; width:36px; min-height:36px; justify-content:center}
  .btn.icon.sm{width:var(--tap); min-height:var(--tap)}

  /* --------------------------------------------------- segmented control */
  .seg{display:inline-flex; max-width:100%; border:1px solid var(--line-2); border-radius:var(--r-m); overflow:auto hidden; background:var(--panel-2)}
  .seg button, .seg .seg-btn{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--muted); background:transparent; border:0; border-left:1px solid var(--line-2); padding:7px 12px; min-height:var(--tap); cursor:pointer; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
  .seg button:first-child, .seg .seg-btn:first-child{border-left:0}
  .seg button:hover, .seg .seg-btn:hover{background:var(--raise); color:var(--ink)}
  .seg button.on, .seg button[aria-pressed="true"], .seg .seg-btn.on{background:var(--accent-bg); color:var(--accent); font-weight:700}
  .seg button:focus-visible, .seg .seg-btn:focus-visible{outline:2px solid var(--accent); outline-offset:-3px; box-shadow:none; position:relative; z-index:1}

  /* --------------------------------------------------------- tabs (shared) */
  .tabs{display:flex; min-width:0; max-width:100%; gap:4px; flex-wrap:wrap}
  .tabs .tab, .tabs button{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--muted); background:var(--panel-2); border:1px solid var(--line-2); border-radius:999px; padding:7px 13px; min-height:var(--tap); cursor:pointer; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
  .tabs .tab:hover, .tabs button:hover{color:var(--ink); border-color:var(--accent-line)}
  .tabs .tab.active, .tabs button.active, .tabs [aria-selected="true"]{background:var(--accent-bg); border-color:var(--accent-line); color:var(--accent)}
  .tabs .tab:focus-visible, .tabs button:focus-visible{outline:2px solid var(--accent); outline-offset:-3px; box-shadow:none}

  /* ------------------------------------------ opt-in viewport workspaces */
  /* Product workbenches can opt into a fixed desktop viewport by placing
     data-rc-viewport-shell (or .rc-viewport-shell) on their outer shell. The
     runtime adds the root lock only while that shell exists and the viewport is
     wider than the mobile breakpoint. Ordinary document pages remain untouched. */
  [data-rc-viewport-shell], .rc-viewport-shell{
    display:flex; flex-direction:column; min-inline-size:0; min-block-size:100dvh;
  }
  [data-rc-workspace-main], .rc-workspace-main{
    flex:1 1 auto; min-inline-size:0; min-block-size:0; overflow:hidden;
  }
  [data-rc-contained-scroll], .rc-contained-scroll{
    min-inline-size:0; min-block-size:0; overflow:auto; overscroll-behavior:contain;
    scrollbar-gutter:stable; scroll-padding:12px; -webkit-overflow-scrolling:touch;
  }
  .rc-control-strip{min-inline-size:0; max-inline-size:100%; scroll-padding-inline:8px; overscroll-behavior-inline:contain}

  @media (min-width:821px){
    html.rc-viewport-locked, html.rc-viewport-locked body{block-size:100%; overflow:hidden}
    html.rc-viewport-locked body{overscroll-behavior:none}
    html.rc-viewport-locked [data-rc-viewport-shell],
    html.rc-viewport-locked .rc-viewport-shell{block-size:100dvh; min-block-size:0; overflow:hidden}

    /* Compact chrome protects work area without sacrificing the 36px keyboard/mouse
       target contract. Coarse pointers are raised back to 44px below. */
    nav.top.rc-nav-compact .nav-in{height:50px; padding-inline:20px}
    nav.top.rc-nav-compact .brand{margin-right:8px}
    nav.top.rc-nav-compact .nav-links{min-inline-size:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin}
    nav.top.rc-nav-compact .nav-links a{gap:6px; padding:5px 10px 5px 7px}
    nav.top.rc-nav-compact .nav-links a::before{inline-size:19px; block-size:19px; font-size:10px}
    .tabs.rc-tabs-compact{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin}
    .tabs.rc-tabs-compact .tab, .tabs.rc-tabs-compact button{flex:0 0 auto; padding:5px 10px}
  }

  @media (min-width:821px) and (max-width:1180px){
    nav.top.rc-nav-compact .nav-links a:not(.rcflow-current){font-size:0;gap:0;padding-inline:7px}
    nav.top.rc-nav-compact .nav-links a:not(.rcflow-current)::before{margin:0}
  }

  /* ---------------------------------------------------------------- inputs */
  input[type="text"], input[type="number"], input[type="search"], input[type="url"],
  input[type="email"], input[type="password"], select, textarea, .input{
    font-family:var(--mono); font-size:13px; color:var(--ink); min-height:var(--tap);
    background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-m);
    padding:9px 12px; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg)}
  input::placeholder, textarea::placeholder{color:var(--muted)}
  label{font-size:12px; color:var(--muted); font-weight:550}

  /* ----------------------------------------------------------------- cards */
  .card, .panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow)}
  .card.pad{padding:20px}
  .card-hover{position:relative; transition:border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease)}
  .card-hover::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background:var(--grad-line); opacity:0; transition:opacity var(--t-ui) var(--ease);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
  .card-hover:hover{border-color:transparent; transform:translateY(-3px); box-shadow:var(--shadow-pop)}
  .card-hover:hover::before{opacity:1}

  /* ----------------------------------------------------- badges / chips */
  .badge, .chip{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.04em;
    display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
    border-radius:999px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--muted); white-space:nowrap}
  .badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--faint)}
  .badge.ok{color:var(--ok); border-color:var(--ok-line); background:var(--ok-bg)}       .badge.ok::before{background:var(--ok); box-shadow:0 0 8px var(--ok)}
  .badge.warn{color:var(--warn); border-color:var(--warn-line); background:var(--warn-bg)} .badge.warn::before{background:var(--warn); box-shadow:0 0 8px var(--warn)}
  .badge.err{color:var(--err); border-color:var(--err-line); background:var(--err-bg)}   .badge.err::before{background:var(--err); box-shadow:0 0 8px var(--err)}
  .badge.info{color:var(--accent); border-color:var(--accent-line); background:var(--accent-bg)} .badge.info::before{background:var(--accent); box-shadow:0 0 8px var(--accent)}
  .badge.plain::before{display:none}
  .chip::before{display:none}
  kbd{font-size:11px; padding:2px 6px; border-radius:5px; border:1px solid var(--line-2); border-bottom-width:2px; background:var(--panel-2); color:var(--muted)}
  code{font-size:.92em; background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px}
  pre code{background:none; border:none; padding:0}

  /* ----------------------------------------------------------------- tables */
  table.data{width:100%; border-collapse:collapse; font-size:13px}
  table.data th{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-2)}
  table.data td{padding:9px 12px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
  table.data td.num{font-family:var(--mono); text-align:right}
  table.data tbody tr{transition:background var(--t-fast) var(--ease)}
  table.data tbody tr:hover{background:var(--panel-2)}

  /* ------------------------------------------------------- severity rows */
  .finding{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-m); border:1px solid var(--line); background:var(--panel)}
  .finding+.finding{margin-top:8px}
  .finding .code{font-family:var(--mono); font-size:11px; font-weight:700; flex:none; padding:2px 7px; border-radius:6px}
  .finding.err  .code{color:var(--err);  background:var(--err-bg);  border:1px solid var(--err-line)}
  .finding.warn .code{color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line)}
  .finding.advi .code, .finding.info .code{color:var(--accent); background:var(--accent-bg); border:1px solid var(--accent-line)}
  .finding.ok   .code{color:var(--ok);   background:var(--ok-bg);   border:1px solid var(--ok-line)}

  /* ------------------------------------------------------------ empty state */
  .empty{display:grid; place-items:center; text-align:center; gap:8px; padding:48px 20px; color:var(--muted); border:1px dashed var(--line-2); border-radius:var(--r-l)}
  .empty .glyph{font-family:var(--mono); font-size:22px; color:var(--faint)}
  .empty b{color:var(--ink); font-weight:600}
  .empty p{font-size:13px; margin:0; max-width:46ch}

  /* -------------------------------------------------------- error surface */
  .rc-error{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-m);
    border:1px solid var(--err-line); background:var(--err-bg); color:var(--ink); font-size:13px}
  .rc-error::before{content:"!"; font-family:var(--mono); font-weight:800; color:var(--err); flex:none;
    width:18px; height:18px; display:grid; place-items:center; border-radius:50%; border:1.5px solid var(--err-line)}

  /* ------------------------------------------------------------- skeletons */
  .skeleton{position:relative; overflow:hidden; background:var(--panel-2); border-radius:var(--r-s)}
  .skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 6%, transparent), transparent);
    animation:rc-shimmer 1.4s var(--ease) infinite}
  @keyframes rc-shimmer{to{transform:translateX(100%)}}

  /* ---------------------------------------------------------- enter motion */
  .reveal{opacity:0; transform:translateY(8px) scale(.99); animation:rc-in var(--t-modal) var(--ease) forwards; animation-delay:var(--d,0ms)}
  @keyframes rc-in{to{opacity:1; transform:none}}
  dialog, .modal{border:1px solid var(--line-2); border-radius:var(--r-l); background:var(--panel); color:var(--ink); box-shadow:var(--shadow-pop)}
  dialog::backdrop{background:oklch(4% .01 260 / .62); backdrop-filter:blur(3px)}

  /* --------------------------------------------------- shared toast (RC.toast) */
  #rc-toast, #toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(10px);
    z-index:80; background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:12.5px; font-weight:600;
    padding:10px 16px; border-radius:var(--r-m); box-shadow:var(--shadow-pop); opacity:0; pointer-events:none;
    transition:opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); max-width:min(90vw,520px)}
  #rc-toast.show, #toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  #rc-toast.err, #toast.err{background:var(--err); color:#fff}

  /* --------------------------------------------------- popover (RC key/settings) */
  .rc-pop{position:absolute; z-index:70; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-m);
    box-shadow:var(--shadow-pop); padding:14px; width:270px}
  .rc-pop h4{margin:0 0 8px; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
  .rc-pop .rc-pop-row{display:flex; gap:8px; align-items:center}
  .rc-pop .rc-pop-status{margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--faint)}

  /* ------------------------------------------------ command palette (⌘K) */
  .cmdk-scrim{position:fixed; inset:0; z-index:90; background:oklch(4% .01 260 / .5); backdrop-filter:blur(4px);
    display:grid; place-items:start center; padding-top:14vh; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity var(--t-ui) var(--ease), visibility var(--t-ui) var(--ease)}
  .cmdk-scrim.show{opacity:1; visibility:visible; pointer-events:auto}
  .cmdk{width:min(92vw,600px); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-l);
    box-shadow:var(--shadow-pop); overflow:hidden; transform:translateY(-8px) scale(.98); transition:transform var(--t-ui) var(--ease)}
  .cmdk-scrim.show .cmdk{transform:none}
  .cmdk input{width:100%; border:0; border-radius:0; border-bottom:1px solid var(--line); background:transparent;
    font-family:var(--sans); font-size:15px; padding:16px 18px; min-height:auto}
  .cmdk input:focus-visible{box-shadow:none; border-color:var(--line)}
  .cmdk-list{max-height:min(52vh,420px); overflow:auto; overscroll-behavior:contain; padding:6px}
  .cmdk-item{display:flex; align-items:center; gap:12px; min-height:var(--tap); padding:10px 12px; border-radius:var(--r-m); cursor:pointer;
    font-size:13.5px; color:var(--ink)}
  .cmdk-item .cmdk-hint{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}
  .cmdk-item .cmdk-ico{width:18px; text-align:center; color:var(--muted)}
  .cmdk-item[aria-selected="true"], .cmdk-item:hover{background:var(--accent-bg)}
  .cmdk-empty{padding:22px; text-align:center; color:var(--muted); font-size:13px}
  .cmdk-group{padding:10px 12px 4px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint)}

  /* ------------------------------------------------------ glossary tooltip */
  .gloss{text-decoration:underline dotted; text-decoration-color:var(--faint); text-underline-offset:2px; text-decoration-thickness:1px; cursor:help}

  .muted{color:var(--muted)} .faint{color:var(--faint)}
  .row{display:flex; min-width:0; align-items:center; gap:10px}
  .spread{display:flex; min-width:0; align-items:center; justify-content:space-between; gap:10px}
  .row>* , .spread>*{min-width:0}
  .stack{display:flex; flex-direction:column; gap:var(--sp-3)}
  .wrapf{flex-wrap:wrap}
  /* container-query aware grids: collapse based on the CONTAINER, not the viewport */
  .cq{container-type:inline-size}
  .grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
  .grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
  .grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
  @container (max-width:900px){.cq .grid3,.cq .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @container (max-width:560px){.cq .grid2,.cq .grid3,.cq .grid4{grid-template-columns:1fr}}
  /* viewport fallback for pages not yet wrapped in a container */
  @media (max-width:900px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:640px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
  hr{border:none; border-top:1px solid var(--line); margin:20px 0}
  .tnum{font-variant-numeric:tabular-nums}
  .truncate{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .rc-skip-link{position:fixed; top:8px; left:8px; z-index:120; padding:9px 13px; min-height:var(--tap);
    display:flex; align-items:center; background:var(--ink); color:var(--bg); border:2px solid var(--accent);
    transform:translateY(calc(-100% - 12px)); transition:transform var(--t-fast) var(--ease)}
  .rc-skip-link:focus{transform:none}

  /* ------------------------------------------------------- mobile hardening */
  /* The sticky top nav packs brand + a multi-step stepper + key/theme/CTA buttons; on a phone that
     row overflows, and body{overflow-x:hidden} would CLIP the buttons out of reach. Wrap the row and
     let the stepper scroll horizontally so every step + control stays reachable. */
  @media (max-width:820px){
    /* Responsive escape hatch: even if a caller leaves the opt-in marker in
       place, phones and narrow tablets use natural document scrolling. */
    html.rc-viewport-locked, html.rc-viewport-locked body{block-size:auto; min-block-size:100%; overflow:visible}
    html.rc-viewport-locked body{overscroll-behavior:auto}
    [data-rc-viewport-shell], .rc-viewport-shell{display:block; block-size:auto; min-block-size:100dvh; overflow:visible}
    [data-rc-workspace-main], .rc-workspace-main,
    [data-rc-contained-scroll], .rc-contained-scroll{min-block-size:0; overflow:visible; overscroll-behavior:auto; scrollbar-gutter:auto}
    .nav-in{flex-wrap:wrap; height:auto; min-height:56px; padding:8px 16px; row-gap:8px}
    .nav-links{order:10; width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
      overscroll-behavior-inline:contain; scroll-padding-inline:8px; scrollbar-width:none; padding-bottom:2px; margin-top:2px}
    .nav-links::-webkit-scrollbar{display:none}
    .nav-links a{flex:none}
    /* overlays / palette fit the viewport */
    .cmdk{width:min(94vw,600px)} .rc-pop{width:min(92vw,270px)}
    dialog, .modal{max-width:94vw; max-height:calc(100dvh - 24px); overflow:auto}
    #rcflow-bar{right:12px; left:12px; bottom:12px; justify-content:space-between}
  }
  @media (max-width:560px){
    .wrap{padding:0 16px}
    /* wide data tables get their own horizontal scroll rather than being clipped by overflow-x:hidden */
    .card, .panel{max-width:100%}
    .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
    .tabs{flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin}
    .tabs .tab, .tabs button{flex:0 0 auto}
    .rc-pop{position:fixed; inset:calc(env(safe-area-inset-top) + 64px) 12px auto !important;
      width:auto; max-height:calc(100dvh - 88px); overflow:auto}
    #rc-toast, #toast{bottom:calc(12px + env(safe-area-inset-bottom))}
    h1{font-size:clamp(24px,7vw,34px)}
  }
  @media (max-width:400px){ .wrap{padding:0 12px} }

  @media (pointer:coarse){
    .btn, button, [role="button"], .nav-links a, a.navlink, .tabs .tab, .tabs button,
    .seg button, .seg .seg-btn, input:not([type="hidden"]), select, textarea{
      min-block-size:var(--tap-touch) !important;
    }
    .btn.icon, .btn.icon.sm{inline-size:var(--tap-touch)}
  }

  @media (hover:none){
    .btn:hover, .btn.primary:hover, .card-hover:hover{transform:none}
  }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
    html{scroll-behavior:auto !important}
    .reveal{opacity:1; transform:none}
    .skeleton::after{display:none}
  }

  /* ═══════════════════════════════════════════════════════════════════════════════════════
     BLUEPRINT IDENTITY — the engineering-drawing language, applied across every app page so
     the workspace/review/schematic/analysis/design-review all read like the landing: a ruled
     paper grid, hard-framed titleblock cards, and squared drawing-instrument controls.
     ═══════════════════════════════════════════════════════════════════════════════════════ */
  /* Ruled paper: a fine 32px grid + a heavier 160px major grid, pinned BEHIND all content
     (z-index:-1 keeps every page's normal-flow content above it without touching its stacking). */
  body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:32px 32px; opacity:.6}
  body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
    background-size:160px 160px; opacity:.5}
  /* Titleblock cards: a hard ink frame with square corners and an offset "stacked drawing" shadow;
     the header becomes the titleblock strip (solid ink rule, tinted bar). Page-specific higher-
     specificity variants (e.g. .card.critical) keep their own accent while inheriting the frame. */
  .card, .panel{border:1.5px solid var(--ink); border-radius:0; box-shadow:4px 4px 0 var(--accent-weak)}
  .card>h3, .panel>h3{border-bottom:1.5px solid var(--ink); background:var(--panel-2)}
  .card>h3::after{display:none}   /* the solid ink rule IS the titleblock line — drop the soft hairline */
  /* Drawing instruments, not pills: square the controls + tags; the primary action is an ink stamp. */
  .btn, button, input, select, textarea, .badge{border-radius:0}
  .btn.primary, button.primary{background:var(--ink); border-color:var(--ink); color:var(--panel)}
  .btn.primary:hover, button.primary:hover{background:var(--accent); border-color:var(--accent); box-shadow:none}