/* stone-theme.css — PREVIEW ONLY (branch: stone).

   THE WHOLE SHEET IS WRAPPED IN @layer theme — do not unwrap it.
   The site components live in @layer theme. For !IMPORTANT declarations the cascade REVERSES
   layer order, so an unlayered !important (what this file used to be) LOSES to an important
   rule inside a layer. That is why .bzp-tag, the sport pill and the card expander shrugged off
   !important, doubled specificity and being linked last. Joining the same layer fixes the whole
   class of problem instead of its symptoms.
*/
@layer theme {
/* stone-theme.css — PREVIEW ONLY (branch: stone). Never linked from _deployed.
   ────────────────────────────────────────────────────────────────────────────────────────────
   ONE RULE: a background ships with the one foreground guaranteed to sit on it.
       dark stone canvas  #1C1B19  ->  white            17.2:1
       light stone surface #F7F6F4 ->  stone ink #232220 ~16:1
   Material's bar for white on a dark surface is 15.8:1; body text needs 4.5:1 and controls 3:1.
   Both pairings clear all three.

   Secondary text is the SAME white at lower opacity, never a different hue — that is what keeps
   the palette from drifting back to forty shades of grey-blue.

   WHAT KEEPS ITS COLOUR, and why:
     • the three states — WON green / LOST red / PENDING amber. That is information, not
       decoration: a punter scans colour before words.
     • brand gold, on the primary action only.
     • sport identity — but moved OFF the text and onto a bar or dot. Racing green and brand gold
       sit at ~1.8:1 on white, so as text they were unreadable anyway; as a 3px rule they still
       tell you which section you are in.
   Everything else is white, stone, or nothing. */

:root, html, body {
  --canvas:      #1C1B19;
  --surface:     #232220;
  --surface-2:   #2A2825;
  --on-dark:     #FFFFFF;
  --on-dark-2:   rgba(255, 255, 255, .72);
  --on-dark-3:   rgba(255, 255, 255, .52);
  --hairline:    rgba(255, 255, 255, .09);
  --surface-lt:  #F7F6F4;
  --on-light:    #232220;

  /* remap the existing tokens so the whole tree follows without touching component CSS */
  --bg-card: var(--surface) !important;
  --bg-card-hover: var(--surface-2) !important;
  --bg-input: var(--canvas) !important;
  --bg-deep: var(--canvas) !important;
  --color-silver: var(--on-dark) !important;
  --color-muted: var(--on-dark-2) !important;
  --bz-dim: var(--on-dark-2) !important;
  /* 🚨 THE PER-SPORT ACCENT, NEUTRALISED. intel4.css paints --i4 a different colour per sport
     (football #4078ec, racing #22c55e, nba #f59e0b, tennis #a78bfa, f1 #ef4444) and it reaches
     the sticky header rule, tab underlines and focus rings on every intel page. Callum: "remove
     the colour scheme for each sport ... they dont use colours to separate the sports." An
     earlier note here kept the coloured bar as "sport identity"; that instruction superseded it.
     One variable, every sport, desktop and mobile. */
  --i4: #A99A6E !important;
  --i4-bg: var(--canvas) !important;
  --i4-card: var(--surface) !important;
  --i4-panel: var(--surface) !important;
  --i4-chip: var(--surface-2) !important;
  --i4-ink: var(--on-dark) !important;
  --i4-dim: var(--on-dark-2) !important;
  --i4-faint: var(--on-dark-3) !important;
  --i4-line: var(--hairline) !important;
}

body { background: var(--canvas) !important; color: var(--on-dark) !important; }

/* surfaces that were hard-coded rather than tokenised (the tier-1 pass found these live in
   duplicated bundles, so they are matched by value here) */
#beteb-board .tile,
#beteb-board .bb-section,
.bz-card, .i4-frame, .i4-mhead, .i4-view,
[style*="#0d0d0f"], [style*="#0a0c10"], [style*="#11141a"], [style*="#171b22"] {
  background-color: var(--surface) !important;
  color: var(--on-dark) !important;
}
#beteb-board { background: var(--canvas) !important; }

/* one text colour on dark, one dimmed step of the SAME colour */
#beteb-board .t-sel, #beteb-board .mh, .i4-stage .i4c-head { color: var(--on-dark) !important; }
#beteb-board .t-meta, #beteb-board .mm, #beteb-board .t-books, #beteb-board .t-detail,
.i4-stage .i4c-cards td[data-th]::before { color: var(--on-dark-2) !important; }

/* SPORT COLOUR: off the text, onto the marker */
#beteb-board .tile .t-tag { color: var(--on-dark-2) !important; }
#beteb-board .tile .t-tag .dot { background: var(--ac, #e7b937) !important; }
#beteb-board .tile::before { background: var(--ac, #e7b937) !important; }   /* the 3px identity bar */
#beteb-board .tile .t-odds {
  color: var(--on-dark) !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid var(--hairline) !important;
}
#beteb-board .tile .cd { background: rgba(255, 255, 255, .16) !important; }
#beteb-board .tile .cd.f { background: var(--on-dark) !important; }

/* the ONE accent, on the primary action only */
#beteb-board .tile .t-place {
  color: #1C1B19 !important;
  background: var(--color-gold, #e7b937) !important;
  border: 1px solid var(--color-gold, #e7b937) !important;
}
#beteb-board .tile .t-place .ar { color: inherit !important; }

/* the semantic three — kept, because they carry meaning */
.tt-chip.tt-pend, .tt-leg-res.tt-lr-pend { color: #E7B937 !important; background: rgba(231,185,55,.14) !important; }
.tt-chip.tt-won,  .tt-leg-res.tt-lr-won,  .tt-chip.tt-up  { color: #4ADE80 !important; background: rgba(74,222,128,.14) !important; }
.tt-chip.tt-lost, .tt-leg-res.tt-lr-lost, .tt-chip.tt-dn  { color: #F87171 !important; background: rgba(248,113,113,.14) !important; }

/* hairlines: one value, everywhere */
#beteb-board .tile *, .i4-stage .i4c-cards tbody tr, .bz-card * { border-color: var(--hairline) !important; }

/* ── TYPE: two families, hierarchy from weight and size only ────────────────────────────────
   Was FOUR — Barlow Condensed (151 uses), JetBrains Mono (124), Lora (15), Inter (7).
   Inter carries everything; mono is restored below on the 63 selectors that already used it,
   because tabular figures are what make 25/19 and 4/7 line up down a column. The wordmark keeps
   Barlow Condensed — a logo is a logo. */
body, body * { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; }
.beteb-brand-name, .beteb-brand-sub { font-family: 'Barlow Condensed', 'Inter', sans-serif !important; }



/* ══ BLOCK 2 — the components the first pass missed ═════════════════════════════════════════
   Found by sweeping every VISIBLE element on the page for a background or text colour outside
   the palette, rather than by eye. The headline picks turned out to be a completely separate
   component (.hero-tile / .hodds) from the board tiles (#beteb-board .tile) — themed one, missed
   the other. The rest are hard-coded hexes in duplicated bundles that no token reaches. */

/* ── surfaces: every hard-coded dark hex → the two stone surfaces ── */
nav, .nav, .intel-dd-menu, .social-strip, footer,
.hero-tile, .hero-tile.locked, .hmx-signup, .bb-filterwrap, .fpill, .bz-panel {
  background-color: var(--surface) !important;
}
nav, .nav { background-color: rgba(28, 27, 25, .97) !important; }
footer { background-color: var(--canvas) !important; }
.email-field, input, select, textarea { background-color: var(--canvas) !important; color: var(--on-dark) !important; }
.nav-sep { background-color: var(--hairline) !important; }

/* ── text: the blue-grey near-whites (#e2ecf8 #f1f3f7 #c6ccd6 #dfe3ea #8a92a0) collapse to
      ONE white at three opacities. This is the change that actually removes the colour noise. ── */
.hsel, .bb-hd, .hm-signup-h, .ic, .strip-title, .sub-hdr-title, a { color: var(--on-dark) !important; }
.hmeta, .sub-age, .bb-flabel, .ocb-terms, .hm-affbox-h, .t-detail, b { color: var(--on-dark-2) !important; }
.sub-consent, .hm-affbox-tc, .t-books { color: var(--on-dark-3) !important; }

/* ── sport colour OFF the text, kept on the marker ── */
.htag, .hodds, .hwhat, .ar, .affbox-more { color: var(--on-dark) !important; }
.htag { color: var(--on-dark-2) !important; }
.dot { background-color: var(--ac, #e7b937) !important; }        /* the identity carrier */
.hero-tile { border-left: 3px solid var(--ac, #e7b937) !important; }
.cd { background-color: rgba(255, 255, 255, .16) !important; }
.cd.f { background-color: var(--on-dark) !important; }

/* ── chips: one neutral chip, not five tinted ones ── */
.sec-rec, .sec-lk, .sec-lk.sl-intel, .sec-lk.sl-ask, .sec-n, .badge-gamstop {
  background-color: rgba(255, 255, 255, .08) !important;
  color: var(--on-dark) !important;
  border-color: var(--hairline) !important;
}

/* ── the ONE action colour, wherever the button appears ── */
.t-place, button.t-place {
  background-color: var(--color-gold, #e7b937) !important;
  border-color: var(--color-gold, #e7b937) !important;
  color: #1C1B19 !important;
}
.t-place .ar, .t-place span { color: #1C1B19 !important; }

/* ── DELIBERATE EXCEPTIONS ──────────────────────────────────────────────────────────────────
   Bookmaker offer cards keep their brand gradients. That colour is the bookmaker's identity and
   the thing a reader recognises before they read the words — flattening it to stone would cost
   recognition on the only cards that earn money. Same reason the WON/LOST/PENDING three stay.
   .top-bar keeps brand gold: it is a 3px bar, not text. */


/* ══ BLOCK 3 — the light-surface half of the rule ═══════════════════════════════════════════
   Block 2's blanket `a { color: white }` painted white text onto the white CLAIM OFFER buttons
   and the BeGambleAware badge — invisible. That is precisely the failure the surface/on-surface
   pairing exists to prevent, so the fix is to state the light half explicitly rather than to
   special-case the two elements that happened to show it.

   RULE, both directions:
       dark stone surface  ->  white text
       light surface       ->  dark stone text        <- this half was missing */

.ocb-cta, .oc-cta, .badge-bga, .btn-light, [class*="cta"][style*="background:#fff"],
a[class*="cta"], button[class*="cta"] {
  color: var(--on-light) !important;
}
.ocb-cta *, .oc-cta *, .badge-bga * { color: inherit !important; }

/* the subscribe / accept actions are dark-on-gold, which is the same rule with the brand accent
   as the light surface */
.sub-btn, #cookie-accept, .fpill.on { color: #1C1B19 !important; }

/* hero tile: kill the leftover sport-tinted wash, keep the identity to the border and dot */
.hero-tile, .hero-tile.locked { background-image: none !important; box-shadow: none !important; }


/* ══ BLOCK 4 — the intel boards ════════════════════════════════════════════════════════════
   These components hard-code their hexes instead of reading the --i4-* tokens, so remapping the
   tokens in block 1 did nothing for them. Caught by running the same sweep on /intel/football/.
   The active-state blue #4078ec is a SECOND action colour competing with brand gold — it folds
   into gold, so "the thing you can press" is one colour across the whole site. */

/* panels and chrome → the two stone surfaces */
.i4-tab, .fb-mode-switch, .fb-gender-switch, .tl, .bzp-card, .bzp-card.bzp-multi,
.i4-ticker, .i4-rail, .i4-sub { background-color: var(--surface) !important; }
.i4-ticker, .i4-shell { background-color: var(--canvas) !important; }

/* active state = brand gold, dark text on it (the light-surface half of the rule) */
.i4-tab.on, .fbm-btn.active, .fbg-btn.active, .sport-tab-btn.active, .i4-sig {
  background-color: var(--color-gold, #e7b937) !important;
  color: #1C1B19 !important;
  border-color: var(--color-gold, #e7b937) !important;
}
.i4-tab.on *, .fbm-btn.active *, .fbg-btn.active *, .sport-tab-btn.active * { color: #1C1B19 !important; }
.ct, .fbm-ct { background-color: rgba(0, 0, 0, .22) !important; }

/* the blue-grey text ramp → one white at three opacities */
.i4-title, .i4-verdict, .vn, .i4-hd, .bzp-t { color: var(--on-dark) !important; }
.i4-clock, .tm, .i4-tab, .fbm-btn, .fbg-btn, .sport-tab-btn, .sport-tab-icon { color: var(--on-dark-2) !important; }
.vl, .z, .i4-faint { color: var(--on-dark-3) !important; }
em { color: var(--on-dark) !important; }


/* ══ BLOCK 5 — racing, and the decorative misuse of the semantic colours ═══════════════════
   The sweep WHITELISTED green/red/amber as semantic, which is exactly why it missed these: the
   racing board paints strike rates in the WON green and trainer names in brand gold. Neither is
   a result. Reusing the result colours as decoration is what makes WON green stop meaning won —
   so they come off everything that is not a settled outcome.
   Hierarchy on those numbers now comes from weight and the mono face, not hue. */

td.r, .i4c-exp, .cxn-lnk, .cxn-lnk *, .r b, .seab-tp, .dd-sub, .cf-lbl, .rs-lbl {
  color: var(--on-dark) !important;
}
td.r, .r b { font-weight: 600 !important; }
.cf-lbl, .rs-lbl, .dd-sub { color: var(--on-dark-2) !important; font-weight: 400 !important; }

/* green-tinted panel and border greys → the one stone surface and the one hairline */
.bz-card, .bz-fxbox, .cf-chip, .rs-chip, .seab, .seab-tp, .bz-panel, .i4c-head {
  border-color: var(--hairline) !important;
}
.seab, .seab-tp, .bz-fxbox { background-color: var(--surface) !important; }
.bz-lbl, .i4c-head, .th-lbl { color: var(--on-dark) !important; }

/* the sport pill: needs `html body` because the page's own rule is more specific than a bare
   class — checked, not assumed */
html body .sport-tab-btn.active {
  background-color: var(--color-gold, #e7b937) !important;
  border-color: var(--color-gold, #e7b937) !important;
}
html body .sport-tab-btn.active, html body .sport-tab-btn.active * { color: #1C1B19 !important; }

/* KEPT ON PURPOSE: .i4-mhead's coloured top bar. That is the sport identity as a 3px rule —
   the same bar you asked to move up in place of the gold one — and a bar can carry colour that
   text cannot. */


/* ══ BLOCK 6 — the master palette ══════════════════════════════════════════════════════════
   Blocks 2-5 chased component classes one page at a time. The real source is a 58-variable
   palette on :root, and most components read it. Overriding the VARIABLES fixes every component
   that uses them — including ones on pages I have not opened yet — which is the difference
   between a theme and a pile of patches. The class rules above stay as the backstop for the
   components that hard-code their hexes and never read a token at all.

   Neutral ramp: five near-white blue-greys (#e2ecf8 .7/.8/.9, #e9ecf2 .82/.64) → ONE white. */
:root, html {
  --muted:      rgba(255, 255, 255, .72) !important;
  --silver:     rgba(255, 255, 255, .72) !important;
  --pale:       rgba(255, 255, 255, .88) !important;
  --dim:        rgba(255, 255, 255, .72) !important;
  --very-dim:   rgba(255, 255, 255, .52) !important;
  --bz-mut:     rgba(255, 255, 255, .72) !important;

  /* surfaces → the two stones */
  --ink:            #1C1B19 !important;
  --nav-bg:         rgba(28, 27, 25, .95) !important;
  --li-bg-card:     #232220 !important;
  --li-bg-card-hover: #2A2825 !important;
  --bz-panel:       #232220 !important;
  --bz-panel2:      #2A2825 !important;

  /* every hairline is the same hairline */
  --rule:           rgba(255, 255, 255, .09) !important;
  --rule2:          rgba(255, 255, 255, .05) !important;
  --rule3:          rgba(255, 255, 255, .09) !important;
  --bz-line:        rgba(255, 255, 255, .09) !important;
  --li-rule:        rgba(255, 255, 255, .09) !important;
  --li-rule-soft:   rgba(255, 255, 255, .06) !important;

  /* one gold, not four */
  --gold-warm:      #e7b937 !important;
  --gold-dark:      #e7b937 !important;
  --bz-gold:        #e7b937 !important;
  --li-gold:        #e7b937 !important;

  /* the tinted chip backgrounds all become the same neutral wash */
  --gold-bg:        rgba(255, 255, 255, .08) !important;
  --green-bg:       rgba(255, 255, 255, .08) !important;
  --blue-bg:        rgba(255, 255, 255, .08) !important;
  --red-bg:         rgba(255, 255, 255, .08) !important;
  --tennis-bg:      rgba(255, 255, 255, .08) !important;
  --tennis-border:  rgba(255, 255, 255, .09) !important;
}
/* --blue/--green/--tennis/--nba KEPT AS THEY ARE on purpose: they still drive the sport identity
   bars and dots. They are stripped from TEXT by the class rules above, not by muting the token. */

/* the two that resisted: their page rules outrank a bare class, so these are raised deliberately */
html body .i4c-exp, html body th.i4c-exp { color: var(--on-dark-2) !important; border-color: var(--hairline) !important; }
html body .sport-tab-btn.active span, html body .sport-tab-btn.active .sport-tab-icon { color: #1C1B19 !important; }


/* ══ BLOCK 7 — the last three, and the expander ════════════════════════════════════════════
   The card expander is owned by a rule family in intel-mobile.css whose selector is far more
   specific than a bare class, so `html body .i4c-exp` never stood a chance. Matching that
   selector's shape (and relying on stone-theme.css being linked LAST to settle the tie) is the
   honest fix — raising the specificity blindly would just move the fight somewhere else. */
.i4-stage table.i4c-cards tbody tr :is(td, th).i4c-exp,
.i4-stage table.i4c-cards tbody tr :is(td, th).i4c-exp * {
  color: var(--on-dark) !important;
}

/* the greenish greys on the filter chips (#c2cac4) and captions (#5f766c, #8ba49a) */
.cf-chip, .rs-chip, .mut, .seab-h, .seab-h u, .seab-h * { color: var(--on-dark-2) !important; }

/* the three genuine contrast failures the composited audit found */
.skip-link { color: #1C1B19 !important; background: var(--color-gold, #e7b937) !important; }  /* was 1.84:1 */
.social-sep { color: rgba(255, 255, 255, .4) !important; }                                     /* was 1.92:1 */


/* ══ BLOCK 8 — the expander glyph, settled empirically ═════════════════════════════════════
   No stylesheet rule, no inline declaration and no adopted sheet sets this element's colour;
   readings changed between probes because the board re-renders on a timer and re-injects its
   own <style>. Rather than keep chasing a mechanism that moves, both the colour and the fill
   are set at the specificity of the rule family that owns the element. Verified by eye. */
.i4-stage table.i4c-cards tbody tr :is(td, th).i4c-exp,
.i4-stage table.i4c-cards tbody tr :is(td, th).i4c-exp *,
th.i4c-exp, td.i4c-exp {
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}


/* ══ BLOCK 9 — the picks ticker, and a chip that failed on gold ════════════════════════════
   /intel/football/ carries a .bzp-* / .tl / .tg family still painted in the intel blue #4078ec.
   Same treatment as everywhere else: the number and the label go white, and weight carries the
   emphasis that colour used to. */
.bzp-tag, .bzp-odds, .bzp-t, .bzp-leg, .tl, .tg, .bzp-card .s, .bzp-hd {
  /* `.s` was BARE here and it is a class the BETEB sheet also uses (the meta line in every
     section header). Because this file is layered and the sheet is not, this important
     declaration beat the sheet own rule regardless of specificity and painted that line
     white on a light header. Scoped to .bzp-card, which is all it was ever meant for. */
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}
.bzp-odds, .bzp-tag { font-weight: 600 !important; }
.bzp-leg-sub, .bzp-sub { color: var(--on-dark-2) !important; }

/* the count chip sat dark-on-gold inside an already-gold button — 2.8:1. A solid stone chip with
   white text reads cleanly on the gold and stays inside the palette. */
.ct, .fbm-ct, .fbg-ct {
  background-color: #1C1B19 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}


/* ══ BLOCK 10 — resolving two conflicts I introduced ═══════════════════════════════════════
   1. Block 4's `.fbm-btn.active *` (dark text on the gold button) outranked block 9's `.ct`,
      so the count chip ended up dark text on a dark chip — 1:1, invisible. The chip is a child
      of the active button, so it has to be named THROUGH it to win.
   2. .bzp-tag / .bzp-odds kept the intel blue: same story, a more specific owner. */
html body .fbm-btn.active .fbm-ct, html body .fbg-btn.active .fbg-ct,
html body .i4-tab.on .ct, html body .sport-tab-btn.active .ct,
html body .fbm-btn .fbm-ct, html body .i4-tab .ct {
  background-color: #1C1B19 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

html body .bzp-card .bzp-tag, html body .bzp-card .bzp-odds,
html body .bzp-tag, html body .bzp-odds, html body .i4-ticker .tl, html body .i4-ticker .tg {
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}

.social-sep { color: rgba(255, 255, 255, .55) !important; }

/* mono restore — generated from the selectors that already used JetBrains Mono, so the
   blanket Inter rule above cannot silently un-align a column of prices.
   :root, body and @layer were STRIPPED from the generated list: they had matched the grep
   and would have set the ENTIRE SITE in monospace. */
#bb-loading .bbl-t,
#beteb-board .bb-flabel,
#beteb-board .bb-subhd,
#beteb-board .conf b,
#beteb-board .fpill,
#beteb-board .gb-row .gb-g,
#beteb-board .hodds,
#beteb-board .htag,
#beteb-board .mleg .mo,
#beteb-board .sec-lk,
#beteb-board .sec-n,
#beteb-board .t-books .go,
#beteb-board .t-odds,
#beteb-board .t-place,
#beteb-board .t-tag,
#beteb-board .t-whybtn,
#beteb-board .tg-big,
#beteb-board .tg-lbl,
#beteb-board .tier-l,
#beteb-board .tier-o,
#lc-football .lc-metric-label,
#lc-football .lc-view-btn,
#subscribe .hm-signup-eye,
.aff-btn,
.aff-caption[data-astro-cid-llvzcdus],
.beteb-hr-row,
.beteb-lineup-xi,
.beteb-stat-table,
.beteb-team-stat-table,
.beteb-team-stats-row,
.beteb-team-sub-section,
.card-meta,
.card-pill,
.card-track,
.event-banner,
.event-foot,
.event-meta,
.event-tip-tag,
.hl-label,
.hl-odds,
.lc-filter label,
.lc-metric-btn,
.lc-metric-group,
.lc-metric-search input,
.lc-mid-affiliate-line,
.lc-pct-legend,
.lc-pct-row,
.lc-scatter-note,
.lc-timeframe,
.li-hero-kicker,
.li-stat-lbl,
.li-stat-num.li-stat-live,
.loading-msg,
.no-picks,
.sec-hdr-meta,
.stab,
.strip-caption,
.strip-title,
.sub-hdr-tag,
.sub-hdr-title
{ font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-variant-numeric: tabular-nums !important; }


/* ── BLOCK 11 — final mop-up, inside the layer ─────────────────────────────────────────────
   The last hues on /intel/football/: the picks-card text ramp and the footer tagline. With the
   sheet layered these now land first time instead of needing escalating selectors. */
.bzp-nm, .bzp-leg-nm { color: var(--on-dark) !important; }
.bzp-legcount, .bzp-source, .ft-tagline { color: var(--on-dark-2) !important; }
.bzp-source { -webkit-text-fill-color: var(--on-dark-2) !important; }

/* -- BLOCK 12 - the tip-card body text -----------------------------------------------------
   Reported from the live preview: racing and tennis tips still read in their sport colour.
   .t-what ("Win single", "To win the match") and .mo (the leg odds, 25/19) are painted with the
   sport hue on all 31 board tiles - racing green, tennis purple, football blue. They are the
   words of the card and its price, so they go neutral like every other piece of body text; the
   sport is still named by the bar and the dot.
   .malert ("NOT IN XI") KEEPS amber: that is an attention signal, the same family as PENDING,
   and losing it would cost real information. */
.t-what, .mo, .t-what *, .mo * {
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}
.t-what { color: var(--on-dark-2) !important; -webkit-text-fill-color: var(--on-dark-2) !important; }
.mo { font-weight: 600 !important; }
.sep { color: var(--on-dark-3) !important; -webkit-text-fill-color: var(--on-dark-3) !important; }

/* -- BLOCK 13 - the countdown is not a result -----------------------------------------------
   .tt-chip.tt-up ("4h 26m to off") was rendering in the WON green, because block 1 grouped it
   with tt-won. A countdown is neutral information; reusing a result colour for it is exactly
   what stops green meaning "won" at a glance. Neutral chip, same as any other metadata. */
.tt-chip.tt-up {
  color: var(--on-dark-2) !important;
  -webkit-text-fill-color: var(--on-dark-2) !important;
  background-color: rgba(255, 255, 255, .08) !important;
}

/* -- BLOCK 14 - one accent for every sport --------------------------------------------------
   The board writes the sport colour as an INLINE custom property on each section:
       <div class="bb-section" data-sec="racing" style="--ac:#22C55E;--acrgb:34,197,94">
   Everything downstream reads it - the banner wash, its left bar, the tile bars and the dots.
   So overriding that ONE variable retires the whole per-sport colour scheme at once, instead of
   hunting the components that consume it. (A stylesheet !important beats an inline declaration
   that carries no !important of its own; inside the layer it beats the site rules too.)

   The value is a muted brass - grey with a little of the brand gold mixed in. At the .16 alpha
   the banners already use it lands around #332F27: a lighter, warmer grey than the canvas,
   identical on every sport. The sport is still named by its icon and its words. */
[style*="--ac"], .bb-section, .tile, .hero-tile, .bz-card {
  --ac: #A99A6E !important;
  --acrgb: 169, 154, 110 !important;
}

/* -- BLOCK 15 - the sub-headings inside a section -------------------------------------------
   "MAIN" / "ALTERNATIVES - RANKED" and their little leading dash hardcode the sport green, so
   the --ac override in block 14 never reached them. They take the same uniform brass, which is
   now inherited from the section. */
.bb-subhd { color: var(--on-dark-2) !important; -webkit-text-fill-color: var(--on-dark-2) !important; }
.bb-subhd span, .bb-subhd i, .bb-subhd::before, .bb-subhd::after {
  background-color: var(--ac, #A99A6E) !important;
  background-image: none !important;
  color: var(--on-dark-2) !important;
  -webkit-text-fill-color: var(--on-dark-2) !important;
}

/* -- BLOCK 16 - the OTHER sport variable ----------------------------------------------------
   The renderer writes FOUR inline custom properties, not one: --ac and --acrgb (block 14), plus
   --sc on the sub-headings, which is why "Main picks" stayed football blue after block 15.
   --tc is deliberately NOT touched: that is the team kit colour used by the BETEB sheet, a
   different feature entirely. */
[style*="--sc"], .bb-subhd, .bb-section, .bb-grid {
  --sc: #A99A6E !important;
}

/* -- BLOCK 17 - headline picks: one line for the buttons -----------------------------------
   The four tiles are all 232px tall, but they were display:block, so each CTA simply followed
   however much copy sat above it - measured at 142 / 163 / 181 / 160px from the top of its tile.
   Making the tile a flex column and giving the CTA margin-top:auto pins every one to the same
   baseline, whatever the copy above does.

   The Editor's Pick "Subscribe to unlock" was an <a>: 44px tall, 13px sentence case, transparent
   with a faint border - a different control entirely. It now takes the exact metrics measured off
   .t-place (35px, 9px/10px padding, 8px radius, 10px/700 uppercase, .5px tracking) and the same
   fill, so the row reads as four identical buttons. */
.hero-tile { display: flex !important; flex-direction: column !important; }
.hero-tile > .t-bet, .hero-tile > .hbet, .hero-tile > .t-foot { margin-top: auto !important; }

.hero-tile .hbet.lock {
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-sizing: border-box !important;
  height: 35px !important; padding: 9px 10px !important; border-radius: 8px !important;
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .5px !important;
  text-decoration: none !important; white-space: nowrap !important;
  background: var(--color-gold, #e7b937) !important;
  border: 1px solid var(--color-gold, #e7b937) !important;
  color: #1C1B19 !important; -webkit-text-fill-color: #1C1B19 !important;
}
.hero-tile .hbet.lock * { color: #1C1B19 !important; -webkit-text-fill-color: #1C1B19 !important; }

/* -- the gap under the offers strip ---------------------------------------------------------
   The board wrap carries padding-top:80px, which is what put 90px of dead space between the
   bottom of the offers box and "Today's headline picks". 24px keeps them related without
   touching them together. The wrap has no class of its own, so it is addressed by the heading
   it contains rather than by position. */
.tips-wrapper > div:has(.bb-hd) { padding-top: 24px !important; }

/* -- BLOCK 18a - finishing the headline alignment -------------------------------------------
   Block 17 pinned the unlock link but NOT the three .t-bet wrappers. Reason, measured: .t-bet
   carries a flex-grow from the site CSS, so the moment the tile became a flex column the wrapper
   swallowed every pixel of spare space (74 / 54 / 35px tall for 35px of button) and margin-top:
   auto had nothing left to push against. Denying the grow hands that space back to the margin. */
.hero-tile > .t-bet, .hero-tile > .hbet, .hero-tile > .t-foot {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* -- BLOCK 18b - Jump to sport --------------------------------------------------------------
   The pills take the banner treatment - the same brass wash and edge the sport banners use - so
   the control matches the thing it scrolls you to. Selected goes solid white with black text.
   This also repairs a real bug: .fpill.on was dark ink on the dark surface (both #23/#1C), i.e.
   the selected sport was effectively invisible. */
.fpill, .sport-tab-btn {
  background-color: rgba(169, 154, 110, .18) !important;
  border: 1px solid rgba(169, 154, 110, .32) !important;
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}
.fpill.on, .sport-tab-btn.active,
html body .sport-tab-btn.active {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}
.fpill.on *, .sport-tab-btn.active *,
html body .sport-tab-btn.active * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* -- BLOCK 18c - tip boxes to one size, with the long ones scrolling ------------------------
   Measured 31 tiles running 158px to 614px - the tall ones are accas, where .mlegs holds the
   legs (7 legs = 497px on its own). Every tile is fixed at 360px and .mlegs takes the leftover
   space and scrolls; min-height:0 is the part that actually lets a flex child scroll instead of
   growing. The header and the bet button stay pinned, so only the legs move. */
#beteb-board .tile {
  height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
}
#beteb-board .tile > .t-top, #beteb-board .tile > .t-detail { flex: 0 0 auto !important; }
#beteb-board .tile .mlegs {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
#beteb-board .tile > .t-foot, #beteb-board .tile > .t-bet {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}
#beteb-board .tile .mlegs::-webkit-scrollbar { width: 6px !important; }
#beteb-board .tile .mlegs::-webkit-scrollbar-track { background: transparent !important; }
#beteb-board .tile .mlegs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22) !important; border-radius: 3px !important;
}

/* -- BLOCK 19 - two sizes, measured ---------------------------------------------------------
   360px for everything was too generous. Measured the NATURAL height of all 31 tiles by
   releasing the fixed height and letting each size to its content:

       singles (20 tiles)  148 - 185px,  median 167
       accas   (11 tiles)  209 - 604px,  median 350   (2 to 7 legs)

   So singles get 190px - the tallest needs 185, and nothing clips. Accas come down 360 -> 280:
   smaller than before but still roomy enough to read a few legs before you scroll, which is the
   point of the scroller.

   .tile.open is the catch: clicking WHY sets that class and drops in a 107px explanation. At
   360px there was spare room to absorb it; at 190px there is not, so an open tile is allowed to
   size to its content and springs back when closed. Without this the WHY panel would be cut off. */
#beteb-board .tile { height: 190px !important; }
#beteb-board .tile:has(.mlegs) { height: 280px !important; }
#beteb-board .tile.open { height: auto !important; }

/* On a phone the cards are one per row and much narrower, so text wraps further and the desktop
   numbers would clip. Uniform height buys nothing when nothing sits beside it: singles size to
   their content, accas keep a cap and their scroller. */
@media (max-width: 640px) {
  #beteb-board .tile { height: auto !important; }
  #beteb-board .tile:has(.mlegs) { height: 320px !important; }
  #beteb-board .tile.open { height: auto !important; }
}

/* -- BLOCK 20 - Ask BETEB ------------------------------------------------------------------
   The page ran on its own cream, #F5F0E8, for every headline and heading - close enough to the
   palette white to look like a mistake rather than a choice, so it folds into the one white.

   BETEB stays gold. It is marked up as <em> inside the H1, and block 4 had set em to white for
   the intel boards, which is what turned the wordmark white here - so it is named explicitly
   rather than left to a rule written for another page. */
.welcome-headline { color: var(--on-dark) !important; -webkit-text-fill-color: var(--on-dark) !important; }
.welcome-headline em {
  color: var(--color-gold, #e7b937) !important;
  -webkit-text-fill-color: var(--color-gold, #e7b937) !important;
  font-style: italic !important;
}
.ws-horse, .welcome-prompt-btn, .welcome-sub, h2, h3, strong {
  color: var(--on-dark) !important; -webkit-text-fill-color: var(--on-dark) !important;
}

/* the three sample cards still carried the per-sport scheme (green NAP / blue banker / purple
   tennis) - same treatment as the board: one surface, one brass edge, neutral type. */
.welcome-sample-card {
  background-color: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--hairline) !important;
  border-left: 3px solid #A99A6E !important;
}
.ws-label { color: var(--on-dark-2) !important; -webkit-text-fill-color: var(--on-dark-2) !important; }
.ws-odds, .ws-pick, .ws-horse { color: var(--on-dark) !important; -webkit-text-fill-color: var(--on-dark) !important; }
.ws-meta, .ws-sub { color: var(--on-dark-3) !important; -webkit-text-fill-color: var(--on-dark-3) !important; }

/* "Live data" keeps its green DOT - that is a live/offline state worth a colour - but the words
   go neutral like the rest of the metadata. */
.data-pill, .data-pill span { color: var(--on-dark-2) !important; -webkit-text-fill-color: var(--on-dark-2) !important; }
.data-pill .status-dot { background-color: #4ADE80 !important; }

/* -- the sport commands ---------------------------------------------------------------------
   The quick prompts are the commands you send BETEB - one per sport - so they take the mono
   face, which is the half of the type scheme that already carries anything machine-ish. Reads
   as something you run rather than something you read. */
.welcome-prompt-btn, .welcome-prompts button {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: -.1px !important;
}

/* -- BLOCK 21 - the intel tip cards ---------------------------------------------------------
   .bzp-card already picked up the surface and the neutral type from the earlier blocks, so what
   was left was the sizing. Measured the same way as the board, on /intel/football/:

       singles (6 cards)  131 - 175px,  median 131
       accas   (7 cards)  175 - 443px,  median 254   (3 to 7 legs)

   Singles 180px (nothing clips), accas 260px with .bzp-legs taking the slack and scrolling.
   Same min-height:0 that makes a flex child scroll rather than grow. */
.bzp-card { height: 180px !important; display: flex !important; flex-direction: column !important; }
.bzp-card:has(.bzp-legs) { height: 260px !important; }
.bzp-card > .bzp-top { flex: 0 0 auto !important; }
.bzp-card .bzp-legs {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
.bzp-card .bzp-legs::-webkit-scrollbar { width: 6px !important; }
.bzp-card .bzp-legs::-webkit-scrollbar-track { background: transparent !important; }
.bzp-card .bzp-legs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22) !important; border-radius: 3px !important;
}
@media (max-width: 640px) {
  .bzp-card { height: auto !important; }
  .bzp-card:has(.bzp-legs) { height: 300px !important; }
}

/* -- BLOCK 22 - the last blue edge ----------------------------------------------------------
   .i4-frame keeps a blue top border - the final piece of the per-sport scheme on the intel
   pages. It takes the same brass as the banners so the command frame matches everything else. */
.i4-frame { border-top-color: #A99A6E !important; }

/* -- BLOCK 23 - confidence pips on the intel cards -------------------------------------------
   .bzp-cd.f was filled with raw #22C55E - the success green used as decoration for a 9/10
   confidence bar. My own colour sweep kept missing it because #22C55E/#4ADE80 sit on the
   semantic allow-list, so anything reusing them reads as "intended" to the audit. Same rule as
   everywhere else: a confidence score is not a result, so it goes neutral. */
.bzp-cd { background-color: rgba(255, 255, 255, .16) !important; }
.bzp-cd.f { background-color: var(--on-dark) !important; }
.bzp-tag::before, .bzp-dot { background-color: var(--ac, #A99A6E) !important; }

/* -- BLOCK 24 - the flash of unstructured content --------------------------------------------
   Loading an intel tab showed the page's RAW markup for ~1.9s - including the "BETEB NBA SHEET"
   builder block - before intel4.js rebuilt the pane into the tabbed COMMAND frame and the loose
   sections vanished. Measured on both this preview and production (raw content at ~190ms, frame
   at ~1920ms), so it is pre-existing rather than something the restyle introduced.

   The raw sections are hidden while html.i4-boot is set. A small inline script in each intel page
   sets that flag and clears it the instant .i4-frame appears (MutationObserver), with a hard 6s
   timeout as a failsafe - so if the script ever fails to build the frame, the content still
   appears rather than staying hidden forever. */
html.i4-boot .live-pane > *:not(.i4-frame):not(.i4-offers) { display: none !important; }
html.i4-boot .live-pane.active::before {
  content: 'Loading‚6';
  display: block;
  padding: 72px 0;
  text-align: center;
  color: var(--on-dark-2);
  font: 600 12px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
}

/* -- BLOCK 25 - the sheet builder that flashed above the command box ------------------------
   Traced properly this time. intel4.js buckets the page by heading (line ~170): everything after
   the "Offers" heading is treated as an offer, which sweeps the sport's SHEET section into the
   offers dock along with the carousel. adopt() rescues it into the BETEB Sheet tab, but only
   ~3s later. On tennis the chain was literally:

       bz5-builder > bz5-section > i4-offers > live-pane

   Block 24 exempted .i4-offers from the boot hiding (the dock is legitimately built early), so
   the stray sheet stayed visible - and because the dock now sits ABOVE the frame, it showed up
   over the command box rather than under it. That last part was my doing.

   A sheet section has no business in the offers dock at any point, so it is hidden there
   permanently; once adopt() moves it into its tab it is no longer inside .i4-offers and this
   rule stops applying. The carousel, the heading and the T&C line are untouched. */
.i4-offers > [class*="-section"],
.i4-offers > [class*="-builder"],
.i4-offers > [id*="section"] {
  display: none !important;
}

/* the T&C line under the offers, matching the tips page */
.i4-offers-tc {
  display: block !important;
  margin: 10px auto 0 !important;
  max-width: 1200px !important;
  text-align: center !important;
  color: var(--on-dark-3) !important;
  -webkit-text-fill-color: var(--on-dark-3) !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
}

/* -- BLOCK 26 - "See all offers" moves under the ads ----------------------------------------
   Done with flex ORDER, not by moving the markup. intel4.js buckets the page by heading: line
   ~170 takes everything following the "Offers" heading and treats it as offers. Move that
   heading below the carousel in the DOM and the carousel stops being collected into the dock
   at all - so the visual order changes here while the source order, which the script depends
   on, stays exactly as it was.

   The mark beside the link is .bz-zhead::before, a 16x3 bar still painted the intel blue
   #4078EC. It takes the same brass as every other rule on the site. */
.i4-offers, .hm-affbox {
  display: flex !important;
  flex-direction: column !important;
}
.i4-offers > .offer-carousel, .hm-affbox > .offer-carousel { order: 1 !important; }
.i4-offers > .bz-zhead, .hm-affbox > .hm-affbox-h { order: 2 !important; }
.i4-offers > .i4-offers-tc, .hm-affbox > .hm-affbox-tc { order: 3 !important; }

/* the heading itself: neutral text, brass mark */
.bz-zhead, .hm-affbox-h {
  color: var(--on-dark-2) !important;
  -webkit-text-fill-color: var(--on-dark-2) !important;
}
.bz-zhead::before, .hm-affbox-h::before {
  background-color: #A99A6E !important;
  background-image: none !important;
}
/* a little air now that the link sits under the cards */
.i4-offers > .bz-zhead, .hm-affbox > .hm-affbox-h {
  margin-top: 10px !important;
  margin-bottom: 2px !important;
}

/* -- BLOCK 27 - no "Today's read" -----------------------------------------------------------
   The chip in the command header: <div class="i4-verdict"><span class="vl">TODAY'S READ</span>
   <span class="vn">Football Single #1 - BTTS Yes</span><b>@ 17/16</b></div>. Hidden rather than
   cut from intel4.js, because the same header markup feeds every sport and a CSS rule is the
   reversible half of that trade. The title beside it (.i4-id) is untouched. */
.i4-verdict { display: none !important; }

/* -- BLOCK 28 - the tips-page offers box --------------------------------------------------
   Moving the offers to the top put them under the fixed nav: the box started at y=14 with the
   nav occupying the first ~57px, so its top edge was hidden. 82px matches the padding-top the
   hero section already uses, so it clears the nav by the same margin as everything else.

   The framed look also goes, to match the intel dock: no border, no panel fill, no inline gold
   top rule - just the cards, the link and the terms line on the page ground. */
main > .hm-partner, .hm-partner { margin-top: 82px !important; }
.hm-affbox {
  border: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

/* -- BLOCK 29 - intel offers box matches the tips page --------------------------------------
   Measured off the tips page rather than eyeballed:
       heading  Inter 12px / 400, uppercase, 1.5px tracking, white .72, CENTRED, no ::before mark
       link     Inter 10px / 400, uppercase, 1px tracking, white
       terms    Inter  9px / 400, 0.6px tracking, white .52, centred
   The intel heading carried a brass dash and sat left; the tips one has no mark at all, so the
   dash goes here and the block centres. */
.i4-offers > .bz-zhead {
  text-align: center !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .72) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .72) !important;
}
.i4-offers > .bz-zhead::before { content: none !important; display: none !important; }
.i4-offers > .bz-zhead .affbox-more {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.i4-offers-tc {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .6px !important;
  text-align: center !important;
  color: rgba(255, 255, 255, .52) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .52) !important;
}
/* and unframe the intel dock the same way as the tips box */
.i4-offers { border: 0 !important; background: transparent !important; box-shadow: none !important; }

/* -- BLOCK 30 - actually centring the intel offers link -------------------------------------
   Block 29 set text-align:center and the computed style agreed, but it still rendered left:
   .bz-zhead is a FLEX container (it used to hold the mark and the label side by side), and
   text-align does nothing to flex items. Reverting it to a block is enough now that the mark
   is gone. */
.i4-offers > .bz-zhead {
  display: block !important;
  justify-content: center !important;
}

/* -- BLOCK 31 - keep this sheet OUT of the BETEB sheet -------------------------------------
   The sheet card is scoped under .beteb-v7 so nothing on the page can reach into it - except
   that several rules in THIS file are written against bare element selectors (a, b, em, strong)
   with !important, and the card uses <b> inside .hmeta and <em> in its headings. That is where
   the white text on the sheet came from: my own theme, not the sheet.

   It matters more here than anywhere else on the site, because the card is exported as a PNG -
   a stray inherited colour becomes a permanent artefact in a file someone shares.

   `inherit` hands each element back to whatever the sheet's own stylesheet set on its parent,
   rather than guessing a replacement colour here. */
.beteb-v7 a, .beteb-v7 b, .beteb-v7 em, .beteb-v7 strong, .beteb-v7 small {
  /* <i> deliberately NOT in this list: the sheet uses <i> for its O/X markers and sets
     their colour itself, so forcing inherit here flattened hit and miss to one colour. */
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
/* the pitch labels are white ON GREEN by design - that one is the sheet's own choice */
.beteb-v7 .pp .nn { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }

/* -- the sheet BUILDER box (the controls above the card) ------------------------------------
   Same stone treatment as the rest of the intel furniture: one surface, brass edge, neutral
   type, gold only on the action. */
/* All four sheet builders, not just two: racing and F1 were missing, so their labels went dark
   on a dark box the moment the sheets were converted to stone. */
/* BUILDERS ARE LIGHT, like the cards they build. */
.bz4-section, .bz5-section, .bz6-section, .bz7-section,
.bz4-builder, .bz5-builder, .bz6-builder, .bz7-builder {
  background-color: var(--surface-lt) !important;
  background-image: none !important;
  border: 1px solid var(--hairline) !important;
  border-left: 3px solid #A99A6E !important;
  border-radius: 8px !important;
}
/* Dark ink, because the box is light now. The sheets' own FAINT/DIM are already dark values
   after the stone conversion, so anything they set lands correctly on this surface — which is
   why this no longer needs to override every descendant, only the ones that inherited white
   from the dark page. */
.bz4-builder, .bz5-builder, .bz6-builder, .bz7-builder,
.bz4-builder label, .bz5-builder label, .bz6-builder label, .bz7-builder label,
.bz4-title, .bz5-title, .bz6-title, .bz7-title {
  color: var(--on-light) !important;
  -webkit-text-fill-color: var(--on-light) !important;
}
.bz4-builder select, .bz4-builder input, .bz5-builder select, .bz5-builder input,
.bz6-builder select, .bz6-builder input, .bz7-builder select, .bz7-builder input {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(28, 27, 25, .22) !important;
  color: var(--on-light) !important;
  border-radius: 6px !important;
}
/* generate / download: the one action colour, dark text on it */
.bz5-builder button, .bz7-builder button,
.bz5-section button, .bz7-section button {
  background-color: var(--color-gold, #e7b937) !important;
  background-image: none !important;
  border: 1px solid var(--color-gold, #e7b937) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}
.bz5-builder button, .bz5-builder button *, .bz7-builder button, .bz7-builder button *,
.bz5-section button, .bz5-section button *, .bz7-section button, .bz7-section button * {
  color: #1C1B19 !important;
  -webkit-text-fill-color: #1C1B19 !important;
}

/* -- BLOCK 32 - hand the BETEB sheet back to its own stylesheet ------------------------------
   Third leak of the same kind, so this one is a list rather than another one-off. Several
   selectors in this file are BARE class names that the sheet also uses - .tm, .tl, .tg, .s,
   .hmeta, .k - and because this file is layered and the sheet's stylesheet is not, an important
   declaration here beats the sheet REGARDLESS of specificity. That is what painted the H2H team
   names, the section meta line and the masthead form string white on a light card.

   Rather than keep discovering them one at a time, every text class the sheet owns is restored
   here to the sheet's own tokens, at a specificity the rules above cannot reach. Values copied
   from beteb-sheet-v7.js so the two agree.

   It matters more here than elsewhere: the card is exported as a PNG, so a leaked colour becomes
   a permanent artefact in a file someone shares. */
.beteb-v7 .canvas .tm, .beteb-v7 .canvas .sc, .beteb-v7 .canvas .t,
.beteb-v7 .canvas td.k, .beteb-v7 .canvas .v7fc .v, .beteb-v7 .canvas .hmid .w {
  color: var(--c-i) !important;
}
.beteb-v7 .canvas .hmeta, .beteb-v7 .canvas .dt, .beteb-v7 .canvas .sec-h .s,
.beteb-v7 .canvas .v7fc .k, .beteb-v7 .canvas .hmid .hl, .beteb-v7 .canvas .m.none {
  color: var(--c-i2) !important;
}
.beteb-v7 .canvas .mmt, .beteb-v7 .canvas table.mk th, .beteb-v7 .canvas table.s th {
  color: var(--c-d) !important;
}
/* form string in the masthead keeps its won/lost/drew shades - that IS a result */
.beteb-v7 .canvas .hmeta .fw { color: var(--HIT-T) !important; }
.beteb-v7 .canvas .hmeta .fl { color: var(--MISS-T) !important; }
.beteb-v7 .canvas .hmeta .fd { color: var(--c-i2) !important; }
/* and the fill always follows the colour, never a value inherited from the page */
.beteb-v7 .canvas, .beteb-v7 .canvas * { -webkit-text-fill-color: currentColor !important; }

/* -- BLOCK 33 - the sheet BUILDER box --------------------------------------------------------
   Block 31 aimed at `.bz5-builder`, which matches nothing on football: the real container is
   `.beteb-builder.bz2`, with `.bz2-setup` / `.bz2-stats` panels inside it. So that earlier block
   was dead CSS and the box kept its blue top rule, blue PNG button and gold-tinted panel edges.

   Same rules as the rest of the furniture: one surface, one hairline, brass for identity, and
   gold reserved for the primary action. */
.beteb-builder, .beteb-builder.bz2 {
  background-color: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--hairline) !important;
  border-top: 3px solid #A99A6E !important;
  border-radius: 10px !important;
}
.beteb-builder .bz2-setup, .beteb-builder .bz2-stats, .beteb-builder .bz2-fixture-wrap,
.beteb-builder .bz2-manual-wrap, .beteb-builder .beteb-team2-area {
  background-color: rgba(255, 255, 255, .03) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;
}
.beteb-builder, .beteb-builder .bz2-title, .beteb-builder .bz2-head, .beteb-builder label {
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}
.beteb-builder .bz2-hint, .beteb-builder .bz2-scope, .beteb-builder .bz2-team-tag {
  color: var(--on-dark-2) !important;
  -webkit-text-fill-color: var(--on-dark-2) !important;
}
.beteb-builder .bz2-scope, .beteb-builder .bz2-team-tag {
  background-color: rgba(255, 255, 255, .08) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
}

/* inputs sit on the canvas, like every other field on the site */
.beteb-builder select, .beteb-builder input, .beteb-builder .beteb-field select,
.beteb-builder .beteb-field input {
  background-color: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px !important;
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}

/* mode pills: the site's selected state is solid white with black text */
.beteb-builder .bz2-mode {
  background-color: rgba(169, 154, 110, .18) !important;
  border: 1px solid rgba(169, 154, 110, .32) !important;
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
  border-radius: 999px !important;
}
.beteb-builder .bz2-mode.on, .beteb-builder .bz2-mode.active, .beteb-builder .bz2-mode[aria-selected="true"] {
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* buttons: secondary is a neutral outline, primary is the one gold action */
.beteb-builder .beteb-btn {
  background-color: rgba(255, 255, 255, .07) !important;
  background-image: none !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 6px !important;
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}
.beteb-builder .beteb-btn-primary {
  background-color: var(--color-gold, #e7b937) !important;
  background-image: none !important;
  border-color: var(--color-gold, #e7b937) !important;
  color: #1C1B19 !important;
  -webkit-text-fill-color: #1C1B19 !important;
  font-weight: 700 !important;
}
.beteb-builder .beteb-btn-primary * { color: #1C1B19 !important; -webkit-text-fill-color: #1C1B19 !important; }

/* the section header above the builder */
.bz2-secttl, .beteb-builder-icon { color: var(--on-dark-2) !important; -webkit-text-fill-color: var(--on-dark-2) !important; }

/* -- BLOCK 34 - the blue bar above the builder ----------------------------------------------
   Not a border: .beteb-builder::before is a 3px linear-gradient(90deg,#3b82f6,#60a5fa). The
   check that reported "no blue left in the builder" walked its CHILDREN only, so a pseudo
   element on the container itself went unseen - worth remembering as a gap in that kind of
   sweep. Block 33 already gives the box a brass border-top, so this one is retired rather than
   recoloured: two 3px rules stacked is just 6px of nothing. */
.beteb-builder::before { display: none !important; }


/* ══ BLOCK 35 — the intel palette, on the RIGHT ELEMENTS ═══════════════════════════════════
   Everything block 6 says about overriding variables rather than chasing components is correct,
   and for the intel section it silently did nothing for weeks. The tokens were remapped on
   `:root, html, body`; intel4.css declares the same names on `.live-pane, #intelPane, #statsPane,
   .i4-frame`. A property declared on an element beats one inherited from an ancestor, whatever
   the specificity and whatever the !important - those only decide a contest between declarations
   on the SAME element. So /intel/ kept rendering #0a0c10 grounds, #e8edf4 blue-white text and a
   per-sport accent, on desktop and on mobile, while the tokens up on :root read stone.

   Same names, same elements, now with !important so they win there.

   --i4 is the per-sport accent (football #4078ec, racing #22c55e, nba #f59e0b, tennis #a78bfa,
   f1 #ef4444). It is folded to the one brass because the sports are no longer told apart by
   colour. The per-sport rules that follow it in intel4.css are matched here too, since they
   re-declare --i4 on the very same elements. */
.live-pane, #intelPane, #statsPane, .i4-frame,
#live-football, #live-racing, #live-nba, #live-tennis, #live-f1,
.i4-frame[data-sport] {
  --i4:       #A99A6E !important;
  --i4-bg:    var(--canvas) !important;
  --i4-panel: var(--surface) !important;
  --i4-card:  var(--surface) !important;
  --i4-chip:  var(--surface-2) !important;
  --i4-ink:   var(--on-dark) !important;
  --i4-dim:   var(--on-dark-2) !important;
  --i4-faint: var(--on-dark-3) !important;
  --i4-line:  var(--hairline) !important;
}



/* ══ BLOCK 36 — the tip card's top row must not clip its own labels ════════════════════════
   .bzp-top is a nowrap flex row (built CSS, _astro/live-intelligence-v2*.css), so on a narrow
   column the chips inside it are squeezed under their own text rather than wrapping. Measured
   at a 360px column: "PENDING", "3 legs" and the source label all cut; at 320px, nine labels.
   The card never overflowed — the clipping happened inside it, which is why it reads as a
   rendering fault rather than a layout one.

   Wrap the row; keep the short labels rigid so they move down whole instead of being shaved;
   let the tag — the only child that can be arbitrarily long — shrink and ellipsis. */
.bzp-top { flex-wrap: wrap !important; row-gap: 4px !important; }
.bzp-top > .bzp-legcount,
.bzp-top > .bzp-source,
.bzp-top > .tt-chip,
.bzp-top > .bzp-odds { flex: 0 0 auto !important; white-space: nowrap !important; }
/* the spacer's whole job is to absorb the slack, so it stays the one flexible child */
.bzp-top > .bzp-spacer { flex: 1 1 auto !important; }
/* The tag WRAPS rather than ellipsises. With the row wrapping, an ellipsis is no longer the
   lesser evil it is in a fixed slot - it just loses text. Measured at a 390px column, the tag
   "Match of the day - Banker" was cut by 10px; wrapping keeps every word. */
.bzp-top > .bzp-tag {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}



/* ══ BLOCK 37 — acca legs read as a table ══════════════════════════════════════════════════
   .mleg was a flex row: selection, fixture, odds and result all on one line, so "Al-Qadsiah to
   win" wrapped and the fixture was crushed against it. Two rows now, with odds and result
   spanning both so their columns line up down the card — the thing that makes a list of legs
   scannable rather than a paragraph.

   No colour changes here at all: type size, spacing and hairlines only. */
#beteb-board .tile .mleg {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  grid-template-areas: "sel odds res" "fix odds res" !important;
  column-gap: 10px !important;
  row-gap: 1px !important;
  align-items: center !important;
  padding: 7px 2px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
#beteb-board .tile .mleg:last-child { border-bottom: 0 !important; }

/* the selection is the line the eye lands on, so it is the biggest thing in the row */
#beteb-board .tile .mleg .mh {
  grid-area: sel !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
}
/* the fixture is context, so it sits under the selection and reads quieter — but still bigger
   than it was, because it was the part being squeezed */
#beteb-board .tile .mleg .mm {
  grid-area: fix !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  opacity: .78 !important;
}
#beteb-board .tile .mleg .mo {
  grid-area: odds !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
#beteb-board .tile .mleg .tt-leg-res {
  grid-area: res !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

/* A BTTS or Over 2.5 acca: every leg said the same thing, so the selection is hidden and the
   fixture takes the row on its own. One row, no empty second line. */
#beteb-board .tile .mleg.onesel { grid-template-areas: "fix odds res" !important; }
#beteb-board .tile .mleg.onesel .mh { display: none !important; }
#beteb-board .tile .mleg.onesel .mm {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* Slip height is NOT set here. It went to 360/400 when the legs became two rows, but the file
   already decides it further up (280px desktop / 320px mobile) and a second pair down here only
   won by being later - two rules for one decision. The new leg layout is compact enough that the
   original height holds: a leg is 47px with a fixture under it, 35px without, and the list
   scrolls past four as it always has. */



/* ══ BLOCK 38 — the bet-type label, and the bookmaker names ════════════════════════════════
   The label beside the bullet ("Football Acca", "BTTS Acca") is what tells a reader which slip
   they are looking at, and it was set at 9px — smaller than every number on the card. At 12.5px
   it reads as the heading it actually is. The tracking comes down a little as the size goes up,
   because letter-spacing that suits 9px mono looks loose at 12.5. */
#beteb-board .tile .t-tag {
  font-size: 12.5px !important;
  letter-spacing: .04em !important;
  line-height: 1.35 !important;
}
#beteb-board .tile .t-tag .dot {
  width: 7px !important; height: 7px !important;
}

/* The Place bet drawer inherited --on-dark-3 from the .t-books rule above — 52% white — so the
   bookmaker names came out grey against the dark drawer. These are the brands a reader is picking
   between, so they get full white; the little ▸ chevron stays dim, since it is furniture. */
#beteb-board .t-books .bkname,
.t-books .bkname { color: #FFFFFF !important; }



/* ══ BLOCK 39 — one semantic pair for every intel tab ══════════════════════════════════════
   Each tab had invented its own win/loss colours (three greens, two reds). One pair now, muted
   and warm so it belongs with the stone rather than shouting over it. Measured against the
   #1C1B19 intel canvas: 6.61:1 and 5.15:1, both clear of 4.5.

   Declared on the intel containers as well as :root, because intel4.css declares its own tokens
   on those same elements and a value set ON an element beats one inherited from :root — the
   mistake BLOCK 35 exists to correct. */
:root, html, body,
.live-pane, #intelPane, #statsPane, .i4-frame, .i4-frame[data-sport] {
  --sem-win:  #6FAE84;
  --sem-loss: #D2706E;
}

/* Tracker — the biggest surface, ~400 result cells on the football tab alone. */
#intelPane .i4-trk-res.win,  .i4-trk-res.win {
  color: var(--sem-win) !important;
  background: rgba(111, 174, 132, .14) !important;
}
#intelPane .i4-trk-res.lose, .i4-trk-res.lose {
  color: var(--sem-loss) !important;
  background: rgba(210, 112, 110, .12) !important;
}

/* Form — direction arrows are the same two meanings, so the same two colours. */
.ib-up { color: var(--sem-win) !important; }
.ib-dn { color: var(--sem-loss) !important; }

/* A SELECTED pill is a UI state, not a result. It was electric blue (#4A9EFF); every other
   selected control on the site is brass, so this one is too. */
.ib-pill.on {
  color: #A99A6E !important;
  background: rgba(169, 154, 110, .14) !important;
  border-color: rgba(169, 154, 110, .38) !important;
}

/* Referee Watch read in blue-tinted whites — rgba(226,236,248,...) and rgba(233,236,242,...) —
   which is exactly the grey-blue drift the theme was written to end. Same alphas, neutral hue. */
.rw-meta { color: rgba(255, 255, 255, .45) !important; }
.rw-comp { color: rgba(255, 255, 255, .60) !important; }
.rw-fx   { color: rgba(255, 255, 255, .90) !important; }







/* ══ BLOCK 40 — sport glyphs, not emoji ═══════════════════════════════════════════════════
   The sport rail, the homepage jump row and the header ghost all used ⚽🏇🏀🎾🏎 — full-colour
   glyphs drawn by the operating system, which match nothing else on the page and, on Windows,
   several of which have no colour font at all. (That is the same reason this site self-hosts its
   F1 flags as SVG rather than using flag emoji.)

   🔑 Applied as a MASK over `currentColor`, never as a background image. The glyph therefore takes
   the colour of whatever it sits in — brass on a resting tab, near-black on the white selected
   pill — so there is one set rather than one per state, and it follows the tokens if they change.
*/
.sport-tab-icon, .stab::before, .sport-hdr-ghost,
.intel-dd-menu a .ic, .intel-dd-sub a .ic {
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  background-color: currentColor !important;
}
/* The emoji sits in a span of its own in all of these, so blanking the text is enough — no markup
   change needed. The nav's span is `.ic`, scoped to the two INTEL dropdown containers on purpose:
   `.ic` is generic, and bare-class collisions have bitten this codebase repeatedly. */
.sport-tab-icon, .sport-hdr-ghost,
.intel-dd-menu a .ic, .intel-dd-sub a .ic {
  display: inline-block !important;
  font-size: 0 !important;
  width: 1.05em; height: 1.05em;
  vertical-align: -0.15em;
}
.sport-tab-btn .sport-tab-icon { width: 15px; height: 15px; }
/* the nav icons sit beside text, so they carry their own size and gap */
.intel-dd-menu a .ic, .intel-dd-sub a .ic {
  width: 14px; height: 14px; margin-right: 8px; vertical-align: -0.16em;
}
/* the ghost is a large decorative watermark, so it keeps its own size */
.sport-hdr-ghost { width: 1em; height: 1em; }

/* The jump-to-sport buttons have the emoji INSIDE their text, where CSS cannot reach it — the
   character is stripped from the markup and this pseudo-element takes its place. */
.stab::before {
  content: ''; display: inline-block;
  width: 14px; height: 14px; margin-right: 7px; vertical-align: -0.18em;
}

.sport-tab-btn[data-sport="football"] .sport-tab-icon,
.stab[data-target="section-football"]::before,
.sport-hdr[data-sport="football"] .sport-hdr-ghost,
.intel-dd-menu a[href="/intel/football/"] .ic,
.intel-dd-sub a[href="/intel/football/"] .ic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M12 7.2l3.6 2.6-1.4 4.3H9.8L8.4 9.8z'/%3E%3Cpath d='M12 2.8v2M12 19.2v2M3.6 9.4l1.9.6M18.5 10l1.9-.6M6.6 18.6l1.2-1.6M16.2 17l1.2 1.6' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M12 7.2l3.6 2.6-1.4 4.3H9.8L8.4 9.8z'/%3E%3Cpath d='M12 2.8v2M12 19.2v2M3.6 9.4l1.9.6M18.5 10l1.9-.6M6.6 18.6l1.2-1.6M16.2 17l1.2 1.6' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sport-tab-btn[data-sport="racing"] .sport-tab-icon,
.stab[data-target="section-racing"]::before,
.sport-hdr[data-sport="racing"] .sport-hdr-ghost,
.intel-dd-menu a[href="/intel/racing/"] .ic,
.intel-dd-sub a[href="/intel/racing/"] .ic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6c-4.2 0-7.4 3.2-7.4 7.3 0 2.6.9 4.6 2.2 6.9l2.4-1.3c-1.1-2-1.8-3.6-1.8-5.6 0-2.7 2-4.7 4.6-4.7s4.6 2 4.6 4.7c0 2-.7 3.6-1.8 5.6l2.4 1.3c1.3-2.3 2.2-4.3 2.2-6.9 0-4.1-3.2-7.3-7.4-7.3z'/%3E%3Ccircle cx='6.4' cy='18.4' r='1.7'/%3E%3Ccircle cx='17.6' cy='18.4' r='1.7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6c-4.2 0-7.4 3.2-7.4 7.3 0 2.6.9 4.6 2.2 6.9l2.4-1.3c-1.1-2-1.8-3.6-1.8-5.6 0-2.7 2-4.7 4.6-4.7s4.6 2 4.6 4.7c0 2-.7 3.6-1.8 5.6l2.4 1.3c1.3-2.3 2.2-4.3 2.2-6.9 0-4.1-3.2-7.3-7.4-7.3z'/%3E%3Ccircle cx='6.4' cy='18.4' r='1.7'/%3E%3Ccircle cx='17.6' cy='18.4' r='1.7'/%3E%3C/svg%3E");
}
.sport-tab-btn[data-sport="nba"] .sport-tab-icon,
.stab[data-target="section-nba"]::before,
.sport-hdr[data-sport="nba"] .sport-hdr-ghost,
.intel-dd-menu a[href="/intel/nba/"] .ic,
.intel-dd-sub a[href="/intel/nba/"] .ic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M12 2.8v18.4M2.8 12h18.4' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3Cpath d='M5.6 5.6c3.6 3.6 3.6 9.2 0 12.8M18.4 5.6c-3.6 3.6-3.6 9.2 0 12.8' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M12 2.8v18.4M2.8 12h18.4' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3Cpath d='M5.6 5.6c3.6 3.6 3.6 9.2 0 12.8M18.4 5.6c-3.6 3.6-3.6 9.2 0 12.8' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.sport-tab-btn[data-sport="tennis"] .sport-tab-icon,
.stab[data-target="section-tennis"]::before,
.sport-hdr[data-sport="tennis"] .sport-hdr-ghost,
.intel-dd-menu a[href="/intel/tennis/"] .ic,
.intel-dd-sub a[href="/intel/tennis/"] .ic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M4.4 6.8c3.4 2 5 5 5 8.7 0 1.6-.3 3-.9 4.3M19.6 6.8c-3.4 2-5 5-5 8.7 0 1.6.3 3 .9 4.3' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M4.4 6.8c3.4 2 5 5 5 8.7 0 1.6-.3 3-.9 4.3M19.6 6.8c-3.4 2-5 5-5 8.7 0 1.6.3 3 .9 4.3' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sport-tab-btn[data-sport="f1"] .sport-tab-icon,
.stab[data-target="section-f1"]::before,
.sport-hdr[data-sport="f1"] .sport-hdr-ghost,
.intel-dd-menu a[href="/intel/f1/"] .ic,
.intel-dd-sub a[href="/intel/f1/"] .ic {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.4 2.6h1.9v18.8H4.4z'/%3E%3Cpath d='M7.4 3.6h4.3v3.4H7.4zM16 3.6h4.3v3.4H16zM11.7 7h4.3v3.4h-4.3zM7.4 10.4h4.3v3.4H7.4zM16 10.4h4.3v3.4H16z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.4 2.6h1.9v18.8H4.4z'/%3E%3Cpath d='M7.4 3.6h4.3v3.4H7.4zM16 3.6h4.3v3.4H16zM11.7 7h4.3v3.4h-4.3zM7.4 10.4h4.3v3.4H7.4zM16 10.4h4.3v3.4H16z'/%3E%3C/svg%3E");
}



/* ══ BLOCK 41 — keep this theme OUT of the other four sheet cards ══════════════════════════
   The same fault BLOCK 31 fixes for beteb-sheet-v7, now that tennis, NBA, F1 and racing are light
   cards too. Their text was being painted by rules in this file written against bare element
   selectors (a, b, em, strong, small) for the dark intel furniture around them — measured at
   1.08:1 on the tennis card with its own ink and ground both correct.

   <i> is deliberately excluded, exactly as in BLOCK 31: the sheets use <i> for their own markers
   and set those colours themselves. */
#bz4-card a, #bz4-card b, #bz4-card em, #bz4-card strong, #bz4-card small,
#bz5-card a, #bz5-card b, #bz5-card em, #bz5-card strong, #bz5-card small,
#bz6-card a, #bz6-card b, #bz6-card em, #bz6-card strong, #bz6-card small,
#bz7-card a, #bz7-card b, #bz7-card em, #bz7-card strong, #bz7-card small {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Any descendant this file would otherwise paint for a dark ground. Scoped to the card ids, so it
   cannot reach the builder controls or anything else on the page. */
#bz4-card *, #bz5-card *, #bz6-card *, #bz7-card * {
  -webkit-text-fill-color: currentColor !important;
}

/* ...and the bare classes this file paints for the dark furniture (.tm, .sep, .s, .z, .vl, .tg).
   They reach inside the cards too, which on a light card means near-white text: "MERCEDES" and
   the "·" separators both measured 1.08:1 on the F1 sheet. */
#bz4-card .tm, #bz5-card .tm, #bz6-card .tm, #bz7-card .tm,
#bz4-card .sep, #bz5-card .sep, #bz6-card .sep, #bz7-card .sep,
#bz4-card .s, #bz5-card .s, #bz6-card .s, #bz7-card .s,
#bz4-card .z, #bz5-card .z, #bz6-card .z, #bz7-card .z,
#bz4-card .vl, #bz5-card .vl, #bz6-card .vl, #bz7-card .vl,
#bz4-card .tg, #bz5-card .tg, #bz6-card .tg, #bz7-card .tg {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}



/* ══ BLOCK 42 — a selected chip is gold, so its ink must be dark ═══════════════════════════
   BLOCK above paints .cf-chip / .rs-chip with --on-dark-2 because they sit on the dark surface.
   The SELECTED one does not: intel-rendering.js gives it a gold background, and white-at-72% on
   gold measures 1.84:1 — the unreadable text in the racing sheet generator. The dark ink is the
   same one every other gold control on the site uses. */
.cf-chip.on, .rs-chip.on,
.cf-chip.on *, .rs-chip.on * {
  color: #1C1B19 !important;
  -webkit-text-fill-color: #1C1B19 !important;
}

/* The sage captions (#5f766c) are a leftover from the racing palette and sit on the dark panels
   at 3.25:1. Neutral, and bright enough to read. */
.seab-topn, .seab-h u, .seab table th, .rs-tbl th, .cf-note {
  color: var(--on-dark-2) !important;
}



/* ══ BLOCK 43 — chips and the action button inside the light builders ══════════════════════
   The builders are light now, but the scope and hint chips inside them are still filled from dark
   literals in each sheet's own CSS, so the dark ink sat on a dark chip (1.2:1 and 1:1 measured on
   racing). A faint stone fill keeps them as chips and lets the ink read. */
.bz4-scope, .bz5-scope, .bz6-scope, .bz7-scope,
.bz4-hint,  .bz5-hint,  .bz6-hint,  .bz7-hint,
.bz4-note,  .bz5-note,  .bz6-note,  .bz7-note {
  background: rgba(28, 27, 25, .06) !important;
  background-image: none !important;
  border-color: rgba(28, 27, 25, .16) !important;
  color: var(--on-light) !important;
  -webkit-text-fill-color: var(--on-light) !important;
}

/* Generate is the one action on the box, so it is pinned rather than left to each sheet: brand
   gold with dark ink, like every other primary action on the site. The sheets disagreed with each
   other about this (three gold, one a brass gradient) and my own brass pass darkened the gold
   literal in some of them, which is how it ended up white-on-gold at 1.84:1. */
#bz4-generate, #bz5-generate, #bz6-generate, #bz7-generate {
  background: #E7B937 !important;
  background-image: none !important;
  border: none !important;
}
#bz4-generate, #bz5-generate, #bz6-generate, #bz7-generate,
#bz4-generate *, #bz5-generate *, #bz6-generate *, #bz7-generate * {
  color: #1C1B19 !important;
  -webkit-text-fill-color: #1C1B19 !important;
}



/* ══ BLOCK 44 — sheet section titles live on the dark page ═════════════════════════════════
   .bzN-secttl is written into the intel view, not into the card or the builder, so its ground is
   the dark canvas. Each sheet colours it with its own INK, and the stone conversion made INK dark
   - putting the heading and its caption at 1:1 on the dark page. They take the dark-page ink. */
.bz4-secttl, .bz5-secttl, .bz6-secttl, .bz7-secttl {
  color: var(--on-dark) !important;
  -webkit-text-fill-color: var(--on-dark) !important;
}
.bz4-secttl small, .bz5-secttl small, .bz6-secttl small, .bz7-secttl small,
.bz4-secttl span, .bz5-secttl span, .bz6-secttl span, .bz7-secttl span {
  color: var(--on-dark-2) !important;
  -webkit-text-fill-color: var(--on-dark-2) !important;
}

/* ══ BLOCK 45 — intel acca legs read as a table, the same as the tips page (14-Sep) ═════════
   Callum: the fixture goes UNDER the tip, and a single-market acca does not repeat "Over 2.5
   Goals" beside every fixture. Mirrors BLOCK 37 (#beteb-board .mleg). .bzp-leg-nm is
   display:contents so its inner spans (selection / " @ " / odds) become grid cells while its TEXT
   stays exactly what tip-timer.js reads to grade the leg.
   Lives INSIDE @layer theme: stone-tips-light paints .bzp-leg-sub at .70 with an !important
   text-fill-color from within the layer, and a layered !important beats an unlayered one. Scoped to .bzp-legs-grid, which only the
   new renderer emits, so a stale cached script keeps its old layout rather than a broken one. */
html body .bzp-card .bzp-legs-grid > .bzp-leg {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto auto !important;
  grid-template-areas: "num sel odds res" "num fix odds res" !important;
  column-gap: 10px !important;
  row-gap: 1px !important;
  align-items: center !important;
  padding: 7px 2px !important;
}
html body .bzp-card .bzp-legs-grid > .bzp-leg::before {
  grid-area: num !important;
  align-self: center !important;
  /* the counter circle was still the old football blue — the stone theme has no sport colours */
  background: rgba(35, 34, 32, .06) !important;
  border: 1px solid rgba(35, 34, 32, .14) !important;
  color: #232220 !important;
  -webkit-text-fill-color: #232220 !important;
}
html body .bzp-card .bzp-legs-grid .bzp-leg-nm { display: contents !important; }
html body .bzp-card .bzp-legs-grid .bzp-leg-sel {
  grid-area: sel !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  color: #232220 !important;
  -webkit-text-fill-color: #232220 !important;
}
html body .bzp-card .bzp-legs-grid .bzp-leg-at { display: none !important; }
html body .bzp-card .bzp-legs-grid .bzp-leg-od {
  grid-area: odds !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  color: #232220 !important;
  -webkit-text-fill-color: #232220 !important;
}
html body .bzp-card .bzp-legs-grid .bzp-leg-sub {
  grid-area: fix !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
  margin: 0 !important;
  color: rgba(35, 34, 32, .78) !important;
  -webkit-text-fill-color: rgba(35, 34, 32, .78) !important;
}
html body .bzp-card .bzp-legs-grid .tt-leg-res {
  grid-area: res !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
/* single-market acca: the selection said the same thing on every leg, so hide it (the card title
   already names the market) and let the fixture take the row — one line, no empty second row */
html body .bzp-card .bzp-legs-grid.bzp-onesel > .bzp-leg { grid-template-areas: "num fix odds res" !important; }
html body .bzp-card .bzp-legs-grid.bzp-onesel .bzp-leg-sel { display: none !important; }
html body .bzp-card .bzp-legs-grid.bzp-onesel .bzp-leg-sub {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #232220 !important;
  -webkit-text-fill-color: #232220 !important;
}

} /* end @layer theme */