/* FLEETCARD — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5, §10. The ONLY file with border/outline declarations
   (LUAT 56): route files use the .rule-* classes below and never write border/outline themselves.
   Scale (LUAT 50): every size is N * var(--u) where N is CSS px at 1920; --u is set in index.html (width/1920, >=1024). */

:root {
  --u: calc(100vw / 1920);                 /* overwritten by the inline script before first paint */

  /* colour — DESIGN.md §3 */
  --paper: #D6EB9E;         /* page ground, nav + footer ground (LOCKED) */
  --surface: #DEF1B2;       /* panel / card interiors on paper */
  --surface-2: #E1F0C3;     /* inputs, selects */
  --lime-deep: #B8D78E;     /* table header rows, tab tints */
  --ink: #0A1614;           /* text, frames, rules, line art */
  --chrome-ink: #172019;    /* nav + footer text (chrome/nav.html, chrome/footer.html) */
  --navy: #012343;          /* THE CARD: selected, primary buttons, focus */
  --navy-card: #032D4C;     /* fleet-card faces, dev quote panel, code wells */
  --navy-deep: #021F2F;     /* flip-digit tiles */
  --brass: #CA9A5F;         /* FUEL: needle, nozzle, fuel returned, tank level, newest log row */
  --brass-dark: #9A6A2F;    /* brass text on light ground */
  --white: #FFFFFF;
  --paper-light: #F6FFB7;   /* inner strokes on navy */
  --receipt: #F6FAEF;
  --alert: #C14B32;
  --alert-tint: #F6D3C9;
  --ok-tint: #D2EEB9;
  --idle-tint: #DADFD7;
  --status-active: #C0FCA0;
  --status-paused: #FDC654;
  --row-latest: #E5E5B6;

  /* fonts — DESIGN.md §2 */
  --font-hero: "Poppins", "Russo One", system-ui, sans-serif;
  --font-display: "Russo One", "Poppins", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Titillium Web", system-ui, sans-serif;
  --font-chrome: "Titillium Web", "Source Sans 3", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* type scale — USER FIX TYPE (25/09): real desktop sizes at 1920, never below 12px */
  --fs-hero: max(28px, calc(64 * var(--u)));
  --fs-title: max(26px, calc(60 * var(--u)));
  --fs-section: max(20px, calc(34 * var(--u)));
  --fs-lede: max(15px, calc(22 * var(--u)));
  --fs-body: max(13px, calc(16 * var(--u)));
  --fs-small: max(12px, calc(15 * var(--u)));
  --fs-label: max(12px, calc(14 * var(--u)));
  --fs-meta: max(12px, calc(13 * var(--u)));
  --fs-data: max(13px, calc(16 * var(--u)));
  --fs-data-lg: max(18px, calc(30 * var(--u)));
  --fs-digits: max(16px, calc(26 * var(--u)));
  --fs-nav: max(12px, calc(15 * var(--u)));

  /* spacing (N px @1920) — section gap 48–96 (WEB_RULES #22) */
  --sp-4: calc(4 * var(--u)); --sp-8: calc(8 * var(--u)); --sp-12: calc(12 * var(--u)); --sp-16: calc(16 * var(--u));
  --sp-20: calc(20 * var(--u)); --sp-24: calc(24 * var(--u)); --sp-32: calc(32 * var(--u)); --sp-40: calc(40 * var(--u));
  --sp-48: calc(48 * var(--u)); --sp-64: calc(64 * var(--u)); --sp-80: calc(80 * var(--u)); --sp-96: calc(96 * var(--u));
  --gap-section: calc(64 * var(--u));

  /* radii — DESIGN.md §4 */
  --r-card: calc(16 * var(--u));   /* fleet-card faces */
  --r-sub: calc(14 * var(--u));    /* card / sub-panel on paper */
  --r-control: calc(10 * var(--u));/* pills, buttons */
  --r-panel: calc(8 * var(--u));   /* panels */
  --r-input: calc(6 * var(--u));
  --r-table: calc(4 * var(--u));

  /* page frame — DESIGN.md §0 + USER FIX F1: gutters 60 left / 56 right @1920, container 1804, no sidebar, no max-width */
  --frame-left: calc(60 * var(--u));
  --frame-right: calc(56 * var(--u));

  /* rules — BORDER_TABLE.md / DESIGN.md §4b. One frame weight 2.3; hairline 1.1–1.2; painted stripe 4. */
  --rule-w: max(1px, calc(2.3 * var(--u)));        /* panels, cards, pills, inputs, table outlines, nav/footer rules */
  --rule-hair: max(1px, calc(1.2 * var(--u)));     /* column rules, inner row rules */
  --rule-decal-w: max(1px, calc(1.1 * var(--u)));  /* nav X / Telegram decals (chrome 1px) */
  --rule-stripe-w: max(2px, calc(4 * var(--u)));   /* painted lane stripe between blocks */
  --rule-ink: var(--ink);
  --rule-navy: var(--navy);
  --rule-row: rgba(10, 22, 20, .45);               /* inner table row rules: ink at 45 % */
  --rule-on-navy: rgba(246, 255, 183, .55);        /* paper-light stroke inside navy cards */
  --rule-chrome-c: var(--chrome-ink);

  /* motion — DESIGN.md §10 */
  --ease-pump: cubic-bezier(.22, .9, .24, 1);      /* quick start, mechanical settle: meter wheels, card redraw */
  --ease-paint: cubic-bezier(.65, 0, .35, 1);      /* line-marking cart: even stroke, soft ends */
  --t-press: 120ms; --t-route: 200ms; --t-card: 250ms; --t-digit: 300ms; --t-level: 400ms; --t-stripe: 500ms; --t-roll: 700ms;
}

*, *::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; overflow-x: hidden;
  background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.4 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }   /* no UA outset border: every framed button draws its edge with a .rule-* class */
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; text-align: left; font-weight: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: max(2px, calc(2.3 * var(--u))) solid var(--navy); outline-offset: 2px; }
.mono, .t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── ONE PAGE FRAME (LUAT 53 · WEB_RULES #19) — every route renders inside main.page-frame ───────── */
main.page-frame {
  flex: 1; width: 100%;
  padding: 0 var(--frame-right) 0 var(--frame-left);
  background: var(--paper);
  transition: opacity var(--t-route) var(--ease-paint);
}
main.page-frame.is-leaving { opacity: .55; }
/* a full-bleed band inside a route (runs edge to edge like nav/footer, content stays on the frame) */
.bleed { margin-left: calc(-1 * var(--frame-left)); margin-right: calc(-1 * var(--frame-right)); padding-left: var(--frame-left); padding-right: var(--frame-right); }

/* ───────── type helpers (DESIGN.md §2 roles, USER FIX TYPE sizes) ───────── */
.t-hero { font: 700 var(--fs-hero)/1.05 var(--font-hero); letter-spacing: -.006em; margin: 0; }
.t-title { font: 400 var(--fs-title)/1 var(--font-display); letter-spacing: -.013em; text-transform: uppercase; margin: 0; }
.t-section { font: 400 var(--fs-section)/1.05 var(--font-display); text-transform: uppercase; margin: 0; }
.t-lede { font: 400 var(--fs-lede)/1.25 var(--font-body); letter-spacing: -.01em; margin: 0; }
.t-body { font: 400 var(--fs-body)/1.45 var(--font-body); }
.t-small { font: 400 var(--fs-small)/1.4 var(--font-body); }
.t-label { font: 600 var(--fs-label)/1.2 var(--font-body); }
.t-meta { font: 400 var(--fs-meta)/1.3 var(--font-body); }
.t-th { font: 400 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.t-data { font: 400 var(--fs-data)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.t-data-lg { font: 400 var(--fs-data-lg)/1 var(--font-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.t-digits { font: 400 var(--fs-digits)/1 var(--font-mono); letter-spacing: .12em; }
.t-verdict { font: 400 var(--fs-section)/1 var(--font-display); text-transform: uppercase; }
.c-brass { color: var(--brass-dark); }
.c-alert { color: var(--alert); }
.c-navy { color: var(--navy); }

/* ───────── RULES (LUAT 56 · WEB_RULES #23) — one class per framed component of BORDER_TABLE.md ───────── */
.rule-panel   { border: var(--rule-w) solid var(--rule-ink); border-radius: var(--r-panel); }            /* section panel · panel */
.rule-sub     { border: var(--rule-w) solid var(--rule-ink); border-radius: var(--r-sub); }              /* card / sub-panel · tile on paper */
.rule-card    { border: var(--rule-w) solid var(--rule-navy); border-radius: var(--r-card); }            /* navy fleet-card face */
.rule-control { border: var(--rule-w) solid var(--rule-ink); border-radius: var(--r-control); }          /* option pill · button */
.rule-chip    { border: var(--rule-w) solid var(--rule-ink); border-radius: 999px; }                     /* chip / small button on paper */
.rule-chip-navy { border: var(--rule-hair) solid var(--rule-on-navy); border-radius: 999px; }            /* status chip on a navy card */
.rule-decal   { border: var(--rule-decal-w) solid var(--rule-chrome-c); }                                /* nav X / Telegram decal */
.rule-dashed  { border: var(--rule-w) dashed var(--rule-ink); border-radius: var(--r-panel); }           /* empty / not-deployed outline */
/* input frame wraps the WHOLE control: the frame is the wrapper; the bare input inside has no frame of its own */
.rule-input {
  display: flex; align-items: center; gap: var(--sp-12); width: 100%;
  min-height: calc(56 * var(--u)); padding: 0 var(--sp-16);
  border: var(--rule-w) solid var(--rule-ink); border-radius: var(--r-input);
  background: var(--surface-2);
}
.rule-input > input, .rule-input > select, .rule-input > textarea {
  flex: 1; min-width: 0; height: 100%; min-height: calc(52 * var(--u)); padding: 0; margin: 0;
  border: 0; outline: 0; background: transparent; font: 400 var(--fs-data)/1.2 var(--font-mono); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.rule-input:focus-within { border-color: var(--rule-navy); box-shadow: 0 0 0 max(1px, calc(2 * var(--u))) var(--navy); }
/* tables: ONE outer frame; header bottom rule; inner rows share ONE edge (top of every row after the first) */
.rule-table { border: var(--rule-w) solid var(--rule-ink); border-radius: var(--r-table); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.rule-table thead th, .rule-table thead td { border-bottom: var(--rule-w) solid var(--rule-ink); background: var(--lime-deep); }
.rule-table tbody tr + tr > * { border-top: var(--rule-hair) solid var(--rule-row); }
.rule-table .rule-cell + .rule-cell, .rule-table.has-cols tr > * + * { border-left: var(--rule-hair) solid var(--rule-row); }
/* div lists: rows share one edge */
.rule-rows > * + * { border-top: var(--rule-hair) solid var(--rule-row); }
.rule-row + .rule-row { border-top: var(--rule-hair) solid var(--rule-row); }
.rule-rows-strong > * + * { border-top: var(--rule-w) solid var(--rule-ink); }
/* columns: cells share one edge (left of every cell after the first) */
.rule-cols > * + * { border-left: var(--rule-hair) solid var(--rule-ink); }
.rule-cols-strong > * + * { border-left: var(--rule-w) solid var(--rule-ink); }
.rule-cols-navy > * + * { border-left: var(--rule-hair) solid var(--rule-on-navy); }
.rule-col { border-left: var(--rule-hair) solid var(--rule-ink); }
/* single edges (for a box whose neighbour already draws the other side) */
.rule-top { border-top: var(--rule-w) solid var(--rule-ink); }
.rule-bottom { border-bottom: var(--rule-w) solid var(--rule-ink); }
.rule-left { border-left: var(--rule-w) solid var(--rule-ink); }
.rule-right { border-right: var(--rule-w) solid var(--rule-ink); }
.rule-hair-top { border-top: var(--rule-hair) solid var(--rule-ink); }
.rule-hair-bottom { border-bottom: var(--rule-hair) solid var(--rule-ink); }
.rule-navy-top { border-top: var(--rule-hair) solid var(--rule-on-navy); }
/* colour modifiers (width stays from the class) */
.rule-is-navy { border-color: var(--rule-navy) !important; }
.rule-is-alert { border-color: var(--alert) !important; }
.rule-is-brass { border-color: var(--brass) !important; }
.rule-is-onnavy { border-color: var(--rule-on-navy) !important; }
.rule-is-soft { border-color: #BFD48F !important; }          /* BORDER_TABLE #77 soft summary frame (measured #C5DA93) */
.rule-is-alert-tint { border-color: #EDB2A2 !important; }    /* BORDER_TABLE #91 alert-tint panel edge */
/* frameless text/fill button (the button draws no frame; its neighbour or panel does) */
.rule-none { border: 0; }
/* shared edge drawn once (DESIGN §4b): the neighbour 9 px away draws this side, so this box leaves it off */
.rule-share-l { border-left-width: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rule-share-t { border-top-width: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rule-share-b { border-bottom-width: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* #/tank components (BORDER_TABLE.md #/tank rows 256–306, measured; mapped from clone/tank.html by hydrate-tank) */
.rule-section { border: max(1px, calc(3.4 * var(--u))) solid #0B3352; border-radius: var(--r-panel); }   /* section panel (256: 3.4 navy) */
.rule-section.rule-thick { border-width: max(1px, calc(4.5 * var(--u))); }                               /* section panels (270/271/278: 4.5) */
.rule-tabs { border: max(1px, calc(2.6 * var(--u))) solid var(--rule-navy); border-radius: calc(3 * var(--u)); }   /* period tabs (257: 2.6 navy) */
.rule-tabs > * { border: 0; }
.rule-tabs > * + * { border-left: var(--rule-w) solid var(--rule-navy); }
.rule-table.rule-rows-strong tbody tr + tr > * { border-top: var(--rule-w) solid var(--rule-ink); }      /* board/detail rows (259–269, 273–277: 2.3 ink) */
.rule-table.rule-head-hair thead th { border-bottom-width: var(--rule-hair); }                           /* comparison header (303: hairline) */
@media (max-width: 1023px) { .rule-stack > .rule-col { border-left: 0; border-top: var(--rule-hair) solid var(--rule-ink); } }  /* ledger cells stack on mobile */
/* painted lane stripe (a filled bar, not a border) — draws left→right on enter (app.js [data-draw]) */
.rule-stripe { display: block; height: var(--rule-stripe-w); background: var(--navy); border-radius: 1px; transform-origin: 0 50%; }
.rule-stripe.is-ink { background: var(--ink); }
.rule-stripe.is-brass { background: var(--brass); }
/* nav bottom + footer top: full width 2.3 rules */
.rule-chrome-b { border-bottom: var(--rule-w) solid var(--rule-chrome-c); }
.rule-chrome-t { border-top: var(--rule-w) solid var(--rule-chrome-c); }

/* ───────── shared controls (DESIGN.md §5) ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-12);
  min-height: calc(62 * var(--u)); padding: 0 var(--sp-24);
  font: 700 var(--fs-body)/1 var(--font-body); text-decoration: none; cursor: pointer;
  border: var(--rule-w) solid var(--rule-ink); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink);
  transition: transform var(--t-press) var(--ease-pump), background-color var(--t-press) linear;
}
.btn-primary { background: var(--navy); color: var(--white); border-color: var(--rule-navy); }
.btn-ghost { background: transparent; }
.btn:hover { background: var(--surface-2); }
.btn-primary:hover { background: var(--navy-card); }
.btn:active, .pill:active { transform: translateY(calc(2 * var(--u))); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
/* option pill: radio disc + label, selected = navy fill + white text + filled disc */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-12); min-height: calc(70 * var(--u)); padding: 0 var(--sp-20);
  font: 600 var(--fs-body)/1 var(--font-body); cursor: pointer; text-align: left;
  border: var(--rule-w) solid var(--rule-ink); border-radius: var(--r-control); background: transparent; color: var(--ink);
  transition: transform var(--t-press) var(--ease-pump), background-color var(--t-card) var(--ease-pump), color var(--t-card) linear;
}
.pill::before {
  content: ""; flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); min-width: 12px; min-height: 12px; border-radius: 50%;
  box-shadow: inset 0 0 0 max(1px, calc(2.3 * var(--u))) currentColor;
}
.pill:hover { background: var(--surface-2); }
.pill.is-on, .pill[aria-pressed="true"], .pill[aria-checked="true"] { background: var(--navy); color: var(--white); border-color: var(--rule-navy); }
.pill.is-on::before, .pill[aria-pressed="true"]::before, .pill[aria-checked="true"]::before { box-shadow: inset 0 0 0 max(1px, calc(2.3 * var(--u))) currentColor, inset 0 0 0 calc(6 * var(--u)) var(--navy), inset 0 0 0 calc(11 * var(--u)) currentColor; }
/* status chip with the word (no pulsing, §9 #13) */
.status { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) var(--sp-12); font: 400 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.status::before { content: ""; width: calc(12 * var(--u)); height: calc(12 * var(--u)); min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--idle-tint); }
.status[data-status="active"]::before { background: var(--status-active); }
.status[data-status="paused"]::before { background: var(--status-paused); }
.status[data-status="revoked"]::before { background: var(--alert); }
/* THE FLEET CARD face base (ISO 85.6:54). Routes lay out the inside; mark = assets/mark_mono_light.png */
.fleet-card { position: relative; aspect-ratio: 85.6 / 54; background: var(--navy-card); color: var(--white); border-radius: var(--r-card); overflow: hidden; }
.fleet-card .card-mark { height: 22%; width: auto; }
/* data cell hidden until resolved (FAKE IT: external real-named asset without a source → hidden) */
[data-cell]:empty { visibility: hidden; }

/* ───────── NAV (chrome/nav.html verbatim, CA + BUY removed per user 23–24/09; sizes in --u) ───────── */
.nav {
  position: relative; z-index: 20; flex: none;
  height: calc(100 * var(--u)); width: 100%;
  padding: calc(18 * var(--u)) calc(34 * var(--u)) calc(14 * var(--u));
  display: flex; align-items: center; gap: calc(26 * var(--u));
  background: var(--paper); color: var(--chrome-ink);
  font: 600 var(--fs-nav)/1 var(--font-chrome);
}
.lockup { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-right: calc(34 * var(--u)); font: 400 max(16px, calc(28 * var(--u)))/1 var(--font-display); white-space: nowrap; text-decoration: none; color: var(--chrome-ink); }
.lockup img { width: calc(105 * var(--u)); height: calc(58 * var(--u)); min-height: 36px; object-fit: contain; }
.nav-desktop { display: contents; }
.nav .nav-link { color: var(--chrome-ink); text-decoration: none; padding: calc(11 * var(--u)) calc(8 * var(--u)); border-radius: 999px; white-space: nowrap; position: relative; }
.nav .nav-link.is-active { box-shadow: inset 0 calc(-3 * var(--u)) var(--navy); color: var(--navy); }
.nav .nav-link:not(.is-active)::after {   /* hover: a lane-paint stroke slides in under the label */
  content: ""; position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(4 * var(--u)); height: max(2px, calc(3 * var(--u)));
  background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-route) var(--ease-paint);
}
.nav .nav-link:not(.is-active):hover::after { transform: scaleX(1); }
.spacer { flex: 1; }
.nav-decals { display: flex; gap: calc(26 * var(--u)); align-items: center; }
.decal { font: 400 var(--fs-nav)/1 var(--font-mono); padding: calc(8 * var(--u)) calc(11 * var(--u)); color: var(--chrome-ink); text-decoration: none; cursor: pointer; transition: transform var(--t-press) var(--ease-pump); }
.decal:hover { transform: rotate(-2deg); }
.decal[aria-disabled="true"], .footer .links a[aria-disabled="true"] { cursor: default; }
.decal[aria-disabled="true"]:hover { transform: none; }
.nav-menu { display: none; }
.nav-drawer { display: none; }
/* route change: a 4px lane stripe sweeps along the nav's bottom edge */
.route-wipe { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule-w)); height: var(--rule-stripe-w); background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.route-wipe.is-run { animation: fc-wipe calc(var(--t-route) * 2) var(--ease-paint) both; }
@keyframes fc-wipe { 0% { transform: scaleX(0); transform-origin: 0 50%; } 50% { transform: scaleX(1); transform-origin: 0 50%; } 50.1% { transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }

/* ───────── FOOTER (chrome/footer.html verbatim + brand mark + CA TBA) ───────── */
.footer {
  flex: none; width: 100%; min-height: calc(126 * var(--u));
  padding: calc(16 * var(--u)) calc(38 * var(--u));
  display: grid; grid-template-columns: calc(360 * var(--u)) calc(560 * var(--u)) 1fr calc(315 * var(--u)); gap: calc(22 * var(--u)); align-items: center;
  background: var(--paper); color: var(--chrome-ink);
  font: 400 var(--fs-meta)/1.28 var(--font-chrome);
}
.footer .boundary { display: flex; align-items: center; gap: calc(14 * var(--u)); font: 400 max(15px, calc(22 * var(--u)))/1.05 var(--font-display); }
.footer .foot-mark { width: auto; height: calc(50 * var(--u)); min-height: 36px; flex: none; }
.footer .truth, .footer .sources, .footer .links { padding-left: calc(20 * var(--u)); }
.footer .sources { font-family: var(--font-mono); font-size: max(12px, calc(12 * var(--u))); }
.footer .links { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); font-weight: 600; white-space: nowrap; }
.footer .links a { text-decoration: none; cursor: pointer; }
.footer .links a[href]:hover { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; }
.footer .ca-copy { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; }

/* ───────── MOTION (DESIGN.md §10) — transform/opacity only; all off under reduced motion ───────── */
[data-draw] { transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-stripe) var(--ease-paint); }
[data-draw].is-drawn { transform: scaleX(1); }
[data-reveal] { opacity: 0; transition: opacity var(--t-stripe) var(--ease-paint) 120ms; }
[data-reveal].is-in { opacity: 1; }
/* meter wheels: <span class="fc-roll"><span class="fc-wheel"><span>0</span>…<span>9</span></span>…</span> built by app.js */
.fc-roll { display: inline-flex; white-space: pre; font-variant-numeric: tabular-nums; }
.fc-roll .fc-slot { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; vertical-align: bottom; }
.fc-roll .fc-wheel { display: block; transition: transform var(--t-digit) var(--ease-pump); }
.fc-roll .fc-wheel > span { display: block; height: 1.15em; }
/* stamped characters (card number / flip tiles) */
.fc-stamp { display: inline-flex; white-space: pre; perspective: 400px; }
.fc-stamp > span { display: inline-block; backface-visibility: hidden; }
.fc-stamp > span.is-flip { animation: fc-flip var(--t-digit) var(--ease-pump) both; }
@keyframes fc-flip { 0% { transform: rotateX(-90deg); opacity: .2; } 100% { transform: rotateX(0); opacity: 1; } }
/* levels: needle / tank / tube read --level (0..1) */
[data-level] { transform-origin: 50% 100%; transform: scaleY(var(--level, 0)); transition: transform var(--t-level) ease-in-out; }
[data-level-x] { transform-origin: 0 50%; transform: scaleX(var(--level, 0)); transition: transform var(--t-level) ease-in-out; }
[data-needle] { transform: rotate(calc(-90deg + 180deg * var(--level, 0))); transition: transform var(--t-level) ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  [data-draw] { transform: none; }
  [data-reveal] { opacity: 1; }
  .route-wipe { display: none; }
}

/* ───────── below 1024: mobile layout (390 no horizontal scroll) ───────── */
@media (max-width: 1023px) {
  :root { --frame-left: 16px; --frame-right: 16px; --gap-section: 40px; }
  .nav { height: 64px; padding: 0 16px; gap: 12px; }
  .lockup { margin-right: auto; font-size: 20px; gap: 8px; }
  .lockup img { width: 58px; height: 40px; min-height: 36px; }
  .nav-desktop, .nav > .spacer, .nav-decals { display: none; }
  .nav-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: transparent; font: 600 15px/1 var(--font-chrome); color: var(--chrome-ink); }
  .nav-menu-bars { width: 18px; height: 12px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; }
  .nav-drawer:not([hidden]) {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    padding: 8px 16px 20px; background: var(--paper); font: 600 17px/1 var(--font-chrome);
  }
  .nav-drawer .nav-link { padding: 14px 4px; min-height: 44px; }
  .drawer-decals { display: flex; gap: 12px; padding-top: 12px; }
  .drawer-decals .decal { font-size: 15px; padding: 10px 14px; }
  .footer { grid-template-columns: 1fr; gap: 14px; padding: 20px 16px 28px; font-size: 13px; }
  .footer .boundary { font-size: 20px; }
  .footer .foot-mark { height: 40px; }
  .footer .truth, .footer .sources, .footer .links { padding-left: 0; padding-top: 12px; border-left: 0; border-top: var(--rule-hair) solid var(--rule-chrome-c); }
  .footer .links { justify-content: flex-start; flex-wrap: wrap; gap: 18px; white-space: normal; }
  .rule-table-scroll { overflow-x: auto; max-width: 100%; }
}

/* shell starter for #/ (the home route job replaces routes/home.html and may drop this rule) */
.home-hero { padding: calc(40 * var(--u)) 0 var(--gap-section); display: grid; gap: var(--sp-12); }