@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #0A0B0D;
  --surface: #16171B;
  --surface-2: #1C1D21;
  --sheet: #18191D;
  --text: #F3F4F6;
  --text-sub: #94969E;
  --text-mute: #64666E;
  --hairline: rgba(255,255,255,0.07);
  --hairline-strong: rgba(255,255,255,0.14);
  --accent: #D9B45B;
  --accent-soft: rgba(217,180,91,0.14);
  --accent-border: rgba(217,180,91,0.35);
  --win: #5FB88A;
  --win-soft: rgba(95,184,138,0.14);
  --loss: #D97066;
  --loss-soft: rgba(217,112,102,0.14);
  --draw: #B8A369;
  --draw-soft: rgba(184,163,105,0.16);
  --live: #E5484D;
  --live-soft: rgba(229,72,77,0.16);
  --provisional: #7C9CD9;
  --provisional-soft: rgba(124,156,217,0.16);
  --provisional-border: rgba(124,156,217,0.38);
  --record: #9AA5B5;
  --record-soft: rgba(154,165,181,0.16);
  --record-border: rgba(154,165,181,0.38);
  --badge-surface: #E9E6DE;
  --nav-h: 74px;
  /* Body's own horizontal padding — pulled into a variable so
     .standings-filter-row (see below) can bleed its sticky background
     out to the real screen edges instead of stopping at this inset,
     and stay in sync with the narrower value the max-width:700px
     breakpoint below swaps in, without restating body's own rule
     there. */
  --page-pad: 24px;
}

*{ box-sizing: border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent; }

html{ background: var(--bg); }

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  padding: calc(env(safe-area-inset-top) + var(--page-pad)) var(--page-pad) calc(var(--nav-h) + var(--page-pad) + env(safe-area-inset-bottom));
  min-height: 100vh;
  overscroll-behavior-y: contain;
}

.board{
  max-width: 1400px;
  margin: 0 auto;
}

.page-header{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
}

.page-header-top{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 8px;
}

.app-logo{
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: block;
}

.page-header h1{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.5px;
  line-height: 1;
}

.page-sub{
  font-size: 13px;
  color: var(--text-sub);
  font-weight: 500;
}

.draft-team-picker{
  margin-left: auto;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  max-width: 100%;
}

.draft-team-picker option{
  background: var(--surface);
  color: var(--text);
}

/* ---- League filter chips (mobile jump-nav) ---- */
.filter-chips{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 18px;
  scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar{ display: none; }

.filter-chip{
  flex: 0 0 auto;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: #C7C9D1;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
}

.filter-chip:active{
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* Persistent selection (Standings' league filter) rather than the
   touch feedback above — filled solid so it reads as "on" even after
   you lift your finger, not just a footprint from the last :active tap. */
.filter-chip.active{
  background: var(--accent);
  border-color: var(--accent);
  color: #0A0B0D;
}

.leagues{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.league{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  scroll-margin-top: 16px;
}

.league-tab{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--hairline);
  display:flex;
  align-items:center;
  justify-content: space-between;
}

.league-tab-left{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Standings-only header layout: the title gets its own top line (it
   can run long, e.g. "English Premier League"), and the season sits
   on the second line alongside the Scoring/Results chips instead of
   next to the title — same fix as the Teams-tab header (see
   .league-tab.board-league-tab above): a small/muted .n label paired
   with the bold title line read as mismatched, so it moved down to
   share a line with something the same size/weight instead — see
   leagueBlockHtml in js/board.js. */
.league-tab.standings-league-tab{
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.league-tab-top{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.league-tab-chips{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

/* Scoring + Results grouped together so space-between above only
   splits "chips" from "season" — without this wrapper, a league with
   both chips gave space-between three items to spread out, which
   pushed Results away from Scoring into the middle of the row instead
   of keeping the two chips together on the left. */
.league-tab-chips-left{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* Teams-tab header layout: title with the season directly beneath it
   on the left (wraps onto a second line for the longer league names,
   e.g. "National Football League"), the Upcoming/Last Result column
   label on its own on the right — bottom-aligned against the season
   line (both small/muted .n text) rather than the bold title line, so
   it doesn't read as paired with the title despite the size/weight
   mismatch — see renderBoard in js/board.js. */
.league-tab.board-league-tab{
  align-items: flex-end;
}

.board-league-tab .league-tab-left{
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.league-tab .n{
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.2px;
}

/* MLB/WNBA-only heads-up (see PRIOR_SEASON_DISPLAY_LEAGUES in
   js/data.js): the records below are real, but they're last season's
   — drafted teams don't start scoring until '27. Lives as a third line
   inside .league-tab.standings-league-tab's own column/gap, same
   italic/muted treatment as .no-live-note so it reads as an aside
   rather than an error. */
.prior-season-note{
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-sub);
  line-height: 1.4;
  margin-bottom: 14px;
}

.team{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 18px;
  position: relative;
  min-height: 44px;
}

.team + .team{
  border-top: 1px solid rgba(255,255,255,0.06);
}

.badge{
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
}

/* Real crests are transparent PNGs — a white backdrop keeps them
   legible regardless of how close a team's own accent color is to its
   crest's dominant color (see teamBadgeHtml in js/app.js). */
.badge.badge-crest{
  background: var(--badge-surface);
}

.badge img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

.team-name{
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.15;
  letter-spacing: -0.1px;
}

.team-sub{
  font-size: 11.5px;
  color: var(--text-sub);
  font-weight: 500;
  letter-spacing: 0.1px;
  margin-top: 1px;
}

.scoring-chip{
  flex: 0 0 auto;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scoring-chip:hover{
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-border);
}

@media (max-width: 1100px){
  .leagues{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px){
  :root{ --page-pad: 16px; }
  .leagues{ grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Interactive team rows ---- */
.team.clickable{
  cursor: pointer;
  transition: background 0.15s ease;
}

.team.clickable:hover{
  background: rgba(255,255,255,0.03);
}

.team.clickable:active{
  background: rgba(255,255,255,0.05);
}

.team-main{
  flex: 1;
  min-width: 0;
}

.row-status{
  flex: 0 0 auto;
  margin-left: auto;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 4px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.row-status.w{ background: var(--win-soft); color: var(--win); }
.row-status.l{ background: var(--loss-soft); color: var(--loss); }
.row-status.d{ background: var(--draw-soft); color: var(--draw); }
.row-status.next{
  background: rgba(255,255,255,0.06);
  color: var(--text-sub);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
}
.row-status.live{
  background: var(--live-soft);
  color: var(--live);
}

/* ---- Modal ---- */
.modal-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6,7,9,0.6);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 300;
}

.modal-overlay.open{
  display: flex;
}

.modal{
  background: var(--sheet);
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  max-width: 400px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}

@media (max-width: 700px){
  .modal-overlay{
    align-items: flex-end;
    padding: 0;
  }

  .modal{
    max-width: none;
    max-height: 88vh;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -24px 64px rgba(0,0,0,0.55);
    padding-bottom: env(safe-area-inset-bottom);
    animation: sheet-up 0.22s ease-out;
  }

  .modal::before{
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.18);
    margin: 10px auto 0;
  }
}

@keyframes sheet-up{
  from{ transform: translateY(24px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.modal-accent{
  height: 6px;
  width: 100%;
}

.modal-head{
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 22px 16px;
  position: relative;
}

.modal-head .badge{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  font-size: 13px;
}

.modal-head h2{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.3px;
}

.modal-head .modal-sub{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 500;
  margin-top: 3px;
}

.modal-close{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  cursor: pointer;
  padding: 0;
}

.modal-close svg{ width: 14px; height: 14px; }

.modal-close:hover{ color: var(--text); background: rgba(255,255,255,0.1); }

.stat-strip{
  display: flex;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.stat-cell{
  flex: 1;
  text-align: center;
  padding: 14px 6px;
}

.stat-cell + .stat-cell{
  border-left: 1px solid var(--hairline);
}

.stat-cell .num{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.3px;
}

.stat-cell .lbl{
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 3px;
}

.modal-body{
  padding: 18px 22px 22px;
}

.modal-section-title{
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.form-list{
  margin-bottom: 20px;
}

.form-item{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
}

.form-pill{
  flex: 0 0 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 10px;
}

.form-pill.w{ background: var(--win-soft); color: var(--win); }
.form-pill.d{ background: var(--draw-soft); color: var(--draw); }
.form-pill.l{ background: var(--loss-soft); color: var(--loss); }

/* Last-5 form row (EPL, ahead of the detailed match line below it) —
   same .form-pill circles as the detailed row, just side by side with
   no detail text. */
.form-strip{
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.form-detail{
  font-size: 13px;
  font-weight: 600;
  flex: 1;
}

.form-detail .opp{
  display: block;
}

.form-detail .meta{
  color: var(--text-sub);
  font-weight: 500;
  font-size: 11.5px;
  margin-top: 1px;
}

/* Right-hand column on a "Most Recent Result" row that has a
   boxscore-link (see renderForm in js/live-data.js) — score on top,
   the link right under it, both right-aligned as one unit at the far
   edge of the row (.form-detail's flex:1 above pushes it there, same
   as it already pushes a lone .form-score on a link-less row). */
.form-right{
  text-align: right;
}

.form-right .boxscore-link{
  justify-content: flex-end;
  margin-top: 2px;
}

.form-score{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.next-match{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.next-match .nm-teams{
  font-weight: 700;
  font-size: 14px;
}

.next-match .nm-when{
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 500;
  margin-top: 2px;
}

/* Venue + broadcast (EPL, from ESPN's real schedule data — see
   renderNext in js/live-data.js). Its own line under nm-when rather
   than folded in, since kickoff time + venue + network together can
   run long ("Fri, Sep 12 at 10:00 AM EDT · Home · Anfield · Peacock"). */
.next-match .nm-venue{
  font-size: 11px;
  color: var(--text-mute);
  font-weight: 500;
  margin-top: 1px;
}

.next-match .nm-prob{
  text-align: right;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.next-match .nm-prob .lbl{
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ---- Game Details entry chip (live MLB/CFB games — see renderNext in
   js/live-data.js) ---- Sits directly on .next-match's own row next to
   the score/period line (that row is already a space-between flex
   container) rather than in its own stacked card below, and reuses the
   same accent-pill treatment as an active .toggle-btn/.filter-chip so
   it reads as a lightweight inline action, not a separate section. */
.boxscore-chip{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.boxscore-chip:hover{
  background: var(--accent);
  color: #0A0B0D;
}

/* Same Game Details sheet, off the "Most Recent Result" row instead of
   the LIVE line (see renderForm in js/live-data.js) — a plain text
   link rather than a pill, since that row already has a form-pill,
   opponent, and score competing for attention; no background/border
   at all is the "very lightweight" end of this app's chip/pill/link
   spectrum. */
.boxscore-link{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.boxscore-link:hover{ text-decoration: underline; }

.boxscore-link .chev{ font-size: 13px; }

.boxscore-chip .chev{ font-size: 13px; }

/* ---- Game Details sheet — a second, wider overlay stacked on top of
   the team modal (see openGameDetail/closeGameDetail in
   js/live-data.js). Reuses .modal-overlay/.modal's own bottom-sheet
   behavior at mobile widths; only the desktop max-width differs. ---- */
.modal-overlay.stacked{ z-index: 310; }

.modal.modal-wide{ max-width: 560px; }

.gd-head{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 22px 14px;
  position: relative;
}

.gd-head.with-back{ padding-left: 50px; }

.gd-back{
  position: absolute;
  top: 16px;
  left: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  cursor: pointer;
  padding: 0;
  font-size: 17px;
}

.gd-back:hover{ color: var(--text); background: rgba(255,255,255,0.1); }

.gd-title{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
}

.gd-sub{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 600;
  margin-top: 3px;
}

.gd-situation{
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Only the linescore/box tables scroll horizontally if a narrow phone
   can't fit every inning column — the sheet itself never does (see the
   artifact-design responsive rule this app's own mockup work surfaced). */
.box-scroll{ overflow-x: auto; }

/* Reuses .standings-toggle/.toggle-btn (Standings tab's Divisions/
   Conference switch) for the away/home team switch under the
   linescore — same pill look, but repositioned as inline content
   rather than a full-width section header, since .modal-body already
   carries its own padding here. */
.gd-team-toggle{
  margin: 16px 0 14px;
  padding: 0;
  border-bottom: none;
}

/* ---- EPL's Game Details body (see the isSoccer branch in
   renderGameDetail, js/live-data.js) — goals/cards split into each
   team's own column instead of the linescore+box-table every other
   GAME_DETAIL_LEAGUES entry renders, since soccer has no innings/
   quarters to anchor a linescore to. ---- */
.gd-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 4px;
}

.gd-split-head{
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

.gd-split-dot{ width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.gd-split-dot.home{ background: var(--accent); }
.gd-split-dot.away{ background: var(--text-mute); }

.gd-event{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
}

.gd-event-min{
  flex: 0 0 auto;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--text-mute);
  min-width: 26px;
}

.gd-event-who{ color: var(--text); overflow-wrap: anywhere; }

.gd-ball-icon{ width: 12px; height: 12px; flex: 0 0 12px; color: var(--text-sub); }
.gd-ball-icon svg{ width: 100%; height: 100%; display: block; }

/* Same shape both goal/card markers share isn't the point here — a
   card reads as a card (portrait rectangle, tilted like a referee's
   own gesture) rather than another circular badge. Colors reuse
   existing tokens rather than introducing new ones: accent gold
   already reads as "yellow" and the live-red already reads as
   "stop/alert". */
.gd-card-chip{
  width: 9px; height: 13px; border-radius: 2px; flex: 0 0 9px;
  transform: rotate(-8deg);
}
.gd-card-chip.y{ background: var(--accent); }
.gd-card-chip.r{ background: var(--live); }

.gd-event-empty{
  font-size: 11.5px; color: var(--text-mute); font-weight: 500; padding: 6px 0;
}

.linescore-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.linescore-table th, .linescore-table td{
  padding: 6px 5px;
  text-align: center;
  color: var(--text-sub);
  border-bottom: 1px solid var(--hairline);
}

.linescore-table th{ font-weight: 700; color: var(--text-mute); font-size: 9.5px; letter-spacing: 0.3px; }
.linescore-table td.team{ text-align: left; font-weight: 700; color: var(--text); }
.linescore-table td.tot{ font-weight: 700; color: var(--text); }

.box-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.box-table th, .box-table td{
  padding: 6px 6px;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
}

.box-table th{ color: var(--text-mute); font-weight: 700; font-size: 9px; letter-spacing: 0.3px; }
.box-table td.name{ text-align: left; color: var(--text); font-weight: 600; }
.box-table td{ color: var(--text-sub); }

.scoring-list{
  display: flex;
  flex-direction: column;
}

.scoring-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}

.scoring-item + .scoring-item{
  border-top: 1px solid rgba(255,255,255,0.055);
}

.scoring-label{
  font-size: 13px;
  font-weight: 600;
}

.scoring-value{
  flex: 0 0 auto;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.scoring-value.pos{
  background: var(--win-soft);
  color: var(--win);
}

.scoring-value.neg{
  background: var(--loss-soft);
  color: var(--loss);
}

/* ---- Season tracker (achievement checklist, in team modal) ----
   The head (title + "Earned so far" summary + chevron) stays visible
   whether the body (the checklist itself) is collapsed or not — only
   trackerSectionHtml's `expanded` flag decides whether tracker-body
   renders at all, so there's no hidden-but-present markup to fight
   with in CSS. Sits under its own top margin (see #tracker-section
   below) so it doesn't crowd the "Last updated" line right above it. */
.tracker-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

#tracker-section{
  margin-top: 14px;
}

.tracker-total{
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 600;
}

.tracker-total b{
  color: var(--text);
  font-family: 'Space Grotesk', sans-serif;
  /* Explicit, not inherited — without this, the <b> tag's default
     "bolder" keyword resolves relative to .tracker-total's own 600,
     which lands on 900 (the CSS bolder-keyword table steps 600->900),
     noticeably heavier than the 700 used everywhere else in the app
     for an emphasized Space Grotesk number (.form-score, .tracker-value,
     .next-match .nm-teams) — that mismatch is what read as "too big". */
  font-weight: 700;
}

.tracker-chevron{
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: var(--text-mute);
  transition: transform 0.18s ease;
}

.tracker-chevron.open{
  transform: rotate(180deg);
}

.tracker-body{
  margin-top: 12px;
}

.tracker-list{
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.tracker-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 2px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  min-height: 44px;
}

.tracker-item + .tracker-item{
  border-top: 1px solid rgba(255,255,255,0.055);
}

.tracker-check{
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracker-check svg{ width: 11px; height: 11px; }

.tracker-item.achieved .tracker-check{
  background: var(--win);
  border-color: transparent;
}

.tracker-label{
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
}

.tracker-item.achieved .tracker-label{
  color: var(--text);
}

.tracker-value{
  flex: 0 0 auto;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1.5px solid rgba(255,255,255,0.12);
  color: var(--text-mute);
  background: transparent;
}

.tracker-item.achieved .tracker-value.pos{
  background: var(--win-soft);
  color: var(--win);
  border-color: transparent;
}

.tracker-item.achieved .tracker-value.neg{
  background: var(--loss-soft);
  color: var(--loss);
  border-color: transparent;
}

/* Rank-based rules (e.g. "2nd in EPL") that currently apply — amber
   instead of the green/red used for a real, locked-in fact, since
   these read straight off today's table and can still change before
   the season ends. */
.tracker-item.provisional .tracker-check{
  background: var(--provisional);
  border-color: transparent;
}

.tracker-item.provisional .tracker-label{ color: var(--text); }

.tracker-item.provisional .tracker-value{
  background: var(--provisional-soft);
  color: var(--provisional);
  border-color: transparent;
}

.provisional-tag{
  display: inline-block;
  margin-left: 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--provisional);
  background: var(--provisional-soft);
  border: 1px solid var(--provisional-border);
  border-radius: 20px;
  padding: 2px 6px;
  vertical-align: middle;
}

.provisional-note{
  display: inline-block;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--provisional-border);
  color: var(--provisional);
  font-weight: 600;
}

.tracker-item.readonly{ cursor: default; }

.tracker-manage-link{
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 2px 2px;
  border: none;
  border-top: 1px solid rgba(255,255,255,0.055);
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
}

/* ---- League Facts (EPL achievements, marked from the Results modal) ---- */
.league-facts-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fact-row + .fact-row{
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.055);
}

.fact-row-top{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fact-label{
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

.fact-auto-tag{
  flex: 0 0 auto;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--win);
  background: var(--win-soft);
  border-radius: 20px;
  padding: 2px 7px;
}

.fact-pts{
  flex: 0 0 auto;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.fact-pts.pos{ background: var(--win-soft); color: var(--win); }
.fact-pts.neg{ background: var(--loss-soft); color: var(--loss); }

.fact-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.fact-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 4px 8px 4px 4px;
}

.fact-chip-badge{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 8.5px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.14);
}

.fact-chip-owner{
  color: var(--text-sub);
  font-weight: 600;
}

.fact-chip-x{
  border: none;
  background: none;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 2px;
  font-family: inherit;
}

.fact-chip-x:hover{ color: var(--loss); }

.fact-empty{
  font-size: 12px;
  color: var(--text-mute);
  font-style: italic;
}

.fact-picker{
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 8px 10px;
}

/* ---- Live data additions ---- */
.live-badge{
  display:inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--win);
  background: var(--win-soft);
  border-radius: 20px;
  padding: 2px 7px;
  vertical-align: middle;
}

.live-badge.err{
  color: var(--loss);
  background: var(--loss-soft);
}

/* Modal-head season-phase badge (see seasonStatus/renderSeasonBadge in
   js/live-data.js) — same soft-badge shape as .live-badge, one tint
   per phase so Pre/In/Post-Season and Season Complete read apart at a
   glance without needing the label alone to carry it. */
.season-badge{
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 20px;
  padding: 2px 7px;
  vertical-align: middle;
  white-space: nowrap;
}
.season-badge.pre{ color: var(--provisional); background: var(--provisional-soft); }
.season-badge.in{ color: var(--win); background: var(--win-soft); }
.season-badge.post{ color: var(--accent); background: var(--accent-soft); }
.season-badge.complete{ color: var(--record); background: var(--record-soft); }

/* EPL qualification-zone tag (Champions League/Europa League/
   Relegation) — color and background come from ESPN's own note.color
   per team (see softZoneTint/renderStats in js/live-data.js): a
   low-alpha tint of that color behind full-strength text, same
   soft-badge look as .live-badge, rather than a solid pastel fill. */
.zone-tag{
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 20px;
  padding: 2px 7px;
  vertical-align: middle;
  white-space: nowrap;
}

.no-live-note{
  font-size: 13px;
  color: var(--text-sub);
  font-style: italic;
  line-height: 1.5;
  padding: 6px 0 10px;
}

.loading-note{
  font-size: 13px;
  color: var(--text-sub);
  padding: 4px 0;
}

.updated-note{
  font-size: 10.5px;
  color: var(--text-mute);
  text-align: right;
  margin-top: 10px;
  letter-spacing: 0.1px;
}

/* ---- Standings view (real per-league tables) ---- */
/* Pinned so the league filter stays reachable while scrolling a long
   table — offset by the safe-area inset (not a flat 0) so it settles
   below the notch/status bar instead of sliding under it.
   Bleeds out to the actual screen edges via a negative margin matching
   body's own horizontal padding (--page-pad), then re-adds that as
   padding so the chips inside still line up with everything else on
   the page — without this, the sticky bar's opaque background stopped
   short of the edges (inset by body's padding like everything else),
   and standings rows scrolling up underneath it were visible through
   that gap on iOS Safari, which also never fully repaints a plain
   `position: sticky` element as its own layer during scroll — the
   translateZ(0) below forces that, which is the standard fix for
   content flashing/bleeding through a sticky bar on iOS. */
.standings-filter-row{
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 5;
  margin: 0 calc(-1 * var(--page-pad));
  padding: 0 var(--page-pad);
  background: var(--bg);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.standings-toggle{
  display: flex;
  gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
}

/* NFL's second toggle row (Divisions/Full Conference), stacked right
   under the first (AFC/NFC/Person) — pulled closer so the pair reads as
   one nested choice ("which conference, then how to view it") instead
   of two unrelated toggle bars. The first row's own border-bottom would
   otherwise land in the seam between the two rows, reading as a stray
   line cutting behind the pills instead of a clean divider before the
   team list — so drop it whenever a subtoggle row follows. */
.standings-toggle:has(+ .standings-subtoggle){
  border-bottom: none;
}

.standings-subtoggle{
  padding-top: 0;
}

.toggle-btn{
  flex: 1;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: var(--text-sub);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}

.toggle-btn.active{
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.standings-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 900px){
  .standings-grid{ grid-template-columns: 1fr; }
}

.standings-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  min-height: 44px;
}

.standings-row.clickable{ cursor: pointer; }
.standings-row.clickable:hover{ background: rgba(255,255,255,0.03); }

.standings-row + .standings-row{
  border-top: 1px solid rgba(255,255,255,0.06);
}

.standings-row .team-name{ font-size: 15px; }

.standings-rank{
  flex: 0 0 18px;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-mute);
}

/* NFL Standings' "Divisions" view: a small label row ("AFC North")
   ahead of that division's 4 team rows, since — unlike EPL's single
   table or CFB's flat Top 25 — there's no one ranking that spans all
   32 teams. */
.standings-group-header{
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(255,255,255,0.02);
  padding: 10px 18px 6px;
}

.standings-group-header + .standings-row{ border-top: none; }

/* Person view's real W-D-L record chip — its own color (not the gold
   used by the League view's "drafted by" chip below, or the "Person"
   toggle) so all three don't read as the same signal. */
.person-record-chip{
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--record);
  background: var(--record-soft);
  border: 1px solid var(--record-border);
}

.drafted-by-chip{
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1px;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
}

/* ---- Overall view (cross-drafter leaderboard) ----
   List (level 1) shows confirmed points only — a stacked league-mix bar
   sized/colored by each league's confirmed points, plus the confirmed
   total. Tapping a row expands it in place (level 1.5): confirmed
   points per league, top confirmed awards, and a note pointing at any
   provisional points sitting in the full breakdown (level 2), which
   never touches the ranking number. */

/* -- Real/Simulated data toggle + banner --
   TEMPORARY: a preview aid for showing the page's shape before the
   season produces real results. Safe to delete this block (and the
   matching "TEMPORARY" block in js/app.js, and the toggle markup in
   index.html) once real data makes it unnecessary. */
.ob-mode{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-mode-label{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.ob-mode-switch{
  display: flex;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.ob-mode-btn{
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
}
.ob-mode-btn.active{
  color: var(--accent);
  background: var(--accent-soft);
}
.ob-sim-banner{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

/* -- Legend -- */
.ob-legend{ margin-bottom: 14px; }
.ob-legend-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
}
.ob-legend-toggle-dots{
  display: flex;
  gap: 3px;
  flex: 0 0 auto;
}
.ob-legend-toggle-dots span{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.ob-legend-panel{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.ob-legend-chip{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.ob-legend-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* -- List -- */
.ob-list{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
}
.ob-row{ border-bottom: 1px solid var(--hairline); }
.ob-row:last-child{ border-bottom: none; }
.ob-row.leader{ background: var(--accent-soft); }
.ob-row.expanded{ background: var(--surface-2); }
.ob-row.current .ob-name{ color: var(--accent); }

.ob-row-head{
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  min-height: 44px;
  cursor: pointer;
}
.ob-rank{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: var(--text-mute);
}
.ob-row.leader .ob-rank{ color: var(--accent); }
.ob-row-main{ min-width: 0; }
.ob-name{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ob-mix-line{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.ob-mix{
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
}
.ob-mix-seg{ height: 100%; }
.ob-total{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--win);
}
.ob-total.neg{ color: var(--loss); }
.ob-total.zero{ color: var(--text-mute); }

@media (max-width: 480px){
  .ob-row-head{
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px 10px;
  }
  .ob-rank{ font-size: 13px; }
  .ob-name{ font-size: 16px; }
  .ob-mix{ height: 9px; border-radius: 4px; }
  .ob-total{ font-size: 17px; }
}

/* -- Inline expand -- */
.ob-expand{
  padding: 2px 14px 16px;
  border-top: 1px solid var(--hairline);
}
.ob-section-title{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 16px 0 8px;
}
.ob-lg-row{
  display: grid;
  grid-template-columns: 8px 74px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.ob-lg-dot{
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}
.ob-lg-label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  white-space: nowrap;
}
.ob-lg-track{
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.ob-lg-track span{
  display: block;
  height: 100%;
}
.ob-lg-pts,
.ob-award-pts,
.ob-rule-pts,
.ob-card-pts{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  color: var(--win);
}
.ob-lg-pts{ font-size: 13px; }
.ob-award-pts,
.ob-rule-pts{ font-size: 15px; }
.ob-card-pts{ font-size: 22px; }
.ob-lg-pts.neg, .ob-award-pts.neg, .ob-rule-pts.neg, .ob-card-pts.neg{ color: var(--loss); }
.ob-lg-pts.zero, .ob-award-pts.zero, .ob-rule-pts.zero, .ob-card-pts.zero{ color: var(--text-mute); }

.ob-award-list{ display: flex; flex-direction: column; gap: 8px; }
.ob-award{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
}
.ob-award-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  text-wrap: pretty;
}
.ob-award-meta,
.ob-rule-meta{
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 4px;
}
.ob-empty{
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
  padding: 2px 0 4px;
}

/* The one place provisional shows on the list: a pointer to the
   breakdown, never folded into a drafter's headline number. */
.ob-pending{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: var(--provisional-soft);
  border: 1px solid var(--provisional-border);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--text-sub);
}
.ob-stripe-swatch{
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
  background: repeating-linear-gradient(115deg, var(--provisional) 0 3px, var(--provisional-soft) 3px 6px);
}

.ob-detail-link{
  display: block;
  width: 100%;
  margin-top: 14px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  color: var(--accent);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ob-detail-link:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.ob-foot{
  padding: 16px 4px 8px;
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.5;
}

/* -- Detail -- */
.ob-back{
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: var(--text-sub);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 2px;
  cursor: pointer;
}
.ob-back:hover{ color: var(--text); }
.ob-detail-head{
  padding: 4px 2px 18px;
  border-bottom: 1px solid var(--hairline);
}
.ob-detail-rank{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.ob-detail-name{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 6px 0 0;
}
.ob-detail-total{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.ob-detail-total b{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.ob-detail-total b.neg{ color: var(--loss); }
.ob-detail-total span{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Confirmed vs provisional: texture, not just hue — the stripe reads
   before any color is parsed. */
.ob-split{
  display: flex;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-top: 18px;
}
.ob-split-confirmed{ background: var(--win); }
.ob-split-provisional{
  background: repeating-linear-gradient(115deg, var(--provisional) 0 5px, var(--provisional-soft) 5px 10px);
}
.ob-split-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
}
.ob-pill{
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.ob-pill i{
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.ob-pill.confirmed{
  background: var(--win-soft);
  border: 1px solid rgba(95, 184, 138, 0.28);
}
.ob-pill.confirmed i{ background: var(--win); }
.ob-pill.provisional{
  background: var(--provisional-soft);
  border: 1px solid var(--provisional-border);
}
.ob-pill.provisional i{
  background: repeating-linear-gradient(115deg, var(--provisional) 0 3px, var(--provisional-soft) 3px 6px);
}
.ob-split-note{
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.5;
  text-wrap: pretty;
}

.ob-cards{ display: flex; flex-direction: column; gap: 10px; }
.ob-card{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px;
}
.ob-card-head{
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.ob-card-main{ min-width: 0; }
.ob-card-title{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.ob-card-sub{
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 2px;
  line-height: 1.4;
}
.ob-rule-list{
  margin-top: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 4px;
}
.ob-rule{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  cursor: pointer;
}
.ob-rule-main{ min-width: 0; }
.ob-rule-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  text-wrap: pretty;
}
.ob-prov-tag{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--provisional);
  border: 1px solid var(--provisional-border);
  border-radius: 4px;
  padding: 2px 5px;
}
.ob-card-prov{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.4;
}

/* ---- Views + bottom tab bar ---- */
.view{ display: none; }
.view.active{ display: block; }

/* Tiny build marker in the corner so you can confirm a device is
   running the latest deploy rather than a stale cached copy. */
.build-tag{
  position: fixed;
  left: 10px;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-mute);
  opacity: 0.45;
  pointer-events: none;
  z-index: 150;
}

/* Total height is --nav-h PLUS the safe-area inset, not just --nav-h
   with the inset squeezed inside it (which is what a plain `height:
   var(--nav-h)` gave, since everything here is box-sizing: border-box —
   padding-bottom ate into the box instead of extending it). That left
   the tab icons/labels cramped into less than --nav-h of real space on
   any notched/home-indicator iPhone, and the bar's top edge sitting
   well below where .build-tag already assumed it would be (that
   marker's own `bottom` calc was already written for a bar this tall —
   see above) — the mismatch is what read as the bar looking short/cut
   off just above it. */
.tab-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(19,20,24,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--hairline);
  display: flex;
  z-index: 200;
}

.tab-btn{
  flex: 1;
  border: none;
  background: none;
  color: var(--text-mute);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.tab-btn svg{ width: 22px; height: 22px; }

.tab-label{
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1px;
}

.tab-btn.active{ color: var(--accent); }