/* MUCH ALPHA design system.
   Variables, type pairing, row anatomy and both themes are taken verbatim from the
   owner-approved mockups (site/mockups/live-tape.html + track-record.html, v2.1).
   Terminal genetics: one mono for data, one sans for language. Colour carries
   meaning only (direction up/down, warning amber).
   Page shells: body.tape = full-height 3-pane; body.doc = document flow. */

:root{
  --mono: ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* dark (primary) */
  --bg:#0a0c0f; --panel:#0f1318; --panel2:#0c1015; --strip:#0d1116;
  --row-hover:#151c24; --row-sel:#16212c; --row-open:#12181f; --sel-bar:#3d5a80;
  --border:#1c232b; --border2:#28323c;
  --fg:#c7cdd4; --fg-strong:#e9eef3; --label:#77828f; --dim:#49535e; --dimmer:#333b44;
  --up:#3fb950; --down:#f85149; --amber:#d6a419; --neutral:#8b95a1;
  --track:#1a212a;
  --link:#5fd3c4; --link-strong:#8fe3d6;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef0f2; --panel:#ffffff; --panel2:#f5f6f8; --strip:#ffffff;
    --row-hover:#eceef1; --row-sel:#e4ecf4; --row-open:#f2f5f8; --sel-bar:#3d5a80;
    --border:#dadee3; --border2:#c4cad1;
    --fg:#2a3037; --fg-strong:#0a0e12; --label:#5c6672; --dim:#98a1ab; --dimmer:#c2c8cf;
    --up:#1a7f37; --down:#c62f24; --amber:#8a5d00; --neutral:#5c6672;
    --track:#e2e6ea;
    --link:#116b61; --link-strong:#0a544c;
  }
}
:root[data-theme="light"]{
  --bg:#eef0f2; --panel:#ffffff; --panel2:#f5f6f8; --strip:#ffffff;
  --row-hover:#eceef1; --row-sel:#e4ecf4; --row-open:#f2f5f8;
  --border:#dadee3; --border2:#c4cad1;
  --fg:#2a3037; --fg-strong:#0a0e12; --label:#5c6672; --dim:#98a1ab; --dimmer:#c2c8cf;
  --up:#1a7f37; --down:#c62f24; --amber:#8a5d00; --neutral:#5c6672; --track:#e2e6ea;
  --link:#116b61; --link-strong:#0a544c;
}
:root[data-theme="dark"]{
  --bg:#0a0c0f; --panel:#0f1318; --panel2:#0c1015; --strip:#0d1116;
  --row-hover:#151c24; --row-sel:#16212c; --row-open:#12181f;
  --border:#1c232b; --border2:#28323c;
  --fg:#c7cdd4; --fg-strong:#e9eef3; --label:#77828f; --dim:#49535e; --dimmer:#333b44;
  --up:#3fb950; --down:#f85149; --amber:#d6a419; --neutral:#8b95a1; --track:#1a212a;
  --link:#5fd3c4; --link-strong:#8fe3d6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:13px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
body.tape{display:flex; flex-direction:column; height:100vh; overflow:hidden}
body.doc{height:auto; line-height:1.45}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .amber{color:var(--amber)}
.dim{color:var(--dim)} .label{color:var(--label)}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px 46px}

/* ── links ──────────────────────────────────────────────────────────────────
   ONE rule for every anchor on the site.

   This used to say `color:inherit` with a hairline in --border2, on the reasoning
   that a link should never be louder than the text around it. That reasoning went
   one step too far: a link in body colour under a border the same value as a panel
   divider is not understated, it is HIDDEN. The tape was full of working links to
   pools, tokens and feeds that nobody could see, and — worse — `span.ref`, which
   is the fallback for a reference we could NOT link, carried a dotted underline.
   The inert thing advertised itself and the live thing did not.

   So: a link is tinted, and the tint is its own value in the palette rather than
   a borrowed one. It is not the browser's blue (that ruling stands, and this is
   nothing like it) and it is not --up/--down/--amber, because those three carry
   meaning about a call and must not start meaning "clickable" as well. The
   underline is drawn in the link's own colour instead of a divider grey, which is
   the single change that makes a mention read as a link at a glance.

   Contrast is checked, not eyeballed: 10.8:1 on the dark background and 5.6:1 on
   the light one, against a floor of 4.5.

   :visited is identical — a read link is not a different fact. Anchors that are
   chrome rather than prose (strip nav, brand, nav menu, the contract sub-link)
   all carry a class and therefore outrank this rule; they keep their own colour
   and are untouched by the tint. */
a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--link)}
a:visited{color:var(--link)}
a:hover,a:focus-visible{color:var(--link-strong);border-bottom-color:var(--link-strong)}
a:focus-visible{outline:1px solid var(--link);outline-offset:2px}
/* an address/hash is data: it stays mono wherever it is linked from prose */
a.ref{font-family:var(--mono);font-size:.94em;white-space:nowrap}
/* A reference we could NOT resolve to a destination. It is inert, so it looks
   inert: no underline to imitate a link, and muted below body text. */
span.ref{font-family:var(--mono);font-size:.94em;white-space:nowrap;
  border-bottom:0;color:var(--label)}

/* ── top strip ── */
.strip{
  display:flex; align-items:center; gap:0;
  background:var(--strip); border-bottom:1px solid var(--border);
  padding:0 10px; height:32px; flex:0 0 auto; overflow:hidden;
}
.strip .cell{
  font-family:var(--mono); font-size:11.5px; white-space:nowrap;
  padding:0 12px; border-right:1px solid var(--border); height:32px;
  display:flex; align-items:center; gap:6px;
}
.strip .k{color:var(--label); font-family:var(--sans); font-size:10px; letter-spacing:.04em; text-transform:uppercase}
.strip .v{color:var(--fg-strong)}
.strip a.nav{color:var(--label); font-family:var(--sans); font-size:11px; text-decoration:none;
  letter-spacing:.02em; border-bottom:0}
.strip a.nav:hover{color:var(--fg-strong)}
.strip a.nav.on{color:var(--fg-strong)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--dim)}
.dot.live{background:var(--up)}
/* quiet is a working state: a feed with nothing to say is not a feed with a fault,
   so it takes the neutral colour. Amber is reserved for the one state that is wrong. */
.dot.quiet{background:var(--neutral)}
.dot.stalled{background:var(--amber)}
.dot.off{background:var(--dim)}
.quiet{color:var(--neutral)}
/* the mark: a terminal cell with a signal in it, and the live dot the strip uses.
   currentColor throughout, so it is correct in both themes and inherits hover. */
.brand{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:700;
  letter-spacing:.07em;color:var(--fg-strong);font-size:12.5px;padding:0 13px 0 7px;
  border-right:1px solid var(--border);border-bottom:0;height:32px;text-decoration:none}
.brand .logo{width:16px;height:16px;flex:0 0 auto;display:block}
.brand .wm b{color:var(--neutral);font-weight:700;margin-left:.3em}
.brand:hover .wm b{color:var(--fg-strong)}
.theme-btn{margin-left:auto;border:0;background:transparent;color:var(--label);font-family:var(--sans);
  font-size:10px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;padding:0 8px;height:32px}
.theme-btn:hover{color:var(--fg-strong)}

/* ── main 3-pane ── */
.main{display:grid; grid-template-columns:196px minmax(0,1fr) 340px; flex:1 1 auto; min-height:0}
.rail,.tapewrap,.detail{min-height:0}
.rail{border-right:1px solid var(--border); background:var(--panel2); padding:6px 0; overflow:auto}
.tapewrap{display:flex; flex-direction:column; background:var(--bg); overflow:hidden}
.detail{border-left:1px solid var(--border); background:var(--panel); overflow:auto}

/* ── left rail ── */
.rail h2,.detail h2{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--label);
  font-weight:600;margin:0;padding:8px 12px 5px}
.frow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;
  padding:5px 12px;cursor:pointer;border-left:2px solid transparent}
.frow:hover{background:var(--row-hover)}
.frow.on{background:var(--row-sel);border-left-color:var(--sel-bar)}
.frow .nm{font-size:11.5px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .ct{font-family:var(--mono);font-size:11px;color:var(--label);text-align:right}
.frow .cls{font-size:9.5px;color:var(--dim);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── tape header ── */
.tbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:5px 12px;
  border-bottom:1px solid var(--border2);background:var(--panel2)}
.seg{display:flex;border:1px solid var(--border2);border-radius:3px;overflow:hidden;flex:0 0 auto}
.seg button{border:0;background:transparent;color:var(--label);font-family:var(--sans);
  font-size:11px;padding:4px 12px;cursor:pointer;letter-spacing:.02em}
.seg button+button{border-left:1px solid var(--border2)}
.seg button.on{background:var(--row-sel);color:var(--fg-strong);font-weight:600}
.tbar .tnote{font-family:var(--mono);font-size:10.5px;color:var(--label);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tbar .tnote b{color:var(--fg);font-weight:600}

/* ── tape rows ── */
.tape{flex:1 1 auto;overflow-y:auto;min-height:0}
.row{display:grid;grid-template-columns:62px 46px minmax(0,1fr) 146px;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;border-left:2px solid transparent}
.row:hover{background:var(--row-hover)}
.row.sel{background:var(--row-sel);border-left-color:var(--sel-bar)}
/* the time column carries the DATE as well: two tabular lines, date dimmer above
   the time, so a row three days old can never be misread as this morning */
.row .time{font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.2}
.row .time i{display:block;font-style:normal;font-size:10px;color:var(--dim)}
.row .time b{display:block;font-weight:400;font-size:11px;color:var(--label);white-space:nowrap}
.row.sel .time b,.row:hover .time b{color:var(--fg)}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-align:center;
  padding:1px 0;border:1px solid var(--border2);border-radius:2px;height:16px;line-height:13px}
.tag.call{color:var(--fg-strong);border-color:var(--neutral)}
.tag.intel{color:var(--dim)}
/* A published item reads slightly louder than a desk note — it is a claim someone
   else made and dated, not one of ours — but it is still context, not a call, so it
   stays well below CALL. Same box, same geometry: only the ink changes. */
.tag.news{color:var(--label)}
.dhead .dtag.news{color:var(--label)}
/* one mono for data, one sans for language — a row line is now a sentence, so the
   instrument keeps the mono and the claim around it is set in the reading face */
.row .l1{font-family:var(--sans);font-size:12.5px;color:var(--fg);line-height:1.5}
.row .l1 .inst{font-family:var(--mono);font-size:12px;color:var(--fg-strong)}
.row .l1 .mv{font-weight:600;color:var(--fg-strong)}
.row .l1 .mv.up{color:var(--up)} .row .l1 .mv.down{color:var(--down)}
.row .l1 .sep{color:var(--dimmer);margin:0 6px}
.row .l1 .dl{font-family:var(--mono);color:var(--label);font-size:11px;white-space:nowrap}
.row .desk{font-size:12px;color:var(--fg);margin-top:3px;line-height:1.45}
.row.intel{padding:6px 12px;align-items:center}
.row.intel .desk{margin-top:0;font-size:12px;color:var(--fg)}
.row.intel:hover .desk{color:var(--fg-strong)}
/* what a late row is ABOUT, under the arrival time it leads with. The tape is
   ordered by arrival and the time column prints that, so this is the line that
   says why a row sitting at the top is reporting the morning. */
.pickup{font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:3px;letter-spacing:.02em}
.row:hover .pickup{color:var(--label)}

/* ── a token, and where its name came from ──────────────────────────────────
   A symbol is self-reported: a copycat can call itself NVDA. A name the registry
   vouches for is set plain; a self-reported one always carries its qualifier, so
   the two can never read as the same instrument on the same row. */
.tok{white-space:nowrap}
.tok.ver{color:var(--fg-strong);font-family:var(--mono)}
.tok.unver{color:var(--fg)}
.tok.unver a,.tok.unver .ref{border-bottom-style:dashed}
.tok .qual{font-style:normal;font-family:var(--sans);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:2px;
  padding:0 3px;margin-left:1px;vertical-align:1px}
/* the same qualifier in the middle of a sentence: a parenthetical, not a badge.
   The space and the brackets are in the markup, so the line still reads as language
   when it is copied out of the page — a margin never survives the clipboard. */
.tok.inl .qual{font-size:inherit;font-family:inherit;letter-spacing:inherit;text-transform:none;
  border:0;border-radius:0;padding:0;margin-left:0;vertical-align:baseline}
.listing .slash{color:var(--dimmer);margin:0 7px}
.listing .sep{color:var(--dimmer);margin:0 6px}
.cf{text-align:right;font-family:var(--mono);font-size:11px;color:var(--label)}
.cf b{color:var(--fg-strong);font-weight:600}
.cf .cw{font-size:10.5px}
.cf .barwrap{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:3px}
.cf .bar{width:52px;height:4px;background:var(--track);border-radius:1px;overflow:hidden}
.cf .bar i{display:block;height:100%;background:var(--neutral)}
.src{text-align:right;font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unscored{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--amber);
  border:1px solid var(--border2);border-radius:2px;padding:0 4px;margin-left:8px}
.preview{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--amber);
  border:1px solid var(--amber);border-radius:2px;padding:0 4px;margin-left:8px;white-space:nowrap}
.dtag.preview{color:var(--amber);border-color:var(--amber)}

/* ── page foot ── */
.foot{flex:0 0 auto;height:24px;border-top:1px solid var(--border);background:var(--panel2);
  display:flex;align-items:center;gap:14px;padding:0 12px;font-family:var(--mono);
  font-size:10.5px;color:var(--label);white-space:nowrap;overflow:hidden}
.foot b{color:var(--fg)}
.foot .mach{color:var(--dim);margin-left:auto;overflow:hidden;text-overflow:ellipsis}

/* ── detail pane ── */
.dhead{padding:11px 14px 10px;border-bottom:1px solid var(--border)}
.dhead .tagline{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.dhead .dtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:2px 6px;
  border:1px solid var(--border2);border-radius:2px;color:var(--label)}
.dhead .dtag.call{color:var(--fg-strong);border-color:var(--neutral)}
.dhead .dasset{font-family:var(--mono);font-size:19px;color:var(--fg-strong);
  display:flex;align-items:center;gap:10px;word-break:break-all}
.dhead .dhead-dir{font-size:15px}
.dhead .dsub{font-family:var(--mono);font-size:11.5px;color:var(--label);margin-top:4px}
/* the row's subtitle, in the pane: what a late record is about, under the arrival
   time the header leads with. Same fact, same order, as the tape row it opened. */
.dhead .dwhen{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:3px;letter-spacing:.02em}
.dpad{padding:0 14px 26px}
.sect{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--label);
  font-weight:600;margin:14px 0 6px;border-top:1px solid var(--border);padding-top:10px}
.sect:first-of-type{border-top:0;padding-top:12px}
.lede{font-size:13px;color:var(--fg-strong);line-height:1.5}
.para{font-size:12.5px;color:var(--fg);line-height:1.55;margin:0 0 7px}
.para:last-child{margin-bottom:0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px;margin-top:9px}
.facts .fk{color:var(--label)}
.facts .fv{color:var(--fg-strong);font-family:var(--mono);font-size:11.5px;text-align:right;word-break:break-word}
/* words first: the grade is what a person acts on, the number is the audit trail */
.confline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.confline .cword{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:.01em;
  color:var(--fg-strong);text-transform:lowercase}
.confline .cnum{font-family:var(--mono);font-size:12px;color:var(--label);font-variant-numeric:tabular-nums}
.confline .calib{flex:0 0 100%;font-size:11.5px;color:var(--label);line-height:1.5}
.confline .calib:empty{display:none}

/* ── the call, said once ────────────────────────────────────────────────────
   claim = the prediction as one sentence. when = the deadline, the horizon it was
   committed for, and what is left of it. spec = how it is measured and how it is
   marked, label above value so a narrow pane never right-aligns a paragraph. */
.claim{font-size:14px;line-height:1.5;color:var(--fg-strong);margin:2px 0 0}
.dline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:10px;
  background:var(--panel2);border:1px solid var(--border);border-radius:3px;padding:7px 9px;
  font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.dline b{color:var(--fg-strong);font-weight:600}
.dline .hz{color:var(--label);border:1px solid var(--border2);border-radius:2px;padding:0 4px;font-size:10px}
.dline .lft{color:var(--label);margin-left:auto;white-space:nowrap}
.spec{margin-top:13px}
.spec .sk{font-family:var(--sans);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--label);font-weight:600;margin-top:11px}
.spec .sk:first-child{margin-top:0}
.spec .sv{font-family:var(--mono);font-size:11.5px;color:var(--fg-strong);line-height:1.55;
  margin-top:3px;word-break:break-word}
.spec .sv.lang{font-family:var(--sans);font-size:12.5px;color:var(--fg);line-height:1.5}

/* references: labelled, linked, never inside a sentence */
.refs{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:12px;
  padding-top:9px;border-top:1px solid var(--border);font-size:11.5px}
.refs .rrole{color:var(--label);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  font-family:var(--sans);padding-top:1px}
.refs .rval{font-family:var(--mono);text-align:right;color:var(--fg-strong);word-break:break-all}
/* the contract, one click from wherever the thing actually lives */
/* Small, but still a link: it takes the tint so it is not mistaken for a caption. */
a.ref.sub{font-family:var(--sans);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--link);border-bottom:0;margin-left:8px;white-space:nowrap}
a.ref.sub:hover{color:var(--link-strong)}
.refs .when-sub{display:block;color:var(--dim);font-size:10px;margin-top:1px}
/* a link off this chain is a claim by someone else: dashed, like a self-reported name */
a.ref.ext{border-bottom-style:dashed}

/* row affordance: this record carries references. Sits in the column that already
   exists, under the source or the confidence bar — never on the line itself. */
.srcs{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;
  color:var(--dim);margin-top:3px}
.row:hover .srcs,.row.sel .srcs{color:var(--label)}

/* ── layer 2: proof ── */
details.proof{margin-top:16px;border-top:1px solid var(--border)}
details.proof>summary{list-style:none;cursor:pointer;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--label);font-weight:600;padding:10px 0 8px}
details.proof>summary::-webkit-details-marker{display:none}
details.proof>summary::before{content:"\25B8  ";color:var(--dim)}
details.proof[open]>summary::before{content:"\25BE  "}
details.proof>summary:hover{color:var(--fg-strong)}
.pbody{background:var(--panel2);border:1px solid var(--border);border-radius:3px;padding:9px 10px 10px}
.pgrid{display:grid;grid-template-columns:86px 1fr;gap:2px 10px;font-family:var(--mono);font-size:10.5px}
.pgrid .pk{color:var(--label)}
.pgrid .pv{color:var(--fg);word-break:break-all}
.pgrid .pv.strong{color:var(--fg-strong)}
.rawlab{font-family:var(--sans);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dim);margin:10px 0 4px}
.rec{background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:8px 9px;
  font-family:var(--mono);font-size:10.5px;color:var(--fg);white-space:pre-wrap;word-break:break-all;line-height:1.5}
.rec .kk{color:var(--label)}
.recheck{font-family:var(--mono);font-size:10.5px;color:var(--fg);margin-top:8px;line-height:1.5;word-break:break-all}
.recheck .pgrid{margin-top:2px}
.recheck .ok{color:var(--up)}
.recheck .bad{color:var(--down)}
.recheck .strong{color:var(--fg-strong)}

/* ── headline stats (track record) ── */
.head{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;padding:20px 0 18px;border-bottom:1px solid var(--border)}
.stat .n{font-family:var(--mono);font-size:30px;color:var(--fg-strong);line-height:1;font-variant-numeric:tabular-nums}
.stat .n.lg{font-size:38px}
.stat .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--label);margin-top:5px}
.stat .sub{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:3px}

/* ── cards ── */
.cols{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:20px;padding:18px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:4px}
.card h2{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--label);font-weight:600;
  margin:0;padding:9px 12px 8px;border-bottom:1px solid var(--border)}
.card .body{padding:4px 0}

/* A CARD THAT COLLAPSES. The optional wallet-connect and the lost-key recovery are
   secondary to the purchase flow, so they are <details> closed by default — the
   summary IS the card heading, with a caret, and the heading keeps its exact look
   whether open or closed. */
details.foldcard{padding:0}
details.foldcard>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:0;border-bottom:1px solid transparent}
details.foldcard>summary::-webkit-details-marker{display:none}
details.foldcard>summary::before{content:"\25B8";color:var(--dim);font-size:10px;line-height:1;
  padding-left:12px}
details.foldcard[open]>summary::before{content:"\25BE"}
details.foldcard>summary h2{border-bottom:0;padding-left:4px;flex:1 1 auto}
details.foldcard[open]>summary{border-bottom-color:var(--border)}
details.foldcard>summary:hover h2{color:var(--fg-strong)}
.foldbody{padding-top:4px}
/* the per-rail recovery method map reads as a small legend, not a wall */
.reclanes{margin-top:2px}

/* ── collapsible topics ──────────────────────────────────────────────────────
   /agents lists four ways in, and a reader wants exactly one of them. Printed in
   full the page was a wall in which the way you had chosen was indistinguishable
   from the three you had not, so each is a card that opens.

   It is <details>, so it works before any script does and a browser's own find-in-
   page can open it. The summary carries the same uppercase label a card heading
   does — the topic is not restyled by being collapsible, only closed. */
details.topic{background:var(--panel);border:1px solid var(--border);border-radius:4px;margin-top:10px}
details.topic>summary{
  list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:9px;
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--label);
  font-weight:600; padding:10px 12px 9px; border-bottom:1px solid transparent;
}
details.topic[open]>summary{border-bottom-color:var(--border)}
details.topic>summary::-webkit-details-marker{display:none}
details.topic>summary::before{content:"\25B8";color:var(--dim);font-size:10px;line-height:1}
details.topic[open]>summary::before{content:"\25BE"}
details.topic>summary:hover{color:var(--fg-strong)}
details.topic>summary:focus-visible{outline:1px solid var(--link);outline-offset:-2px}
/* the ordinal is navigation, not decoration: it is how the quickstart refers here */
details.topic>summary .tnum{font-family:var(--mono);color:var(--dim);flex:0 0 auto}
details.topic>summary .tname{color:inherit}
/* what this route IS, in the reader's words, while it is still closed */
details.topic>summary .tsub{
  margin-left:auto; text-transform:none; letter-spacing:0; font-family:var(--sans);
  font-size:11px; font-weight:400; color:var(--dim); text-align:right;
}
details.topic>.tbody{padding:2px 0 4px}
/* the first heading inside an opened topic sits under the summary's own rule */
details.topic>.tbody>.sect2:first-child,details.topic>.tbody>.sect2.first{
  margin-top:12px;padding-top:0;border-top:0;
}
details.topic>.tbody>.sect2,details.topic>.tbody>.kv,details.topic>.tbody>.para{margin-left:12px;margin-right:12px}
details.topic>.tbody>details.proof{margin-left:12px;margin-right:12px}
@media (max-width:640px){
  details.topic>summary{flex-wrap:wrap}
  details.topic>summary .tsub{margin-left:0;flex-basis:100%;text-align:left;padding-top:3px}
}

/* ── tables ── */
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
th{font-family:var(--sans);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--label);
  font-weight:600;text-align:right;padding:5px 12px 6px}
th.l,td.l{text-align:left}
td{padding:6px 12px;border-top:1px solid var(--border);text-align:right;color:var(--fg)}
tr:hover td{background:var(--row-hover)}
td.nm{color:var(--fg-strong);font-family:var(--sans);font-size:12px}
.hbar{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.hbar .bar{width:52px;height:5px;background:var(--track);border-radius:1px;overflow:hidden}
.hbar .fill{height:100%;background:var(--neutral)}
tr.total td{border-top:1px solid var(--border2);color:var(--fg-strong)}
tr.total td.nm{color:var(--fg-strong)}

/* ── score curve ── */
.eq{padding:12px}
.eq svg{display:block;width:100%;height:190px}
.eq .cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--label);padding:0 2px 6px}
.eq .lgd{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--label);padding:8px 2px 0}
.eq .lgd b{color:var(--fg)}
.mk{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin-right:5px}
.mk.hit{background:var(--up)} .mk.miss{background:var(--down)}

/* ── resolved list ── */
.rlist h2{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--label);font-weight:600;
  margin:22px 0 0;padding:9px 12px 8px;background:var(--panel);border:1px solid var(--border);
  border-bottom:0;border-radius:4px 4px 0 0}
.rl{border:1px solid var(--border);border-radius:0 0 4px 4px;overflow:hidden;background:var(--panel)}
.rhead{display:grid;grid-template-columns:150px minmax(0,1.55fr) minmax(0,1fr) 58px 66px;align-items:center;
  gap:12px;padding:0 12px;height:26px;background:var(--panel2);border-bottom:1px solid var(--border2);
  font-family:var(--sans);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--label)}
.rhead span{white-space:nowrap;overflow:hidden}
.rrow{display:grid;grid-template-columns:150px minmax(0,1.55fr) minmax(0,1fr) 58px 66px;align-items:start;
  gap:12px;padding:9px 12px;border-top:1px solid var(--border);cursor:pointer}
.rrow:first-child{border-top:0}
.rrow:hover{background:var(--row-hover)}
.rrow.open{background:var(--row-open)}
.rrow .ts{font-family:var(--mono);font-size:11px;color:var(--label);font-variant-numeric:tabular-nums}
.rrow .ts .w{display:block;color:var(--dim);font-family:var(--sans);font-size:10.5px;margin-top:2px}
.rrow .claim{font-size:12.5px;color:var(--fg);line-height:1.5;margin:0}
.rrow .claim .inst{font-family:var(--mono);font-size:12px;color:var(--fg-strong)}
.rrow .claim .up{color:var(--up)} .rrow .claim .down{color:var(--down)}
.rrow .claim .by{display:block;font-family:var(--mono);font-size:10.5px;color:var(--label);margin-top:2px}
.rrow .outcome{font-size:12.5px;color:var(--fg);line-height:1.45}
.rrow .outcome .mv{font-family:var(--mono);color:var(--fg-strong)}
/* the bar the move was judged against — a measured move is not a verdict without it */
.rrow .outcome .bar-at{font-family:var(--mono);font-size:10.5px;color:var(--label);margin-left:6px}
.rrow .outcome .when{display:block;color:var(--dim);font-size:10.5px;font-family:var(--mono);margin-top:2px}
.mark{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-align:center;padding:1px 0}
.mark.hit{color:var(--up)} .mark.miss{color:var(--down)}
/* A VOID IS NEITHER. It reads as its own state — not a muted miss and not a
   quiet hit — because the call was never judged and the colour must not imply
   an outcome. */
.mark.void{color:var(--label)}
.rrow .outcome .voidwhy{color:var(--label);font-size:11.5px;line-height:1.45;display:block}
/* the per-source void count, beside the source it belongs to */
.voidn{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:2px}
.vbtn{text-align:right;color:var(--label);font-size:10.5px;letter-spacing:.03em;white-space:nowrap}
.rrow.open .vbtn{color:var(--fg-strong)}
.vpane{display:none;border-top:1px dashed var(--border2);background:var(--panel2);padding:12px 14px 14px}
.vpane.open{display:block}
.vgrid{display:grid;grid-template-columns:92px 1fr;gap:3px 12px;font-family:var(--mono);font-size:11px}
.vgrid .vk{color:var(--label)}
.vgrid .vv{color:var(--fg);word-break:break-all}
.vgrid .vv.strong{color:var(--fg-strong)}
.pagefoot{font-family:var(--mono);font-size:10.5px;color:var(--dim);border-top:1px solid var(--border);
  margin-top:26px;padding-top:10px;line-height:1.6}

/* ── empty states: the page says what is missing and why, in the same register ── */
.empty{font-family:var(--mono);font-size:11.5px;color:var(--label);background:var(--panel2);
  border:1px solid var(--border);border-radius:3px;padding:14px 14px;line-height:1.6}
.empty b{color:var(--fg-strong);font-weight:600}
.empty .why{display:block;color:var(--dim);font-size:10.5px;margin-top:5px}
.tape .empty{margin:14px 12px}

/* ── kv panel: mechanism facts are compact rows, never sentences ── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-family:var(--mono);font-size:11.5px;
  padding:10px 12px}
.kv .k{color:var(--label)}
.kv .v{color:var(--fg-strong);text-align:right;word-break:break-all}
.kv .v.dim{color:var(--dim)}

/* ── terminal block (quickstart) ── */
.term{background:var(--bg);border:1px solid var(--border);border-radius:3px;padding:11px 12px;
  font-family:var(--mono);font-size:11.5px;color:var(--fg);white-space:pre;overflow-x:auto;line-height:1.6}
.term .c{color:var(--dim)}
.term .p{color:var(--neutral)}

/* ── buttons ── */
.btn{font-family:var(--sans);font-size:11.5px;letter-spacing:.02em;color:var(--fg-strong);
  background:var(--panel2);border:1px solid var(--border2);border-radius:3px;padding:6px 14px;cursor:pointer}
.btn:hover{background:var(--row-hover)}
.btn:disabled{color:var(--dim);cursor:default;background:var(--panel2)}
.btnrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px}
.msg{font-family:var(--mono);font-size:11px;color:var(--label);padding:0 12px 10px;word-break:break-all}
.msg.bad{color:var(--down)}
.msg.ok{color:var(--up)}

/* ── login gate ── */
.gate{max-width:520px;margin:64px auto;padding:0 16px}
.gate .card{margin-top:14px}

/* ── document pages carry the same foot bar as the tape ── */
body.doc .foot{height:auto;min-height:26px;padding:5px 16px;white-space:normal;
  border-top:1px solid var(--border);border-bottom:0;flex-wrap:wrap;gap:10px 14px}
body.doc .foot .mach{white-space:normal;overflow:visible}
body.doc{display:flex;flex-direction:column;min-height:100vh}
body.doc .wrap{flex:1 1 auto;width:100%}
.pagefoot{word-break:break-word}
.kv .v.wrap-any{word-break:break-word;text-align:right}
.stat .sub.ok{color:var(--up)}

/* ── reference material: terse, instructional, not prose ── */
.sect2{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--label);
  font-weight:600;margin:16px 0 7px;padding-top:12px;border-top:1px solid var(--border)}
.pad>.sect2:first-child{margin-top:0;padding-top:0;border-top:0}
.card>.sect2{margin:14px 12px 7px}
.card>.sect2.first{margin-top:12px;padding-top:0;border-top:0}
.term+.term{margin-top:10px}
.term .kk{color:var(--label)}
.card .kv+.pad{padding-top:2px}
.para.dim{color:var(--dim)}
.para .mono{font-family:var(--mono);font-size:11.5px;color:var(--fg)}

/* ── copyable blocks ────────────────────────────────────────────────────────
   A command a reader has to hand-select is a command they mistype. Every block
   names what it is, carries one button that takes the whole thing, and scrolls
   sideways rather than wrapping a shell line into something that no longer runs. */
.blk{border:1px solid var(--border);border-radius:3px;background:var(--bg);overflow:hidden;margin-top:10px}
.blk:first-child{margin-top:0}
.blkbar{display:flex;align-items:center;gap:10px;padding:5px 8px 5px 10px;
  background:var(--panel2);border-bottom:1px solid var(--border)}
.blkname{font-family:var(--sans);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--label);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbtn{margin-left:auto;flex:0 0 auto;font-family:var(--sans);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--label);background:transparent;border:1px solid var(--border2);
  border-radius:2px;padding:3px 9px;cursor:pointer;min-height:24px}
.cbtn:hover{color:var(--fg-strong);border-color:var(--neutral)}
.cbtn:focus-visible{outline:1px solid var(--sel-bar);outline-offset:2px}
.cbtn.done{color:var(--up);border-color:var(--up)}
.blk pre.code{margin:0;padding:10px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.blk pre.code code{font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--fg);
  white-space:pre;display:block;tab-size:2}
.blk .p{color:var(--neutral);user-select:none}
.blk .c{color:var(--dim)}
.card details.proof{margin:0 12px}
.card details.proof>summary{padding:10px 0 9px}
@media (max-width:600px){
  .blk pre.code code{font-size:11px}
  .blkname{font-size:9px}
}

/* ── purchase page ──────────────────────────────────────────────────────────
   Mobile first: everything is one column and stays readable at 360px; the wider
   layouts are the enhancement, not the baseline. */
.banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:8px 11px;
  border:1px solid var(--amber);border-radius:3px;background:var(--panel2);font-size:11.5px}
.banner b{color:var(--amber);font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.banner .bnote{color:var(--label)}
.opt{font-family:var(--sans);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--label);border:1px solid var(--border2);border-radius:2px;padding:1px 5px;margin-left:7px;font-weight:400}

/* The purchase page's rail picker. NAMESPACED: `.rail` is the tape's left
   Sources nav, and a bare `.rail{display:grid}` here turned that nav into a
   two-column grid — heading in one track, the whole source list squeezed into
   the other and clipped. The 720px rule that hides the tape rail was hiding
   this picker on phones for the same reason. */
.payrails{display:grid;grid-template-columns:1fr;gap:8px;padding:12px}
.payrail{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;cursor:pointer;
  background:var(--panel2);border:1px solid var(--border2);border-radius:4px;padding:11px 12px;
  font-family:var(--sans);color:var(--fg)}
.payrail:hover{border-color:var(--neutral)}
.payrail.on{border-color:var(--sel-bar);background:var(--row-sel)}
.payrail:disabled{opacity:.55;cursor:default}
.payrail .rname{font-family:var(--mono);font-size:14px;color:var(--fg-strong);display:flex;align-items:center}
.payrail .off{font-family:var(--sans);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--up);border:1px solid var(--up);border-radius:2px;padding:0 4px;margin-left:8px}
.payrail .rprice{font-family:var(--mono);font-size:14px;color:var(--fg-strong);text-align:right}
.payrail .rprice i{font-style:normal;font-size:11px;color:var(--label)}
.payrail .rsrc{font-size:11px;color:var(--label)}
.payrail .rchain{font-size:11px;color:var(--dim);text-align:right}
/* a rail the service has announced but is not taking money on yet */
.payrail.dormant{opacity:.7}
.payrail .coming{font-family:var(--sans);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--label);border:1px solid var(--border2);border-radius:2px;padding:0 4px;margin-left:8px}
/* rails that bind by amount say so before the buyer commits to one */
.payrail .rexact{display:block;font-size:10px;color:var(--amber);margin-top:2px}

.daysrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.dlab{font-family:var(--sans);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--label)}
.dinput{width:86px;font-family:var(--mono);font-size:15px;color:var(--fg-strong);background:var(--bg);
  border:1px solid var(--border2);border-radius:3px;padding:7px 9px;min-height:40px}
.dinput:focus-visible{outline:1px solid var(--sel-bar);outline-offset:1px}
/* a purchase id or a 66-character tx hash, not a day count — it needs the room,
   and it has to stay readable on a phone rather than scrolling a character at a time */
.idinput{width:100%;max-width:520px;font-size:12.5px}
.dtotal{font-family:var(--mono);font-size:12.5px;color:var(--fg)}
.btn.primary{background:var(--row-sel);border-color:var(--sel-bar);color:var(--fg-strong);
  font-size:12.5px;padding:10px 18px;min-height:44px}
.btn.primary:hover{background:var(--row-hover)}

.paygrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.payqr{display:flex;flex-direction:column;align-items:center;gap:6px}
.qr{width:min(220px,62vw);color:var(--fg-strong);background:var(--panel);padding:9px;
  border:1px solid var(--border);border-radius:4px}
.qr svg{display:block;width:100%;height:auto}
.qrcap{font-size:10.5px;color:var(--label);text-align:center}
.paycols{min-width:0}
.warn{margin-top:12px;padding:9px 11px;border:1px solid var(--amber);border-radius:3px;
  background:var(--panel2);font-size:12px;color:var(--fg);line-height:1.5}
.warn b{color:var(--amber)}
.note{margin-top:12px;padding:9px 11px;border:1px solid var(--border);border-radius:3px;
  background:var(--panel2);font-size:12px;color:var(--fg);line-height:1.5}

.stages{list-style:none;margin:0;padding:0}
.stage{display:grid;grid-template-columns:14px 1fr;gap:3px 10px;padding:9px 0;border-top:1px solid var(--border)}
.stage:first-child{border-top:0;padding-top:2px}
.stage .sdot{grid-row:1/3;width:9px;height:9px;border-radius:50%;margin-top:4px;
  background:var(--dimmer);border:1px solid var(--border2)}
.stage.done .sdot{background:var(--up);border-color:var(--up)}
.stage.now .sdot{background:var(--amber);border-color:var(--amber)}
.stage .stitle{font-size:12.5px;color:var(--dim)}
.stage.done .stitle,.stage.now .stitle{color:var(--fg-strong)}
.stage .sdetail{font-size:11.5px;color:var(--label);line-height:1.5}
.msg.warn{border:0;background:none;padding:0;color:var(--amber);margin-top:8px}
.msg.ok{color:var(--up)}

.wallets{display:flex;flex-wrap:wrap;gap:8px}
/* the shared wallet picker — every installed EVM wallet plus the Trac wallet, the
   person chooses one, nothing is auto-selected */
.wpickwrap{margin-top:10px}
.wpick{display:flex;flex-wrap:wrap;gap:8px}
.wbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;
  color:var(--fg-strong);background:var(--panel2);border:1px solid var(--border2);border-radius:3px;
  padding:9px 14px;cursor:pointer;min-height:40px}
.wbtn:hover{border-color:var(--neutral)}
.wico{width:18px;height:18px;border-radius:4px;flex:0 0 auto}
/* a wallet that cannot soundly sign an identity (a Bitcoin-only Tap wallet) is
   shown but disabled, with the honest reason, rather than offered a broken button */
.wbtn.off{color:var(--dim);cursor:not-allowed;opacity:.7}
.wbtn.off:hover{border-color:var(--border2)}
.wbtn .wnote{font-size:10px;color:var(--dimmer);margin-left:4px}

@media (min-width:620px){
  .payrails{grid-template-columns:1fr 1fr}
  .paygrid{grid-template-columns:auto minmax(0,1fr);align-items:start}
}

/* ── layout modifiers (the CSP forbids inline style attributes) ── */
.cells{display:contents}
.wrap.mid{max-width:860px}
.wrap.narrow{max-width:720px}
.cols.one{grid-template-columns:1fr}
.pad{padding:12px}
.rhead .c{text-align:center}
.rhead .r{text-align:right}
.empty.inline{margin-top:9px}
.hidden{display:none !important}
.docview{flex:1 1 auto;overflow:auto;min-height:0}
.docview .wrap{padding-top:4px}

/* ── the narrow desktop ──────────────────────────────────────────────────────
   The detail used to become `position:fixed` here while the grid dropped to two
   columns, so the tape was laid out as if it owned the full width and then had its
   right 340px covered by a pane floating over it. Every row lost its confidence and
   source column and its sentence was cut mid-word — the tape's right side, cut off,
   at every width from 720px to 1100px.

   A drawer that hides the list is only the right answer where there is no room for
   both, and that is the phone shell below 720px, which is a real sheet: closed by
   default and dismissible. Between the two there IS room for both, so both get a
   column and neither covers the other. The panes narrow, and nothing is hidden. */
@media (max-width:1100px){
  .main{grid-template-columns:176px minmax(0,1fr) 300px}
}
@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  .rhead{display:none}
  .rrow{grid-template-columns:minmax(0,1fr) 58px 66px;gap:5px 10px;padding:10px 12px}
  .rrow .ts{grid-column:1/4;order:-1}
  .rrow .claim{grid-column:1/4}
  .rrow .outcome{grid-column:1/2}
  .mark{grid-column:2/3;text-align:left} .vbtn{grid-column:3/4}
}
/* ── the sheet band ──────────────────────────────────────────────────────────
   Three docked panes need roughly 950px before the middle one is still a tape and
   not a column of hyphens: at 900px the row's fixed furniture (time, tag, the
   nowrap deadline, the confidence block) stops fitting and the list starts
   scrolling sideways, which is the same defect as being covered, wearing a
   different hat.

   So this is where the detail stops being a pane and becomes a sheet — off-screen
   until a row asks for it, dismissible, and never covering the list it came from.
   The rail keeps its column down to 720px, because the rail is narrow and the
   filter list is how the tape is navigated.

   tape.js opens the sheet on the same query (`isSheet`). One breakpoint, in two
   places that must agree: if you move it here, move it there. */
@media (max-width:950px){
  .main{grid-template-columns:176px minmax(0,1fr)}
  /* the detail becomes a sheet: off-screen until a row asks for it */
  .detail{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto;
    height:88vh; height:88dvh; max-height:88vh; border-left:0;
    border-top:1px solid var(--border2); border-radius:10px 10px 0 0;
    box-shadow:0 -18px 40px rgba(0,0,0,.45); z-index:40;
    transform:translateY(101%); transition:transform .18s ease-out;
    overscroll-behavior:contain;
  }
  .detail.open{transform:translateY(0)}
  /* the list underneath keeps its own scroll: the sheet never touches it */
  .sheetscrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39;display:none}
  .sheetscrim.open{display:block}
  .detail .sheetbar{
    display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:2;
    background:var(--panel); border-bottom:1px solid var(--border);
    padding:8px 10px; min-height:44px;
  }
  .detail .sheetclose{
    font-family:var(--sans); font-size:12px; color:var(--fg-strong);
    background:var(--panel2); border:1px solid var(--border2); border-radius:3px;
    padding:8px 14px; min-height:36px; cursor:pointer;
  }
  .detail .sheetgrab{flex:1 1 auto;height:4px;border-radius:2px;background:var(--border2);max-width:44px;margin:0 auto}
}

/* ── the mobile shell ───────────────────────────────────────────────────────
   Below 720px the three-pane grid stops being a layout and starts being a
   problem: a 196px rail and a 340px detail cannot share 360px with the thing
   they describe. So the phone gets its own shell rather than a squeezed desktop.

   The detail used to be `position:fixed; top:0; bottom:0; width:100%` here, which
   meant it covered the tape permanently — the reason a phone showed a call and
   never the list. It is a bottom sheet now: closed by default, opened by tapping a
   row, and dismissed by the close bar, ESC, or the back gesture.

   Nothing above 720px changes. */
@media (max-width:720px){
  /* one column, and the rail's job moves to the chip scroller */
  .main{grid-template-columns:1fr}
  .rail{display:none}
  .chips{display:flex}

  /* rows: the sentence is the row. Time and tag stay small and fixed, the line
     takes the rest, and the confidence/source column folds underneath. */
  .row{grid-template-columns:52px 44px minmax(0,1fr);gap:8px;padding:10px 12px;min-height:44px}
  .row .time i{font-size:9.5px}
  .row .time b{font-size:10.5px}
  .cf,.src{grid-column:1/4;text-align:left;margin-top:5px;display:flex;align-items:center;gap:8px}
  .cf .barwrap{justify-content:flex-start;margin-top:0}
  .row .l1{font-size:13px}
  .row .l1 .dl{display:block;margin-top:2px}
  .row .l1 .sep{display:none}
  .row.intel{padding:10px 12px}

  /* strip: mark, state, and a menu — never a horizontal scroll */
  .strip{padding:0 6px}
  .strip .cell{padding:0 8px}
  .strip a.nav{display:none}
  .navbtn{display:flex}
  .strip .cell.hide-sm{display:none}
  .brand{padding:0 9px 0 5px;letter-spacing:.05em}
  .brand .wm{font-size:12px}

  .tbar{flex-wrap:wrap;gap:8px;padding:6px 10px}
  /* Four counts do not fit one narrow line, and the desktop rule ellipsises the
     overflow — which would silently eat the LAST count. A number a reader cannot
     see is not a count, so on a phone this wraps instead of truncating. */
  .tbar .tnote{white-space:normal;overflow:visible;text-overflow:clip}
  .seg button{padding:8px 12px;min-height:36px}
  .foot{height:auto;min-height:26px;padding:5px 10px;white-space:normal;flex-wrap:wrap}
  .foot .mach{display:none}

  /* document pages: one column, and nothing wider than the screen */
  .cols{grid-template-columns:1fr}
  .wrap{padding:0 12px 32px}
  .head{gap:18px;padding:16px 0 14px}
  .stat .n{font-size:24px} .stat .n.lg{font-size:30px}
  table{font-size:11.5px}
  .card .body{overflow-x:auto}
  .payrails{grid-template-columns:1fr;padding:10px}
  .paygrid{grid-template-columns:1fr}
  .qr{width:min(240px,68vw)}
  .refs{grid-template-columns:auto minmax(0,1fr)}
  .facts{grid-template-columns:auto minmax(0,1fr)}
  .dinput{min-height:44px}
  .btn{min-height:44px}
  .wbtn{min-height:44px}
}

/* ── source chips: the rail's job, in one horizontal line ── */
.chips{
  display:none; gap:6px; overflow-x:auto; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; padding:7px 10px; flex:0 0 auto;
  background:var(--panel2); border-bottom:1px solid var(--border);
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}

/* ── deploy notice ────────────────────────────────────────────────────────────
   Raised when the site on disk has moved on from the code this tab booted with.
   It sits in the corner, over its own shadow, and does nothing until it is asked
   to: this is the one piece of UI on the site that must never take an action of
   its own, because the tab it appears in may be part-way through a purchase. */
.updbar{
  position:fixed; right:14px; bottom:14px; z-index:60;
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--border2); border-radius:5px;
  padding:9px 10px 9px 13px; box-shadow:0 10px 28px rgba(0,0,0,.38);
  font-family:var(--sans); font-size:12px; color:var(--fg);
}
.updtxt{line-height:1.35}
.updbtn{
  font-family:var(--sans); font-size:11.5px; color:var(--fg-strong); background:var(--bg);
  border:1px solid var(--border2); border-radius:3px; padding:5px 11px;
  cursor:pointer; min-height:26px; white-space:nowrap;
}
.updbtn:hover{border-color:var(--sel-bar); color:var(--fg-strong)}
.updx{background:none; border:0; color:var(--dim); font-size:16px; line-height:1; cursor:pointer; padding:0 3px}
.updx:hover{color:var(--fg)}
@media (max-width:720px){
  .updbar{left:12px; right:12px; bottom:12px}
  .updbtn{min-height:34px}
  /* A reference on a phone is a target, not just a word. The padding grows the
     tap area without moving the line it sits in. */
  a.ref{padding:4px 0}
  .refs a{padding:5px 0}
  .chip{min-height:40px}
}

/* ── scrollbars ───────────────────────────────────────────────────────────────
   The shell is panes, and panes scroll: the tape, the Sources rail, the detail
   pane and the document view each own their overflow. Left to the browser that is
   four default scrollbars — a pale trough cut down a dark UI, the one piece of
   chrome nobody chose. These are the same scrollbars drawn in the theme: thin, no
   trough, a thumb that sits back until it is hovered. Both themes come free,
   because the colours are the theme's own variables rather than a grey.

   The thumb is inset with a transparent border and clipped to its content box —
   that is what makes it read as a hairline in the gutter instead of a bar bolted
   to the edge of the pane.

   A STYLED SCROLLBAR IS PAINTED, NOT CONJURED — and that was the cost of this
   block. "Colour and width only" was wrong: giving ::-webkit-scrollbar a width
   opts the pane out of the platform's overlay scrollbar, which is drawn over the
   content and costs nothing, and into one that is always there. Where the browser
   then declines to reserve room for it, it is painted ON TOP of the last ~10px of
   every row — the right edge of the feed, clipped, which is exactly what it looked
   like.

   So the gutter is reserved explicitly. The pane is narrower by the width of its
   own scrollbar and the rows lay out inside what is left, which is the only
   arrangement where no scrollbar can ever cover a word. `stable` keeps it reserved
   whether or not the pane is currently scrollable, so a tape that grows past one
   screen does not reflow every row the moment it does. */
.tape,.rail,.detail,.docview{
  scrollbar-width:thin;scrollbar-color:var(--border2) transparent;
  scrollbar-gutter:stable;
}
.tape::-webkit-scrollbar,.rail::-webkit-scrollbar,
.detail::-webkit-scrollbar,.docview::-webkit-scrollbar{width:10px;height:10px}
.tape::-webkit-scrollbar-track,.rail::-webkit-scrollbar-track,
.detail::-webkit-scrollbar-track,.docview::-webkit-scrollbar-track{background:transparent}
.tape::-webkit-scrollbar-thumb,.rail::-webkit-scrollbar-thumb,
.detail::-webkit-scrollbar-thumb,.docview::-webkit-scrollbar-thumb{
  background:var(--border2); border:3px solid transparent; background-clip:content-box;
  border-radius:6px;
}
.tape::-webkit-scrollbar-thumb:hover,.rail::-webkit-scrollbar-thumb:hover,
.detail::-webkit-scrollbar-thumb:hover,.docview::-webkit-scrollbar-thumb:hover{
  background:var(--dim); background-clip:content-box;
}
.tape::-webkit-scrollbar-corner,.rail::-webkit-scrollbar-corner,
.detail::-webkit-scrollbar-corner,.docview::-webkit-scrollbar-corner{background:transparent}
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:11.5px; color:var(--fg);
  background:var(--bg); border:1px solid var(--border2); border-radius:14px;
  padding:7px 11px; min-height:34px; cursor:pointer; white-space:nowrap;
}
.chip.on{background:var(--row-sel);border-color:var(--sel-bar);color:var(--fg-strong)}
.chip .n{font-family:var(--mono);font-size:10.5px;color:var(--label)}
.chip.on .n{color:var(--fg-strong)}

/* ── the strip's overflow menu (mobile only) ── */
.navbtn{
  display:none; align-items:center; justify-content:center; margin-left:auto;
  background:transparent; border:0; color:var(--label); cursor:pointer;
  min-width:44px; min-height:32px; font-size:15px; line-height:1;
}
.navbtn:hover{color:var(--fg-strong)}
.navmenu{
  display:none; position:fixed; right:6px; top:34px; z-index:50;
  background:var(--panel); border:1px solid var(--border2); border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.4); padding:4px; min-width:180px;
}
.navmenu.open{display:block}
.navmenu a{
  display:block; padding:11px 12px; font-family:var(--sans); font-size:13px;
  color:var(--fg); border-bottom:0; border-radius:3px;
}
.navmenu a:hover{background:var(--row-hover);color:var(--fg-strong)}
.navmenu a.on{color:var(--fg-strong);background:var(--row-sel)}

/* the sheet furniture is mobile-only; desktop keeps the docked pane */
.detail .sheetbar{display:none}
.sheetscrim{display:none}

/* ── locked cards ────────────────────────────────────────────────────────────
   A locked row is a PAYWALL TEASE, not an empty line. It carries an open row's
   visual weight — a lock, the coarse class, a ticking "opens in", a way in, and
   shimmer bars where the withheld sentence would be — so it reads as "there is
   alpha here you cannot see yet" rather than as a broken blank.

   THE SHIMMER IS NOT A BLUR OVER REAL TEXT. There is no real text: the server never
   sent it. The bars are a redaction placeholder sized like words, which is honest
   about being a redaction. Faking plausible text would be deception; this is not
   that. */
.row.locked{align-items:center}
.lockcard{display:flex;flex-direction:column;gap:5px;min-width:0;padding:2px 0}
.lockmain{display:flex;align-items:center;gap:7px;min-width:0}
.lockdot{display:inline-flex;flex:0 0 auto;color:var(--label)}
.lockico{width:12px;height:12px;display:block}
.lockclass{font-size:12.5px;color:var(--fg);text-transform:capitalize;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.locked:hover .lockclass{color:var(--fg-strong)}
.lockfoot{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.lockfoot .opensin{color:var(--label)}
.lockfoot .sep{color:var(--dimmer)}
.lockcta{color:var(--up);border-bottom:1px solid transparent;text-decoration:none;white-space:nowrap}
.lockcta:hover{border-bottom-color:currentColor}

/* the redaction shimmer */
.skel{display:flex;gap:6px;align-items:center}
.skel.detail{flex-direction:column;align-items:stretch;gap:7px;margin:12px 0}
.sbar{height:8px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--border2) 10%,var(--border) 24%,var(--border2) 38%);
  background-size:600px 100%;animation:ma-shimmer 1.7s linear infinite}
.sbar.w1{width:34%} .sbar.w2{width:22%} .sbar.w3{width:52%} .sbar.wn{width:40px}
.skel.detail .sbar{height:10px}
@keyframes ma-shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}
@media (prefers-reduced-motion:reduce){.sbar{animation:none}}

/* A COMMITMENT IS THE MOST VALUABLE THING A FREE READER SEES, and looks it: an
   accent bar, its asset named in mono, and a louder "resolves in". */
.row.locked.commit{border-left-color:var(--up)}
.lockcard.commit .lockclass{font-family:var(--mono);color:var(--fg-strong);font-size:12.5px}
.lockcard.commit .committed{color:var(--up);font-family:var(--sans);font-weight:600;text-transform:none}
.commitmeta{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;color:var(--label)}
.commitmeta .opensin{color:var(--fg-strong)}
.commitmeta .hush{color:var(--dim)}
.commitmeta .sep{color:var(--dimmer)}
.row.locked.commit .cf .lockval{font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--label)}

.dhead .dtag.locked{color:var(--label);border-color:var(--border2)}
.dhead .committed{color:var(--up);font-family:var(--sans);font-size:12px;font-weight:600}
.unlockcta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--border)}
.unlockcta .why{font-size:11px;color:var(--dim)}
/* a record opened as a free sample says so, so a subscriber understands why this
   one is readable when its neighbours are not */
.tag.sample,.dtag.sample{color:var(--up);border-color:var(--up)}