/* ============================================================
   sports.css - home/Sports page: hero, filter chips, match listing,
   headline offers, league page, event detail

   DARK-THEME PASS (ui-ux, 15 Oct 2026). R-012 (26 Sep) made dark the
   default; a few rules here still carried light-theme literals (the
   token field's tones, the ticket-status table's header fill and pastel
   row tints, the flash keyframe, a white select), several inputs had no
   background of their own (the browser's white under dark ink), and
   --navy-1 was used as TEXT or a hover border on the card, where it
   measures 1.51:1 (the active slip tab, the breadcrumb link). Every one
   is a base.css token now (dark at base.css:265-268, light in the
   [data-theme="light"] block); outcome rows use the inset-accent
   treatment this file's own slip card adopted (R16-01). Left alone, on
   purpose: the active chip/tab/odd fills (--navy-1 + white, the brand
   look in both themes -- a design call, not a legibility fix), the
   brand gradients, R-016's own slip tokens, every size.
   ============================================================ */

/* Two operator-requested colours (27 Sep): .odd-btn's fill and
   .match-row:hover's fill. Both were given as bare dark values
   (#162643, #031027) -- deliberately NOT --card's own dark value, a
   distinct look for these two spots rather than a re-confirmation of
   the existing token. Applied as theme-aware tokens, not literals in
   the rules themselves: a bare literal here would repeat the exact
   defect this file's .odd-btn fix corrected this morning (a value that
   looks right under dark, today's default, and wrong the instant
   [data-theme="light"] is selected) -- the two given values are both
   low-luminance navy, and a dark navy .odd-btn on a white light-theme
   card would be exactly that kind of break. Read as an oversight, not a
   deliberate both-themes choice, since nothing here suggests these two
   spots should look identical across themes and everything about how
   this file's other fills work says they should not.
   Defined HERE, not base.css: both selectors are owned solely by this
   file and no other stylesheet reads these two tokens, so adding them
   to base.css would be a seam crossing (a shared, ui-ux-owned file)
   with no consumer outside this one to justify it. Same :root /
   [data-theme="light"] override mechanism base.css itself uses.
   Light equivalents, picked (none were specified):
     --odd-btn-bg          var(--card) -- exactly what light mode
                            already shows post-fix (this morning's
                            .odd-btn change made it var(--card)); light
                            is left exactly as-is, only dark changes.
     --match-row-hover-bg   #fafbfd -- the pre-existing light-mode
                            value, unchanged; only dark gets the new
                            colour. */
:root{
  --odd-btn-bg:#162643;
  --match-row-hover-bg:#031027;
}
[data-theme="light"]{
  --odd-btn-bg:var(--card);
  --match-row-hover-bg:#fafbfd;
}
/* ---------- league page ---------- */
.league-header{display:flex;align-items:center;gap:16px;background:linear-gradient(115deg,var(--navy-deep),#10245e);border-radius:var(--radius-lg);color:#fff;padding:20px 26px;margin-bottom:16px;flex-wrap:wrap}
.league-badge{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto;overflow:hidden}
.league-badge .fi{width:30px;height:22px;border-radius:3px;flex:0 0 auto}
.league-badge .flag-fallback{font-size:20px;line-height:1}
.league-header h1{flex:1;font-size:16px;margin:0;letter-spacing:.2px;min-width:160px;line-height:1.3;font-weight:800}
.league-header .sort-by{font-size:12px;color:#c7cee4;white-space:nowrap}
.league-header select{margin-left:6px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:5px 8px;font-size:12px}
.day-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px}
.day-tab{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 16px;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer}
.day-tab.active{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}
.match-table-head{display:grid;grid-template-columns:64px 1fr 64px 64px 64px 30px;padding:8px 6px;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line)}

/* ---------- filter chips ---------- */
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.time-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.tf-chip{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:7px 14px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.tf-chip:hover{border-color:var(--line-strong)}
.tf-chip.active{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}
.tf-icon-btn{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:7px 14px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:6px;margin-left:auto}
.tf-icon-btn:hover{border-color:var(--line-strong)}
.tf-icon-btn.active{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}
.tf-range-label{font-size:11px;font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-range-popover{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px 16px;margin:-4px 0 14px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.date-range-popover label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.date-range-popover input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;font-family:inherit;background:var(--input-bg);color:var(--ink)}
.chip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:8px 16px;font-size:12.5px;font-weight:700;color:var(--ink)}
.chip.active{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}
.chip .badge{background:var(--live);color:#fff;border-radius:8px;font-size:9px;padding:1px 6px;margin-left:5px}

/* league group */
.league{margin-bottom:6px}
/* Operator readability report, 12 Oct 2026: "Match Result"/"Both Teams to
   Score" etc. (and this competition-name row) were near-unreadable --
   var(--navy-1) text on .card's own dark-theme background. Same bug shape
   base.css's own R-012 comment already names (--link/--info/--focus
   decoupled from --navy-1 for exactly this collision; #05329B on #001C50
   measures 1.51:1). The requested literal #5b5b5b was checked, not applied
   as asked: it only reaches 2.41:1 on that same dark background (still
   below WCAG AA's 4.5:1 for text this size/weight) and needlessly weakens
   the already-fine light theme (8.59:1 -> 6.79:1). var(--muted) reaches
   8.20:1 dark / 5.98:1 light -- both pass AA in both themes -- and this
   row's own sibling "1  X  2" label two spans over already uses
   color:var(--muted), so this now matches markup already right next to it. */
.league-head{font-size:12.5px;font-weight:800;color:var(--muted);padding:10px 4px 6px;display:flex;justify-content:space-between}
/* R-115 (operator screenshot, 17 Oct 2026): the last column's 30px was
   sized for the static "📊" icon this row used to carry (pre-R-060) --
   a fixed track width does not grow for its content, so once R-060
   replaced that icon with the real "<pill>N</pill> markets #bookNo ›"
   link, the link overflowed its own 30px cell: the pill sat on top of
   "markets" and the row's own first entry read "24 market" with the
   "#id" crowding in. max-content sizes this column to whatever the
   link actually needs (any digit count, not just "24"/"22"), at the
   flexible 1fr teams column's expense -- which already truncates
   gracefully (overflow:hidden/ellipsis, or the narrow-width stacked
   layout below), unlike this link, which had no such fallback. */
.match-row{display:grid;grid-template-columns:64px 1fr 64px 64px 64px max-content;align-items:center;gap:8px;padding:10px 6px;border-top:1px solid var(--line);font-size:13px}
.match-row:hover{background:var(--match-row-hover-bg)}
.match-row .time{color:var(--muted);font-size:12px;font-weight:600}
.match-row .time.live{color:var(--live);font-weight:800;display:flex;align-items:center;gap:5px}
.match-row .teams{font-weight:700;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-row .teams .vs{color:var(--muted);font-weight:500;font-size:12px;margin:0 2px}
/* Narrow widths: the away team was cut off entirely and the home team could
   still truncate mid-word, because "Team A vs Team B" was ONE nowrap+ellipsis
   run competing with four fixed 64px columns (odds x3 + chart icon) for the
   one flexible column. Stacking each team on its own line, each independently
   truncatable, means the away name is always visible - it can shorten, it can
   no longer disappear. Matches the layout's own mobile threshold (base.css's
   .layout collapse), not a new breakpoint invented for this. */
@media(max-width:980px){
  .match-row .teams{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;display:flex;flex-direction:column;gap:1px}
  .match-row .teams .team{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .match-row .teams .vs{display:none}
}
/**
 * A BETTABLE PRICE MUST BE READABLE AGAINST ITS OWN CARD, WHATEVER THEME IS
 * ACTIVE — third instance of this bug shape in this estate (`.sidebar .tag`,
 * then `.hr-scratched-tag`/`.hr-emergency-tag`, now this).
 *
 * Found from the operator's own screenshot comparison, routed by CI/CD (27
 * Sep): `background:#f2f3f7` was a hardcoded LIGHT-THEME literal, and with no
 * `color` of its own the odds text inherited the ambient `--ink` — which
 * R-012 (w94) made white BY DEFAULT. Light gray fill, white text: unreadable,
 * on every price button on the page, the moment dark became the default
 * theme. `sports.css` was not touched by w94 at all, so nothing caught this
 * until someone looked at a rendered screenshot.
 *
 * FIX FOLLOWS DESIGN:DESKTOP's proposed pattern for racing's matching defect
 * (`deploy/handover/design/DESKTOP-V1-20260925.md` §2) — NOT a shipped,
 * already-proven fix: as of 26 Sep that doc itself says racing's own
 * `.hr-sel-btn.disabled` is "still genuinely unbuilt". Same shape, same
 * reasoning, applied here first because it was reported here first:
 *   - a LIVE/bettable price uses `var(--card)` (the theme's own surface
 *     token, not a literal) and an explicit `var(--ink)`, so fill and text
 *     move together under any theme instead of one being hardcoded while the
 *     other tracks the theme.
 *   - a DISABLED price loses its button-ness rather than dimming with
 *     opacity: no fill, no visible border, text drops to `--muted`. This
 *     covers BOTH disabled cases through one class, deliberately — a missing
 *     price (`&mdash;`, "No price available") and a live-feed-down price
 *     (w85's gate) both render `<button class="odd-btn" disabled>`, so one
 *     rule fixes both origins of the same visual defect.
 */
.odd-btn{background:var(--odd-btn-bg);border:1px solid var(--line);border-radius:6px;padding:7px 0;text-align:center;font-weight:800;font-size:13px;color:var(--ink);transition:.12s}
.odd-btn:hover{border-color:var(--line-strong)}
.odd-btn.sel{background:var(--navy-1);color:#fff;border-color:var(--navy-1)}
/* AFTER :hover, not before: both are one-class-one-pseudo-class specificity,
   so source order decides the tie, and a disabled button can still receive a
   :hover event in some browsers — this must win regardless. */
.odd-btn:disabled{background:none;border-color:transparent;color:var(--muted);cursor:not-allowed}
.odd-btn .flash{animation:flash .5s}
@keyframes flash{0%{background:var(--warn)}100%{}}
.chart-icn{opacity:.35;text-align:center;font-size:14px}

.headline-offers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
@media(max-width:820px){.headline-offers{grid-template-columns:1fr}}
/* The 2-card variant (home page's "Build a Bet" / "Boosted Odds" pair) used to
   set grid-template-columns:repeat(2,1fr) as an INLINE style in uiux_sports.js.
   An inline style beats a media query regardless of specificity elsewhere in
   the stylesheet, so that block stayed 2 columns at any width, including
   narrow ones - part of R9's sideways-pan family (found by ui-ux while fixing
   the rest of it, correctly left alone since this file is public-web's).
   Scoped to min-width, NOT a bare `.headline-offers.cols-2` rule: two classes
   is higher specificity than the plain `.headline-offers` selector the 820px
   rule above uses, so an unscoped version would win the cascade at ANY width
   and reproduce the exact bug being fixed here, just via specificity instead
   of an inline style. Below 820px this rule does not exist at all - the plain
   .headline-offers rule above is the only one that can match. */
@media(min-width:821px){.headline-offers.cols-2{grid-template-columns:repeat(2,1fr)}}
.offer-card{border-radius:var(--radius-lg);padding:20px;color:#fff;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.offer-card h3{margin:0 0 4px;font-size:16px}
.offer-card p{margin:0 0 12px;font-size:12.5px;opacity:.85}
.offer-card.blue{background:linear-gradient(135deg,#0b2d7a,#123a99)}
.offer-card.gold{background:linear-gradient(135deg,#ffcd00,#ffb300);color:#1a1400}
.offer-card.gold p{opacity:.7}
.offer-card.dark{background:linear-gradient(135deg,#0a1226,#141c38)}

/* ---------- bet slip ---------- */
.betslip{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);position:sticky;top:14px;overflow:hidden}
.betslip-head{background:var(--navy-2);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13.5px}
.betslip-head .count{background:var(--gold);color:var(--gold-ink);border-radius:10px;padding:1px 8px;font-size:11px}
.betslip-tabs{display:flex;border-bottom:1px solid var(--line)}
.betslip-tabs div{flex:1;text-align:center;padding:10px;font-size:12.5px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.betslip-tabs div.active{color:var(--link);border-color:var(--link)}
.betslip-body{padding:16px;min-height:140px}
.betslip-empty{text-align:center;color:var(--muted);font-size:12.5px;padding:26px 10px}
.betslip-empty .ticket{font-size:28px;opacity:.3;margin-bottom:8px}
.slip-item{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;font-size:12.5px;position:relative}
.slip-item .rm{position:absolute;top:8px;right:10px;color:var(--muted);font-weight:800;cursor:pointer}
.slip-item .sel{font-weight:700}
.slip-item .match{color:var(--muted);font-size:11.5px;margin:2px 0 8px}
.slip-item input{width:100%;border:1px solid var(--line);border-radius:6px;padding:7px 8px;font-size:13px;font-weight:700;background:var(--input-bg);color:var(--ink)}
.slip-item.is-error{background:var(--card);box-shadow:inset 3px 0 0 var(--bad)}
.slip-item.is-ok{background:var(--card);box-shadow:inset 3px 0 0 var(--ok)}
.slip-item .status-live{color:var(--ok);font-size:9.5px;font-weight:800;margin-bottom:4px}
.slip-item .status-offline{color:var(--warn);font-size:9.5px;font-weight:800;margin-bottom:4px}
.slip-item .rejected{color:var(--bad);font-weight:700}
.slip-item .booked-ref{color:var(--ok);font-weight:700}
.slip-item .token-line{padding:4px 8px;text-align:center;font-size:11px;color:var(--ink-dim);font-weight:600;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel-tint);margin:6px 0}
.token-select{width:100%;margin-top:6px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:11.5px;font-weight:600;background:var(--input-bg);color:var(--ink)}
.token-input-wrap{position:relative;margin-top:6px}
.token-input{width:100%;border:1px solid var(--line);border-radius:6px;padding:7px 28px 7px 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--input-bg);color:var(--ink)}
.token-input.token-valid{border-color:var(--ok)}
.token-input.token-invalid{border-color:var(--bad)}
.token-status{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-weight:800;font-size:13px}
.token-status-valid{color:var(--ok)}
.token-status-invalid{color:var(--bad)}
.token-error{color:var(--bad);font-size:10.5px;font-weight:600;margin-top:3px}
.slip-summary{padding:0 16px 16px;font-size:12.5px}
.slip-summary .row{display:flex;justify-content:space-between;padding:6px 0;border-top:1px dashed var(--line)}
.slip-summary .row b{font-size:14px}
.betslip .btn-gold{width:calc(100% - 32px);margin:0 16px 16px;padding:13px}

/* ---------- breadcrumb / event detail ---------- */
.crumbs{font-size:12px;color:var(--muted);margin-bottom:12px}
.ticket-status-table{border-collapse:collapse;font-size:13px}
.ticket-status-table th{text-align:left;background:var(--panel-tint);padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.ticket-status-table td{padding:10px 14px;border-top:1px solid var(--line)}
/* Outcome rows: an inset bar in the tone on the first cell (R16-01's
   treatment), not a pastel fill the dark theme cannot carry. */
.ticket-status-table tr.row-won td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.ticket-status-table tr.row-lost td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.ticket-status-table tr.row-cashed-out td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.ticket-leg-table{font-size:11.5px;color:var(--muted)}
.ticket-leg-table .leg-head-row td{padding:8px 14px 2px;font-weight:700;color:var(--ink)}
.ticket-leg-table .leg-detail-row td{padding:2px 14px 8px}
.crumbs a{color:var(--link);font-weight:600}
.event-head{background:linear-gradient(115deg,var(--navy-deep),#10245e);border-radius:var(--radius-lg);color:#fff;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.event-head .side{text-align:center;width:110px}
.event-head .badge-circle{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-weight:800}
.event-head .mid{text-align:center}
.event-head .eyebrow{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.5px}
.event-head h2 .live-dot{margin-right:6px}
.market-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.market-block{margin-bottom:10px}
/* Same readability fix and same reasoning as .league-head above -- see
   that comment for the measured contrast ratios. */
.market-block h4{font-size:12px;color:var(--muted);margin:0 0 8px;font-weight:800}
.market-line{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.market-line .odds2,.market-line .odds3{display:grid;gap:8px}
.market-line .odds2{grid-template-columns:repeat(2,70px)}
.market-line .odds3{grid-template-columns:repeat(3,70px)}

/* R-016 Window 4: the real GetMatch feed has markets of ANY selection
   count (Correct Score alone ran double digits in the capture) - .odds2/
   .odds3 above are a fixed grid for the two shapes every other page on
   this site already has. This is the same idea, unbounded: wrap rather
   than assume a column count. */
.market-line .odds-wrap{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.market-line .odds-wrap .odd-btn{min-width:70px}