/* ADVICE — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5 + §10 MOTION. Design width 1920.
   Every size is calc(N * var(--u)) where N = CSS px at 1920 (mockup px × 1.148). --u is set in index.html
   (viewport / 1920 from 1024 up, 0.75px below). Text never below 12px. No max-width cap anywhere.
   BORDERS (LUAT 56): this file is the ONLY place that draws borders/outlines. Route bodies use the .rule-* classes. */

@font-face { font-family: 'Anonymous Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/anonymous-pro-400.woff2') format('woff2'); }
@font-face { font-family: 'Anonymous Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/anonymous-pro-700.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/instrument-serif-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/instrument-serif-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Mukta'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/mukta-400.woff2') format('woff2'); }
@font-face { font-family: 'Mukta'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/mukta-500.woff2') format('woff2'); }
@font-face { font-family: 'Mukta'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/mukta-600.woff2') format('woff2'); }
@font-face { font-family: 'Mukta'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/mukta-700.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('assets/fonts/roboto-mono-400-500.woff2') format('woff2'); }

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

  /* colour tokens (DESIGN §3) */
  --paper: #BDDBFD;          /* page ground, nav band, footer band — one flat colour */
  --surface: #E0EEFE;        /* advice slips, inputs, code blocks, open tray row */
  --surface-2: #EDF4FD;      /* framed panels on inner routes */
  --ink: #011A7A;            /* display type, slip values, primary text */
  --ink-2: #1A3B93;          /* body, labels, table text */
  --primary: #163D8F;        /* filled buttons + the selected segment */
  --on-primary: #FFFFFF;
  --received: #DB3B9F;       /* RECEIVED · delivered · matches · signature valid · open row */
  --review: #ECAC50;         /* does not match · failed · retrying · merged 18-dec value */
  --review-ink: #8A5200;     /* amber words on light ground (text contrast), same hue family */
  --review-tint: #FBE7CA;
  --advice-rule: linear-gradient(90deg, #DB3B9F 0%, #ECAC50 100%);   /* ONLY under an open slip's fax header + agent wire */
  /* chrome (chrome/nav.html + footer.html, verbatim; band colour → --paper per DESIGN §9 #2) */
  --chrome-ink: #153454;
  --chrome-rule: #315B88;
  --chrome-split: #7696B8;

  /* rule tokens (DESIGN §4 + §4b) — width + colour per rule kind; hairlines never below 1px */
  --rule-w1: max(1px, calc(1 * var(--u)));
  --rule-w2: max(1px, calc(2 * var(--u)));
  --rule-w3: max(2px, calc(3 * var(--u)));
  --rule-w4: max(3px, calc(4 * var(--u)));
  --rule-frame: #86B3F8;     /* panels, slips, inputs, code blocks, emitter cards, flow steps */
  --rule-row: #A9CDF8;       /* table + field row rules, column dividers, match cells */
  --rule-soft: #B1D4FA;      /* agent rows, state cards, rail, strips */
  --rule-control: #395D9F;   /* outline buttons, kind tabs, verdict box, notice */
  --rule-page: #416A95;      /* page-level full-width rules */

  /* fonts (DESIGN §2) */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Mukta', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
  --font-chrome-mono: 'Anonymous Pro', ui-monospace, monospace;   /* footer source line only */

  /* type scale @1920 (USER FIX TYPE: real desktop sizes; layout keeps the mockup geometry) */
  --fs-hero: max(32px, calc(56 * var(--u)));
  --fs-route: max(30px, calc(60 * var(--u)));
  --fs-slip: max(32px, calc(64 * var(--u)));
  --fs-section: max(24px, calc(38 * var(--u)));
  --fs-panel: max(20px, calc(30 * var(--u)));
  --fs-lede: max(15px, calc(18 * var(--u)));
  --fs-body: max(13px, calc(16 * var(--u)));
  --fs-table: max(12px, calc(15 * var(--u)));
  --fs-label: max(12px, calc(15 * var(--u)));
  --fs-value: max(13px, calc(16 * var(--u)));
  --fs-big: max(24px, calc(44 * var(--u)));
  --fs-kicker: max(12px, calc(13 * var(--u)));
  --fs-fax: max(12px, calc(13 * var(--u)));
  --fs-meta: max(12px, calc(13 * var(--u)));
  --fs-nav: max(12px, calc(15 * var(--u)));

  /* ONE PAGE FRAME (LUAT 53 · USER FIX U1): gutters 56 / 54 @1920, container 1810 */
  --gutter-l: calc(56 * var(--u));
  --gutter-r: calc(54 * var(--u));
  --nav-h: calc(88 * var(--u));
  --section-gap: calc(80 * var(--u));      /* WEB_RULES #22: 48–96 */
  --radius: calc(6 * var(--u));

  /* motion family (DESIGN §10 — "the fax feeds, the clerk stamps") */
  --ease-feed: cubic-bezier(.3, 0, .1, 1);
  --t-field: 60ms;
  --t-stamp: 180ms;
  --t-feed: 240ms;
  --t-print: 360ms;
  --t-count: 600ms;
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: hidden; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--paper); color: var(--ink-2);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.45;
  overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea {
  font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; margin: 0; padding: 0;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .55; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--primary); outline-offset: max(2px, calc(2 * var(--u))); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; }
.rule-input:focus-within { box-shadow: 0 0 0 max(1px, calc(2 * var(--u))) var(--primary); }
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; text-align: left; font-weight: inherit; padding: 0; }
.mono, code, pre { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }
pre { margin: 0; overflow-x: auto; white-space: pre; }
[hidden] { display: none !important; }
::selection { background: var(--primary); color: var(--on-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── NAV (chrome/nav.html verbatim, sizes × --u; no CA / BUY in the header — user rule) ───────── */
.adv-nav {
  position: relative; z-index: 20; flex: none;
  height: var(--nav-h); padding: 0 calc(48 * var(--u));
  display: flex; align-items: center; gap: calc(22 * var(--u));
  background: var(--paper); color: var(--chrome-ink);
  font-family: var(--font-body); font-size: var(--fs-nav);
}
.adv-nav a { text-decoration: none; white-space: nowrap; }
.adv-nav .brand {
  height: var(--nav-h); display: flex; align-items: center; gap: calc(10 * var(--u)); padding-right: calc(12 * var(--u));
  font-weight: 700; font-size: max(18px, calc(25 * var(--u))); letter-spacing: calc(.4 * var(--u));
}
.adv-nav .brand img { width: max(40px, calc(52 * var(--u))); height: max(40px, calc(52 * var(--u))); object-fit: contain; }
.adv-nav .links { height: var(--nav-h); display: flex; align-items: center; gap: calc(30 * var(--u)); flex: 1; }
.adv-nav .route { height: var(--nav-h); display: grid; place-items: center; position: relative; font-weight: 500; transition: color var(--t-feed) var(--ease-feed); }
.adv-nav .route::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(13 * var(--u)); height: max(2px, calc(2 * var(--u)));
  background: var(--chrome-ink); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-feed) var(--ease-feed);
}
.adv-nav .route:hover::after { transform: scaleX(.35); }
.adv-nav .route.is-active { font-weight: 700; }
.adv-nav .route.is-active::after { transform: scaleX(1); }
.adv-nav .actions { display: flex; align-items: center; gap: calc(18 * var(--u)); }
.social { min-width: calc(24 * var(--u)); text-align: center; text-decoration: none; cursor: pointer; }
.social[aria-disabled="true"] { cursor: default; opacity: .9; }
.social:not([aria-disabled="true"]):hover { text-decoration: underline; text-underline-offset: .2em; }
/* route change: a new page comes off the machine — the advice-rule runs once along the nav rule */
.adv-feed {
  position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule-w1)); height: max(2px, calc(3 * var(--u)));
  background: var(--advice-rule); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none;
}
.nav-menu { display: none; }
.nav-drawer { display: none; }

/* ───────── ONE PAGE FRAME (LUAT 53) — the only container; routes never set width, side padding or ground ───────── */
main.page {
  flex: 1; width: 100%;
  padding: 0 var(--gutter-r) 0 var(--gutter-l);
  background: transparent;
  display: flex; flex-direction: column;
}
main.page > * { width: 100%; }
main.page.is-leaving { opacity: .6; transition: opacity 200ms linear; }
.page-section { position: relative; }
.page-section + .page-section { margin-top: var(--section-gap); }
.page-start { padding-top: calc(36 * var(--u)); }
.page-end { padding-bottom: calc(72 * var(--u)); }

/* ───────── FOOTER (chrome/footer.html verbatim, sizes × --u; no CA block — USER REVIEW R1 28/09) ───────── */
.adv-footer {
  flex: none; min-height: calc(168 * var(--u)); padding: calc(24 * var(--u)) calc(48 * var(--u)) calc(20 * var(--u));
  display: grid; grid-template-columns: calc(250 * var(--u)) 1fr auto; grid-template-rows: calc(62 * var(--u)) calc(48 * var(--u));
  align-items: center; column-gap: calc(28 * var(--u));
  background: var(--paper); color: var(--chrome-ink); font-family: var(--font-body);
}
.adv-footer .brand { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: max(18px, calc(26 * var(--u))); font-weight: 700; height: calc(56 * var(--u)); }
.adv-footer .brand img { width: max(40px, calc(54 * var(--u))); height: max(40px, calc(54 * var(--u))); object-fit: contain; }
.adv-footer .voice { font-size: max(13px, calc(17 * var(--u))); }
.adv-footer .actions { display: flex; align-items: center; gap: calc(18 * var(--u)); font-size: var(--fs-nav); }
.adv-footer .buy {
  height: calc(46 * var(--u)); min-height: 32px; padding: 0 calc(18 * var(--u)); display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.key-copy { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; margin-left: calc(6 * var(--u)); }
.adv-footer .source {
  grid-column: 1 / 4; align-self: end; display: grid; grid-template-columns: 1fr auto; gap: calc(24 * var(--u));
  padding-top: calc(12 * var(--u)); font-family: var(--font-chrome-mono); font-size: max(12px, calc(12 * var(--u)));
}

/* ───────── type roles (routes use these, never their own sizes for the same role) ───────── */
.t-hero { font: 400 var(--fs-hero)/1.05 var(--font-display); color: var(--ink); }
.t-route { font: 400 var(--fs-route)/1 var(--font-display); color: var(--ink); }
.t-slip { font: 400 var(--fs-slip)/.95 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-transform: lowercase; }
.t-section { font: 400 var(--fs-section)/1.05 var(--font-display); color: var(--ink); }
.t-panel { font: 400 var(--fs-panel)/1.1 var(--font-display); color: var(--ink); }
.t-big { font: 400 var(--fs-big)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.t-lede { font: 400 var(--fs-lede)/1.4 var(--font-body); color: var(--ink-2); }
.t-body { font: 400 var(--fs-body)/1.5 var(--font-body); color: var(--ink-2); }
.t-label { font: 400 var(--fs-label)/1.4 var(--font-body); color: var(--ink-2); }
.t-ui { font: 600 var(--fs-body)/1.2 var(--font-body); }
.t-th { font: 500 var(--fs-kicker)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.t-kicker { font: 400 var(--fs-kicker)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.t-value { font: 500 var(--fs-value)/1.3 var(--font-mono); letter-spacing: -0.03em; color: var(--ink); font-feature-settings: "tnum" 1; }
.t-num { font: 400 var(--fs-table)/1.3 var(--font-mono); color: var(--ink-2); font-feature-settings: "tnum" 1; }
.t-fax { font: 400 var(--fs-fax)/1.2 var(--font-mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-meta { font: 400 var(--fs-meta)/1.35 var(--font-body); color: var(--ink-2); }
.c-ink { color: var(--ink); } .c-ink-2 { color: var(--ink-2); }
.c-received { color: var(--received); } .c-review { color: var(--review-ink); }
.is-received { color: var(--received); } .is-review { color: var(--review-ink); }

/* ───────── controls ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  min-height: max(36px, calc(52 * var(--u))); padding: 0 calc(26 * var(--u)); border-radius: var(--radius);
  font: 600 var(--fs-body)/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-feed) var(--ease-feed), color var(--t-feed) var(--ease-feed);
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: #0F2F73; }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--surface); }
.btn-sm { min-height: max(30px, calc(40 * var(--u))); padding: 0 calc(16 * var(--u)); font-size: var(--fs-table); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.field { display: flex; align-items: center; min-height: max(40px, calc(60 * var(--u))); padding: 0 calc(20 * var(--u)); border-radius: var(--radius); background: var(--surface); }
.field input, .field select, .field textarea { flex: 1; min-width: 0; height: 100%; font: 400 var(--fs-value)/1.3 var(--font-mono); color: var(--ink); }
.seg { display: inline-flex; border-radius: var(--radius); overflow: hidden; }
.seg > * { min-height: max(30px, calc(44 * var(--u))); padding: 0 calc(22 * var(--u)); display: inline-flex; align-items: center; font: 500 var(--fs-table)/1 var(--font-body); color: var(--ink); background: transparent; transition: background-color var(--t-feed) var(--ease-feed), color var(--t-feed) var(--ease-feed); }
.seg > .is-active, .seg > [aria-selected="true"], .seg > [aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); min-height: max(26px, calc(36 * var(--u))); padding: 0 calc(14 * var(--u)); border-radius: var(--radius); font: 500 var(--fs-table)/1 var(--font-body); }
.chip-review { background: var(--review-tint); color: var(--review-ink); }
.slip { background: var(--surface); border-radius: var(--radius); }
.panel { background: var(--surface-2); border-radius: var(--radius); }
.code { background: var(--surface); border-radius: var(--radius); font: 400 var(--fs-table)/1.55 var(--font-mono); color: var(--ink); padding: calc(18 * var(--u)) calc(20 * var(--u)); overflow-x: auto; }
/* the fax header line + advice-rule under it (THE ADVICE SLIP) */
.fax-line { display: flex; gap: calc(10 * var(--u)); align-items: baseline; }
.advice-rule { display: block; height: max(2px, calc(3 * var(--u))); background: var(--advice-rule); transform-origin: left center; }
/* the RECEIVED stamp: double-framed rectangle, rotated (drawn by .rule-stamp) */
.stamp { display: inline-block; padding: calc(8 * var(--u)) calc(18 * var(--u)); color: var(--received); font: 700 max(16px, calc(30 * var(--u)))/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-12deg); }
/* open row / hover bar (dense table + tray) — a magenta bar grows on the left */
.row-bar { position: relative; }
.row-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: max(3px, calc(4 * var(--u))); background: var(--received); transform: scaleY(0); transform-origin: center; transition: transform 160ms var(--ease-feed); }
.row-bar:hover::before { transform: scaleY(.5); }
.row-bar.is-open::before, .row-bar[aria-expanded="true"]::before { transform: scaleY(1); }
.row-bar.is-open, .row-bar[aria-expanded="true"] { background: var(--surface); }
.dot { display: inline-block; width: max(8px, calc(10 * var(--u))); height: max(8px, calc(10 * var(--u))); border-radius: 50%; background: currentColor; }
/* live block number: digits roll on change */
.ticks { display: inline-block; }
.is-ticking { animation: adv-tick var(--t-stamp) var(--ease-feed); }
@keyframes adv-tick { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────── BORDER CLASSES (DESIGN §4b · BORDER_TABLE.md) — one class per framed component ─────────
   Widths from the table only: frames 2.3 px → --rule-w2 · row/page rules 1.1 px → --rule-w1 · 2.3 px row rules → --rule-w2.
   Adjacent framed boxes: wrap them in .rule-joined so the shared edge is drawn ONCE. A frame around an input wraps the
   whole control: put .rule-input on the wrapper (.field), the <input> inside has no frame. */
.rule-page { border-bottom: var(--rule-w1) solid var(--chrome-rule); }          /* nav band bottom (chrome #315B88) */
.rule-page-top { border-top: var(--rule-w1) solid var(--chrome-rule); }         /* footer band top (chrome) */
.rule-chrome-split { border-right: var(--rule-w1) solid var(--chrome-split); }  /* footer brand | voice */
.rule-chrome-source { border-top: var(--rule-w1) solid var(--chrome-split); }   /* footer source line */
.rule-chrome-ca { border: var(--rule-w1) solid var(--chrome-ink); border-radius: var(--radius); }
.rule-section { border-bottom: var(--rule-w1) solid var(--rule-page); }         /* section rule across the container */
.rule-section-top { border-top: var(--rule-w1) solid var(--rule-page); }
/* frames — rule-frame #86B3F8, 2 px */
.rule-panel { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-slip { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-input { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-select { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-code { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-emitter { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }   /* emitter card / strip / mini */
.rule-flow-step { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-wire-node { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-report { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }    /* transmission report sheet / one-row report */
.rule-chip { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-thin { border: var(--rule-w1) solid var(--rule-frame); border-radius: var(--radius); }      /* 1.1 px frames (outgoing slip, 2nd emitter card) */
/* controls — rule-control #395D9F, 2 px */
.rule-button { border: var(--rule-w2) solid var(--rule-control); border-radius: var(--radius); }
.rule-copy { border: var(--rule-w2) solid var(--rule-control); border-radius: var(--radius); }
.rule-tab { border: var(--rule-w2) solid var(--rule-control); border-radius: var(--radius); }     /* kind tabs (Webhook / Slack / …) */
.rule-verdict { border: var(--rule-w2) solid var(--rule-control); border-radius: var(--radius); }
.rule-notice { border: var(--rule-w2) solid var(--rule-control); border-radius: var(--radius); }
/* segmented control: one outer frame + inner dividers, never a doubled edge */
.rule-segmented { border: var(--rule-w2) solid var(--rule-frame); border-radius: var(--radius); }
.rule-segmented > * + * { border-left: var(--rule-w2) solid var(--rule-frame); }
.rule-segmented > .is-active, .rule-segmented > [aria-selected="true"], .rule-segmented > [aria-pressed="true"] { box-shadow: 0 0 0 var(--rule-w2) var(--primary); position: relative; z-index: 1; }
/* meaning-coloured frames */
.rule-chip-review { border: var(--rule-w2) solid var(--review); border-radius: var(--radius); }
.rule-chip-received { border: var(--rule-w2) solid var(--received); border-radius: var(--radius); }
.rule-notice-review { border: var(--rule-w2) solid var(--review); border-radius: var(--radius); }
.rule-stamp { border: var(--rule-w3) solid var(--received); outline: var(--rule-w3) solid var(--received); outline-offset: max(2px, calc(4 * var(--u))); }
/* soft frames — rule-soft #B1D4FA, 2 px */
.rule-soft { border: var(--rule-w2) solid var(--rule-soft); border-radius: var(--radius); }
.rule-state-card { border: var(--rule-w2) solid var(--rule-soft); border-radius: var(--radius); }
.rule-strip { border: var(--rule-w2) solid var(--rule-soft); border-radius: var(--radius); }
.rule-rail { border: var(--rule-w2) solid var(--rule-soft); border-radius: var(--radius); }
/* rows + dividers — rule-row #A9CDF8 */
.rule-row { border-bottom: var(--rule-w1) solid var(--rule-row); }
.rule-row-strong { border-bottom: var(--rule-w2) solid var(--rule-row); }
.rule-row-soft { border-bottom: var(--rule-w2) solid var(--rule-soft); }
.rule-row-top { border-top: var(--rule-w1) solid var(--rule-row); }
.rule-match-cell { border: var(--rule-w2) solid var(--rule-row); border-radius: var(--radius); }
.rule-divider { border-left: var(--rule-w1) solid var(--rule-row); }
.rule-divider-strong { border-left: var(--rule-w1) solid var(--rule-page); }     /* home tray | open slip vertical rule */
.rule-cols > * + * { border-left: var(--rule-w1) solid var(--rule-row); }       /* 3 × 1fr blocks with 1 px dividers */
.rule-rows > * + * { border-top: var(--rule-w1) solid var(--rule-row); }        /* stacked rows inside a frame */
/* dense table: header rule 2 px, body rules 1 px, no side frame */
.rule-table thead th, .rule-table .thead > * { border-bottom: var(--rule-w2) solid var(--rule-row); }
.rule-table tbody tr, .rule-table .tr { border-bottom: var(--rule-w1) solid var(--rule-row); }
.rule-table-soft thead th { border-bottom: var(--rule-w2) solid var(--rule-soft); }
.rule-table-soft tbody tr { border-bottom: var(--rule-w2) solid var(--rule-soft); }
/* joined boxes: children draw every edge except the one they share with the previous sibling */
.rule-joined { display: flex; }
.rule-joined > * + * { border-left-width: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rule-joined > *:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rule-joined-v { display: flex; flex-direction: column; }
.rule-joined-v > * + * { border-top-width: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rule-joined-v > *:not(:last-child) { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* mobile menu (shell only) */
.rule-menu { border: var(--rule-w1) solid var(--chrome-ink); border-radius: var(--radius); }

/* ───────── motion hooks (DESIGN §10) — rest state is always the final state ───────── */
.print-head { position: absolute; left: 0; right: 0; top: 0; height: max(2px, calc(2 * var(--u))); background: var(--advice-rule); pointer-events: none; opacity: 0; z-index: 2; }
.is-printing { position: relative; }
[data-draw] { transform-origin: left center; }
[data-grow] { transform-origin: left center; }

/* ───────── below 1024: mobile layout (390 no horizontal scroll) ───────── */
@media (max-width: 1023.98px) {
  :root { --gutter-l: 16px; --gutter-r: 16px; --nav-h: 60px; --section-gap: 48px; }
  .adv-nav { padding: 0 16px; gap: 12px; }
  .adv-nav .brand { font-size: 20px; padding-right: 0; }
  .adv-nav .brand img { width: 40px; height: 40px; }
  .adv-nav .links, .adv-nav .actions { display: none; }
  .nav-menu {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 40px; padding: 0 14px;
    font: 600 14px/1 var(--font-body); color: var(--chrome-ink);
  }
  .nav-menu-bars { width: 16px; height: 10px; background: linear-gradient(currentColor 0 0) top/100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat; position: relative; }
  .nav-menu-bars::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: currentColor; }
  .nav-drawer:not([hidden]) {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
    padding: 8px 16px 16px; background: var(--paper); z-index: 30;
  }
  .nav-drawer .route { display: block; height: auto; padding: 12px 0; font: 500 16px/1.2 var(--font-body); color: var(--chrome-ink); text-decoration: none; }
  .nav-drawer .route::after { display: none; }
  .nav-drawer .route.is-active { font-weight: 700; }
  .nav-drawer .route.is-active::before { content: ""; display: inline-block; width: 4px; height: 1em; margin-right: 10px; vertical-align: -2px; background: var(--received); }
  .drawer-actions { display: flex; gap: 20px; padding-top: 12px; font: 500 15px/1 var(--font-body); color: var(--chrome-ink); }
  .adv-footer { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 14px; padding: 24px 16px 20px; }
  .adv-footer .brand { height: auto; }
  .adv-footer .rule-chrome-split { border-right: 0; }
  .adv-footer .voice { font-size: 15px; }
  .adv-footer .actions { flex-wrap: wrap; font-size: 14px; }
  .adv-footer .buy { height: 40px; }
  .adv-footer .source { grid-column: 1; grid-template-columns: 1fr; gap: 6px; overflow-wrap: anywhere; }
  .page-start { padding-top: 24px; }
  .page-end { padding-bottom: 48px; }
  .t-fax { white-space: normal; }
  .rule-joined { flex-wrap: wrap; }
}

/* ───────── reduced motion: everything off ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}