/* text-size-adjust: without the opt-out, iOS Safari "font boosting" inflates text
   block-by-block (leaving images and fixed boxes alone), which shredded the
   opportunity cards on a real phone — words wrapping one per line, the player name
   ellipsized to nothing. Every mainstream reset carries this line; ours didn't. */
html {
  color-scheme: dark; background: var(--bg);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-1);
  background: radial-gradient(1100px 480px at 10% -10%, rgba(255,122,26,.10), transparent 55%), var(--bg);
  background-attachment: fixed;
  font-family: var(--font);
}
a { color: inherit; }
.site-header {
  max-width: 1160px;
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
}
.site-brand { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; }
.site-brand-name { color: var(--text-1); font-size: 1.2rem; font-weight: 850; letter-spacing: -.025em; }
.site-brand-name b { color: var(--brand); }
.site-date { color: var(--text-4); font-size: .62rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.site-header nav { display: flex; align-items: center; gap: 1rem; color: var(--text-3); font-size: .82rem; }
.site-header nav a { text-decoration: none; }
.site-header nav .active { color: var(--text-1); }
.nav-day-toggle { display: grid; grid-template-columns: 1fr 1fr; min-width: 13rem; padding: .2rem; border: 1px solid var(--divider); border-radius: var(--r-pill); background: var(--surface-2); }
.nav-day-toggle a { padding: .4rem .8rem; border-radius: var(--r-pill); text-align: center; font-weight: 750; }
.nav-day-toggle a.active { color: var(--on-brand); background: var(--brand-grad); }
.performance-link { font-weight: 700; }
.site-header nav .performance-link.active { color: var(--brand-2); }
.nav-future { opacity: .5; cursor: default; }
.site-shell { max-width: 1160px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }
.eyebrow { color: var(--text-3); font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .45rem; }
.hero-copy { color: var(--text-3); margin: .2rem 0 0; }
.freshness-strip { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.35rem; color: var(--text-3); font-size: .78rem; }
.freshness-below-games { margin-top: .85rem; }
.freshness-strip span:not(:last-child)::after { content: "·"; margin-left: .65rem; color: var(--text-4); }
.public-chip { margin-left: auto; padding: .25rem .55rem; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-2); font-weight: 700; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.filter-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-pill, .thr-pill, .games-toggle {
  text-decoration: none; border: 1px solid var(--divider); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2); padding: .5rem .85rem;
  font-size: .85rem; font-weight: 650; transition: .16s ease;
}
.games-toggle { font-family: inherit; cursor: pointer; }
.schedule-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.filter-pill:hover, .thr-pill:hover, .games-toggle:hover { transform: translateY(-1px); color: var(--text-1); }
.filter-pill:focus-visible, .thr-pill:focus-visible, .games-toggle:focus-visible,
.site-header a:focus-visible, .text-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.filter-pill.active, .thr-pill.active { color: var(--on-brand); border-color: transparent; background: var(--brand-grad); }

/* Game-state filter — one segmented control in place of two independent booleans on the
   same axis. Housed like the day toggle so the two read as the same kind of control. */
.state-filter {
  display: inline-flex; padding: .2rem; gap: .15rem;
  border: 1px solid var(--divider); border-radius: var(--r-pill); background: var(--surface-2);
}
.state-filter button {
  font-family: inherit; cursor: pointer; border: 0; background: none; color: var(--text-3);
  padding: .38rem .7rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 700;
  transition: .16s ease;
}
.state-filter button:hover { color: var(--text-1); }
.state-filter button.active { color: var(--on-brand); background: var(--brand-grad); }
.state-filter button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.opportunity-section { margin-top: 2rem; }
.thresholds { display: flex; align-items: center; gap: .35rem; color: var(--text-3); font-size: .75rem; }
.thr-pill { padding: .32rem .58rem; }
.prop-pills { margin: .8rem 0; }
.focus-chip { display: flex; justify-content: space-between; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--brand-soft); margin-bottom: .8rem; }
.focus-chip a { color: var(--brand-2); text-decoration: none; }
.notice, .empty-card { padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--surface-1); color: var(--text-2); margin: 1rem 0; }
.notice p { margin: .25rem 0; }
.notice.warning { border-left: 3px solid var(--red); }
.empty-card h2 { margin-top: 0; }
.quiet-note { color: var(--text-3); font-size: .82rem; }
.site-footer { max-width: 1160px; margin: 0 auto; padding: 1.25rem 1.5rem 2rem; color: var(--text-4); border-top: 1px solid var(--hairline); font-size: .78rem; }
@media (max-width: 720px) {
  .site-header { align-items: center; padding-inline: .9rem; }
  .site-header nav { gap: .55rem; }
  .nav-day-toggle { min-width: 9.25rem; }
  .nav-day-toggle a { padding: .36rem .48rem; }
  .performance-link { font-size: .74rem; }
  .hero-row { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .filter-row { align-items: flex-start; flex-direction: column; gap: .55rem; margin-bottom: .7rem; }
  /* Eight leagues are registered; in October MLB playoffs, NFL, NCAAF, NBA and NHL can
     all be live at once. Wrapping would push the first card off the screen, so the row
     scrolls sideways and stays one row deep however many leagues are playing. */
  .filter-row .filter-pills {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    align-self: stretch; padding-bottom: .1rem;
  }
  .filter-row .filter-pills::-webkit-scrollbar { display: none; }
  .filter-row .filter-pill { flex: 0 0 auto; }
  .schedule-actions { align-self: stretch; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
  /* Chrome occupied ~42% of the viewport before the first card. Tightening the pill
     rhythm buys that back — still above the 44px touch target. */
  .filter-pill, .thr-pill, .games-toggle { padding: .42rem .72rem; font-size: .8rem; }
  .state-filter button { padding: .34rem .55rem; font-size: .76rem; }
  .thresholds > span { display: none; }
  .site-shell { padding: 1.35rem .9rem 3rem; }
}

/* Django Results + Performance */
.analytics-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.text-link { color: var(--brand-2); text-decoration: none; font-weight: 700; font-size: .88rem; }
.date-nav { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.date-arrow { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); background: var(--surface-2); text-decoration: none; font-size: 1.3rem; }
.date-arrow.disabled { opacity: .35; }
.date-form { display: flex; align-items: center; gap: .55rem; }
.date-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.date-form input, .search-sort-row input, .search-sort-row select {
  min-height: 2.35rem; border: 1px solid var(--divider); border-radius: var(--r-sm);
  background: var(--surface-1); color: var(--text-1); padding: 0 .75rem; font: inherit;
}
.date-form button, .search-sort-row button {
  min-height: 2.35rem; border: 0; border-radius: var(--r-pill); padding: 0 .9rem;
  background: var(--brand-grad); color: var(--on-brand); font-weight: 750; cursor: pointer;
}
.analytics-filters { display: grid; gap: .65rem; padding: .85rem; margin-bottom: 1rem; border-radius: var(--r-md); background: rgba(255,255,255,.025); }
.analytics-filter-group { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.filter-label { flex: 0 0 6rem; color: var(--text-3); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.analytics-filter-group .filter-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.analytics-filter-group .filter-pills::-webkit-scrollbar { display: none; }
.analytics-filter-group .filter-pill, .compact-pills .filter-pill, .performance-controls .filter-pill { white-space: nowrap; padding: .36rem .68rem; font-size: .78rem; }
.analytics-section { margin-top: 2rem; }
.analytics-section > h2 { margin: 0 0 .7rem; font-size: 1.15rem; }
.section-read { color: var(--text-2); margin: -.2rem 0 .8rem; }
.web-market-table { overflow: hidden; border-radius: var(--r-md); background: var(--surface-1); }
.web-market-row { display: grid; grid-template-columns: 1.5fr repeat(4, .75fr); gap: .75rem; padding: .7rem .9rem; border-bottom: 1px solid var(--divider); color: var(--text-2); font-size: .84rem; }
.web-market-row:last-child { border-bottom: 0; }
.web-market-head { color: var(--text-4); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.web-market-row small { color: var(--text-4); }
.search-sort-row { display: grid; grid-template-columns: minmax(0, 1fr) 10rem auto; gap: .6rem; margin-bottom: .8rem; }
.performance-controls { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-bottom: 1rem; }
.performance-controls > div { display: flex; align-items: center; gap: .65rem; }
.performance-controls .filter-label { flex-basis: auto; }
.compact-pills { margin-bottom: .8rem; }
.daily-summary, .perf-headline { margin-top: 1rem; }
.cohort-comparison { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: .65rem 0 1rem; }
.cohort-cell { display: grid; grid-template-columns: 1fr auto auto auto; align-items: baseline; gap: .55rem; padding: .65rem .75rem; border-radius: var(--r-sm); background: var(--surface-1); color: var(--text-3); font-size: .72rem; }
.cohort-cell strong, .cohort-cell b { color: var(--text-1); }
.cohort-cell small { color: var(--text-4); }

/* The one-line synthesized read: "what are we good at right now" ahead of the tables
   that back it up. Left border in the brand color gives it a headline weight the plain
   surface cards below don't have. */
.perf-takeaway { background: var(--surface-1); border: 1px solid var(--divider);
  border-left: 3px solid var(--brand); border-radius: var(--r-md); padding: .85rem 1.05rem;
  margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.55; color: var(--text-2); box-shadow: var(--edge-hi); }
.perf-takeaway strong { color: var(--text-1); }

.perf-lead > h2 { color: var(--text-1); }

/* Headline record, cohort split and trend read as one compact band instead of three
   stacked cards — the surrounding tables carry plenty of visual weight on their own. */
.perf-scoreboard { margin: 1.6rem 0 0; }
.perf-scoreboard .perf-headline { margin-bottom: .3rem; }
.perf-scoreboard .cohort-comparison { margin: 0 0 .3rem; }
.perf-scoreboard .perf-compare { margin: 0; }

.deep-dive-label { margin: 1.8rem 0 -.4rem; padding-top: 1.3rem; border-top: 1px solid var(--divider);
  color: var(--text-4); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }

.market-pulse-section { margin-top: 1.35rem; }
.market-trend-scroll { overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.market-trend { min-width: calc(12rem + var(--trend-cols) * 4rem); border: 1px solid var(--divider); border-radius: var(--r-md); overflow: hidden; background: var(--surface-1); }
/* Market, then the period summary, then slates newest-first. The summary sits second
   so the number a reader wants is on screen before any scrolling. */
.mtp-row { display: grid; grid-template-columns: minmax(8.5rem, 1.35fr) minmax(5.4rem, .9fr) repeat(var(--trend-cols), minmax(3.35rem, .7fr)); align-items: stretch; border-bottom: 1px solid var(--divider); }
.mtp-row:last-child { border-bottom: 0; }
.mtp-row > span { min-height: 3.25rem; padding: .42rem .35rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; border-right: 1px solid var(--divider); text-align: center; }
.mtp-row > span:last-child { border-right: 0; }
.mtp-head > span { min-height: 2.2rem; color: var(--text-4); font-size: .62rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.018); }
.mtp-date b { color: var(--text-2); font-size: .72rem; }
.mtp-market { align-items: flex-start !important; flex-direction: row !important; justify-content: flex-start !important; gap: .4rem !important; padding-left: .7rem !important; color: var(--text-2); font-size: .76rem; font-weight: 750; text-align: left !important; }
.mtp-market i { font-style: normal; }
.mtp-cell b, .mtp-total b { color: var(--text-1); font-size: .82rem; }
.mtp-cell small, .mtp-total small { color: var(--text-4); font-size: .55rem; }
.mtp-cell.above { background: rgba(255,126,32,.16); }
.mtp-cell.near { background: rgba(255,255,255,.035); }
.mtp-cell.below { background: rgba(255,92,92,.10); }
.mtp-cell.empty { color: var(--text-4); background: rgba(255,255,255,.012); }
.mtp-cell.small { opacity: .55; }
.mtp-market { position: sticky; left: 0; z-index: 1; background: var(--surface-1); }
.mtp-head .mtp-market, .mtp-head > span:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-1); }
.mtp-total { background: rgba(255,255,255,.025); }
.mtp-total small.up { color: var(--brand-2); }
.mtp-total small.down { color: #ff8b82; }
.mtp-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .45rem; color: var(--text-4); font-size: .62rem; }
.mtp-legend span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .28rem; border-radius: 2px; vertical-align: -.05rem; background: var(--surface-2); }
.mtp-legend .above::before { background: rgba(255,126,32,.6); }
.mtp-legend .near::before { background: rgba(255,255,255,.18); }
.mtp-legend .below::before { background: rgba(255,92,92,.42); }
.result-date-pill { display: inline-flex; flex-direction: column; align-items: center; gap: .08rem; }
.result-date-state { color: var(--text-4); font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.result-date-pill.active .result-date-state { color: currentColor; opacity: .78; }
.result-date-pill.missing:not(.active) { border-style: dashed; }
.result-date-pill.none:not(.active) { opacity: .7; }
.result-date-pill.pending:not(.active) .result-date-state { color: var(--brand-2); }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 1rem; color: var(--text-3); font-size: .82rem; }
.pagination a { color: var(--brand-2); text-decoration: none; font-weight: 700; }
.pagination a:last-child { text-align: right; }
.matchup-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; color: var(--text-4); font-size: .78rem; }
@media (max-width: 720px) { .matchup-toolbar { align-items: flex-start; flex-direction: column; } }
@media (max-width: 720px) {
  .analytics-hero { align-items: flex-start; flex-direction: column; }
  .analytics-filter-group { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .filter-label { flex-basis: auto; }
  .web-market-row { grid-template-columns: 1.4fr 1fr .8fr; }
  .web-market-row span:nth-child(4), .web-market-row span:nth-child(5) { display: none; }
  .search-sort-row { grid-template-columns: 1fr; }
  .performance-controls > div { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .cohort-comparison { grid-template-columns: 1fr; }
}
/* Phones: the nav stacks to mirror the brand — day toggle over Performance, against
   "Sports Today" over the date. The brand already sets the header's height with two
   lines, so the second nav line costs nothing, and moving Performance out of row one
   gives the date the whole left column. That replaces a `max-width: 7.5rem` ellipsis
   that had been truncating it to "WEDNESDAY, AUG…". */
@media (max-width: 560px) {
  .site-header { align-items: flex-start; }
  .site-header nav.compact-nav {
    flex-direction: column; align-items: flex-end; gap: .3rem; flex: 0 0 auto;
  }
  .site-brand { min-width: 0; flex: 1 1 auto; }
  .site-date { white-space: nowrap; }
}
@media (max-width: 430px) {
  .site-brand-name { font-size: 1rem; }
  .site-date { font-size: .58rem; letter-spacing: .05em; }
  .nav-day-toggle { min-width: 7.9rem; }
  .nav-day-toggle a { padding-inline: .34rem; font-size: .7rem; }
  .performance-link { font-size: .68rem; }
}

/* The `hidden` property is only as strong as the UA rule behind it, and an author
   `display` declaration beats the UA stylesheet at equal specificity. `.game-card` sets
   `display: flex` and `.schedule-grid` sets `display: grid`, so `element.hidden = true`
   set a property that never applied — the game-state filter (and the "Hide completed"
   toggle before it) changed its own label and hid nothing. `!important` is right here:
   `hidden` is a semantic state, not a style suggestion. */
/* Market coverage — measured edge against how much of it clears the floor. */
.mc-table { display: flex; flex-direction: column; gap: 2px; margin-top: .4rem; }
.mc-row { display: grid; grid-template-columns: minmax(7rem, 1.3fr) 1fr 1fr minmax(4rem, .55fr);
  gap: .6rem; align-items: center; padding: .5rem .7rem; border-radius: var(--r-sm);
  background: var(--surface-1); font-size: .82rem; }
.mc-head { background: transparent; color: var(--text-4); font-size: .68rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .04em; }
.mc-flag { margin-left: .4rem; padding: .05rem .35rem; border-radius: var(--r-pill);
  background: rgba(255,122,26,.16); color: var(--brand-2); font-size: .62rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 560px) {
  .mc-row { grid-template-columns: minmax(6rem, 1.2fr) 1fr 1fr; }
  .mc-row > span:nth-child(4), .mc-head > span:nth-child(4) { display: none; }
  /* .et-seg's nowrap+ellipsis is tuned for a single text run; with the Starved badge
     as a second flex child it just clips the badge's label instead of eliding it. */
  .mc-row .et-seg { white-space: normal; overflow: visible; text-overflow: clip; flex-wrap: wrap; row-gap: .2rem; }
}

/* Simplified matchup page — leagues that arrive as a schedule and nothing else. */
.simple-hero { padding: 1.1rem 1.2rem; margin: 1rem 0; border-radius: var(--r-md);
  background: var(--surface-1); box-shadow: var(--edge-hi); }
.sh-league { color: var(--text-4); font-size: .72rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .05em; }
.sh-teams { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: .55rem; }
.sh-side { display: flex; align-items: baseline; gap: .5rem; }
.sh-name { color: var(--text-1); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.sh-rec { color: var(--text-4); font-size: .82rem; font-weight: 700; }
.sh-at { color: var(--text-4); font-size: .9rem; }
.sh-time, .sh-score { color: var(--text-3); font-size: .86rem; font-weight: 650; margin-top: .5rem; }
.sh-score { color: var(--text-1); font-weight: 750; }
@media (max-width: 560px) { .sh-teams { flex-direction: column; gap: .35rem; } }

[hidden] { display: none !important; }

/* --- accessibility utilities ------------------------------------------------------ */

/* Content that belongs in the document outline but not on screen. Clip rather than
   `display:none` or `visibility:hidden`, both of which remove it from the accessibility
   tree — which would defeat the point. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The nav renders before the slate, so a keyboard or switch user otherwise tabs through
   every filter pill and league toggle before reaching the first game. Hidden until
   focused, then pinned to the top-left. */
.skip-link {
  position: absolute;
  left: .5rem;
  top: -3rem;
  z-index: 100;
  padding: .6rem .9rem;
  background: var(--surface-2);
  color: var(--text-1);
  border-radius: var(--r-sm, 6px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: top var(--dur, .18s) var(--ease, ease);
}
.skip-link:focus { top: .5rem; }

/* `tabindex="-1"` on <main> lets the skip link move focus there; the outline it would
   otherwise draw on click is noise, but focus-visible keeps it for keyboard users. */
.site-shell:focus { outline: none; }
.site-shell:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* Readers who ask for less motion get less motion. The stylesheet animates a live-game
   dot and transitions several controls; none of it carries meaning that is lost when
   stilled. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}