/* DRYDOCK — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5 + §10 MOTION; USER_FIXES.md applied (one page frame, type scale).
   UNIT: --u = 1 css px of the 1920 design (set in index.html from the viewport width). Every length = calc(N * var(--u)),
   N = the @1920 value. Text tokens never go below 12px. Below 1024 --u = 0.75px and routes stack (see MOBILE at the end).
   BORDERS: ONLY the .rule-* classes below draw borders/outlines (LAW 56). Route files contain ZERO border/outline declarations. */

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

  /* colour tokens (DESIGN.md §3 — USER FIX PALETTE R1 28/09: night-steel ground + the mark's pink/lime pair) */
  --paper: #0F1720;            /* page ground (LOCKED) */
  --surface-raise: #162231;    /* survey band behind the certificate only */
  --surface-sink: #0B121A;
  --bone: #F4F1E8;             /* display type, waterline, footer rule */
  --text: #E7ECF2;             /* body text */
  --muted: #9DAABB;            /* meta, axis labels */
  --rule: #8FA3BB;             /* 2px panel frames, nav rule */
  --rule-soft: #44566A;        /* 1px row / column rules */
  --measured: #FF3D8B;         /* sign 1 = MEASURED / TAKEN / selected */
  --measured-ink: #FF78AE;
  --declared: #C2F24B;         /* sign 2 = DECLARED / PUBLISHED */
  --declared-ink: #D9FA7A;
  --row-select: #3A1C35;
  --row-select-soft: #1F2536;
  --cert-paper: #F5F3EC;
  --cert-ink: #0F1720;
  --cert-ink-body: #39404A;
  --cert-rule: #3A424D;
  --cert-frame: #1B2838;
  --record-paper: #EFEEE6;
  --record-ink: #14202E;
  --code-bg: #0A1017;
  --code-ink: #EEF2F5;
  --hull-muted: #4F6379;       /* idle hull silhouettes (art home-hulls) */

  /* rule tokens (DESIGN.md §4 / §4b — width + colour per rule kind; hairlines never below 1px) */
  --rule-panel-w: max(1px, calc(2 * var(--u)));      --rule-panel-c: var(--rule);
  --rule-row-w: max(1px, calc(1 * var(--u)));        --rule-row-c: var(--rule-soft);
  --rule-col-w: max(1px, calc(1 * var(--u)));        --rule-col-c: var(--rule-soft);
  --rule-input-w: max(1px, calc(2 * var(--u)));      --rule-input-c: var(--rule);
  --rule-button-w: max(1px, calc(2 * var(--u)));     --rule-button-c: var(--measured);
  --rule-chip-w: max(1px, calc(2 * var(--u)));       --rule-chip-c: var(--rule);  --rule-chip-on-c: var(--declared);
  --rule-select-w: max(1px, calc(2 * var(--u)));     --rule-select-c: var(--measured);
  --rule-nav-w: max(1px, calc(1 * var(--u)));        --rule-nav-c: var(--rule);
  --rule-footer-w: max(1px, calc(1 * var(--u)));     --rule-footer-c: var(--rule);
  --rule-waterline-w: max(2px, calc(3 * var(--u)));  --rule-waterline-c: var(--bone);
  --rule-cert-w: max(1px, calc(2 * var(--u)));       --rule-cert-c: var(--cert-frame); --rule-cert-gap: calc(6 * var(--u));
  --rule-cert-grid-w: max(1px, calc(1 * var(--u)));  --rule-cert-grid-c: var(--cert-rule);
  --rule-dashed-w: max(1px, calc(2 * var(--u)));     --rule-dashed-c: var(--bone);

  /* fonts (DESIGN.md §2) */
  --f-display: 'Stardos Stencil', 'Georgia', serif;
  --f-sans: 'Encode Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Fira Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* type scale @1920 — USER FIX TYPE (real desktop sizes; mockup ratios kept inside the bounds) */
  --fs-hero: calc(64 * var(--u));                 /* home hero (mockup 64) */
  --fs-title: calc(56 * var(--u));                /* route title, Stardos 700 UPPER */
  --fs-section: calc(36 * var(--u));              /* panel headings (SURVEY REPORT …) */
  --fs-section-sm: calc(28 * var(--u));           /* smaller panel headings */
  --fs-big: calc(40 * var(--u));                  /* big mono metric (618 bps) */
  --fs-cert-title: calc(30 * var(--u));           /* certificate title, Encode 700 */
  --fs-lede: max(13px, calc(19 * var(--u)));      /* lede under titles, Encode 300 */
  --fs-body: max(12px, calc(16 * var(--u)));
  --fs-cell: max(12px, calc(15 * var(--u)));      /* table cells */
  --fs-num: max(12px, calc(16 * var(--u)));       /* mono numbers */
  --fs-code: max(12px, calc(15 * var(--u)));
  --fs-label: max(12px, calc(14 * var(--u)));     /* table headers, labels */
  --fs-small: max(12px, calc(13 * var(--u)));     /* meta, axis */
  --fs-nav: max(12px, calc(15 * var(--u)));
  --fs-foot: max(12px, calc(14 * var(--u)));
  --fs-brand: calc(29 * var(--u));

  /* page frame (LAW 53 + USER FIX: gutters 40/40 @1920, container 1840) */
  --gutter: calc(40 * var(--u));
  --gap-section: calc(64 * var(--u));             /* 48–96 band, never ≥160 blank */
  --pad-panel: calc(21 * var(--u));

  /* motion (DESIGN.md §10) */
  --ease-winch: cubic-bezier(.2, .75, .15, 1);
  --t-fast: 160ms; --t-mid: 320ms; --t-slow: 640ms; --t-frame: 350ms;
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--text);
  font: 400 var(--fs-body)/1.45 var(--f-sans); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
/* faint warm grain on the page ground (≤3 % luminance noise, DESIGN §4) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
header, main, footer { position: relative; z-index: 1; }
header.dd-nav { z-index: 20; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--bone); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; padding: 0; }
p, h1, h2, h3, h4, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--measured); outline-offset: 2px; }
[hidden] { display: none !important; }
[aria-disabled="true"] { cursor: default; opacity: .55; }
::selection { background: var(--measured); color: var(--paper); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--gutter); top: calc(8 * var(--u)); z-index: 50; background: var(--bone); color: var(--paper); padding: 8px 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── type classes ───────── */
.t-hero    { font: 700 var(--fs-hero)/1 var(--f-display); letter-spacing: .009em; color: var(--bone); }
.t-title   { font: 700 var(--fs-title)/1 var(--f-display); letter-spacing: .055em; text-transform: uppercase; color: var(--bone); }
.t-section { font: 400 var(--fs-section)/1.05 var(--f-display); letter-spacing: .024em; text-transform: uppercase; color: var(--bone); }
.t-section-sm { font: 400 var(--fs-section-sm)/1.05 var(--f-display); letter-spacing: .024em; text-transform: uppercase; color: var(--bone); }
.t-frame   { font: 700 var(--fs-section-sm)/1 var(--f-display); color: var(--bone); }            /* "F7 · afloat" */
.t-lede    { font: 300 var(--fs-lede)/1.3 var(--f-sans); color: var(--text); }
.t-body    { font: 400 var(--fs-body)/1.5 var(--f-sans); }
.t-cell    { font: 500 var(--fs-cell)/1.35 var(--f-sans); }
.t-label   { font: 500 var(--fs-label)/1.2 var(--f-sans); letter-spacing: -.01em; }
.t-small   { font: 400 var(--fs-small)/1.3 var(--f-sans); color: var(--muted); }
.t-num     { font: 400 var(--fs-num)/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.t-mono    { font-family: var(--f-mono); }
.t-mono-sm { font: 400 var(--fs-small)/1.3 var(--f-mono); }
.t-caps    { text-transform: uppercase; }
.t-big     { font: 500 var(--fs-big)/1 var(--f-mono); }
.t-code    { font: 400 var(--fs-code)/1.45 var(--f-mono); }
.t-cert    { font: 700 var(--fs-cert-title)/1 var(--f-sans); letter-spacing: .023em; text-transform: uppercase; color: var(--cert-ink); }
.is-measured { color: var(--measured-ink); }   /* sign 1 */
.is-declared { color: var(--declared-ink); }   /* sign 2 */
.is-muted { color: var(--muted); }
.is-bone { color: var(--bone); }

/* ───────── ONE PAGE FRAME (every route; route bodies never set max-width, side padding or background) ───────── */
main.frame {
  display: block; min-height: calc(100vh - 208 * var(--u));
  padding: 0 var(--gutter); background: transparent; outline: 0;
}
.frame > * + * { margin-top: var(--gap-section); }
.frame > :first-child { margin-top: calc(18 * var(--u)); }
.frame > :last-child { margin-bottom: var(--gap-section); }
.full { width: 100%; }

/* ───────── NAV (chrome/nav.html @1920: h 82 · pad 0 40 · cols 370 1fr auto · brand gap 18 · links gap 42 · tools gap 24) ───────── */
.dd-nav {
  height: calc(82 * var(--u)); padding: 0 var(--gutter);
  display: grid; grid-template-columns: calc(370 * var(--u)) 1fr auto; align-items: center;
  background: var(--paper); font-family: var(--f-sans); color: var(--text);
}
.dd-nav .brand { display: flex; align-items: center; gap: calc(18 * var(--u)); font: 700 var(--fs-brand)/1 var(--f-display); color: var(--bone); width: max-content; }
.dd-nav .brand img { width: calc(116 * var(--u)); height: calc(60 * var(--u)); object-fit: contain; }
.dd-nav .links { display: flex; align-items: stretch; gap: calc(42 * var(--u)); height: 100%; }
.dd-nav .links a { position: relative; display: flex; align-items: center; font-size: var(--fs-nav); font-weight: 400; color: var(--text); }
.dd-nav .links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(14 * var(--u)); height: max(2px, calc(3 * var(--u)));
  background: var(--measured); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) steps(4, end);
}
.dd-nav .links a.is-active::after { transform: scaleX(1); }
.dd-nav .links a:hover::after { transform: scaleX(.35); }
.dd-nav .links a.is-active:hover::after { transform: scaleX(1); }
.dd-nav .tools { display: flex; align-items: center; gap: calc(24 * var(--u)); font-size: var(--fs-nav); }
.dd-nav .tools a { color: var(--text); cursor: pointer; }
.nav-menu, .nav-drawer { display: none; }

/* waterline sweep under the nav (route change, DESIGN §10 signature 1) */
.waterline-sweep {
  position: fixed; left: 0; right: 0; top: calc(82 * var(--u)); height: var(--rule-waterline-w); z-index: 40;
  background: var(--bone); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none;
}
html.is-sweeping .waterline-sweep { animation: dd-sweep 520ms var(--ease-winch) both; }
@keyframes dd-sweep { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
html.is-routing main.frame { opacity: 0; }
main.frame.is-hauling { animation: dd-haul 280ms steps(4, end) both; }
@keyframes dd-haul { from { transform: translateY(calc(14 * var(--u))); opacity: .2; } to { transform: none; opacity: 1; } }

/* ───────── FOOTER (chrome/footer.html @1920: pad 19 40 16 · mono 14 · waterline 3 + ticks · sentence 14; + brand mark LAW 56) ───────── */
.dd-footer { padding: calc(19 * var(--u)) var(--gutter) calc(16 * var(--u)); background: var(--paper); font-family: var(--f-sans); color: var(--text); }
.dd-footer .top { display: flex; align-items: center; justify-content: space-between; gap: calc(28 * var(--u)); font: 400 var(--fs-foot)/1.3 var(--f-mono); letter-spacing: -.02em; }
.dd-footer .source { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dd-footer .source a:hover, .dd-footer .tools a:hover { color: var(--measured-ink); }
.dd-footer .tools { display: flex; align-items: center; gap: calc(22 * var(--u)); flex: none; }
.dd-footer .tools > * { white-space: nowrap; }
.dd-footer .tools a { cursor: pointer; }
.dd-footer .copy { color: var(--measured-ink); padding: calc(8 * var(--u)) calc(20 * var(--u)); font: 400 var(--fs-foot)/1.3 var(--f-sans); }
.dd-footer .waterline { margin: calc(18 * var(--u)) 0 calc(10 * var(--u)); }
.dd-footer .bottom { display: flex; justify-content: center; align-items: center; gap: calc(16 * var(--u)); font: 500 var(--fs-foot)/1.2 var(--f-sans); color: var(--text); }
.dd-footer .foot-mark { width: auto; height: calc(44 * var(--u)); min-height: 42px; object-fit: contain; }

/* ───────── RULE CLASSES — the ONLY border/outline declarations of the site (DESIGN.md §4b) ───────── */
.rule-panel, .rule-card, .rule-table { border: var(--rule-panel-w) solid var(--rule-panel-c); overflow: hidden; }
.rule-card.is-soft { border-color: var(--rule-soft); }
.rule-row { border-top: var(--rule-row-w) solid var(--rule-row-c); }                  /* lower row draws the shared edge */
.rule-row:first-child { border-top-width: 0; }
.rule-col { border-left: var(--rule-col-w) solid var(--rule-col-c); }                /* right column draws the shared edge */
.rule-col:first-child { border-left-width: 0; }
.rule-hline { border-top: var(--rule-row-w) solid var(--rule-row-c); }               /* divider that always draws */
.rule-vline { border-left: var(--rule-col-w) solid var(--rule-col-c); }
.rule-head { border-bottom: var(--rule-row-w) solid var(--rule-row-c); }             /* header row of a list (the next .rule-row has none: use .rule-rows) */
/* tables: <table class="rule-table rule-grid [has-cols]"> — rows share one edge, outer frame from .rule-table */
table.rule-grid { border-collapse: separate; border-spacing: 0; width: 100%; }
table.rule-grid > thead > tr > *, table.rule-grid > tbody > tr + tr > *, table.rule-grid > thead + tbody > tr:first-child > * { border-top: var(--rule-row-w) solid var(--rule-row-c); }
table.rule-grid > thead > tr:first-child > * { border-top-width: 0; }
table.rule-grid.has-cols > * > tr > * + * { border-left: var(--rule-col-w) solid var(--rule-col-c); }
/* lists: <div class="rule-rows"> children share one edge */
.rule-rows > * + * { border-top: var(--rule-row-w) solid var(--rule-row-c); }
/* input frame wraps the WHOLE control (input + unit + chevron); padding inside the frame */
.rule-input {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); box-sizing: border-box;
  border: var(--rule-input-w) solid var(--rule-input-c); background: transparent; padding: 0 calc(14 * var(--u)); min-height: calc(48 * var(--u));
}
.rule-input > input, .rule-input > select, .rule-input > textarea { border: 0; outline: 0; background: transparent; min-width: 0; flex: 1; padding: calc(10 * var(--u)) 0; appearance: none; -webkit-appearance: none; }
.rule-input:focus-within { border-color: var(--bone); }
.rule-input.is-light { border-color: var(--cert-rule); }
.rule-button { border: var(--rule-button-w) solid var(--rule-button-c); }
.rule-button.is-thin { border-width: max(1px, calc(1 * var(--u))); }
.rule-button.is-bone { border-color: var(--bone); }
.rule-chip { border: var(--rule-chip-w) solid var(--rule-chip-c); }
.rule-chip-on { border: var(--rule-chip-w) solid var(--rule-chip-on-c); }
.rule-chip.is-on { border-color: var(--rule-chip-on-c); }
.rule-selected { box-shadow: inset 0 0 0 var(--rule-select-w) var(--rule-select-c); }  /* selected row frame without touching row edges */
.sel-frame.rule-selected, .bt-sel.rule-selected { box-shadow: none; }
.rule-nav { border-bottom: var(--rule-nav-w) solid var(--rule-nav-c); }
.rule-footer { border-top: var(--rule-footer-w) solid var(--rule-footer-c); }
.rule-drawer { border-top: var(--rule-nav-w) solid var(--rule-nav-c); border-bottom: var(--rule-nav-w) solid var(--rule-nav-c); }
.rule-waterline { position: relative; height: var(--rule-waterline-w); background: var(--rule-waterline-c); }
.rule-waterline::before, .rule-waterline::after { content: ""; position: absolute; top: calc(-11 * var(--u)); width: max(1px, calc(1 * var(--u))); height: calc(25 * var(--u)); background: var(--rule-waterline-c); }
.rule-waterline::before { left: calc(36 * var(--u)); }
.rule-waterline::after { right: calc(36 * var(--u)); }
.rule-waterline.no-ticks::before, .rule-waterline.no-ticks::after { display: none; }
.rule-cert { position: relative; border: var(--rule-cert-w) solid var(--rule-cert-c); }
.rule-cert::before { content: ""; position: absolute; inset: calc(var(--rule-cert-gap) + var(--rule-cert-w)); border: var(--rule-cert-w) solid var(--rule-cert-c); pointer-events: none; }
.rule-cert-grid { border: var(--rule-cert-grid-w) solid var(--rule-cert-grid-c); }
table.rule-cert-grid { border-collapse: separate; border-spacing: 0; width: 100%; }
table.rule-cert-grid > * > tr + tr > *, table.rule-cert-grid > thead + tbody > tr:first-child > * { border-top: var(--rule-cert-grid-w) solid var(--rule-cert-grid-c); }
table.rule-cert-grid > * > tr > * + * { border-left: var(--rule-cert-grid-w) solid var(--rule-cert-grid-c); }
table.rule-cert-grid > thead > tr:last-child > * { border-bottom: var(--rule-cert-w) solid var(--rule-cert-grid-c); }
table.rule-cert-grid > thead + tbody > tr:first-child > * { border-top-width: 0; }
.rule-cert-row { border-top: var(--rule-cert-grid-w) solid var(--rule-cert-grid-c); }
.rule-cert-row:first-child { border-top-width: 0; }
.rule-dashed { border: var(--rule-dashed-w) dashed var(--rule-dashed-c); }
.rule-code { border: var(--rule-panel-w) solid var(--rule-panel-c); }
/* adjacent boxes never both draw the shared edge */
.rule-join-top { border-top-width: 0 !important; }
.rule-join-left { border-left-width: 0 !important; }
.rule-join-bottom { border-bottom-width: 0 !important; }
.rule-join-right { border-right-width: 0 !important; }

/* ───────── shared components (DESIGN.md §5) ───────── */
.panel { background: var(--paper); padding: var(--pad-panel); }
.page-head { display: grid; gap: calc(12 * var(--u)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  min-height: calc(48 * var(--u)); padding: 0 calc(24 * var(--u)); font: 500 var(--fs-body)/1 var(--f-sans);
  color: var(--measured-ink); background: transparent; position: relative; isolation: isolate; overflow: hidden; white-space: nowrap;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--measured); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) steps(6, end); }
.btn:hover::before, .btn.is-fill::before { transform: scaleX(1); }
.btn:hover, .btn.is-fill { color: var(--paper); }
.btn.is-fill { font-weight: 700; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.chip { display: inline-flex; align-items: center; justify-content: center; min-height: calc(46 * var(--u)); padding: 0 calc(22 * var(--u)); font: 500 var(--fs-body)/1 var(--f-sans); color: var(--text); background: transparent; }
.chip.is-on { color: var(--declared-ink); }
.chip.is-fill { background: var(--measured); color: var(--paper); font-weight: 700; }
.status { display: inline-flex; align-items: center; justify-content: center; min-height: calc(44 * var(--u)); padding: 0 calc(22 * var(--u)); font: 400 var(--fs-num)/1 var(--f-mono); color: var(--declared-ink); }
.status.is-fill { background: var(--declared); color: var(--paper); }
.dd-table { width: 100%; font: 500 var(--fs-cell)/1.35 var(--f-sans); }
.dd-table th { text-align: left; font: 500 var(--fs-label)/1.2 var(--f-sans); color: var(--text); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.dd-table td { padding: calc(11 * var(--u)) calc(14 * var(--u)); vertical-align: middle; }
.dd-table td.num, .dd-table .num { font-family: var(--f-mono); font-weight: 400; }
.dd-table tr.is-selected > td { background: var(--row-select); }
.code { background: var(--code-bg); color: var(--code-ink); font: 400 var(--fs-code)/1.5 var(--f-mono); padding: calc(18 * var(--u)) calc(22 * var(--u)); overflow-x: auto; white-space: pre; }
.code .k { color: var(--declared-ink); } .code .s, .code .n { color: var(--measured-ink); } .code .c { color: #7F8C9A; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.art { position: relative; }
.art > img, .art > video { width: 100%; height: 100%; object-fit: contain; }
.hover-row { position: relative; }
.hover-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: max(2px, calc(3 * var(--u))); background: var(--measured); transform: scaleY(0); transform-origin: top; transition: transform var(--t-fast) steps(3, end); }
.hover-row:hover::before, .hover-row:focus-within::before { transform: scaleY(1); }
.hover-row:hover > td, .hover-row:hover { background-color: var(--row-select-soft); }

/* ───────── MOTION (DESIGN.md §10) — transform / opacity only; all off under reduced motion ───────── */
/* haul (reveal-on-scroll): the block is winched up in 4 ratchet steps, never a soft fade-up */
[data-haul] { opacity: 0; transform: translateY(calc(18 * var(--u))); }
[data-haul].is-hauled { opacity: 1; transform: none; transition: transform var(--t-mid) steps(4, end), opacity var(--t-fast) linear; transition-delay: var(--haul-delay, 0ms); }
/* grow (bars, rulers): fill frame by frame like the scrubber, 8 steps */
[data-grow] { transform: scaleX(0); transform-origin: left; }
[data-grow="y"] { transform: scaleY(0); transform-origin: bottom; }
[data-grow].is-grown { transform: none; transition: transform var(--t-slow) steps(8, end); transition-delay: var(--haul-delay, 0ms); }
/* needle (gauge): swings to its value in 8 frame steps; set --needle: <deg> on the element */
[data-needle] { transform: rotate(var(--needle-from, -90deg)); transform-box: fill-box; transform-origin: var(--needle-origin, 50% 100%); }
[data-needle].is-grown { transform: rotate(var(--needle, 0deg)); transition: transform var(--t-slow) steps(8, end); }
/* stamp (FILED): drops 1.15 → 1 */
[data-stamp] { opacity: 0; transform: scale(1.15); }
[data-stamp].is-stamped { opacity: 1; transform: none; transition: transform 180ms var(--ease-winch), opacity 120ms linear; }
/* live tick (head block changed): the numeral plate is swapped, a measured bar crosses under it */
.is-tick { display: inline-block; position: relative; animation: dd-plate 240ms steps(2, end); }
.is-tick::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: max(1px, calc(2 * var(--u))); background: var(--measured); transform-origin: left; animation: dd-tick 700ms var(--ease-winch) both; }
@keyframes dd-plate { from { transform: translateY(-45%); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes dd-tick { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* scrubber frames: dim until reached */
[data-frame-line] { transition: opacity var(--t-fast) steps(2, end); }
[data-frame-line].is-ahead { opacity: .32; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-haul], [data-grow], [data-stamp] { opacity: 1 !important; transform: none !important; }
  [data-needle] { transform: rotate(var(--needle, 0deg)) !important; }
  html.is-routing main.frame { opacity: 1; }
  .waterline-sweep { display: none; }
}

/* ───────── MOBILE (<1024: --u = 0.75px, 16px gutters, drawer nav; routes stack their columns) ───────── */
@media (max-width: 1023px) {
  :root { --gutter: 16px; --gap-section: 40px; --fs-hero: 40px; --fs-title: 36px; --fs-section: 26px; --fs-section-sm: 22px; --fs-big: 32px; --fs-cert-title: 24px; --fs-lede: 16px; --fs-body: 15px; --fs-cell: 14px; --fs-num: 14px; --fs-code: 13px; --fs-label: 13px; --fs-small: 12px; --fs-nav: 16px; --fs-foot: 12px; --fs-brand: 22px; }
  .dd-nav { height: 64px; grid-template-columns: 1fr auto; padding: 0 var(--gutter); }
  .dd-nav .brand { gap: 12px; }
  .dd-nav .brand img { width: 78px; height: 42px; }
  .dd-nav .links, .dd-nav .tools { display: none; }
  .nav-menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; color: var(--measured-ink); font: 500 15px/1 var(--f-sans); }
  .nav-menu .bars { width: 18px; height: 12px; background: linear-gradient(currentColor 0 0) top/100% 2px no-repeat, linear-gradient(currentColor 0 0) center/100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat; }
  .nav-drawer:not([hidden]) { display: grid; position: absolute; left: 0; right: 0; top: 64px; z-index: 30; background: var(--paper); padding: 8px var(--gutter) 16px; }
  .nav-drawer a { display: flex; align-items: center; min-height: 48px; font: 400 17px/1 var(--f-sans); color: var(--text); }
  .nav-drawer a.is-active { color: var(--measured-ink); }
  .nav-drawer .drawer-tools { display: flex; gap: 24px; padding-top: 8px; }
  .waterline-sweep { top: 64px; }
  .frame > :first-child { margin-top: 16px; }
  .dd-footer { padding: 20px var(--gutter) 18px; }
  .dd-footer .top { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dd-footer .source { white-space: normal; }
  .dd-footer .tools { flex-wrap: wrap; gap: 16px; }
  .dd-footer .copy { padding: 8px 16px; }
  .dd-footer .waterline { margin: 16px 0 12px; }
  .dd-footer .waterline::before { left: 12px; } .dd-footer .waterline::after { right: 12px; }
  .dd-footer .bottom { justify-content: flex-start; text-align: left; }
  .dd-footer .foot-mark { height: 42px; }
  .btn, .chip { min-height: 44px; }
  .rule-input { min-height: 44px; }
}