/* ── fomi · application shell ────────────────────────────────────── */

/* ═══ BAR ═══════════════════════════════════════════════════════════ */

#bar {
  position: sticky; top: 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: stretch;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex; align-items: center; gap: 7px;
  padding: 0 var(--s5) 0 var(--pad);
  font-size: 21px; font-weight: 900; letter-spacing: -0.06em;
  border-right: 1px solid var(--line);
}
/* the eye out of the logo's O, at the size of a full stop */
.brand i {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, var(--on-acc) 0 34%, var(--acc) 35%);
  transform: translateY(3px);
  transition: transform var(--med);
}
.brand:hover i { transform: translateY(3px) scale(1.22); }

.bar-cells { display: flex; align-items: stretch; min-width: 0; }

.cell {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  border-right: 1px solid var(--line);
  font-size: var(--t-lbl); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.cell b {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cell[data-live] { color: var(--ink); letter-spacing: 0.1em; }

.dot {
  width: 6px; height: 6px; background: var(--acc); border-radius: 50%;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none } }

.bar-right { margin-left: auto; display: flex; align-items: stretch; }

.kbd-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-left: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  transition: color var(--fast), background var(--fast);
}
.kbd-btn:hover { color: var(--ink); background: var(--bg-2); }

.ico-btn {
  width: var(--bar-h);
  display: grid; place-items: center;
  border-left: 1px solid var(--line);
  font-size: 15px; color: var(--ink-3);
  transition: color var(--fast), background var(--fast);
}
.ico-btn:hover { color: var(--ink); background: var(--bg-2); }

/* ═══ SHELL ═════════════════════════════════════════════════════════ */

#shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--side-w);
  min-height: calc(100dvh - var(--bar-h));
}

/* ═══ RAIL ══════════════════════════════════════════════════════════ */

#rail {
  position: sticky; top: var(--bar-h);
  align-self: start;
  height: calc(100dvh - var(--bar-h));
  display: flex; flex-direction: column;
  padding: var(--s5) 0 var(--s4);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.nav { margin-bottom: var(--s7); }
.nav a {
  position: relative;
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px var(--s5) 7px calc(var(--s5) - 2px);
  border-left: 2px solid transparent;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink-2);
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}
.nav a .n {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  color: var(--ink-3);
  transition: color var(--fast);
}
.nav a:hover { color: var(--ink); background: var(--bg-2); }
.nav a[aria-current="true"] {
  color: var(--ink); background: var(--bg-2);
  border-left-color: var(--acc);
  font-weight: 700;
}
.nav a[aria-current="true"] .n { color: var(--acc); }

.rail-blk {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
}
.rail-blk .lbl { margin-bottom: 9px; }
.seed-row { display: flex; gap: 6px; }
.rail-blk .fine { margin-top: 8px; }

.segbar { display: flex; border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; }
.segbar button {
  flex: 1; height: 28px;
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
  border-right: 1px solid var(--line-2);
  transition: color var(--fast), background var(--fast);
}
.segbar button:last-child { border-right: 0; }
.segbar button:hover { color: var(--ink); background: var(--bg-2); }
.segbar button.on { color: var(--ink-inv); background: var(--ink); }

.rail-foot {
  margin-top: auto; padding: var(--s4) var(--s5) 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}

/* ═══ MAIN ══════════════════════════════════════════════════════════ */

#main { min-width: 0; container-type: inline-size; container-name: canvas; }

/* ── HERO ── */

/* The headline opens the page now. The eyebrow strip that used to sit
   above it is gone, and its bottom margin was carrying the space between
   the bar and the display type, so that space moved here. */
.hero { position: relative; padding: clamp(64px, 9vw, 140px) 0 0; }
.hero > *:not(.strip) { padding-inline: var(--pad); }

/* The logo's backdrop: a plotting grid with the light behind it. It is
   decoration and it is drawn on a pseudo-element under the content, so
   nothing here can be mistaken for a reading, and the grid is faded out
   before it reaches the strip, where the real numbers start. */
.hero::before {
  content: '';
  position: absolute; inset: 0 0 96px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 82% -10%, var(--glow), transparent 62%),
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.hero > * { position: relative; z-index: 1; }

/* The governing size lives in the @container block further down, this is
   only the fallback for a context with no query container. */
.display {
  font-size: var(--t-display);
  font-weight: 900;
  line-height: 0.86;
  /* Loose enough that outlined glyphs do not touch. The old -0.055em was
     tuned for solid fill, where overlap reads as tight tracking; on a
     stroked line the two outlines cross and it reads as damage. */
  letter-spacing: -0.028em;
  display: grid;
  text-wrap: balance;
}
.display span { display: block; }

/* ── the outlined line ──
   `-webkit-text-stroke` strokes every contour of a glyph independently,
   including the ones that overlap inside a heavy weight. In Inter Tight
   Black the 'e' has its crossbar and bowl joined by overlapping contours,
   so the stroke drew a bar straight through the counter and spurred out
   into the 's'. Canvas strokeText renders the same glyph clean, which is
   what pins it on this property rather than on the font or the size.

   The fix is paint order. The stroke goes down first at twice the width
   we want to see, then an opaque fill in the page colour paints over its
   inner half, covering every interior artifact and leaving only the
   outer half as the visible outline. The letterform still reads hollow
   because the fill matches the background it sits on. */
.display .l2 {
  color: var(--bg);
  -webkit-text-stroke: clamp(2px, 0.023em, 5px) var(--ink);
  paint-order: stroke fill;
  /* a stroke is drawn on both sides of the contour, so a stroked line
     needs more room between glyphs than the same line filled */
  letter-spacing: -0.012em;
  margin-left: 0.04em;
}
.display .l3 { color: var(--acc); margin-left: 0.08em; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: var(--s10);
  align-items: end;
  margin-top: clamp(32px, 4.5vw, 64px);
}
.hero-copy p { max-width: 48ch; font-size: 16.5px; line-height: 1.5; }
.hero-copy p + p { margin-top: 10px; }
.cta { display: flex; align-items: center; gap: var(--s6); margin-top: var(--s6); }

.hero-gauge { border-top: 1px solid var(--line-2); padding-top: 14px; }
.gauge-num {
  display: flex; align-items: baseline; gap: 6px;
  font-size: clamp(44px, 5vw, 68px); font-weight: 800; letter-spacing: -0.05em;
  line-height: 1; margin: 6px 0 12px;
  font-variant-numeric: tabular-nums;
}
.gauge-num i { font-size: 15px; font-style: normal; font-weight: 600; color: var(--ink-3); }
/* No described, non-stablecoin holding yet means no reading, and a gauge
   parked on a number would read as a cold market rather than as silence.
   Hiding the roll and drawing a dash in its place keeps the slot the same
   size, so nothing below it moves when the reading arrives. */
.gauge-num[data-nodata] > * { display: none; }
.gauge-num[data-nodata]::after { content: '—'; color: var(--ink-3); }
.gauge { display: flex; gap: 2px; height: 26px; }
.gauge span { flex: 1; background: var(--line); transition: background var(--fast); }
.gauge span.on { background: var(--ink); }
/* The top of the gauge is the crowded end of the market, not the good
   end, and green is the brand now, so the hot band takes the warm hue. */
.gauge span.hot { background: var(--neg); }
.gauge-meta {
  display: flex; justify-content: space-between;
  margin-top: 9px;
  font-size: var(--t-lbl); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}

/* full-bleed data region, rules, not cards */
.strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip > div {
  padding: 18px var(--s5) 20px;
  border-right: 1px solid var(--line);
}
.strip > div:first-child { padding-left: var(--pad); }
.strip > div:last-child { border-right: 0; }
.strip .num { display: block; font-size: clamp(20px, 1.9vw, 27px); margin-top: 9px; line-height: 1; }
.strip .sub { display: block; margin-top: 7px; font-size: 11px; font-style: normal; color: var(--ink-3); }

/* Boot status. Sits under the strip and only exists while the page is
   still reading; the dot pulses so a slow endpoint looks like waiting
   rather than like a page that has stopped. */
.boot {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s4) var(--pad) 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
}
.boot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc); animation: bootPulse 1.15s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .boot::before { animation: none; } }
@keyframes bootPulse { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }

/* ── SECTION FRAME ── */

.sec { padding: clamp(56px, 6.5vw, 104px) var(--pad) 0; }
.sec:last-of-type { padding-bottom: clamp(56px, 6.5vw, 104px); }
.sec-alt { background: var(--bg-2); border-block: 1px solid var(--line); margin-top: clamp(56px, 6.5vw, 104px); padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px); }

.sec-head {
  display: flex; align-items: center; gap: var(--s4);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: var(--s6);
}
.sec-n {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--acc); letter-spacing: 0.04em;
  transform: translateY(-0.55em);
}
.sec-head h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.045em; }
.sec-rule { flex: 1; height: 1px; background: var(--line-2); }
.sec-meta { color: var(--ink-3); white-space: nowrap; }
.sec-tools { display: flex; align-items: center; gap: var(--s3); min-width: 0; }

/* ── 01 TAPE ── */

.tape-wrap {
  position: relative;
  height: clamp(220px, 26vh, 320px);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
#tapeCanvas { width: 100%; height: 100%; }
.tape-legend {
  position: absolute; inset: 12px auto auto 14px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 70%;
}
.tape-legend b {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.tape-legend b::before { content: ""; width: 10px; height: 2px; background: currentColor; }
.tape-legend b.held { color: var(--acc); font-weight: 700; }
.tape-axis {
  position: absolute; inset: auto 14px 8px 14px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
}

/* ── 02 STREAM ── */

.filters { display: flex; border: 1px solid var(--line-2); border-radius: var(--r2); overflow: hidden; }
.filters button {
  height: 30px; padding: 0 13px;
  font-size: 12px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-3);
  border-right: 1px solid var(--line-2);
  transition: color var(--fast), background var(--fast);
}
.filters button:last-child { border-right: 0; }
.filters button:hover { color: var(--ink); background: var(--bg-2); }
.filters button.on { color: var(--ink-inv); background: var(--ink); }
.sec-tools .inp { width: 168px; }

.term { position: relative; border: 1px solid var(--line); background: var(--bg-2); }

.term-head, .term-row {
  display: grid;
  grid-template-columns: 62px 78px minmax(0, 1fr) 92px;
  gap: var(--s4);
  padding: 0 14px;
  align-items: center;
}
.term-head {
  height: 30px;
  border-bottom: 1px solid var(--line-2);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
  position: sticky; top: 0; z-index: 2; background: var(--bg-2);
}

.term-body {
  height: clamp(340px, 46vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.term-body::-webkit-scrollbar { width: 9px; }
.term-body::-webkit-scrollbar-thumb { background: var(--line-2); }

.term-row {
  min-height: 26px; padding-block: 4px;
  border-left: 2px solid transparent;
  padding-left: 12px;
  font-family: var(--mono); font-size: 12px; line-height: 1.4;
  color: var(--ink-2);
  transition: background var(--fast), border-color var(--fast);
}
.term-row:hover, .term-row.cur { background: var(--bg-3); border-left-color: var(--line-2); color: var(--ink); }
.term-row.cur { border-left-color: var(--acc); }
.term-row .t { color: var(--ink-3); font-size: 11px; }
.term-row .tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 2px; justify-self: start;
}
.term-row[data-a="read"]    .tag { color: var(--ink-3); border: 1px solid var(--line-2); }
.term-row[data-a="refused"] .tag { color: var(--neg); background: var(--neg-dim); }
.term-row[data-a="did"]     .tag { color: var(--ink-inv); background: var(--ink); }
.term-row .sym { color: var(--ink); font-weight: 700; }
.term-row .d { text-align: right; font-variant-numeric: tabular-nums; }
.term-row.in { animation: rowin 200ms var(--ease) both; }
@keyframes rowin { from { opacity: 0; transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) { .term-row.in { animation: none } }

.jump {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  height: 30px; padding: 0 14px;
  background: var(--ink); color: var(--ink-inv);
  font-size: 12px; font-weight: 700; border-radius: var(--r2);
}

/* ── TABLES ── */

.tbl-wrap { border: 1px solid var(--line); overflow-x: auto; }
.tbl { font-size: 13.5px; }
.tbl thead th {
  position: sticky; top: var(--bar-h); z-index: 1;
  background: var(--bg-2);
  padding: 9px 14px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
.tbl tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tbl .note {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink-3); font-size: 12.5px;
}
.tbl-tight tbody td { padding: 8px 14px; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--fast); }
.tbl tbody tr:hover { background: var(--bg-2); }
.tbl .ta-r { text-align: right; }
.tbl .w-spk { width: 86px; }
.tbl .w-cnv { width: 78px; }
.tbl thead th { padding-inline: 12px; }

.tok { display: flex; align-items: baseline; gap: 9px; }
.tok b { font-weight: 700; letter-spacing: -0.02em; }
.tok span { font-size: 11.5px; color: var(--ink-3); }

.conv { display: flex; gap: 2px; }
.conv i { width: 12px; height: 10px; background: var(--line-2); }
.conv i.on { background: var(--ink); }
.conv i.on:nth-child(n+4) { background: var(--acc); }

.empty { padding: var(--s10) var(--s6); text-align: left; max-width: 46ch; }
.empty h3 { font-size: var(--t-h3); margin-bottom: 8px; }
.empty p { color: var(--ink-2); font-size: 14.5px; margin-bottom: 14px; }

/* ── 04 CHART ── */

.symsel {
  display: flex; gap: 0;
  border: 1px solid var(--line-2); border-radius: var(--r2);
  max-width: min(780px, 54vw);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.symsel::-webkit-scrollbar { display: none; }
.symsel button { flex: none; }
.symsel button {
  height: 30px; padding: 0 11px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--ink-3); border-right: 1px solid var(--line-2);
  transition: color var(--fast), background var(--fast);
}
.symsel button:last-child { border-right: 0; }
.symsel button:hover { color: var(--ink); background: var(--bg-2); }
.symsel button.on { color: var(--ink-inv); background: var(--ink); font-weight: 700; }

.chart-wrap { border: 1px solid var(--line); background: var(--bg-2); }
.chart-hud {
  display: flex; align-items: center; gap: var(--s5);
  height: 34px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden;
}
.chart-hud b { color: var(--ink); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.chart-hud .ta-r { margin-left: auto; }
#candles { width: 100%; height: clamp(280px, 40vh, 440px); cursor: crosshair; }

/* ── 05 REFUSALS ── */

.ref-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s9); }
.ref-list { border-top: 1px solid var(--line); }
/* The ticker column sizes to the ticker. It was a flat 74px, which fits
   about six characters, so a name like $PUMPCAT ran straight over the
   refusal text beside it. The reason column is the 1fr, so it gives the
   width back. */
.ref-list li {
  display: grid; grid-template-columns: minmax(74px, max-content) minmax(0, 1fr) auto;
  gap: var(--s4); align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
/* A ticker is a short string by convention, not by rule. Held on one line
   and cut at a width that still leaves the reason room to be read. */
.ref-list .rs {
  font-size: 17px; font-weight: 800; letter-spacing: -0.03em;
  max-width: 15ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-list .rw { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.ref-list .rm { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.ref-list .rw em { font-style: normal; color: var(--ink); }

.ref-tally ul { border-top: 1px solid var(--line); margin-top: 10px; }
.ref-tally li {
  display: grid; grid-template-columns: minmax(0,1fr) 34px;
  align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.ref-tally li b { font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right; }
.ref-tally .bar { grid-column: 1 / -1; height: 2px; background: var(--line-2); }
.ref-tally .bar i { display: block; height: 100%; background: var(--neg); }
.ref-tally .fine { margin-top: var(--s5); }

/* ── 06 THESIS ── */

.pull {
  font-size: clamp(28px, 3.9vw, 60px);
  font-weight: 800; letter-spacing: -0.045em; line-height: 1.03;
  max-width: 21ch;
  margin: clamp(16px, 2vw, 32px) 0 clamp(40px, 5vw, 72px);
}
.pull em { font-style: normal; color: var(--acc); }

/* The plain-language walk-through. Four steps across, numbered, one line of
   copy each, it exists to be scanned, so anything that made it denser than
   a glance would defeat it. */
.flow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line-2);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.flow li { padding: var(--s6) var(--s6) var(--s6) 0; border-right: 1px solid var(--line); }
.flow li:last-child { border-right: 0; padding-right: 0; }
.flow li + li { padding-left: var(--s6); }
.flow-n {
  display: block; font-family: var(--mono);
  font-size: var(--t-lbl); font-weight: 700; letter-spacing: 0.08em;
  color: var(--acc); margin-bottom: 14px;
}
.flow h3 {
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.flow p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 30ch; }

/* Same breakpoints the rest of this section uses. The rail and the data
   column eat ~540px, so four across stops fitting well before the viewport
   looks narrow, which is why 1180 is where `.cols` gives up too. */
@media (max-width: 1180px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow li:nth-child(2n) { border-right: 0; padding-right: 0; }
  .flow li:nth-child(2n+1) { padding-left: 0; }
  .flow li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; }
  .flow li,
  .flow li:nth-child(2n+1) { padding: var(--s5) 0; border-right: 0; }
  .flow li + li { border-top: 1px solid var(--line); padding-left: 0; }
}

.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.cols article { padding: var(--s6) var(--s6) var(--s6) 0; border-right: 1px solid var(--line); }
.cols article + article { padding-left: var(--s6); }
/* Three to a row, and the grid gap is zero, so the rules have to be drawn by
   position rather than by "first" and "last": the third column carries no
   right-hand rule, the first column of every row is flush left, and any row
   after the first draws its own top rule. */
.cols article:nth-child(3n) { border-right: 0; padding-right: 0; }
.cols article:nth-child(3n+1) { padding-left: 0; }
.cols article:nth-child(n+4) { border-top: 1px solid var(--line); }
.cols h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 12px; }
.cols p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.cols p + p { margin-top: 10px; }

/* ── FOOTER ── */

#foot { margin-top: clamp(64px, 8vw, 120px); border-top: 1px solid var(--ink); }
.foot-top {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s8); align-items: end;
  padding: var(--s8) var(--pad) var(--s9);
}
.foot-mark { font-size: clamp(72px, 13vw, 190px); font-weight: 900; letter-spacing: -0.075em; line-height: 0.78; }
.foot-say { max-width: 40ch; font-size: 14px; color: var(--ink-3); padding-bottom: 8px; }
.foot-rules {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.foot-rules > div { padding: 16px var(--s5); border-right: 1px solid var(--line); }
.foot-rules > div:first-child { padding-left: var(--pad); }
.foot-rules > div:last-child { border-right: 0; }
.foot-rules .lbl { margin-bottom: 7px; }

/* ═══ ASIDE ═════════════════════════════════════════════════════════ */

/* The column is one scroller, and the panels inside it keep their own
   height. It used to be `overflow: hidden` over flex children that were
   free to shrink, which meant every panel was squeezed under its content
   height and the text ran straight out of the bottom of its own box and
   over the next panel's header. Nothing was clipped, so it read as
   damage. Panels no longer shrink, and the overflow is a scroll. */
#side {
  position: sticky; top: var(--bar-h);
  align-self: start;
  height: calc(100dvh - var(--bar-h));
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
#side::-webkit-scrollbar { width: 9px; }
#side::-webkit-scrollbar-thumb { background: var(--line-2); }
.pnl {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column;
  min-height: 0;
}
/* fills the gap when the panels are short, keeps its content height when
   they are not */
.pnl-grow { flex: 1 0 auto; border-bottom: 0; }
.pnl-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 34px; padding: 0 var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

/* The one list in here that has no natural bound: it is as long as the
   screen found contenders. Capped so it cannot push the panels below it
   off the column. */
.cont { overflow-y: auto; max-height: 42vh; }
.cont li {
  display: grid; grid-template-columns: 22px minmax(0,1fr) 54px;
  gap: 10px; align-items: center;
  padding: 10px var(--s4);
  border-bottom: 1px solid var(--line);
  transition: background var(--fast);
}
.cont li:hover { background: var(--bg-2); }
.cont li:last-child { border-bottom: 0; }
.cont .r { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink-3); }
.cont li.held .r { color: var(--acc); }
.cont .s { font-family: var(--mono); font-size: 12px; color: var(--ink); font-weight: 500; }
.cont .cv { display: flex; gap: 2px; margin-top: 5px; }
.cont .cv i { width: 100%; height: 3px; background: var(--line-2); }
.cont .cv i.on { background: var(--ink); }
.cont .ch { font-family: var(--mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

.kv { padding: var(--s2) 0; }
.kv > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px var(--s4);
  font-size: 12.5px; color: var(--ink-3);
}
.kv b { font-family: var(--mono); font-size: 12.5px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

.lastref {
  padding: var(--s4);
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
  overflow-y: auto;
}
.lastref b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.lastref .why { color: var(--neg); }

/* ═══ DIALOGS ═══════════════════════════════════════════════════════ */

dialog {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--ink);
  padding: 0;
  border-radius: var(--r3);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
:root[data-theme="light"] dialog::backdrop { background: rgba(20,18,14,.3); }

#palette {
  width: min(560px, calc(100vw - 32px));
  margin-top: 12vh;
}
.pal-inp {
  width: 100%; height: 52px; padding: 0 18px;
  background: none; border: 0; border-bottom: 1px solid var(--line-2);
  font-size: 17px; font-weight: 500; letter-spacing: -0.02em;
}
.pal-inp:focus { outline: none; }
.pal-inp::placeholder { color: var(--ink-3); }
.pal-list { max-height: 44vh; overflow-y: auto; padding: 6px; }
.pal-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r2);
  font-size: 14px; cursor: pointer;
}
.pal-list li[aria-selected="true"] { background: var(--ink); color: var(--ink-inv); }
.pal-list li .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.pal-list li[aria-selected="true"] .k { color: var(--ink-inv); opacity: .6; }
.pal-list li .m { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.pal-list li[aria-selected="true"] .m { color: var(--ink-inv); opacity: .7; }
.pal-foot {
  display: flex; gap: 16px; padding: 9px 14px;
  border-top: 1px solid var(--line);
  font-size: 10.5px; color: var(--ink-3);
}
.pal-foot .ta-r { margin-left: auto; }

#keys { width: min(420px, calc(100vw - 32px)); padding: var(--s6); }
#keys h3 { font-size: var(--t-h3); margin-bottom: var(--s5); }
.keys-dl { display: grid; grid-template-columns: 110px 1fr; gap: 10px 16px; margin-bottom: var(--s6); }
.keys-dl dd { font-size: 13.5px; color: var(--ink-2); }

/* ═══ DISPLAY TYPE, SIZED TO THE COLUMN ═════════════════════════════
   The rail and the data column eat ~500px of viewport; vw units don't
   know that, so the big type is measured against #main instead.
   ------------------------------------------------------------------ */

@container canvas (min-width: 1px) {
  /* ~20cqw fits about seven characters in this column. Measured, not
     guessed: at 21.5cqw a twelve-character line rendered 989px wide into
     795px of space, which is what made the outlined line cross itself.
     If a headline word grows past seven characters, this number has to
     come down with it. */
  .display   { font-size: clamp(52px, 20cqw, 280px); }
  .foot-mark { font-size: clamp(72px, 21cqw, 300px); }
  .pull      { font-size: clamp(28px, 6.6cqw, 78px); }
  .sec-head h2 { font-size: clamp(26px, 4.6cqw, 52px); }
}

/* When the canvas is narrow the per-row tape is the first thing to go,
   it is the least precise column on the table. */
@container canvas (max-width: 830px) {
  .tbl .w-spk { display: none; }
}

/* ═══ SECTION REVEAL ════════════════════════════════════════════════ */

/* Gated on a class JS sets, so the page is never invisible without it. */
.js-reveal [data-sec] {
  opacity: 0; transform: translateY(10px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.js-reveal [data-sec].seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-sec] { opacity: 1; transform: none; }
}

/* ═══ RESPONSIVE, redesigned, not stacked ══════════════════════════ */

@media (max-width: 1400px) { :root { --side-w: 288px; } }

@media (max-width: 1180px) {
  #shell { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  #side { display: none; }
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,0.8fr); gap: var(--s7); }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .strip > div:nth-child(3) { border-right: 0; }
  .strip > div:nth-child(4) { padding-left: var(--pad); }
  .strip > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .ref-grid { grid-template-columns: minmax(0,1fr); gap: var(--s7); }
}

@media (max-width: 900px) {
  :root { --rail-w: 0px; --bar-h: 48px; }
  .hide-md { display: none !important; }

  #shell { grid-template-columns: minmax(0, 1fr); }

  /* rail becomes a dense horizontal rule of sections */
  #rail {
    position: sticky; top: var(--bar-h); z-index: 50;
    height: auto; width: 100%;
    flex-direction: row; align-items: stretch;
    padding: 0;
    background: var(--bg);
    border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
  }
  #rail::-webkit-scrollbar { display: none; }
  #rail .nav { display: flex; margin: 0; }
  #rail .nav a {
    border-left: 0; border-bottom: 2px solid transparent;
    padding: 11px 14px; white-space: nowrap; background: none;
  }
  #rail .nav a[aria-current="true"] { border-bottom-color: var(--acc); background: none; }
  #rail .rail-blk, #rail .rail-foot { display: none; }

  .cols { grid-template-columns: 1fr; }
  .cols article,
  .cols article:nth-child(3n),
  .cols article:nth-child(n+4) {
    border-right: 0; border-top: 0;
    border-bottom: 1px solid var(--line); padding: var(--s5) 0;
  }
  .cols article + article { padding-left: 0; }
  .cols article:last-child { border-bottom: 0; }

  .term-head, .term-row { grid-template-columns: 52px 68px minmax(0,1fr); gap: 10px; }
  .term-head span:last-child, .term-row .d { display: none; }

  .foot-top { grid-template-columns: 1fr; gap: var(--s5); }
  .foot-rules { grid-template-columns: repeat(2, 1fr); }
  .foot-rules > div:nth-child(2) { border-right: 0; }
  .foot-rules > div:nth-child(3) { padding-left: var(--pad); }
  .foot-rules > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  /* the rail is a strip and the aside is gone here, so #main is close to
     the viewport and the headline can take a bigger share of it */
  .display { font-size: clamp(38px, 13cqw, 92px); letter-spacing: -0.022em; }

  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); align-items: start; }
  .hero-gauge { max-width: 320px; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip > div { padding: 14px var(--s4) 16px; }
  .strip > div:nth-child(odd) { padding-left: var(--pad); }
  .strip > div:nth-child(even) { border-right: 0; }
  .strip > div:nth-child(-n+4) { border-bottom: 1px solid var(--line); }

  .sec-head { flex-wrap: wrap; row-gap: 12px; }
  .sec-rule { display: none; }
  .sec-tools { width: 100%; }
  .sec-tools .inp { flex: 1; width: auto; }

  .cta { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .cta .btn, .cta .btn-txt { justify-content: center; }

  /* Book, redesigned for the hand: ticker, what it cost, where it is now,
     and the only number that decides anything. Conviction moves to the
     stream, the absolute P&L is redundant next to the percentage. */
  .tbl .w-spk, .tbl .w-cnv, .tbl .w-pnl { display: none; }
  .tok span { display: none; }
  .tbl { font-size: 12.5px; }
  .tbl tbody td, .tbl thead th { padding-inline: 9px; }
  .tbl tbody td { padding-block: 12px; }

  .ref-list li { grid-template-columns: minmax(60px, max-content) minmax(0,1fr); }
  .ref-list .rm { grid-column: 2; }
}

/* ── chain source additions ─────────────────────────────────────────
   Everything below exists because the data became real: links out to
   the explorer, a connection state that can actually go wrong, and a
   visible difference between a fill that happened and a verdict that
   did not.
   ------------------------------------------------------------------ */

/* the wallet under the brand, and anything else linking out of the bar */
.cell a {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  transition: border-color var(--fast);
}
.cell a:hover { border-bottom-color: var(--acc); }
.cell a[href="#"], .cell a:not([href]) { border-bottom-color: transparent; color: var(--ink-3); }

/* a feed that can be degraded needs to look degraded */
.cell.warn { color: var(--neg); }
.cell.warn .dot { background: var(--neg); animation: none; opacity: 1; }
.cell:not([data-live="1"]) .dot { opacity: 0.4; animation: none; }

/* a rejected address should say so without a dialog */
.inp.bad { border-color: var(--neg); background: var(--neg-dim); }

/* section footnotes, the disclosures that have to sit with the data */
.sec-foot {
  margin-top: var(--s4);
  max-width: 78ch;
  border-left: 2px solid var(--line-2);
  padding-left: var(--s4);
}
.sec-foot b { color: var(--ink-2); font-weight: 600; }

/* a real fill links to its signature; a replayed one is dimmer than live */
.term-row a.sym { border-bottom: 1px solid var(--line-2); }
.term-row a.sym:hover { border-bottom-color: var(--acc); }
.term-row.replay .tag { opacity: 0.55; }
.term-row[data-a="did"] .tag { letter-spacing: 0.06em; }

/* token cells become links to the mint once there is a mint to link to */
a.tok b { border-bottom: 1px solid transparent; transition: border-color var(--fast); }
a.tok:hover b { border-bottom-color: var(--acc); }

.tbl .note a {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.tbl .note a:hover { color: var(--ink); border-bottom-color: var(--acc); }

/* an unsourceable number is a dash, and the dash should read as neutral */
.tbl td[title] { cursor: help; }

/* cash in the legend: present, and visibly not a position */
.tape-legend b.cash { opacity: 0.42; font-style: italic; }

/* cash rows are part of the balance sheet, not part of the thesis */
.tbl tr.is-cash .tok b { color: var(--ink-2); }
.tbl tr.is-cash .conv { opacity: 0.3; }

/* whether a refusal was about a name the wallet owns or one it does not */
.ref-list .rsrc {
  display: block; margin-top: 3px;
  font-size: 10px; font-style: normal; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
}

/* an empty chart should say why, not just sit there */
.chart-wrap { position: relative; }
.chart-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--s6);
  background: color-mix(in oklab, var(--bg-2) 88%, transparent);
}
.chart-empty p {
  max-width: 42ch; text-align: center;
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink-3);
}

/* a repeated micro-trade collapses into one row with a run count */
.term-row .run {
  display: inline-block; margin-left: 8px;
  padding: 1px 5px; border-radius: 2px;
  background: var(--line-2); color: var(--ink);
  font-family: var(--mono); font-size: 10px; font-weight: 700; font-style: normal;
  vertical-align: 1px;
}

/* an explanation inside a key/value list, when "empty" needs a reason */
.kv .kv-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-3);
}

/* ── 06 TECHNOLOGY ── */

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: var(--s9);
}
.tech-cell {
  padding: 16px var(--s5) 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tech-cell b {
  display: block; margin: 8px 0 6px;
  font-family: var(--mono); font-size: 17px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tech-cell i {
  display: block; font-style: normal;
  font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
}

/* ── how this one works ──
   The readout that turns the measurements above into sentences. Two up
   rather than the three of `.cols`, these are paragraphs with numbers
   quoted inside them, and at three columns the measure gets too narrow to
   read one without breaking a figure across lines. */
.mech-head { margin-bottom: var(--s6); }
.mech-head h3 {
  font-size: clamp(20px, 2.2vw, 30px); font-weight: 800;
  letter-spacing: -0.03em; margin-bottom: 10px;
}
.mech-head p { font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 56ch; }

.mech {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--line-2);
  margin-bottom: var(--s9);
}
.mech article { padding: var(--s6) var(--s6) var(--s6) 0; border-right: 1px solid var(--line); }
/* Two to a row with a zero gap, so the rules are drawn by position: the
   even column carries no right-hand rule, the odd column is flush left,
   and any row after the first draws its own top rule. */
.mech article:nth-child(2n) { border-right: 0; padding-right: 0; }
.mech article:nth-child(2n+1) { padding-left: 0; }
.mech article:nth-child(n+3) { border-top: 1px solid var(--line); }
/* The readout only prints the claims it has measurements for, so the count
   is 5 to 8 depending on the wallet. An odd count leaves the last article
   alone on its row with a rule down its right-hand side and nothing beside
   it to separate. */
.mech article:last-child { border-right: 0; }
.mech h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--acc); margin-bottom: 10px;
}
.mech p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }

@media (max-width: 900px) {
  .mech { grid-template-columns: 1fr; }
  .mech article,
  .mech article:nth-child(2n+1) { padding: var(--s5) 0; border-right: 0; }
  .mech article + article { border-top: 1px solid var(--line); }
}

/* ── broadcast draft ──
   The message shown before it is anything: monospaced because every line
   in it is a measurement, and wrapped rather than scrolled because a post
   with a line hidden off the right edge is a post nobody actually read. */
.post-draft {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--acc);
  background: var(--bg-2, transparent);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.post-acts { display: flex; align-items: center; gap: var(--s5); margin-bottom: 10px; }
.post-acts button { font: inherit; }

/* ── reply queue ── */
.rq li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.rq-h { font-size: 11px; color: var(--acc); margin-bottom: 5px; }
.rq-t {
  font-size: 12px; line-height: 1.5; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.rq-a { display: flex; gap: var(--s5); margin-top: 7px; }
.rq-a button { font: inherit; font-size: 11.5px; }
.rq-a button[disabled] { opacity: 0.5; }

/* ── the screened field ── */

.field li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.field li:last-child { border-bottom: 0; }
.field .fa { font-size: 11.5px; color: var(--ink-3); border-bottom: 1px solid transparent; }
.field .fa:hover { color: var(--ink); border-bottom-color: var(--acc); }
.field .fm { color: var(--ink-3); font-size: 11px; }
.field .fp { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.field li.won .fa { color: var(--ink); font-weight: 700; }
.field li.won { border-left: 2px solid var(--acc); padding-left: 8px; margin-left: -10px; }

/* ── the page cannot reach the chain and has nothing to fake ── */
#deadEnd {
  margin: var(--s9) var(--pad);
  padding: var(--s7);
  border: 1px solid var(--neg);
  background: var(--neg-dim);
  max-width: 62ch;
}
#deadEnd h3 { font-size: var(--t-h3); margin-bottom: var(--s3); }
#deadEnd p { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
#deadEnd p + p { margin-top: var(--s3); }