/* ═══ INTEL 4.0 — "COMMAND TERMINAL" (20260712i4a) ══════════════════════════
   The intel page as an app, not a scroll: one cockpit frame per sport —
   command header (title · verdict · live clock), VIEW TABS that swap the
   stage (Overview / Deep Data / Results / Tape / Sheet / League), a broadcast
   pick ticker on the frame's base, offers docked beneath. Same widgets, same
   renderers — a different machine around them. */

.live-pane, #intelPane, #statsPane, .i4-frame {
  --i4: #e7b937;
  --i4-bg: #0a0c10;
  --i4-panel: #11141a;
  --i4-card: #171b22;
  --i4-chip: #1e232c;
  --i4-line: rgba(255,255,255,.07);
  --i4-ink: #e8edf4;
  --i4-dim: #96a0ad;
  --i4-faint: #67707e;
}
#live-football, .i4-frame[data-sport="football"] { --i4: #4078ec; }
#live-racing,   .i4-frame[data-sport="racing"]   { --i4: #22c55e; }
#live-nba,      .i4-frame[data-sport="nba"]      { --i4: #f59e0b; }
#live-tennis,   .i4-frame[data-sport="tennis"]   { --i4: #a78bfa; }
#live-f1,       .i4-frame[data-sport="f1"]       { --i4: #ef4444; }

/* ── anti-FOUC: hide the pre-transform (old-format) content until intel4.js
   has built the terminal frame (adds .i4-ready to <html>). The site nav shell
   stays visible; everything else in #page-main is masked (visibility keeps
   layout so the JS harvesters still read computed styles). A per-page inline
   <script> failsafe adds .i4-ready after 1.8s, so a missing or slow script can
   never leave the content blank. ── */
html:not(.i4-ready) #page-main > *:not(nav):not(.nav-drawer):not(.top-bar) { visibility: hidden; }
/* while masked, show a quiet loading spinner so the wait reads as intentional
   (matters most on F1, whose frame can take a few seconds to assemble) */
html:not(.i4-ready) #page-main::before {
  content: ''; position: fixed; top: calc(50% - 13px); left: calc(50% - 13px);
  width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .14);
  border-top-color: #e7b937; border-radius: 50%; z-index: 3; pointer-events: none;
  animation: i4spin .7s linear infinite;
}
@keyframes i4spin { to { transform: rotate(360deg); } }

/* ── the cockpit frame ── */
.i4-frame {
  position: relative;
  margin: 8px 0 14px;
  background:
    radial-gradient(720px 340px at 8% -8%, color-mix(in srgb, var(--i4) 11%, transparent), transparent 70%),
    var(--i4-bg);
  border: 1px solid var(--i4-line);
  border-top: 3px solid var(--i4);
  border-radius: 18px;
  overflow: clip; /* clip (not hidden) so the sticky .i4-mhead isn't trapped — desktop + mobile */
}
.i4-frame::after { /* film grain */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .035;
  pointer-events: none;
  z-index: 1;
}
.i4-frame > * { position: relative; z-index: 2; }

/* ── command header ── */
.i4-top {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px 8px;
  flex-wrap: wrap;
}
.i4-id { display: flex; align-items: center; gap: 11px; }
.i4-sig {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--i4);
  box-shadow: 0 0 12px var(--i4);
  animation: i4pulse 2.4s ease-in-out infinite;
}
@keyframes i4pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .i4-sig { animation: none; } }
.i4-title {
  font-family: var(--display, 'Arial Black', system-ui);
  font-weight: 900;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--i4-ink);
}
.i4-title em { font-style: normal; color: var(--i4); }
.i4-verdict {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  background: var(--i4-panel);
  border: 1px solid transparent;
  border-radius: 11px;
  background:
    linear-gradient(var(--i4-panel), var(--i4-panel)) padding-box,
    linear-gradient(120deg, rgba(231,185,55,.5), rgba(255,255,255,.06) 60%) border-box;
  font: 800 11.5px 'JetBrains Mono', monospace;
  letter-spacing: .05em;
  color: var(--i4-ink);
  min-width: 0;
}
.i4-verdict .vl { font-size: 8px; letter-spacing: .18em; color: var(--i4-faint); flex: none; }
.i4-verdict b { color: #e7b937; font-variant-numeric: tabular-nums; white-space: nowrap; }
.i4-verdict .vn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i4-clock {
  margin-left: auto;
  font: 800 13px 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: var(--i4-dim);
  display: flex; align-items: baseline; gap: 8px;
}
.i4-clock .z { font-size: 8px; letter-spacing: .2em; color: var(--i4-faint); }

/* ── view tabs ── */
.i4-tabs {
  display: flex; gap: 5px;
  padding: 8px 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.i4-tabs::-webkit-scrollbar { display: none; }
.i4-tab {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: var(--i4-panel);
  border: 1px solid var(--i4-line);
  border-radius: 11px;
  font: 800 10px 'JetBrains Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--i4-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
  user-select: none;
}
.i4-tab:hover { color: var(--i4-ink); border-color: rgba(255,255,255,.16); transform: translateY(-1px); }
.i4-tab.on {
  background: var(--i4);
  border-color: transparent;
  color: #0a0c10;
}
.i4-tab .ct {
  font-size: 9px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-variant-numeric: tabular-nums;
}
.i4-tab.on .ct { background: rgba(0,0,0,.22); }

/* ── sticky command header (desktop + mobile) — the sport rail + view tabs stay
   pinned while the stage scrolls, so switching tabs never means scrolling back up.
   intel4.js wraps .i4-top + #sport-tab-bar + .i4-tabs into .i4-mhead and sets its
   top inline (below the site nav when that nav is fixed). ── */
.i4-mhead {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--i4-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--i4-line);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  margin: -1px -1px 8px;
}

/* ── the stage ── */
.i4-stage { padding: 0 16px 16px; min-height: 380px; }
.i4-view { display: none; }
.i4-view.on { display: block; animation: i4in .26s cubic-bezier(.4,0,.2,1); }
@keyframes i4in { from { opacity: 0; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .i4-view.on { animation: none; } }

/* overview bento: picks 2fr + live rail 1fr */
.i4-bento {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
}
.i4-bento > div { min-width: 0; }
.i4-bento.solo { grid-template-columns: 1fr; } /* no rail → picks fill the width */
.i4-extra { margin-top: 6px; }
@media (max-width: 900px) { .i4-bento { grid-template-columns: 1fr; } }

/* World Cup lives inside the football section now — drop it from the frame rail */
.i4-frame #sport-tab-bar .sport-tab-btn[data-sport="worldcup"],
.i4-frame #sport-tab-bar a[href*="world-cup"] { display: none !important; }
.i4-rail .bz-card, .i4-rail .bz-fxbox, .i4-rail .bz-map { overflow-x: auto; }
.i4-rail table { font-size: 10px !important; }
.i4-rail th, .i4-rail td { padding: 4px 5px !important; white-space: nowrap; }

/* ── pick ticker (broadcast base strip) ── */
.i4-ticker {
  display: flex; align-items: center;
  height: 40px;
  border-top: 1px solid var(--i4-line);
  background: #0c0f14;
  overflow: hidden;
}
.i4-ticker .tl {
  flex: none;
  align-self: stretch;
  display: flex; align-items: center;
  padding: 0 14px;
  font: 800 9px 'JetBrains Mono', monospace;
  letter-spacing: .2em;
  color: var(--i4);
  border-right: 1px solid var(--i4-line);
  background: var(--i4-panel);
}
.i4-tickerwrap { flex: 1; overflow: hidden; }
.i4-track {
  display: inline-flex; gap: 42px;
  padding-left: 24px;
  white-space: nowrap;
  animation: i4mq var(--mqdur, 45s) linear infinite;
  will-change: transform;
}
.i4-ticker:hover .i4-track { animation-play-state: paused; }
@keyframes i4mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .i4-track { animation: none; } }
.i4-track span {
  font: 700 11px 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--i4-dim);
}
.i4-track span i { font-style: normal; color: var(--i4-ink); font-weight: 800; }
.i4-track span b { color: #e7b937; margin-left: 7px; }
.i4-track span .tg { color: var(--i4); font-size: 9px; letter-spacing: .12em; margin-right: 7px; }

/* ── shared widget skin inside the stage (carried from the research pass) ── */
#page-main .bz-zhead, #page-main .bz-zlabel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 16px 2px 8px !important;
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  color: var(--i4-dim, #96a0ad) !important;
  display: flex; align-items: center;
}
#page-main .bz-zhead::before, #page-main .bz-zlabel::before {
  content: '';
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--i4, #e7b937);
  margin-right: 9px; flex: none;
}
#page-main .bz-card, #page-main .bz-fxbox, #page-main .bz-picksbar .bzp-card,
#page-main #football-betfair-panel {
  background: var(--i4-card, #171b22) !important;
  border: 1px solid var(--i4-line, rgba(255,255,255,.07)) !important;
  border-radius: 14px !important;
}
/* pick cards speak the SAME language as the tips-page hero tiles:
   #181a20 tile · accent tag with glowing dot · big clean selection · accent odds */
#page-main .bzp-card {
  background: #181a20 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
  padding: 13px 15px 12px !important;
  transition: transform .18s cubic-bezier(.4,0,.2,1), border-color .18s;
}
#page-main .bzp-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--i4) 45%, transparent) !important; }
#page-main .bzp-tag {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: transparent !important; border: none !important; padding: 0 !important;
  font-size: 9px !important; font-weight: 800 !important;
  letter-spacing: .95px !important; text-transform: uppercase;
  color: var(--i4, #e7b937) !important;
}
#page-main .bzp-tag::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--i4, #e7b937);
  box-shadow: 0 0 7px var(--i4, #e7b937);
  flex: none;
}
#page-main .bzp-nm { font-size: 17px !important; line-height: 1.1 !important; font-weight: 800 !important; color: #f1f3f7 !important; }
#page-main .bzp-meta { font-size: 9.5px !important; color: #c6ccd6 !important; }
#page-main .bzp-odds {
  background: transparent !important; border: none !important; padding: 0 !important;
  font-size: 15px !important; font-weight: 800 !important;
  color: var(--i4, #e7b937) !important;
}
#page-main .bz-picksbar > div, #page-main .bz-picksbar {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 8px !important;
}
#page-main table, #page-main .bz-card, #page-main .bz-fxbox, #page-main .bz-zone,
#page-main .bzp-odds { font-variant-numeric: tabular-nums; }
#page-main .bz-zone {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
#page-main .bz-zone > .bz-zlabel { grid-column: 1 / -1; }
#page-main .bz-zone > .bz-fxbox-wide,
#page-main .bz-zone > .bz8-section,
#page-main .bz-zone > [id*='sheet'],
#page-main .bz-zone > .beteb-sheet-root,
#page-main .bz-zone > table,
#page-main .bz-zone > div:has(> table) { grid-column: 1 / -1; }
/* jockey + trainer form cards sit side by side (wrapped .i4-duo by the engine) */
#page-main .i4-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; grid-column: 1 / -1 !important; }
#page-main .i4-duo > * { min-width: 0; margin: 0 !important; }
.i4-duo table { font-size: 10px !important; }
.i4-duo .bz-fxbox { overflow-x: auto; }
@media (max-width: 900px) { #page-main .i4-duo { grid-template-columns: 1fr; } }
@media (max-width: 900px) { #page-main .bz-zone { grid-template-columns: 1fr; } }

/* F1 Driver Data — stack the deep cards full-width (Driver Stats, then
   Championship standings, then Weekend results) so the tables can spread out
   instead of being squeezed into a 2-col grid (user request 2026-07-13). */
.i4-frame[data-sport="f1"] .i4-view[data-view="deep"] .bz-zone {
  grid-template-columns: 1fr !important;
}
/* the stats table fills the now-wide card */
.i4-frame[data-sport="f1"] .i4-view[data-view="deep"] .f1ds-table { width: 100% !important; }
/* drivers + constructors standings each get half the full width */
.i4-frame[data-sport="f1"] .i4-view[data-view="deep"] .f1-champ-grid {
  grid-template-columns: 1fr 1fr !important;
}
/* The 2026 race-calendar globe was stripped in the v6 trim; its zone is a dead box that paints
   a "Loading Calendar" spinner forever. live-data-maps.js hides it on every path now — this is
   the belt-and-braces so it can never flash (or stick, if that script fails to load at all). */
.f1-globe-zone { display: none !important; }
.bz-zhead:has(+ .f1-globe-zone) { display: none !important; }

/* ── PICK CARDS = the tips-board tile, minus the Why / Place-bet buttons ──────────────────────
   The board tile reads: tag → selection → BET TYPE → meta, odds right, then a confidence bar.
   Intel was missing the bet type and the confidence, so the same bet read differently on the two
   pages. pulse.js now supplies both; these style them to match .t-what / .conf on the board. */
.i4-frame .bzp-what {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(233, 236, 242, .55); margin-top: 2px;
}
.i4-frame .bzp-conf { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.i4-frame .bzp-conf b {
  font-family: var(--mono, monospace); font-size: 9.5px; font-weight: 700;
  color: var(--i4); letter-spacing: .03em;
}
.i4-frame .bzp-cd {
  flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .10);
}
.i4-frame .bzp-cd.f { background: var(--i4); }

/* MULTI-LEG cards were `grid-column: 1/-1` — a 3-leg Trixie ate a whole 1080px row while the
   singles beside it were 210px tiles, which is what made the picks grid feel blown out. The
   board renders the same bet as an ordinary tile with one compact row per leg, so match it:
   the card sits in the grid (2 columns wide on desktop, so a leg still fits on one line) and
   each leg is `selection @ odds .......... course time`.
   NOT the World Cup game card (.wcgame) — its three tiers genuinely need the full width. */
.i4-frame .bzp-card.bzp-multi:not(.wcgame) { grid-column: auto; }
@media (min-width: 900px) {
  .i4-frame .bzp-card.bzp-multi:not(.wcgame) { grid-column: span 2; }
}
.i4-frame .bzp-card.bzp-multi:not(.wcgame) .bzp-legs {
  display: flex; flex-direction: column; gap: 0; margin-top: 6px; padding: 0; list-style: none;
}
.i4-frame .bzp-card.bzp-multi:not(.wcgame) .bzp-leg {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .07);
}
.i4-frame .bzp-card.bzp-multi:not(.wcgame) .bzp-leg:first-child { border-top: 0; }
.i4-frame .bzp-card.bzp-multi:not(.wcgame) .bzp-leg-nm {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600;
}
.i4-frame .bzp-card.bzp-multi:not(.wcgame) .bzp-leg-sub {
  flex: 0 0 auto; text-align: right; font-size: 10px; letter-spacing: .03em;
  color: rgba(233, 236, 242, .48); text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 640px) {
  .i4-frame[data-sport="f1"] .i4-view[data-view="deep"] .f1-champ-grid { grid-template-columns: 1fr !important; }
  /* ── phone polish ── */
  /* command header: tighten + stop the live clock floating alone on its own line */
  .i4-top { gap: 6px 12px; padding: 13px 15px 6px; }
  .i4-clock { margin-left: 0; font-size: 11.5px; }
  .i4-verdict { font-size: 11px; padding: 7px 12px; }
  .i4-title { font-size: clamp(19px, 6.4vw, 26px); }
  /* pick cards: everything stays INSIDE the box (tips-page style, consistent for
     every sport). The tag label wraps instead of forcing a wide row that pushes
     the tier emoji off the edge; multi-leg cards stack their legs full-width;
     long meta wraps under the pick; "N LEG" stays on one line. */
  #page-main .bzp-tag { white-space: normal !important; min-width: 0 !important; }
  #page-main .bzp-top { align-items: flex-start !important; }
  #page-main .bzp-em { flex: 0 0 auto !important; }
  #page-main .bzp-legs { grid-template-columns: 1fr !important; }
  #page-main .bzp-legcount { white-space: nowrap !important; }
  #page-main .bzp-leg { flex-wrap: wrap; row-gap: 1px; }
  #page-main .bzp-leg-nm { flex: 1 1 auto; min-width: 0; }
  #page-main .bzp-leg-sub { flex: 1 1 100%; text-align: left; white-space: normal; }

  /* ══ MOBILE APP-SHELL: slim sticky header (command bar · sport chips · view
     tabs) that stays pinned, + swipe between views (wired in intel4.js). ══ */
  /* the frame's `overflow:hidden` traps position:sticky — `clip` still clips
     (keeps the rounded corners) but does NOT create a scroll container, so the
     header can pin to the viewport. */
  .i4-frame { overflow: clip; }
  .i4-mhead {
    position: sticky; z-index: 30;
    background: rgba(11, 12, 16, .9);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
    margin: -1px -1px 6px; padding-top: 2px;
  }
  /* 1 — slim command bar: sport · verdict · clock on ONE line */
  .i4-mhead .i4-top { padding: 9px 14px 4px !important; gap: 9px !important; flex-wrap: nowrap !important; align-items: center; }
  .i4-mhead .i4-title { font-size: 12.5px !important; letter-spacing: .09em; white-space: nowrap; flex: none; }
  .i4-mhead .i4-title em { display: none; }             /* just the sport, drop "COMMAND" */
  .i4-mhead .i4-verdict { font-size: 10px !important; padding: 5px 9px !important; flex: 1 1 auto; min-width: 0; }
  .i4-mhead .i4-verdict .vl { display: none; }          /* drop "TODAY'S READ" to save room */
  .i4-mhead .i4-clock { margin-left: 0 !important; font-size: 10px !important; flex: none; }
  .i4-mhead .i4-clock .z { display: none; }             /* keep the time, drop "LIVE·UK" */
  /* 2 — sport chips strip. Base rules force `flex:1 1 0` + a 999px radius, which
     turns the ACTIVE chip into a fixed circle that chops off its label. Override
     to content-width rounded pills that actually fit "⚽ FOOTBALL". */
  .i4-mhead #sport-tab-bar { padding: 2px 10px 5px !important; gap: 6px !important; overflow-x: auto; scrollbar-width: none; justify-content: flex-start !important; }
  .i4-mhead #sport-tab-bar::-webkit-scrollbar { display: none; }
  .i4-frame .i4-mhead #sport-tab-bar .sport-tab-btn {
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 0 !important;
    border-radius: 12px !important; padding: 6px 11px !important; box-shadow: none !important;
  }
  .i4-frame .i4-mhead #sport-tab-bar .sport-tab-btn > span:last-child { white-space: nowrap !important; }
  .i4-frame .i4-mhead #sport-tab-bar .sport-tab-btn.active {
    background: rgba(255, 255, 255, .08) !important;
    background: color-mix(in srgb, var(--i4) 20%, #0e1014) !important;
    border: 1px solid var(--i4) !important; color: #fff !important;
  }
  /* 3 — view-tab segmented control */
  .i4-mhead .i4-tabs { padding: 4px 10px 8px !important; gap: 6px !important; }
  .i4-frame .i4-tab { font-size: 11px !important; padding: 10px 15px !important; }
  .i4-stage { padding-top: 4px; }
  /* the football filter bar sits just under the sticky header (scrolls) */
  .i4-frame .fb-mode-bar { padding-top: 8px !important; }
  /* the BETEB Sheet (fixed ~1138px PNG card) and the Market Tape (wide time-series
     chart) can't reflow — let them PAN horizontally instead of being clipped. */
  .i4-view[data-view="sheet"], .i4-view[data-view="tape"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ══ wide DATA TABLES → stacked cards (all data visible, ZERO sideways scroll):
     each row becomes a card; each cell shows its column header as a label
     (tagged with data-th in intel4.js). No more horizontal panning. ══ */
  .i4-stage table[data-i4mob] { display: block; width: 100% !important; min-width: 0 !important; border: 0 !important; }
  .i4-stage table[data-i4mob] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .i4-stage table[data-i4mob] tbody { display: block; }
  .i4-stage table[data-i4mob] tr {
    display: flex; flex-wrap: wrap; column-gap: 16px;
    background: #12151b; border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px; padding: 6px 13px; margin: 0 0 8px;
  }
  .i4-stage table[data-i4mob] td {
    flex: 1 1 calc(50% - 8px); box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 5px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    text-align: right !important; white-space: normal !important; min-width: 0 !important; width: auto !important;
    font-size: 13px !important; font-variant-numeric: tabular-nums;
  }
  /* rank + name span the full width as the card's header; stats pair up 2-per-row */
  .i4-stage table[data-i4mob] td:first-child,
  .i4-stage table[data-i4mob] td:nth-child(2) { flex-basis: 100%; }
  .i4-stage table[data-i4mob] tr td:last-child { border-bottom: 0 !important; }
  .i4-stage table[data-i4mob] td::before {
    content: attr(data-th); flex: none; text-align: left; max-width: 55%;
    color: #8b94a3; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }
  .i4-stage table[data-i4mob] td:not([data-th])::before { display: none; }
  /* neutralise the old horizontal-scroll wrappers around reflowed tables */
  .i4-stage .f1ds-wrap, .i4-stage .wim-pt-wrap,
  .i4-stage [class*="table-wrap"], .i4-stage [class*="pt-wrap"] { overflow-x: visible !important; border: 0 !important; }
}

/* offers dock under the frame: slim utility band */
.i4-offers { margin: 0 0 10px; }
.i4-offers .offer-carousel .oc-slide { padding: 11px 46px !important; }
.i4-offers .offer-carousel .oc-of { font-size: 14.5px !important; }
.i4-offers .offer-carousel .oc-terms { font-size: 8.5px !important; }

.i4-hidden { display: none !important; }

/* BETEB Sheet is a FIXED 1138px card (kept for pixel-perfect PNG export) — clear
   every wrapping gutter (stage + builder panel) so the card sits edge-to-edge in
   the ~1140px frame with no left/right scroll bar. Scrolls only below the card's
   own width (real mobile). */
.i4-stage:has(> .i4-view[data-view="sheet"].on) { padding-left: 0 !important; padding-right: 0 !important; }
.i4-view[data-view="sheet"] { padding: 0; }
.i4-view[data-view="sheet"] .beteb-builder.bz2 {
  padding-left: 0 !important; padding-right: 0 !important;
  border-left: none !important; border-right: none !important;
}
/* football sheet is nested in #playerSection (16px+1px) + .intel-page-wrap (4px) — zero their gutters */
.i4-view[data-view="sheet"] #playerSection { padding-left: 0 !important; padding-right: 0 !important; border-left: none !important; border-right: none !important; }
.i4-view[data-view="sheet"] .intel-page-wrap { padding-left: 0 !important; padding-right: 0 !important; }
.i4-view[data-view="sheet"] #beteb-sheet-wrap,
.i4-view[data-view="sheet"] .beteb-sheet-wrap { overflow-x: auto !important; }

/* ── the sport rail docked as the frame's channel-switcher row ── */
.i4-frame #sport-tab-bar {
  position: static !important; top: auto !important; left: auto !important;
  transform: none !important; margin: 0 !important;
  width: auto !important; max-width: none !important;
  display: flex !important; justify-content: flex-start; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 12px 16px 0 !important;
  background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  z-index: auto !important;
}
.i4-frame #sport-tab-bar::-webkit-scrollbar { display: none; }
.i4-frame #sport-tab-bar .sport-tab-btn {
  flex: none;
  padding: 6px 13px !important;
  font-size: 9.5px !important;
  border-radius: 999px !important;
}

/* football's Club/International + Men/Women toggles inside the frame:
   restyled to read as part of the command terminal (segmented, compact,
   sport-accent active state) rather than floating gold chips. */
.i4-frame .fb-mode-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 2px 16px 10px !important;
  justify-content: flex-start !important;   /* align with the tabs, not centred */
  gap: 10px !important;
}
.i4-frame .fb-mode-switch,
.i4-frame .fb-gender-switch {
  background: #11141a !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 11px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.i4-frame .fbm-btn,
.i4-frame .fbg-btn {
  padding: 6px 13px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  color: #96a0ad !important;
  font-variant-numeric: tabular-nums !important;
  transition: background .15s, color .15s !important;
}
.i4-frame .fbm-btn:not(.active):hover,
.i4-frame .fbg-btn:not(.active):hover { color: #e9eaee !important; }
/* active toggle uses the sport accent, exactly like the view tabs */
.i4-frame .fbm-btn.active,
.i4-frame .fbg-btn.active {
  background: var(--i4) !important;
  color: #0a0c10 !important;
}
/* "Viewing" lead + "National-team fixtures" hint = quiet terminal eyebrows */
.i4-frame .fb-mode-lead,
.i4-frame .fb-mode-hint {
  font-size: 8.5px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}

/* racing results in the rail: Time · 1st · 2nd fit the column — no panning */
.i4-rail .course-result-table th:nth-child(n+4),
.i4-rail .course-result-table td:nth-child(n+4) { display: none !important; }
.i4-rail .course-result-table { width: 100% !important; table-layout: auto !important; }
.i4-rail .course-result-table th, .i4-rail .course-result-table td { white-space: normal !important; }
.i4-rail .racing-results-panel, .i4-rail .race-result-grid { min-width: 0 !important; max-width: 100% !important; }
.i4-rail .race-result-grid { font-size: 9.5px !important; grid-template-columns: minmax(0, 1fr) !important; }
.i4-rail .race-result-grid * { min-width: 0 !important; }
.i4-rail .race-result-grid b, .i4-rail .race-result-grid span { overflow: hidden; text-overflow: ellipsis; }
.i4-rail .course-result-card, .i4-rail .course-result-card > div { min-width: 0 !important; max-width: 100% !important; }

/* the tab already names the view — the old internal "Deep data" banners are noise */
.i4-view .bz-zlabel { display: none !important; }
/* ghost headers of sections the trim pass hid (e.g. racing's retired weather map) */
.i4-view .bz-zhead:has(+ .bz-map[style*="none"]),
#live-racing .i4-view .bz-zhead:has(+ .bz-map) { display: none !important; }
/* leftovers from the retired show/hide widget system */
.li-cl-ctrls, .li-cl-tray, [id^='li-cl'] { display: none !important; }

/* everything fits its box — no view content may burst the frame */
.i4-view > *, .i4-view .i4-bento > div > * { max-width: 100%; min-width: 0; }
.i4-view { overflow: hidden; }
.i4-view table { max-width: 100%; }
.i4-stage .bz-fxbox, .i4-stage .bz-card { overflow-x: auto; }
