/* Palette: sampled from brand/banner.jpg and brand/logo.jpg (JPEG; see README in report). */
:root {
  --bg: #0b0b0d;
  --surface: #0f0f12;
  --grid-dot: #29292b;     /* banner background dot, sampled */
  --gold: #ffc048;
  --gold-2: #f2c230;
  --gold-hi: #ffe28a;
  --blue: #5b7cfa;
  --blue-2: #4460cf;
  --green: #35d07f;
  --text: #f2f2f4;
  --muted: #82828f;
  --line: #1c1c24;
  --line-2: #26262f;
  --fur: #c99762;

  --dot-pitch: 18px;       /* banner grid pitch, sampled */

  --fs-13: 13px; --fs-15: 15px; --fs-18: 18px; --fs-24: 24px;
  --fs-36: 36px; --fs-56: 56px; --fs-88: 88px;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s12: 96px;
  --gutter: 48px;
  --max: 1080px;

  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: ease-out;

  --font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (max-width: 720px) {
  :root {
    --gutter: 24px;
    --fs-88: 56px;   /* two largest sizes drop one step */
    --fs-56: 36px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(circle at center, var(--grid-dot) 1.25px, transparent 1.75px);
  background-size: var(--dot-pitch) var(--dot-pitch);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-15);
  line-height: 1.6;
  overflow-x: hidden;
}

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.title, .h2 { font-family: var(--font-head); font-weight: 600; letter-spacing: 0.02em; margin: 0; line-height: 0.95; }
.title {
  font-size: var(--fs-88);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h2 { font-size: var(--fs-56); color: var(--gold); margin-bottom: var(--s6); }
.subtitle { font-family: var(--font-head); font-weight: 300; font-size: var(--fs-36); line-height: 1.1; margin: var(--s2) 0 var(--s4); color: var(--text); }
.body { font-size: var(--fs-18); line-height: 1.6; max-width: 56ch; margin: 0 0 var(--s3); color: var(--text); }
.small, .label, .source { font-size: var(--fs-13); color: var(--muted); letter-spacing: 0.04em; }
.small { margin: 0; }
.label { display: block; text-transform: uppercase; }
.num, .dm, .label, output, canvas { font-variant-numeric: tabular-nums; }
.num { font-size: var(--fs-24); color: var(--text); }

/* dot-matrix numerals (inline SVG built in app.js) */
.dm { --dm-h: 24px; display: inline-flex; align-items: flex-end; height: var(--dm-h); line-height: 0; }
.dm svg { display: block; height: 100%; width: auto; }
/* thousands separator: thin gap + a real comma, so it never reads as a matrix dot */
.dm__sep {
  font-family: var(--font-mono); color: var(--gold); line-height: 1;
  font-size: calc(var(--dm-h) * 0.8); margin: 0 max(4px, calc(var(--dm-h) * 0.1));
  transform: translateY(calc(var(--dm-h) * 0.12));
}
.dm--lg { --dm-h: 56px; }
.dm--md { --dm-h: 40px; }
.dm--sm { --dm-h: 24px; }
.dm .on { fill: var(--gold); }
.dm .off { fill: var(--line-2); }
.chart canvas, .clock__track { pointer-events: none; }

/* 1. wheel */
.s-wheel { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; position: relative; padding: var(--s8) 0 var(--s12); }
.s-wheel__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6); align-items: center; width: 100%; }
/* both columns share one height: title top meets the wheel heading, the small line sits on the counter label's line */
.s-wheel__grid { align-items: stretch; }
.s-wheel__copy { display: flex; flex-direction: column; }
.s-wheel__copy .body { margin: auto 0; }
.s-wheel__notes { display: grid; gap: var(--s1); }
.s-wheel__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
/* hero label: shares the viewport with the page title, so it reads as a label, not a heading */
.s-wheel__h2 { margin: 0; align-self: stretch; text-align: center; font-size: var(--fs-24); color: var(--muted); letter-spacing: 0.2em; }
.wheel { width: 100%; max-width: 400px; height: auto; display: block; }
.wheel__rot { transform-box: view-box; transform-origin: 200px 200px; animation: spin 2s linear infinite; }
.wheel .px { fill: var(--gold); }
.wheel .px-dim { fill: var(--gold-2); opacity: 0.55; }
.wheel .px-stand { fill: var(--muted); opacity: 0.55; }
.wheel .magnet { fill: var(--blue); }
.wheel__sensor .px { fill: var(--muted); transition: fill var(--t-fast) var(--ease); }
.wheel__sensor.is-hit .px { fill: var(--green); }
.counter { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
@keyframes spin { to { transform: rotate(360deg); } }
.scroll-hint {
  position: absolute; left: 0; right: 0; bottom: var(--s3); margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);
  color: var(--gold); animation: pulse 2s ease-in-out infinite;
}
.scroll-hint__text { font-size: var(--fs-15); letter-spacing: 0.2em; text-transform: uppercase; padding-left: 0.2em; }
.scroll-hint__arrow { width: 15px; height: 18px; fill: var(--gold); }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* 2. clocks */
.s-clocks, .s-diff { padding: var(--s12) 0; }
.clocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); width: 100%; margin-bottom: var(--s6); }
/* label in the top row, an equal empty bottom row: the track sits on the box's vertical centre at any label height */
.clock { background: var(--surface); border: 1px solid var(--line-2); padding: var(--s3); display: grid; grid-template-rows: 1fr auto 1fr; row-gap: var(--s2); }
.clock::after { content: ""; }
.clock__label { margin: 0; align-self: start; }
.clock__track { display: block; width: 100%; height: 48px; }
.s-clocks__copy { margin: 0 auto; max-width: 620px; text-align: center; }

/* 3. difficulty */
.control { margin-bottom: var(--s6); }
.control__label { display: block; font-family: var(--font-head); font-weight: 300; font-size: var(--fs-36); line-height: 1.1; margin-bottom: var(--s3); }
.control__label--small { font-family: var(--font-mono); font-size: var(--fs-13); line-height: 1.4; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--s1); }
.rail { display: flex; align-items: center; gap: var(--s3); }
.plaque { flex: none; border: 1px solid var(--gold); padding: var(--s1) var(--s2); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); background: var(--bg); }
.plaque .label { font-size: var(--fs-13); }

/* Slider: the dotted track lives on the wrapper so its left part can fill in dim gold up to the
   thumb centre. --p (0..1) is set from app.js. Thumb is 32px wide: centre = 16px + p * (width - 32px). */
.slider-wrap {
  position: relative; flex: 1; min-width: 0; --p: 0;
  /* thumb face: 3 x 4 dot grid on gold, 8px pitch, centred in 32 x 44 */
  --dot: radial-gradient(circle at center, var(--bg) 2.2px, transparent 2.7px);
  --grip:
    var(--dot) 4px 6px / 8px 8px no-repeat, var(--dot) 12px 6px / 8px 8px no-repeat, var(--dot) 20px 6px / 8px 8px no-repeat,
    var(--dot) 4px 14px / 8px 8px no-repeat, var(--dot) 12px 14px / 8px 8px no-repeat, var(--dot) 20px 14px / 8px 8px no-repeat,
    var(--dot) 4px 22px / 8px 8px no-repeat, var(--dot) 12px 22px / 8px 8px no-repeat, var(--dot) 20px 22px / 8px 8px no-repeat,
    var(--dot) 4px 30px / 8px 8px no-repeat, var(--dot) 12px 30px / 8px 8px no-repeat, var(--dot) 20px 30px / 8px 8px no-repeat;
}
.slider-wrap::before, .slider-wrap::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; pointer-events: none;
  background-image: radial-gradient(circle at center, currentColor 2px, transparent 2.5px);
  background-size: 8px 8px; background-repeat: repeat-x; background-position: left center;
}
.slider-wrap::before { right: 0; color: var(--muted); }
.slider-wrap::after { width: calc(16px + var(--p) * (100% - 32px)); color: var(--gold-2); opacity: 0.7; }

.slider {
  -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: block;
  width: 100%; height: 48px; margin: 0; background: transparent; cursor: grab;
  touch-action: pan-y;
}
.slider:focus { outline: none; }
.slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.slider::-webkit-slider-runnable-track { height: 8px; background: transparent; }
.slider::-moz-range-track { height: 8px; background: transparent; }
/* thumb: dot-matrix handle, gold rounded rect 32 x 44 with a 3 x 4 dot grid.
   The touch target stays the full 48px-tall input row, so a 32px-wide face is fine. */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 44px; margin-top: -18px; border: 0; border-radius: 6px; cursor: grab;
  background: var(--grip), var(--gold);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.slider::-moz-range-thumb {
  width: 32px; height: 44px; border: 0; border-radius: 6px; cursor: grab;
  background: var(--grip), var(--gold);
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
.slider:hover::-moz-range-thumb { transform: scale(1.08); }
/* dragging: lighter gold, closed hand, ring */
.slider:active::-webkit-slider-thumb, .slider.is-dragging::-webkit-slider-thumb {
  cursor: grabbing; transform: scale(1.08); background-color: var(--gold-hi); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--gold);
}
.slider:active::-moz-range-thumb, .slider.is-dragging::-moz-range-thumb {
  cursor: grabbing; transform: scale(1.08); background-color: var(--gold-hi); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--gold);
}
.slider:active, .slider.is-dragging { cursor: grabbing; }
/* one-time nudge on first view (section 3 only); moves the thumb alone, the visible track is on the wrapper */
.slider.is-nudging { animation: nudge 600ms ease-in-out 1; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(16px); } }

/* Hint: left-aligned with the track start, 8px below the bottom of the 44px handle
   (the input is 48px tall, the handle ends 2px above its bottom edge). Its space is reserved
   by .control's padding so nothing shifts when it fades. */
.control:has(.drag-hint) { padding-bottom: var(--s4); }
/* difficulty: a fixed note sits under the hint, in flow, so it takes over the reserved space */
.control:has(.control__note) { padding-bottom: 0; }
.control__note { margin: var(--s3) 0 0; font-size: var(--fs-13); line-height: 1.4; color: var(--muted); }
.drag-hint {
  position: absolute; left: 0; top: calc(100% + 6px); margin: 0; white-space: nowrap; pointer-events: none;
  display: flex; align-items: center; gap: var(--s1);
  font-size: var(--fs-13); line-height: 1.4; color: var(--muted);
  transition: opacity 300ms var(--ease);
}
.drag-hint__arrow { width: 21px; height: 9px; fill: var(--muted); flex: none; }
.drag-hint.is-gone { opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease), visibility 0s 300ms; }
.drag-hint[hidden] { display: none; }

.readout { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--s3) var(--s8); margin-bottom: var(--s3); }
.stat { display: flex; flex-direction: column; gap: var(--s1); }
.stat .num, .stat .dm { min-height: 40px; display: flex; align-items: center; }
/* blocks completed: a small copy of the hero wheel, turning at the chosen work rate (app.js) */
.stat__row { display: flex; align-items: center; gap: var(--s2); }
.wheel.wheel--mini { width: auto; max-width: none; height: 48px; flex: none; }
/* at 48px the 4-unit dots fall under a pixel; a stroke keeps the rim, spokes and hub legible */
.wheel--mini .px { stroke: var(--gold); stroke-width: 6; }
.wheel--mini .px-dim { stroke: var(--gold-2); stroke-width: 4; }
.wheel--mini .px-stand { stroke: var(--muted); stroke-width: 6; }
.wheel--mini .magnet { stroke: var(--blue); stroke-width: 8; }

.chart { margin: 0 0 var(--s3); position: relative; border: 1px solid var(--line-2); background: var(--surface); }
.chart canvas { display: block; width: 100%; height: 360px; }
.chart__note {
  position: absolute; left: 50%; top: var(--s3); transform: translateX(-50%);
  margin: 0; padding: var(--s1) var(--s2); max-width: calc(100% - var(--s4));
  background: var(--bg); border: 1px solid var(--gold); color: var(--gold);
  font-size: var(--fs-13); text-align: center;
}
.source { margin: 0; }
/* one muted source line closing each section */
.source--foot { margin-top: var(--s4); }
.s-wheel__notes .source--foot { margin-top: 0; }
.s-trust .source--foot { margin-top: var(--s3); }
.s-clocks__copy + .source--foot { text-align: center; }

/* copy result: bordered, no fill; 44px tall so it is a full touch target */
.copy-btn {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 128px; justify-content: center;
  margin: 0 0 var(--s4); padding: 0 var(--s2); background: transparent; border: 1px solid var(--gold);
  color: var(--gold); font: inherit; font-size: var(--fs-13); letter-spacing: 0.04em; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.copy-btn:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.copy-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.copy-btn.is-done { color: var(--green); border-color: var(--green); }

/* shared bits for 4-6 */
.s-money, .s-squeeks, .s-trust { padding: var(--s12) 0; }
.num-sm { font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; }
.note, .fixed-line { font-size: var(--fs-15); margin: 0; }
.note { display: inline-block; margin-top: var(--s3); padding: var(--s1) var(--s2); border: 1px solid var(--gold); color: var(--gold); }
.note[hidden] { display: none; }
.h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-36); line-height: 1; margin: 0 0 var(--s3); color: var(--text); }

/* 4. money */
/* order: legend, bar, axis with the cap mark, 16px, slider, readouts */
.supply { margin: var(--s4) 0 var(--s2); }
.supply__bar { display: block; width: 100%; height: 56px; }
.supply__axis { display: flex; justify-content: space-between; align-items: flex-start; margin-top: var(--s1); }
.supply__end { display: flex; flex-direction: column; align-items: flex-end; }
/* margin-right set from app.js so the label ends exactly under the drawn tick */
.supply__cap { font-size: var(--fs-13); line-height: 1.4; color: var(--muted); }
.supply__legend { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.control--money { margin-bottom: var(--s4); }
.supply__legend li { display: flex; align-items: center; gap: var(--s1); }
.key { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.key--blue { background: var(--blue); }
.key--gold { background: var(--gold); }
.readout--money { grid-template-columns: repeat(3, auto); margin-bottom: 0; }

/* 5. squeeks */
.levels { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s6); align-items: start; margin: var(--s4) 0 var(--s6); }
.pyramid { display: flex; flex-direction: column; gap: var(--s1); }
.lv {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 96px; column-gap: var(--s1); align-items: center;
  min-height: 44px; width: 100%; padding: 0 var(--s1); margin: 0;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-13); cursor: pointer; text-align: left;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.lv__dots { display: flex; justify-content: center; }
.lv__power { text-align: right; color: var(--muted); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.lv__dots svg { height: 16px; width: auto; display: block; max-width: 100%; }
.lv__dots circle { fill: var(--gold-2); opacity: 0.4; transition: opacity var(--t-fast) var(--ease); }
.lv:hover .lv__dots circle { opacity: 0.7; }
.lv[aria-pressed="true"] { border-color: var(--gold); background: var(--surface); color: var(--gold); }
.lv[aria-pressed="true"] .lv__dots circle { fill: var(--gold); opacity: 1; }
.lv:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.level-card { margin: 0; padding: var(--s3); border: 1px solid var(--line-2); background: var(--surface); display: grid; gap: var(--s3); }
.level-card dd { margin: 0; }
.level-card__head { display: flex; flex-direction: column; gap: var(--s1); }
.fixed-line { color: var(--text); }
.fixed-line + .fixed-line { margin-top: var(--s1); color: var(--muted); }

/* 6. trust */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); margin: var(--s4) 0 var(--s6); }
.trust__col { border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-18); }
.trust__list li { display: grid; grid-template-columns: 16px 1fr; gap: var(--s2); align-items: baseline; }
.trust__list li::before { content: ""; width: 8px; height: 8px; transform: translateY(-2px); }
.trust__list--yes li::before { background: var(--green); }
.trust__list--no li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); }
.trust__close { margin: 0; color: var(--muted); }
.s-trust { padding-bottom: var(--s12); } /* exactly 96px from the closing paragraph to the footer rule */

/* section dots: fixed on the right edge, desktop only */
.secnav { position: fixed; right: var(--s3); top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; }
.secnav__dot { display: grid; place-items: center; width: 24px; height: 24px; }
.secnav__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); box-shadow: 0 0 0 1px var(--muted); transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.secnav__dot:hover::before { background: var(--muted); }
.secnav__dot[aria-current="true"]::before { background: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.secnav__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
@media (max-width: 1023px) { .secnav { display: none; } }

/* footer */
.foot { border-top: 1px solid var(--line-2); background: var(--bg); padding: var(--s3) 0; font-size: var(--fs-13); color: var(--muted); letter-spacing: 0.04em; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); }
.foot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--t-fast) var(--ease); }
.foot a:hover { color: var(--gold-hi); }
.foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 720px) {
  /* first viewport at 375px: title, subtitle, wheel heading, wheel and counter; body copy follows */
  .s-wheel__grid { grid-template-columns: 1fr; gap: 0; }
  .s-wheel__copy { display: contents; }
  .s-wheel__grid .title { order: 1; }
  .s-wheel__grid .subtitle { order: 2; font-size: var(--fs-24); margin: var(--s1) 0 var(--s3); }
  .s-wheel__fig { order: 3; gap: var(--s1); margin-bottom: var(--s4); }
  .s-wheel__grid .body { order: 4; }
  .s-wheel__notes { order: 5; }
  .s-wheel__copy .body { margin: 0 0 var(--s3); }
  .s-wheel { padding-top: var(--s4); }
  .s-wheel__h2 { text-align: left; }
  .wheel { width: auto; max-width: 100%; height: clamp(150px, calc(100svh - 440px), 320px); }
  .clocks { grid-template-columns: 1fr; gap: var(--s2); }
  .control__label { font-size: var(--fs-24); }
  .control__label.control__label--small { font-size: var(--fs-13); }
  .control__note { margin-top: var(--s4); }
  .rail { gap: var(--s2); }
  .plaque { padding: var(--s1); }
  .plaque .label { display: none; }
  .readout { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .readout .stat:first-child { grid-column: 1 / -1; }
  .chart canvas { height: 280px; }
  .supply__bar { height: 40px; }
  .readout--money { grid-template-columns: 1fr; }
  .levels { grid-template-columns: 1fr; gap: var(--s3); }
  .lv { grid-template-columns: 32px minmax(0, 1fr) 72px; }
  .lv__dots svg { height: 9px; }
  .level-card { grid-template-columns: 1fr 1fr; gap: var(--s2); padding: var(--s2); }
  .level-card__head { grid-column: 1 / -1; }
  .trust { grid-template-columns: 1fr; gap: var(--s4); }
  .h3 { font-size: var(--fs-24); }
  .trust__list { font-size: var(--fs-15); }
}

@media (prefers-reduced-motion: reduce) {
  .wheel__rot, .scroll-hint, .slider.is-nudging { animation: none; }
  * { transition: none !important; }
}

/* TONIGHT strip: live Sepolia values. Fixed height in every state, so data arriving never moves the page. */
.tonight {
  --tn-h: 144px;
  height: var(--tn-h); overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--gold-2); border-bottom: 1px solid var(--gold-2);
}
.tonight__row { position: relative; height: 100%; display: flex; align-items: center; gap: var(--s5); }
.tonight__tag {
  flex: none; margin: 0; display: flex; align-items: center; gap: var(--s1);
  font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0.2em; color: var(--gold);
}
.tonight__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.tonight[data-dot="on"] .tonight__dot { background: var(--green); animation: tn-pulse 2s ease-in-out infinite alternate; }
@keyframes tn-pulse { from { opacity: 0.5; } to { opacity: 1; } }
.tonight__body { flex: 1; min-width: 0; }
.tonight__readouts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s6); margin: 0; }
.tonight__item { min-width: 0; }
.tonight__item dt { margin-bottom: 4px; }
.tonight__item dd { margin: 0; }
.tonight__km { display: flex; align-items: flex-end; gap: 6px; }
.tonight__unit { font-size: var(--fs-15); color: var(--gold); line-height: 1; }
.tonight__line { margin: var(--s1) 0 0; font-size: var(--fs-13); color: var(--muted); line-height: 1.6; }
.tonight__down {
  position: absolute; inset: 0; margin: 0; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: var(--fs-15); color: var(--muted);
}
/* states: loading shows the empty frame, unreachable swaps readouts for one line */
.tonight .tonight__down,
.tonight[data-state="loading"] .tonight__body,
.tonight[data-state="unreachable"] .tonight__body { visibility: hidden; }
.tonight[data-state="unreachable"] .tonight__down { visibility: visible; }

@media (max-width: 720px) {
  .tonight { --tn-h: 344px; }
  .tonight__row { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s2); }
  .tonight__readouts { flex-direction: column; gap: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .tonight[data-dot="on"] .tonight__dot { animation: none; }
}

/* Live layer, phase 2. Each element below reserves its space up front and only turns visible
   once live data arrives, so nothing on the page moves when (or if) the feed answers. */
.wheel-live { display: block; min-height: 1.6em; font-size: var(--fs-13); line-height: 1.6; color: var(--muted); text-align: center; letter-spacing: 0.04em; }

.start-toggle { flex: none; display: flex; flex-direction: column; gap: var(--s1); visibility: hidden; }
.start-toggle[data-ready] { visibility: visible; }
.start-toggle__label { margin: 0; }
.start-toggle__opts { display: flex; flex-direction: column; gap: var(--s1); }
.start-toggle__opt {
  width: 19ch; padding: 6px var(--s1); text-align: left; white-space: nowrap; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-15); font-variant-numeric: tabular-nums; line-height: 1.4;
  color: var(--muted); background: var(--bg); border: 1px solid var(--line-2); border-radius: 0;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.start-toggle__opt:hover { color: var(--text); }
.start-toggle__opt[aria-pressed="true"] { color: var(--text); border-color: var(--gold); }
.start-toggle__opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.money-live { margin-top: var(--s1); min-height: calc(2 * 1.6em); line-height: 1.6; font-variant-numeric: tabular-nums; visibility: hidden; }
.money-live[data-ready] { visibility: visible; }

@media (max-width: 720px) {
  /* toggle moves above the slider, options side by side when they fit, stacked when they don't */
  .s-diff .rail { flex-wrap: wrap; }
  .start-toggle { order: -1; flex-basis: 100%; }
  .start-toggle__opts { flex-direction: row; flex-wrap: wrap; }
  .start-toggle__opt { width: auto; flex: 1 1 19ch; }
  .money-live { min-height: calc(4 * 1.6em); }
}