/* MarbleLens · Moon Race first page (clean revision, 14 Oct 2026).
   Loaded last, after moon-race/css/preview.css and solar-system.css. It reshapes
   the page into: slim header, small centred tabs, one claim headline, a URL
   field and Join action in a single row, and a compact ranking that starts
   straight below. No hero. The fixed solar scene stays behind as the Moon cue;
   "Watch race" (header, strip, end of the list) is the full race route.

   Rules here are scoped by #board / .ml-solar so they outrank the single-class
   rules and the max-width media queries in preview.css without !important,
   except where the controller's own [hidden] state has to be neutralised
   (#entryPanel, #entryBar). Colours and type reuse the existing .ml-solar
   tokens; nothing is animated here, and the shared html.ml-motion-off and
   prefers-reduced-motion rules still govern the rest. */

.ml-solar { --wrap: 1120px; }

/* ── header: logo, a few links, account ───────────────────── */
.site-head .head-in { min-height: 60px; padding-block: 6px; }
.site-head .nav a { font-size: 14px; }
.site-head .nav a.nav-product { border-color: transparent; color: var(--ink-2); }
.site-head .nav a.nav-product:hover { color: var(--ink); background: var(--hover); border-color: transparent; }
.site-head .nav a.nav-moon { color: var(--gold-hi); border-color: var(--line-2); font-size: 14px; font-weight: 600; }
.site-head .nav a.nav-moon:hover { border-color: var(--gold-hi); background: rgba(201, 162, 87, .1); color: var(--gold-hi); }
.site-head .head-motion { border-color: transparent; color: var(--muted); }
.site-head .head-motion:hover { border-color: var(--line-2); color: var(--ink-2); background: none; }

/* ── product strip below 1080 px: one slim row ────────────── */
@media (max-width: 1079px) {
  .product-strip.ml-solar { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 2px; padding: 2px 10px; }
  .product-strip.ml-solar a { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
  .product-strip.ml-solar a:hover { color: var(--ink); }
  .product-strip.ml-solar a.strip-watch { margin-left: auto; padding: 0 14px; border: 1px solid var(--line-2); color: var(--gold-hi); font-weight: 600; }
  .product-strip.ml-solar a.strip-watch:hover { border-color: var(--gold-hi); background: rgba(201, 162, 87, .1); }
}
@media (max-width: 380px) {
  .product-strip.ml-solar { padding-inline: 6px; }
  .product-strip.ml-solar a { padding: 0 7px; font-size: 13px; }
  .product-strip.ml-solar a.strip-watch { padding: 0 10px; }
}

/* ── board frame, tabs, identity, headline ────────────────── */
#board.board { max-width: var(--wrap); padding: 12px 24px 28px; }
#board.board.is-race { padding-top: 6px; }
#board .board-tab { font-size: 14px; padding: 0 18px; }

#board .board-head { margin-top: 14px; }
#board .board-kicker { display: inline-flex; gap: 10px; font-size: 11px; letter-spacing: .14em; }
#board .board-title { margin-top: 6px; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.12; letter-spacing: -.02em; }
#board .board-title.is-long { font-size: clamp(22px, 2.4vw, 30px); }
#board .board-gap { margin: 6px auto 0; max-width: 60ch; font-size: 14px; }
/* One status message at a time: while loading, when the ranking can't load,
   or when the month is empty, the list already says it. */
#board[aria-busy="true"] .board-gap,
#board .board-gap:has([data-action="retry"]),
#board:not(.is-final):has(#boardList > .row-empty) .board-gap:not(:has(strong)) { display: none; }

/* ── join row: URL field + short action, always visible ───── */
#board .entry-panel { margin-top: 12px; }
/* The controller still toggles [hidden] on these for narrow screens; the join
   row stays open at every width instead of hiding behind a disclosure. */
#entryPanel[hidden] { display: block !important; }
#entryBar { display: none !important; }
#board .entry { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 8px 10px; align-items: stretch; }
#board .entry-field, #board .entry-cta { min-height: 48px; }
#board .entry-contact { padding-left: 46px; }
#board .entry-icon { left: 10px; width: 28px; height: 28px; margin-top: -14px; }
#board .entry-field input { min-height: 46px; padding: 0 16px 0 4px; font-size: 16px; text-overflow: ellipsis; }
#board .entry-cta { padding: 0 26px; font-size: 15px; white-space: nowrap; }
#board .entry-msgs { grid-column: 1 / -1; padding: 0 6px; text-align: center; }
#board .entry-note { text-align: center; color: var(--ink-2); font-size: 14px; }

/* ── ranking card + secondary column ──────────────────────── */
#board .board-grid { grid-template-columns: minmax(0, 1fr) 272px; gap: 18px; margin-top: 16px; }
#board .panel { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
#board .panel:focus-visible { outline-offset: -3px; }
#board .list-head { padding: 12px 16px; border-bottom: 1px solid var(--line); }
#board .list-title { font-size: 14px; }
#board .board-list { margin: 0; }

/* rows: rank, thumbnail, name + short supporting text, amount */
#board .row {
  grid-template-columns: 36px 44px minmax(0, 1fr); grid-template-areas: "rank tok body";
  align-items: center; column-gap: 12px; row-gap: 0;
  margin: 0; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none;
}
#board .row:hover { background: var(--hover); }
#board .board-list > .row:last-child { border-bottom: 0; }
#board .row--r1 { background: linear-gradient(90deg, rgba(201, 162, 87, .15), rgba(201, 162, 87, 0) 72%); box-shadow: inset 3px 0 0 var(--gold-hi); }
#board .row--r2 { background: linear-gradient(90deg, rgba(201, 162, 87, .09), rgba(201, 162, 87, 0) 72%); box-shadow: inset 3px 0 0 rgba(232, 197, 126, .5); }
#board .row--r3 { background: linear-gradient(90deg, rgba(201, 162, 87, .05), rgba(201, 162, 87, 0) 72%); box-shadow: inset 3px 0 0 rgba(232, 197, 126, .28); }
#board .row.is-you:not(.row--top) { background: rgba(201, 162, 87, .06); }
#board .row.has-badge { padding-top: 28px; }
#board .row-badge {
  top: 8px; left: 16px; transform: none; max-width: calc(100% - 32px); padding: 0; background: none; color: var(--gold-hi);
  font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: left;
}
#board .rank-pill { display: none; }
#board .rank { font: 600 14px/1 var(--sans); padding: 0; text-align: center; }
#board .token-link { justify-self: center; }
#board .token--row, #board .row--r1 .token--row, #board .row--r2 .token--row, #board .row--r3 .token--row { width: 44px; height: 44px; font-size: 16px; }
#board .row-top { flex-wrap: nowrap; align-items: baseline; gap: 12px; }
#board .b-name-link, #board .row--r1 .b-name-link { flex: 1 1 auto; min-width: 0; font-size: 16px; }
#board .row .amt, #board .row--r1 .amt { flex: none; margin-left: auto; font-size: 16px; }
#board .b-meta { margin-top: 2px; font-size: 13px; row-gap: 2px; }
#board .tags { margin-left: 10px; flex-basis: auto; gap: 4px; }
#board .tag { padding: 1px 7px; font-size: 11px; }
#board .row-empty { padding: 30px 20px; border: 0; border-radius: 0; font-size: 14px; }

/* the end of the list is the way into the full race */
#board .list-more { margin: 0; display: block; }
#board #watchRace { width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; font-size: 14px; }
#board #watchRace:hover { background: rgba(201, 162, 87, .08); }

/* quiet footnotes */
#board .panel > .hint { margin: 0; padding: 0 16px 10px; font-size: 12.5px; }
#board .panel > .hint:empty, #board #seasonLine { display: none; }
#board #listFoot, #board #panelPast > .hint { padding-top: 10px; border-top: 1px solid var(--line); }
#board #listFoot + #seasonLine + #freshLine { margin-top: -4px; }
#board #historyList { padding: 2px 16px 12px; }
#board #historyList > .hint { padding: 10px 0 0; }

/* secondary column: only what the list does not already show */
#board .board-side { gap: 12px; padding-top: 0; }
#board .side-card { padding: 4px 14px 12px; border-radius: 14px; background: var(--surface); }
#board .side-head { min-height: 40px; }
#board .side-head h2 { font-size: 13px; }
#board .sr-when { padding-top: 2px; border-top: 0; }

/* ── rules: one collapsed disclosure under the board ──────── */
.help-wrap { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 0 24px 24px; display: grid; gap: 12px; }
.rules { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.rules summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px;
  cursor: pointer; list-style: none; color: var(--ink-2); font-size: 14px; font-weight: 600;
}
.rules summary::-webkit-details-marker { display: none; }
.rules summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--gold-hi); border-bottom: 2px solid var(--gold-hi); transform: rotate(45deg); }
.rules[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.rules ul { margin: 0; padding: 0 16px 16px 36px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px; }

/* ── race route: same width and a light bottom ────────────── */
#raceView.race { padding-bottom: 4px; }
#raceView .race-bar { padding-top: 10px; }

/* ── footer: one link row, one meta row, one credit line ──── */
body footer.moon-foot {
  position: relative; z-index: 1; margin: 0; padding: 0; max-width: none;
  border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.5;
}
.moon-foot .mf-in { max-width: var(--wrap); margin: 0 auto; padding: 8px 24px 16px; }
.moon-foot .mf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.moon-foot .mf-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); text-decoration: none; font: 600 16px/1 var(--serif); }
.moon-foot .mf-links { display: flex; flex-wrap: wrap; margin-left: auto; }
.moon-foot a:not(.mf-brand) { color: var(--ink-2); }
.moon-foot .mf-links a, .moon-foot .mf-mail { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; }
.moon-foot .mf-links a:hover, .moon-foot .mf-mail:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.moon-foot .mf-meta { border-top: 1px solid var(--line); }
.moon-foot .ml-social-links { margin: 0; gap: 0 10px; }
.moon-foot .ml-social-links a { color: var(--ink-2); }
.moon-foot .mf-stats { padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.moon-foot .mf-stats:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.moon-foot .mf-motion { min-height: 44px; border-color: transparent; color: var(--muted); }
.moon-foot .mf-motion:hover { border-color: var(--line-2); color: var(--ink-2); background: none; }
.moon-foot .mf-note { margin-left: auto; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; }
.moon-foot .mf-credit { margin: 0; padding-top: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 1079px) { .moon-foot .mf-desk { display: none; } }

/* ── tablet and below ─────────────────────────────────────── */
@media (max-width: 900px) {
  #board .board-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #board .board-side { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}
@media (max-width: 760px) {
  .moon-foot .mf-links { margin-left: 0; }
  .moon-foot .mf-note { margin-left: 0; flex-basis: 100%; padding-bottom: 6px; }
}

/* ── phones ───────────────────────────────────────────────── */
@media (max-width: 560px) {
  #board.board { padding: 10px 16px 24px; }
  .help-wrap { padding: 0 16px 20px; }
  .moon-foot .mf-in { padding-inline: 16px; }
  #board .board-head { margin-top: 12px; }
  #board .board-gap { font-size: 14px; }
  #board .entry-panel { margin-top: 10px; }
  #board .entry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #board .entry-cta { width: 100%; }
  #board .entry-field input { font-size: 16px; }
  #board .list-head { padding: 10px 14px; }
  #board .row { grid-template-columns: 26px 36px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; }
  #board .row.has-badge { padding-top: 26px; }
  #board .row-badge { left: 12px; max-width: calc(100% - 24px); font-size: 10.5px; }
  #board .rank { font-size: 13px; }
  #board .token--row, #board .row--r1 .token--row, #board .row--r2 .token--row, #board .row--r3 .token--row { width: 36px; height: 36px; font-size: 13px; }
  #board .row-top { gap: 8px; }
  #board .b-name-link, #board .row--r1 .b-name-link, #board .row .amt, #board .row--r1 .amt { font-size: 15px; }
  #board .b-meta { font-size: 12.5px; }
  #board .tags { margin-left: 8px; }
  #board .side-card { padding-inline: 12px; }
}
@media (max-width: 420px) {
  #board .row { grid-template-columns: 26px 36px minmax(0, 1fr); grid-template-areas: "rank tok body"; row-gap: 0; }
  #board .rank { padding-top: 0; }
  #board .token-link { justify-self: center; }
}
@media (max-width: 380px) {
  #board .board-title { font-size: 26px; }
  #board .board-title.is-long { font-size: 22px; }
  #board .entry-contact { padding-left: 14px; }
  #board .entry-icon { display: none; }
  #board .entry-cta { padding: 0 16px; }
  #board .row { grid-template-columns: 22px 34px minmax(0, 1fr); column-gap: 8px; padding-inline: 10px; }
  #board .token--row, #board .row--r1 .token--row, #board .row--r2 .token--row, #board .row--r3 .token--row { width: 34px; height: 34px; }
}

/* ═══ 15 Oct 2026 alignment preview ════════════════════════════════════════
   Sparse hero (claim line, one form row, one main action), prominent list,
   rules and help below. Everything here is scoped to .ml-solar / #board. */

/* ── theme tokens: one scoped layer, dark by default, light by data-theme ──
   --surface / --surface-2 are near-opaque so the fixed solar scene and the
   page atmosphere can never tint the text, inputs or buttons above them. */
.ml-solar {
  --surface: rgba(8, 12, 14, .94);
  --surface-2: rgba(16, 22, 25, .98);
  --hover: rgba(243, 239, 228, .06);
  --ctl-bg: rgba(243, 239, 228, .07);
  --ph: #a9b0a8;
  --focus: #e8c57e;
  --on-gold: #19130a;
  --accent-text: var(--gold-hi);
}
html[data-theme="light"] .ml-solar {
  color-scheme: light;
  --bg: #f6f5ef;
  --ink: #161815;
  --ink-2: #2b2e29;
  --muted: #4a4f49;
  --gold: #7d5a17;
  --gold-hi: #6a4a0f;
  --gold-lo: #4f370a;
  --line: rgba(60, 48, 20, .24);
  --line-2: rgba(60, 48, 20, .46);
  --panel: rgba(251, 249, 242, .97);
  --err: #a1341d;
  --ok: #1c6636;
  --surface: rgba(251, 249, 242, .97);
  --surface-2: #ffffff;
  --hover: rgba(40, 32, 12, .06);
  --ctl-bg: #ffffff;
  --ph: #565b54;
  --focus: #6a4a0f;
  --accent-text: var(--gold-hi);
}

/* Text on every layer reads from the tokens; no glow, blend or clipped-gradient text. */
.ml-solar, .ml-solar :is(h1, h2, h3, p, li, dt, dd, span, label, legend, summary, a, button, input, select) { text-shadow: none; }
#board { isolation: isolate; }
#board .board-title { color: var(--ink); }
#board .board-title em, #board .board-kicker, #board .list-count { color: var(--accent-text); background: none; -webkit-text-fill-color: currentColor; filter: none; }
#board .board-kicker { color: var(--muted); }
#board .amt, #board .mini-amt, .pay-sum dd { color: var(--accent-text); }
#board .row-desc, #board .b-meta, #board .hint, .moon-foot, .help-wrap dd { color: var(--ink-2); }
#board .b-name { flex: 1 1 auto; min-width: 0; color: var(--ink); font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.ml-solar :is(.board-tab, .cat-chip, .stats-pill) { color: var(--ink-2); }
.ml-solar .board-tab[aria-selected="true"] { color: var(--ink); }
.ml-solar .btn-g { background: var(--ctl-bg); color: var(--accent-text); }
.ml-solar .btn-quiet { background: var(--ctl-bg); color: var(--ink); border-color: var(--line-2); }
.ml-solar .btn-p { background: var(--gold-fill); color: var(--on-gold); }
.ml-solar .btn:disabled { opacity: 1; color: var(--muted); background: var(--ctl-bg); border: 1px dashed var(--line-2); box-shadow: none; }
.ml-solar :is(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.ml-solar input::placeholder { color: var(--ph); opacity: 1; }
.ml-solar :is(.link-btn) { color: var(--accent-text); }
.site-head, .product-strip.ml-solar, .site-head .drawer, .dlg.ml-solar, .toast.ml-solar { background: var(--surface); color: var(--ink); }
.site-head .nav a, .site-head .nav a.nav-product, .product-strip.ml-solar a { color: var(--ink-2); }
.site-head .nav a.nav-moon, .product-strip.ml-solar a.strip-watch { color: var(--accent-text); }
.site-head .head-motion, .moon-foot .mf-motion { color: var(--muted); }
.moon-foot a:not(.mf-brand), .moon-foot .ml-social-links a, .moon-foot .mf-stats { color: var(--ink-2); }
.dlg.ml-solar::backdrop { background: rgba(3, 5, 6, .74); }
.dlg.ml-solar :is(h2, dt, p) { color: var(--ink); }
.ml-solar .field-err, .ml-solar .form-err { color: var(--err); }
.ml-solar .tag { color: var(--ink-2); border-color: var(--line-2); background: none; }
.ml-solar .tag--you, .ml-solar .tag--new { color: var(--accent-text); border-color: var(--gold); }
.ml-solar .tag--syn { color: var(--muted); border-style: dashed; }
/* two frames without colour transitions while the theme flips (set by the preview controller) */
html.ml-theme-switch .ml-solar, html.ml-theme-switch .ml-solar * { transition-property: none !important; animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ml-solar, .ml-solar * { transition-duration: 0s !important; } }

/* ── preview notice: slim, honest, not an advert ──────────── */
.preview-note {
  position: relative; z-index: 1; max-width: var(--wrap); margin: 8px auto 0; padding: 6px 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink);
  font: 600 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.preview-note p { margin: 0; }
.preview-note .pn-tag span { font-weight: 500; color: var(--ink-2); }
.preview-note .pn-acts { display: flex; flex-wrap: wrap; gap: 0 12px; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 500; }
.preview-note .link-btn { min-height: 36px; font-size: 13px; }
@media (max-width: 560px) { .preview-note { margin-inline: 16px; padding-inline: 12px; } }

/* ── top tools + category strip ───────────────────────────── */
#board .top-tools { display: flex; justify-content: flex-end; min-height: 32px; }
.stats-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); font: 500 12.5px/1 var(--sans); cursor: pointer;
}
.stats-pill:hover { border-color: var(--gold-hi); }
.sp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.sp-sep { opacity: .6; }
#board .cat-wrap { position: relative; margin-top: 2px; }
#board .cat-strip {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding: 6px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); -webkit-overflow-scrolling: touch;
}
#board .cat-chip {
  flex: none; scroll-snap-align: start; min-height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: none;
  font: 500 13.5px/1 var(--sans); white-space: nowrap; cursor: pointer;
}
#board .cat-chip:hover { background: var(--hover); color: var(--ink); }
#board .cat-chip[aria-pressed="true"] { background: var(--gold-fill); color: var(--on-gold); border-color: var(--gold); font-weight: 600; }
@media (max-width: 560px) { #board .cat-strip { border-radius: 14px; } #board .cat-chip { min-height: 44px; } }

/* ── hero: short claim line, one form row, one main action ── */
#board .board-head { margin-top: 12px; }
#board .board-title { font-size: clamp(30px, 4vw, 46px); }
#board .board-gap { max-width: 56ch; color: var(--ink-2); }
#board .board-gap:empty { display: none; }
#board .entry-field { position: relative; border: 1px solid var(--line-2); border-radius: 999px; background: var(--ctl-bg); color: var(--ink); }
#board .entry-field:focus-within { border-color: var(--focus); }
#board .entry-field input, #board .entry-field select {
  width: 100%; min-height: 46px; border: 0; background: transparent; color: var(--ink); font: 400 16px/1.3 var(--sans); border-radius: 999px;
}
#board .entry-field input:focus, #board .entry-field select:focus { outline: none; }
#board .entry-field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
#board .entry-cat select { padding: 0 16px; cursor: pointer; color-scheme: inherit; }
#board .entry-cat select option { background: var(--surface-2); color: var(--ink); }
#board .entry-mode { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
#board .entry-mode label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px; color: var(--ink); font-size: 14.5px; cursor: pointer; }
#board .entry-mode input { width: 18px; height: 18px; accent-color: var(--gold); }
#board .claim {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
}
#board .claim[hidden] { display: none; }
#board .claim-grp { display: inline-flex; align-items: center; gap: 6px; }
#board .claim-lbl { margin-right: 2px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#board .step {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--ctl-bg);
  color: var(--ink); font: 600 17px/1 var(--sans); cursor: pointer;
}
#board .step:hover:not(:disabled) { border-color: var(--gold-hi); }
#board .step:disabled { color: var(--muted); border-style: dashed; cursor: not-allowed; }
#board .claim-custom { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
#board .claim-custom input {
  width: 6.5em; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--ctl-bg); color: var(--ink);
  font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums;
}
#board .claim-sum { flex: 1 1 100%; margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
#board .claim-sum strong { color: var(--ink); }
#board .claim .field-err { flex: 1 1 100%; margin: 0; text-align: center; }
@media (max-width: 560px) { #board .entry-field, #board .entry-cta { min-height: 48px; } }
@media (max-width: 380px) { #board .entry-contact { padding-left: 46px; } #board .entry-icon { display: block; } }

/* ── rows: description, meta line, contextual actions ─────── */
#board .row-top { align-items: baseline; }
#board .row-desc { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
#board .b-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#board .tag--cat { color: var(--ink); font-weight: 600; }
#board .b-host, #board .b-clicks { color: var(--ink-2); }
#board .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#board .row-act { min-height: 44px; }
#board .row-details { display: grid; gap: 6px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
#board .row-details[hidden] { display: none; }
#board .row-details div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
#board .row-details dt { min-width: 8.5em; color: var(--muted); font-size: 13px; }
#board .row-details dd { margin: 0; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
#board .is-revealed { box-shadow: inset 3px 0 0 var(--gold-hi); }
#board .board-mark { display: flex; align-items: center; gap: 12px; list-style: none; padding: 6px 16px; color: var(--muted); font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
#board .board-mark .bm-rule { flex: 1; height: 1px; background: var(--line-2); }
#board .board-activity { list-style: none; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--hover); }
#board .board-activity h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
#board .board-activity ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
#board .board-activity .hint { margin: 6px 0 0; padding: 0; font-size: 12.5px; }
#board .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
#board .pager[hidden] { display: none; }
#board .pager-at { color: var(--ink-2); font-size: 13.5px; }

/* ── secondary column ─────────────────────────────────────── */
#board .mini { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
#board .mini li { display: grid; grid-template-columns: 2.4em auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; }
#board .mini-rank { color: var(--ink-2); font-weight: 600; font-size: 13px; }
#board .mini-name { min-width: 0; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#board .mini-amt { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
#board .token--xs { width: 24px; height: 24px; font-size: 10px; border-radius: 22%; }
#board .sr-k { color: var(--muted); }
#board .sr-at, #board .side-res, #board .side-month { color: var(--ink-2); }
#board .sr-when { margin-top: 8px; }

/* ── lower help ───────────────────────────────────────────── */
.help-wrap .agg-stats { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.help-wrap .agg-title { margin: 0 0 8px; text-align: center; color: var(--ink-2); font-size: 14px; }
.help-wrap .agg-stats dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.help-wrap .agg-stats dl > div { padding: 10px; border: 1px solid var(--line); border-radius: 12px; text-align: center; background: var(--surface-2); }
.help-wrap .agg-stats dt { color: var(--muted); font-size: 13px; }
.help-wrap .agg-stats dd { margin: 2px 0 0; color: var(--ink); font: 700 20px/1.2 var(--mono); }
.rules { color: var(--ink); }
.rules summary { color: var(--ink); }
.rules summary:hover { background: var(--hover); }
.rules ul, .rules dl { color: var(--ink-2); }
.rules dl { margin: 0; padding: 0 16px 16px; display: grid; gap: 10px; font-size: 14px; }
.rules dt { color: var(--ink); font-weight: 600; }
.rules dd { margin: 2px 0 0; }
.dlg .pay-sum div { background: var(--surface-2); border-color: var(--line-2); }
.dlg .pay-sum dt { color: var(--ink-2); }
.dlg .hint { color: var(--ink-2); }
.dlg .join-summary { border-color: var(--line-2); background: var(--surface-2); color: var(--ink); }

/* ═══ R2 (15 Oct 2026): pixel-review corrections ════════════════════════════
   One uniform, opaque content plane sits behind the hero and the list on the
   home view, so planets and scene colour never show through headings, form or
   rows. The scene stays visible around the plane, and fully in Watch race
   (the plane is not applied to .is-race). */
.ml-solar {
  --plane: #090d0f;
  --tab-bg: #11171a;
}
html[data-theme="light"] .ml-solar {
  --plane: #f8f6ee;
  --tab-bg: #ece7d7;
}
html[data-theme="light"] .site-head, html[data-theme="light"] .product-strip.ml-solar, html[data-theme="light"] .moon-foot { background: #f8f6ee; }
#board.board:not(.is-race) {
  background: var(--plane); border: 1px solid var(--line); border-radius: 22px; margin-top: 8px; padding-top: 14px;
}
#board.board:not(.is-race) .panel { background: var(--surface-2); }
@media (max-width: 1160px) { #board.board:not(.is-race) { margin-inline: 12px; } }
@media (max-width: 560px) { #board.board:not(.is-race) { margin-inline: 8px; border-radius: 16px; } }
.help-wrap .rules, .help-wrap .agg-stats { background: var(--plane); }

/* both tab states read from the tokens (the inherited dark pill is replaced) */
#board .board-tabs { background: var(--tab-bg); border-color: var(--line-2); }
#board .board-tab { color: var(--ink); background: none; }
#board .board-tab:hover { background: var(--hover); color: var(--ink); }
#board .board-tab[aria-selected="true"] { background: var(--gold-fill); color: var(--on-gold); }
#board .board-tab[aria-selected="false"] { color: var(--ink); }
#board .board-kicker { color: var(--ink-2); }
#board .entry-mode label { color: var(--ink); }
#board .entry-mode input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
#board .board-title { text-shadow: none; }

/* colour never transitions on content, so no frame mixes old and new theme colours;
   decorative motion (scene, tokens, spotlight card, portal) is untouched */
.ml-solar :is(.btn, button, a, summary, input, select, label, .tag, .step, .cat-chip, .board-tab, .stats-pill, .entry-field, .row, .panel, .side-card, .rules, .claim, .link-btn) {
  transition: none !important;
}

/* top: one slim note bar with the traffic pill inline */
.preview-note { margin-top: 6px; padding: 2px 16px; min-height: 0; gap: 0 12px; }
.preview-note .pn-acts { align-items: center; }
.preview-note .stats-pill { min-height: 32px; padding: 0 10px; border: 0; background: none; font-size: 12.5px; }
.preview-note .link-btn { min-height: 32px; }
.site-head .head-in { min-height: 52px; padding-block: 2px; }
#board.board:not(.is-race) .board-head { margin-top: 8px; }
#board .board-kicker { font-size: 11px; }
#board .board-title { margin-top: 2px; font-size: clamp(28px, 3.4vw, 40px); }
#board .entry-panel { margin-top: 8px; }
#board .board-grid { margin-top: 12px; }

/* category strip: short verified labels, quiet */
#board .cat-wrap { margin-top: 0; }
#board .cat-strip { padding: 2px 0; border: 0; border-radius: 0; background: none; gap: 2px; scrollbar-width: none; }
#board .cat-strip::-webkit-scrollbar { display: none; }
#board .cat-chip { min-height: 34px; padding: 0 12px; font-size: 13.5px; color: var(--ink-2); }
#board .cat-chip[aria-pressed="true"] { color: var(--on-gold); }
@media (max-width: 560px) { #board .cat-chip { min-height: 44px; padding: 0 12px; } }

/* rows: compact; quiet text links, the rank action shows on hover, focus or touch */
#board .row { padding: 8px 16px; }
#board .row.has-badge { padding-top: 24px; }
#board .token--row, #board .row--r1 .token--row, #board .row--r2 .token--row, #board .row--r3 .token--row { width: 40px; height: 40px; font-size: 15px; }
#board .row-desc { margin: 0; font-size: 13.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
#board .b-meta { margin-top: 2px; font-size: 12.5px; gap: 2px 10px; }
#board .tag--cat { border: 0; padding: 0; font-weight: 600; color: var(--ink); background: none; }
#board .row-links { display: inline-flex; flex-wrap: wrap; gap: 0 4px; margin-left: auto; }
#board .row-link {
  min-height: 32px; padding: 0 8px; border: 0; background: none; color: var(--accent-text); font: 500 12.5px/1 var(--sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#board .row-link:hover { color: var(--ink); }
@media (hover: hover) {
  #board .row-pass { opacity: 0; }
  #board .row:hover .row-pass, #board .row:focus-within .row-pass { opacity: 1; }
}
@media (hover: none), (max-width: 560px) { #board .row-link { min-height: 44px; } }
#board .row-details { margin-top: 6px; }
#board .row-actions { display: none; }

/* R2b: summary line sits under the form in both modes; step-limit notes read quietly */
#board .entry > .claim-sum { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
#board .claim-sum strong { color: var(--ink); }
#board .claim-sum .cs-note { color: var(--ink-2); font-style: italic; }
#board .step:disabled { cursor: not-allowed; }

/* ═══ R5: reserved solar stage ═══════════════════════════════════════════════
   An empty, transparent band above everything else on the home view. The original scene
   reads its [data-solar-stage] / [data-solar-spot] markers (solar-system.js) to place the Sun,
   the system, the #1 Earth visit with its country border, and the winner flight; nothing is
   painted in the band, and the heading, form, ranking and the preview note all start below it.
   There is no hide/fade of the page while the sequence runs. */
.solar-stage-wrap { --stage-h: 440px; position: relative; z-index: 1; max-width: var(--wrap); height: var(--stage-h); margin: 0 auto; pointer-events: none; }
.solar-stage-wrap .solar-stage { position: absolute; inset: 0; pointer-events: none; }
/* where the scene shows Earth (an unpainted marker): upper-left of the band on wide screens */
.solar-stage-wrap .ls-globe { left: 34%; top: 50%; width: min(40%, 300px); height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
/* the original spotlight card: beside Earth on wide screens, hidden until the sequence starts */
#leaderSpot.leader-spot { position: absolute; inset: 0; z-index: 2; contain: none; pointer-events: none; }
#leaderSpot .ls-wrap { left: auto; right: 2%; top: 50%; bottom: auto; transform: translateY(-50%); width: min(320px, 44%); }
#leaderSpot .ls-card { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); box-shadow: none; }
#leaderSpot .ls-k, #leaderSpot .ls-demo, #leaderSpot .ls-place { color: var(--accent-text); }
#leaderSpot .ls-place { font-weight: 700; }
#leaderSpot :is(.ls-amt, .ls-name, .ls-country) { color: var(--ink); }
#leaderSpot :is(.ls-sub, .ls-host, .ls-body, .ls-note) { color: var(--ink-2); }
#leaderSpot .ls-skip { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }
#noteSlotHome, #noteSlotRace { position: relative; z-index: 1; }
@media (max-width: 959px) {
  .solar-stage-wrap { --stage-h: 400px; }
  .solar-stage-wrap .ls-globe { left: 50%; top: 34%; width: min(46vw, 200px); }
  #leaderSpot .ls-wrap { left: 50%; right: auto; top: auto; bottom: 8px; transform: translateX(-50%); width: min(340px, calc(100% - 16px)); }
}
@media (max-width: 560px) { .solar-stage-wrap { --stage-h: 380px; } }

/* R5b: dialog values wrap instead of overflowing (320px review dialog). The base rule sets
   .pay-sum dd to white-space: nowrap with auto margin; long values such as "A$483 (not charged
   in this preview)" and the placement line then pushed the dialog wider than its box. */
.dlg.ml-solar { min-width: 0; max-width: calc(100vw - 24px); overflow-x: hidden; overflow-wrap: anywhere; }
.dlg.ml-solar :is(h2, p, dl, div, dt, dd, strong) { min-width: 0; max-width: 100%; }
.dlg.ml-solar .pay-sum div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.dlg.ml-solar .pay-sum dd { margin: 0; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: right; font-size: 16px; line-height: 1.35; }
.dlg.ml-solar .join-summary p { flex: 1 1 100%; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .dlg.ml-solar { padding: 20px 14px; }
  .dlg.ml-solar .pay-sum div { grid-template-columns: minmax(0, 1fr); }
  .dlg.ml-solar .pay-sum dd { text-align: left; }
  .dlg.ml-solar .dlg-acts .btn { width: 100%; white-space: normal; }
}

/* ═══ R6: connected page ═════════════════════════════════════════════════════
   Unavailable categories (disabled native select), compact figures row, quiet notes. Connected
   data has no category, traffic, click or payment feed: those surfaces say so. */
#board .entry > .entry-fine { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
#board .entry-cat select:disabled { color: var(--ink-2); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: currentColor; }
#board .entry-cat { border-style: dashed; }
#board .b-clicks { color: var(--ink-2); }
.metrics { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.metrics dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.metrics dl > div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.metrics dt { color: var(--ink-2); font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
.metrics dd { margin: 2px 0 0; color: var(--ink); font: 700 18px/1.2 var(--mono); }
.metrics .hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 900px) { .metrics dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .metrics dl { grid-template-columns: minmax(0, 1fr); } }
#raceView > .solar-stage-wrap { margin-top: 0; }
.rules.faq dl { margin: 0; padding: 0 16px 16px; display: grid; gap: 10px; font-size: 14px; }

/* ═══ R6c: header and product strip first, then the full-width clear stage, then content ═══
   The stage is outside #homeView / #raceView / main, so it is the same band on home and in
   Watch race. The global header keeps its normal (sticky) behaviour and responsive menu; the band
   is transparent, with no card or button. */
.solar-stage-wrap { width: 100%; max-width: none; margin: 0; }

/* Transient "Claim #1 Spot": one 12 s cycle = fade in 1.5 s, readable 2 s, fade out 1.5 s, then
   7 s fully transparent (opacity exactly 0), repeating. Soft eases, no flash, no overlay: the copy is
   aria-hidden, takes no pointer input, sits low in the band away from the Earth marker. */
.stage-claim {
  position: absolute; left: 50%; bottom: 7%; z-index: 1; margin: 0; padding: 0 16px; transform: translateX(-50%); width: max-content; max-width: 100%; white-space: nowrap;
  text-align: center; font: 500 clamp(22px, 3.2vw, 38px)/1.15 "American Typewriter", "Courier New", monospace; letter-spacing: -.025em; color: var(--ink);
  opacity: 0; pointer-events: none; user-select: none;
  animation: stage-claim-cycle 12s ease-in-out infinite;
}
@keyframes stage-claim-cycle {
  0% { opacity: 0; }
  12.5% { opacity: .92; }
  29.1% { opacity: .92; }
  41.6% { opacity: 0; }
  100% { opacity: 0; }
}
/* Pause or reduced motion removes the animated copy entirely and shows the static equivalent. */
@media (prefers-reduced-motion: reduce) { .stage-claim { display: none; animation: none; } }
html.ml-motion-off .stage-claim { display: none; animation: none; }
html.doc-hidden .stage-claim { animation-play-state: paused; }

/* The same words for everyone, outside the stage: visually hidden while the animated copy runs
   (screen readers still get them), visible when motion is paused or reduced. */
.claim-static { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .claim-static { position: static; width: auto; height: auto; margin: 6px auto 0; overflow: visible; clip: auto; white-space: normal; max-width: 60ch; color: var(--ink-2); font-size: 14px; line-height: 1.45; } }
html.ml-motion-off .claim-static { position: static; width: auto; height: auto; margin: 6px auto 0; overflow: visible; clip: auto; white-space: normal; max-width: 60ch; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.claim-static strong { color: var(--ink); }

/* ═══ R7: header orbit and nav order (scoped to .site-head and .product-strip only) ═══════════
   Order: M + MarbleLens, Watch race (close to the brand), a clear spacing break, then AI Content,
   Website Builder, Plans; account, motion toggle and Menu stay on the right. The M is a stationary
   solid glyph above a thin orbit that alone turns; Pause / reduced motion stops the orbit. */
.site-head .head-in .nav { flex: 1 1 auto; justify-content: flex-start; align-items: center; margin: 0; gap: 2px; min-width: 0; }
.site-head .nav a.nav-moon { margin: 0 0 0 clamp(4px, 1vw, 16px); }
.site-head .nav .nav-break { flex: 1 1 clamp(40px, 8vw, 160px); min-width: 40px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.site-head .nav .nav-break::after { content: ""; width: 1px; height: 24px; background: var(--line-2); }
.site-head .nav .nav-product + a:not(.nav-product) { margin-left: 0; }
.site-head .head-in .head-actions { margin-left: 0; }
@media (max-width: 1079px) { .site-head .head-in .head-actions { margin-left: auto; } }

/* the mark */
.site-head .hd-mark { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; margin-left: 4px; }
.site-head .hd-orbit { position: absolute; inset: -9px; z-index: 0; transform: rotate(-22deg) scaleY(.46); pointer-events: none; }
.site-head .hd-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-2); animation: hd-orbit-turn 24s linear infinite; }
.site-head .hd-ring.hd-r2 { inset: 7px; animation-duration: 36s; animation-direction: reverse; }
.site-head .hd-ring.hd-r3 { inset: -4px; border-color: var(--line); animation-duration: 55s; }
.site-head .hd-ring i { position: absolute; border-radius: 50%; background: var(--gold-hi); }
.site-head .hd-r1 i { width: 5px; height: 5px; top: -2.5px; left: calc(50% - 2.5px); }
.site-head .hd-r2 i { width: 4px; height: 4px; bottom: -2px; left: calc(50% - 2px); background: var(--ink-2); }
.site-head .hd-r3 i { width: 3px; height: 3px; left: -1.5px; top: calc(50% - 1.5px); }
.site-head .hd-m { position: relative; z-index: 2; width: 38px; height: 38px; overflow: visible; animation: none; transform: none; }
.site-head .hd-m path { fill: none; stroke: url(#goldG); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hd-orbit-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .site-head .hd-ring { animation: none; } }
html.ml-motion-off .site-head .hd-ring { animation: none; }
html.doc-hidden .site-head .hd-ring { animation-play-state: paused; }
.site-head .brand { gap: 14px; }
.site-head .brand-word { color: var(--ink); }

/* product strip below 1080 px: Watch race first, a group break, then the two products */
@media (max-width: 1079px) {
  .product-strip.ml-solar a.strip-watch { margin-left: 0; order: 0; }
  .product-strip.ml-solar .strip-break { flex: 1 1 16px; min-width: 16px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
  .product-strip.ml-solar .strip-break::after { content: ""; width: 1px; height: 20px; background: var(--line-2); }
}
@media (min-width: 1080px) { .product-strip .strip-break { display: none; } }

/* ═══ R7b: narrow product strip (≤370px) ═══════════════════════════════════════════════════
   At 320px the one-row strip split AI Content from Website Builder across two lines. At 370px and
   below the strip is a two-row grid: Watch race alone on row 1, then both products side by side on
   row 2, 44px targets, no overflow. 371px and wider keep the single row of R7 unchanged. */
@media (max-width: 370px) {
  .product-strip.ml-solar { display: grid; grid-template-columns: auto auto 1fr; justify-content: start; align-items: center; gap: 0 2px; }
  .product-strip.ml-solar a.strip-watch { grid-column: 1 / -1; justify-self: start; }
  .product-strip.ml-solar .strip-break { display: none; }
}

/* ═══ R8: taller clear stage and balanced header grouping ═══════════════════════════════════
   Stage: the scene places the Sun at the centre of [data-solar-stage] (x: 50% on wide screens,
   46% / 50% below; y: 50% from 960px, else 55%), clamped to 20–64% of the viewport height, and fits
   the system around that point. A taller band gives the system and the #1 entry room before any
   race content starts. Heights are geometry-based (see tests/stage-spacing.test.cjs): the Sun's
   centre stays inside the band at common viewports. Only the band's height and the gap below it
   change; the markers, Claim #1 Spot cycle and hidden card rules are untouched.
   Header: brand + Watch race | product links | account controls, with the products centred between
   the two ends and the account group set apart. */
.solar-stage-wrap { --stage-h: 600px; margin: 0 0 clamp(8px, 2vh, 24px); }
@media (max-width: 959px) { .solar-stage-wrap { --stage-h: 540px; } }
@media (max-width: 560px) { .solar-stage-wrap { --stage-h: 500px; } }
@media (min-width: 1080px) {
  /* Links never shrink or wrap; only the two spacers give way. Both spacers start at zero width and
     share the free space equally (so the products stay centred), with small floors, so the row fits
     from 1080px without wrapping a label or touching the account group. */
  .site-head .head-in .nav a { flex: 0 0 auto; white-space: nowrap; }
  .site-head .head-in .nav .nav-break { flex: 1 1 0; min-width: 32px; }
  .site-head .head-in .nav::after { content: ""; flex: 1 1 0; min-width: 16px; }
  .site-head .head-in .head-actions { flex: 0 0 auto; padding-left: clamp(12px, 1.6vw, 24px); border-left: 1px solid var(--line); }
  .site-head .head-in .head-actions :is(.btn, .head-motion) { white-space: nowrap; }
}

/* ═══ R9: content order and typed "Claim #1 Spot" ════════════════════════════════════════════
   Metrics now sit at the bottom of the main content, after the rules and FAQ, just above the footer
   (same section, same ids). The hero no longer carries the two explanatory paragraphs; their facts
   live in the rules and FAQ. The stage copy is typed one letter at a time instead of fading in. */
.metrics-wrap { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: 0 24px 28px; }
.metrics-wrap .metrics { margin-top: 0; }
@media (max-width: 560px) { .metrics-wrap { padding: 0 16px 24px; } }

/* One 12 s cycle. Letters type in (each one switches on instantly, no partial glyphs, no cursor) from
   0.4 s, 0.13 s apart (an extra 0.13 s at each space), so the phrase is complete at 1.96 s. It stays
   readable until 4.0 s, the whole line then fades out by 4.5 s, and the stage copy stays fully
   clear until the next cycle starts typing at 12.4 s (7.9 s empty). All letters are laid out from the
   start, so nothing shifts while typing. */
/* Parent iteration occurs at each clear point; glyph timing stays unchanged.
   Odd clears prepare the next Earth presentation; even clears return home. */
.stage-claim { animation: stage-claim-hold 12s ease-in-out -7.5s infinite; }
@keyframes stage-claim-hold {
  0%, 62.49% { opacity: 0; }
  62.5%, 95.8% { opacity: 1; }
  100% { opacity: 0; }
}
.stage-claim .ch { opacity: 0; animation: stage-type-in 12s steps(1, end) infinite; }
@keyframes stage-type-in {
  0% { opacity: 0; }
  .4% { opacity: 1; }
  60% { opacity: 1; }
  60.4% { opacity: 0; }
  100% { opacity: 0; }
}
.stage-claim .ch:nth-of-type(1) { animation-delay: .40s; }
.stage-claim .ch:nth-of-type(2) { animation-delay: .53s; }
.stage-claim .ch:nth-of-type(3) { animation-delay: .66s; }
.stage-claim .ch:nth-of-type(4) { animation-delay: .79s; }
.stage-claim .ch:nth-of-type(5) { animation-delay: .92s; }
.stage-claim .ch:nth-of-type(6) { animation-delay: 1.18s; }
.stage-claim .ch:nth-of-type(7) { animation-delay: 1.31s; }
.stage-claim .ch:nth-of-type(8) { animation-delay: 1.57s; }
.stage-claim .ch:nth-of-type(9) { animation-delay: 1.70s; }
.stage-claim .ch:nth-of-type(10) { animation-delay: 1.83s; }
.stage-claim .ch:nth-of-type(11) { animation-delay: 1.96s; }
@media (prefers-reduced-motion: reduce) { .stage-claim .ch { animation: none; } }
html.ml-motion-off .stage-claim .ch { animation: none; }
html.doc-hidden .stage-claim .ch { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .stage-claim { animation: none; } }

/* Current leader: reuse the scene card as a quiet, readable plaque below
   Earth. The real stage/board geometry and idle claim clock are unchanged. */
#leaderSpot[data-landing] .ls-wrap { left: 50%; right: auto; top: auto; bottom: 12px; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); gap: 5px; align-items: center; }
#leaderSpot[data-landing] .ls-card { padding: 12px 16px; border: 1px solid rgba(210,175,101,.3); border-radius: 16px; background: linear-gradient(135deg,rgba(23,27,26,.94),rgba(10,15,16,.93)); box-shadow: 0 8px 24px rgba(0,0,0,.16); --ls-gap: 5px; }
#leaderSpot[data-landing] .ls-name { font: 600 22px/1.18 var(--sans); }
#leaderSpot[data-landing] .ls-token { width: 42px; height: 42px; font-size: 15px; }
#leaderSpot[data-landing] .ls-main { gap: 12px; }
#leaderSpot[data-landing] .ls-k { font-size: 10px; letter-spacing: .055em; }
#leaderSpot[data-landing] .ls-sub { font-size: 12px; }
#leaderSpot[data-landing] .ls-invite { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-top: 1px solid rgba(210,175,101,.17); padding-top: 7px; }
#leaderSpot[data-landing] .ls-your-brand { color: var(--ink-2); font-size: 12px; }
#leaderSpot[data-landing] .ls-claim { flex-shrink: 0; border: 1px solid var(--line-2); border-radius: 20px; background: transparent; color: var(--gold-hi); padding: 7px 10px; font: 600 12px/1.2 var(--sans); cursor: pointer; }
#leaderSpot[data-landing] .ls-claim:hover { border-color: var(--gold-hi); }
#leaderSpot[data-landing] :is(a,button):focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
#leaderSpot[data-landing] .ls-skip { font-size: 10px; padding: 2px 7px; }
#leaderSpot[data-landing][data-mode="animated"]:not([data-revealed]) .ls-invite { visibility: hidden; }
#solarStage:has(#leaderSpot[data-landing]:not([hidden])) .stage-claim { visibility: hidden; }
@media (max-width: 560px) {
  #leaderSpot[data-landing] .ls-wrap { bottom: 8px; gap: 3px; }
  #leaderSpot[data-landing] .ls-card { padding: 9px 12px; --ls-gap: 3px; }
  #leaderSpot[data-landing] .ls-name { font-size: 19px; }
  #leaderSpot[data-landing] .ls-token { width: 34px; height: 34px; font-size: 12px; }
  #leaderSpot[data-landing] .ls-your-brand { max-width: 125px; font-size: 11px; }
  #leaderSpot[data-landing] .ls-host { display: inline; }
}
/* Keep dismissal beside the plaque rather than spending Earth clearance
   on a second row. Long names retain their accessible full text. */
#leaderSpot[data-landing] .ls-wrap { width: min(460px, calc(100% - 24px)); }
#leaderSpot[data-landing] .ls-skip { position: absolute; right: 0; top: -24px; }
/* Populated-board 320px check: the existing truthful unavailable label
   must wrap, not widen the viewport. No metric wording/value change. */
@media (max-width: 560px) { #board .b-clicks { white-space: normal; overflow-wrap: anywhere; max-width: 100%; } }
html[data-theme="light"] #leaderSpot[data-landing] .ls-card { background: linear-gradient(135deg,rgba(255,253,246,.98),rgba(243,239,228,.97)); border-color: rgba(130,96,40,.35); }
html[data-theme="light"] #leaderSpot[data-landing] .ls-claim { color: var(--accent-text); }

/* R7 header material, independently reviewable from scene/plaque.
   Fixed M silhouette and illumination; only existing miniature rings move. */
.site-head .hd-m path { stroke: url(#hdGoldMetal); filter: drop-shadow(0 1px 0 rgba(72,49,20,.8)); }
.site-head .hd-ring { border-color: rgba(210,177,110,.28); box-shadow: inset 0 1px 0 rgba(244,222,171,.09); }
.site-head .hd-ring i { background: radial-gradient(circle at 30% 25%,#f5e5ba 0%,#c7a35d 45%,#6c532b 100%); box-shadow: 0 0 2px rgba(224,191,127,.22); }
.site-head .hd-r2 i { background: radial-gradient(circle at 30% 25%,#e6edef 0%,#a0afb1 45%,#4c5b60 100%); }
html[data-theme="light"] .site-head .hd-ring { border-color: rgba(121,91,44,.35); }
html[data-theme="light"] .site-head .hd-m path { filter: drop-shadow(0 1px 0 rgba(99,73,31,.35)); }