/* stone-tips-light.css — PREVIEW ONLY (branch: stone-white).
   Loads AFTER stone-theme.css and lives in the SAME @layer theme, so later source order settles
   ties. Unlayered it would lose to the site's own important rules — see the note in stone-theme.

   The tip cards flip to the light stone surface. Every rule here is the second half of the one
   pairing: light surface -> dark stone ink. Nothing is left to inherit a white it was given for
   a dark background, because that is precisely how you get white-on-white. */
@layer theme {

  /* ── the card surface ───────────────────────────────────────────────────────────────────── */
  .hero-tile, .hero-tile.locked, #beteb-board .tile, .bzp-card {
    background-color: var(--surface-lt, #F7F6F4) !important;
    background-image: none !important;
    border-color: rgba(35, 34, 32, .14) !important;
  }

  /* ── everything written on it ───────────────────────────────────────────────────────────── */
  .hero-tile, .hero-tile *, #beteb-board .tile, #beteb-board .tile *, .bzp-card, .bzp-card * {
    color: var(--on-light, #232220) !important;
    -webkit-text-fill-color: var(--on-light, #232220) !important;
    border-color: rgba(35, 34, 32, .12) !important;
  }
  /* secondary and faint: the same ink at lower opacity, never a grey of its own */
  .hero-tile .hmeta, .hero-tile .htag, .hero-tile .hm-affbox-tc,
  #beteb-board .tile .t-meta, #beteb-board .tile .t-tag, #beteb-board .tile .t-books,
  .bzp-leg-sub, .bzp-legcount, .bzp-source, .bzp-sub {
    color: rgba(35, 34, 32, .70) !important;
    -webkit-text-fill-color: rgba(35, 34, 32, .70) !important;
  }

  /* ── the odds block: was white-on-white-alpha, which is invisible here ───────────────────── */
  #beteb-board .tile .t-odds, .hero-tile .hodds, .bzp-odds {
    background-color: rgba(35, 34, 32, .06) !important;
    border-color: rgba(35, 34, 32, .12) !important;
    color: var(--on-light, #232220) !important;
    -webkit-text-fill-color: var(--on-light, #232220) !important;
  }
  .hero-tile .hodds, .bzp-odds { background-color: transparent !important; border: 0 !important; }

  /* ── confidence pips: filled = ink, empty = a light wash of it ──────────────────────────── */
  .hero-tile .cd, #beteb-board .tile .cd { background-color: rgba(35, 34, 32, .18) !important; }
  .hero-tile .cd.f, #beteb-board .tile .cd.f { background-color: var(--on-light, #232220) !important; }

  /* ── THE RESULT CHIPS, RE-TUNED ─────────────────────────────────────────────────────────────
     #4ADE80 on this surface is ~1.4:1 and #F87171 ~2.4:1 — unreadable. These are the darker
     members of the same three hues, so the meaning is unchanged and each clears 4.5:1 on the
     light stone. The chip wash stays the same hue at low alpha. */
  .hero-tile .tt-chip.tt-won, #beteb-board .tile .tt-chip.tt-won, .bzp-card .tt-chip.tt-won,
  .hero-tile .tt-lr-won, #beteb-board .tile .tt-lr-won {
    color: #166534 !important; -webkit-text-fill-color: #166534 !important;
    background-color: rgba(22, 101, 52, .12) !important;
  }
  .hero-tile .tt-chip.tt-lost, #beteb-board .tile .tt-chip.tt-lost, .bzp-card .tt-chip.tt-lost,
  .hero-tile .tt-lr-lost, #beteb-board .tile .tt-lr-lost {
    color: #B91C1C !important; -webkit-text-fill-color: #B91C1C !important;
    background-color: rgba(185, 28, 28, .12) !important;
  }
  .hero-tile .tt-chip.tt-pend, #beteb-board .tile .tt-chip.tt-pend, .bzp-card .tt-chip.tt-pend,
  .hero-tile .tt-lr-pend, #beteb-board .tile .tt-lr-pend {
    color: #92400E !important; -webkit-text-fill-color: #92400E !important;
    background-color: rgba(146, 64, 14, .12) !important;
  }

  /* ── the action. Gold on light stone is ~1.6:1, so the button would dissolve into the card.
        Inverting it — ink button, white label — is the same pairing rule and gives the strongest
        target on the page. Brand gold stays the action colour on the DARK surfaces. ────────── */
  .hero-tile .t-place, #beteb-board .tile .t-place, .hero-tile .t-foot,
  .hero-tile .t-place *, #beteb-board .tile .t-place * {
    background-color: var(--on-light, #232220) !important;
    border-color: var(--on-light, #232220) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }
  .hero-tile .t-foot { background-color: transparent !important; }

  /* ── sport identity: the bar and the dot survive, darkened so they still read as a marker.
        Racing green on light stone is ~1.8:1 as-is; mixing 65% of the hue into the ink keeps the
        hue recognisable while clearing 3:1 for a UI element. The inline --ac still drives it. ── */
  .hero-tile { border-left: 3px solid var(--ac, #e7b937) !important; }
  @supports (color: color-mix(in srgb, red 50%, blue)) {
    .hero-tile { border-left-color: color-mix(in srgb, var(--ac, #e7b937) 65%, #232220) !important; }
    .hero-tile .dot, #beteb-board .tile .dot {
      background-color: color-mix(in srgb, var(--ac, #e7b937) 65%, #232220) !important;
    }
  }
  #beteb-board .tile::before { background: var(--ac, #e7b937) !important; }

  /* the locked Editor's Pick card keeps its gold frame, now against light stone */
  .hero-tile.locked { border: 1px solid rgba(35, 34, 32, .2) !important; border-left: 3px solid #A16207 !important; }

  /* -- the sport-tinted wash ---------------------------------------------------------------
     The card carries a ::before radial-gradient of the sport hue at .16 - invisible on the dark
     surface, a coloured stain on the light one. background-image:none on the card never touched
     it, because it lives on the pseudo-element. */
  .hero-tile::before, .hero-tile::after, #beteb-board .tile::after, .bzp-card::before {
    background-image: none !important; background-color: transparent !important;
  }

  /* -- the words and price of the card, reported as still coloured on racing and tennis ----- */
  .hero-tile .t-what, .hero-tile .mo, #beteb-board .tile .t-what, #beteb-board .tile .mo,
  .bzp-card .t-what, .bzp-card .mo {
    color: var(--on-light, #232220) !important;
    -webkit-text-fill-color: var(--on-light, #232220) !important;
  }
  .hero-tile .t-what, #beteb-board .tile .t-what, .bzp-card .t-what {
    color: rgba(35, 34, 32, .70) !important; -webkit-text-fill-color: rgba(35, 34, 32, .70) !important;
  }
  .hero-tile .mo, #beteb-board .tile .mo, .bzp-card .mo { font-weight: 600 !important; }
  /* the attention signal, darkened for the light surface (orange #F97316 is ~2.3:1 here) */
  .hero-tile .malert, #beteb-board .tile .malert, .bzp-card .malert {
    color: #92400E !important; -webkit-text-fill-color: #92400E !important;
  }
  .hero-tile .sep, #beteb-board .tile .sep {
    color: rgba(35, 34, 32, .45) !important; -webkit-text-fill-color: rgba(35, 34, 32, .45) !important;
  }


  /* the countdown chip: neutral, not the WON green - see block 13 in stone-theme.css */
  .hero-tile .tt-chip.tt-up, #beteb-board .tile .tt-chip.tt-up, .bzp-card .tt-chip.tt-up {
    color: rgba(35, 34, 32, .70) !important;
    -webkit-text-fill-color: rgba(35, 34, 32, .70) !important;
    background-color: rgba(35, 34, 32, .07) !important;
  }





  /* the unlock button follows .t-place on the light cards: ink fill, white label */
  .hero-tile .hbet.lock, .hero-tile .hbet.lock * {
    background: var(--on-light, #232220) !important;
    border-color: var(--on-light, #232220) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
  }


  /* the legs scrollbar, dark on the light card */
  #beteb-board .tile .mlegs::-webkit-scrollbar-thumb {
    background: rgba(35, 34, 32, .28) !important;
  }


  /* intel legs scrollbar, dark on the light card */
  .bzp-card .bzp-legs::-webkit-scrollbar-thumb { background: rgba(35, 34, 32, .28) !important; }


  /* -- light-card text repair ----------------------------------------------------------------
     Blocks 9 and 10 of stone-theme.css force .bzp-tag / .bzp-odds and friends to WHITE, which is
     right for the dark intel boards they were written for and wrong once the card underneath
     went light. Those selectors are html-body prefixed (0,1,2), so this has to be scoped THROUGH
     the card (0,2,2) to win - a bare `.bzp-card *` lost the cascade and the labels and prices
     disappeared into the surface. */
  html body .bzp-card .bzp-tag, html body .bzp-card .bzp-odds, html body .bzp-card .bzp-t,
  html body .bzp-card .bzp-hd, html body .bzp-card .bzp-nm, html body .bzp-card .bzp-leg,
  html body .bzp-card .bzp-leg-nm, html body .bzp-card .tl, html body .bzp-card .tg,
  html body .bzp-card .s, html body .bzp-card .t-what, html body .bzp-card .mo,
  html body .bzp-card .bzp-em, html body .bzp-card .bzp-spacer {
    color: var(--on-light, #232220) !important;
    -webkit-text-fill-color: var(--on-light, #232220) !important;
  }
  html body .bzp-card .bzp-tag, html body .bzp-card .t-what, html body .bzp-card .bzp-legcount,
  html body .bzp-card .bzp-source, html body .bzp-card .bzp-sub, html body .bzp-card .bzp-leg-sub {
    color: rgba(35, 34, 32, .70) !important;
    -webkit-text-fill-color: rgba(35, 34, 32, .70) !important;
  }
  html body .bzp-card .bzp-odds { font-weight: 700 !important; }


  /* -- the acca cards were still dark --------------------------------------------------------
     stone-theme block 4 paints `.bzp-card.bzp-multi` (0,2,0) with the DARK surface, which
     outranks this sheet's `.bzp-card` (0,1,0). So the 7 multi-leg cards stayed dark while the
     repair above forced their text to ink: ink on ink, measured at 1.0:1, completely unreadable.
     Naming the variant at matching specificity is the fix. */
  html body .bzp-card, html body .bzp-card.bzp-multi {
    background-color: var(--surface-lt, #F7F6F4) !important;
    background-image: none !important;
    border-color: rgba(35, 34, 32, .14) !important;
  }


  /* -- per-leg result chips on the light intel cards ------------------------------------------
     The board chips were re-tuned earlier, but the intel LEG chips (.tt-leg-res) kept the dark
     theme brights and measured 1.5 - 2.25:1 on the light card. Same three meanings, same darker
     members of each hue that the board chips use. */
  html body .bzp-card .tt-leg-res.tt-lr-won, html body .bzp-card .tt-chip.tt-won {
    color: #166534 !important; -webkit-text-fill-color: #166534 !important;
    background-color: rgba(22, 101, 52, .12) !important;
  }
  html body .bzp-card .tt-leg-res.tt-lr-lost, html body .bzp-card .tt-chip.tt-lost {
    color: #B91C1C !important; -webkit-text-fill-color: #B91C1C !important;
    background-color: rgba(185, 28, 28, .12) !important;
  }
  html body .bzp-card .tt-leg-res.tt-lr-pend, html body .bzp-card .tt-chip.tt-pend,
  html body .bzp-card .tt-chip.tt-plc, html body .bzp-card .tt-leg-res.tt-lr-plc {
    color: #92400E !important; -webkit-text-fill-color: #92400E !important;
    background-color: rgba(146, 64, 14, .12) !important;
  }
  /* "OFF" is not a result - neutral chip */
  html body .bzp-card .tt-chip.tt-off, html body .bzp-card .tt-leg-res.tt-lr-off {
    color: rgba(35, 34, 32, .70) !important; -webkit-text-fill-color: rgba(35, 34, 32, .70) !important;
    background-color: rgba(35, 34, 32, .08) !important;
  }


  /* confidence pips, ink on the light card */
  html body .bzp-card .bzp-cd { background-color: rgba(35, 34, 32, .18) !important; }
  html body .bzp-card .bzp-cd.f { background-color: var(--on-light, #232220) !important; }

}