/* ==========================================================================
   LEDGER GRID: style pack for direction D2 Brutal Ledger (launch-machine)
   Burn, buyback and treasury tokens, where the numbers are the product.
   Paper ground, ink type, 1 px rules, radius 0, one signal colour.
   Motion is hard cuts and counters: 0 ms colour flips, 180 ms slides,
   bars cut to scale in steps. No blur, no glow, no gradients.
   Every size, space, colour and easing below is a token (gate C1/T2/L1/M2).
   Section 1 mirrors site/tokens.css built from tokens.json by tokens-build.mjs.
   ========================================================================== */

/* Archivo (wdth 62-125, wght 100-900) + IBM Plex Mono 400/600, OFL-1.1 (fonts/OFL-*.txt), Fontsource 5.3.0, latin. */
@font-face { font-family: "Archivo"; src: url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --font-display: "Archivo", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* 7 steps, fluid 375 -> 1440 (exact at both ends) */
  --fs-m1: clamp(0.8rem, 0.8145rem + -0.0617vw, 0.7589rem);   /* 12.8 -> 12.1  mono labels, captions */
  --fs-0: clamp(1rem, 0.978rem + 0.0939vw, 1.0625rem);         /* 16 -> 17      body, table */
  --fs-1: clamp(1.25rem, 1.1664rem + 0.3568vw, 1.4875rem);     /* 20 -> 23.8    lede, h3, summary */
  --fs-2: clamp(1.5625rem, 1.3794rem + 0.7812vw, 2.0825rem);   /* 25 -> 33.3    legend figures */
  --fs-3: clamp(1.9531rem, 1.6143rem + 1.4458vw, 2.9155rem);   /* 31 -> 46.6    h2 */
  --fs-4: clamp(2.4414rem, 1.8638rem + 2.4643vw, 4.0817rem);   /* 39 -> 65.3    h1, counters, step numbers */
  --fs-5: clamp(3.0518rem, 2.1142rem + 4.0002vw, 5.7144rem);   /* 48.8 -> 91.4  total burned */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --radius-none: 0px; --radius-pill: 999px;   /* pill = the status dot, nothing else */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-cut: steps(4, end);                   /* bars cut to scale */
  --dur-press: 0ms; --dur-ui: 180ms; --dur-count: 900ms; --dur-hold: 1200ms; --stagger: 16ms;
  /* paper (default) */
  --color-ground: #f3f1ea;
  --color-surface: #e8e5db;
  --color-ink: #11110f;
  --color-ink-soft: #3b3a35;
  --color-ink-mute: #5a5850;
  --color-line: #11110f;
  --color-line-soft: #c4c0b4;
  --color-accent: #e8590c;      /* the one signal colour, <= 6% of pixels */
  --color-accent-ink: #11110f;
  --color-up: #1f6f3a;
  --color-down: #a8123e;        /* bad outcomes only */
  /* chart series (data colours, not UI colours) */
  --data-1: #11110f; --data-2: #5a5850; --data-3: #c4c0b4; --data-4: #e8590c;
  --rule: 1px solid var(--color-line);
  --rule-soft: 1px solid var(--color-line-soft);
  --gutter: var(--sp-4);
  --bar-h: 64px;
}
@media (min-width: 768px) { :root { --gutter: var(--sp-6); } }

/* ink black alternate: <html data-theme="dark"> */
:root[data-theme="dark"] {
  --color-ground: #0d0d0c; --color-surface: #181816; --color-ink: #f1efe8; --color-ink-soft: #c9c6bd; --color-ink-mute: #9b988e;
  --color-line: #f1efe8; --color-line-soft: #3a3933; --color-accent: #ff6a1f; --color-accent-ink: #0d0d0c; --color-up: #57c983; --color-down: #ff5c7a;
  --data-1: #f1efe8; --data-2: #9b988e; --data-3: #3a3933; --data-4: #ff6a1f;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-ui: 0ms; --dur-count: 0ms; --stagger: 0ms; } }

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { background: var(--color-ground); color-scheme: light; -webkit-text-size-adjust: 100%; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  background: var(--color-ground); color: var(--color-ink);
  font: 400 var(--fs-0)/1.5 var(--font-display); font-stretch: 100%;
  font-variant-numeric: tabular-nums;           /* numbers are the product: tabular everywhere (T5) */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
table { border-collapse: collapse; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
::selection { background: var(--color-ink); color: var(--color-ground); }
.mono { font-family: var(--font-mono); }
.lbl {
  font: 600 var(--fs-m1)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-mute);
}
.lbl b { color: var(--color-ink); font-weight: 600; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.skip {
  position: absolute; left: var(--gutter); top: -64px; z-index: 10; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--sp-4); background: var(--color-ink); color: var(--color-ground);
  font: 600 var(--fs-m1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
}
.skip:focus { top: var(--sp-2); }
.wrap { padding-inline: var(--gutter); }

/* ---------- 3. Top bar --------------------------------------------------- */
.bar {
  display: flex; align-items: center; gap: var(--sp-5); min-height: var(--bar-h); border-bottom: var(--rule);
}
.mark { font: 900 var(--fs-1)/1 var(--font-display); font-stretch: 62%; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; }
.nav { display: none; gap: 0; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-4); border-left: var(--rule-soft);
  font: 600 var(--fs-m1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.nav a:hover { background: var(--color-ink); color: var(--color-ground); transition: none; }
.status { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; min-height: 44px; }
.nav + .status { margin-left: 0; padding-left: var(--sp-4); border-left: var(--rule-soft); }
@media (min-width: 900px) { .nav { display: flex; } }
.dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-accent); flex: none; }
[data-live] .dot { animation: blink var(--dur-hold) steps(2, jump-none) infinite; }
@keyframes blink { from { opacity: 1; } to { opacity: 0; } }

/* ---------- 4. Hero: THE LEDGER ----------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: var(--rule); }
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-5); padding-block: var(--sp-6); }
h1 {
  font: 900 var(--fs-4)/.92 var(--font-display); font-stretch: 62%; letter-spacing: -.01em; text-transform: uppercase;
  max-width: 11ch; text-wrap: balance;
}
.lede { max-width: 34ch; font-size: var(--fs-1); line-height: 1.3; color: var(--color-ink-soft); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-5);
  background: var(--color-ink); color: var(--color-ground); border: var(--rule);
  font: 600 var(--fs-0)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  transition: none;                          /* hard cut, --dur-press = 0 */
}
.btn:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn:active { transform: translateY(2px); }
.textlink { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; font: 600 var(--fs-0)/1 var(--font-mono);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.textlink:hover { text-decoration-thickness: 3px; }

/* counter band */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: var(--rule); }
.cell { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; min-width: 0; }
.cell + .cell { border-left: var(--rule); padding-left: var(--sp-4); }
.cell.total { grid-column: 1 / -1; border-bottom: var(--rule); }
.cell.total + .cell { border-left: 0; padding-left: 0; }
.num {
  font: 900 var(--fs-4)/.9 var(--font-display); font-stretch: 62%; letter-spacing: 0; font-variant-numeric: tabular-nums;
  white-space: nowrap; transition: none;
}
.total .num { font-size: var(--fs-4); color: var(--color-ink); }
.cell .num { color: var(--color-ink); }
.num.hit { color: var(--color-accent); }    /* 0 ms flip on event, cut back after --dur-hold */
.sub { font: 400 var(--fs-m1)/1.3 var(--font-mono); color: var(--color-ink-mute); text-transform: uppercase; letter-spacing: .04em; }

/* official token address strip */
.addr {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px;
  padding: 0 var(--sp-3); border: var(--rule); background: var(--color-surface); text-align: left; cursor: default;
}
.addr .lbl { color: var(--color-ink); padding-right: var(--sp-3); border-right: var(--rule-soft); }
.addr .val { font: 400 var(--fs-m1)/1.3 var(--font-mono); color: var(--color-ink-soft); min-width: 0; overflow-wrap: anywhere; }
.addr .act { font: 600 var(--fs-m1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.addr[data-set] { cursor: copy; }
.addr[data-set]:hover { background: var(--color-ink); color: var(--color-ground); transition: none; }
.addr[data-set]:hover .val, .addr[data-set]:hover .lbl { color: var(--color-ground); }
.addr.copied { background: var(--color-accent); }
.addr.copied .val, .addr.copied .lbl { color: var(--color-accent-ink); }

/* chart = hero media */
.fig { display: flex; flex-direction: column; border-top: var(--rule); min-width: 0; }
.fig-head { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--rule-soft); }
.chart-box { position: relative; flex: 1 1 auto; height: 320px; min-height: 0; }
.chart { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-ink-mute); }
.chart .grid { stroke: var(--color-line-soft); stroke-width: 1; shape-rendering: crispEdges; }
.chart .base { stroke: var(--color-line); stroke-width: 1; shape-rendering: crispEdges; }
.chart text { fill: currentColor; font: 400 var(--fs-m1) var(--font-mono); }
.chart .bar { fill: var(--data-1); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); shape-rendering: crispEdges;
  transition: transform var(--dur-ui) var(--ease-cut); }
.chart.drawn .bar { transform: scaleY(1); }
.chart .bar.last { fill: var(--data-4); }
.chart .bar.new { animation: cut-in var(--dur-ui) var(--ease-cut); }
.chart .mark-line { stroke: var(--color-line); stroke-width: 1; shape-rendering: crispEdges; }
.chart .mark-text { fill: var(--color-ink); font-weight: 600; }
@keyframes cut-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.fig-foot { padding: var(--sp-3) 0 var(--sp-4); border-top: var(--rule-soft); }

@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); min-height: calc(100svh - var(--bar-h) - 1px); }
  .hero-copy { padding: var(--sp-6) var(--sp-6) var(--sp-5) 0; border-right: var(--rule); justify-content: space-between; }
  h1 { max-width: 15ch; }
  .fig { border-top: 0; padding-left: var(--sp-6); }
  .chart-box { height: auto; min-height: 420px; }
}

/* ---------- 5. Sections -------------------------------------------------- */
.sec { border-bottom: var(--rule); padding-block: var(--sp-7) var(--sp-8); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-6); }
h2 { font: 800 var(--fs-3)/1 var(--font-display); font-stretch: 75%; letter-spacing: -.01em; text-transform: uppercase; }
h3 { font: 800 var(--fs-1)/1.15 var(--font-display); font-stretch: 85%; }
p { max-width: 62ch; }
.note { color: var(--color-ink-soft); }

/* (b) how the loop works: numbered ledger rows */
.steps { border-top: var(--rule); }
.step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); padding: var(--sp-5) 0; border-bottom: var(--rule-soft); }
.step:last-child { border-bottom: var(--rule); }
.step .n { grid-row: span 3; font: 900 var(--fs-4)/.85 var(--font-display); font-stretch: 62%; }
.step .where { font: 400 var(--fs-m1)/1.4 var(--font-mono); color: var(--color-ink-mute); text-transform: uppercase; letter-spacing: .04em; }
.steps-head { display: none; }
@media (min-width: 900px) {
  .steps-head, .step { grid-template-columns: 2fr 4fr 6fr 3fr; gap: var(--sp-5); align-items: start; }
  .steps-head { display: grid; padding: var(--sp-3) 0; border-bottom: var(--rule-soft); }
  .step .n { grid-row: auto; }
}

/* (c) receipts: aside + table */
.split-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.live-line { display: flex; align-items: center; gap: var(--sp-2); }
@media (min-width: 1024px) { .split-2 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6); } }
.scroll { overflow-x: auto; min-width: 0; border-top: var(--rule); border-bottom: var(--rule); -webkit-overflow-scrolling: touch; }
.receipts { width: 100%; min-width: 760px; table-layout: fixed; font: 400 var(--fs-0)/1.3 var(--font-mono); }
.receipts caption { text-align: left; padding: var(--sp-3) 0; caption-side: bottom; }
.receipts thead { position: relative; z-index: 1; background: var(--color-ground); }
.receipts th { font: 600 var(--fs-m1)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink-mute);
  text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: var(--rule); white-space: nowrap; }
.receipts td { padding: 0 var(--sp-3); height: 52px; border-bottom: var(--rule-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.receipts tr > :first-child { padding-left: 0; }
.receipts .r { text-align: right; }
.receipts tbody tr { background: var(--color-ground); transition: none; }
.receipts tbody tr.is-new { background: var(--color-accent); color: var(--color-accent-ink); animation: row-in var(--dur-ui) var(--ease-out); }
.receipts tbody tr.is-new .st, .receipts tbody tr.is-new .vfy { color: var(--color-accent-ink); }
/* phones: the receipt keeps tick, amount, status and the check link; time, kind and hash drop out,
   so the amount column is never cut mid-number by the sideways scroll */
@media (max-width: 640px) {
  .receipts { min-width: 0; table-layout: auto; }
  .receipts colgroup { display: none; }
  .receipts td { overflow: visible; text-overflow: clip; }
  .receipts tr > :nth-child(2), .receipts tr > :nth-child(3), .receipts tr > :nth-child(5) { display: none; }
  .receipts td, .receipts th { padding: 0 var(--sp-2); }
}
@keyframes row-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.st { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; text-transform: uppercase; font-size: var(--fs-m1); letter-spacing: .04em; }
.st::before { content: ""; width: 8px; height: 8px; background: currentColor; }
.st.ok { color: var(--color-up); }
.st.bad { color: var(--color-down); }
.st.wait { color: var(--color-ink-mute); }
.vfy { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; min-width: 44px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vfy:hover { text-decoration-thickness: 3px; }

/* (d) treasury split: stacked hairline bars */
.stack { display: flex; height: 48px; border: var(--rule); }
.stack i { display: block; height: 100%; border-right: 1px solid var(--color-ground); }
.stack i:last-child { border-right: 0; }
.stack .s1 { background: var(--data-4); } .stack .s2 { background: var(--data-1); } .stack .s3 { background: var(--data-2); } .stack .s4 { background: var(--data-3); }
.ticks { display: flex; justify-content: space-between; padding: var(--sp-2) 0 var(--sp-6); }
.legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: var(--rule); }
.legend > div { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; border-bottom: var(--rule-soft); min-width: 0; }
.legend .pct { font: 900 var(--fs-2)/1 var(--font-display); font-stretch: 62%; }
.legend .track { height: 8px; border: var(--rule); background: var(--color-ground); }
.legend .track i { display: block; height: 100%; background: var(--color-ink); transform-origin: 0 50%; }
.legend .sw { display: inline-block; width: 12px; height: 12px; margin-right: var(--sp-2); border: var(--rule); vertical-align: -1px; }
@media (min-width: 900px) { .legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } .legend > div + div { padding-left: var(--sp-4); border-left: var(--rule-soft); } }

/* (e) FAQ */
.faq { border-top: var(--rule); }
.faq details { border-bottom: var(--rule-soft); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-height: 64px; padding: var(--sp-3) 0;
  font: 800 var(--fs-1)/1.2 var(--font-display); font-stretch: 85%; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] .v { display: none; }
.faq details > p { padding: 0 0 var(--sp-5); color: var(--color-ink-soft); }

/* (f) footer */
.foot { display: grid; gap: var(--sp-5); padding-block: var(--sp-6) var(--sp-7); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font: 600 var(--fs-m1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.disclaimer { font-size: var(--fs-0); color: var(--color-ink-soft); }
@media (min-width: 900px) { .foot { grid-template-columns: 4fr 8fr; align-items: start; } }

/* the font shorthand resets numerals: every figure stays tabular (T5) */
h1, h2, h3, .num, .pct, .step .n, .mark, .faq summary { font-variant-numeric: tabular-nums; }

/* ---------- 6. Film / frame mode: LedgerFX.renderFrame(t) owns every value */
.frame *, .frame *::before, .frame *::after { transition-property: none !important; animation-name: none !important; }

/* ---------- 7. Reduced motion: every loop stops, values land at once ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-name: none !important; transition-property: none !important; }
  .chart .bar { transform: scaleY(1); }
}

/* ON THE CLOCK: the clock mark beside the wordmark */
.mark { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mark-svg { flex: none; }

/* ===== ON THE CLOCK: the desk (hero media), the code block, the chart section ===== */
.desk { display: flex; flex-direction: column; border-top: var(--rule); min-width: 0; }
@media (min-width: 1024px) { .desk { border-top: 0; padding-left: var(--sp-6); } }
.win { border: var(--rule); background: var(--color-surface); display: flex; flex-direction: column; min-height: 320px; }
.win-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: var(--rule); }
.win-bar .right, .run-head .right { margin-left: auto; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--color-ink); display: block; }
.dots i:nth-child(2) { opacity: .55; } .dots i:nth-child(3) { opacity: .25; }
.win-body { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; }
@media (min-width: 720px) { .win-body { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } }
.roster { list-style: none; margin: 0; padding: 0; border-right: 0; }
@media (min-width: 720px) { .roster { border-right: var(--rule); } }
.who { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border-bottom: var(--rule-soft); min-height: 64px; }
.who:last-child { border-bottom: 0; }
.who b { display: block; font: 600 var(--fs-m1)/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.who span { display: block; font: 400 var(--fs-m1)/1.3 var(--font-display); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.who time { font: 400 var(--fs-m1)/1 var(--font-mono); color: var(--color-ink-mute); font-variant-numeric: tabular-nums; }
.av { width: 36px; height: 36px; display: block; border: var(--rule); background: var(--color-ground); position: relative; }
.av::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 12px; margin: -12px 0 0 -1px; background: var(--color-ink); transform-origin: 50% 100%; }
.who[data-role="sweeper"] .av::after { transform: rotate(0deg); }
.who[data-role="paymaster"] .av::after { transform: rotate(90deg); }
.who[data-role="clerk"] .av::after { transform: rotate(180deg); }
.who[data-role="auditor"] .av::after { transform: rotate(270deg); }
.who.hit { background: var(--color-accent); }
.who.hit b, .who.hit span, .who.hit time { color: var(--color-accent-ink); }
.who.hit .av { background: var(--color-accent-ink); }
.who.hit .av::after { background: var(--color-accent); }
.run { display: flex; flex-direction: column; min-width: 0; }
.run-head { display: flex; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: var(--rule-soft); }
.log { list-style: none; margin: 0; padding: var(--sp-2) 0; counter-reset: l; }
.log li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); align-items: baseline; border-bottom: var(--rule-soft); counter-increment: l; min-height: 40px; }
.log li::before { content: counter(l, decimal-leading-zero); font: 400 var(--fs-m1)/1 var(--font-mono); color: var(--color-ink-mute); }
.log li:last-child { border-bottom: 0; }
.log code { font: 600 var(--fs-m1)/1.3 var(--font-mono); color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log span { font: 400 var(--fs-m1)/1.3 var(--font-mono); color: var(--color-ink-mute); white-space: nowrap; }
.log li.done span::before { content: "✓ "; color: var(--color-ink); }
.log li.todo code { color: var(--color-ink-mute); }
.log li.now code { color: var(--color-accent); }
.codeblock { margin: 0; padding: var(--sp-5); border: var(--rule); background: var(--color-surface); overflow-x: auto; font: 400 var(--fs-m1)/1.55 var(--font-mono); color: var(--color-ink); tab-size: 2; }
.codeblock code { font: inherit; }
.fig-sec { border-top: 0; padding-left: 0; }
.fig-sec .chart-box { min-height: 320px; }
@media (min-width: 1024px) { .fig-sec .chart-box { min-height: 420px; } }
@media (prefers-reduced-motion: no-preference) {
  .who.hit { transition: none; }
}

.chart .trk { fill: var(--color-ground); stroke: var(--color-line-soft); stroke-width: 1; shape-rendering: crispEdges; }
.chart .fill { fill: var(--color-ink); shape-rendering: crispEdges; }
.chart .fill.now { fill: var(--color-accent); }
.chart text.run { font: 600 var(--fs-m1)/1 var(--font-mono); fill: var(--color-ink); }
.chart text.run.st, .chart text.run.n { font-weight: 400; fill: var(--color-ink-mute); }
.fig-in { border-top: 0; padding-left: 0; }
.fig-in .chart-box { min-height: 560px; }
@media (min-width: 1024px) { .fig-in .chart-box { min-height: 740px; } }