/* TELEX — shell stylesheet (tokens · page scale · page frame · chrome · rule classes · motion).
   Source of truth: product/website/mockup/v1/DESIGN.md (§0–§5, §4b border table, §10 motion) + mockup/v1/chrome/*.html.
   Page scale (LUAT 50): --u = 1 css px of the 1920 mockup (set in index.html from the viewport width; 0.75px below 1024).
   Every size in the site is written calc(N * var(--u)); type never below 12px; hairlines never below 1px.
   BORDERS (LUAT 56): route files contain ZERO border/outline declarations — they use the .rule-* classes below. */

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

  /* colour tokens (DESIGN §3) */
  --paper: #F3EDCA;
  --paper-hi: #FCE5B8;
  --ink: #070706;
  --hole: #17130F;
  --muted-ink: #64614E;
  --muted: #6E6A56;
  --faint: #928B6E;
  --orange: #F9612F;
  --blue: #339EEE;
  --rule-dash-c: #6E7362;
  /* chrome colours = chrome/nav.html + footer.html verbatim (the mockup nav/footer were rendered from them) */
  --chrome-ink: #1D1B12;
  --chrome-accent: #F26419;
  --chrome-muted: #6A634A;

  /* fonts (DESIGN §2, measured) */
  --font-display: 'DM Mono', ui-monospace, monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-ui: 'Hanken Grotesk', system-ui, sans-serif;

  /* rules (DESIGN §4 / §4b — three measured weights; hairlines never vanish) */
  --rule-hair: max(1px, calc(1.1 * var(--u)));
  --rule: max(1px, calc(2.3 * var(--u)));
  --rule-heavy: max(2px, calc(4 * var(--u)));
  --rule-tab: max(2px, calc(4.8 * var(--u)));
  --rule-dash: max(1px, calc(1.2 * var(--u)));
  --rule-dash-heavy: max(2px, calc(3.1 * var(--u)));
  --rule-double-gap: calc(16 * var(--u));

  /* page frame (DESIGN §0 + USER_FIXES: gutters 70 / 59 @1920, container 1791, no sidebar) */
  --gutter-l: calc(70 * var(--u));
  --gutter-r: calc(59 * var(--u));
  --nav-h: calc(120 * var(--u));

  /* motion family (DESIGN §10) */
  --pitch: calc(32 * var(--u));
  --t-tick: 30ms;
  --t-feed: 120ms;
  --t-slide: 200ms;
  --t-tear: 260ms;
  --t-count: 600ms;
  --ease-platen: cubic-bezier(.2, 0, 0, 1);

  /* type scale @1920 (DESIGN §2); max(12px, …) keeps text legible at 1280 */
  --fs-hero: max(24px, calc(49 * var(--u)));
  --fs-title: max(22px, calc(46 * var(--u)));
  --fs-section: max(18px, calc(34 * var(--u)));
  --fs-num: max(15px, calc(24 * var(--u)));
  --fs-answerback: max(13px, calc(21 * var(--u)));
  --fs-body: max(12px, calc(18 * var(--u)));
  --fs-cell: max(12px, calc(17 * var(--u)));
  --fs-ui: max(12px, calc(16 * var(--u)));
  --fs-small: max(12px, calc(13 * var(--u)));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-body); line-height: 1.4;
  font-variant-numeric: tabular-nums; overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; padding: 0; border: 0; border-radius: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
td, th { font-variant-numeric: tabular-nums; text-align: left; font-weight: 400; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: max(2px, calc(2.3 * var(--u))) solid var(--orange); outline-offset: 2px; }

/* ───────── ONE PAGE FRAME (LUAT 53) — every route renders inside this; routes never set max-width / side padding / ground ───────── */
main.page-frame {
  flex: 1; width: 100%;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: var(--paper);
}

/* ───────── typography helpers (DESIGN §2) ───────── */
.t-hero { font: 500 var(--fs-hero)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0; margin: 0; }
.t-title { font: 500 var(--fs-title)/1.1 var(--font-display); text-transform: uppercase; margin: 0; }
.t-section { font: 500 var(--fs-section)/1.15 var(--font-display); text-transform: uppercase; margin: 0; }
.t-num { font: 500 var(--fs-num)/1.4 var(--font-mono); letter-spacing: .018em; font-variant-numeric: tabular-nums; }
.t-answerback { font: 400 var(--fs-answerback)/1.35 var(--font-mono); letter-spacing: -.02em; }
.t-body { font: 400 var(--fs-body)/1.45 var(--font-mono); }
.t-cell { font: 400 var(--fs-cell)/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.t-ui { font: 400 var(--fs-ui)/1.2 var(--font-ui); letter-spacing: -.027em; }
.t-small { font: 400 var(--fs-small)/1.5 var(--font-mono); }
.c-muted { color: var(--muted); } .c-muted-ink { color: var(--muted-ink); } .c-faint { color: var(--faint); }
.c-wire, .c-acsc { color: var(--orange); } .c-hold, .c-rjct { color: var(--blue); }

/* ───────── NAV (chrome/nav.html verbatim, scaled; CA + BUY removed by user rule) ───────── */
.tx-nav {
  width: 100%; height: var(--nav-h); padding: 0 calc(48 * var(--u));
  display: grid; grid-template-columns: calc(290 * var(--u)) 1fr auto; align-items: center; gap: calc(34 * var(--u));
  background: var(--paper); color: var(--chrome-ink);
  font: max(12px, calc(15 * var(--u))) var(--font-ui); position: relative; z-index: 20;
}
.tx-nav .brand { display: flex; align-items: center; gap: calc(15 * var(--u)); color: var(--chrome-ink); text-decoration: none;
  font-size: max(18px, calc(28 * var(--u))); font-weight: 600; letter-spacing: .12em; }
.tx-nav .brand img { width: calc(62 * var(--u)); height: calc(48 * var(--u)); object-fit: contain; }
.tx-nav .routes { display: flex; align-items: center; gap: calc(38 * var(--u)); white-space: nowrap; }
.tx-nav .routes a, .tx-nav .actions a { color: var(--chrome-ink); text-decoration: none; }
.tx-nav .actions { display: flex; align-items: center; gap: calc(28 * var(--u)); white-space: nowrap; }
.nav-menu, .nav-drawer { display: none; }
[data-launch-link][aria-disabled="true"] { cursor: default; }

/* ───────── FOOTER (chrome/footer.html verbatim, scaled; + brand mark (LUAT 56); CA shows TBA until launch.json) ───────── */
.tx-footer {
  width: 100%; min-height: calc(168 * var(--u)); padding: calc(20 * var(--u)) calc(48 * var(--u));
  display: grid; grid-template-columns: calc(260 * var(--u)) 1fr; align-items: center; gap: calc(34 * var(--u));
  background: var(--paper); color: var(--chrome-ink);
  font: max(12px, calc(13 * var(--u))) var(--font-mono);
}
/* footer lockup = brand-kit mark + TELEX wordmark (same lockup as the nav brand) */
.tx-footer .end { display: flex; align-items: center; align-self: stretch; gap: calc(15 * var(--u)); color: var(--chrome-ink); text-decoration: none;
  font: 600 max(18px, calc(28 * var(--u))) var(--font-ui); letter-spacing: .12em; }
.tx-footer .copy { display: grid; gap: calc(7 * var(--u)); }
.tx-footer .answer { font-family: var(--font-ui); }
.tx-footer .answer a { text-decoration: none; }
.tx-footer .boundary { font-weight: 500; }
.tx-footer .sources { color: var(--chrome-muted); }
.tx-footer .ca-copy { margin-left: calc(8 * var(--u)); font-family: var(--font-ui); color: var(--orange); }
.tx-footer .foot-mark { width: calc(62 * var(--u)); height: auto; min-width: 40px; object-fit: contain; }

/* ───────── RULE CLASSES (DESIGN §4b; one class per framed component; the only place borders are written) ───────── */
/* chrome */
.rule-nav { border-bottom: var(--rule-hair) solid var(--chrome-ink); }
.rule-nav-link.is-active { border-bottom: max(2px, calc(2 * var(--u))) solid var(--chrome-accent); padding-bottom: calc(7 * var(--u)); }
.rule-footer { border-top: max(3px, calc(3 * var(--u))) double var(--chrome-ink); }
.rule-footer-divider { border-right: var(--rule-hair) solid var(--chrome-ink); }
.rule-drawer { border-bottom: var(--rule-hair) solid var(--chrome-ink); }

/* buttons + controls (outline 2.3; primary orange; disabled faint) */
.rule-button { border: var(--rule) solid var(--ink); }
.rule-button-primary { border: var(--rule) solid var(--orange); color: var(--orange); }
.rule-button-disabled, .rule-button[disabled], .rule-button-primary[disabled] { border: var(--rule) solid var(--faint); color: var(--faint); cursor: not-allowed; }
.rule-nav-ca { border: var(--rule-hair) solid var(--orange); } /* footer/answerback CA pill after launch, if a route wants a frame */

/* input frame wraps the WHOLE control: padding inside the frame, inner <input> has no border of its own */
.rule-input { border: var(--rule) solid var(--ink); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: 0 calc(16 * var(--u)); background: var(--paper); }
.rule-input input, .rule-input select, .rule-input textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 0; height: 100%; }
.rule-input:focus-within { outline: var(--rule) solid var(--orange); outline-offset: 2px; }

/* segmented control / message tabs: outer frame once, inner dividers on the left of every cell but the first */
.rule-segmented { border: var(--rule) solid var(--ink); display: flex; }
.rule-segmented > * { flex: 1; }
.rule-segmented > * + * { border-left: var(--rule) solid var(--ink); }
.rule-segmented > .is-active { color: var(--orange); outline: var(--rule) solid var(--orange); outline-offset: calc(-1 * var(--rule)); position: relative; z-index: 1; }
.rule-tab { border: var(--rule) solid var(--ink); border-bottom-width: 0; }
.rule-tab + .rule-tab { border-left-width: 0; }
.rule-tab.is-active { border-color: var(--orange); color: var(--orange); }
.rule-tabs-base { border-bottom: var(--rule) solid var(--ink); }
.rule-filter-tab { border-bottom: var(--rule-tab) solid transparent; }
.rule-filter-tab.is-active { border-bottom-color: var(--ink); }

/* panels + frames */
.rule-panel { border: var(--rule) solid var(--ink); }
.rule-pipeline-box { border: var(--rule) solid var(--ink); }
.rule-line-selected { border: var(--rule) solid var(--orange); background: var(--paper-hi); }
.rule-row-current { border: var(--rule) solid var(--orange); }
.rule-stamp { border: var(--rule) solid currentColor; }
.rule-stamp.is-acsc, .rule-stamp.is-wire { color: var(--orange); }
.rule-stamp.is-rjct, .rule-stamp.is-hold { color: var(--blue); }

/* tables: one outer frame, row rules drawn once (bottom of every row but the last) */
.rule-table { border: var(--rule) solid var(--ink); }
.rule-table tr:not(:last-child) > * { border-bottom: var(--rule-hair) solid var(--ink); }
.rule-table-head > * { border-bottom: var(--rule) solid var(--ink); }
.rule-table-cols > * + * { border-left: var(--rule-hair) solid var(--ink); }
/* open ledgers (no outer frame): row rules only */
.rule-row { border-bottom: var(--rule-hair) solid var(--ink); }
.rule-row-strong { border-bottom: var(--rule) solid var(--ink); }
.rule-rows > * + * { border-top: var(--rule-hair) solid var(--ink); }

/* section + column rules */
.rule-section-top { border-top: var(--rule) solid var(--ink); }
.rule-section-bottom { border-bottom: var(--rule) solid var(--ink); }
.rule-heavy-bottom { border-bottom: var(--rule-heavy) solid var(--ink); }
.rule-divider-v { border-left: var(--rule-hair) solid var(--ink); }
.rule-split-v { border-left: var(--rule) solid var(--ink); }

/* double rules (totals, closing band): two 2.3 rules 16px apart */
.rule-double-bottom { position: relative; border-bottom: var(--rule) solid var(--ink); margin-bottom: calc(var(--rule-double-gap) + var(--rule)); }
.rule-double-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule-double-gap) - var(--rule)); border-bottom: var(--rule) solid var(--ink); }
.rule-double-band { position: relative; border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); }
.rule-double-band::before, .rule-double-band::after { content: ""; position: absolute; left: 0; right: 0; }
.rule-double-band::before { top: calc(var(--rule-double-gap) / 2); border-top: var(--rule) solid var(--ink); }
.rule-double-band::after { bottom: calc(var(--rule-double-gap) / 2); border-bottom: var(--rule) solid var(--ink); }

/* dashed (perforation / drawn frames) */
.rule-perforation-v { border-left: var(--rule-dash) dashed var(--rule-dash-c); }
.rule-perforation-v-r { border-right: var(--rule-dash) dashed var(--rule-dash-c); }
.rule-perforation-h { border-top: var(--rule-dash) dashed var(--rule-dash-c); }
.rule-drop-zone { border: var(--rule) dashed var(--ink); }
.rule-drop-zone.is-over { border-color: var(--orange); }
.rule-slip { border: var(--rule-dash) dashed var(--rule-dash-c); background: var(--paper); }
.rule-field-map { border: var(--rule-dash) dashed var(--rule-dash-c); }
.rule-tape-header { border: var(--rule) dashed var(--ink); }
.rule-key-panel { border: var(--rule-dash-heavy) dashed var(--ink); }
.rule-key-box { border: var(--rule-dash) dashed var(--ink); }
.rule-example-window { border: var(--rule-dash) dashed var(--rule-dash-c); }
.rule-empty-box { border: var(--rule-dash) dashed var(--rule-dash-c); }

/* ───────── punched tape (THE TAPE EDGE): holes are elements; colour = verdict ───────── */
.tape-edge { display: flex; flex-direction: column; align-items: center; gap: calc(39 * var(--u)); }
.hole { width: calc(31 * var(--u)); height: calc(31 * var(--u)); border-radius: 50%; background: var(--hole); flex: none; }
.hole.is-wire, .hole.is-acsc { background: var(--orange); }
.hole.is-hold, .hole.is-rjct { background: var(--blue); }
.hole.is-open, .hole.is-pdng { background: transparent; border: var(--rule) solid var(--hole); }

/* ───────── MOTION (DESIGN §10 — a teleprinter at work: stepped, mechanical; transform/opacity only) ───────── */
.tx-link { position: relative; }
.tx-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-4 * var(--u)); height: max(2px, calc(2 * var(--u))); background: var(--orange);
  transform: scaleX(0); transform-origin: left center; transition: transform 80ms steps(4, end); pointer-events: none; }
.tx-link:hover::after { transform: scaleX(1); }
.tx-nav .routes a.tx-link::after { display: none; } /* nav keeps its drawn underline (.rule-nav-link) */
.tx-key:active, .rule-button:active, .rule-button-primary:active { transform: translateY(max(1px, var(--u))); }

/* reveal = platen feed. Content is NEVER hidden at rest (full-page prints and no-JS readers see every line);
   the feed plays once, as the block enters the view. */
[data-feed].is-fed { animation: tx-feed 120ms steps(3, end) backwards; animation-delay: min(calc(var(--i, 0) * 12ms), 60ms); }
/* transform only: a line is never invisible, not even for a frame (USER_FIXES_R1 — route paints at once) */
@keyframes tx-feed { from { transform: translateY(calc(.5 * var(--pitch))); } to { transform: none; } }

.tx-caret::after { content: "▌"; margin-left: .05em; color: var(--ink); animation: tx-blink 1s steps(1, end) 2; }
@keyframes tx-blink { 50% { opacity: 0; } }

.is-punched { animation: tx-punch 140ms steps(3, end) both; }
@keyframes tx-punch { 0% { transform: scale(0); } 66% { transform: scale(1.15); } 100% { transform: scale(1); } }

.is-feeding-list { animation: tx-list-feed var(--t-feed) steps(2, end) both; }
@keyframes tx-list-feed { from { transform: translateY(calc(-1 * var(--pitch))); } to { transform: none; } }

[data-draw] { transform-origin: left center; }
[data-draw].is-drawn { animation: tx-draw 500ms steps(24, end) both; }
@keyframes tx-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

[data-tear].is-torn { animation: tx-tear var(--t-tear) var(--ease-platen) both; }
@keyframes tx-tear { from { transform: translateY(calc(-1 * var(--pitch))) rotate(0deg); } to { transform: translateY(0) rotate(-1.5deg); } }

/* route change paints in the click frame (USER_FIXES_R1): the old page is never blanked, the new one is never faded —
   it only steps up half a line pitch in 90 ms (platen feed) */
main.is-leaving { opacity: 1; transform: none; }
main.is-feeding { animation: tx-page-feed 90ms steps(2, end) both; }
@keyframes tx-page-feed { from { transform: translateY(calc(.5 * var(--pitch))); } to { transform: none; } }

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

/* ───────── WALLET PICKER (shell; opened by #/send "Connect your wallet") ───────── */
.wallet-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.wallet-scrim { position: absolute; inset: 0; background: rgba(7, 7, 6, .42); }
.wallet-dialog { position: relative; width: min(calc(100vw - 32px), max(360px, calc(620 * var(--u)))); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--paper); padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(22 * var(--u)); }
.wallet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: calc(12 * var(--u)); }
.wallet-head .t-section { font-size: max(18px, calc(30 * var(--u))); }
.wallet-x { font: 400 var(--fs-ui) var(--font-ui); color: var(--muted-ink); }
.wallet-lede { margin: calc(14 * var(--u)) 0 calc(10 * var(--u)); font: 400 max(12px, calc(16 * var(--u)))/1.45 var(--font-mono); color: var(--muted-ink); }
.wallet-list { list-style: none; margin: 0; padding: 0; }
.wallet-opt { display: grid; grid-template-columns: max(28px, calc(40 * var(--u))) 1fr auto; align-items: center; gap: calc(16 * var(--u));
  width: 100%; min-height: max(48px, calc(66 * var(--u))); padding: calc(8 * var(--u)) calc(6 * var(--u)); text-align: left; }
.wallet-opt:hover, .wallet-opt:focus-visible { background: var(--paper-hi); }
.wallet-opt img { width: max(28px, calc(40 * var(--u))); height: max(28px, calc(40 * var(--u))); }
.wallet-opt .nm { font: 500 max(14px, calc(20 * var(--u))) var(--font-ui); letter-spacing: -.01em; }
.wallet-opt .st { font: 400 var(--fs-small) var(--font-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.wallet-opt .st.is-found { color: var(--orange); }
.wallet-item .wallet-help { margin: 0 0 calc(12 * var(--u)) calc(62 * var(--u)); font: 400 max(12px, calc(15 * var(--u)))/1.45 var(--font-mono); color: var(--muted-ink); }
.wallet-item .wallet-help a { color: var(--orange); }
.wallet-msg { margin: calc(12 * var(--u)) 0 0; min-height: 1.4em; font: 400 var(--fs-small) var(--font-mono); color: var(--muted-ink); }
.wallet-msg.is-error { color: var(--blue); }

/* ───────── below 1024: stack + menu drawer (DESIGN §1); 390 no horizontal scroll ───────── */
@media (max-width: 1023.98px) {
  :root { --gutter-l: 16px; --gutter-r: 16px; --nav-h: 64px; }
  .tx-nav { grid-template-columns: 1fr auto; padding: 0 16px; gap: 12px; }
  .tx-nav .brand { font-size: 20px; gap: 10px; }
  .tx-nav .brand img { width: 48px; height: 40px; }
  .tx-nav .routes, .tx-nav .actions { display: none; }
  .nav-menu { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; font: 500 14px var(--font-ui); color: var(--chrome-ink); }
  .nav-menu-bars, .nav-menu-bars::before, .nav-menu-bars::after { display: block; width: 18px; height: 2px; background: var(--chrome-ink); position: relative; content: ""; }
  .nav-menu-bars::before { position: absolute; top: -6px; } .nav-menu-bars::after { position: absolute; top: 6px; }
  .nav-drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 8px 16px 16px; flex-direction: column; font: 400 18px var(--font-ui); }
  .nav-drawer:not([hidden]) { display: flex; }
  .nav-drawer a { padding: 12px 0; color: var(--chrome-ink); text-decoration: none; }
  .nav-drawer a.is-active { color: var(--orange); }
  .nav-drawer .drawer-actions { display: flex; gap: 24px; padding-top: 8px; }
  .tx-footer { grid-template-columns: 1fr; padding: 20px 16px; gap: 16px; font-size: 12px; }
  .tx-footer .end { font-size: 20px; gap: 10px; }
  .tx-footer .foot-mark { width: 44px; min-width: 44px; }
  .rule-footer-divider { border-right-width: 0; }
  .wide, .print-scroll { overflow-x: auto; max-width: 100%; }
}