/* app.css — RECOUNT shell. Tokens from mockup/v1/DESIGN.md §2–§4b + §10. Build width 1920 (LUAT 50):
   every length is N × var(--u) where N = CSS px at 1920; --u = layout width / 1920 (app.js), so 1280–2560 keep the
   mockup's proportions. Small text uses max(12px, …). Hairlines: max(1px, …). No max-width cap anywhere.
   BORDERS (LUAT 56): this file is the ONLY place with border/outline declarations. Route bodies use the .rule-* classes. */

:root {
  --u: calc(100vw / 1920);

  /* colour (DESIGN §3) */
  --paper: #F4F4F3;          /* page ground — every route */
  --chrome: #F6F6F3;         /* nav + footer band (chrome/nav.html, chrome/footer.html) */
  --ink: #080808;
  --prose: #383C49;
  --muted: #5B5A5F;
  --hair: #D8D9DC;
  --head: #DBDBDA;
  --code: #E7E7E7;
  --bar: #C7C6C6;
  --counted: #E03E47;        /* Recounted / Counted meaning ONLY */
  --aside: #7428A1;          /* Set aside meaning ONLY */
  --aside-tint: #E6DAF7;
  --aside-wash: #F2ECF7;
  --warn-wash: #F8E4E5;

  /* fonts (DESIGN §2) */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-num: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-mono: "Inconsolata", ui-monospace, Menlo, monospace;

  /* type scale — CSS px @1920 (DESIGN §2 role table) */
  --fs-hero: calc(81.6 * var(--u));
  --fs-route-title: calc(82 * var(--u));
  --fs-section: calc(36 * var(--u));
  --fs-caps: calc(23.4 * var(--u));
  --fs-subhead: calc(36.7 * var(--u));
  --fs-body: max(14px, calc(30.1 * var(--u)));
  --fs-display-num: calc(35.3 * var(--u));
  --fs-big-pct: calc(92 * var(--u));
  --fs-table-head: max(12px, calc(22.6 * var(--u)));
  --fs-table: max(12px, calc(29.2 * var(--u)));
  --fs-meta: max(12px, calc(17 * var(--u)));
  --fs-small: max(12px, calc(14 * var(--u)));

  /* page frame (LUAT 53 — frame.json + USER_FIXES): gutters 57 / 55 @1920, container 1806 */
  --gutter-l: calc(57 * var(--u));
  --gutter-r: calc(55 * var(--u));
  --gap-section: calc(64 * var(--u));

  /* rules (DESIGN §4b · BORDER_TABLE.md) — width + colour per rule kind */
  --rule-heavy-w: max(1px, calc(3.4 * var(--u)));    /* masthead, footer top, section head, totals top, kit output head */
  --rule-section-w: max(2px, calc(6 * var(--u)));   /* section head rule, drawn ~6 px (MAIN DECISION D4) */
  --rule-card-w: max(1px, calc(3.7 * var(--u)));     /* tally stamp card */
  --rule-frame-w: max(1px, calc(2.4 * var(--u)));    /* table frame 2.3–2.6 */
  --rule-mid-w: max(1px, calc(2.2 * var(--u)));      /* table head, rows, inputs, tabs, grids, bands */
  --rule-stamp-w: max(1px, calc(2.6 * var(--u)));    /* rubber stamp panel */
  --rule-hair-w: max(1px, calc(1.1 * var(--u)));     /* column rules, footer source, brand divider */
  --rule-ink: var(--ink);
  --rule-ink-70: #4B4B4D;                            /* CA / number boxes (ink 70 %) */
  --rule-ink-60: #5B606D;                            /* rulebook, export boxes */
  --rule-ink-55: #828389;                            /* tab strips, receipt outer */
  --rule-head: #BABABD;                              /* table header band bottom */
  --rule-row: #DCDDE0;                               /* table row rules #D7D8DB–#E1E1E3 */
  --rule-col: #D2D2D6;                               /* column rules #C9C9CD–#E0E1E5 */
  --rule-dark-hair: #B4B5BB;                         /* step boxes, proof grid, side tables */
  --rule-column: #909095;                            /* editorial column dividers #656466–#909095 */
  --rule-soft: #B9B9B4;                              /* chrome dividers (nav brand, footer) */
  --rule-source: #C0C0C0;                            /* footer source rule */
  --rule-band: #9C95B1;                              /* tally band (aside 45 %) */
  --rule-aside: var(--aside);
  --rule-counted: var(--counted);
  --rule-warn: #F20F1E;

  /* motion (DESIGN §10) — one easing family */
  --ease: cubic-bezier(.22, .8, .16, 1);
  --t-press: 180ms;
  --t-row: 300ms;
  --t-count: 650ms;
  --t-grow: 700ms;
  --t-page: 120ms;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.3; overflow-x: clip;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; padding: 0; border: 0; }
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; text-align: left; font-weight: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: max(2px, calc(2.2 * var(--u))) solid var(--aside); outline-offset: max(2px, calc(2 * var(--u))); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; font: 700 14px var(--font-display); }
.skip:focus { top: 8px; }

/* ---------- ONE PAGE FRAME — the only container every route renders into ---------- */
main.page { flex: 1; width: 100%; background: var(--paper); padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-bottom: var(--gap-section); }

/* shared text roles route bodies may use (sizes from DESIGN §2) */
.t-hero { font: 800 var(--fs-hero)/1.05 var(--font-display); letter-spacing: -0.04em; margin: 0; }
.t-route { font: 800 var(--fs-route-title)/1 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase; margin: 0; }
.t-section { font: 800 var(--fs-section)/1.1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.t-caps { font: 800 var(--fs-caps)/1.2 var(--font-display); text-transform: uppercase; }
.t-subhead { font: 400 var(--fs-subhead)/1.2 var(--font-serif); letter-spacing: -0.03em; color: var(--muted); }
.t-body { font: 400 var(--fs-body)/1.3 var(--font-serif); letter-spacing: -0.02em; color: var(--prose); }
.t-num { font: 600 var(--fs-display-num)/1 var(--font-num); letter-spacing: -0.019em; font-variant-numeric: tabular-nums; }
.t-pct { font: 700 var(--fs-big-pct)/0.95 var(--font-num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-th { font: 500 var(--fs-table-head)/1 var(--font-mono); letter-spacing: 0.089em; text-transform: uppercase; }
.t-td { font: 400 var(--fs-table)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.t-meta { font: 400 var(--fs-meta)/1.3 var(--font-serif); color: var(--muted); }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.is-counted { color: var(--counted); }
.is-aside { color: var(--aside); }
.t-link { color: var(--aside); }
.t-link:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* twin bar primitive (THE TWIN BAR) — the route sets widths (% of the reported max) inline */
.twin { position: relative; height: calc(28 * var(--u)); background: transparent; }
.twin-reported, .twin-recounted { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: 0 50%; }
.twin-reported { background: var(--bar); }
.twin-recounted { background: var(--counted); }

/* ---------- NAV (chrome/nav.html, scaled by --u) ---------- */
header[data-chrome="nav"] { position: relative; z-index: 20; width: 100%; height: calc(124 * var(--u)); padding: calc(18 * var(--u)) calc(55 * var(--u)) 0; background: var(--chrome); font-family: var(--font-display); color: var(--ink); }
header[data-chrome="nav"] .bar { height: calc(102 * var(--u)); display: flex; align-items: flex-start; }
.brand { display: flex; align-items: center; gap: calc(13 * var(--u)); color: var(--ink); }
.brand b { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.08em; }
header .brand { width: calc(320 * var(--u)); height: calc(78 * var(--u)); padding-right: calc(26 * var(--u)); flex: none; }
header .brand img { width: calc(70 * var(--u)); height: calc(62 * var(--u)); min-width: 40px; min-height: 36px; object-fit: contain; }
header .brand b { font-size: max(16px, calc(25 * var(--u))); }
header .links { height: calc(78 * var(--u)); display: flex; align-items: center; flex: 1; padding-left: calc(20 * var(--u)); }
header .links .route { position: relative; height: calc(78 * var(--u)); display: grid; place-items: center; padding: 0 calc(21 * var(--u)); font-size: max(12px, calc(14 * var(--u))); font-weight: 700; white-space: nowrap; color: var(--ink); }
header .links .route::after { content: ""; position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); bottom: calc(6 * var(--u)); height: max(2px, calc(4 * var(--u))); background: var(--counted); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-row) var(--ease); }
header .links .route:hover::after { transform: scaleX(.35); }
header .links .route.is-active::after { transform: scaleX(1); }
header .actions { height: calc(78 * var(--u)); display: flex; align-items: center; gap: calc(17 * var(--u)); margin-left: calc(12 * var(--u)); font-size: max(12px, calc(14 * var(--u))); font-weight: 700; white-space: nowrap; }
.social { padding: calc(8 * var(--u)) calc(3 * var(--u)); cursor: pointer; }
.social:hover { color: var(--aside); }
.social.is-soon, .social[aria-disabled="true"] { opacity: .55; cursor: default; }
.menu, .drawer { display: none; }

/* ---------- FOOTER (chrome/footer.html, scaled by --u) ---------- */
footer[data-chrome="footer"] { width: 100%; padding: 0 calc(55 * var(--u)); background: var(--chrome); color: var(--ink); }
footer .inner { min-height: calc(146 * var(--u)); display: grid; grid-template-columns: calc(280 * var(--u)) 1fr auto; grid-template-rows: calc(85 * var(--u)) calc(45 * var(--u)); align-items: center; column-gap: calc(22 * var(--u)); }
footer .brand { height: calc(62 * var(--u)); padding-right: calc(24 * var(--u)); font-size: max(16px, calc(24 * var(--u))); }
footer .brand img { width: calc(67 * var(--u)); height: calc(58 * var(--u)); min-width: 38px; min-height: 33px; object-fit: contain; }
footer .voice { font: 500 max(14px, calc(19 * var(--u)))/1.3 var(--font-serif); }
footer .actions { display: flex; align-items: center; gap: calc(18 * var(--u)); font: 700 max(12px, calc(14 * var(--u))) var(--font-display); white-space: nowrap; }
footer .ca { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); }
footer .ca-v { font-family: var(--font-mono); font-weight: 700; }
footer .ca-copy { font: 700 max(12px, calc(13 * var(--u))) var(--font-display); color: var(--aside); }
footer .buy { font: 700 max(12px, calc(16 * var(--u))) var(--font-mono); }
footer .source { grid-column: 1 / 4; align-self: stretch; display: flex; align-items: center; font: 500 max(12px, calc(13 * var(--u))) var(--font-mono); color: var(--ink); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--paper); padding: 10px 16px; font: 700 max(12px, calc(14 * var(--u))) var(--font-display); transition: opacity var(--t-row) var(--ease), transform var(--t-row) var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================================================
   RULE CLASSES — one class per framed component in DESIGN.md §4b / BORDER_TABLE.md. Widths from the table only.
   Shared edges are drawn ONCE: frames draw the outside, rows draw only their bottom, cells only their left.
   ===================================================================================================== */
/* chrome */
.rule-masthead { border-bottom: var(--rule-heavy-w) solid var(--rule-ink); }
.rule-footer-top { border-top: var(--rule-heavy-w) solid var(--rule-ink); }
.rule-footer-source { border-top: var(--rule-hair-w) solid var(--rule-source); }
.rule-brand { border-right: var(--rule-hair-w) solid var(--rule-soft); }
.rule-ca-cell { border-left: var(--rule-hair-w) solid var(--rule-soft); border-right: var(--rule-hair-w) solid var(--rule-soft); }
.rule-ca-cell:has(+ [hidden]) { border-right-color: transparent; }                      /* BUY hidden before launch → no dangling rule */
.rule-ca { border: var(--rule-mid-w) solid var(--rule-ink-70); }                       /* ca-button (e.g. a CA box inside a route) */

/* generic names used by route bodies */
.rule-panel { border: var(--rule-mid-w) solid var(--rule-dark-hair); }                   /* quiet framed panel */
.rule-card { border: var(--rule-frame-w) solid var(--rule-ink); }                        /* ink framed card */
.rule-row { border-bottom: var(--rule-mid-w) solid var(--rule-row); }                    /* table/list row: bottom only */
.rule-row-strong { border-bottom: var(--rule-mid-w) solid var(--rule-ink); }
.rule-col { border-left: var(--rule-hair-w) solid var(--rule-col); }                     /* table column rule */
.rule-column { border-left: var(--rule-hair-w) solid var(--rule-column); }               /* editorial column divider */
.rule-top-hair { border-top: var(--rule-hair-w) solid var(--rule-col); }

/* section heads */
.rule-section { border-top: var(--rule-section-w) solid var(--rule-ink); }                /* D4: the drawn ~6 px section rule */
.rule-section-thin { border-top: var(--rule-mid-w) solid var(--rule-ink); }

/* tables (results, ledger, receipt, largest) — frame outside, head band bottom, rows bottom, last row none */
.rule-table { border: var(--rule-frame-w) solid var(--rule-ink); }
.rule-table-soft { border: var(--rule-mid-w) solid var(--rule-ink-55); }                 /* receipt outer (ink 55 %) */
.rule-table-head { border-bottom: var(--rule-mid-w) solid var(--rule-head); background: var(--head); }
.rule-table > .rule-row:last-child, .rule-table > tbody > .rule-row:last-child,
.rule-table-soft > .rule-row:last-child, .rule-table-soft > tbody > .rule-row:last-child,
.rule-record > .rule-row:last-child, .rule-record > tbody > .rule-row:last-child,
.rule-side > .rule-row:last-child, .rule-side > tbody > .rule-row:last-child,
.rule-changelog > .rule-row:last-child, .rule-changelog > tbody > .rule-row:last-child { border-bottom: 0; }
.rule-row.is-open { box-shadow: inset calc(4 * var(--u)) 0 0 var(--aside); background: var(--aside-wash); }
.rule-row.is-hover-bold:hover, a.rule-row:hover { box-shadow: inset 0 calc(-1 * var(--rule-mid-w)) 0 var(--rule-ink); }

/* home */
.rule-step { border: var(--rule-mid-w) solid var(--rule-dark-hair); }                    /* step-box */
.rule-grid { border: var(--rule-mid-w) solid var(--rule-ink); }                          /* rule A/B/C 3-column frame */
.rule-grid-head { border-bottom: var(--rule-mid-w) solid var(--rule-head); }
.rule-grid-cells > * + * { border-left: var(--rule-hair-w) solid var(--rule-head); }
.rule-band { border: var(--rule-mid-w) solid var(--rule-band); background: var(--aside-tint); }  /* tally-band */
.rule-grid + .rule-band { border-top: 0; }
.rule-record { border: max(1px, calc(2 * var(--u))) solid var(--rule-source); }          /* record-table (source & coverage, receipt preview) */
.rule-record-head { border-bottom: var(--rule-hair-w) solid var(--rule-col); }             /* receipt preview head band: the drawn 1 px under-rule */

/* controls */
.rule-tabs { display: inline-flex; border: max(1px, calc(2 * var(--u))) solid var(--rule-ink-55); }   /* tab-strip / segmented control */
.rule-tabs > * + * { border-left: max(1px, calc(2 * var(--u))) solid var(--rule-ink-55); }
.rule-tabs > [aria-pressed="true"], .rule-tabs > [aria-selected="true"], .rule-tabs > .is-on { background: var(--ink); color: var(--paper); }
.rule-input { display: flex; align-items: stretch; width: 100%; border: var(--rule-mid-w) solid var(--rule-ink); background: var(--paper); }  /* wraps the whole control incl. its button */
.rule-input > input, .rule-input > select, .rule-input > textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 calc(16 * var(--u)); }
.rule-input > button { border: 0; border-left: var(--rule-mid-w) solid var(--rule-ink); background: var(--ink); color: var(--paper); padding: 0 calc(18 * var(--u)); font: 700 max(12px, calc(15 * var(--u))) var(--font-display); }
.rule-input:focus-within { outline: max(2px, calc(2.2 * var(--u))) solid var(--aside); outline-offset: max(1px, calc(1 * var(--u))); }
.rule-run { border: 0; background: var(--ink); color: var(--paper); }                    /* run-button: single ink fill, no outer frame (DESIGN §9 #17) */
.rule-toggle { border: max(1px, calc(2 * var(--u))) solid var(--rule-ink-55); border-radius: 999px; }   /* kit switches — the only pill */

/* token */
.rule-slices { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--rule-mid-w) solid var(--rule-dark-hair); }
.rule-slices > * + * { border-left: var(--rule-hair-w) solid var(--rule-dark-hair); }
.rule-slices > .is-on, .rule-slices > [aria-pressed="true"] { background: var(--aside-wash); box-shadow: inset 0 var(--rule-heavy-w) 0 var(--rule-ink), 0 calc(-1 * var(--rule-mid-w)) 0 0 var(--rule-ink); } /* the black rule replaces the grey frame edge above the chosen slice (one line, as drawn) */

/* tx */
.rule-receipt { border: max(1px, calc(2.5 * var(--u))) solid var(--rule-ink-55); }
.rule-stamp { border: var(--rule-stamp-w) solid var(--rule-aside); }                     /* stamp-panel / stamp mark */
.rule-stamp-counted { border: var(--rule-stamp-w) solid var(--rule-counted); }
.rule-totals { border-top: var(--rule-heavy-w) solid var(--rule-ink); }
.rule-totals-mid { border-top: var(--rule-mid-w) solid var(--rule-ink); }
.rule-totals-hair { border-top: var(--rule-hair-w) solid var(--rule-ink); }
.rule-proof { border: var(--rule-mid-w) solid var(--rule-dark-hair); }
.rule-proof-cells > * + * { border-left: var(--rule-hair-w) solid var(--rule-dark-hair); }

/* day */
.rule-daychip { border: var(--rule-mid-w) solid transparent; }
.rule-daychip.is-on, .rule-daychip[aria-pressed="true"] { border-color: var(--rule-counted); }
.rule-daystrip > * + * { border-left: var(--rule-hair-w) solid var(--rule-col); }
.rule-numbox { border: var(--rule-mid-w) solid var(--rule-ink-70); }
.rule-side { border: var(--rule-hair-w) solid var(--rule-dark-hair); }

/* kit */
.rule-kit-head { border-top: var(--rule-heavy-w) solid var(--rule-ink); }
.rule-kit-sub { border-top: var(--rule-mid-w) solid var(--rule-ink); }
.rule-rulebook { border: max(1px, calc(1.3 * var(--u))) solid var(--rule-ink-60); }
.rule-warn { border: var(--rule-mid-w) solid var(--rule-warn); background: var(--warn-wash); }
.rule-changelog { border: var(--rule-mid-w) solid var(--rule-row); }

/* stamp */
.rule-stampcard { border: var(--rule-card-w) solid var(--rule-ink); }
.rule-stampcard-row { border-top: var(--rule-mid-w) solid var(--rule-ink); }
.rule-export { border: var(--rule-mid-w) solid var(--rule-ink-60); }                     /* all export boxes 2.3 (DESIGN §9 #15) */
.rule-export + .rule-export { border-top: 0; }
.rule-endpoint { border: var(--rule-heavy-w) solid var(--rule-ink); }
.rule-endpoint-inner { border-top: var(--rule-hair-w) solid var(--rule-row); }
.rule-embed { border: var(--rule-mid-w) solid var(--rule-ink); }
.rule-chip { border: var(--rule-mid-w) solid var(--rule-aside); color: var(--aside); }   /* version-chip "CURRENT" */

/* =====================================================================================================
   MOTION — "the second count" (DESIGN §10). Transform/opacity only; nothing moves layout.
   ===================================================================================================== */
.rc-pre { opacity: 0; }
.rc-enter { animation: rc-enter var(--t-row) var(--ease) var(--d, 0ms) both; }
@keyframes rc-enter { from { opacity: .6; transform: translateX(calc(-8 * var(--u))); } to { opacity: 1; transform: none; } }
/* USER FIX R1: a route paints readable at once — ledger entries never start blank (bars keep their grow) */
[data-reveal].rc-pre, [data-reveal-group] > .rc-pre { opacity: .6; }
.rc-grow { animation: rc-grow var(--t-grow) var(--ease) var(--d, 0ms) both; transform-origin: 0 50%; }
@keyframes rc-grow { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
/* recounted ink passes over the reported track after it has been laid down */
.rc-ink { animation: rc-ink var(--t-grow) var(--ease) calc(var(--d, 0ms) + 420ms) both; transform-origin: 0 50%; }
@keyframes rc-ink { 0% { opacity: 1; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } }
.rc-press { animation: rc-press var(--t-press) var(--ease) both; }
@keyframes rc-press { from { opacity: .4; transform: rotate(var(--stamp-from, -16deg)) scale(1.06); } to { opacity: 1; transform: rotate(var(--stamp-rot, -12deg)) scale(1); } }
.rc-counting { color: var(--muted); }
.rc-tick { animation: rc-tick 600ms var(--ease) both; }
@keyframes rc-tick { 0% { opacity: .35; } 100% { opacity: 1; } }
.rc-row-tick { animation: rc-row-tick 600ms var(--ease) both; }
@keyframes rc-row-tick { 0% { box-shadow: inset 0 calc(-1 * var(--rule-heavy-w)) 0 var(--rule-ink); } 100% { box-shadow: inset 0 0 0 transparent; } }
.rc-page { animation: rc-page var(--t-page) linear both; }
@keyframes rc-page { from { opacity: .75; } to { opacity: 1; } }
header .links .route.rc-tab.is-active::after { animation: rc-tab var(--t-row) var(--ease) both; }
@keyframes rc-tab { from { transform: scaleX(0); } to { transform: scaleX(1); } }
main.is-leaving { opacity: .85; transition: opacity 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rc-pre { opacity: 1 !important; }
}

/* =====================================================================================================
   MOBILE (< 1024): fixed unit, 64 px bar, menu button + drawer; footer stacks. 390 = no horizontal scroll.
   ===================================================================================================== */
@media (max-width: 1023px) {
  :root { --u: 0.5px; --gutter-l: 16px; --gutter-r: 16px; --gap-section: 40px; --fs-body: 16px; --fs-table: 14px; --fs-table-head: 12px; --fs-meta: 13px; }
  header[data-chrome="nav"] { height: auto; padding: 0 16px; position: sticky; top: 0; }
  header[data-chrome="nav"] .bar { height: 64px; align-items: center; justify-content: space-between; }
  header .brand { width: auto; height: 64px; padding-right: 0; gap: 10px; }
  .rule-brand { border-right: 0; }
  header .brand img { width: 46px; height: 40px; }
  header .brand b { font-size: 18px; }
  header .links, header .actions { display: none; }
  .menu { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px; font: 700 14px var(--font-display); color: var(--ink); }
  .menu-bars { position: relative; width: 20px; height: 2px; background: var(--ink); transition: transform var(--t-row) var(--ease); }
  .menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); transition: transform var(--t-row) var(--ease); }
  .menu-bars::before { transform: translateY(-6px); }
  .menu-bars::after { transform: translateY(6px); }
  header.is-open .menu-bars { background: transparent; }
  header.is-open .menu-bars::before { transform: rotate(45deg); }
  header.is-open .menu-bars::after { transform: rotate(-45deg); }
  .drawer { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; background: var(--chrome); padding: 0 16px 16px; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-row) var(--ease), transform var(--t-row) var(--ease), visibility 0s linear var(--t-row); }
  header.is-open .drawer { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .drawer .route { display: flex; align-items: center; min-height: 48px; font: 700 16px var(--font-display); }
  .drawer .route.is-active { color: var(--counted); }
  .drawer-social { display: flex; gap: 24px; padding-top: 12px; font: 700 15px var(--font-display); }
  .drawer .rule-row { border-bottom-color: var(--rule-row); }

  footer[data-chrome="footer"] { padding: 0 16px; }
  footer .inner { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 0 0; min-height: 0; }
  footer .brand { height: auto; padding-right: 0; font-size: 18px; }
  footer .brand img { width: 46px; height: 40px; }
  footer .voice { font-size: 17px; }
  footer .actions { flex-wrap: wrap; gap: 10px 18px; font-size: 14px; white-space: normal; }
  footer .ca { padding: 6px 0; }
  .rule-ca-cell { border-left: 0; border-right: 0; }
  footer .source { width: 100%; padding: 12px 0 16px; font-size: 12px; line-height: 1.4; }
  .toast { font-size: 14px; }
}