/* ============================================================
   horse-racing.css - Horse Racing page: bet-type selector, ledger,
   cart, race-day navigation, race info banner, runner list with
   real silks, live video player chrome

   DARK-THEME PASS (ui-ux, 15 Oct 2026; racing's file, routed by CI/CD).
   R-012 (26 Sep) made dark the default; this file still carried the
   light-theme literals it was born with on its fills (#f2f3f7, #eef1fb,
   #eee, #fafafa …), two pastel notice panels, and --navy-1 used as TEXT
   on the card (the ledger code, the slip tag, the SMS-code toggle, the
   sidebar collapse link, the finish position), where it measures 1.51:1.
   Every one is a base.css token now (dark at base.css:265-268, light in
   the [data-theme="light"] block); the two notice panels use the
   inset-accent treatment the slip and account cards adopted (R16-01);
   the stake boxes sit on --input-bg with an explicit --ink. Left alone,
   on purpose: the cream race banner (R-025's "banner photo treatment" is
   an open design item), the video chrome, the race tiles' result colours
   on their navy/gold fills, the active chip fills (--navy-1 + white, the
   brand look), the SCRATCHED/EA pills (already token-correct), sizes.
   ============================================================ */
.hr-video-slot-col{min-width:0}
.hr-video-slot{position:sticky;top:14px;width:100%;aspect-ratio:16/9;min-height:1px}
.hr-video-chrome{position:fixed;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:500}
.hr-video-chrome.hr-video-pip{width:320px;bottom:20px;right:20px;top:auto !important;left:auto !important}
.hr-video-titlebar{display:flex;align-items:center;justify-content:space-between;background:#0e1433;color:#fff;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.2px}
.hr-video-titlebar button{background:transparent;border:none;color:#fff;font-size:14px;cursor:pointer;padding:0 2px;line-height:1}
.hr-video-titlebar button:hover{color:var(--live)}
.hr-sidebar-reopen-btn{position:fixed;top:96px;left:14px;z-index:400;background:var(--navy-1);color:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:17px;cursor:pointer;box-shadow:var(--shadow);align-items:center;justify-content:center}
.hr-sidebar-reopen-btn:hover{background:var(--navy-2)}

.hr-sidebar-collapse-link{display:block;padding:10px 16px;font-size:11.5px;font-weight:700;color:var(--link);background:var(--panel-tint);border-bottom:1px solid var(--line);cursor:pointer}
.hr-sidebar-collapse-link:hover{background:var(--panel-hover)}

/* ---------- racing ---------- */
.race-live-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
@media(max-width:820px){.race-live-cards{grid-template-columns:1fr}}
.race-live-card{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px}
.race-live-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.race-live-card .r{background:var(--live);color:#fff;font-size:10px;font-weight:800;padding:3px 7px;border-radius:5px}
.race-live-card h4{margin:2px 0 10px;font-size:14px}
.race-live-card .odds3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.race-live-card .odds3 div{background:var(--panel-tile);border-radius:6px;text-align:center;padding:6px 0;font-weight:800;font-size:13px}
.race-live-card .odds3 span{display:block;font-size:9.5px;font-weight:600;color:var(--muted)}
.race-table{width:100%;border-collapse:collapse;font-size:13px}
.race-table th{text-align:left;font-size:10.5px;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;padding:8px 8px;border-bottom:1px solid var(--line)}
.race-table td{padding:9px 8px;border-bottom:1px solid var(--line)}

/* ---------- horse racing: bet creation / SMS ticket ---------- */
/* ---------- F4-04: the bet-type chips ---------------------------------------
   MEASURED in Chromium at 390 CSS px, before: twelve chips, every one 26 px
   tall in 10 px type, in ONE row carrying 831 px of content inside a 350 px
   box -- so 481 px of the bet types, more than half, sat off-screen behind a
   horizontal scroll nobody is told about, inside a page that is already
   panning (F1-12).

   THE FINDING'S NUMBER IS WRONG AND ITS SUBSTANCE IS RIGHT. It says "below the
   WCAG 24 px minimum": 26 px is not. What is true is that 2 px of clearance
   over the floor is not a margin, 10 px type is below this project's OWN 12 px
   floor at every width, and half the row was unreachable.

   So this does not use the finding's invented 40 px. It uses the tokens
   base.css already defines and check-type-scale.sh already enforces:
   --control-h is 36 px with a fine pointer and 44 px under (pointer: coarse),
   which is BETTER than 40 on the surface that matters and consistent with
   every other control on the site. Text is --text-sm (13 px), over the floor.

   AND THE ROW WRAPS INSTEAD OF SCROLLING. Bigger chips in a horizontal
   scroller would have hidden MORE of them. Wrapping is what makes every bet
   type reachable without a gesture; the "two rows" the design asked for is
   what wrapping produces here, and it stays right at any width instead of at
   one. */
.hr-bettype-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;padding-bottom:2px}
.hr-bettype-chip{flex:0 0 auto;display:inline-flex;align-items:center;min-height:var(--control-h);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 14px;font-size:var(--text-sm);font-weight:700;color:var(--ink);white-space:nowrap;cursor:pointer}
.hr-bettype-chip.active{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}
.hr-bettype-hint{font-size:var(--text-xs);color:var(--muted);margin:-6px 0 14px;padding:0 2px}
/* The reason a locked chip is locked, as a line a phone can actually show --
   there is no hover on a touch screen, so the `title` alone said nothing there. */
.hr-bettype-locked-note{background:var(--panel-tint);border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:var(--text-xs);color:var(--ink);margin:-6px 0 14px}
.hr-sel-btn{background:var(--panel-tile);border:1px solid var(--line);border-radius:6px;padding:9px 12px;min-width:60px;text-align:center;font-weight:800;font-size:12.5px;cursor:pointer;white-space:nowrap}
.hr-sel-btn:hover{border-color:var(--line-strong)}
.hr-sel-btn.sel{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}
.hr-sel-btn.disabled{opacity:.35;cursor:not-allowed}
.hr-leg-note{background:var(--card);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--warn);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--warn);margin-bottom:12px}
/* A locked chip is the same size as an unlocked one -- it is tappable now, and
   it says why. `cursor:not-allowed` would be a lie about a control that does
   something. */
.hr-bettype-closed{flex:0 0 auto;display:inline-flex;align-items:center;min-height:var(--control-h);background:var(--panel-tile);color:var(--muted);border-radius:16px;padding:0 14px;font-size:var(--text-sm);font-weight:700;white-space:nowrap;cursor:pointer}
.hr-results-panel{background:var(--card);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--ok);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.hr-results-panel.hr-pool-closed{box-shadow:inset 3px 0 0 var(--line-strong)}
.hr-results-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.hr-results-badge{background:var(--ok);color:var(--tag-ink);font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:12px;letter-spacing:.3px}
.hr-pool-closed .hr-results-badge{background:var(--muted)}
.hr-results-order{font-size:12px;font-weight:700;color:var(--ink)}
.hr-div-table{width:100%;border-collapse:collapse;font-size:11.5px}
.hr-div-table tr{border-top:1px solid var(--line)}
.hr-div-table tr:first-child{border-top:none}
.hr-div-label{font-weight:800;color:var(--ok);padding:5px 10px 5px 0;white-space:nowrap;vertical-align:top;width:70px}
.hr-div-combi{display:inline-block;background:var(--panel-tile);border:1px solid var(--line);border-radius:6px;padding:3px 8px;margin:2px 0}
.hr-div-horse{color:var(--muted);font-weight:600}
.hr-results-subnote{font-size:11px;color:var(--muted);margin-top:8px}
.hr-runner-row-closed{opacity:.7}
.hr-finish-pos{background:var(--panel-tile);color:var(--link);font-weight:800;font-size:12px;padding:8px 14px;border-radius:6px}
.hr-ledger{position:sticky;bottom:0;background:var(--card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:0 -4px 20px rgba(10,20,50,.12);margin-top:16px;overflow:hidden;z-index:10}
.hr-ledger-preview{padding:10px 16px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);min-height:38px;display:flex;align-items:center}
.hr-ledger-preview b{color:var(--link);font-family:monospace;font-size:13px;margin-left:6px}
.hr-ledger-actions{display:grid;grid-template-columns:auto 90px 90px 100px;gap:8px;padding:10px 16px;align-items:center}
.hr-ledger-actions .amt{display:flex;align-items:center;gap:6px;background:var(--input-bg);border-radius:8px;padding:4px 10px}
.hr-ledger-actions .amt.bad{outline:2px solid var(--bad)}
.hr-stake-warn{padding:0 16px 8px;font-size:11.5px;color:var(--bad);font-weight:600}
.hr-ledger-actions .amt span{font-size:11px;color:var(--muted);font-weight:700}
.hr-ledger-actions .amt input{border:none;background:transparent;color:var(--ink);width:100%;font-weight:800;font-size:14px;text-align:center;outline:none}
.hr-ledger-btn{border:none;border-radius:8px;padding:10px 0;font-size:12px;font-weight:800;cursor:pointer;text-align:center}
.hr-ledger-btn.add{background:var(--gold);color:var(--gold-ink)}
.hr-ledger-btn.clear{background:var(--panel-tile);color:var(--ink)}
.hr-ledger-btn.cart{background:var(--navy-1);color:#fff;position:relative}
.hr-ledger-btn.cart .badge-count{position:absolute;top:-6px;right:-6px;background:var(--live);color:#fff;border-radius:10px;font-size:10px;padding:1px 6px}
.hr-cart-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.hr-cart-row .code{font-family:monospace;font-size:12.5px;word-break:break-all}
.hr-cart-row .rm{color:var(--live);font-weight:800;cursor:pointer;flex:0 0 auto}

.hr-slip-col{min-width:0}
.hr-slip-panel{position:sticky;top:14px;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.hr-slip-head{background:var(--navy-2);color:#fff;padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.hr-slip-head span:first-child{font-size:12px;font-weight:800;letter-spacing:.3px}
.hr-slip-type-badge{background:var(--gold);color:var(--gold-ink);font-size:10px;font-weight:800;padding:2px 9px;border-radius:10px}
.hr-slip-body{padding:12px 14px;border-bottom:1px solid var(--line);max-height:340px;overflow-y:auto}
.hr-slip-group-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:700;margin:10px 0 4px}
.hr-slip-group-label:first-child{margin-top:0}
.hr-slip-pick{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}
.hr-slip-badge{background:var(--navy-1);color:#fff;font-weight:800;font-size:10.5px;width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.hr-slip-badge-empty{background:var(--panel-tile);color:var(--muted)}
.hr-slip-name{flex:1;font-weight:600;color:var(--ink)}
.hr-slip-pick-empty .hr-slip-name{color:var(--muted);font-weight:500;font-style:italic}
.hr-slip-tag{background:var(--panel-tile);color:var(--link);font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:8px;flex:0 0 auto}
/* F4-06. The SMS code is a disclosure, not the headline. It is selectable and
   wraps, because a punter who uses that channel has to be able to copy it. */
.hr-sms-code{margin:0 14px 10px}
.hr-sms-code-toggle{background:none;border:none;padding:6px 0;min-height:var(--control-h);font-size:var(--text-xs);font-weight:700;color:var(--link);cursor:pointer}
.hr-sms-code-body{background:var(--panel-tint);border-radius:8px;padding:10px 12px}
.hr-sms-code-body code{font-size:var(--text-xs);word-break:break-all;user-select:all}
.hr-sms-code-note{font-size:var(--text-xs);color:var(--muted);margin-top:6px}
.hr-cart-label{font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.hr-slip-code{padding:8px 14px;font-size:10.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.hr-slip-code code{color:var(--muted);word-break:break-all}
.hr-slip-actions{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:center}
.hr-slip-actions .amt{display:flex;align-items:center;gap:6px;background:var(--input-bg);border-radius:8px;padding:4px 10px}
.hr-slip-actions .amt.bad{outline:2px solid var(--bad)}
.hr-slip-actions .amt span{font-size:11px;color:var(--muted);font-weight:700}
.hr-slip-actions .amt input{border:none;background:transparent;color:var(--ink);width:100%;font-weight:800;font-size:13px;text-align:center;outline:none}
.hr-slip-cart-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:11.5px;color:var(--muted)}
.hr-cart-footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}


/* ---------- horse racing: race-day navigation (Today/Tomorrow/Results + race tiles) ---------- */
.hr-race-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.hr-day-tabs{display:flex;gap:8px}
.hr-day-tab{background:var(--navy-2);color:#c7cee4;border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer}
.hr-day-tab.active{background:var(--gold);color:var(--gold-ink)}
.hr-meeting-select{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);font-weight:700}
.hr-meeting-select select{background:var(--navy-2);color:#fff;border:none;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:700}
.hr-race-tiles{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;padding-bottom:2px}
.hr-race-tile{flex:1 0 90px;background:var(--navy-2);color:#fff;border:none;border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer}
.hr-race-tile-disabled{opacity:.35;cursor:not-allowed}
.hr-race-tile.active{background:var(--gold);color:var(--gold-ink)}
.hr-race-tile-no{font-size:11px;font-weight:800;letter-spacing:.3px}
.hr-race-tile-time{font-size:10.5px;opacity:.8;margin-top:2px}
.hr-race-tile-result{font-size:9px;font-weight:800;color:#3ddc84;margin-top:3px}
.hr-race-tile.active .hr-race-tile-result{color:#1a6b3a}

/* ---------- horse racing: race info banner ---------- */
.hr-race-banner{display:flex;align-items:center;gap:24px;background:linear-gradient(135deg,#fff6d9,#ffedb0);border-radius:var(--radius-lg);padding:18px 24px;margin-bottom:16px;flex-wrap:wrap}
.hr-race-banner-main{flex:1;min-width:220px}
.hr-race-banner-label{font-size:11px;color:#8a6300;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.hr-race-banner-name{font-size:21px;font-weight:900;color:#3a2900;margin:2px 0 6px}
.hr-race-banner-sub{font-size:12px;color:#6b5300}
.hr-race-banner-stat{text-align:center;padding:0 10px}
.hr-race-banner-stat span{display:block;font-size:10.5px;color:#8a6300;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.hr-race-banner-stat b{font-size:18px;color:#3a2900}
/* The oddsUpdated freshness stamp is a footnote, not a stat: a timestamp like
   "18-Sep-2026 11-09-34" is long text, and the 18px bold weight above is
   sized for a short number (a distance, a start time). --text-xs, following
   this file's own move toward tokens tonight rather than a new literal. */
.hr-race-banner-stat.hr-odds-updated b{font-size:var(--text-xs);font-weight:700}

/* ---------- horse racing: runner list with real silks ---------- */
.hr-runner-list{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.hr-runner-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.hr-runner-row:first-child{border-top:none}
.hr-runner-row.hr-scratched{opacity:.5;background:var(--panel-tint)}
/* AN EMERGENCY ACCEPTOR'S ROW IS NOT A SCRATCHED ROW. Both were dimmed to
   opacity .5 on #fafafa, which is the strongest thing on the row and the first
   thing a punter reads -- so the row said "out" while the badge said "EA".
   A reserve is not out: it is waiting. It keeps full contrast, and an amber
   rule down its edge marks it as standing by. */
.hr-runner-row.hr-emergency{background:var(--panel-tint);box-shadow:inset 3px 0 0 var(--warn)}
.hr-runner-info{display:flex;align-items:center;gap:12px;flex:1;min-width:240px}
.hr-draw-badge{width:30px;height:30px;border-radius:7px;background:var(--navy-1);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:0 0 auto}
.hr-silk{width:34px;height:34px;border-radius:6px;object-fit:contain;background:var(--panel-tile);flex:0 0 auto;box-shadow:0 0 0 1px var(--line)}
.hr-silk-placeholder{background:var(--line)}
.hr-runner-text{min-width:0}
.hr-runner-name{font-weight:800;font-size:14px;color:var(--ink)}
/* THE OPERATOR DECIDED THIS IS A FILLED PILL, not bare coloured text -- via
   the desktop design session, 25 Sep. Design's own reasoning: bare coloured
   text at 12px still loses to the 14px 800-weight runner name sitting beside
   it (.hr-runner-name, above); the eye reads the name and skips the tag. A
   filled pill wins on shape before colour or size, which is what a state
   marker actually needs to do. This superseded my own font-size-only fix
   (9.5px -> var(--text-xs)) from earlier the same day -- that fix was correct
   as far as it went, and stopped one size short of what the row needed.
   --bad/--warn are now the FILL, not the text colour -- no new colour value
   either way. font-size moves from --text-xs (12px) to --text-sm (13px).
   CORRECTED 26 Sep, per DESIGN:DESKTOP's re-verification against the
   now-shipped dark-default theme (w94): literal `color:#fff` was 3.07:1 on
   dark --bad and 1.51:1 on dark --warn, both below the 4.5:1 floor --
   `--bad`/`--warn` were retinted brighter for legibility as TEXT, which
   made them fail as a FILL's background for white ink. `--tag-ink` already
   exists for exactly this (ui-ux's `.sidebar .tag` fix, base.css): #fff in
   light, var(--gold-ink) in dark -- 5.45:1 / 11.07:1 on these two fills. */
.hr-scratched-tag{background:var(--bad);color:var(--tag-ink);font-size:var(--text-sm);font-weight:800;padding:2px 9px;border-radius:10px;letter-spacing:.3px;margin-left:4px}
/* AN EMERGENCY ACCEPTOR -- badged "EA", the operator's own word -- is not a
   scratching, and must not share SCRATCHED's fill: a reserve that comes IN
   when a runner is withdrawn must not look like the runner it would replace,
   because a punter reads the colour before the word. Only the fill differs --
   size, weight, padding and radius are the shared pill shape above, since
   both classes are always applied together (uiux_horse-racing.js). */
.hr-emergency-tag{background:var(--warn)}
.hr-runner-line{font-size:11.5px;color:var(--ink);margin-top:2px}
.hr-runner-line-muted{color:var(--muted)}
/* Why this runner cannot be backed, in words, on the page -- not only in a
   `title`, because a touch screen has no hover (the F4-04 lesson, applied to
   the row it was missing from). It takes the space the price line vacates. */
.hr-runner-why{color:var(--warn);font-weight:700}
.hr-scratched .hr-runner-why{color:var(--muted)}

.hr-runner-actions{display:flex;gap:8px;flex:0 0 auto}
.hr-odd-btn{min-width:76px;display:flex;flex-direction:column;align-items:center;padding:8px 10px;font-size:14px;font-weight:800}
.hr-odd-lbl{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.hr-odd-btn.sel .hr-odd-lbl{color:#cfe0ff}

/* R-025: the mockup's own odds-colour convention (yellow = normal Win price,
   green = this race's favourite), applied to the WIN button only -- Place
   stays plain. Border only, not .sel's filled background, so a SELECTED
   price still reads as selected first; the colour survives as a 2px ring. */
.hr-odd-btn.hr-odd-normal{border-color:var(--gold)}
.hr-odd-btn.hr-odd-fav{border-color:var(--ok)}
.hr-odd-btn.hr-odd-normal.sel{box-shadow:0 0 0 2px var(--gold) inset}
.hr-odd-btn.hr-odd-fav.sel{box-shadow:0 0 0 2px var(--ok) inset}
.race-table tr:hover td{background:var(--panel-hover)}


/* Shown in place of the video when the nanocosmos SDK cannot be loaded or the
   stream will not start (core_horse-racing.js, hrShowVideoUnavailable()).
   Sits inside #playerDiv, which is black, so the text is light-on-dark. */
.hr-video-unavailable{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;
  min-height:120px;padding:18px 16px;text-align:center;color:#fff;background:#000}
.hr-video-unavailable strong{font-size:13px;font-weight:800;letter-spacing:.2px}
.hr-video-unavailable span{font-size:11.5px;line-height:1.5;color:#b9c0d4;max-width:32ch}

/* ---------- F4-01: the racecard on a phone ----------------------------------
   MEASURED in Chromium at 390 CSS px, which this page renders at 611x1323
   (F1-12, the shell's): the first race tile was at y=2059 and the runner list
   at y=2394. Above them sat the hero (331 px), the "Live Now" title and rail
   (395 px) and the race nav (86 px).

   The markup is identical at every width -- renderRacing() reads no viewport,
   so nothing here goes stale on a resize or a re-render. Everything below is
   confined to <=860px, so the desktop layout is byte-for-byte what it was,
   including the margin collapsing that a flex column would otherwise change.

   The Live Now rail is the race tiles said twice. On a phone the second telling
   costs 395 px, so below 860px there is one telling and it is the tiles. */
@media(max-width:860px){
  .hr-page{display:flex;flex-direction:column}
  .hr-page>*{order:2}
  .hr-page>.hr-hero,.hr-page>.hr-livenow{display:none}
  .hr-page>.hr-race-tiles{order:1}
}