@font-face { font-family: 'Doto'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/doto-500.ttf') format('truetype'); }
@font-face { font-family: 'Doto'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/doto-600.ttf') format('truetype'); }
@font-face { font-family: 'Kumbh Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/kumbh-sans-400.ttf') format('truetype'); }
@font-face { font-family: 'Kumbh Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/kumbh-sans-500.ttf') format('truetype'); }
@font-face { font-family: 'Kumbh Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/kumbh-sans-600.ttf') format('truetype'); }
@font-face { font-family: 'M PLUS 1 Code'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/m-plus-1-code-400.ttf') format('truetype'); }
@font-face { font-family: 'M PLUS 1 Code'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/m-plus-1-code-500.ttf') format('truetype'); }
@font-face { font-family: 'M PLUS 1 Code'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/m-plus-1-code-700.ttf') format('truetype'); }

/* SPECIALIST — app.css (shell). The ONLY stylesheet with border/outline declarations (LUAT 56, WEB_RULES #23).
   Build width 1920 (LUAT 50): every size is calc(N * var(--u)) with N = css px @1920; --u = viewport / 1920 from 1024 up
   (set in index.html before paint), 0.75px below 1024 (mobile layout). No max-width cap anywhere.
   Type follows USER FIX TYPE (DESIGN.md §9 U2): real desktop sizes at 1920, never below 12px for body text.
   Page frame (LUAT 53, frame.json): ground #071C57, gutters 71 left / 64 right @1920 — main.page owns it. */

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

  /* colour tokens — DESIGN.md §3 */
  --paper: #071C57;          /* page ground */
  --chrome: #15226E;         /* nav + footer ground */
  --surface: #071C53;        /* turret keys, panels */
  --surface-deep: #051B4C;   /* step cards, transcript, inputs */
  --row-alt: #122255;        /* zebra rows */
  --line: #145DB5;           /* panel / card / table / input frames */
  --line-dim: #0A3E8F;       /* inner rules, table cell rules */
  --cyan: #26F3F6;           /* frames of selected / primary */
  --cyan-fill: #5CFAFC;      /* selected key, primary button fill */
  --cyan-soft: #6CE5E9;      /* small labels, links, active nav */
  --coral: #F97B7C;          /* stamp ink: REFUSED, DRY RUN, permanent once launched */
  --coral-fill: #FD7C80;
  --coral-line: #D27076;
  --text: #E5E8FF;
  --text-chrome: #EEF0FA;
  --muted: #AEB7DF;
  --muted-chrome: #B9C1E2;
  --meta-chrome: #9AA4D2;
  --ticket: #EFEEEB;         /* paper slips */
  --ticket-sheet: #F8F9F7;
  --ticket-note: #FAF7EF;
  --form-paper: #DFE0E9;
  --form-input: #EEEEEE;
  --paper-rule: #8F98AF;
  --ticket-ink: #15226E;
  --ink-on-cyan: #071C57;
  --grad-line: linear-gradient(90deg, #F97B7C, #6CE5E9);   /* mark + ticket → fill connector only */

  /* fonts — DESIGN.md §2 */
  --font-display: 'Doto', 'Handjet', ui-monospace, monospace;
  --font-body: 'Kumbh Sans', system-ui, sans-serif;
  --font-mono: 'M PLUS 1 Code', ui-monospace, monospace;

  /* type scale — USER FIX TYPE sizes @1920, proportional, with floors */
  --fs-hero: max(30px, calc(60 * var(--u)));      /* route headline, Doto 500 */
  --fs-big: max(28px, calc(56 * var(--u)));       /* big readout (412.08 USDC) */
  --fs-h2: max(22px, calc(40 * var(--u)));        /* section title, Doto 500 */
  --fs-key: max(18px, calc(30 * var(--u)));       /* turret key label, Doto 600 */
  --fs-panel: max(16px, calc(24 * var(--u)));     /* panel title, Doto 500 */
  --fs-ticket: max(12px, calc(17 * var(--u)));    /* ticket values */
  --fs-body: max(12px, calc(16 * var(--u)));      /* body, tables */
  --fs-nav: max(12px, calc(15 * var(--u)));
  --fs-ui: max(12px, calc(15 * var(--u)));        /* buttons, inputs */
  --fs-meta: max(11px, calc(13 * var(--u)));      /* footer copy, meta */
  --fs-label: max(11px, calc(13 * var(--u)));     /* small UPPER mono labels */
  --fs-small: max(10px, calc(11 * var(--u)));     /* footer sources */

  /* spacing — mockup px × 1.1483 */
  --gut-l: calc(71 * var(--u));
  --gut-r: calc(64 * var(--u));
  --gap-xs: calc(8 * var(--u));
  --gap-s: calc(16 * var(--u));
  --gap-m: calc(21 * var(--u));
  --gap-l: calc(48 * var(--u));
  --gap-xl: calc(72 * var(--u));
  --r: calc(6 * var(--u));        /* keys, panels, cards, inputs, buttons */
  --r-slip: calc(2 * var(--u));   /* paper slips */

  /* rules — DESIGN.md §4 / §4b (BORDER_TABLE.md). Hairlines never below 1px. */
  --rule-w: max(1px, calc(2.3 * var(--u)));       /* dominant frame: panels, keys, inputs, rows, buttons */
  --rule-w-thin: max(1px, calc(1.1 * var(--u)));  /* inner hairlines, title rules */
  --rule-w-check: max(1px, calc(3.2 * var(--u))); /* checkbox */
  --rule-w-nav: max(1px, calc(1 * var(--u)));     /* nav bottom / footer top (chrome) */
  --rule-w-accent: max(2px, calc(3 * var(--u)));  /* active nav underline (chrome 3px) */
  --rule-panel: var(--rule-w) solid var(--line);
  --rule-dim: var(--rule-w) solid var(--line-dim);
  --rule-inner: var(--rule-w-thin) solid var(--line-dim);
  --rule-title: var(--rule-w-thin) solid var(--line);
  --rule-cyan: var(--rule-w) solid var(--cyan);
  --rule-coral: var(--rule-w) solid var(--coral-line);
  --rule-paper: var(--rule-w) solid var(--paper-rule);
  --rule-ticket: max(1px, calc(1.5 * var(--u))) dashed rgba(21, 34, 110, .55);
  --rule-chrome: var(--rule-w-nav) solid rgba(108, 229, 233, .28);

  /* motion — DESIGN.md §10 */
  --ease-sp: cubic-bezier(.2, .7, .2, 1);
  --t-press: 120ms;
  --t-short: 180ms;
  --t-mid: 280ms;
  --t-long: 420ms;
}

*, *::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(--text);
  font: 400 var(--fs-body)/1.45 var(--font-body);
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(button, input, select, textarea) { border: 0; }
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; text-align: left; font-weight: 400; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--cyan-soft); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ───────── ONE PAGE FRAME (LUAT 53) ───────── */
main.page {
  flex: 1; width: 100%; position: relative; isolation: isolate;
  padding: 0 var(--gut-r) 0 var(--gut-l);
  background-color: var(--paper);
}
/* faint blueprint ground (DESIGN.md §4 texture, SVG in code, ~7% line opacity) — the shell draws it, routes never set a background */
main.page::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360'%3E%3Cg fill='none' stroke='%237fa6ff' stroke-opacity='.035' stroke-width='1'%3E%3Cpath d='M0 60h120v60h80V40h140v90h140M0 250h60v-40h110v80h90v-50h120v60h100'/%3E%3Cpath d='M40 0v60M200 40V0M340 130v80h-80v150M420 130v230M60 210v150M170 290v70'/%3E%3Crect x='232' y='166' width='56' height='36'/%3E%3Crect x='18' y='128' width='70' height='44'/%3E%3Crect x='372' y='20' width='64' height='70'/%3E%3C/g%3E%3Cg fill='%237fa6ff' fill-opacity='.045'%3E%3Ccircle cx='120' cy='60' r='3'/%3E%3Ccircle cx='340' cy='130' r='3'/%3E%3Ccircle cx='260' cy='290' r='3'/%3E%3Ccircle cx='60' cy='250' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: calc(480 * var(--u)) calc(360 * var(--u));
}
main.page > * { position: relative; }
main.is-leaving { opacity: .6; }

/* ───────── shared text roles for route bodies ───────── */
.t-hero { font: 500 var(--fs-hero)/1.05 var(--font-display); margin: 0; color: var(--text); letter-spacing: 0; }
.t-h2 { font: 500 var(--fs-h2)/1.1 var(--font-display); margin: 0; color: var(--text); }
.t-key { font: 600 var(--fs-key)/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.t-panel { font: 500 var(--fs-panel)/1.2 var(--font-display); margin: 0; color: var(--text); }
.t-sub, .t-body { font: 400 var(--fs-body)/1.45 var(--font-body); color: var(--muted); letter-spacing: .01em; margin: 0; }
.t-ui { font: 500 var(--fs-ui)/1.2 var(--font-body); }
.t-num, .t-mono { font: 400 var(--fs-body)/1.35 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .035em; }
.t-ticket { font: 400 var(--fs-ticket)/1.35 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .035em; color: var(--ticket-ink); }
.t-label { font: 500 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-soft); }
.t-meta { font: 400 var(--fs-meta)/1.4 var(--font-body); color: var(--muted); }
.t-big { font: 500 var(--fs-big)/1 var(--font-mono); color: var(--cyan-soft); font-variant-numeric: tabular-nums; }
.t-refused, .ink-coral { color: var(--coral); }
.t-ready, .ink-cyan { color: var(--cyan-soft); }

/* ───────── NAV (chrome/nav.html verbatim, sizes in the page unit; no CA / BUY — user 23–24/09) ───────── */
.sp-nav {
  position: relative; z-index: 20; width: 100%;
  height: calc(94 * var(--u)); padding: 0 calc(64 * var(--u));
  display: grid; grid-template-columns: calc(342 * var(--u)) 1fr auto; align-items: center; gap: calc(30 * var(--u));
  background: var(--chrome); color: var(--text-chrome);
  font: 400 var(--fs-nav) var(--font-body);
}
.sp-nav .brand {
  display: flex; align-items: center; gap: calc(18 * var(--u));
  color: var(--text-chrome); text-decoration: none; white-space: nowrap;
  font: 600 max(14px, calc(21 * var(--u))) var(--font-body); letter-spacing: .28em;
}
.sp-nav .brand img { width: calc(60 * var(--u)); height: calc(54 * var(--u)); min-width: 40px; min-height: 36px; object-fit: contain; }
.sp-nav .routes { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(43 * var(--u)); white-space: nowrap; height: 100%; }
.sp-nav .routes a {
  height: 100%; display: flex; align-items: center; color: var(--text-chrome); text-decoration: none;
  font-weight: 400; transition: color var(--t-short) var(--ease-sp);
}
.sp-nav .routes a:hover, .sp-nav .routes a.is-active { color: var(--cyan-soft); }
.sp-nav .nav-cursor {
  position: absolute; left: 0; bottom: 0; width: 100px; height: var(--rule-w-accent);
  background: var(--cyan-soft); transform-origin: left center; opacity: 0; pointer-events: none;
  transition: transform var(--t-short) var(--ease-sp), opacity var(--t-short) linear;
}
.sp-nav .actions { display: flex; align-items: center; justify-content: flex-end; gap: calc(27 * var(--u)); white-space: nowrap; min-width: calc(456 * var(--u)); } /* keeps the route links where the mockup draws them (the removed CA + BUY held this width) */
.social { color: var(--text-chrome); text-decoration: none; cursor: pointer; transition: color var(--t-short) var(--ease-sp); }
.social:hover { color: var(--cyan-soft); }
.social[aria-disabled="true"] { cursor: default; }
.social[aria-disabled="true"]:hover { color: var(--text-chrome); }
.nav-menu { display: none; }
.nav-drawer { display: none; }

/* ───────── FOOTER (chrome/footer.html verbatim; CA shows TBA until launch.json has it) ───────── */
.sp-footer {
  width: 100%; min-height: calc(143 * var(--u)); padding: calc(18 * var(--u)) calc(64 * var(--u));
  display: grid; grid-template-columns: calc(310 * var(--u)) 1fr auto; align-items: center; gap: calc(36 * var(--u));
  background: var(--chrome); color: var(--text-chrome);
  font: 400 var(--fs-meta) var(--font-body);
}
.sp-footer .brand { display: flex; align-items: center; gap: calc(17 * var(--u)); font: 600 max(14px, calc(20 * var(--u))) var(--font-body); letter-spacing: .25em; white-space: nowrap; }
.sp-footer .brand img { width: calc(58 * var(--u)); height: calc(52 * var(--u)); min-width: 36px; min-height: 32px; object-fit: contain; }
.sp-footer .copy { display: grid; gap: calc(7 * var(--u)); }
.sp-footer .boundary { font-size: max(12px, calc(14 * var(--u))); }
.sp-footer .sub { color: var(--muted-chrome); }
.sp-footer .sources { color: var(--meta-chrome); font: 400 var(--fs-small)/1.5 var(--font-mono); }
.sp-footer .actions { display: flex; align-items: center; gap: calc(28 * var(--u)); white-space: nowrap; }
.sp-footer .ca {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(11 * var(--u)) calc(24 * var(--u)); color: var(--cyan-soft);
  font: 400 var(--fs-meta) var(--font-body);
}
.sp-footer .ca [data-launch-ca] { font-family: var(--font-mono); letter-spacing: .04em; }
.ca-copy { background: none; padding: 0 0 0 calc(8 * var(--u)); color: var(--cyan-soft); cursor: pointer; font: 500 var(--fs-label) var(--font-mono); letter-spacing: .08em; }
.sp-footer .buy { font: 400 var(--fs-meta) var(--font-mono); color: var(--text-chrome); text-decoration: none; letter-spacing: .06em; }

/* ───────── RULE CLASSES (one per framed component, DESIGN.md §4b) — route bodies use these, never border/outline ───────── */
.rule-nav { border-bottom: var(--rule-chrome); }
.rule-footer { border-top: var(--rule-chrome); }
/* panels + strips: order line, check table panel, refusals, boundary, control strip, cost cards, chart, env/tool panels, receipt, timeline */
.rule-panel { border: var(--rule-panel); border-radius: var(--r); }
.rule-panel-dim { border: var(--rule-dim); border-radius: var(--r); }            /* transcript panel */
.rule-panel-cyan { border: var(--rule-cyan); border-radius: var(--r); }          /* chart panel (Opening surcharge) */
/* turret key */
.rule-key { border: var(--rule-panel); border-radius: var(--r); transition: border-color var(--t-short) var(--ease-sp); }
.rule-key:hover { border-color: var(--cyan); }
.rule-key.is-selected, .rule-key[aria-pressed="true"] { border-color: var(--line-dim); }
/* step card */
.rule-card { border: var(--rule-panel); border-radius: var(--r); }
.rule-card-current { border: var(--rule-cyan); border-radius: var(--r); }
/* inputs — the frame sits on the wrapper; the control inside has none (whole control wrapped) */
.rule-input { border: var(--rule-dim); border-radius: var(--r); background: var(--surface-deep); }
.rule-input-line { border: var(--rule-panel); border-radius: var(--r); background: var(--surface-deep); }  /* fill tx input */
.rule-input-coral { border: var(--rule-coral); border-radius: var(--r); background: var(--surface-deep); }  /* claim address, active warning */
.rule-input-paper { border: var(--rule-paper); border-radius: var(--r); background: var(--form-input); color: var(--ticket-ink); }  /* launch sheet fields + steppers */
.rule-input:focus-within, .rule-input-line:focus-within { border-color: var(--cyan); }
.rule-input-paper:focus-within { border-color: var(--ticket-ink); }
.rule-input > input, .rule-input-line > input, .rule-input-coral > input, .rule-input-paper > input,
.rule-input > select, .rule-input-paper > select, .rule-input > textarea {
  border: 0; outline: 0; background: transparent; min-width: 0; width: 100%;
}
/* buttons */
.rule-button { border: var(--rule-cyan); border-radius: var(--r); }             /* SEND (dry run), OPEN tx IN EXPLORER, footer CA */
.rule-button-line { border: var(--rule-panel); border-radius: var(--r); }       /* OPEN IN EXPLORER, Copied */
.rule-button-dim { border: var(--rule-dim); border-radius: var(--r); }          /* mobile menu button */
.rule-button-coral { border: var(--rule-coral); border-radius: var(--r); }      /* coral outline action */
.rule-fill { border: var(--rule-w) solid transparent; border-radius: var(--r); } /* filled buttons (PRINT TICKET, READ): same box as a framed one */
/* chips + nodes + checkbox */
.rule-chip { border: var(--rule-cyan); border-radius: var(--r); }                /* portal chip, diagram node */
.rule-chip-dim { border: var(--rule-dim); border-radius: var(--r); }             /* selected portal chip (dark edge on cyan fill) */
.rule-node { border: var(--rule-panel); border-radius: var(--r); }               /* contract path node, mechanism step box */
.rule-check { border: var(--rule-w-check) solid var(--cyan); border-radius: var(--r); }
.rule-warn { border: var(--rule-coral); border-radius: var(--r); }               /* key warning box */
.rule-code { border: max(1px, calc(1.7 * var(--u))) solid var(--line); border-radius: var(--r); }  /* code field */
.rule-meter { border: var(--rule-w-thin) solid var(--line); border-radius: var(--r); }             /* split bar frame */
/* tables: the frame draws the outside, each row draws only its bottom edge (no doubled lines) */
.rule-table { border: var(--rule-panel); border-radius: 0; }
.rule-table-round { border: var(--rule-panel); border-radius: var(--r); overflow: visible; }  /* collapsed borders: overflow hidden clipped the outer frame */
.rule-row-head, .rule-table thead tr, .rule-table-round thead tr { border-bottom: var(--rule-panel); }
.rule-row, .rule-table tbody tr, .rule-table-round tbody tr { border-bottom: var(--rule-dim); }
.rule-row:last-child, .rule-table tbody tr:last-child, .rule-table-round tbody tr:last-child { border-bottom: 0; }
.rule-col { border-right: var(--rule-inner); }
.rule-col:last-child { border-right: 0; }
.rule-sep { border-left: var(--rule-inner); }                                   /* vertical separator inside a strip */
.rule-sep:first-child { border-left: 0; }
.rule-title { border-bottom: var(--rule-title); }                               /* panel / step card title rule */
.rule-title-top { border-top: var(--rule-title); }
.rule-title-dashed { border-bottom: var(--rule-w-thin) dashed var(--line); }
.rule-ticket { border-top: var(--rule-ticket); }                                /* dashed rule printed on a paper slip */
.rule-ticket-bottom { border-bottom: var(--rule-ticket); }
.rule-col-first { border-right: var(--rule-inner); }                          /* first column rule of a ruled table (claim stop table) */
.rule-slip { border-bottom: var(--rule-w-thin) solid rgba(21, 34, 110, .42); }  /* solid row rule printed on a paper slip */
.rule-link { border-bottom: var(--rule-w-thin) solid var(--coral-line); }       /* connector line between path nodes */
.rule-note { border: var(--rule-w-thin) solid rgba(21, 34, 110, .42); }     /* paper note pinned on a chart */
.rule-cols-3 > :is(:nth-child(5n+1), :nth-child(5n+2), :nth-child(5n+3)) { border-right: var(--rule-inner); }  /* 5-col audit grid: first three column rules */
.rule-slip-top { border-top: var(--rule-w-thin) solid rgba(21, 34, 110, .42); }
.rule-table-cols th:not(:last-child), .rule-table-cols td:not(:last-child) { border-right: var(--rule-inner); }  /* column rules of a framed table */
.rule-accent-left { border-left: max(2px, calc(4 * var(--u))) solid var(--cyan-soft); }  /* transcript cursor bar */
.rule-drawer { border-bottom: var(--rule-chrome); }
/* adjacent framed boxes share one edge: wrap them */
.rule-joined > * + * { border-left-width: 0; }
.rule-stack > * + * { border-top-width: 0; }

/* ───────── shared components (look only; routes lay them out) ───────── */
.lamp { display: inline-block; width: calc(10 * var(--u)); height: calc(10 * var(--u)); min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--cyan-soft); flex: none; }
.lamp[data-state="down"], .lamp.is-down { background: var(--coral); }
.lamp[data-state="off"], .lamp.is-off { background: var(--line-dim); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-xs);
  min-height: calc(55 * var(--u)); padding: 0 calc(24 * var(--u));
  background: transparent; color: var(--cyan-soft); cursor: pointer; text-decoration: none;
  font: 500 var(--fs-ui)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--t-short) var(--ease-sp), color var(--t-short) var(--ease-sp), transform var(--t-press) var(--ease-sp);
}
.btn-primary { background: var(--cyan-fill); color: var(--ink-on-cyan); }
.btn-primary:hover { background: var(--cyan); }
.btn-coral { background: var(--coral-fill); color: var(--ink-on-cyan); }
.btn-coral:hover { background: var(--coral); }
.btn:active { transform: translateY(calc(2 * var(--u))); }
.paper-slip { background: var(--ticket); color: var(--ticket-ink); border-radius: var(--r-slip); box-shadow: 0 6px 14px rgba(0, 8, 40, .45); }
.stamp {
  display: inline-block; padding: calc(6 * var(--u)) calc(12 * var(--u)); color: var(--coral);
  font: 600 max(12px, calc(20 * var(--u)))/1.05 var(--font-display); transform: rotate(-8deg);
}
.stamp.rule-warn { border-radius: var(--r-slip); }
.connector { height: max(2px, calc(2 * var(--u))); background: var(--grad-line); transform-origin: left center; }
.copy-btn[data-copied] { color: var(--cyan-soft); }
.wide { overflow-x: auto; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── FILL READER route ───────── */
.fill-route { padding-bottom: 0; }
.fill-head { height: calc(188 * var(--u)); padding: calc(27 * var(--u)) 0 0; display: block; position: relative; }
.fill-head .t-sub { margin-top: calc(8 * var(--u)); max-width: calc(720 * var(--u)); }
.fill-readline { margin-top: calc(13 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) calc(288 * var(--u)) calc(310 * var(--u)); gap: calc(18 * var(--u)); align-items: stretch; }
.fill-input { min-height: calc(57 * var(--u)); display: grid; align-content: center; gap: calc(2 * var(--u)); padding: calc(6 * var(--u)) calc(18 * var(--u)); }
.fill-input input { padding: 0; text-overflow: ellipsis; }
.fill-picks { position: absolute; right: 0; top: calc(12 * var(--u)); display: flex; gap: calc(15 * var(--u)); align-items: center; }
.fill-pick, .fill-view-control button { padding: 0; background: none; color: var(--muted); cursor: pointer; font: 500 var(--fs-label) var(--font-mono); letter-spacing: .06em; }
.fill-pick:hover, .fill-view-control button:hover, .fill-view-control button[aria-pressed="true"] { color: var(--cyan-soft); }
.fill-stage { height: calc(467 * var(--u)); position: relative; padding-top: calc(48 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) calc(600 * var(--u)); gap: calc(28 * var(--u)); align-items: start; }
.fill-view-control { position: absolute; left: 0; top: 0; width: calc(478 * var(--u)); height: calc(42 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; text-transform: uppercase; }
.fill-view-control button { color: var(--cyan-soft); background: var(--surface-deep); }
.fill-view-control button[aria-pressed="true"] { color: var(--ink-on-cyan); background: var(--cyan-fill); }
.fill-view-control button[aria-pressed="true"]::before, .fill-view-control .is-on::before { content: none; }
.fill-slips { height: calc(405 * var(--u)); position: relative; overflow: hidden; }
.fill-slip-art { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fill-slip { position: absolute; z-index: 1; top: calc(70 * var(--u)); width: calc(430 * var(--u)); color: var(--ticket-ink); font-family: var(--font-mono); transform: rotate(-.2deg); }
.fill-slip-quote { left: calc(110 * var(--u)); }
.fill-slip-filled { left: calc(630 * var(--u)); transform: rotate(.35deg); }
.fill-slip-brand { padding-bottom: calc(10 * var(--u)); display: grid; grid-template-columns: calc(34 * var(--u)) 1fr auto; align-items: center; gap: calc(8 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: .12em; }
.fill-slip-brand img { width: calc(30 * var(--u)); height: calc(27 * var(--u)); object-fit: contain; filter: brightness(.42) saturate(2); }
.fill-slip-brand b { color: var(--coral); font: 600 calc(16 * var(--u)) var(--font-display); }
.fill-slip-route { margin: calc(6 * var(--u)) 0 calc(8 * var(--u)); padding: calc(6 * var(--u)) 0; font-weight: 700; }
.fill-slip dl { margin: 0; display: grid; gap: calc(5 * var(--u)); font-size: calc(14 * var(--u)); }
.fill-slip dl div { display: flex; justify-content: space-between; gap: calc(18 * var(--u)); }
.fill-slip dt { color: #59617b; }
.fill-slip dd { margin: 0; font-weight: 700; text-align: right; }
.fill-slip-foot { margin: calc(16 * var(--u)) 0 0; padding-top: calc(9 * var(--u)); font-size: calc(12 * var(--u)); color: #59617b; }
.fill-receipt { height: calc(405 * var(--u)); margin-top: 0; background: rgba(5,27,76,.92); overflow: hidden; }
.fill-panel-title { min-height: calc(67 * var(--u)); padding: 0 calc(22 * var(--u)); display: flex; justify-content: space-between; align-items: center; font: 500 var(--fs-panel) var(--font-display); }
.fill-live { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); color: var(--cyan-soft); font: 500 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.fill-receipt-row { min-height: calc(43 * var(--u)); padding: 0 calc(22 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(18 * var(--u)); color: var(--muted); }
.fill-receipt-row strong { color: var(--text); font-size: var(--fs-body); font-weight: 500; }
.fill-receipt-note { margin: calc(10 * var(--u)) calc(22 * var(--u)); color: var(--cyan-soft); font-size: var(--fs-meta); }
.fill-timeline { height: calc(245 * var(--u)); margin: 0; background: #102b68; overflow: hidden; }
.fill-timeline .fill-panel-title { min-height: calc(66 * var(--u)); }
.fill-kpis { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; height: calc(62 * var(--u)); margin: calc(8 * var(--u)) calc(28 * var(--u)) 0; padding: 0 calc(8 * var(--u)); }
.fill-kpis div { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: calc(12 * var(--u)) !important; }
.fill-kpis div { display: grid; gap: calc(4 * var(--u)); }
.fill-kpis strong { font: 500 var(--fs-body) var(--font-mono); color: var(--text); }
.fill-timeline-svg { width: calc(100% - 56 * var(--u)); height: calc(96 * var(--u)); margin: calc(8 * var(--u)) calc(28 * var(--u)) 0; overflow: visible; }
.fill-timeline-svg path { fill: none; stroke: var(--cyan-soft); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fill-timeline-svg circle { fill: var(--paper); stroke: var(--cyan-soft); stroke-width: 3; vector-effect: non-scaling-stroke; }
.fill-timeline-svg [data-fill-marker] circle { fill: var(--coral); stroke: var(--coral); }
.fill-timeline-svg text { fill: var(--muted); font: 500 14px var(--font-mono); letter-spacing: .08em; }
.fill-diff { height: calc(511 * var(--u)); padding-top: calc(34 * var(--u)); background-image: url('assets/blueprint-ground.png'); background-repeat: no-repeat; background-position: center calc(35 * var(--u)); background-size: 100% calc(182 * var(--u)); }
.fill-section-head { min-height: calc(102 * var(--u)); display: flex; justify-content: space-between; align-items: center; }
.fill-section-head .t-label { margin-bottom: calc(8 * var(--u)); }
.fill-view-control-static { position: static; width: calc(360 * var(--u)); height: calc(42 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; place-items: center; color: var(--muted); background: var(--surface-deep); font: 500 var(--fs-label) var(--font-mono); text-transform: uppercase; }
.fill-view-control-static span:last-child { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-on-cyan); background: var(--cyan-fill); }
.fill-diff-table { table-layout: fixed; background: rgba(5,27,76,.58); }
.fill-diff-table th { height: calc(52 * var(--u)); padding: 0 calc(22 * var(--u)); color: var(--cyan-soft); font: 500 var(--fs-label) var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.fill-diff-table td { height: calc(57 * var(--u)); padding: 0 calc(22 * var(--u)); font: 400 var(--fs-body) var(--font-mono); }
.fill-diff-table th:first-child, .fill-diff-table td:first-child { font-family: var(--font-body); color: var(--muted); }
.fill-diff-table th:nth-child(1) { width: calc(333 * var(--u)); } .fill-diff-table th:nth-child(2) { width: calc(381 * var(--u)); } .fill-diff-table th:nth-child(3) { width: calc(378 * var(--u)); } .fill-diff-table th:nth-child(4) { width: calc(336 * var(--u)); }
.fill-diff-table tbody tr:nth-child(even) { background: rgba(18,34,85,.55); }
.fill-panels { height: calc(290 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); margin: 0; }
.fill-info { height: calc(250 * var(--u)); background: rgba(5,27,76,.76); overflow: hidden; }
.fill-info-body { padding: calc(22 * var(--u)); }
.fill-fee { min-height: calc(48 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); color: var(--muted); }
.fill-fee strong { color: var(--text); font: 500 var(--fs-body) var(--font-mono); }
.fill-fee.fill-total { color: var(--cyan-soft); }
.fill-path { list-style: none; margin: 0; padding: calc(20 * var(--u)) calc(24 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.fill-path li { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.fill-state-list { padding: calc(15 * var(--u)) calc(22 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.fill-state-list p { margin: 0; display: grid; grid-template-columns: calc(34 * var(--u)) 1fr; gap: calc(10 * var(--u)); align-items: center; }
.fill-state-list strong, .fill-state-list small { display: block; }
.fill-state-list small { color: var(--muted); font-size: var(--fs-meta); }
.fill-state-mark { color: var(--cyan-soft); font: 600 calc(21 * var(--u)) var(--font-mono); }
.fill-note { height: calc(60 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(28 * var(--u)); color: var(--ticket-ink); background: var(--ticket-note); transform: none; box-shadow: 0 6px 18px rgba(0,8,40,.34); }
.fill-note p { margin: 0; font: 500 calc(24 * var(--u)) var(--font-display); }
.fill-note span { font: 400 var(--fs-meta) var(--font-mono); color: #59617b; }
.fill-open { height: calc(92 * var(--u)); margin-top: calc(23 * var(--u)); padding: calc(16 * var(--u)); display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: calc(15 * var(--u)); background: rgba(5,27,76,.76); }
.fill-open p { margin: 0; }
.fill-open .t-mono { margin-top: calc(6 * var(--u)); color: var(--muted); overflow-wrap: anywhere; }
.fill-stage[data-view="diff"] .fill-slip-quote { opacity: .25; transform: translateX(calc(-16 * var(--u))); }
.fill-stage[data-view="diff"] .fill-slip-filled { transform: translateX(calc(-230 * var(--u))); }
.fill-slip { transition: transform var(--t-long) steps(6,end), opacity var(--t-mid) steps(3,end); }

@media (max-width: 1023.98px) {
  .fill-route { padding-bottom: 32px; }
  .fill-head { min-height: auto; padding: 28px 0 24px; grid-template-columns: 1fr; gap: 20px; }
  .fill-readline { grid-template-columns: 1fr; }
  .fill-picks { grid-column: 1; flex-wrap: wrap; gap: 10px 16px; }
  .fill-stage { padding-top: 54px; grid-template-columns: 1fr; min-height: auto; }
  .fill-slips { height: auto; min-height: 650px; overflow: hidden; }
  .fill-slip-art { display: none; }
  .fill-slip { position: relative; inset: auto; width: auto; min-height: 280px; margin: 0 0 18px; padding: 22px; background: var(--ticket); box-shadow: 0 6px 14px rgba(0,8,40,.45); transform: none; }
  .fill-slip-brand { grid-template-columns: 30px 1fr auto; font-size: 13px; }
  .fill-slip dl { font-size: 13px; }
  .fill-receipt { height: auto; min-height: 380px; margin: 0; }
  .fill-timeline { margin-top: 24px; margin-bottom: 36px; }
  .fill-kpis { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .fill-timeline-svg { min-width: 720px; }
  .fill-timeline { overflow-x: auto; }
  .fill-diff { min-height: auto; padding-bottom: 38px; }
  .fill-section-head { align-items: flex-end; }
  .fill-view-control-static { display: none; }
  .fill-diff-table { min-width: 760px; }
  .fill-panels { grid-template-columns: 1fr; min-height: auto; }
  .fill-note { min-height: 130px; padding: 24px; display: grid; gap: 8px; }
  .fill-note p { font-size: 22px; }
  .fill-open { grid-template-columns: 1fr; }
  .fill-stage[data-view="diff"] .fill-slip-quote, .fill-stage[data-view="diff"] .fill-slip-filled { opacity: 1; transform: none; }
}

/* ───────── MOTION (DESIGN.md §10) — transform/opacity only, rest state always visible ───────── */
.key-press { transition: transform var(--t-press) var(--ease-sp); }
.key-press:active, .key-press.is-pressed { transform: translateY(calc(2 * var(--u))); }
.is-blink { animation: sp-blink var(--t-mid) steps(2, jump-none) 1; }
@keyframes sp-blink { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }
.is-feeding { animation: sp-feed var(--t-short) steps(3, end) both; }
@keyframes sp-feed { from { transform: translateY(calc(-8 * var(--u))); opacity: .35; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .key-press:active, .key-press.is-pressed, .btn:active { transform: none; }
}

/* ───────── below 1024: mobile layout (390 without horizontal scroll) ───────── */
@media (max-width: 1023.98px) {
  :root { --gut-l: 16px; --gut-r: 16px; --fs-hero: 32px; --fs-h2: 24px; --fs-key: 18px; --fs-panel: 18px; --fs-big: 34px; --fs-body: 15px; --fs-ticket: 14px; --fs-nav: 15px; --fs-ui: 14px; --fs-meta: 13px; --fs-label: 11px; --fs-small: 10px; }
  .sp-nav { height: 64px; padding: 0 16px; grid-template-columns: 1fr auto; gap: 12px; }
  .sp-nav .brand { font-size: 16px; gap: 12px; letter-spacing: .22em; }
  .sp-nav .brand img { width: 44px; height: 40px; }
  .sp-nav .routes, .sp-nav .actions { display: none; }
  .nav-menu {
    display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px;
    background: var(--surface); color: var(--text-chrome); cursor: pointer; font: 500 14px var(--font-body);
  }
  .nav-menu-bars, .nav-menu-bars::before, .nav-menu-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .nav-menu-bars::before, .nav-menu-bars::after { content: ''; position: absolute; left: 0; }
  .nav-menu-bars::before { top: -6px; } .nav-menu-bars::after { top: 6px; }
  .nav-drawer:not([hidden]) {
    display: grid; position: absolute; left: 0; right: 0; top: 64px; z-index: 30;
    padding: 8px 16px 16px; background: var(--chrome);
  }
  .nav-drawer a { padding: 14px 0; color: var(--text-chrome); text-decoration: none; font: 500 16px var(--font-body); }
  .nav-drawer a.is-active { color: var(--cyan-soft); }
  .drawer-actions { display: flex; gap: 24px; margin-top: 8px; padding-top: 12px; }
  .sp-footer { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px; }
  .sp-footer .actions { flex-wrap: wrap; gap: 16px 24px; white-space: normal; }
  .sp-footer .brand img { width: 44px; height: 40px; }
  .sp-footer .sources { overflow-wrap: anywhere; }
  main.page::before { background-size: 360px 270px; }
}