@font-face { font-family: "Be Vietnam Pro"; src: url("assets/fonts/be-vietnam-pro-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("assets/fonts/be-vietnam-pro-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("assets/fonts/be-vietnam-pro-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("assets/fonts/dm-serif-display-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }

/* LOCATE — app.css (shell). Tokens from mockup/v1/DESIGN.md §0–§5 + §10 MOTION; USER_FIXES.md applied
   (one page frame #093421 48/47 @1920 · type at real desktop size · nav without CA/BUY · footer without CA — USER REVIEW R1).
   UNIT: --u = 1 css px of the 1920 design (index.html sets it from the viewport width). Every length = calc(N * var(--u)),
   N = the @1920 value. Text never below 12px. Below 1024 --u = 0.75px and routes stack (MOBILE at the end).
   BORDERS: ONLY the .rule-* classes below draw borders/outlines (LAW 56, DESIGN.md §4b). Route files contain ZERO
   border/outline declarations. Hairlines are written max(1px, …) so they never vanish at 1280–2560. */

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

  /* colour tokens (DESIGN.md §3) */
  --paper: #093421;          /* page ground (LOCKED, USER FIX U1) */
  --baize: #1B3D2B;          /* nav + footer ground */
  --row-alt: #0C3623;        /* table body / alternate rows */
  --paper-ink: #F2F3EC;      /* primary type */
  --muted: #637D75;          /* meta (measured) — use --muted-ink for text that must stay readable */
  --muted-ink: #9DB1A6;      /* meta text on paper/baize at ≥ 4.5:1 */
  --money-green: #38AB68;    /* available bars, buyback side */
  --mech: #9FD8B5;           /* mechanism line (money-green light) */
  --track: #2A5C47;          /* bar track */
  --ticket-stock: #F2E7D4;   /* paper ticket / lend slip / roll ground */
  --ticket-ink: #1D2A22;     /* type on ticket stock */
  --ink-red: #D64042;        /* stamps, LOCATE action, sell side, buy-in marker */
  --brass: #F2D02A;          /* "now": ref price just quoted, selected row, cursors */
  --rule: #2D6046;           /* 2px panel frames, table rows */
  --rule-bright: #1B6F4A;    /* lower-section panels and row rules */
  --rule-deep: #002713;      /* inner grid lines */
  --paper-rule: #859882;     /* rules drawn on ticket paper */
  /* chrome (verbatim from mockup/v1/chrome/nav.html + footer.html) */
  --chrome-rule: #35604A;
  --chrome-ink: #EDE6D3;
  --chrome-active: #FBCB1E;

  /* rule tokens (DESIGN.md §4 / §4b — width + colour per rule kind) */
  --rule-panel-w: max(1px, calc(2 * var(--u)));    --rule-panel-c: var(--rule);
  --rule-card-w: max(1px, calc(2 * var(--u)));     --rule-card-c: var(--rule-bright);
  --rule-row-w: max(1px, calc(2 * var(--u)));      --rule-row-c: var(--rule);
  --rule-hair-w: max(1px, calc(1.1 * var(--u)));   /* measured 1.1 px hairlines */
  --rule-col-w: var(--rule-hair-w);                --rule-col-c: var(--rule);
  --rule-divider-w: max(1px, calc(2 * var(--u)));  --rule-divider-c: var(--paper-ink);
  --rule-heavy-w: max(2px, calc(3 * var(--u)));
  --rule-input-w: max(1px, calc(2 * var(--u)));    --rule-input-c: var(--rule-bright);
  --rule-select-w: max(2px, calc(2 * var(--u)));   --rule-select-c: var(--brass);
  --rule-marker-w: max(2px, calc(2 * var(--u)));
  --rule-stamp-w: max(2px, calc(3 * var(--u)));    --rule-stamp-c: var(--ink-red);  --rule-stamp-gap: calc(6 * var(--u));
  --rule-paper-w: max(1px, calc(2 * var(--u)));    --rule-paper-c: var(--paper-rule);
  --rule-nav-w: max(1px, calc(1 * var(--u)));      --rule-nav-c: var(--chrome-rule);
  --rule-footer-w: max(1px, calc(1 * var(--u)));   --rule-footer-c: var(--chrome-rule);
  --rule-ca-w: max(1px, calc(1.1 * var(--u)));     --rule-ca-c: var(--chrome-ink);
  --rule-double-gap: calc(4 * var(--u));           --rule-double-bg: var(--paper);

  /* fonts (DESIGN.md §2 — measured faces) */
  --f-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --f-sans: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* type scale @1920 — USER FIX TYPE (real desktop sizes; DESIGN.md §2 BUILD column) */
  --fs-hero: max(28px, calc(56 * var(--u)));      /* "The locate desk for stock on Arc" */
  --fs-title: max(28px, calc(60 * var(--u)));     /* route H1 */
  --fs-section: max(22px, calc(34 * var(--u)));   /* section H2 */
  --fs-sub: max(18px, calc(24 * var(--u)));       /* card titles */
  --fs-big: max(22px, calc(40 * var(--u)));       /* one big mono figure on a ticket */
  --fs-body: max(14px, calc(16 * var(--u)));      /* body copy */
  --fs-cell: max(13px, calc(16 * var(--u)));      /* table numbers (mono tnum) */
  --fs-head: max(12px, calc(14 * var(--u)));      /* column headers */
  --fs-nav: max(13px, calc(15 * var(--u)));
  --fs-label: max(12px, calc(13 * var(--u)));     /* mono kicker / meta caps */
  --fs-meta: max(12px, calc(14 * var(--u)));      /* desk line, source block */
  --fs-small: max(12px, calc(12 * var(--u)));     /* footnotes, source line */

  /* page frame (USER FIX U1 / frame.json) */
  --gutter-l: calc(48 * var(--u));
  --gutter-r: calc(47 * var(--u));
  --gap: calc(64 * var(--u));          /* section gap (48–96 rule) */
  --gap-s: calc(32 * var(--u));
  --pad: calc(24 * var(--u));          /* panel inner padding */
  --row-h: calc(72 * var(--u));        /* blotter row height */

  /* motion (DESIGN.md §10 — one easing, one duration family) */
  --ease-desk: cubic-bezier(.22, .9, .24, 1);
  --t-1: 140ms; --t-2: 180ms; --t-3: 220ms; --t-4: 280ms; --t-5: 320ms;
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--paper); color: var(--paper-ink);
  font: 400 var(--fs-body)/1.45 var(--f-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  display: flex; flex-direction: column;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; padding: 0; }
:where(button, input, select) { border: 0; }   /* no UA bevel frames: only .rule-* classes draw lines */
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 8px 12px; background: var(--brass); color: var(--ticket-ink); }
.skip:focus { left: 16px; top: 8px; }
:focus-visible { outline: max(2px, calc(2 * var(--u))) solid var(--brass); outline-offset: max(2px, calc(2 * var(--u))); }
::selection { background: var(--brass); color: var(--ticket-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── NAV (mockup/v1/chrome/nav.html, scaled by --u) ───────── */
.lc-nav {
  position: relative; z-index: 20;
  background: var(--baize); color: var(--chrome-ink);
  padding: calc(24 * var(--u)) var(--gutter-r) calc(26 * var(--u)) var(--gutter-l);
  font: 500 var(--fs-nav)/1 var(--f-sans);
}
.lc-nav .bar {
  height: calc(88 * var(--u)); display: flex; align-items: center;
  padding: 0 calc(34 * var(--u)); gap: calc(34 * var(--u)); background: var(--baize);
}
.lc-nav a { white-space: nowrap; }
.lc-nav .brand { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-right: calc(20 * var(--u)); }
.lc-nav .brand img { width: auto; height: calc(44 * var(--u)); min-height: 30px; object-fit: contain; }
.lc-nav .brand b { font: 600 max(18px, calc(26 * var(--u)))/1 var(--f-sans); letter-spacing: .18em; }
.lc-nav .routes { align-self: stretch; display: flex; align-items: center; gap: calc(34 * var(--u)); letter-spacing: -.02em; }
.lc-nav .routes a { height: 100%; display: flex; align-items: center; position: relative; transition: color var(--t-1) var(--ease-desk); }
.lc-nav .routes a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(16 * var(--u)); height: max(2px, calc(3 * var(--u)));
  background: var(--chrome-active); transform: scaleX(0); transform-origin: left; transition: transform var(--t-4) var(--ease-desk);
}
.lc-nav .routes a:hover { color: #fff; }
.lc-nav .routes a.is-active { color: var(--chrome-active); }
.lc-nav .routes a.is-active::after { transform: scaleX(1); }
.lc-nav .spacer { flex: 1; }
.lc-nav .actions { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.lc-nav .social { font-size: max(15px, calc(18 * var(--u))); }
/* user 28/09: X and Telegram sat on different heights — one icon box, centred */
.lc-nav .actions a { display: inline-flex; align-items: center; justify-content: center; height: max(24px, calc(32 * var(--u))); min-width: max(24px, calc(32 * var(--u))); line-height: 1; }
[data-launch-link][aria-disabled="true"] { cursor: default; opacity: .72; }
.lc-nav .nav-menu { display: none; }

/* mobile drawer (below 1024) */
.nav-drawer { background: var(--baize); padding: 8px 16px 16px; }
.nav-drawer a { display: block; padding: 12px 0; font: 500 16px/1.2 var(--f-sans); }
.nav-drawer a.is-active { color: var(--chrome-active); }
.nav-drawer .drawer-tools { display: flex; gap: 24px; padding-top: 8px; }

/* ───────── PAGE FRAME (one container for every route — USER FIX U1) ───────── */
main.frame {
  flex: 1 0 auto; display: block; width: 100%;
  padding: 0 var(--gutter-r) var(--gap) var(--gutter-l);
  background: var(--paper);
}
main.frame:focus { outline: none; }
.frame > * + * { margin-top: var(--gap); }
.frame > :first-child { margin-top: 0; }   /* home blotter panel starts at the nav band (mockup) */
.stack > * + * { margin-top: var(--gap-s); }

/* ───────── FOOTER (mockup/v1/chrome/footer.html + mark) ───────── */
.lc-foot-band { background: var(--baize); padding: 0 var(--gutter-r) calc(28 * var(--u)) var(--gutter-l); }
.lc-footer {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: calc(76 * var(--u)) calc(64 * var(--u));
  align-items: center; background: var(--baize); color: var(--chrome-ink);
  font: 400 max(13px, calc(15 * var(--u)))/1.35 var(--f-sans);
}
.lc-footer .boundary { display: flex; align-items: center; gap: calc(16 * var(--u)); padding: 0 calc(24 * var(--u)); }
.lc-footer .foot-mark { width: auto; height: calc(36 * var(--u)); min-height: 28px; flex: none; }
.lc-footer .tools { height: 100%; display: flex; align-items: center; gap: calc(24 * var(--u)); padding: 0 calc(24 * var(--u)); white-space: nowrap; }
.lc-footer .sources { grid-column: 1 / 3; height: 100%; display: flex; align-items: center; padding: 0 calc(24 * var(--u)); font: 400 var(--fs-small)/1.35 var(--f-mono); }
.lc-footer .sources a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ───────── TYPE ───────── */
.t-hero { font: 400 var(--fs-hero)/1.05 var(--f-display); letter-spacing: -.018em; }
.t-title { font: 400 var(--fs-title)/1.05 var(--f-display); letter-spacing: -.015em; }
.t-section { font: 400 var(--fs-section)/1.1 var(--f-display); letter-spacing: -.01em; }
.t-sub { font: 400 var(--fs-sub)/1.15 var(--f-display); }
.t-body { font: 400 var(--fs-body)/1.5 var(--f-sans); }
.t-lede { font: 400 var(--fs-body)/1.55 var(--f-sans); max-width: 70ch; }
.t-head { font: 500 var(--fs-head)/1.2 var(--f-sans); letter-spacing: -.02em; }
.t-cell, .t-num { font: 500 var(--fs-cell)/1.3 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.t-big { font: 500 var(--fs-big)/1.1 var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.t-mech { font: 400 var(--fs-body)/1.3 var(--f-mono); color: var(--mech); }
.t-meta { font: 400 var(--fs-meta)/1.35 var(--f-mono); color: var(--muted-ink); }
.t-label { font: 500 var(--fs-label)/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.t-small { font: 400 var(--fs-small)/1.4 var(--f-mono); color: var(--muted-ink); }
.t-brass { color: var(--brass); }
.t-red { color: var(--ink-red); }
.t-green { color: var(--money-green); }
.t-muted { color: var(--muted-ink); }

/* ───────── SHARED COMPONENTS (DESIGN.md §5) ───────── */
/* panels + table */
.panel { background: var(--paper); padding: var(--pad); }
.panel.is-alt, .row-alt { background: var(--row-alt); }
.lc-table { width: 100%; font: 500 var(--fs-cell)/1.3 var(--f-mono); font-variant-numeric: tabular-nums; }
.lc-table th { font: 500 var(--fs-head)/1.2 var(--f-sans); text-align: left; padding: 0 calc(14 * var(--u)); height: calc(56 * var(--u)); white-space: nowrap; }
.lc-table td { padding: 0 calc(14 * var(--u)); height: var(--row-h); vertical-align: middle; }
.lc-table tbody tr:nth-child(even) { background: var(--row-alt); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); min-height: 36px; height: calc(48 * var(--u)); padding: 0 calc(22 * var(--u)); font: 500 var(--fs-head)/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: transform var(--t-1) var(--ease-desk), opacity var(--t-1) linear; }
.btn:active { transform: translateY(calc(1 * var(--u))); }
.btn-locate { background: var(--ink-red); color: #fff; }
.btn-locate[disabled], .btn-locate[aria-disabled="true"] { background: #3A4D4A; color: #A7B3AE; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--paper-ink); }
.chip { display: inline-flex; align-items: center; height: calc(32 * var(--u)); min-height: 26px; padding: 0 calc(12 * var(--u)); font: 500 var(--fs-label)/1 var(--f-mono); letter-spacing: .04em; }
.chip.is-on { background: var(--brass); color: var(--ticket-ink); }

/* inventory bar (shelf / on loan / available) */
.lc-bar { position: relative; height: calc(6 * var(--u)); min-height: 3px; background: var(--track); overflow: hidden; }
.lc-bar > i { position: absolute; top: 0; bottom: 0; left: 0; transform-origin: left; }
.lc-bar > .is-loan { background: var(--ink-red); }
.lc-bar > .is-avail { background: var(--money-green); }

/* the locate ticket (paper) */
.ticket { position: relative; background: var(--ticket-stock); color: var(--ticket-ink); }
.ticket::before { /* offset carbon duplicate (DESIGN §4 shadows: paper only) */
  content: ""; position: absolute; inset: 0; z-index: -1; background: #D9CCB4;
  transform: translate(calc(5 * var(--u)), calc(5 * var(--u)));
}
.ticket.has-shadow { box-shadow: 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, .3); }
.ticket .t-meta, .ticket .t-small { color: #5A6B5F; }
.punch { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--paper); }

/* the stamp (LOCATED / NO LOCATE / BUY-IN / COVER) — tilted double-rule ink rectangle */
.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(10 * var(--u)) calc(22 * var(--u));
  font: 700 max(16px, calc(28 * var(--u)))/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-red); transform: rotate(var(--stamp-rot, -6deg)); mix-blend-mode: multiply;
}
.stamp.on-dark { mix-blend-mode: normal; }

/* source block (pool / DEX / fee / block) */
.source { font: 400 var(--fs-meta)/1.4 var(--f-mono); color: var(--muted-ink); }
.source b { font-weight: 500; color: var(--paper-ink); }
.is-stale { opacity: .45; filter: grayscale(1); }

/* art (static picture regions — DESIGN.md §7; USER FIX ART: no loops on this site) */
.lc-art { position: relative; }
.lc-art img { width: 100%; height: auto; }

/* ───────── RULES (LAW 56 — the only border/outline declarations of the site) ───────── */
.rule-panel { border: var(--rule-panel-w) solid var(--rule-panel-c); }
.rule-panel.is-bright { border-color: var(--rule-bright); }
.rule-panel.is-paper { border-color: var(--paper-rule); }
.rule-panel.is-ink { border-color: var(--paper-ink); }
.rule-panel.is-thin { border-width: var(--rule-hair-w); }
.rule-card { border: var(--rule-card-w) solid var(--rule-card-c); }
.rule-card.is-paper { border-color: var(--paper-rule); }
.rule-card.is-double, .rule-panel.is-double {            /* measured double frames: outer line + inner line, gap = ground */
  box-shadow: inset 0 0 0 var(--rule-double-gap) var(--rule-double-bg), inset 0 0 0 calc(var(--rule-double-gap) + var(--rule-card-w)) var(--rule-card-c);
}
/* rows: ONE rule per shared edge (the lower row draws nothing there) */
.rule-head { border-bottom: var(--rule-row-w) solid var(--rule-row-c); }
.rule-row { border-bottom: var(--rule-row-w) solid var(--rule-row-c); }
.rule-row.is-bright, .rule-rows.is-bright > * { border-color: var(--rule-bright); }
.rule-row.is-thin, .rule-rows.is-thin > * + * { border-width: var(--rule-hair-w); }
.rule-row.is-top { border-bottom: 0; border-top: var(--rule-row-w) solid var(--rule-row-c); }
.rule-rows > * + * { border-top: var(--rule-row-w) solid var(--rule-row-c); }
table.rule-grid tbody tr + tr > * { border-top: var(--rule-row-w) solid var(--rule-row-c); }
table.rule-grid thead tr > * { border-bottom: var(--rule-row-w) solid var(--rule-row-c); }
table.rule-grid.is-bright tr > * { border-color: var(--rule-bright); }
table.rule-grid.has-cols tr > * + * { border-left: var(--rule-col-w) solid var(--rule-col-c); }
/* columns */
.rule-col { border-right: var(--rule-col-w) solid var(--rule-col-c); }
.rule-col.is-bright, .rule-cols.is-bright > * + * { border-color: var(--rule-bright); }
.rule-col.is-heavy { border-right-width: var(--rule-row-w); }
.rule-cols > * + * { border-left: var(--rule-col-w) solid var(--rule-col-c); }
/* a 3-column cell grid (spans laid out by CSS grid): row rules under every row but the last, column rules between columns */
.rule-grid3 > :nth-last-child(n+4) { border-bottom: var(--rule-row-w) solid var(--rule-card-c); }
.rule-grid3 > :not(:nth-child(3n+1)) { border-left: var(--rule-col-w) solid var(--rule-card-c); }
/* a 2-column field grid on ticket paper: top rule, a rule under every row, one column rule */
.rule-grid2 { border-top: var(--rule-paper-w) solid var(--rule-paper-c); }
.rule-grid2 > * { border-bottom: var(--rule-paper-w) solid var(--rule-paper-c); }
.rule-grid2 > :nth-child(2n) { border-left: var(--rule-paper-w) solid var(--rule-paper-c); }
/* dividers (H) */
.rule-divider { border-top: var(--rule-divider-w) solid var(--rule-divider-c); }
.rule-divider.is-rule { border-top-color: var(--rule); }
.rule-divider.is-bright { border-top-color: var(--rule-bright); }
.rule-divider.is-deep { border-top-color: var(--rule-deep); }
.rule-divider.is-paper { border-top-color: var(--paper-rule); }
.rule-divider.is-thin { border-top-width: var(--rule-hair-w); }
.rule-divider.is-heavy { border-top-width: var(--rule-heavy-w); }
.rule-vline { border-left: var(--rule-col-w) solid var(--rule-col-c); }
.rule-vline.is-ink { border-left-color: var(--paper-ink); }
/* inputs / chips / cells — the frame wraps the WHOLE control (label + input + unit), padding inside */
.rule-input { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-height: 36px; height: calc(48 * var(--u)); padding: 0 calc(14 * var(--u)); border: var(--rule-input-w) solid var(--rule-input-c); background: transparent; }
.rule-input input, .rule-input select { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; font: 500 var(--fs-cell)/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.rule-input:focus-within { border-color: var(--brass); }
.rule-input.on-paper { border-color: var(--paper-rule); }
.rule-input.on-paper:focus-within { border-color: var(--ticket-ink); }
.rule-cell { border: var(--rule-hair-w) solid var(--rule); }
.rule-cell.is-paper { border: var(--rule-paper-w) solid var(--rule-paper-c); }
.rule-cell.is-ink { border-color: var(--paper-ink); }
/* selected row / current value: brass frame drawn INSIDE the box (never doubles a neighbour's edge) */
.rule-selected { box-shadow: inset 0 0 0 var(--rule-select-w) var(--rule-select-c); }
/* a selected row takes over the rules on its own edges (one brass line, never brass stacked on green) */
tr.rule-selected > *, tr.rule-selected + tr > *, .rule-row.rule-selected, .rule-rows > .rule-selected, .rule-rows > .rule-selected + * { border-color: var(--rule-select-c); }
.rule-row:has(+ .rule-row.rule-selected) { border-bottom-color: var(--rule-select-c); }
tr.rule-selected, .rule-row.rule-selected { box-shadow: inset var(--rule-select-w) 0 0 0 var(--rule-select-c), inset calc(-1 * var(--rule-select-w)) 0 0 0 var(--rule-select-c); }
.rule-button { display: inline-flex; align-items: center; justify-content: center; border: var(--rule-card-w) solid var(--rule-card-c); }
/* brass "now" marker + ink-red buy-in / impact marker */
.rule-brass { border-top: var(--rule-marker-w) solid var(--brass); }
.rule-brass.is-v { border-top: 0; border-left: var(--rule-marker-w) solid var(--brass); }
.rule-ink-red { border-top: var(--rule-marker-w) solid var(--ink-red); }
.rule-ink-red.is-v { border-top: 0; border-left: var(--rule-marker-w) solid var(--ink-red); }
.rule-ink-red.is-heavy { border-top-width: var(--rule-heavy-w); }
.rule-dashed { border-top: var(--rule-hair-w) dashed var(--paper-rule); }
/* stamp: outer line = border, inner line = outline inset (double rule) */
.rule-stamp { border: var(--rule-stamp-w) solid var(--rule-stamp-c); outline: max(1px, calc(2 * var(--u))) solid var(--rule-stamp-c); outline-offset: calc(-1 * var(--rule-stamp-gap)); }
.rule-stamp.is-single { outline: 0; }
/* ticket paper rules */
.rule-paper-row { border-bottom: var(--rule-paper-w) solid var(--rule-paper-c); }
.rule-paper-row.is-thin { border-bottom-width: var(--rule-hair-w); }
.rule-paper-rows > * + * { border-top: var(--rule-hair-w) solid var(--rule-paper-c); }
.rule-paper-col { border-right: var(--rule-paper-w) solid var(--rule-paper-c); }
.rule-paper-col.is-thin { border-right-width: var(--rule-hair-w); }
.rule-paper-cols > * + * { border-left: var(--rule-hair-w) solid var(--rule-paper-c); }
.rule-paper-ink { border-color: var(--ticket-ink) !important; }
/* open edges (adjacent boxes share one edge) */
.rule-open-top { border-top-width: 0 !important; }
.rule-open-right { border-right-width: 0 !important; }
.rule-open-bottom { border-bottom-width: 0 !important; }
.rule-open-left { border-left-width: 0 !important; }
/* chrome */
.rule-nav { border: var(--rule-nav-w) solid var(--rule-nav-c); }
.rule-footer { border: var(--rule-footer-w) solid var(--rule-footer-c); }
.rule-footer-cell { border-left: var(--rule-footer-w) solid var(--rule-footer-c); }
.rule-footer-top { border-top: var(--rule-footer-w) solid var(--rule-footer-c); }
.rule-ca { border: var(--rule-ca-w) solid var(--rule-ca-c); }
.rule-drawer { border-top: var(--rule-nav-w) solid var(--rule-nav-c); }

/* ───────── MOTION (DESIGN.md §10 — STAMP STRIKE + CARBON TRANSFER; transform/opacity only) ───────── */
/* carbon transfer: a value arrives as its faint offset carbon copy, then registers onto the original */
@keyframes lc-carbon {
  0%   { opacity: 0;   transform: translate(calc(5 * var(--u)), calc(5 * var(--u))); }
  40%  { opacity: .38; transform: translate(calc(5 * var(--u)), calc(5 * var(--u))); }
  100% { opacity: 1;   transform: translate(0, 0); }
}
[data-carbon] { opacity: 0; }
[data-carbon].is-carbon { opacity: 1; animation: lc-carbon var(--t-3) var(--ease-desk) var(--carbon-delay, 0ms) both; }
/* stamp strike: the rubber stamp comes down once, firm, and stays */
@keyframes lc-strike {
  0%   { opacity: 0; transform: translateY(calc(-18 * var(--u))) scale(1.16) rotate(var(--stamp-rot, -6deg)); }
  62%  { opacity: 1; transform: translateY(0) scale(.965) rotate(var(--stamp-rot, -6deg)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--stamp-rot, -6deg)); }
}
@keyframes lc-jolt { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(0, calc(2 * var(--u))); } }
[data-stamp]:not(.is-struck) { opacity: 0; }
[data-stamp].is-struck { animation: lc-strike var(--t-4) var(--ease-desk) both; }
.is-jolted { animation: lc-jolt var(--t-2) var(--ease-desk); }
/* ruling pen: bars and rules are drawn from the left (or up from the base) */
[data-rule-in] { transform: scaleX(0); transform-origin: left center; }
[data-rule-in="y"] { transform: scaleY(0); transform-origin: center bottom; }
[data-rule-in].is-ruled { transform: none; transition: transform var(--t-5) var(--ease-desk) var(--rule-delay, 0ms); }
/* brass cursor: a live value that changed gets a brass underline that runs under it, then lifts */
.lc-tick { position: relative; }
.lc-tick.is-ticked::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-3 * var(--u)); height: max(2px, calc(2 * var(--u)));
  background: var(--brass); transform-origin: left; animation: lc-cursor 560ms var(--ease-desk) both;
}
@keyframes lc-cursor { 0% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* hover: the desk lamp finds the row — brass margin mark + warm light (pseudo layers, opacity only) */
.lc-hover-row { position: relative; }
.lc-hover-row::before, .lc-hover-row::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; opacity: 0; transition: opacity var(--t-1) var(--ease-desk); }
.lc-hover-row::before { left: 0; width: max(2px, calc(3 * var(--u))); background: var(--brass); }
.lc-hover-row::after { left: 0; right: 0; background: rgba(242, 208, 42, .05); }
.lc-hover-row:hover::before, .lc-hover-row:hover::after, .lc-hover-row:focus-within::before { opacity: 1; }
/* route change: blotter page turn — a brass ruler slides down the page while the new page registers */
.page-turn { position: fixed; left: 0; right: 0; top: 0; z-index: 30; height: max(2px, calc(2 * var(--u))); background: var(--brass); opacity: 0; pointer-events: none; }
@keyframes lc-turn { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh); } }
html.is-turning .page-turn { animation: lc-turn var(--t-5) var(--ease-desk) both; }
html.is-turning main.frame > * { animation: lc-carbon var(--t-3) var(--ease-desk) both; }
html.is-routing main.frame { opacity: .0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-carbon], [data-stamp] { opacity: 1 !important; }
  [data-rule-in] { transform: none !important; }
  .page-turn { display: none; }
  html.is-routing main.frame { opacity: 1; }
}

/* ───────── MOBILE (< 1024: --u = 0.75px, one column, drawer nav) ───────── */
@media (max-width: 1023.98px) {
  :root { --gutter-l: 16px; --gutter-r: 16px; --gap: 40px; --gap-s: 24px; --pad: 16px; --row-h: 56px; }
  .lc-nav { padding: 12px var(--gutter-r) 12px var(--gutter-l); }
  .lc-nav .bar { height: 56px; padding: 0 12px; gap: 12px; }
  .lc-nav .brand { margin-right: 0; }
  .lc-nav .brand img { height: 32px; }
  .lc-nav .brand b { font-size: 18px; }
  .lc-nav .routes, .lc-nav .actions, .lc-nav .spacer { display: none; }
  .lc-nav .nav-menu { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 36px; padding: 0 12px; font: 500 14px/1 var(--f-sans); }
  .nav-menu .bars { width: 16px; height: 10px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; }
  .lc-foot-band { padding: 0 var(--gutter-r) 16px var(--gutter-l); }
  .lc-footer { grid-template-columns: 1fr; grid-template-rows: auto; }
  .lc-footer .boundary { padding: 16px; align-items: flex-start; }
  .lc-footer .tools { flex-wrap: wrap; gap: 12px 20px; padding: 14px 16px; white-space: normal; border-left: 0; border-top: var(--rule-footer-w) solid var(--rule-footer-c); }
  .lc-footer .sources { grid-column: auto; padding: 14px 16px; }
  .cols-stack, .mobile-stack { display: block !important; }
  .cols-stack > * + *, .mobile-stack > * + * { margin-top: var(--gap-s); }
}
@media (min-width: 1024px) { .nav-drawer { display: none !important; } }

/* user 28/09: X + Telegram = one SVG icon set, same box, same size */
.lc-nav .actions .ico { display: block; width: max(18px, calc(22 * var(--u))); height: max(18px, calc(22 * var(--u))); }