/* stories.css — Board Stories (UX-SPEC-2026-09). One row per horse: its story sentence + one number.
   Colours come from theme.css (generated from Theme.swift); never hardcode a palette hex here except the
   neutral wireframe greys that have no theme token. Mode is ONE attribute on <html>: data-mode="led" | "lead".
   Same markup for both modes — led simply hides the lead-only fields (principle 2). */

:root { --st-card: var(--card); --st-line: var(--border); --st-dim: var(--text-dim); --st-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

html[data-mode="led"] .lead-only { display: none !important; }
html:not([data-mode="led"]) .led-only { display: none !important; }

.st-kicker { font-family: var(--st-mono); font-size: 10px; letter-spacing: 1.5px; color: var(--st-dim); text-transform: uppercase; margin: 14px 0 8px; }
.st-pill { font-family: var(--st-mono); font-size: 11px; color: var(--text); border: 1px solid var(--st-line); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.st-pill.urgent { border-color: var(--red); color: var(--red); }

/* ── race header ───────────────────────────────────────────────────────────── */
.st-racehead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 10px; }
.st-racehead .st-nav { font-family: var(--st-mono); font-size: 12px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; color: var(--text-secondary); text-transform: uppercase; display: flex; align-items: center; gap: 6px; min-width: 0; }
.st-racehead .st-nav a { color: var(--text-secondary); padding: 6px 4px; }
/* 26 Oct (web review L1): the title is "Race N · Track"; only the track name shortens */
.st-racehead .st-rtitle { display: flex; min-width: 0; margin: 0; font-size: 12px; letter-spacing: 1px; font-weight: 600; white-space: nowrap; }
.st-racehead .st-rno, .st-racehead .st-rsep { flex: none; white-space: pre; }
.st-racehead .st-trk { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-racehead .st-pills { display: flex; gap: 6px; align-items: center; }

/* ── pace card (E2-5) ──────────────────────────────────────────────────────── */
.st-pace { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
.st-pace > summary { list-style: none; cursor: pointer; }
.st-pace > summary::-webkit-details-marker { display: none; }
.st-pace .sp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-pace .sp-lead { font-size: 15px; font-weight: 600; }
.st-pace .sp-conf { font-family: var(--st-mono); font-size: 10px; letter-spacing: 1px; color: var(--text-secondary); white-space: nowrap; }
.st-pace .sp-int { font-family: var(--st-mono); font-size: 10px; letter-spacing: 1px; border: 1px solid var(--amber); color: var(--amber); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.st-pace .sp-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.st-pace .sp-lanes { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--st-line); }
.st-pace .sp-lanes .card.pace-read { margin: 0; border: 0; padding: 0; background: none; }
html[data-mode="led"] .st-pace:not([open]) .sp-lanes { display: none; }

/* ── the row (E2-1) ────────────────────────────────────────────────────────── */
.st-rows { display: flex; flex-direction: column; gap: 7px; }
.srow { position: relative; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 14px; overflow: hidden; }
.srow.open { border-color: var(--gold); }
.srow .s-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.srow .s-rail.t-STRONG { background: var(--gold); }
.srow .s-rail.t-MEDIUM { background: var(--silver); }
.srow .s-rail.t-LEAN { background: var(--bronze); }
.srow .s-rail.dim { opacity: .5; }
.srow .s-l0 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; width: 100%; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.srow .s-l0:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 14px; }
.srow .s-chip { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--st-mono); font-weight: 700; font-size: 17px; }
.srow .s-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.srow .s-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.srow .s-sent { font-size: 12.5px; line-height: 1.35; }
.srow .s-compact { display: none; font-size: 13px; color: var(--text-secondary); }
.srow .s-extra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.srow .s-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.srow .s-num { font-family: var(--st-mono); font-size: 20px; font-weight: 700; }
.srow .s-num.muted { font-size: 16px; font-weight: 600; opacity: .72; }
.srow .s-cap { font-family: var(--st-mono); font-size: 13px; color: var(--st-dim); }
.srow .s-cap.avoid { color: var(--red); font-size: 17px; }
.srow .s-price { font-family: var(--st-mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.srow .s-price .bf { color: var(--st-dim); margin-left: 4px; }
.srow .s-floor { font-family: var(--st-mono); font-size: 10.5px; color: var(--st-dim); white-space: nowrap; }
.srow .s-vpill { font-family: var(--st-mono); font-size: 10px; letter-spacing: .5px; border-radius: 999px; padding: 1px 7px; border: 1px solid var(--st-line); color: var(--text-secondary); white-space: nowrap; }
.srow .s-vpill.v-FALSE { border-color: var(--yellow); color: var(--yellow); }   /* 28 Sep (Ross): caution, not the fade red */
.srow .s-vpill.v-DURABLE { border-color: var(--green); color: var(--green); }
/* story colours (sentence + number) */
.srow.s-HOLDING .s-sent, .srow.s-HOLDING .s-num { color: var(--green); }
.srow.s-WONT_LAST .s-sent { color: var(--red); }
.srow.s-WONT_LAST .s-num { color: var(--text); font-size: 16px; }
.srow.s-THIN .s-sent { color: var(--st-dim); }
.srow.s-THIN .s-num { color: var(--green); }
.srow.s-FAIR .s-sent, .srow.s-AVOID .s-sent { color: var(--text-secondary); }
.srow.s-AVOID .s-name, .srow.s-THIN .s-name { color: var(--text-secondary); }
.srow.s-FAIR .s-num, .srow.s-AVOID .s-num { font-size: 12px; font-weight: 400; color: var(--text); }
.srow.s-WAITING { background: transparent; border-style: dashed; }
.srow.s-WAITING .s-name { color: var(--text-secondary); }
.srow.s-WAITING .s-sent, .srow.s-WAITING .s-num { color: var(--st-dim); font-size: 12px; font-weight: 400; }
.srow.s-WAITING .s-chip { opacity: .7; }
.srow.s-RESULT .s-num { font-size: 16px; }
.srow.s-RESULT.won .s-sent, .srow.s-RESULT.won .s-num { color: var(--gold); }
/* mini rope (lead L0) */
.s-mrope { position: relative; width: 44px; height: 6px; border-radius: 999px; background: var(--chip); border: 1px solid var(--st-line); }
.s-mrope i { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
/* 26 Sep (Ross): the dot's colour is the server's rope.tone (the story), not the model-vs-market sign */
.s-mrope i.t-good { background: var(--green); }
.s-mrope i.t-bad { background: var(--red); }
.s-mrope i.t-neutral { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
/* stake line */
.s-stake { font-family: var(--st-mono); font-size: 12px; color: var(--text); background: var(--chip); border: 1px solid var(--st-line); border-radius: 8px; padding: 6px 9px; }
.s-stake .fits { color: var(--st-dim); }

/* led pinned context: the others are one-line compact rows */
html[data-mode="led"] .st-rows.pinned .srow .s-sent,
html[data-mode="led"] .st-rows.pinned .srow .s-name { display: none; }
html[data-mode="led"] .st-rows.pinned .srow .s-compact { display: block; }
html[data-mode="led"] .st-rows.pinned .srow .s-l0 { padding-top: 8px; padding-bottom: 8px; }
html[data-mode="led"] .st-rows.pinned .srow .s-chip { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
html[data-mode="led"] .st-rows.pinned .srow .s-num { font-size: 12px; font-weight: 400; color: var(--text); }
html[data-mode="led"] .st-rows.pinned .srow.is-pinned { display: none; }

/* ── collapsed WAITING rows (E2-2) ─────────────────────────────────────────── */
.st-waitmore { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px dashed var(--st-line); border-radius: 14px; color: var(--st-dim); font-size: 13px; background: none; width: 100%; font: inherit; cursor: pointer; }
.st-waitmore b { color: var(--gold); font-weight: 600; }
.st-waitgroup[hidden] { display: none; }
.st-waitgroup { display: flex; flex-direction: column; gap: 7px; }

/* ── L1 (E2-3) ─────────────────────────────────────────────────────────────── */
.s-l1 { border-top: 1px dashed var(--st-line); padding: 12px 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.s-l1[hidden] { display: none; }
.s-blk { display: flex; flex-direction: column; gap: 4px; }
.s-blk .k { font-family: var(--st-mono); font-size: 9.5px; letter-spacing: 1px; color: var(--st-dim); text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; }
.s-blk .t { font-size: 13px; line-height: 1.45; }
.s-blk .cap { font-size: 11px; color: var(--text-secondary); }
.s-blk .cap b { color: var(--green); }
/* cone: full width, >= 72px tall */
.s-cone { position: relative; height: 84px; margin-bottom: 12px; }
.s-cone svg { position: absolute; left: 0; top: 0; width: calc(100% - 38px); height: 72px; overflow: visible; }
.s-cone .lab { position: absolute; right: 0; font-family: var(--st-mono); font-size: 9.5px; transform: translateY(-50%); white-space: nowrap; }
.s-cone .lab.hi { color: var(--green); }
.s-cone .lab.mid { color: var(--text); }
.s-cone .lab.lo { color: var(--text-secondary); }
.s-cone .now { position: absolute; left: 0; font-family: var(--st-mono); font-size: 9.5px; color: var(--green); transform: translate(2px, -165%); }
.s-cone .ax { position: absolute; bottom: 0; font-family: var(--st-mono); font-size: 9px; color: var(--st-dim); }
/* rope: a two-pixel full-width scale */
.s-rope { position: relative; height: 14px; }
.s-rope .tr { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--st-line); border-radius: 1px; }
.s-rope .fill { position: absolute; top: 6px; height: 2px; background: var(--blue); border-radius: 1px; }
.s-rope .mk { position: absolute; top: 2px; width: 1px; height: 10px; background: var(--text-secondary); }
.s-rope .md { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; border: 2px solid var(--blue); box-sizing: border-box; background: var(--st-card); }
.s-rope .s0, .s-rope .s1 { position: absolute; top: -3px; font-family: var(--st-mono); font-size: 8.5px; color: var(--st-dim); }
.s-rope .s0 { left: 0; } .s-rope .s1 { right: 0; }
/* trend (WONT_LAST) */
.s-trend svg { width: 100%; height: 56px; overflow: visible; }
/* Past performances — the only button in L1 */
.s-pp { align-self: flex-end; font-size: 12.5px; font-weight: 700; color: #111; background: var(--gold); border: 0; border-radius: 999px; padding: 9px 15px; cursor: pointer; min-height: 36px; }
.s-l2 { display: none; }
.s-l2.open { display: block; padding: 0 12px 12px; }

/* ── led pinned play card (E2-6) ───────────────────────────────────────────── */
.st-pin { background: var(--st-card); border: 1px solid var(--gold); border-radius: 14px; padding: 0 0 12px; margin: 0 0 12px; overflow: hidden; position: relative; }
.st-pin .pin-body { padding: 0 14px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.st-pin .pin-go { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 0 14px 0 16px; flex-wrap: wrap; }
.st-pin .pin-go .st-btn { flex: 0 0 auto; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 10px; background: var(--gold); color: #111; font-weight: 700; font-size: 14px; border: 0; cursor: pointer; text-decoration: none; }
.st-btn.ghost { background: none; color: var(--text); border: 1px solid var(--st-line); }
.st-note { font-size: 12px; color: var(--red); }

/* ── Guide (E3-3) ──────────────────────────────────────────────────────────── */
.g-head { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 10px; font-family: var(--st-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--text-secondary); }
.g-plan { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 14px; padding: 14px; }
.g-plan h2 { margin: 0 0 6px; font-size: 20px; }
.g-plan p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.g-card { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 14px; padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 9px; }
.g-card .g-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--st-mono); font-size: 11px; letter-spacing: 1px; color: var(--text-secondary); text-transform: uppercase; }
.g-card .srow { border: 0; background: none; }
.g-card .srow .s-l0 { padding: 0; }
.g-card .g-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-card .g-foot a { font-size: 13px; font-weight: 600; }
.g-card .g-note { font-size: 12px; color: var(--st-dim); }
.g-sit { border: 1px dashed var(--st-line); border-radius: 14px; padding: 12px 14px; font-size: 13px; color: var(--text-secondary); margin-bottom: 9px; line-height: 1.5; }
.g-sit b { color: var(--text); }
.g-rec { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 14px; padding: 14px; }
.g-rec .g-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.g-rec .g-nums b { display: block; font-family: var(--st-mono); font-size: 20px; }
.g-rec .g-nums span { font-size: 11px; color: var(--text-secondary); }
.g-rec p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.neg { color: var(--red) !important; }
.pos { color: var(--green) !important; }

/* ── five questions (E3-2) ─────────────────────────────────────────────────── */
.q-wrap h2 { font-size: 22px; margin: 6px 0 4px; line-height: 1.25; }
.q-wrap .q-lede { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; }
.q-card { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.q-card legend, .q-card .q-t { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.q-card fieldset { border: 0; margin: 0; padding: 0; }
.q-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.q-opts label { flex: 1 1 auto; min-width: 60px; text-align: center; border: 1px solid var(--st-line); border-radius: 8px; padding: 9px 8px; font-family: var(--st-mono); font-size: 12px; color: var(--text-secondary); cursor: pointer; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.q-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-opts input:checked + span { color: var(--gold); }
.q-opts label:has(input:checked) { border-color: var(--gold); background: rgba(232, 196, 104, .1); }
.q-opts input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.q-hint { font-size: 11px; color: var(--st-dim); margin-top: 7px; line-height: 1.45; }
.q-sub { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; margin-top: 10px; line-height: 1.4; }
.q-tracks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.q-tracks label { font-size: 12px; border: 1px solid var(--st-line); border-radius: 999px; padding: 5px 10px; display: inline-flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
/* base.html styles every <input> as a full-width text field (width:100%, padding, margins). A checkbox inherits that and
   grows to fill its flex row, shoving its label to the far edge and wrapping it one word per line. Reset it here. */
.q-sub input[type=checkbox], .q-tracks input[type=checkbox], .ml-grid input[type=checkbox] { width: auto; height: auto; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--gold); }
.q-sub input[type=checkbox] { margin-top: 2px; }
.q-sub span { flex: 1 1 auto; min-width: 0; }
.q-go { width: 100%; min-height: 48px; margin-top: 4px; }
.q-skip { text-align: center; font-size: 13px; color: var(--text-secondary); margin: 12px 0; }
.q-skip button { background: none; border: 0; color: var(--gold); font: inherit; cursor: pointer; padding: 6px; }

/* ── Browse (E3-5) ─────────────────────────────────────────────────────────── */
.b-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.b-tile { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; color: inherit; }
.b-tile .k { font-family: var(--st-mono); font-size: 9.5px; letter-spacing: 1px; color: var(--st-dim); }
.b-tile .v { font-size: 14px; font-weight: 600; }
.b-tile .s { font-size: 12px; color: var(--text-secondary); }
.b-track { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 12px; margin-bottom: 8px; display: block; color: inherit; }
.b-track .b-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.b-track .b-name { font-weight: 600; font-size: 14px; }
.b-track .b-name small { color: var(--text-secondary); font-weight: 400; }
.b-strip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.b-chip { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--st-line); display: flex; align-items: center; justify-content: center; font-family: var(--st-mono); font-size: 12px; color: var(--text); position: relative; }
.b-chip.run { color: var(--st-dim); text-decoration: line-through; }
.b-chip.t-STRONG { box-shadow: inset 0 -3px 0 var(--gold); }
.b-chip.t-MEDIUM { box-shadow: inset 0 -3px 0 var(--silver); }
.b-chip.next { background: var(--gold); color: #111; border-color: var(--gold); font-weight: 700; }
.b-legend { font-size: 11px; color: var(--st-dim); margin-top: 8px; }
.b-hidden span { flex: 1; text-align: left; }
.b-hidden { border: 1px dashed var(--st-line); border-radius: 12px; padding: 11px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font: inherit; font-size: 13px; color: var(--text-secondary); width: 100%; background: none; cursor: pointer; }
.b-hidden b { white-space: nowrap; }
html[data-mode="led"] .b-strip, html[data-mode="led"] .b-legend { display: none; }

/* ── Results (E4) ──────────────────────────────────────────────────────────── */
.r-range { display: inline-flex; border: 1px solid var(--st-line); border-radius: 8px; overflow: hidden; }
.r-range a { padding: 6px 12px; font-family: var(--st-mono); font-size: 12px; color: var(--text-secondary); }
.r-range a.on { background: var(--gold); color: #111; }
.r-range a { display: inline-flex; align-items: center; line-height: 1; }
.r-range .r-period { position: relative; display: inline-flex; align-items: center; border-right: 1px solid var(--st-line); }
.r-range .r-period select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--text-secondary);
  font-family: var(--st-mono); font-size: 12px; line-height: 1; padding: 6px 24px 6px 12px; cursor: pointer; margin: 0; }
.r-range .r-period::after { content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-size: 10px; line-height: 1; pointer-events: none; color: var(--text-secondary); }
.r-range .r-period.on { background: var(--gold); }
.r-range .r-period.on select, .r-range .r-period.on::after { color: #111; }
.r-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.r-tile { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 12px; }
.r-tile .k { font-family: var(--st-mono); font-size: 9.5px; letter-spacing: 1px; color: var(--st-dim); }
.r-tile .v { font-family: var(--st-mono); font-size: 24px; font-weight: 700; margin: 4px 0 2px; }
.r-tile .s { font-size: 12px; color: var(--text-secondary); }
.r-clv { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.r-clv .big { font-family: var(--st-mono); font-size: 34px; font-weight: 700; color: var(--green); }
.r-clv .big.neg { color: var(--red); }
.r-clv p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0 0; }
.r-spark { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-top: 10px; }
.r-spark i { flex: 1; background: var(--green); border-radius: 3px 3px 0 0; min-height: 2px; }
.r-spark i.neg { background: var(--red); align-self: flex-start; border-radius: 0 0 3px 3px; }
.r-checks { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 4px 14px; margin-bottom: 12px; }
.r-checks .r-check { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--st-line); font-size: 13px; }
.r-checks .r-check:last-child { border-bottom: 0; }
.r-checks .r-check b { font-family: var(--st-mono); white-space: nowrap; }
.r-bet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 7px; }
.r-bet .n { font-weight: 600; font-size: 14px; }
.r-bet .l { font-size: 12px; color: var(--text-secondary); }
.r-bet .net { font-family: var(--st-mono); font-weight: 700; }
.r-abst { border: 1px dashed var(--st-line); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 7px; }

/* ── Settings (E3-6..E3-9) ─────────────────────────────────────────────────── */
.s-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s-mode { text-align: left; background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 12px; color: inherit; font: inherit; cursor: pointer; min-height: 96px; }
.s-mode b { display: block; font-size: 15px; margin-bottom: 4px; }
.s-mode span { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.s-mode.on { border-color: var(--gold); background: rgba(232, 196, 104, .08); }
.s-list { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; overflow: hidden; }
.s-list details { border-bottom: 1px solid var(--st-line); }
.s-list details:last-child { border-bottom: 0; }
.s-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; cursor: pointer; font-size: 14px; min-height: 44px; }
.s-list summary::-webkit-details-marker { display: none; }
.s-list summary span:last-child { color: var(--text-secondary); font-family: var(--st-mono); font-size: 12px; }
.s-list .s-edit { padding: 0 14px 12px; }
.s-list .s-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--st-line); font-size: 14px; min-height: 44px; color: inherit; }
.s-list .s-row:last-child { border-bottom: 0; }
.s-list .s-row span:last-child { color: var(--text-secondary); font-family: var(--st-mono); font-size: 12px; }
.s-onpurpose { border: 1px dashed var(--st-line); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* ── bet log form (E4-5) ───────────────────────────────────────────────────── */
.st-log { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 0; margin-top: 12px; }
.st-log > summary { list-style: none; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
.st-log > summary::-webkit-details-marker { display: none; }
.st-log form { padding: 0 14px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-log form label { font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; }
.st-log form .full { grid-column: 1 / -1; }
/* 26 Oct (Ross): a button whose result happens out of sight carries the answer itself (stories.js xAct):
   idle → working (grey, three moving dots, "Logging") → done (green, "✓ Logged", stays until something changes) /
   dup ("Already logged") / fail (red, "Didn't log"). A short note under it says where the result went. */
.act { position: relative; transition: background-color .2s, color .2s, border-color .2s; }
.act[data-state="working"] { background: var(--chip, #2a2f37) !important; color: var(--text-secondary) !important; border-color: transparent !important; cursor: progress; }
.act[data-state="done"] { background: var(--green) !important; color: var(--bg) !important; border-color: var(--green) !important; }
.act[data-state="dup"] { background: none !important; color: var(--text) !important; border: 1px solid var(--text-secondary) !important; }
.act[data-state="fail"] { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }
.act[disabled] { opacity: 1; }
.act-dots { display: inline-flex; gap: 3px; margin-left: 6px; }
.act-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; animation: act-dot 1s infinite ease-in-out; }
.act-dots i:nth-child(2) { animation-delay: .15s; } .act-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes act-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .act-dots i { animation: none; opacity: .7; } }
/* icon buttons (☆ ★): the shape carries it, not a green pill */
.act.act-icon[data-state="working"] { background: none !important; }
.act.act-icon[data-state="done"] { background: none !important; color: var(--gold) !important; border-color: transparent !important; transform: scale(1.15); }
.act.act-icon[data-state="fail"] { background: none !important; color: var(--red) !important; border-color: transparent !important; }
.act.act-icon .act-dots { margin-left: 0; }
.act-note { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 0; }
.act-note:empty { display: none; }
.act-note a { color: var(--text); font-weight: 600; }
.st-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 640px) {
  .srow .s-l0 { gap: 10px; padding: 11px 12px 11px 14px; }
  .s-l1 { padding: 12px 12px 14px 14px; }
}


/* 25 Sep (Ross) · first open: the experience choice (Please Help / Let Me Do It) before any question */
.xp-choose h2 { margin: 4px 0 6px; font-size: 22px; }
.xp-card { display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left; margin-top: 12px; padding: 16px;
  background: var(--st-card); border: 1px solid var(--st-line); border-radius: 14px; color: inherit; font: inherit; cursor: pointer; }
.xp-card.xp-primary { border: 1.5px solid var(--gold); }
.xp-card:hover { border-color: var(--gold); }
.xp-ico { width: 26px; height: 26px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.xp-txt { flex: 1; min-width: 0; }
.xp-txt b { display: block; font-size: 18px; margin-bottom: 4px; }
.xp-txt span { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.xp-go { color: var(--text-dim); font-size: 20px; line-height: 1; margin-top: 2px; }

/* 25 Sep (Ross) · Settings: every section but Experience Preference starts folded; the title row opens it */
.s-fold { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; margin-top: 12px; overflow: hidden; }
.s-fold > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 13px 14px;
  min-height: 48px; cursor: pointer; font-size: 15px; font-weight: 600; }
.s-fold > summary::-webkit-details-marker { display: none; }
.s-fold > summary::after { content: "›"; color: var(--text-secondary); font-size: 18px; transition: transform .15s ease; }
.s-fold[open] > summary::after { transform: rotate(90deg); }
.s-fold > .s-body { border-top: 1px solid var(--st-line); }
.s-body .s-row, .s-body .s-note, .s-body .s-form { padding: 12px 14px; border-bottom: 1px solid var(--st-line); }
.s-body > :last-child { border-bottom: 0; }
.s-body .s-row { display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-size: 14px; color: inherit; gap: 12px; }
.s-body .s-row span:last-child { color: var(--text-secondary); font-family: var(--st-mono); font-size: 12px; }
.s-body a.s-row span:first-child, .s-body button.s-row span:first-child { color: var(--gold); }
.s-body button.s-row { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--st-line); font: inherit; text-align: left; cursor: pointer; }
.s-body .s-note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.s-body select { background: var(--chip); color: var(--text); border: 1px solid var(--st-line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.s-xp-head { display: flex; align-items: center; justify-content: space-between; }
.s-info { background: none; border: 0; color: var(--gold); cursor: pointer; font: inherit; font-size: 16px; padding: 4px 6px; line-height: 1; }
.s-info-pop { background: var(--st-card); border: 1px solid var(--st-line); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px;
  font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.s-info-pop b { color: var(--text); display: block; margin-top: 6px; }
.s-info-pop b:first-child { margin-top: 0; }
.s-modes.compact .s-mode { min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center; }
.s-modes.compact .s-mode b { margin: 0; }
.s-version { text-align: center; font-size: 12px; color: var(--text-dim); margin: 18px 0 6px; user-select: none; cursor: default; }

/* 25 Sep (Ross) · the race screen's ? menu (How the model works) */
.st-help { position: relative; display: inline-block; }
.st-help > summary { list-style: none; cursor: pointer; }
.st-help > summary::-webkit-details-marker { display: none; }
.st-help-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--st-card); border: 1px solid var(--st-line);
  border-radius: 10px; padding: 4px; min-width: 190px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.st-help-menu a { display: block; padding: 10px 12px; font-size: 14px; color: var(--text); border-radius: 8px; }
.st-help-menu a:hover { background: var(--chip); }
.r-note { margin: -4px 2px 10px; font-size: 12px; color: var(--text-secondary); font-family: var(--st-mono); }

/* Sprint B (26 Sep): B6 "Our price 5-1 · Tote 8-1" under the story number (lead); B5 the track's CAW timing note */
.srow .s-fair { display: block; font-family: var(--st-mono); font-size: 10.5px; color: var(--st-dim); white-space: nowrap; margin-top: 2px; }
.st-pace .sp-caw, .st-caw { color: var(--text-secondary); }
.st-caw { font-size: 12px; margin: 6px 0 10px; }
.g-rec .g-reb { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.g-rec .g-dol { font-size: 13px; margin-top: 6px; }

/* Sprint C (26 Sep): My Line (C1) and the exacta-pool chip (C2) — lead mode only */
.s-mine { color: var(--text); }
.s-ovchip, .s-xchip { display: inline-block; font-family: var(--st-mono); font-size: 10px; letter-spacing: .02em; border: 1px solid var(--st-line); border-radius: 999px; padding: 1px 7px; margin-top: 3px; color: var(--gold); }
.s-xchip { color: var(--text-secondary); }
.s-xchip.s-xfade, .s-blk .k.s-xfade { color: var(--red); border-color: var(--red); }   /* 4 Oct: the exacta pool's FADE side */
.ml-drawer { margin: 10px 0; }
.ml-drawer summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); padding: 8px 0; min-height: 40px; display: flex; align-items: center; }
.ml-grid { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.ml-grid select { min-height: 36px; margin: 0; }
.ml-grid label { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; cursor: pointer; }
.ml-note { width: 100%; margin-top: 8px; min-height: 60px; }
.ml-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.yl-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--st-line); }

/* 26 Sep (Ross): the Guide card — horse · blob · right-hand number · one action */
.g-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-blob { font-family: var(--st-mono); font-size: 12px; padding: 6px 9px; border-radius: 8px; background: var(--chip, rgba(0,0,0,.05)); border: 1px solid var(--st-line); color: var(--text); }
.g-blob-undecided { color: var(--text-secondary); }
.g-foot .g-act { margin-left: auto; font-weight: 600; }
.g-right { font-family: var(--st-mono); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.g-right-stake { font-size: 15px; font-weight: 700; color: var(--text); }

/* ══ 29 Sep 2026 · principles sprint (UI/UX laws) ══════════════════════════════════════════════════════════════
   Tokens come from theme.css (gen_theme.py ← Theme.swift): --accent-muted, --stop, --selection, --metric-*, --opacity-past. */

/* B3 · one accent per unit. The open row's outline, the WAITING "Show", focus rings stay neutral; gold is spent on
   the one focal fact: the live price on WONT_LAST / HOLDING rows, the stake on the plan card, the cone in L1, the
   day net on Results, the primary button in onboarding. */
.srow.open { border-color: var(--text-secondary); }
.st-waitmore b { color: var(--text-secondary); }
.st-waitmore { min-height: 44px; }
.st-pin { border-color: var(--text-secondary); }
.srow .s-l0:focus-visible, .q-opts input:focus-visible + span { outline-color: var(--text); }
.st-pace .sp-int { border-color: var(--accent-muted); color: var(--accent-muted); }
.s-ovchip { color: var(--accent-muted); }

/* B2 · a price never looks like a gap. Gaps (n-ev): grey mono, the sign is in the served text. Prices (n-price /
   n-avoid): the accent on the focal stories, the muted twin elsewhere. */
.srow .s-num.n-ev { color: var(--text-secondary) !important; }
.srow .s-num.n-price, .srow .s-num.n-avoid { color: var(--accent-muted) !important; }
.srow.s-WONT_LAST .s-num.n-price, .srow.s-WONT_LAST .s-num .lead-only { color: var(--gold) !important; }
.srow.s-HOLDING .s-price { color: var(--gold); }
.srow.s-THIN .s-price { color: var(--accent-muted); }
.srow.s-HOLDING .s-sent { color: var(--text); }
.srow.s-RESULT.won .s-sent, .srow.s-RESULT.won .s-num { color: var(--accent-muted); }
html[data-mode="led"] .st-rows.pinned .srow .s-num, html[data-mode="led"] .st-rows.pinned .srow .s-price { color: var(--text) !important; }

/* B4 · AVOID's own bar (never the number) */
.srow .s-rail.t-stop { background: var(--stop); }
.srow .s-cap.avoid { color: var(--text-secondary); }

/* the cone as L1's accent */
.s-cone .lab.hi, .s-cone .now { color: var(--text-secondary); }
.s-blk .cap b { color: var(--text); }

/* C1 · L1's action is a full-width row, >= 44px, chevron trailing */
.s-pp { align-self: stretch; display: flex; justify-content: space-between; align-items: center; min-height: 44px; width: 100%;
        background: var(--card-hi); color: var(--text); border: 1px solid var(--st-line); border-radius: 10px; padding: 0 14px;
        font-size: 14px; font-weight: 600; }
.s-pp span:last-child { color: var(--text-secondary); }

/* B3 · the ADW button next to a stake is bordered, not gold-filled */
.st-btn-ghost { background: none; color: var(--text); border: 1px solid var(--text-secondary); min-height: 44px; }
.g-card .st-btn-ghost { width: 100%; }
.g-right-stake { color: var(--gold); font-weight: 700; }
.g-act { color: var(--accent-muted); min-height: 44px; display: inline-flex; align-items: center; }

/* B1 · the rebate note is a footnote: its own region below a hairline, caption / dim */
.g-foot-note { margin-top: var(--metric-inset-gap, 6px); padding-top: var(--metric-inset-gap, 6px);
               border-top: var(--metric-hairline, 1px) solid var(--divider); font-family: var(--st-mono); font-size: 11px;
               line-height: 1.45; color: var(--text-dim); }

/* C4 · a play past its post: dimmed, never hidden, still a link */
.g-card.is-past { opacity: var(--opacity-past, .5); }

/* E1 · one question per page (only once the pager script runs; without JS every question shows) */
.q-time { font-family: var(--st-mono); font-size: 11px; color: var(--text-dim); margin: 0 0 8px; }
.q-nav { display: none; align-items: center; gap: 12px; margin: 4px 0 10px; }
.q-paged.js .q-nav { display: flex; }
.q-back { background: none; border: 0; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; min-height: 44px; min-width: 44px; cursor: pointer; padding: 0; text-align: left; }
.q-back:disabled { color: var(--text-faint); cursor: default; }
.q-bar { flex: 1; display: flex; gap: 4px; align-items: center; }
.q-bar i { flex: 1; height: 4px; border-radius: 999px; background: var(--st-line); }
.q-bar i.on { background: var(--text); }
.q-bar i.cur { height: 6px; box-shadow: 0 0 0 1px var(--text-secondary); }
.q-paged:not(.js) .q-next { display: none; }
.q-paged .q-card[hidden], .q-paged .q-go[hidden] { display: none; }
/* B3: a selected answer is bordered, not filled */
.q-opts label { min-height: 44px; }
.q-opts input:checked + span { color: var(--text); }
.q-opts label:has(input:checked) { border: 2px solid var(--text); background: none; }
/* C1: the skip is a ghost button the width of the primary, 24px below it */
.q-ghost { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-height: 48px;
           margin-top: var(--metric-action-gap, 24px); background: none; border: 1px solid var(--text-secondary); border-radius: 12px;
           color: var(--text); font: inherit; cursor: pointer; padding: 8px; }
.q-ghost b { font-size: 14px; }
.q-ghost span { font-size: 11px; color: var(--text-secondary); }
/* E3: what a typed value was read as */
.q-parsed { font-family: var(--st-mono); font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.q-parsed:empty { display: none; }

/* D3 · Browse chunks */
.b-chunk { margin-top: 6px; }
.r-tile .v.r-accent { color: var(--gold); }
.r-range a.on, .r-range .r-period.on { background: var(--card-hi); color: var(--text); }
.r-range .r-period.on select, .r-range .r-period.on::after { color: var(--text); }
.r-range a, .r-range .r-period { min-height: 44px; }
/* B3 on the led pinned card (the plan's horse on the race screen): the stake is the accent; number grey, price muted */
.st-pin .s-num { color: var(--text-secondary) !important; }
.st-pin .s-price { color: var(--accent-muted) !important; }
.st-pin .s-stake { color: var(--gold); }
.st-pin .s-stake .fits { color: var(--text-dim); }

/* D1 (30 Sep 2026, Let Me Do It only) · the cone and the rope on one odds axis: one bordered group, the why-line 6px under
   the figure inside it, the trip and our price as chips 16px below. Led keeps the separate blocks (.led-only). */
.s-axwrap { display: flex; flex-direction: column; gap: 16px; }
.s-axis { border: 1px solid var(--st-line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.s-axis .k { font-family: var(--st-mono); font-size: 9.5px; letter-spacing: 1px; color: var(--st-dim); text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; }
.s-axis .cap { font-size: 11px; line-height: 1.45; color: var(--text-secondary); }
.s-axis .cap b { color: var(--text); font-weight: 600; }
.ax-fig { position: relative; height: 46px; }
.ax-fig.has-cone { height: 150px; }
.ax-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ax-fig .ax-dot, .ax-fig .ax-md { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); }
.ax-fig .ax-dot { background: var(--gold); }
.ax-fig .ax-md { width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--blue); background: var(--st-card); }
.ax-fig .ax-lab, .ax-fig .ax-tick { position: absolute; font-family: var(--st-mono); font-size: 9px; line-height: 1; color: var(--st-dim); white-space: nowrap; }
.ax-fig .ax-tick { transform: translateX(-50%); }
.ax-why { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-chip2 { font-family: var(--st-mono); font-size: 11px; line-height: 1.4; color: var(--text-secondary); border: 1px solid var(--st-line); border-radius: 12px; padding: 4px 10px; }
.s-chip2.dim { color: var(--st-dim); }

/* C4 (30 Sep 2026) · the read's clock, in mono: "as of 2:58 to post" */
.st-asof { font-family: var(--st-mono); }

/* principles pass (30 Sep) · Settings: the race-screen switch is part of Experience Preference (E4) — a sub-label, not a
   section kicker — and its selected tile is bordered, not gold-filled (B3, like the onboarding answers) */
.s-raceview { margin-top: 8px; }
.s-raceview .s-sublabel { font-size: 12px; color: var(--text-secondary); margin: 0 2px 6px; }
.s-raceview .s-mode.on { border: 2px solid var(--text); background: none; }

/* ── 13 Oct 2026 · three-doc adoption sprint, Epic B ─────────────────────────────────────────────────────────────────
   B1 the plan's scratched horse greys (row, Guide card, carnival lane) · B2 the window script before the site button ·
   B3 the "expect to lose most bets" line · B5 the Let Me Do It CI lines. No new accent (B3 of 29 Sep): all grey / text. */
.srow.s-SCRATCHED { opacity: .62; }
.srow.s-SCRATCHED .s-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.srow.s-SCRATCHED .s-num { color: var(--text-dim); }
.g-card.is-scratched .srow { opacity: .62; }
.g-card.is-scratched .s-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.g-blob-scratched { color: var(--text-secondary); }
.g-window { margin: 10px 0 8px; padding: 10px 12px; border: 1px solid var(--st-line); border-radius: 10px; }
.g-window .k { font-family: var(--st-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); }
.g-window .say { margin: 4px 0 2px; font-size: 15px; font-weight: 600; color: var(--text); }
.g-window .chk { margin: 0; font-family: var(--st-mono); font-size: 12px; color: var(--text-secondary); }
.g-expect { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.g-rec .g-ci { font-family: var(--st-mono); font-size: 11px; color: var(--text-secondary); margin-top: 4px; }
.q-winonly { color: var(--text-secondary); }