/*
Theme Name: AssuredBets
Description: Minimal custom theme — WordPress provides header/footer/blog only. All streak/stats content is rendered by custom code outside the theme system.
Version: 0.2
Author: Diana
*/

/* ==========================================================================
   COLOR SYSTEM — matches the approved design (navy/teal, vB mockups).
   Light is default, dark overrides via [data-theme="dark"].
   Every color must stay a variable — components should never hardcode
   a hex value, that's what makes the toggle work without rewrites.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #0f1629;
  --teal: #0d9488;
  --teal-l: #f0fdfa;
  --teal-m: #5eead4;

  /* Light theme (default) — names match the vB mockup variables */
  --white: #fff;
  --g50: #f8fafc;
  --g100: #f1f5f9;
  --g200: #e2e8f0;
  --g300: #cbd5e1;
  --g400: #94a3b8;
  --g500: #64748b;
  --g700: #334155;
  --bdr: #e8eaf0;

  --bg-page: #f0f2f5;
  --bg-surface: #ffffff;
  --text-heading: var(--navy);
}

[data-theme="dark"] {
  --white: #141b2d;
  --g50: #1a2338;
  --g100: #202a42;
  --g200: #2b3552;
  --g300: #3a4566;
  --g400: #8592ad;
  --g500: #aab4c9;
  --g700: #e2e8f0;
  --bdr: #262f45;

  --bg-page: #0b0f1a;
  --bg-surface: #141b2d;
  --text-heading: #f1f5f9;

  /* teal stays vivid on dark for contrast */
  --teal: #14b8a6;
  --teal-l: #0f2d29;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-heading);
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ==========================================================================
   UTILITIES — small shared classes used across multiple page templates,
   pulled out of scattered inline styles (2026-08-24 cleanup) rather than
   redefined per file.
   ========================================================================== */

.ab-hidden { display: none; }

.error-box { background: #fee2e2; border: 1px solid #fca5a5; border-radius: 8px; padding: 16px; }
.error-box-title { color: #b91c1c; }
.error-box-msg { margin-top: 8px; }

.no-results { color: var(--g500); }

.list-heading { font-family: 'Sora', sans-serif; font-size: 18px; margin-bottom: 16px; }
.list-heading-meta { font-size: 13px; font-weight: 400; color: var(--g400); }

/* Small text/spacing atoms — used a lot on page-streak-detail.php, where
   many one-off inline styles were really just "muted, this size, this
   much space" with no other shared structure worth a named component. */
.sd-center { text-align: center; }
.sd-muted { color: var(--g400); }
.sd-fw-700 { font-weight: 700; }
.sd-fs-9 { font-size: 9px; }
.sd-fs-9-5 { font-size: 9.5px; }
.sd-fs-10 { font-size: 10px; }
.sd-fs-10-5 { font-size: 10.5px; }
.sd-fs-11 { font-size: 11px; }
.sd-mt-4 { margin-top: 4px; }
.sd-mt-8 { margin-top: 8px; }
.sd-mt-10 { margin-top: 10px; }
.sd-mt-12 { margin-top: 12px; }
.sd-mt-14 { margin-top: 14px; }
.sd-mt-16 { margin-top: 16px; }
.sd-mb-2 { margin-bottom: 2px; }
.sd-mb-4 { margin-bottom: 4px; }
.sd-mb-6 { margin-bottom: 6px; }
.sd-mb-14 { margin-bottom: 14px; }
.sd-mb-16 { margin-bottom: 16px; }

/* ==========================================================================
   NAV — matches assuredbets-homepage-vB.html / streaks-list-vB.html exactly
   ========================================================================== */

.nav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--bdr);
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.nav-inner {
  max-width: 1264px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.nav-logo {
  font-family: 'Sora', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  display: flex;
  /* center, not flex-start (changed 2026-08-27): with a fixed-height nav
     bar, a taller uploaded logo now overflows symmetrically above/below
     instead of only downward past the bar's bottom edge. */
  align-items: center;
  gap: 10px;
  margin-right: 36px;
}
/* Customizer-uploaded logo (added 2026-08-27) — only rendered once a logo
   is actually set (see header.php); sized to roughly match the 34px
   icon-box fallback logo below so the nav bar height doesn't jump. */
.nav-logo-img { max-height: 34px; width: auto; display: block; }
/* Dark-mode logo swap (added 2026-08-27) — only relevant once Diana
   uploads a dedicated dark-mode logo via the Customizer (Site Identity
   > Dark mode logo); until then header.php only ever renders a single
   plain .nav-logo-img with no --light/--dark modifier and these rules
   never match anything. Follows the same [data-theme="dark"] switch
   the rest of the site's dark mode already uses. */
.nav-logo-img--dark { display: none; }
[data-theme="dark"] .nav-logo-img--light { display: none; }
[data-theme="dark"] .nav-logo-img--dark { display: block; }
.lm {
  width: 34px;
  height: 34px;
  background: var(--navy);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lm i { color: var(--teal); font-size: 17px; }
.logo-sub { font-size: 10px; color: var(--g400); font-weight: 400; }

.nav-links { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; list-style: none; margin: 0; padding: 0; }
.nav-links li { list-style: none; margin: 0; padding: 0; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-size: 13px;
  color: var(--g500);
  padding: 0 14px;
  height: 56px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text-heading); }
.nav-links a.on {
  color: var(--teal);
  border-bottom: 2px solid var(--teal);
  font-weight: 500;
}

.nav-r { display: flex; align-items: center; gap: 7px; }
.nib {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--g200);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--g400);
  font-size: 15px;
  position: relative;
  background: var(--bg-surface);
}
.nib:hover { border-color: var(--g300); color: var(--text-heading); }

.nav-r a[title] { font-size: 11px; font-weight: 700; color: var(--g400); text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.nav-r a[title]:hover { color: var(--teal); background: var(--teal-l); }
.nav-r a.current-lang { color: var(--teal); background: var(--teal-l); }
.nbadge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--teal);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg-surface);
}
.ntg {
  background: var(--teal);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  position: relative;
}

/* ============ Mobile nav toggle (added 2026-08-26) ============
   Hidden hamburger button + wrapper panel around .nav-links/.nav-r.
   On desktop .nav-panel just behaves like .nav-inner's old direct
   flex children did (it's the new flex:1 container); on mobile it
   becomes a dropdown, shown/hidden by nav-toggle.js toggling
   .nav--open on .nav. No inline styles — all class-driven. */
.nav-toggle {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--g200);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--g500);
  font-size: 18px;
  background: var(--bg-surface);
  flex-shrink: 0;
}
.nav-toggle:hover { border-color: var(--g300); color: var(--text-heading); }

.nav-panel { display: flex; align-items: center; flex: 1; min-width: 0; }

.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 22, 41, .45); z-index: 290; }

/* ==========================================================================
   FOOTER — matches vB mockups
   ========================================================================== */

.foot {
  max-width: 1264px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--g400);
  border-top: 1px solid var(--bdr);
  margin-top: 32px;
}
.foot a { margin-left: 14px; }
.foot a:hover { color: var(--teal); }

@media (max-width: 720px) {
  .nav-links a { padding: 0 10px; }
  .nav-inner { padding: 0 16px; }
  .logo-sub { display: none; }

  /* Same breakpoint the nav was already tightening spacing at — below
     this width nav-links + nav-r (language switcher, theme toggle)
     genuinely don't fit in one row anymore, so they move into a
     dropdown behind the hamburger button instead of clipping/overflowing. */
  /* margin-left:auto — .nav-panel became position:fixed for the drawer,
     which takes it out of .nav-inner's normal flex flow entirely. That
     left only the logo and this button in the flex row, sitting side by
     side with nothing to push the button to the right edge (confirmed
     via real phone screenshot). */
  .nav-toggle { display: flex; margin-left: auto; }

  /* Slide-in drawer from the right (2026-08-26, per real-phone feedback —
     was a full-width dropdown falling below the bar; now matches the
     same right-fixed-panel + transform pattern as the filter drawer
     (.sb), just anchored to the opposite edge. */
  .nav-panel {
    display: flex;
    position: fixed;
    top: 56px; /* nav bar height — top:0 put "Home" (the first item)
                  right at the viewport edge, behind the phone's status
                  bar/browser chrome, while Streaks/Blog further down
                  stayed visible. Confirmed via devtools + real screenshot. */
    right: 0;
    bottom: 0;
    width: min(280px, 82vw);
    flex-direction: column;
    align-items: stretch;
    background: var(--bg-surface);
    border-left: 1px solid var(--bdr);
    max-height: none;
    overflow-y: auto;
    box-shadow: -12px 0 24px rgba(15, 22, 41, .12);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 300;
  }
  .nav.nav--open .nav-panel { transform: translateX(0); }

  /* Starts below the nav bar too, so the header itself (logo + the
     toggle button you're using to close the menu) stays visible and
     clickable instead of getting dimmed by the overlay. */
  .nav-backdrop.nav-backdrop--open { display: block; top: 56px; }

  /* flex: 0 0 auto — without this it keeps the flex:1 from its desktop
     rule above, which inside .nav-panel's column layout stretches it to
     fill all remaining height and shoves .nav-r all the way to the
     bottom of the drawer (confirmed via real phone screenshot). */
  .nav-links { flex: 0 0 auto; flex-direction: column; overflow-x: visible; width: 100%; }
  .nav-links a {
    height: auto;
    width: 100%;
    padding: 13px 20px;
    border-bottom: 1px solid var(--bdr);
    border-left: 3px solid transparent;
  }
  .nav-links a.on { border-bottom: 1px solid var(--bdr); border-left: 3px solid var(--teal); }

  .nav-r { padding: 14px 20px; justify-content: center; flex-wrap: wrap; border-top: 6px solid var(--g50); }
}

/* ==========================================================================
   STREAK CARD — matches .sc / .sc-grid from assuredbets-streaks-list-vB.html
   ========================================================================== */

.page-wrap { max-width: 1264px; margin: 0 auto; padding: 18px 24px 48px; }

.sc {
  background: var(--bg-surface);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
  margin-bottom: 12px;
}
.sc:hover { box-shadow: 0 6px 28px rgba(13,148,136,.1); border-color: var(--teal-m); }
.sc.hot { border-left: 4px solid var(--teal); }

/* 4 columns — flexible widths so the card adapts to the now-narrower
   main content area (sidebar + rail both eat into available width) */
.sc-grid { display: grid; grid-template-columns: minmax(100px, 130px) minmax(90px, 1fr) minmax(100px, 130px) minmax(160px, 1.6fr); align-items: stretch; }

.tc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px; }
.tc.home { border-right: 1px solid var(--bdr); }
.tc.away { border-left: 1px solid var(--bdr); border-right: 1px solid var(--bdr); }
.tc--side-active { background: var(--teal-l); }
.tc-side-label { font-size: 9px; color: var(--g400); font-weight: 700; text-transform: uppercase; margin-top: 2px; }
.tc-odds-wrap { margin-top: 6px; }
.sc-clickable { cursor: pointer; }
.tc-fb {
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
/* Team crest wrapper — $size is per call-site (56px default, 40px on
   some mobile layouts), so it's set as an inline custom property rather
   than baked into a fixed class; everything else here is static. The
   fallback initials badge (.tc-fb) always renders at the wrapper's full
   size in practice — tc-fb--fill overrides tc-fb's own fixed 44/40px
   above by appearing later in the cascade, matching the sizing that was
   already actually being rendered before this was a named class. */
.tc-crest { width: var(--crest-size); height: var(--crest-size); flex-shrink: 0; margin: 0 auto; }
.tc-crest-img { width: 100%; height: 100%; object-fit: contain; }
.tc-fb--fill { width: 100%; height: 100%; color: #fff; display: none; }
.tc-fb--visible { display: flex; }
.tc-name { font-size: 12px; font-weight: 700; color: var(--text-heading); text-align: center; line-height: 1.25; }

.bk { display: inline-flex; align-items: stretch; border-radius: 5px; overflow: hidden; font-size: 12px; font-weight: 700; background: none; text-decoration: none; cursor: default; }
.bk--linked { cursor: pointer; }
.bk .o { padding: 5px 10px; color: #fff; background: var(--navy); }
.bk .n { padding: 5px 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--teal); }
.odds-empty { font-size: 11px; color: var(--g400); font-style: italic; }

.sc-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px; text-align: center; gap: 3px; }
.sc-num { font-family: 'Sora', sans-serif; font-size: 36px; font-weight: 800; color: var(--teal); line-height: 1; }
.sc-row { font-family: 'Sora', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-heading); margin-top: 1px; }
.sc-date { font-size: 10px; color: var(--g400); margin-top: 4px; }
.sc-league { font-size: 10px; color: var(--teal); font-weight: 600; margin-top: 2px; }
.live-badge { display: inline-flex; align-items: center; gap: 3px; background: var(--navy); color: #fff; font-size: 9px; font-weight: 600; padding: 3px 7px; border-radius: 5px; text-transform: uppercase; margin-top: 4px; }
.ld { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); animation: pp 1.4s ease infinite; display: inline-block; }
@keyframes pp { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

.sc-pred { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 9px; min-width: 0; }
.pred-title { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--text-heading); }
.pred-title em { color: var(--teal); font-style: normal; }
.bet-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pred-link { font-size: 9.5px; color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-left: auto; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.pred-link i { font-size: 11px; }
.proof { display: flex; align-items: center; gap: 10px; }
.proof-t { font-size: 11px; color: var(--g500); line-height: 1.5; }
.confline { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--g500); }
.confbar { flex: 1; max-width: 100px; height: 6px; border-radius: 3px; background: var(--g200); overflow: hidden; }
.confbar i { display: block; height: 100%; background: var(--teal); }
.confline b { color: var(--text-heading); font-size: 11.5px; }

@media (max-width: 860px) {
  .sc-grid { grid-template-columns: 1fr auto 1fr; }
  .sc-pred { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--bdr); }
  .tc.away { border-right: none; }
}
@media (max-width: 640px) {
  .page-wrap { padding: 12px 12px 36px; }
  .tc { padding: 14px 8px; gap: 6px; }
  .tc-fb { width: 40px; height: 40px; }
  .tc-name { font-size: 11px; }
  .sc-num { font-size: 32px; }
  .sc-pred { padding: 14px; }
  .pred-title { font-size: 14px; }
  /* FIX (2026-08-26, mobile pass): .tc-fb (the fallback initials badge,
     shown when a crest image fails to load) already shrinks here, but
     .tc-crest never did — its size comes from an inline --crest-size
     custom property set per render call (see comment above), which an
     external stylesheet rule can only win against with !important. Without
     this, a team whose logo loaded renders visibly larger than one whose
     logo failed and fell back to initials, and neither got smaller on a
     phone the way the rest of the card already does. 40px matches the
     .tc-fb value right above so both states stay the same size. */
  .tc-crest { --crest-size: 40px !important; }
  /* Small tightening to match the rest of this breakpoint's denser
     spacing — was still using the full-size 16px/8px padding. */
  .sc-mid { padding: 12px 6px; }
}

/* Hero / streak-of-the-day */
.sod {
  background: linear-gradient(135deg, var(--navy), #1a2647);
  border-radius: 18px;
  padding: 24px;
  color: #fff;
  margin-bottom: 20px;
}
.sod-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-m); margin-bottom: 12px; }

/* Simple competition pill grid */
.comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 32px; }
.comp { background: var(--bg-surface); border: 1px solid var(--bdr); border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 10px; }
.comp-n { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.comp-c { font-size: 11px; color: var(--g400); }

/* ==========================================================================
   FILTER SIDEBAR — real <input> elements styled as pills/checkboxes via
   CSS only (input hidden, label styled, :checked flips the look). No JS
   needed for the styling; the form submits as a normal GET request so
   every filter is a real, bookmarkable URL.
   ========================================================================== */

.layout-with-sidebar { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px; align-items: start; }

.sb { background: var(--bg-surface); border: 1px solid var(--bdr); border-radius: 16px; position: sticky; top: 74px; max-height: calc(100vh - 92px); overflow-y: auto; scrollbar-width: thin; }
.sb-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; justify-content: space-between; }
.sb-title { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.sb-clear { font-size: 12px; color: var(--teal); }
.fs { border-bottom: 1px solid var(--bdr); padding: 14px 18px; }
.fs-t { font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--g400); margin-bottom: 9px; }

/* radio rows (date range) */
.rg { display: flex; flex-direction: column; gap: 3px; }
.rg input { display: none; }
.rg label { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--g700); }
.rg label:hover { background: var(--g50); }
.rg .rd { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--g300); flex-shrink: 0; }
.rg input:checked + label { color: var(--teal); }
.rg input:checked + label .rd { border-color: var(--teal); position: relative; }
.rg input:checked + label .rd::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--teal); }

/* pill grid (streak length) */
.sp-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sp-g input { display: none; }
.sp-g label { border: 1.5px solid var(--g200); border-radius: 8px; padding: 7px 4px; text-align: center; cursor: pointer; display: block; }
.sp-n { font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-heading); }
.sp-l { font-size: 9px; color: var(--g400); text-transform: uppercase; letter-spacing: .05em; }
.sp-g input:checked + label { border-color: var(--teal); background: var(--teal-l); }
.sp-g input:checked + label .sp-n { color: var(--teal); }

/* pill row (confidence) */
.pr { display: flex; flex-wrap: wrap; gap: 5px; }
.pr input { display: none; }
.pr label { border: 1px solid var(--g200); border-radius: 20px; padding: 4px 10px; font-size: 11px; color: var(--g500); cursor: pointer; display: block; }
.pr input:checked + label { border-color: var(--teal); background: var(--teal-l); color: var(--teal); }

/* checkbox rows (markets, competitions) */
.ci-row { display: flex; align-items: center; gap: 8px; padding: 5px; border-radius: 7px; cursor: pointer; font-size: 12px; color: var(--g700); }
.ci-row:hover { background: var(--g50); }
.ci-row input { width: 14px; height: 14px; accent-color: var(--teal); flex-shrink: 0; }
.ci-ct { margin-left: auto; font-size: 10px; background: var(--g100); border-radius: 8px; padding: 1px 6px; color: var(--g400); }

.sb-apply { padding: 14px 18px; }
.sb-apply-note { font-size: 10.5px; color: var(--g400); text-align: center; margin-top: 6px; }
.apb { width: 100%; background: var(--teal); color: #fff; border: none; border-radius: 9px; padding: 11px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.apb:hover { background: #0b837a; }
.more-leagues-toggle { font-size: 11px; color: var(--teal); cursor: pointer; padding: 5px; font-weight: 500; }

.active-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.af-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--teal-l); border: 1px solid var(--teal-m); border-radius: 20px; padding: 4px 10px; font-size: 11px; color: var(--teal); font-weight: 500; }

/* ============ Matchday-by-matchday table ============ */
.mdtable-wrap { overflow-x: auto; }
.mdtable { border-collapse: collapse; width: 100%; font-size: 11px; }
.mdtable th, .mdtable td { padding: 6px 8px; text-align: center; white-space: nowrap; }
.mdtable td.streak-cell { color: var(--teal); font-weight: 700; white-space: nowrap; }
.mdtable th { color: var(--g400); font-weight: 600; font-size: 9.5px; text-transform: uppercase; }
.mdtable td.team-cell { text-align: left; font-weight: 700; color: var(--text-heading); position: sticky; left: 0; background: var(--bg-surface); }
.mdtable td.avg-cell { color: var(--g400); font-weight: 600; }
.mdtable td.streak-cell { color: var(--teal); font-weight: 700; }
.md-over { background: var(--teal-l); color: var(--teal); border-radius: 5px; font-weight: 700; }
.md-under { color: var(--g400); }

/* ============ Team statistics comparison ============ */
.stat-row { padding: 10px 0; border-bottom: 1px solid var(--bdr); }
.stat-row:last-child { border-bottom: none; }
.stat-row-nums { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.stat-row-label { text-align: center; font-size: 11px; color: var(--g500); margin-bottom: 6px; }
.stat-row-sub { font-size: 9px; color: var(--g400); font-weight: 400; }
.stat-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--g200); }
.stat-bar-home { background: var(--teal); }
.stat-bar-away { background: var(--navy); }

/* ============ Sidebar-style stacked lists (bookmakers, standings, similar) ============ */
.detail-side { display: flex; flex-direction: column; gap: 14px; }
.side-box { background: var(--bg-surface); border: 1px solid var(--bdr); border-radius: 16px; padding: 18px; }
.side-box-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.side-box-t { font-size: 13px; font-weight: 700; color: var(--text-heading); }
.side-box-s { font-size: 10.5px; color: var(--g400); }
.bk-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bdr); font-size: 12px; font-weight: 600; }
.bk-row:last-child { border-bottom: none; }
.bk-row a { color: var(--teal); font-size: 11px; font-weight: 700; }
.bk-row-price { color: var(--teal); margin-left: 4px; } /* resolved price next to the brand name, added 2026-08-24 for the resolve()-backed Available bookmakers widget */
.stand-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.stand-pos { width: 18px; color: var(--g400); font-weight: 700; font-size: 11px; }
.stand-crest { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; object-fit: contain; }
.stand-name { flex: 1; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stand-name.highlight { color: var(--teal); }
.stand-pts { font-weight: 700; color: var(--text-heading); font-size: 11px; }
.sim-card { border: 1px solid var(--bdr); border-radius: 12px; padding: 10px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.sim-crests { display: flex; align-items: center; gap: -4px; }
.sim-crests img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; margin-left: -6px; border: 1.5px solid var(--bg-surface); }
.sim-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px; color: var(--teal); }
.sim-mid { flex: 1; min-width: 0; }
.sim-teams { font-size: 11px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-mkt { font-size: 10px; color: var(--g400); }
.sim-conf { font-size: 11px; font-weight: 700; color: var(--teal); }
.rail { display: flex; flex-direction: column; gap: 14px; }
.rw { background: var(--bg-surface); border: 1px solid var(--bdr); border-radius: 14px; padding: 16px; }
.rw-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rw-t { font-size: 12px; font-weight: 700; color: var(--text-heading); display: flex; align-items: center; gap: 6px; }
.rw-s { font-size: 10px; color: var(--g400); }
.sr { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--bdr); }
.sr:first-of-type { border-top: none; padding-top: 0; }
.sr-time { text-align: center; width: 40px; flex-shrink: 0; }
.sr-t1 { font-size: 11px; font-weight: 700; color: var(--text-heading); }
.sr-t2 { font-size: 9px; color: var(--g400); }
.sr-mid { flex: 1; min-width: 0; }
.sr-match { font-size: 11px; font-weight: 600; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-mkt { font-size: 9.5px; color: var(--g400); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-num { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px; color: var(--teal); width: 24px; text-align: center; flex-shrink: 0; }
.sr-conf { font-size: 11px; font-weight: 700; color: var(--teal); flex-shrink: 0; }
.lv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: pp 1.4s ease infinite; flex-shrink: 0; }
.lv-min { font-size: 10px; font-weight: 700; color: var(--teal); width: 24px; flex-shrink: 0; }
.rw-empty { font-size: 11px; color: var(--g400); padding: 4px 0; }
.rw-more { font-size: 10.5px; color: var(--teal); font-weight: 600; text-align: center; margin-top: 10px; cursor: pointer; }

/* Pagination */
.pgr { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; flex-wrap: wrap; }
.pgr a, .pgr span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; }
.pgr a { border: 1px solid var(--bdr); color: var(--g500); background: var(--bg-surface); }
.pgr a:hover { border-color: var(--teal-m); color: var(--teal); }
.pgr span.current { background: var(--teal); color: #fff; }
.pgr span.dots { color: var(--g400); }

@media (max-width: 1180px) {
  .with-rail { grid-template-columns: 1fr !important; }
}

@media (max-width: 940px) {
  /* minmax(0,1fr), not plain 1fr — a bare 1fr track can't shrink below
     its content's min-content width, so any wide child (long text,
     a wide table) blows the track out past the viewport instead of
     wrapping/scrolling inside it. Same fix applied to .sd-grid and
     .home-content-grid below/elsewhere in this file. */
  .layout-with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .sb { position: static; }
}

/* ============ Filter sidebar → mobile drawer (added 2026-08-26)
   Previously the sidebar just fell to position:static above and
   rendered as a full-width block ABOVE the results list on mobile —
   functional, but it pushes every filter control above the content
   right when someone's browsing on a phone. This turns it into a
   slide-in drawer instead, toggled by an icon button (filter-toggle.js),
   with the results list starting the page. Placed AFTER the 940px
   block above (not folded into it) so position:fixed here wins the
   cascade — same source-order technique already used for .sd-grid /
   .home-content-grid elsewhere in this file. ============ */
.filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--bdr);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 14px;
}
.filter-toggle i { color: var(--teal); font-size: 15px; }

.sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 22, 41, .45); z-index: 290; }

body.sb-lock-scroll { overflow: hidden; }

@media (max-width: 940px) {
  .filter-toggle { display: inline-flex; }

  .sb {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    max-height: none;
    width: min(320px, 86vw);
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 300;
    overflow-y: auto;
  }
  .sb.sb--open { transform: translateX(0); }

  .sb-backdrop.sb-backdrop--open { display: block; }
}

/* ============ page-home.php extractions (2026-08-24 inline-style cleanup) ============ */
.home-sod-match { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800; }
.home-sod-meta { font-size: 14px; color: #cbd5e1; margin-top: 6px; }

.home-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.home-top-heading { font-family: 'Sora', sans-serif; font-size: 18px; }
.home-view-all-link { font-size: 12px; font-weight: 600; color: var(--teal); }

.home-content-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 18px; align-items: start; }

/* FIX (2026-08-26, confirmed via real phone screenshot): the homepage's
   rail ("Soon to start" / "In-Play now") was rendering BESIDE the streak
   card list instead of below it, squeezing the card into almost nothing.
   There's a .with-rail class elsewhere in this file that collapses at
   1180px, on the assumption it's applied to this same element — but the
   screenshot shows that isn't taking effect, whatever the reason. Giving
   .home-content-grid its own direct override removes that dependency
   entirely rather than debugging which class is actually on the markup. */
@media (max-width: 1180px) {
  .home-content-grid { grid-template-columns: minmax(0, 1fr); }
}
.home-view-all-cta { display: block; text-align: center; background: var(--bg-surface); border: 1px solid var(--bdr); border-radius: 14px; padding: 14px; font-size: 13px; font-weight: 600; color: var(--teal); text-decoration: none; }

.rail .sr { text-decoration: none; }

.home-section-title { font-family: 'Sora', sans-serif; font-size: 16px; margin: 32px 0 12px; display: flex; align-items: center; gap: 8px; }
.home-section-title i { color: var(--teal); }

.comp { text-decoration: none; }
.home-comp-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

/* ============ Diagnostic pages: page-api-test.php / page-sync-test.php
   (2026-08-24 inline-style cleanup) — shared monospace admin-tool look,
   independent of the main site's card design. ============ */
.diag-main { max-width: 1264px; margin: 0 auto; padding: 24px; font-family: monospace; }
.diag-h1 { font-family: 'Sora', sans-serif; }
.diag-h2 { font-family: 'Sora', sans-serif; margin-top: 32px; font-size: 16px; }
.diag-box-spaced { margin-top: 16px; }
.diag-success-box { background: #f0fdfa; border: 1px solid #5eead4; border-radius: 8px; padding: 16px; }
.diag-success-title { color: #0d9488; }
.diag-error-msg { white-space: pre-wrap; }
.diag-pre { white-space: pre-wrap; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; font-size: 12px; overflow-x: auto; }
.diag-muted { color: #64748b; }
.diag-list { line-height: 1.8; }
.diag-btn { display: inline-block; color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.diag-btn--teal { background: #0d9488; }
.diag-btn--navy { background: #0f1629; margin-left: 8px; }
.diag-btn-note { margin-top: 8px; color: #94a3b8; font-size: 12px; }

/* ============ page-streak-detail.php (2026-08-24 inline-style cleanup)
   Left inline: the confidence-bar % width (.confbar i), the two team-vs-
   league stat bar widths (.stat-bar-home/.stat-bar-away), the per-point
   coordinates on the boolean-market lane dots, and that lane's bar-chart
   bar height — all genuinely computed per render, same "keep it inline"
   exception used on render-streak-card.php. ============ */
.sd-empty { max-width: 1264px; margin: 40px auto; padding: 0 24px; }

.sd-back { font-size: 12px; color: var(--g400); }

.sd-card { background: var(--bg-surface); border: 1px solid var(--bdr); border-radius: 18px; padding: 24px; }
.sd-card--mt12 { margin-top: 12px; }
.sd-card--mt14 { margin-top: 14px; }

.sd-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--g400); }

/* Home/away matchup header */
.sd-matchup-row { display: flex; align-items: stretch; justify-content: center; gap: 16px; }
.sd-side-box { text-align: center; flex: 1; max-width: 200px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid transparent; background: transparent; }
.sd-side-box--active { border-color: var(--teal); background: var(--teal-l); }
.sd-side-tag { font-size: 9px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; min-height: 11px; }
.sd-side-meta { font-size: 10.5px; color: var(--g400); margin-top: 2px; }
.sd-side-odd-wrap { margin-top: 8px; display: flex; justify-content: center; }
.sd-vs { font-family: 'Sora', sans-serif; color: var(--g400); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sd-match-date { text-align: center; font-size: 11px; color: var(--g400); margin-top: 14px; }

/* Prediction card */
.sd-pred-title { font-size: 18px; margin-bottom: 10px; } /* modifies the shared .pred-title (font-size:15px) for this page's larger hero title — relies on source order to win, same pattern as .tc-fb--fill */
.sd-pred-desc { font-size: 13px; color: var(--g500); line-height: 1.6; }

.sd-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; margin-top: 14px; align-items: start; }

/* Boolean-market two-lane chart */
.sd-streak-badge { display: inline-flex; align-items: center; gap: 6px; background: #fee2e2; color: #b91c1c; border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 700; margin-bottom: 18px; }
.sd-streak-dot { width: 6px; height: 6px; border-radius: 50%; background: #b91c1c; }
.sd-lane-wrap { position: relative; padding-left: 44px; }
.sd-lane-label { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--g500); }
.sd-lane-box { position: relative; height: 150px; }
.sd-lane-band { position: absolute; left: 0; right: 0; height: 50%; }
.sd-lane-band--top { top: 0; background: var(--teal-l); border-radius: 8px 8px 0 0; opacity: 0.5; }
.sd-lane-band--bottom { bottom: 0; background: var(--g50); border-radius: 0 0 8px 8px; }
.sd-lane-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-lane-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--bg-surface); border: 2.5px solid var(--teal); box-sizing: border-box; cursor: default; }
.sd-lane-dot--filled { background: var(--teal); }
.sd-date-row { display: flex; justify-content: space-between; font-size: 10px; color: var(--g400); margin-top: 10px; }

/* Numeric-market bar chart */
.sd-bar-row { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.sd-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sd-bar { width: 100%; background: var(--g300); border-radius: 3px 3px 0 0; }
.sd-bar--above { background: var(--teal); }

/* Team statistics comparison header */
.sd-stat-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 18px; }

/* Sidebar */
.sd-view-all { display: block; text-align: center; font-size: 11px; color: var(--teal); font-weight: 600; margin-top: 8px; text-decoration: none; }

/* ============ page-streak-detail.php — mobile (added 2026-08-26)
   .sd-grid never had a mobile override anywhere in this file — every
   OTHER two-column layout here collapses at some breakpoint
   (.layout-with-sidebar at 940px, .with-rail at 1180px), but this one
   never did. On a phone that's a fixed 300px sidebar column squeezing
   the main content column (minmax(0,1fr) can shrink all the way to
   0) — likely the single biggest mobile issue on the site, since this
   is the page every streak card links out to. Matches the same 940px
   breakpoint .layout-with-sidebar already uses, for consistency.
   Placed AFTER .sd-grid's own definition above (not folded into the
   earlier 940px block near .layout-with-sidebar) so it actually wins
   the cascade — a same-specificity rule earlier in the file would lose
   to .sd-grid's later, unconditional base rule. ============ */
@media (max-width: 940px) {
  /* minmax(0,1fr) — see the same fix + explanation on .layout-with-sidebar
     above. This is the actual reason the matchday table, chart and team
     statistics cards were all "way too wide" on mobile at once: a bare
     1fr track can't shrink below its widest child's min-content width
     (here, the matchday table's many nowrap <td> columns), so instead
     of that table scrolling inside its own .mdtable-wrap, the ENTIRE
     .sd-grid column — and everything else in it — got stretched out
     past the screen width to fit it. */
  .sd-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .sd-matchup-row { gap: 10px; }
  .sd-side-box { padding: 12px 10px; }
}

/* ============ page-streak-detail.php — the 3 flagged sections, mobile
   refinements (added 2026-08-26). The .sd-grid fix above already stops
   these from blowing the page out sideways; these rules make them
   actually comfortable to read/use at phone widths on top of that. ============ */
@media (max-width: 640px) {
  .sd-card { padding: 16px; }

  /* Matchday-by-matchday table — .mdtable-wrap already scrolls
     horizontally (overflow-x:auto), it just needed the grid fix above
     to be allowed to do that instead of stretching the page. Tightened
     further here since there are usually 8-15+ match columns. */
  .mdtable { font-size: 10px; }
  .mdtable th, .mdtable td { padding: 5px 6px; }

  /* Numeric bar chart ("Team Yellow Cards per match" etc.) — flex:1
     columns have the same min-content-width problem as a bare 1fr grid
     track, so with 8+ matches they were squeezing unreadably instead of
     just scrolling. Fixed width + horizontal scroll instead. */
  .sd-bar-row { overflow-x: auto; padding-bottom: 2px; }
  .sd-bar-col { flex: 0 0 auto; min-width: 26px; }

  /* Boolean two-lane chart */
  .sd-lane-wrap { padding-left: 32px; }
  .sd-lane-box { height: 120px; }
  .sd-lane-label { font-size: 9.5px; }
  .sd-date-row { font-size: 9px; }

  /* Team statistics — switch the value/label/value row from a flex row
     (no min-width on the label, so it could get squeezed to nothing) to
     a grid with fixed-width side columns, so the two numbers keep a
     reliable width and the label always keeps its own space. */
  .stat-row-nums { display: grid; grid-template-columns: 30px 1fr 30px; gap: 6px; align-items: start; }
  .stat-row-nums > span:first-child,
  .stat-row-nums > span:last-child { text-align: center; }
  .stat-row-label { font-size: 10px; }
}

/* ============ index.php — minimal fallback template (blog listing) ============ */
.ab-main { max-width: 1264px; margin: 0 auto; padding: 24px; }

/* ============ 404.php — themed "not found" page (added 2026-08-27) ============
   Reuses the existing design language (Sora headings, teal accent, card/
   button styles already used elsewhere) rather than introducing anything
   new — a centered card instead of a bare WP error message. */
.nf-wrap { max-width: 640px; margin: 0 auto; padding: 72px 24px; text-align: center; }
.nf-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--teal-l);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 24px;
}
.nf-code {
  font-family: 'Sora', sans-serif;
  font-size: 72px;
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: 8px;
}
.nf-title {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 10px;
}
.nf-text { color: var(--g500); font-size: 14px; line-height: 1.6; margin-bottom: 32px; }
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.nf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 12px 22px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
}
.nf-btn:hover { background: #0b837a; }
.nf-btn-secondary {
  background: var(--bg-surface);
  color: var(--text-heading);
  border: 1px solid var(--g200);
}
.nf-btn-secondary:hover { border-color: var(--g300); background: var(--g50); }
@media (max-width: 480px) {
  .nf-code { font-size: 56px; }
  .nf-actions { flex-direction: column; }
  .nf-btn { justify-content: center; }
}