/* -----------------------------
   PAGE BASE (overrides theme's #212121 body / #f2f2f2 content)
------------------------------ */

body {
  background: #f7f9fc;
  color: #334155;
}

/* Slate's link blue, #0F79D0, is 4.27:1 on this page's #f7f9fc and 4.11:1 on
   the #f1f5f9 panels - under AA for the body-size text most links are. A
   shade deeper clears it on every light ground (5.2:1 on the page). The dark
   theme sets its own link colour further down. */
a {
  color: #0b6bbd;
}

/* The theme sets section, article, details... {display:block}, which beats
   the browser's own [hidden] rule: Home's hidden Tonight card showed as an
   empty bar (the 2026-10-02 audit). */
[hidden] {
  display: none !important;
}

/* Room for the scrollbar whether or not the page scrolls yet. On a desktop
   with classic scrollbars (Windows), a page that grows past the screen after
   its script draws - the trade analyzer, the profile - gained a scrollbar and
   shifted everything sideways by its width (layout shift 0.26 on /cfb/trade/,
   2026-10-02). Phones' overlay scrollbars take no room, so nothing changes there. */
html {
  scrollbar-gutter: stable;
}

/* Slate draws every table as a grid of 1px #373737 - `table` and `td` on all
   four sides. Most tables here rule only the line under a row, so the theme's
   sides and tops came through as heavy black bars: down the fantasy
   standings, the stakes and recap-accuracy tables, history, draft review,
   schedule difficulty, the stats tables, the WNBA pickups, and as a black
   frame round the power tables (the 2026-10-02 phone audit). The base is a
   light rule under each row; a table that wants a grid draws one in its own
   CSS, which outranks these bare element selectors. */
table {
  border: 0;
}

td,
th {
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-color: #e2e8f0;
}

@media (prefers-color-scheme: dark) {
  td,
  th {
    border-bottom-color: #2b3852;
  }
}

/* De-emphasised text: ranks, records, projections, venues, column notes.
   It was #94a3b8 across the site, 2.4-2.6:1 on the light grounds - the
   figures that were meant to be quiet were unreadable in daylight. This
   clears 4.8:1 on every light surface (white, #f7f9fc, #f1f5f9, #eef2f7);
   dark mode keeps #94a3b8, which is 5.9:1 on its cards. Generated pages use
   it as var(--gs-muted, #5d6b7e). */
:root {
  --gs-muted: #5d6b7e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gs-muted: #94a3b8;
  }
}

#main_content_wrap {
  background: #f7f9fc;
  border-top: none;
  border-bottom: none;
}

/* -----------------------------
   SITE HEADER (light sticky bar)
------------------------------ */

/* No backdrop-filter here: it would create a containing block and pin the
   fixed bottom-nav (rendered inside the nav include) to the header. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
}

.site-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
}

.site-brand {
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  color: #1B2340 !important;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The theme underlines every link on hover and focus (a:hover, a:focus,
   which outranks .site-brand), and a tap leaves the logo focused on a phone. */
.site-brand:hover,
.site-brand:focus {
  text-decoration: none;
}

/* The orange rule between GORD and STATS, matching the app icon. Drawn rather
   than shipped as an image so it stays crisp and follows the theme. */
.site-brand span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-right: 8px;
  vertical-align: -0.12em;
  background: #EE8434;
  border-radius: 1px;
}

.site-brand span {
  color: #1B2340;
}

#site-header #nav {
  flex: 1;
  min-width: 0;
}

#site-footer {
  margin-top: 32px;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid #e5e7eb;
  text-align: center;
  color: var(--gs-muted);
  font-size: 0.82rem;
}

#site-footer p {
  margin: 0;
}

/* Slate paints `footer p, footer a` #f2f2f2 for its own dark footer bar. On
   this light page that was 1.1:1 - the footer was there but invisible - so
   the text takes the footer's colour back by id. */
#site-footer p,
#site-footer a {
  color: inherit;
}

/* The link to /how/, every explainer: a thumb's height, the footer's size. */
#site-footer .footer-how a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: underline;
}

#site-footer .visit-counter {
  margin-top: 4px;
  font-size: 0.76rem;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------
   NAV
------------------------------ */
.simple-nav a {
  margin-right: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #475569 !important;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}

.simple-nav a:hover {
  background: #f1f5f9;
  color: var(--accent-text, #A34F0A) !important;
}

.nav-inner {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.toggle-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.header-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.league-toggle {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.league-toggle a {
  text-decoration: none;
  color: #6b7280;
}

.league-toggle a.active {
  font-weight: 700;
  color: #111;
  border-bottom: 2px solid #111;
}

/* The phone styling for the nav rows themselves lives in MOBILE NAV at the
   bottom of this file. It used to be here, as a grid of soft #fafafa cards —
   which the dark theme then filled with near-white text (1.1:1, unreadable),
   and which forced every link to 110px whether it needed it or not, so both
   rows overflowed and had to be scrolled sideways. */
@media (max-width: 600px) {

  /* HEADER ROW */
  .header-row {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* TOGGLE */
  .league-toggle {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }
}

/* -----------------------------
   TABLE WRAPPER – prevents overflow
------------------------------ */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 14px auto 22px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  background: #fff;
}

.table-container .sticky-table {
  width: 100%;
  max-width: none;
}

#tweet-container {
  transition: opacity 0.5s ease;
}
.fade-out {
  opacity: 0;
}
.fade-in {
  opacity: 1;
}

.custom-inner {
  position: relative;
  width: 95%;
  max-width: 1600px;
  padding: 20px 10px;
  margin: 0 auto;
}

/* -----------------------------
   TABLE BASE STYLING
   ------------------------------ */

.sticky-table {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: auto;
}

.sticky-table table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse !important;

  /* THIS allows the table to shrink normally */
  table-layout: auto !important;

  font-family: monospace;
  margin-left: auto;
  margin-right: auto;
  font-size: inherit;
}

.sticky-table th {
  font-weight: 800;
  background: linear-gradient(90deg, #eff6ff, #f8fafc);
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

.sticky-table th,
.sticky-table td {
  font-size: inherit;

  /* Default: keep columns readable */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  min-width: 70px;
  /* prevents columns from collapsing to nothing */
  color: #334155;
}

.sticky-table td {
  background: white;
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
}

.sticky-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.sticky-table tbody tr:last-child td {
  border-bottom: none;
}

.sticky-table tbody tr:hover td {
  filter: brightness(0.97);
}

/* -----------------------------
   STICKY HEADER
------------------------------ */
.sticky-table thead {
  position: sticky;
  top: 0;
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.sticky-table th {
  position: sticky;
  top: 0;
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.15);
  z-index: 2;
  border-right: none;
}

.analysis-table-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 20px;
}

.analysis-table-container table {
  margin: 0 auto;
  width: auto !important;
  min-width: 350px;
}

/* Freeze first column */
.sticky-table th:first-child,
.sticky-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12);
  color: #0f172a;
  border-right: 1px solid #e5e7eb;
  background: #f8fafc;
}

/* A rank folded into the frozen identity cell ("3 Kraft YAC-N-Chee"). It used
   to be its own leading "#" column, which made the frozen column a counter
   while the name scrolled away — the pickups-table trap, solved the same way. */
/* Rank movement. These cells have no fill of their own - they sit on the
   table's own background, white by day and navy at night - so the colours are
   here rather than inline on the cell, where one value would have to serve
   both themes. Set by cbb.html_util._arrow_class. */
/* A card whose page needs games that have not been played yet. */
.home-card-stale { font-size: 12.5px; color: #64748b; font-style: italic; margin: 6px 0 0; }

.rk-up { color: #15803d; }
.rk-down { color: #b91c1c; }
.rk-flat { color: #475569; }

.row-rank {
  display: inline-block;
  min-width: 1.7em;
  color: var(--gs-muted);
  font-size: 0.85em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sticky-table th:last-child {
  border-right: none;
}

/* Small phones */
@media (max-width: 480px) {
  .sticky-table th,
  .sticky-table td {
    padding: 4px 6px;
    font-size: 12px;
  }
}

/* Extremely small phones (old iPhones). Tighter padding only: the type
   holds at the 12px floor set above - 11px bought a sliver of a column and
   cost the reader the row (2026-10-02). */
@media (max-width: 320px) {
  .sticky-table th,
  .sticky-table td {
    padding: 3px 4px;
  }
}

/* GAMES */
.matchup-list {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-collapse: collapse;
}

.matchup-list td {
  padding: 10px 14px;
  border-bottom: 1px solid #ddd;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  white-space: nowrap;
}

.matchup-list tr:hover {
  background: #f6f6f6;
}

.matchup {
  padding: 12px 14px;
  border-bottom: 1px solid #ddd;
  font-family: system-ui, sans-serif;
}

/* Teams line */
.teams {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 4px;
  gap: 6px;
  font-size: 15px;
}

.team {
  white-space: nowrap;
}

.at {
  color: #777;
}

.meta {
  margin-top: 6px;
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 3px;

  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;

  color: #444;
  background: #f1f1f1;
  border-radius: 6px;
  letter-spacing: 0.3px;
}

/* Final games */
.meta-final {
  background: #16a34a;
  color: white;
}

/* Live games */
.meta-live {
  color: #ffecec;
  background: #db8946;
}

.meta-upcoming {
  background: #e5e7eb;
  color: #111827;
}

.meta-line {
  width: 100%;
  text-align: center;
}

.meta-line.meta-location {
  opacity: 0.85;
}

.meta-line.meta-betting {
  font-weight: 700;
}

/* GordStats' own call (cbb.game_model), under the book's. */
.meta-line.meta-pick {
  font-weight: 700;
  color: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  .meta-line.meta-pick { color: #93c5fd; }
}

@media (max-width: 360px) {
  .teams {
    font-size: 14px;
  }
}

.team strong {
  color: #000;
}

.team-logo {
  border: none;
  outline: none;
  box-shadow: none;
  vertical-align: middle;
  margin-left: 6px;
  /* space between text and image */
  height: 30px;
  /* keep consistent sizing */
}

/* The theme frames every img - 5px of padding and 10px of margin above and
   below - which made each row of the CBB conference, bracketology and
   history tables 61px tall for a 22px logo. */
img.team-logo {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  background: none;
}

/* ESPN team logos (gordstats.logos.img tags every one gs-logo). Ohio State,
   Army, Purdue, the Raiders and a dozen others ship a near-black mark, which
   on the dark theme was a hole in the schedule, power, matchups and
   predictions tables (2026-10-02). A pale disc works for every mark - a halo
   leaves dark-on-dark dark. border-box keeps the drawn size; the padding stops
   a square mark filling the circle. Important because each page resets its
   logos' padding and background against Slate's img frame, with selectors
   this cannot outrank one by one. */
@media (prefers-color-scheme: dark) {
  img.gs-logo {
    background: #e8edf5 !important;
    border-radius: 50% !important;
    padding: 2px !important;
    box-sizing: border-box !important;
  }

  /* The roster tables' 14-18px marks: 2px a side left a 10px logo. */
  img.gs-logo[width="16"],
  img.gs-logo[width="18"] {
    padding: 1px !important;
  }
}

.conf-table {
  width: 100%;
  max-width: 400px;
  border-collapse: collapse;
  margin: 0 auto;
  font-family: monospace;
}

.conf-table th,
.conf-table td {
  padding: 6px 10px;
  text-align: left;
}

.conf-table th {
  border-bottom: 2px solid #4a5a68;
}

.conf-table tr:not(:last-child) td {
  border-bottom: 1px solid #2c3945;
}

.league-toggle {
  display: flex;
  align-items: center;
}

#league-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 110px;
  height: 32px;
  padding: 0;
  border: 1px solid #4a5a68;
  border-radius: 999px;
  background: #f8f9fa;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

#league-toggle-btn .option {
  flex: 1;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  color: #6b7280;
}

#league-toggle-btn .slider {
  position: absolute;
  /* Pinned to both edges rather than a fixed 26px: on a phone the button is
     44px tall (the tap-target rule below), and a 26px slider left the "Men"
     label hanging out of the bottom of its pill. */
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 52px;
  background: #111;
  border-radius: 999px;
  transition: transform 0.2s ease;
  z-index: 1;
}

/* Women active */
#league-toggle-btn.women .slider {
  transform: translateX(54px);
}

#league-toggle-btn.men .men,
#league-toggle-btn.women .women {
  color: #fff;
  font-weight: 600;
}

/* Layout container */
.scoreboard {
  align-items: start;
  gap: 12px;
  max-width: 520px;
}

/* Card */
.game-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: #ebe4e4;
}

.top25 {
  background: #ebe7e5 !important;
}

.team-row {
  display: grid;
  grid-template-columns: 1fr 52px;
  /* right column fixed for alignment */
  align-items: center;
  column-gap: 10px;
}

.team-row.winner {
  background-color: rgba(34, 197, 94, 0.12);
  /* light green */
}

.team-row.loser {
  background-color: rgba(239, 68, 68, 0.12);
  /* light red */
}

.team-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.team-name {
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-right {
  text-align: right;
}

.score {
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
  font-size: 18px;
  font-weight: 700;
}

/* Meta line: smaller text below */
.game-meta {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.8;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.dot {
  opacity: 0.6;
}

/* Mobile tweaks */
@media (max-width: 420px) {
  .team-row {
    grid-template-columns: 1fr 44px;
  }

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

  .score {
    font-size: 17px;
  }
}

/* =========================
   PINNED CONTROLS
   A view-switch row (or a couple of them) that stays under the site header
   while the page scrolls: the week buttons on the scoreboard and matchup
   pages, the tabs and change-since buttons on the rankings tables. Same
   offset as the filter bar below.
   ========================= */
.pin-bar,
.filter-bar,
.archive-controls {
  position: sticky;
  top: var(--header-h, 54px);
  z-index: 20;
  /* Its own surface, so header, controls and content read as three layers
     rather than the controls floating on the page. Centered like the nav
     above it. */
  background: #ffffff;
  padding: 6px 14px 4px;
  margin: 0 0 12px;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 28px;
}

.pin-bar .view-switch {
  margin: 4px 0;
  justify-content: center;
}

/* On a phone the rows scroll sideways; a centered row that overflows hides
   its start, so they stay left-aligned there. */
@media (max-width: 700px) {
  .pin-bar,
  .pin-bar .view-switch,
  .filter-bar,
  .archive-controls {
    justify-content: flex-start;
  }
}

@media (prefers-color-scheme: dark) {
  .pin-bar,
  .filter-bar,
  .archive-controls {
    background: #1b2540;
    border-color: #2b3852;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  }
}

/* =========================
   FILTER BAR (Period + Conference)
   ========================= */
/* The card itself (surface, stickiness, centering) is shared with .pin-bar
   above; only the spacing is its own. */
.filter-bar {
  gap: 20px;
  width: 100%;
  /* border-box, or the 28px of padding lands on top of 100% and the whole
     page pans sideways on a phone (the conference and bracketology pages). */
  box-sizing: border-box;
  padding: 10px 14px 8px;
}

.filter-bar label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Dropdowns inside the filter bar: avoid vertical clipping */
.filter-bar select {
  box-sizing: border-box;
  height: auto;
  /* important: don’t force height */
  min-height: 36px;
  /* enough room for text on all browsers */
  padding: 6px 12px;
  line-height: 1.2;

  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;

  appearance: none;
  -webkit-appearance: none;
}

/* iOS: prevent zoom + keep text from clipping */
@media (max-width: 767px) {
  .filter-bar select {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .filter-bar {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* One pinned row, not two: Period and Conference side by side, their
     labels dropped - the choices name themselves ("2 Weeks", "All
     Conferences"). It was 115px of pinned bar on /men/conference. */
  .filter-bar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 10px;
  }

  .filter-bar .change-toggle label,
  .filter-bar .conference-filter label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .filter-bar .change-toggle,
  .filter-bar .conference-filter {
    flex: 1 1 0;
    min-width: 0;
  }

  .filter-bar .change-toggle select,
  .filter-bar .conference-filter select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 42px;
  }
}

.change-toggle select {
  width: 120px;
}

.conference-filter {
  flex: 0 1 auto;
}

.conference-filter select {
  width: 100%;
  min-width: 180px;
  max-width: 280px;
}

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

.change-toggle label {
  font-weight: 600;
}

/* Shared layout for filter controls */
.change-toggle,
.conference-filter {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 767px) {
  /* ❌ Hide top nav */
  #nav {
    display: none !important;
  }

  /* ✅ Bottom nav stays visible */
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;

    display: flex;
    justify-content: space-around;
    align-items: center;

    background: #fff;
    border-top: 1px solid #ddd;
    z-index: 9999;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    min-height: 100dvh;
    overflow-x: hidden;
  }
}

.bottom-nav a.active {
  background: rgba(0, 122, 255, 0.08);
  border-radius: 10px;
}

/* =========================
   ACTIVE NAV STATE
========================= */
.bottom-nav a.active {
  color: #007aff;
}

.bottom-nav a.active .icon {
  transform: translateY(-2px);
}

.bottom-nav a.active::after {
  content: '';
  display: block;
  margin: 4px auto 0;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: #007aff;
}

/* =========================
   DESKTOP ONLY
   ========================= */
@media (min-width: 768px) {
  /* Show desktop nav */
  .simple-nav {
    display: flex;
  }

  /* Kill mobile nav completely */
  .bottom-nav {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }
}

.sticky-table th.active-col,
.sticky-table td.active-col {
  border-right: 1px solid #cbd5e1 !important;
}

/* =========================
   MOBILE TABLE COMPRESSION
   ========================= */
@media (max-width: 767px) {
  /* All data tables */
  .sticky-table th,
  .sticky-table td,
  .rank-table th,
  .rank-table td,
  .conf-table th,
  .conf-table td {
    padding: 4px 6px;
    /* tighter rows */
    font-size: 12px;
    /* smaller but readable */
  }

  /* Header cells slightly bolder */
  .sticky-table th,
  .rank-table th,
  .conf-table th {
    font-weight: 600;
  }

  .sticky-table td:first-child,
  .rank-table td:first-child,
  .conf-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;

    /* allow full team names */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;

    min-width: 180px; /* ensures readable width */
    max-width: none;
  }

  .rank-table th:first-child,
  .rank-table td:first-child {
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25);
  }
  /* Reduce logo size inside tables */
  .team-logo,
  .logo {
    height: 22px;
    width: 22px;
  }
}

@media (max-width: 360px) {
  .sticky-table th,
  .sticky-table td,
  .rank-table th,
  .rank-table td,
  .conf-table th,
  .conf-table td {
    padding: 3px 4px;
    font-size: 12px;
  }
}

.conference-block {
  margin-bottom: 28px;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

/* Scoped to the conference blocks these rules sit among. Unscoped, this
   centred every paragraph on the site — tolerable on a wide column, but on a
   phone it turns body copy into a ragged diamond. */
.conference-block p {
  text-align: center;
}

.conference-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* =========================
   LIVE POLLING
   ========================= */
.game {
  display: grid;
  grid-template-columns: 80px 40px 80px 40px 80px 80px;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid #ddd;
  font-family: monospace;
}

.score {
  text-align: center;
  font-weight: bold;
}

.status {
  color: #666;
}

.scoreboard-grid {
  display: grid;
  row-gap: 22px;
  column-gap: 16px;
  align-items: start;
  width: 95%;
  max-width: 1600px;
  margin: 0 auto 24px auto;
  overflow: visible;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .scoreboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1400px) {
  .scoreboard-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.game-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: visible;
  transform: translateZ(0); /* forces GPU compositing */
  will-change: box-shadow;
}

.game-head {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 6px;
}

/* LEFT */
.game-head-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* CENTER */
.game-head-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* RIGHT */
.game-head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.game-badge.ap {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

.game-badge.p5 {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.game-badge.medal {
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}

.game-badge.medal.gold {
  font-size: 20px;
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 1));
}

.game-badge.medal.silver {
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(209, 213, 219, 0.9));
}

.game-badge.medal.bronze {
  font-size: 17px;
  filter: drop-shadow(0 0 4px rgba(180, 83, 9, 0.85));
}

.status-pill {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #e5e7eb;
}

.game-id {
  font-size: 12px;
  color: #6b7280;
}

.teams {
  display: grid;
  gap: 6px;
}

.team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-name {
  margin-left: 4px;
}

.team-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rank {
  font-size: 12px;
  color: #6b7280;
  width: 34px;
  flex: 0 0 34px;
}

.game-time {
  font-variant-numeric: tabular-nums;
}

.rank-empty {
  visibility: hidden;
}

.team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

.score {
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.scoreboard-empty {
  padding: 10px 0;
  color: #6b7280;
}

@media (prefers-color-scheme: dark) {
  .scoreboard-empty { color: #aab7c9; }
}

/* Status colors */
.st-live {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.st-ht {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.st-final {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #374151;
}

.st-pre {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.st-delay {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.st-unk {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

.date-header {
  position: sticky;
  top: 0;
  z-index: 10;

  background: #ffffff;
  padding: 8px 4px;
  margin: 0 0 10px;

  font-size: 18px;
  font-weight: 800;
  color: #111827;

  border-bottom: 1px solid #e5e7eb;
}

.date-header {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.92);
}

.sort-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
  flex-wrap: wrap;
}

.sort-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}

/* Chip base */
.sort-chip {
  border: none;
  background: rgba(17, 24, 39, 0.06);
  color: #111827;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  padding: 5px 10px;
  border-radius: 999px;

  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Hover */
.sort-chip:hover {
  background: rgba(17, 24, 39, 0.12);
}

/* Active state */
.sort-chip.active {
  background: rgba(124, 58, 237, 0.15);
  color: #7c3aed;
}

.countdown-top {
  margin: 0.75rem 0 1.25rem;
  text-align: center;
}

.countdown-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--timer-muted);
  margin-bottom: 4px;
}

.timer-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Courier New', Courier, monospace;
}

.time-pill {
  background: var(--timer-box);
  border-radius: 999px;
  padding: 6px 10px;
  min-width: 56px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}

.time-pill span {
  font-size: 1.25rem;
  font-weight: 800;
  color: #000000; /* full white */
  line-height: 1;
}

.pill-label {
  font-size: 0.6rem;
  color: #000000; /* lighter gray */
  letter-spacing: 0.1em;
}

.home-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 1rem;
}

.home-left {
  font-size: 1rem;
  line-height: 1.6;
}

.home-right {
  font-size: 1rem;
  line-height: 1.6;
}

.twitter-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3f4f6;
  margin-bottom: 8px;
}

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

  .home-right {
    margin-top: 1.5rem;
  }
}

.game-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-card:hover {
  transform: translateY(-2px);
}

.game-expand {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  animation: expandFade 0.2s ease;
}

.expanded-stats {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  opacity: 0.9;
}

@keyframes expandFade {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.expand-indicator {
  font-size: 14px;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.game-card.open .expand-indicator {
  transform: rotate(180deg);
  opacity: 1;
}

/* Logo + name inline */
.expanded-team-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.expanded-logo {
  height: 22px; /* smaller */
  width: 22px;
  object-fit: contain;
}

.expanded-name {
  font-weight: 600;
  font-size: 14px;
}

.expand-indicator {
  font-size: 14px;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.2s ease;
  pointer-events: none; /* so clicking it still triggers card click */
}

.game-card:hover .expand-indicator {
  opacity: 1;
}

.expand-toggle {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
  cursor: pointer;
}

/* Container */
.expanded-compare {
  margin-top: 0;
  display: grid;
  gap: 8px;
}

/* Header */
.expanded-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 2px;
}

.team-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}

.expanded-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Rows */
.expanded-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 14px;
}

.expanded-row .label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.value.left {
  text-align: left;
  font-weight: 600;
}

.value.right {
  text-align: right;
  font-weight: 600;
}

.expanded-row:not(:last-child) {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 6px;
}

.value.better {
  font-weight: 900;
  color: #065f46;
  padding: 2px 6px;
  border-radius: 6px;
}

.value span {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}

.value span.better {
  background: rgba(16, 185, 129, 0.18);
  font-weight: 900;
  color: #065f46;
}

.game-card {
  position: relative;
}

.game-card.close-late::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  pointer-events: none;
  animation: redOutlinePulse 1.6s ease-in-out infinite !important;
}

@keyframes redOutlinePulse {
  0%,
  100% {
    box-shadow: 0 0 6px 1px rgba(220, 38, 38, 0.6);
  }
  50% {
    box-shadow: 0 0 14px 4px rgba(220, 38, 38, 0.85);
  }
}

.game-card.live-active::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  pointer-events: none;
  animation: greenOutlinePulse 2.6s ease-in-out infinite;
}

@keyframes greenOutlinePulse {
  0%,
  100% {
    box-shadow: 0 0 6px 1px rgba(21, 128, 61, 0.6);
  }
  50% {
    box-shadow: 0 0 12px 3px rgba(21, 128, 61, 0.8);
  }
}

@keyframes pulseBorder {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

.team-row.winner {
  position: relative;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
  border-radius: 8px;
}

.team-row.winner::after {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1.5px solid rgba(34, 197, 94, 0.7);
  border-radius: 8px;
  pointer-events: none;
}

.tourney-bubble {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;

  border-radius: 999px;
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.game-card .tourney-bubble {
  display: block;
  text-align: center;
}

.tourney-bar.conf {
  background: #857a72;
  color: white;
}
.tourney-bar.conf-acc {
  background: #013ca6;
  color: white;
}
.tourney-bar.conf-sec {
  background: #f4b000;
  color: #111;
}
.tourney-bar.conf-bigten {
  background: #06770b;
  color: white;
}
.tourney-bar.conf-big12 {
  background: #d81f26;
  color: white;
}
.tourney-bar.conf-bigeast {
  background: #9e0885;
  color: white;
}

.tourney-bar.march-madness {
  background: linear-gradient(90deg, #0033a0, #0066ff);
  color: white;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(0, 51, 160, 0.5);
}

.tourney-bar.march-madness {
  animation: madnessPulse 2.5s infinite;
}

@keyframes madnessPulse {
  0% { box-shadow: 0 0 6px rgba(0, 51, 160, 0.4); }
  50% { box-shadow: 0 0 12px rgba(0, 102, 255, 0.7); }
  100% { box-shadow: 0 0 6px rgba(0, 51, 160, 0.4); }
}

.tourney-bar.nit {
  background: #1b5e20;
  color: #ffd54f;
  font-weight: 600;
}

.tourney-bubble::before {
  content: '🏆';
  font-size: 12px;
}

.tourney-slot {
  height: 22px;
  margin-top: 2px;
  margin-bottom: 4px;
}

.tourney-bar {
  margin-top: 6px;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 6px 0;
  font-size: 13px;
  font-weight: 700;

  border-radius: 6px;
  letter-spacing: 0.3px;
}

/* =========================
   HOME BIDS TABLE
   ========================= */

.bids-table table {
  table-layout: fixed !important; /* equal column sizing */
}

/* Equal width columns */
.bids-table th,
.bids-table td {
  width: 33.33%;
  text-align: center;
}

/* Remove sticky/index styling from Men column */
.bids-table th:first-child,
.bids-table td:first-child {
  position: static !important;
  left: auto !important;
  background: white !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Make Conference column behave like index */
.bids-table th:nth-child(2),
.bids-table td:nth-child(2) {
  background: #d3d3d3;
  border-right: 1px solid black;
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2);
}

/* Slight logo alignment improvement */
.bids-table img {
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

/* =========================
   BIDS TABLE HEADER FIX
   ========================= */

/* Make Men/Women headers look like Conf */
.bids-table thead th:first-child,
.bids-table thead th:nth-child(3) {
  background: #d3d3d3 !important;
  font-weight: bold;
  text-align: center;
}

/* Keep Conf header looking like index */
.bids-table thead th:nth-child(2) {
  padding-left: 10px;
}

/* Add border between Men and Conf */
.bids-table thead th:first-child {
  border-right: 1px solid black;
}

/* Match the border in the body */
.bids-table td:first-child {
  border-right: 1px solid black;
}

.bids-table td {
  vertical-align: middle;
}

.bids-table td img {
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
}

/* =========================
   BIDS TABLE BORDER FIXES
   ========================= */

/* Vertical divider between Men and Conf */
.bids-table thead th:first-child,
.bids-table tbody td:first-child {
  border-right: 1px solid black !important;
}

/* Ensure Conf column also has left divider */
.bids-table thead th:nth-child(2),
.bids-table tbody td:nth-child(2) {
  border-left: 1px solid black;
}

/* Bottom border under headers */
.bids-table thead th {
  border-bottom: 1px solid black;
}

/* =========================
   AUTO BID CELL HIGHLIGHT
   ========================= */

.bids-table td.team-in {
  background: rgba(34, 197, 94, 0.15);
  font-weight: 600;
}

.bids-table td.team-in img {
  height: 18px;
  margin-right: 6px;
}

/* Center the conference column */
.bids-table td:nth-child(2),
.bids-table th:nth-child(2) {
  text-align: center;
}

/* Optional subtle row striping */
.bids-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.ff-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;

  color: white;
  background: #dc2626;   /* red */

  border-radius: 999px;
  vertical-align: middle;
}

.past-games summary {
  cursor: pointer;
  list-style: none;
}

.past-games summary::marker {
  display: none;
}

.past-games summary::after {
  content: " ▼";
  font-size: 12px;
  opacity: 0.6;
}

.past-games[open] summary::after {
  content: " ▲";
}

.past-games summary {
  cursor: pointer;
  list-style: none;
}

.past-games summary::marker {
  display: none;
}

.past-games summary::after {
  content: " ▼";
  font-size: 12px;
  opacity: 0.7;
}

.past-games[open] summary::after {
  content: " ▲";
}

.past-games {
  margin-top: 12px;
}

.team-cell {
  display: flex;
  align-items: center;
  justify-content: center; /* keeps centered since table is text-center */
  gap: 6px;
}

.team-cell img {
  height: 20px;
  width: 20px;
  object-fit: contain;
}

.analysis-table-container h3 {
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

.analysis-table-block {
  text-align: center;
}

.analysis-table-block h3 {
  margin-bottom: 10px;
}

.analysis-table-block h3 {
  font-weight: 700;
  letter-spacing: 0.5px;
}

.notebook-content {
  max-width: 900px;     /* controls width */
  margin: 0 auto;       /* 🔥 centers horizontally */
  padding: 20px;
}

.notebook-content {
  text-align: center;
}

.notebook-content table {
  margin: 20px auto;
  border-collapse: collapse;
}

.anchor-link {
  display: none;
}

.wnba-fantasy-week,
.wnba-team-reports {
  max-width: 1200px;
  margin: 22px auto;
}

/* -----------------------------
   MATCHUPS
------------------------------ */

.matchup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.matchup-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  box-shadow: 0 2px 8px rgba(15,23,42,.06);

  min-height: 170px;
}

.matchup-topline,
.matchup-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: #64748b;
}

.matchup-topline span,
.matchup-status {
  padding: 3px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
}

.matchup-projline {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.matchup-projline > span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.proj-bar {
  flex: 1;
  display: flex;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
}

.proj-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  /* #94a3b8 put its white label at 2.6:1. */
  background: #64748b;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: width 0.3s ease;
}

.proj-fill + .proj-fill {
  border-left: 2px solid #fff;
}

.proj-fill.proj-win {
  background: #059669;
}

.matchup-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.team-side {
  border-radius: 12px;
  padding: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
}

.team-side.leader {
  background: #ecfdf5;
  border-color: #86efac;
}

.team-side.tied {
  background: #fffbeb;
  border-color: #fde68a;
}

.team-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 3px;
}

.team-name {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  word-break: normal;
  margin-bottom: 8px;
}

.score {
  margin-top: auto;
  font-size: 1.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.games-left {
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 800;
  color: #2563eb;
}

.games-left,
.team-games {
  margin-top: 2px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #2563eb;
}

.finalized {
  margin-top: 4px;
  font-size: .78rem;
  color: #64748b;
}

.projected {
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 800;
  color: #047857;
}

.projected.proj-leader {
  color: #047857;
  text-decoration: underline;
}


.vs-pill {
  align-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #334155;
  color: white;
  font-size: .7rem;
  font-weight: 900;
}

/* fallback if using old row-based matchup HTML */
.team-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}

.team-row.leader .team-name,
.team-row.leader .team-score {
  font-weight: 900;
}

/* -----------------------------
   PLAYOFF BRACKET
------------------------------ */

.wnba-playoff-bracket {
  max-width: 1200px;
  margin: 22px auto;
}

.bracket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: center;
}

.bracket-round h3 {
  font-size: 0.9rem;
  margin: 0 0 8px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.round-dates {
  font-weight: 400;
  text-transform: none;
  color: #5d6b7e;
  font-size: 0.78rem;
  margin-left: 6px;
}

.bracket-game {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  margin-bottom: 12px;
}

.bracket-team {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.92rem;
}

.bracket-team + .bracket-team {
  border-top: 1px solid #e5e7eb;
}

.bracket-team.winner {
  background: #ecfdf5;
}

.bracket-team.winner .bteam-name {
  color: #047857;
}

.bracket-team.tbd .bteam-name {
  color: #5d6b7e;
  font-style: italic;
  font-weight: 600;
}

.bseed {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #334155;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bracket-team.tbd .bseed {
  background: #cbd5e1;
}

.bteam-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bteam-name em {
  font-style: normal;
  font-weight: 500;
  color: #64748b;
  font-size: 0.78rem;
}

.bscore {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

.bracket-title {
  margin: 16px 0 8px;
  font-size: 1rem;
  color: #0f172a;
}

.bracket-title.consolation-title {
  margin-top: 24px;
  color: #64748b;
}

@media (max-width: 700px) {
  .wnba-playoff-bracket {
    margin: 16px auto;
  }

  .bracket {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
  }

  .bracket-round h3 {
    margin: 6px 0 6px;
    font-size: 0.82rem;
  }

  .round-dates {
    display: block;
    margin: 2px 0 0;
    font-size: 0.72rem;
  }

  .bracket-game {
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .bracket-team {
    padding: 8px 10px;
    font-size: 0.85rem;
    gap: 6px;
  }

  .bseed {
    width: 20px;
    height: 20px;
    font-size: 0.68rem;
  }

  .bteam-name em {
    font-size: 0.72rem;
  }
}

/* -----------------------------
   PREDICTION ARCHIVE
------------------------------ */

.archive-controls {
  gap: 16px;
  padding: 10px 14px 8px;
  margin: 0 0 16px;
}

.archive-controls label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
}

.archive-controls select {
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.archive-table td {
  white-space: nowrap;
}

/* -----------------------------
   HOME CARDS
------------------------------ */

.home-card {
  max-width: 1200px;
  margin: 22px auto;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.home-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.home-card-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.home-card-link {
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
}

.home-card p {
  margin: 10px 0 0;
  color: #475569;
  font-size: 0.92rem;
}

.home-card-links {
  font-weight: 700;
}

/* A row of page links with no separators in the text: the gap spaces them.
   Literal " · " between inline links wrapped to a line on its own end, a dot
   dangling after the last link that fit (2026-10-02). */
.home-card-links.hc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 14px;
}

.dashboard-cta {
  max-width: 1200px;
  margin: 18px auto;
  text-align: center;
}

.dashboard-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent, #A34F0A);
  color: #fff !important;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.dashboard-link:hover {
  background: var(--accent-dark, #8A420A);
}

/* -----------------------------
   SUGGESTED PICKUPS
------------------------------ */

.wnba-pickups {
  max-width: 1200px;
  margin: 22px auto;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.pickups-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: #fff;
}

.pickups-table th {
  text-align: left;
  padding: 10px 10px;
  background: linear-gradient(90deg, #eff6ff, #f8fafc);
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  white-space: nowrap;
}

.pickups-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pickups-table tbody tr:last-child td {
  border-bottom: none;
}

.pickups-table tbody tr:hover {
  background: #f8fafc;
}

.pickup-name {
  font-weight: 700;
}

.pickup-opps {
  color: #64748b;
  font-size: 0.78rem;
}

.proj-strong {
  font-weight: 900;
  color: #047857;
}

.inj-tag {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  vertical-align: middle;
}

/* -----------------------------
   RECOMMENDED DROPS
------------------------------ */

.wnba-drops {
  max-width: 1200px;
  margin: 22px auto;
}

.drop-select-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #475569;
  margin: 4px 0 12px;
}

#drop-team-select {
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.ir-tag,
.lock-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  vertical-align: middle;
}

.ir-tag {
  background: #fee2e2;
  color: #b91c1c;
}

.lock-tag {
  background: #e2e8f0;
  color: #475569;
}

/* -----------------------------
   TEAM REPORTS
------------------------------ */

.week-meta,
.played-days {
  color: #64748b;
  font-size: 0.88rem;
  margin: 4px 0;
}

.team-report {
  margin-top: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.team-report-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: linear-gradient(90deg, #eff6ff, #f8fafc);
  border-bottom: 1px solid #e5e7eb;
}

.team-report-header h3 {
  margin: 0;
  font-size: 1rem;
}

/* Team reports fold behind their header (collapsed by default on phones) */
summary.team-report-header {
  cursor: pointer;
  list-style: none;
}

summary.team-report-header::-webkit-details-marker {
  display: none;
}

summary.team-report-header::after {
  content: "▾";
  color: #5d6b7e;
  font-size: 0.85rem;
  margin-left: 4px;
}

.team-fold[open] > summary.team-report-header::after {
  content: "▴";
}

.header-stats {
  display: flex;
  /* Three stats with no wrap shrank into a ragged three-column block on a
     360px phone; wrapping keeps each stat on its own intact line instead. */
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.max-games {
  font-size: 0.85rem;
  color: #475569;
}

.max-games strong {
  color: #2563eb;
  font-size: 1.1rem;
}

.max-games.proj-total strong {
  color: #047857;
}

.max-games.min-total strong {
  color: #d97706;
}

.daily-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  padding: 10px;
}

.day-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
  background: #f8fafc;
}

.day-card.today {
  background: #fff7ed;
  border-color: #fdba74;
}

.day-card h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
}

.today-badge {
  font-size: 0.65rem;
  margin-left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #fb923c;
  color: white;
}

.player-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.player-list li {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid #e5e7eb;
  font-size: 0.82rem;
}

.player-list li.with-proj {
  grid-template-columns: 38px 1fr 42px 38px;
}

.proj {
  text-align: right;
  font-weight: 800;
  color: #047857;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.player-list li:first-child {
  border-top: none;
}

.slot {
  font-weight: 900;
  color: #475569;
  font-size: 0.72rem;
}

.player-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-abbrev {
  text-align: right;
  font-weight: 900;
  color: #2563eb;
  font-size: 0.76rem;
}

.injured {
  color: #d80a0a;
}

.no-games {
  margin: 0;
  color: #5d6b7e;
  font-style: italic;
  font-size: 0.8rem;
}

/* -----------------------------
   MOBILE
------------------------------ */

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

@media (max-width: 600px) {
  .matchup-sides {
    grid-template-columns: 1fr;
  }

  .vs-pill {
    justify-self: center;
  }

  .team-report-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .daily-games {
    grid-template-columns: 1fr;
  }
}
/* -----------------------------
   PAGE-LEVEL UPDATED STAMP
------------------------------ */

.page-updated {
  max-width: 1200px;
  margin: 10px auto 0;
  text-align: center;
  color: #5d6b7e;
  font-size: 0.8rem;
}

/* Under a page title (frontmatter.updated_line): tucked up to the title or
   subtitle above it, a line of its own before the page starts. */
h1 + .page-updated,
.page-sub + .page-updated {
  margin: -6px auto 14px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* -----------------------------
   DARK MODE
   Targeted overrides for the major surfaces; pandas-styled data tables
   (predict/conference pages) keep their inline light styling and read as
   light islands on the dark page.
------------------------------ */

@media (prefers-color-scheme: dark) {
  body,
  #main_content_wrap {
    background: #16203a !important;
    color: #dde5ef;
  }

  h1, h2, h3, h4 {
    color: #f1f5f9;
  }

  a {
    color: #7dd3fc;
  }

  /* Shell */
  #site-header {
    background: #0f172a;
    border-bottom-color: #1e293b;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  }

  .site-brand {
    color: #f1f5f9 !important;
  }

  .site-brand span {
    color: #34d399;
  }

  .simple-nav a {
    color: #aab7c9 !important;
  }

  .simple-nav a:hover {
    background: #1e293b;
    color: #34d399 !important;
  }

  #site-footer {
    border-top-color: #1e293b;
    color: var(--gs-muted);
  }

  .bottom-nav {
    background: #16203a !important;
    border-top-color: #1e293b !important;
  }

  #league-toggle-btn {
    background: #1e293b;
    border-color: #334155;
    color: #dde5ef;
  }

  /* Cards & sections. .game-card is the CBB scoreboard's (live.js): it kept
     its white light-mode card under the dark theme's near-white text - team
     names and scores at 1.1:1 (found by the 2026-09-28 phone sweep). */
  .game-card,
  .matchup-card,
  .bracket-game,
  .team-report,
  .home-card,
  .day-card,
  .table-scroll,
  .drop-panel .table-scroll {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  }

  .team-row.winner { background-color: rgba(34, 197, 94, 0.18); }
  .team-row.loser { background-color: rgba(239, 68, 68, 0.16); }

  .team-side,
  .bracket-team {
    background: #263449;
    border-color: #334155;
  }

  .team-side.leader,
  .bracket-team.winner {
    background: #123c2e;
    border-color: #059669;
  }

  .bracket-team.winner .bteam-name {
    color: #6ee7b7;
  }

  .team-side.tied {
    background: #3b2f11;
    border-color: #a16207;
  }

  .day-card {
    background: #263449;
  }

  .day-card.today {
    background: #3b2410;
    border-color: #c2410c;
  }

  .team-report-header {
    background: linear-gradient(90deg, #1e293b, #263449);
    border-bottom-color: #334155;
  }

  .home-card p,
  .max-games,
  .finalized,
  .week-meta,
  .played-days,
  .matchup-topline,
  .pickup-opps,
  .bteam-name em,
  .round-dates {
    color: #aab7c9;
  }

  .team-label,
  .bracket-round h3,
  .slot {
    color: #aab7c9;
  }

  .score,
  .bscore {
    color: #f1f5f9;
  }

  .player-list li,
  .bracket-team + .bracket-team {
    border-top-color: #334155;
  }

  .proj-bar {
    background: #334155;
  }

  .proj-fill {
    background: #64748b;
  }

  .proj-fill.proj-win {
    background: #059669;
  }

  .matchup-topline span {
    background: #0c4a6e;
    color: #7dd3fc;
  }

  .matchup-projline > span {
    background: #123c2e;
    color: #6ee7b7;
  }

  /* Our own tables (pickups, drops, archive) go dark */
  .pickups-table {
    background: #1e293b;
    color: #dde5ef;
  }

  .pickups-table th {
    background: #0f172a;
    border-bottom-color: #334155;
    color: #aab7c9;
  }

  .pickups-table td {
    border-bottom-color: #263449;
  }

  .pickups-table tbody tr:hover {
    background: #263449;
  }

  .proj-strong {
    color: #34d399;
  }

  #drop-team-select,
  .archive-controls select {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
  }

  .drop-select-label,
  .archive-controls label {
    color: #aab7c9;
  }

  /* Pandas tables: dim the DEFAULT cells to a soft slate so they stop
     glaring; per-cell colors from the styler (ID selectors) still win. */
  .table-container {
    background: transparent;
    border-color: #334155;
  }

  .sticky-table th {
    background: #0f172a;
    color: #aab7c9;
    border-bottom-color: #334155;
  }

  /* The body is the site's dark table, the one table.mu-roster and table.rd
     use. It used to be a light slate, on the reasoning that these are pandas
     tables whose cells mostly carry a colour from a heatmap and the slate is
     only what the styler left alone - but a table with no styler came out
     light on a dark screen, whole. Every styler that paints a light cell now
     states its own dark text (fantasy.site.styles.ON_LIGHT), so those still
     read; everything else takes this. */
  .sticky-table td {
    background: #16203a;
    color: #dde5ef;
    border-bottom-color: #2b3852;
  }

  /* The pandas tables state their grid in ID rules (fantasy.site.styles:
     `#T_x td {border: 1px solid #eef2f7}`), which outrank everything above,
     so after dark they drew a pale grid across the dark cells. Important is
     the only way past an ID rule from here; the per-cell rules that matter
     (the heavy totals line) are themselves important and more specific. */
  .sticky-table td {
    border-color: #2b3852 !important;
  }

  .sticky-table th {
    border-color: #334155 !important;
  }

  .sticky-table tbody tr:nth-child(even) td {
    background: #1b2540;
  }

  .sticky-table th:first-child,
  .sticky-table td:first-child {
    background: #1b2540;
    border-right-color: #2b3852;
    color: #dde5ef;
  }

  .sticky-table tbody tr:hover td {
    filter: brightness(1.25);
  }

  .home-card-stale { color: #aab7c9; }

  .rk-up { color: #6ee7b7; }
  .rk-down { color: #ff9b91; }
  .rk-flat { color: #aab7c9; }

  .filter-bar label {
    color: #aab7c9;
  }

  .filter-bar select,
  .conference-filter select {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
  }

  /* Theme-styled page paragraphs (predict intro, last-update lines) */
  #main_content > p {
    color: #aab7c9;
  }

  .page-updated {
    color: #94a3b8;
  }

  .bracket-title {
    color: #f1f5f9;
  }

  .games-left,
  .team-games,
  .team-abbrev,
  .pickup-name {
    color: #60a5fa;
  }

  .pickup-name {
    color: #e2e8f0;
  }
}


/* =========================================================
   TWO-LEVEL NAV
   Section bar (Home / CBB / WNBA / Fantasy) over a sub-nav of
   the pages inside the current section. Both come from
   _data/nav.yml via _includes/nav.html.

   Both rows stay visible at every width — the sub-nav is how you
   reach a sport's pages, so hiding it on a phone hides the site.
   Each row scrolls sideways instead of wrapping, so a long section
   never pushes the content down the page.
   ========================================================= */

.nav-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.simple-nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;              /* the rows are short; a bar adds noise */
  -webkit-overflow-scrolling: touch;
  gap: 2px;
  /* `safe` matters. A plain `center` on a scroll container pushes overflowing
     content off BOTH edges, and the part past the left edge cannot be scrolled
     back to — scrollLeft is already 0. That is why the nav read "ome" and
     "ule Stats" on a phone. `safe center` falls back to start when it would
     overflow, and still centres when everything fits. */
  justify-content: safe center;
}

.simple-nav::-webkit-scrollbar { display: none; }

/* Level 1 — the sections. Heavier than the sub-nav so the two rows
   read as a hierarchy rather than one long wrapped list. */
.site-sections a {
  font-size: 0.95rem;
  color: #1f2a3a !important;
  padding: 8px 12px;
}

.site-sections a.active {
  background: var(--accent-soft, #FDF0E4);
  color: var(--accent-text, #A34F0A) !important;
}

/* Level 2 — pages within the current section, indented under it by a
   hairline rule so the relationship is visible rather than implied. */
.sub-nav {
  border-top: 1px solid #e5e7eb;
  margin-top: 2px;
  padding-top: 3px;
}

.sub-nav a {
  font-size: 0.84rem;
  font-weight: 600;
  color: #5d6b7e !important;
  padding: 7px 10px;
}

.sub-nav a:hover {
  color: var(--accent-text, #A34F0A) !important;
}

.sub-nav a.active {
  background: #f1f5f9;
  color: var(--accent-text, #A34F0A) !important;
}

/* Divider between groups of pages within a section (see _data/nav.yml).
   A rule rather than a gap: at this size a gap alone reads as loose spacing
   rather than as a boundary. */
.sub-nav-sep {
  display: inline-block;
  width: 1px;
  height: 15px;
  margin: 0 7px;
  background: #d7dce3;
  vertical-align: middle;
}

/* Fantasy's league switcher: a segmented control - a soft rounded track with
   the current league raised out of it - so it reads as "which league" rather
   than as three more page links. It sits in its own row (.fl-row) so the
   sub-nav's sideways scroll cannot carry it off screen; on a desktop .fl-line
   puts the two back on one line with a hairline between them. */
.fl-line {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e7eb;
  margin-top: 2px;
  padding-top: 5px;
}

.fl-line .sub-nav {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  min-width: 0;
}

.fl-row {
  flex: 0 0 auto;
  overflow: visible;
  align-items: center;
}

/* The hairline between the leagues and the pages. */
.fl-row::after {
  content: "";
  width: 1px;
  height: 20px;
  margin: 0 14px 0 16px;
  background: #d7dce3;
}

.fl-leagues {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #eef1f5;
  border-radius: 999px;
}

.fl-leagues a.fl-league {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  color: #64748b !important;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.fl-leagues a.fl-league:hover {
  color: #1f2a3a !important;
}

.fl-leagues a.fl-league.active {
  background: #ffffff;
  color: var(--accent-text, #A34F0A) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .04);
}

/* Phones: the switcher heads the sub-nav row rather than taking a row of its
   own. As a full-width track it cost 46px, and beside it the five pages
   wrapped "Analytics" onto a second line - 225px of header on every Fantasy
   page, a quarter of the screen. Two compact chips, the hairline and the
   pages now share one 38px row. The row cannot be dragged sideways (it
   wraps, see MOBILE NAV ROWS), so the switcher can no longer be carried off
   the left edge, which is why it had been split out in the first place. */
@media (max-width: 767px) {
  .fl-line {
    justify-content: center;
    margin-top: 0;
    padding-top: 2px;
  }

  /* Every pixel of the row is spoken for: no row padding, no link margins. */
  .fl-line .simple-nav {
    gap: 0;
    padding: 0;
  }

  .fl-line .simple-nav a {
    margin-right: 0;
  }

  /* The track's own grey already sets the leagues apart from the pages; the
     hairline's 9px is what lets the row fit a 375px phone. */
  .fl-row {
    margin-right: 4px;
  }

  .fl-row::after {
    display: none;
  }

  .fl-leagues {
    padding: 2px;
  }

  .fl-leagues a.fl-league {
    min-width: 0;
    min-height: 40px;
    padding: 0 8px;
    font-size: 0.8rem;
    letter-spacing: .02em;
  }

  .fl-line .sub-nav a {
    padding: 0 4px;
  }
}

@media (prefers-color-scheme: dark) {
  .fl-line { border-top-color: #2b3852; }
  .fl-row::after { background: #2b3852; }
  .fl-leagues { background: #1b2540; }
  .fl-leagues a.fl-league { color: #aab7c9 !important; }
  .fl-leagues a.fl-league:hover { color: #e3eaf4 !important; }
  .fl-leagues a.fl-league.active {
    background: #2b3852;
    color: var(--accent-text, #F5A968) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
}

/* Phones drop the dividers. The sub-nav is built to fit 390px without
   scrolling sideways (see _includes/nav_label.html); three rules and their
   margins are 45px this row does not have, and grouping is the first thing
   worth losing when the alternative is a row you have to drag. */
@media (max-width: 640px) {
  .sub-nav-sep { display: none; }
  /* nav.yml `phone: false`: a link the row above already covers. */
  .sub-nav a.nav-no-phone { display: none !important; }
}

/* Phones: keep both rows, shrink the chrome rather than drop a row.
   Tap targets stay at 40px+ even as the type gets smaller. */
@media (max-width: 640px) {
  .site-sections a {
    font-size: 0.88rem;
    padding: 9px 11px;
  }

  .sub-nav a {
    font-size: 0.8rem;
    padding: 9px 10px;
  }
}

@media (prefers-color-scheme: dark) {
  .site-sections a {
    color: #e3eaf4 !important;
  }

  .site-sections a.active {
    background: var(--accent-soft, #3A2412);
    color: var(--accent-text, #F5A968) !important;
  }

  .sub-nav {
    border-top-color: #2b3852;
  }

  .sub-nav a {
    color: #aab7c9 !important;
  }

  .sub-nav a:hover,
  .sub-nav a.active {
    color: var(--accent-text, #F5A968) !important;
  }

  .sub-nav a.active {
    background: #1e293b;
  }
}

/* ---- carried over from the fantasy football site ---- */

/* Classes only the fantasy page generators emit (src/fantasy/site/layout.py). */

.section-nav {
  margin: 10px 0 18px;
  padding: 10px 14px;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
}

.section-nav a {
  display: inline-block;
  margin: 3px 14px 3px 0;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  /* Explicit, because the inherited link colour sits at 4.11:1 on this
     bar's #f1f5f9 ground — just under AA. */
  color: var(--accent-text, #A34F0A);
}

details.section {
  margin: 14px 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  /* No `overflow: hidden` here. It was only clipping the summary's background
     to the rounded corners, but it also made this element a clipping container,
     which then became the sticky ancestor for anything inside — that is why the
     ADP board's column headers scrolled away instead of pinning to the viewport.
     The corners are cut on the summary itself instead. */
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

details.section > summary {
  border-radius: 11px;
}

details.section[open] > summary {
  border-radius: 11px 11px 0 0;
}

details.section>summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  padding: 12px 14px;
  background: linear-gradient(90deg, #eff6ff, #f8fafc);
  color: #0f172a;
  list-style: none;
}

details.section>summary:hover {
  background: #e2e8f0;
}

details.section>summary::-webkit-details-marker {
  display: none;
}

/* The gap is a margin, not spaces in `content`: the space after a CSS
   escape ends the escape and the next one collapsed, so every summary read
   "▸About these numbers". */
details.section>summary::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 8px;
  color: #64748b;
}

details.section[open]>summary::before {
  content: '\25BE';
  color: #64748b;
}

details.section[open]>summary {
  border-bottom: 1px solid #e5e7eb;
}

details.section>*:not(summary) {
  margin: 10px 14px;
}

.view-switch {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.view-switch .switch-label {
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  min-width: 58px;
}

.view-switch button {
  padding: 6px 14px;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.view-switch button:hover {
  background: #f1f5f9;
}

.view-switch button.active {
  background: var(--accent, #A34F0A);
  color: #fff;
  font-weight: 700;
  border-color: var(--accent, #A34F0A);
}


/* Position pills. Written here rather than inside a generated page's <style>
   because two pages draw them now — the homepage's ADP board and the live
   draft board — and the second one inherited a plain grey "RB" for as long as
   these rules lived in the first one's markup.

   The hues follow Sleeper's, so a board read here and a draft read in the app
   agree about what colour a running back is: deep blue quarterbacks, green
   backs, yellow receivers, orange tight ends, light blue defenses, light purple
   kickers.

   Background and text colour are stated together on every rule, never a shared
   colour on .pos-tag with the backgrounds underneath it: half these hues are
   light enough that white text fails on them, and a rule setting a colour with
   no background of its own is exactly what the readability test flags, because
   nothing tells it what that text lands on. Each pair clears WCAG AA against
   its own background (4.75:1 at worst, most above 6), measured with
   gordstats.contrast — the same module the tests use.

   The base rule carries the grey fallback, so a position nothing here knows
   about still renders as a pill rather than as bare text. */

.pos-tag {
  display: inline-block;
  min-width: 44px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  background: #6b7785;
  color: #fff;
}

.pos-QB { background: #2f52a0; color: #fff; }
.pos-RB { background: #278259; color: #fff; }
.pos-WR { background: #e8b60e; color: #1f2937; }
.pos-TE { background: #f08a2c; color: #1f2937; }
.pos-DST, .pos-DEF { background: #7fb3e3; color: #1f2937; }
.pos-K  { background: #b39ddb; color: #1f2937; }


/* Shared class names, so these stay scoped to fantasy pages and cannot
   change how the CBB or WNBA tables render. */

.sec-fantasy #main_content h1 {
  text-align: center;
  margin: 6px 0 14px;
  letter-spacing: -0.01em;
}

.sec-fantasy .table-scroll table {
  width: auto;
  max-width: none;
  border-collapse: collapse;
}

.sec-fantasy table.sticky-table {
  width: auto;
  max-width: none;
  table-layout: auto;
  border-collapse: collapse;
  margin-right: auto;
}

.sec-fantasy .sticky-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.sec-fantasy .sticky-table thead th:first-child {
  z-index: 4;
}


/* =========================================================
   MOBILE
   The remote theme is a desktop-first design: it sets a 320px
   floor on .inner and spends ~40px of vertical padding plus
   10px gutters before any content. On a 360px phone that floor
   is what pushes the whole page sideways, and the gutters are
   width the tables want.
   ========================================================= */

/* Nothing may exceed the viewport. The theme's min-width floor is the
   one rule that reliably breaks this, so it goes first. */
.inner {
  min-width: 0 !important;
}

img,
svg,
table {
  max-width: 100%;
}

img {
  height: auto;
}

/* Wide content scrolls inside its own box rather than the page. */
.table-scroll,
.simple-nav,
.view-switch {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
  #main_content {
    padding-top: 16px;
    padding-bottom: 10px;
  }

  .custom-inner {
    padding: 14px 8px;
  }

  .site-header-inner {
    padding: 10px 10px 6px 10px;
  }

  /* Tap targets. Anything interactive clears 40px so it can be hit with
     a thumb; the type shrinks but the target does not. */
  .view-switch button,
  details.section > summary,
  .archive-controls button,
  .filter-bar button {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  .view-switch {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
  }

  .view-switch button {
    white-space: nowrap;
  }

  /* Tables get every pixel of width available. */
  .table-scroll {
    border-radius: 8px;
    margin-left: -4px;
    margin-right: -4px;
  }

  details.section {
    margin: 10px 0;
    border-radius: 8px;
  }

  /* The in-page "Jump to" bar becomes a scrollable strip rather than
     four wrapped rows of links. */
  .section-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    margin: 8px 0 14px;
  }

  .section-nav a {
    margin: 0;
    padding: 8px 6px;
    white-space: nowrap;
  }

  /* A flex item that may shrink: "Jump to:" broke over two lines while the
     links beside it scrolled (2026-10-02). */
  .section-nav strong {
    flex: none;
    white-space: nowrap;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }
}

@media (max-width: 380px) {
  .custom-inner {
    padding: 12px 6px;
  }
}


/* =========================================================
   MOBILE NAV
   The header nav used to be hidden below 768px and replaced by a
   fixed 64px bottom bar. That bar now carries the same links as the
   two header rows, so showing the header on phones too would mean
   the same navigation twice and 64px less page.

   The header rows win: they show which sport you're in AND that
   sport's pages, which the bottom bar can only do one of at a time.
   ========================================================= */

@media (max-width: 767px) {
  #nav {
    display: block !important;
  }

  .bottom-nav {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }
}

/* Jump-to links are buttons in practice — give them a thumb-sized target. */
@media (max-width: 767px) {
  .section-nav a,
  .bottom-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}


/* Thumb-sized targets for every control on a phone. Measured in a headless
   browser at 390px: the brand was 29px, the league toggle 32px, and the
   sort chips 22-23px. Links inside running text are deliberately left
   alone — they are prose, not controls. The two header nav rows are sized in
   MOBILE NAV ROWS below, where the rest of their phone styling lives. */
@media (max-width: 767px) {
  .section-nav a,
  .site-brand,
  #league-toggle-btn,
  .sort-chip,
  .archive-controls button,
  .filter-bar button,
  .mv-win,
  .adp-pos,
  /* Measured again 2026-09-29: the invite's links 20px, the Home cards' page
     links 16px. (Sign in is sized with the rest of the account control, where
     the brand row's height caps it.) */
  .gs-invite-links a,
  .home-card-links a {
    min-height: 44px;
    /* border-box, or the padding adds to min-height and a 44px target renders
       62px tall — with two nav rows that alone cost 36px of screen. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The toggle stacks two labels, so it needs the height on the button
     itself rather than on its inline-flex line box. */
  #league-toggle-btn {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Measured 2026-10-02: links that stand alone but were drawn as text - the
     team pages' schedule opponents (16px), the fantasy home's "Matchups ->"
     and "Power ->" (20px), the recap's "Every roster, player by player ->"
     (14px), the watch guide's "College and pro football together ->" (15px).
     Equal padding and negative margin make each a 40px+ target while its
     margin box, and so the line and the row, stay exactly as they were.
     Selectors outrank the pages' own rules, which load after this sheet. */
  table.tm td.tm-name a,
  div.ws-head > a,
  #wg-host > p.wg-note > a:only-child {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
  }

  /* A table row can only lend its own height: the next row paints over
     anything that hangs below it. The team pages' rows were 35px. */
  table.tm td.tm-name {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* The recap's link sits directly on the week chips, which would take the
     lower half of a hanging target; it gets a line of its own height. */
  .rc > p.rc-note > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* The recap's week chips were 34px. */
  nav.rc-weeks a,
  nav.rc-weeks span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    box-sizing: border-box;
  }
}


/* =========================================================
   DARK MODE — controls and labels that were left behind
   Everything here was defined once, for the light theme, on an
   element that has no background of its own (or a translucent
   one). On the dark ground they rendered dark-on-dark: the
   scoreboard sort chips came out at 1.1:1, i.e. invisible.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  /* Live scoreboard controls */
  .sort-chip {
    background: rgba(255, 255, 255, 0.10);
    color: #dde5ef;
  }

  .sort-chip:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  .status {
    color: #aab7c9;
  }

  .team strong,
  .league-toggle a.active {
    color: #e3eaf4;
  }

  /* Season countdown pills */
  .time-pill span,
  .pill-label {
    color: #e3eaf4;
  }

  /* Projections read as the accent, which needs lifting off the dark ground */
  .value.better,
  .projected,
  .projected.proj-leader,
  .max-games.proj-total strong {
    color: #6ee7b7;
  }

  /* Muted labels */
  .bracket-team.tbd .bteam-name,
  summary.team-report-header::after,
  .no-games {
    color: #aab7c9;
  }
}


/* =========================================================
   DARK MODE — components carried over from the fantasy site
   These came across as global rules because the classes are
   only emitted by the fantasy generators. They were written
   for a light-only site, so each paints a light box that the
   dark theme then fills with light text: body copy inside
   details.section measured 1.27:1 and headings 1.10:1, which
   is the "white on white" in the draft page's drop-downs.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  details.section {
    background: #1b2540;
    border-color: #2b3852;
    box-shadow: none;
  }

  details.section > summary {
    background: linear-gradient(90deg, #223052, #1b2540);
    color: #e3eaf4;
  }

  details.section > summary:hover {
    background: #26365c;
  }

  /* The in-page "Jump to" bar */
  .section-nav {
    background: #1b2540;
    border-color: #2b3852;
  }

  .section-nav a {
    color: #aab7c9;
  }

  .section-nav a:hover {
    color: #F5A968;
  }

  /* View switchers (season / round / position pills) */
  .view-switch button {
    background: #1b2540;
    border-color: #2b3852;
    color: #dde5ef;
  }

  .view-switch button:hover {
    background: #26365c;
  }

  .view-switch button.active {
    background: var(--accent, #A34F0A);
    color: #ffffff;
  }

  .view-switch .switch-label {
    color: #aab7c9;
  }

  /* Headings inside a carried-over box inherit the dark theme's light
     colour, which only works now that the box itself is dark. */
  details.section h2,
  details.section h3,
  details.section h4 {
    color: #f1f5f9;
  }
}


/* Keyboard users otherwise tab through both nav rows on every page before
   reaching anything. Visible only while focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  padding: 10px 14px;
  background: #1B2340;
  color: #ffffff;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}


/* =========================================================
   MOBILE HEADER
   The header is a flex row: brand on the left, both nav rows
   on the right. At 390px that left the nav 214px to work in,
   so it scrolled sideways mid-word and the whole header stood
   183px tall — nearly a quarter of the screen.

   Stacking gives each row the full width, and the rows scroll
   independently rather than the block scrolling as one.
   ========================================================= */

@media (max-width: 767px) {
  /* Phones: the header scrolls away with the page instead of staying pinned.
     Pinned, it stood 127-225px tall, and a page's own pinned controls stacked
     under it: on /cfb/usage/ the two together covered 475px of an 844px
     screen, leaving about nine rows of table. The page's own pin-bar (the week
     chips, the filters) is the chrome worth keeping in reach, and the nav is
     one flick back to the top. `relative`, not `static`, so its z-index still
     lifts the account menu over the page. The layout's measuring script reads
     this and sets --header-h to 0, so everything that pinned under the header
     now pins to the top of the screen. */
  #site-header {
    position: relative;
  }

  .site-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 10px;
  }

  /* The brand is the one thing here that isn't really a tap target, so it
     does not need the 44px the nav links do. */
  .site-brand {
    font-size: 1rem;
    padding: 0;
    min-height: 32px;
    align-self: flex-start;
  }

  #nav {
    width: 100%;
  }

  /* The desktop rule gives each row 12px of bottom margin. Across two rows
     plus the brand that is 28px of empty header on a 780px screen. */
  .site-sections,
  .sub-nav {
    margin: 0;
  }
}


/* =========================================================
   MOBILE NAV ROWS
   Two things made these rows hard to use on a phone.

   1. Every link carried a soft #fafafa card left over from the
      one-row nav. Against the dark theme's near-white link text
      that measured 1.1:1 — the links were there but unreadable —
      and in either theme four identical cards made the current
      page indistinguishable from the rest.

   2. Each card was pinned to min-width:110px, so four sections
      wanted 462px inside a 370px row and the sub-nav 578px. Both
      rows overflowed on every page and had to be dragged sideways
      to reach half the site, with nothing on screen to say so.

   The links now size to their text, in the short form from
   nav.yml ("CBB", not "College Basketball"), which fits both rows
   on a phone with room to spare; they share the leftover width so
   the targets stay thumb-sized. Only the current page is filled
   in, so "where am I" is one glance.
   ========================================================= */

/* The full titles need about 900px between the two rows — at 768px, where the
   header goes back to one line with the brand and the toggle beside it, the
   CBB sub-nav still wanted 150px more than it had. So the swap point is the
   width where the long titles actually fit, not the phone breakpoint. */
.nav-short {
  display: none;
}

@media (max-width: 899px) {
  .nav-full {
    display: none;
  }

  .nav-short {
    display: inline;
  }
}

/* A row is only faded when it genuinely overflows — the script adds these —
   so they are not restricted to phones. */
.simple-nav.scroll-start {
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.simple-nav.scroll-mid {
  mask-image: linear-gradient(to right, transparent, #000 28px calc(100% - 28px), transparent);
}

.simple-nav.scroll-end {
  mask-image: linear-gradient(to right, transparent, #000 28px);
}

@media (max-width: 767px) {
  /* Each row is still a scroll container in case a section ever outgrows the
     width, but nothing overflows at 320px today. The links divide whatever is
     left over between them rather than clustering in the middle. */
  .simple-nav {
    gap: 4px;
    padding: 0 6px;
    scroll-padding-inline: 12px;
  }

  .site-sections a,
  .sub-nav a {
    /* Grow into free space, never shrink below the label — a shrunk link
       would clip its own text, which is what "ome" and "ule Stats" were. */
    flex: 1 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: transparent;
    box-shadow: none;
    border-radius: 8px;
    scroll-snap-align: center;
  }

  .site-sections a {
    font-size: 0.86rem;
    padding: 0 10px;
    min-height: 42px;
  }

  .sub-nav a {
    font-size: 0.8rem;
    padding: 0 9px;
    min-height: 38px;
  }

  .sub-nav {
    padding-top: 2px;
    /* Wrap onto a second line rather than scroll sideways. A scrolling row
       puts pages off the edge with nothing to say they are there - and the
       reveal script, centring the current page, pushed the first ones out of
       reach - which is how the Fantasy section's seven links became four. */
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    row-gap: 2px;
  }

  /* Wrapped, not scrolled: a link sizing itself up to fill the row would leave
     one item stretched across the second line. */
  .sub-nav a {
    flex: 0 1 auto;
  }

  /* The current page, filled. Everything else is plain text on the header,
     so the fill is the only shading in the rows and reads as position. */
  .site-sections a.active {
    background: #1B2340;
    color: #ffffff !important;
    font-weight: 800;
  }

  .sub-nav a.active {
    background: var(--accent-soft, #FDF0E4);
    color: var(--accent-text, #A34F0A) !important;
  }

  /* Held down, so a tap has some feedback where :hover means nothing. */
  .site-sections a:active,
  .sub-nav a:active {
    background: #e8edf5;
  }

}

/* Small phones. The CBB sub-nav is five items; at 320px it wanted 36px more
   than the screen has, so the padding comes off before anyone has to scroll
   a row that is nearly fitting. */
@media (max-width: 360px) {
  .simple-nav {
    gap: 2px;
    padding: 0 4px;
  }

  .site-sections a {
    font-size: 0.82rem;
    padding: 0 7px;
  }

  .sub-nav a {
    font-size: 0.76rem;
    padding: 0 5px;
  }
}

/* 320px. The college and NFL rows were 2px short of one line, so "Schedule"
   (CFB) and "Stats" (NFL) wrapped onto a second; the fantasy row, which shares
   its line with the league switcher, was 29px short and dropped "Usage"
   (2026-10-02). The links' leftover 4px margins go (the row's gap already
   spaces them), and the fantasy links and league chips give up side padding -
   never type size, which stays at the 12px floor. */
@media (max-width: 340px) {
  .sub-nav a {
    margin-right: 0;
  }

  .fl-line .sub-nav a {
    padding: 0 2px;
  }

  /* Some slack for a phone whose font sets a hair wider than the 214px the
     five links measured here. */
  .fl-leagues a.fl-league {
    padding: 0 4px;
  }

  .fl-row {
    margin-right: 2px;
  }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .site-sections a.active {
    background: #EE8434;
    color: #1B2340 !important;
  }

  .sub-nav a.active {
    background: var(--accent-soft, #3A2412);
    color: var(--accent-text, #F5A968) !important;
  }

  .site-sections a:active,
  .sub-nav a:active {
    background: #26365c;
  }
}


/* =========================================================
   CHARTS (gordstats.charts)
   The matplotlib PNGs are drawn 800-990px wide on white. Slate
   framed each one like a photo (5px padding, a border, on top of
   max-width:100% - which also panned the page 2px on a phone), and
   squeezed into a 370px screen their 9-10pt labels came out at
   about 6px. The frame is gone; on a phone the chart is shown up
   to 640px wide in its own swipeable box, where the labels read
   at about 10px, and the page itself still never pans.
   ========================================================= */
img.gs-chart {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

@media (max-width: 700px) {
  .gs-chart-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Never wider than it was drawn: a 600px chart stays 600px. */
  .gs-chart-box img.gs-chart {
    max-width: 640px;
  }
}

/* The charts keep their white ground and dark ink in dark mode - a light
   card, like the draft grid - dimmed so it does not glare off the page. */
@media (prefers-color-scheme: dark) {
  img.gs-chart {
    filter: brightness(0.88);
  }
}


/* =========================================================
   WIDE TABLES ON A PHONE
   Every wide table already scrolls inside its own box, so the
   page never pans sideways. What was missing is any sign that
   the box scrolls at all — measured at 390px, the schedule grid
   runs 1263px past its right edge, the draft board 906px, the
   ADP board 481px, and each one simply looked cut off.

   The classes here are set by assets/js/table-scroll.js, which
   only marks a box whose content actually overflows, so none of
   this shows on a desktop or beside a table that fits.
   ========================================================= */

.table-scroll,
.table-container,
.adp-wrap,
.ld-wrap {
  position: relative;                 /* the hint anchors to the box */
}

/* The season / round switchers and the in-page "Jump to" bar scroll sideways
   for the same reason the tables do, and were just as silent about it. */
.view-switch,
.section-nav {
  scroll-padding-inline: 12px;
}

/* `mask` rather than a gradient overlay: an overlay would sit above the table
   and swallow taps on the last column, and would need repainting in the dark
   theme.

   Only the trailing edge fades. Fading the leading edge as well — the obvious
   symmetric version — dimmed the frozen identity column, which is pinned at
   that edge: mid-scroll on the schedule grid, "PROFESSIONAL FRAT…" and
   "LOTTA COX" lost their first letters to it. The frozen column is the one
   thing that has to stay solid, and there is nothing to hint at on the left
   anyway, since the reader has already been there. */
.table-scroll.scroll-start,
.table-container.scroll-start,
.adp-wrap.scroll-start,
.ld-wrap.scroll-start,
.view-switch.scroll-start,
.section-nav.scroll-start,
.gs-chart-box.scroll-start,
.table-scroll.scroll-mid,
.table-container.scroll-mid,
.adp-wrap.scroll-mid,
.ld-wrap.scroll-mid,
.view-switch.scroll-mid,
.section-nav.scroll-mid,
.gs-chart-box.scroll-mid {
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* Said once, in words, for the tables where the fade alone understates how
   much is off screen. It leaves for good the first time the reader scrolls. */
.scroll-hint {
  position: sticky;
  left: 0;
  z-index: 5;
  display: none;                      /* phones only — see below */
  width: max-content;
  margin: 0 0 4px 2px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(27, 35, 64, 0.86);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (max-width: 767px) {
  .is-scrollable > .scroll-hint {
    display: block;
  }

  .scrolled-once > .scroll-hint {
    opacity: 0;
  }

  /* The frozen identity column was 180px on a 390px screen, so the column you
     already know took more of the width than every number you came to read.
     150px still fits "Kraft YAC-N-Chee" before the ellipsis. */
  .sticky-table td:first-child,
  .sticky-table th:first-child {
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tables that never got a frozen column: scrolling right on these lost the
     round, or the player, that the row belonged to. */
  .draft-board tbody th:first-child,
  .draft-board thead th:first-child,
  .pickups-table tbody td:first-child,
  .pickups-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #eef2f7;
  }

  .draft-board tbody th:first-child,
  .draft-board thead th:first-child {
    box-shadow: 2px 0 4px -2px rgba(15, 23, 42, 0.3);
  }

  .draft-board thead th:first-child,
  .pickups-table thead th:first-child {
    z-index: 4;
  }

  /* The pickups table leads with a row number, so freezing "the first column"
     froze a counter and let the player's name scroll away — the one thing the
     row is about. The number is pinned narrow and the name pinned beside it,
     which together cost less width than the 150px identity column elsewhere. */
  .pickups-table thead th:first-child,
  .pickups-table tbody td:first-child {
    width: 24px;
    min-width: 24px;
    max-width: 24px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: right;
  }

  .pickups-table thead th:nth-child(2),
  .pickups-table tbody td:nth-child(2) {
    position: sticky;
    /* Set by assets/js/table-scroll.js from the rendered width of the number
       column; the fallback only has to be close for the first paint. */
    left: var(--pin-2nd, 33px);
    z-index: 3;
    min-width: 118px;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #ffffff;
    box-shadow: 2px 0 4px -2px rgba(15, 23, 42, 0.3);
  }

  .pickups-table thead th:nth-child(2) {
    z-index: 4;
    background: #eef2f7;
  }

  /* Type floor. Measured on a phone: the countdown labels were 9.6px, the
     bracket seeds 10.9px, the scoreboard sort chips 11px. Data cells hold at
     12px — smaller buys a column and costs the reader the row. */
  .pill-label,
  .time-pill span {
    font-size: 11px;
  }

  .bseed,
  .ff-badge,
  .game-badge {
    font-size: 11px;
  }

  .sort-chip {
    font-size: 12px;
  }

  .pickups-table th,
  .pickups-table td {
    font-size: 12px;
  }

  /* iOS zooms the whole page in when a focused control's text is under 16px,
     and it does not zoom back out. The filter bar already had this; the ADP
     search and the season / archive pickers did not. */
  input[type="search"],
  input[type="text"],
  select {
    font-size: 16px;
  }

  /* Those controls are also targets. Measured on a phone: the ADP search box
     was 30px, the season and team pickers 32-36px. Named by element rather
     than by the bar they sit in — the WNBA team picker sits in none of them
     and was missed by an earlier, tidier-looking list. */
  select,
  input[type="search"],
  input[type="text"],
  /* Named explicitly: `.filter-bar select` pins min-height to 36px and outranks
     a bare `select`, which is why the conference and period pickers stayed
     short after the rule above was added. */
  .filter-bar select {
    min-height: 44px;
    box-sizing: border-box;
  }

  /* The card CTAs ("League dashboard →") measured 20px. They are the way into
     each section from the homepage, so they get a target rather than staying
     a bare line of text. The padding is vertical only: these sit inline
     beside a heading, and horizontal padding would break that line up. */
  .home-card-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  .pickups-table tbody td:nth-child(2) {
    background: #1b2540;
  }

  .pickups-table tbody td:first-child,
  .pickups-table thead th:first-child,
  .pickups-table thead th:nth-child(2) {
    background: #223052;
  }

  /* The draft board is deliberately absent here. It is a light island — its
     cells keep the pick's position colour and black text in the dark theme —
     so painting the frozen round column #223052 left #334155 text on it at
     1.26:1. The column keeps the light background the rest of that table has. */

  .scroll-hint {
    background: rgba(238, 132, 52, 0.92);
    color: #1B2340;
  }
}


/* =========================================================
   COUNTDOWN CARD
   One clock, three placements: inside the college basketball
   and fantasy boxes on the homepage, and at the top of each
   of those sections' own pages.

   The look is the fantasy draft banner's, which was defined in
   Python (fantasy/site/upcoming.py) and so could only ever
   appear on a Python-generated page. The college basketball
   clock was a separate hand-written include with its own pills
   and its own black-on-dark type. Both now render from
   _includes/countdown.html against the rules here.
   ========================================================= */

.countdown-card {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #141B33, #2A3557);
  color: #ffffff;
  text-align: center;
  box-shadow: 0 2px 8px rgba(27, 35, 64, 0.25);
}

/* These three are <p>, and the card's own white is inherited — which is not
   enough inside a homepage box, where `.home-card p` sets a slate #475569 and
   outranks it. That put the eyebrow and the date at about 2.4:1 on the navy
   while the same card read correctly on its own page. Stated on the card's own
   selectors so no container can win. */
.countdown-card .countdown-eyebrow,
.countdown-card .countdown-title,
.countdown-card .countdown-note {
  color: #ffffff;
}

/* The same trap for the "games on right now" line the CFB card shows in
   place of a clock: .countdown-done alone lost to `.home-card p` and read
   #475569 on navy, about 2:1. */
.countdown-card .countdown-done {
  color: #F5A968;
}

.countdown-eyebrow {
  margin: 0 0 4px;
  font-size: 15px;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.countdown-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
}

/* Four columns rather than a wrapping flex row. Flexed, the units are sized by
   their padding and min-width, which at 390px inside a homepage box came to
   322px against 305px of room — so Seconds dropped to a second row on its own
   and the clock read as three units and an orphan. A grid divides whatever
   width there is by four and keeps one row down to 320px. */
.countdown-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  justify-items: stretch;
  max-width: 420px;
  margin: 0 auto;
}

.countdown-unit {
  box-sizing: border-box;             /* or the padding is added to the track */
  padding: 8px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.countdown-num {
  font-size: 28px;
  font-weight: 700;
  font-family: monospace;
  line-height: 1.1;
  color: #F5A968;
}

.countdown-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.8;
}

.countdown-note {
  margin: 10px 0 0;
  font-size: 13px;
  opacity: 0.8;
}

/* Swapped in for the units when the date passes with the page open. */
.countdown-done {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #F5A968;
}

/* The clocks used to sit side by side in a .countdown-strip across the top of
   the homepage; they now live inside their sport's preview box, so the grid
   that paired them, and the rule that silenced the second card's "shown in
   your local time" line, went with the strip. Two boxes apart, the note is not
   the stutter it was when the cards were adjacent. */

@media (max-width: 600px) {
  .countdown-card {
    margin: 10px 0 14px;
    padding: 14px 10px;
  }

  .countdown-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .countdown-eyebrow {
    font-size: 13px;
  }

  .countdown-units {
    gap: 6px;
  }

  .countdown-unit {
    padding: 6px 4px;
  }

  .countdown-num {
    font-size: 24px;
  }

  .countdown-note {
    font-size: 12px;
  }

}

@media (max-width: 360px) {
  .countdown-units {
    gap: 4px;
  }

  .countdown-num {
    font-size: 20px;
  }
}


/* =========================================================
   FILTER CONTROLS (.adp-controls)
   The position chips, search box and count above a player table. Used by
   the homepage ADP board and the live draft board; lived in the homepage
   module until the live board turned out to be rendering the same markup as
   bare browser buttons.
   ========================================================= */
.adp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.adp-controls .adp-label {
  font-weight: bold;
  font-size: 14px;
}

.adp-controls button {
  padding: 6px 14px;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.adp-controls button:hover {
  background: #f1f5f9;
}

.adp-controls button.active {
  background: var(--accent, #A34F0A);
  color: #fff;
  font-weight: 700;
  border-color: var(--accent-dark, #8A420A);
}

.adp-controls input,
.adp-controls select {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #0f172a;
}

.adp-controls input {
  min-width: 170px;
}

@media (max-width: 600px) {
  .adp-controls {
    gap: 6px;
    margin: 8px 0;
  }

  /* Narrower, but still a thumb-sized target — shrinking these to 28px
     made them hard to hit on the screen they exist for. */
  .adp-controls button {
    padding: 5px 9px;
    min-height: 44px;
  }

  .adp-controls input {
    min-width: 0;
    flex: 1 1 100%;
  }

  .adp-controls select {
    flex: 0 0 auto;
  }

  /* The "223 available (top 75 shown)" count takes its own line rather than
     wrapping mid-phrase beside the search box. */
  .adp-controls .adp-label.adp-count {
    flex: 1 1 100%;
    font-weight: normal;
  }
}

@media (prefers-color-scheme: dark) {
  .adp-controls button {
    background: #1b2540;
    border-color: #2b3852;
    color: #dde5ef;
  }

  .adp-controls button:hover {
    background: #26365c;
  }

  .adp-controls button.active {
    background: var(--accent, #A34F0A);
    border-color: var(--accent-dark, #8A420A);
    color: #fff;
  }

  .adp-controls input,
  .adp-controls select {
    background: #1b2540;
    border-color: #2b3852;
    color: #dde5ef;
  }

  .adp-controls input::placeholder {
    color: #8b99ad;
  }
}


/* =========================================================
   PER-SPORT ACCENT
   The layout stamps <body class="sec-cfb|sec-fantasy|sec-wnba|sec-cbb|sec-home">,
   and every accent-coloured control on the site (active nav pill, active
   filter chips and view-switch buttons, section-nav links, dashboard
   button) reads these variables instead of the hard-coded orange, so a
   section can carry its own tint without any page knowing. The default is
   the site's orange, which home and college basketball keep; football is
   green, fantasy blue, the WNBA a deep red. Each light accent clears 4.5:1
   on the #f1f5f9 chip and nav grounds; the dark-theme text tints clear it
   on #16203a.
   ========================================================= */

body {
  --accent: #A34F0A;
  --accent-dark: #8A420A;
  --accent-soft: #FDF0E4;
  --accent-text: #A34F0A;
}

body.sec-cfb {
  --accent: #1f6f43;
  --accent-dark: #165233;
  --accent-soft: #e4f3ea;
  --accent-text: #1f6f43;
}

body.sec-fantasy {
  --accent: #2a5db0;
  --accent-dark: #1e4a8f;
  --accent-soft: #e6eefb;
  --accent-text: #2a5db0;
}

body.sec-wnba {
  --accent: #b3382c;
  --accent-dark: #8f2b22;
  --accent-soft: #fbe9e6;
  --accent-text: #b3382c;
}

@media (prefers-color-scheme: dark) {
  body {
    --accent-soft: #3A2412;
    --accent-text: #F5A968;
  }

  body.sec-cfb {
    --accent-soft: #14331f;
    --accent-text: #6fd39a;
  }

  body.sec-fantasy {
    --accent-soft: #172a4a;
    --accent-text: #8ab4ff;
  }

  body.sec-wnba {
    --accent-soft: #3a1512;
    --accent-text: #ff9b91;
  }
}

/* The section shows in the chrome, not only on the active control: a stripe
   along the top of the header, the brand's rule, the sub-nav strip, the page
   title and (where a page opts in with --accent-soft) table headers. */
#site-header {
  border-top: 3px solid var(--accent, #A34F0A);
}

.site-brand span::before {
  background: var(--brand-bar, #EE8434);
}

body.sec-cfb, body.sec-fantasy, body.sec-wnba {
  --brand-bar: var(--accent);
}

/* The current page in the sub-nav gets an accent underline rather than a
   filled strip: the strip read as a heavy block across the header. */
.sub-nav a.active {
  box-shadow: inset 0 -2px 0 var(--accent, #A34F0A);
  border-radius: 6px 6px 0 0;
}

#main_content h1 {
  color: var(--accent-dark, #8A420A);
}

/* The line under a generated page's title (gordstats.frontmatter). It was an
   <h3>, 21px bold on a phone under a 24px title, so it read as a second
   heading; it is a caption. Pulled up to the title it belongs to. */
#main_content .page-sub {
  margin: -8px 0 16px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--gs-muted);
}

@media (prefers-color-scheme: dark) {
  .sub-nav a.active {
    box-shadow: inset 0 -2px 0 var(--accent-text, #F5A968);
  }

  #main_content h1 {
    color: var(--accent-text, #F5A968);
  }
}

/* =========================
   TEAM FAVOURITES
   Star a team, the row tints; the filter in the pin bar hides the rest.
   Markup comes from gordstats.favorites, behaviour from favorites.js.
   ========================= */

/* The star sits in the team cell beside the name, never inside its link.
   Sized in em so it tracks whichever table it lands in - the CFB power table
   runs 14px, the CBB one a little larger. */
.fav-star {
  background: none;
  border: 0;
  padding: 0 0 0 6px;
  margin: 0;
  cursor: pointer;
  font-size: 1.05em;
  line-height: 1;
  /* Muted, but never invisible. An earlier version faded these to opacity 0
     until the row was hovered, which read as a tidier table and meant a
     reader had no way to discover the feature existed - and no way at all on
     a device with no hover. Quiet is the most it gets to be - and quiet
     still clears 3:1, which #9aa4b5 (2.3-2.5:1) did not (2026-10-02). */
  color: #7c8799;
  vertical-align: baseline;
  transition: color .12s ease, transform .12s ease;
}

/* Stronger under the cursor, on the keyboard, and once it means something. */
tr:hover .fav-star {
  color: #6b7590;
}

.fav-star:hover {
  color: var(--accent, #A34F0A);
}

.fav-star.is-on {
  color: var(--accent, #A34F0A);
}

.fav-star:focus-visible {
  outline: 2px solid var(--accent, #A34F0A);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Phones: the star is a thumb target. As drawn it was 18x14px - a tap had to
   land on the glyph itself. Padding makes the button about 40px square and
   equal negative margins take the padding back out of the layout, so the
   glyph, its 6px gap from the name and the row height stay exactly as they
   were. Lifted so the next cell does not paint over the widened target. */
@media (max-width: 767px) {
  .fav-star {
    position: relative;
    z-index: 1;
    padding: 13px 18px 13px 10px;
    margin: -13px -18px -13px -4px;
  }

  .fav-filter {
    min-height: 40px;
  }
}

/* Highlight for anything that isn't a table row - the predictions page marks
   <article> game cards. Table rows are styled per table by
   favorites.table_css(), which has to win a cascade fight those tables set up;
   nothing else on the page does, so one rule covers the rest. */
.is-fav:not(tr) {
  box-shadow: inset 3px 0 0 var(--accent, #A34F0A);
  background: #f4ece2;
  background: color-mix(in srgb, var(--accent, #A34F0A) 10%, #ffffff);
}

/* The filter control, dropped into a page's existing .pin-bar. */
.fav-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

/* Shown until the reader has starred something, then replaced by the filter.
   Without it the stars are a control nobody is told about. */
.fav-hint {
  font-size: 12px;
  color: #64748b;
}

.fav-hint .fav-hint-star {
  color: var(--accent, #A34F0A);
  font-size: 13px;
}

.fav-filter {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 5px 10px;
  border: 1px solid #d6dbe3;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}

.fav-filter:hover {
  border-color: var(--accent, #A34F0A);
  color: var(--accent-text, #A34F0A);
}

.fav-filter.is-on {
  background: var(--accent, #A34F0A);
  border-color: var(--accent, #A34F0A);
  color: #fff;
}

.fav-filter:focus-visible {
  outline: 2px solid var(--accent, #A34F0A);
  outline-offset: 2px;
}

.fav-count {
  font-size: 12px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .fav-star { transition: none; }
}

@media (prefers-color-scheme: dark) {
  .fav-star { color: #7f8ba3; }

  tr:hover .fav-star { color: #a9b4c9; }

  .fav-star:hover,
  .fav-star.is-on { color: var(--accent-text, #F5A968); }

  .fav-hint { color: #94a3b8; }

  .fav-hint .fav-hint-star { color: var(--accent-text, #F5A968); }

  .fav-filter {
    background: #1b2540;
    border-color: #2b3852;
    color: #cbd5e1;
  }

  .fav-filter.is-on {
    background: var(--accent-text, #F5A968);
    border-color: var(--accent-text, #F5A968);
    color: #14203a;
  }

  .fav-count { color: #94a3b8; }

  .is-fav:not(tr) {
    box-shadow: inset 3px 0 0 var(--accent-text, #F5A968);
    background: #33281c;
    background: color-mix(in srgb, var(--accent-text, #F5A968) 16%, #14203a);
  }
}


}

/* =========================
   ACCOUNT CONTROL (header, top right)
   Filled by favorites.js from /api/me; hidden where accounts are not
   configured, so the header is unchanged on a deploy without the secrets.
   ========================= */

.site-account {
  /* Pushes itself to the far end of the header row, whatever is to its left. */
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

a.acct-link {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid #d6dbe3;
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color .12s ease, color .12s ease;
}

a.acct-link:hover {
  color: var(--accent-text, #A34F0A);
  border-color: var(--accent, #A34F0A);
}

a.acct-link:focus-visible,
.acct-badge:focus-visible {
  outline: 2px solid var(--accent, #A34F0A);
  outline-offset: 2px;
}

/* Signed in: an initial, with the menu behind it. */
.acct { position: relative; }

.acct-badge {
  list-style: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent, #A34F0A);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
  user-select: none;
}

/* Safari draws its own disclosure triangle on summary without this. */
.acct-badge::-webkit-details-marker { display: none; }
.acct-badge::marker { content: ""; }

.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  padding: 12px 14px;
}

.acct-email {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  /* An address longer than the menu must wrap, not spill out of it. */
  overflow-wrap: anywhere;
}

.acct-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

/* Two links, one under the other. As inline anchors they had no separation
   at all and the menu read "Your profileSign out"; as rows they also get a
   thumb-sized tap target, which is what a phone needs anyway. */
a.acct-out {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text, #A34F0A);
  text-decoration: none;
}

a.acct-out + a.acct-out { border-top: 1px solid #eef1f6; }

a.acct-out:hover { text-decoration: underline; }

/* On a phone the header already wraps to three rows, and a flex item with
   margin-left:auto lands at the start of a new one - which put "Sign in"
   under the nav, left-aligned, as a row of its own. Pinning it to the corner
   instead uses the empty space beside the brand on row one, and takes it out
   of the wrap entirely. */
@media (max-width: 600px) {
  .site-header-inner { position: relative; }

  .site-account {
    position: absolute;
    top: 3px;
    right: 14px;
    margin-left: 0;
  }

  /* As tall as the brand row allows and no taller: at 44px it hung over the
     section links below (2026-09-29). */
  a.acct-link {
    padding: 0 12px;
    font-size: 12.5px;
    min-height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  .acct-badge { width: 27px; height: 27px; font-size: 12px; }
  .acct-menu { min-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  a.acct-link { transition: none; }
}

@media (prefers-color-scheme: dark) {
  a.acct-link { color: #cbd5e1; border-color: #2b3852; }
  a.acct-link:hover {
    color: var(--accent-text, #F5A968);
    border-color: var(--accent-text, #F5A968);
  }
  .acct-badge { background: var(--accent-text, #F5A968); color: #14203a; }
  .acct-menu { background: #1b2540; border-color: #2b3852; }
  .acct-email { color: #e9ecf4; }
  .acct-note { color: #94a3b8; }
  a.acct-out { color: var(--accent-text, #F5A968); }
  a.acct-out + a.acct-out { border-top-color: #2b3852; }
}


/* ---------- the signed-out invitation ---------- */
/* One line at the top of the page saying what an account is for. It is the
   only thing on the site that asks the reader for anything, so it stays quiet:
   a tinted card rather than a coloured bar, and a dismiss that is remembered. */
.gs-invite {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 0 0 18px;
  padding: 10px 40px 10px 14px;
  background: #f6f8fc;
  border: 1px solid #e2e8f2;
  border-left: 3px solid var(--accent, #C2410C);
  border-radius: 8px;
}

.gs-invite-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #334155;
}

.gs-invite-links {
  margin: 0;
  display: flex;
  gap: 14px;
  white-space: nowrap;
}

.gs-invite-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-text, #A34F0A);
  text-decoration: none;
}

.gs-invite-links a:hover { text-decoration: underline; }

.gs-invite-shut {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  color: var(--gs-muted);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.gs-invite-shut:hover { color: #334155; background: #e9eef7; }

@media (max-width: 600px) {
  /* One run of text with its link at the end, not a sentence and then a row
     of links: 110px of every page's top became about 60 (2026-09-29). */
  .gs-invite { display: block; padding: 9px 40px 9px 12px; }
  .gs-invite-text { font-size: 13px; display: inline; }
  .gs-invite-links { display: inline; margin-left: 6px; }
  .gs-invite-links .gs-invite-more { display: none; }
  /* Inline, with padding that grows the finger's target but not the line. */
  .gs-invite-links a { min-height: 0; display: inline; padding: 10px 6px; }
}

@media (prefers-color-scheme: dark) {
  .gs-invite { background: #1b2540; border-color: #2b3852; }
  .gs-invite-text { color: #cbd5e1; }
  .gs-invite-links a { color: var(--accent-text, #F5A968); }
  .gs-invite-shut { color: #7c8aa3; }
  .gs-invite-shut:hover { color: #e9ecf4; background: #24304d; }
}

/* =========================
   SHARE BUTTON
   A page's link, sent to a chat: the phone's share sheet where there is one,
   a copied link where there is not (gordstats/share_button.py writes it,
   assets/js/share.js sends it). Thumb-sized on a phone.
========================= */
.gs-share-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.gs-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
}

.gs-share:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.gs-share:focus-visible {
  outline: 2px solid var(--accent, #C2410C);
  outline-offset: 2px;
}

.gs-share.done {
  border-color: #16a34a;
  color: #15803d;
}

@media (max-width: 767px) {
  .gs-share {
    min-height: 40px;
  }
}

@media (prefers-color-scheme: dark) {
  .gs-share {
    background: #16203a;
    border-color: #2b3852;
    color: #e8eef7;
  }

  .gs-share:hover {
    background: #1b2540;
    border-color: #3d4d6b;
  }

  .gs-share.done {
    border-color: #4ade80;
    color: #4ade80;
  }
}


/* =========================================================
   STICKY TABLE HEADERS (assets/js/stickyhead.js)
   The copy of a long table's header row drawn under the pinned controls
   while the real one is scrolled away. It clips to the table's scroller and
   slides with it; the table's own th rules paint it.
   ========================================================= */
.gs-sticky-head {
  position: fixed;
  z-index: 19;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
  pointer-events: auto;
}

.gs-sticky-head th {
  cursor: pointer;
}

/* The favourites hint ("Tap a star to follow a team") was a third row of
   pinned chrome on a phone - 139px of bar on /cfb/power/, and the only thing
   in /cbb/power/'s. The stars in the rows say the same thing once seen. */
@media (max-width: 767px) {
  .pin-bar .fav-hint {
    display: none;
  }
  /* Nothing starred: nothing to filter, so no box - and a pinned bar that
     held only this is no bar at all. */
  .pin-bar .fav-controls:has(> .fav-filter[hidden]) {
    display: none;
  }
  .pin-bar:has(> .fav-controls:only-child > .fav-filter[hidden]) {
    display: none;
  }
}


/* =========================================================
   HOW THIS WORKS (gordstats/how.py, assets/js/gs-how.js)
   The small "How this works" chip beside a heading or control, and the
   dialog it opens: the explainer page's article, fetched once. The chip is
   a link to /how/<topic>/ - all it is without the script. Its box is 40px
   tall for a thumb; the pill drawn inside is 26px, and the negative margins
   keep it from making the heading's line taller.
   ========================================================= */
.gs-how {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  min-width: 40px;
  margin: -7px 0 -7px 4px;
  padding: 0 2px;
  vertical-align: middle;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--gs-muted, #5d6b7e);
  -webkit-tap-highlight-color: transparent;
}

.gs-how-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 6px;
  border: 1px solid #d5dde8;
  border-radius: 999px;
  background: #ffffff;
}

.gs-how-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10.5px;
  font-weight: 700;
  font-style: italic;
}

.gs-how:hover .gs-how-chip {
  border-color: #94a3b8;
  color: #0f172a;
}

.gs-how:focus-visible {
  outline: none;
}

.gs-how:focus-visible .gs-how-chip {
  outline: 2px solid var(--accent, #C2410C);
  outline-offset: 2px;
}

/* A line of its own, under a section: "How these are made". */
/* A heading with a chip. The title stays centered on the page - centered as a
   group with the chip, it sat left of every heading without one - and the
   pill, taller than the heading's letters, keeps clear of the theme's dotted
   rule, which is drawn at the bottom of the text line (bg_hr.png's dots are
   10px up a 21px image; h2 has 10px of bottom padding). Three columns, the
   outer two equal, center the title exactly with the chip just after it; on
   a phone the title and chip stay inline, where a fixed side column would
   squeeze a long title. Home's card heads are left-aligned rows: left alone. */
:is(h1, h2, h3):has(> .gs-how) {
  padding-bottom: 16px;
}

@media (min-width: 641px) {
  :is(h1, h2, h3):has(> .gs-how):not(.home-card-head h2) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 10px;
  }

  :is(h1, h2, h3):has(> .gs-how):not(.home-card-head h2)::before {
    content: "";
  }

  :is(h1, h2, h3):has(> .gs-how):not(.home-card-head h2) > .gs-how {
    justify-self: start;
    margin: -7px 0;
  }
}

.gs-how-note {
  margin: 4px 0 12px;
}

.gs-how-note .gs-how {
  margin-left: -2px;
}

/* The page behind, while the dialog is open. */
html.gs-how-lock {
  overflow: hidden;
}

/* A fixed height, in both shapes: the explanation arrives a moment after
   the dialog opens, and a box that grew to fit it would move under the
   reader's eye (and count as a layout shift). Most fill it; the rest scroll
   inside. */
.gs-how-dlg {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  height: min(78vh, 680px);
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.gs-how-dlg[open] {
  display: flex;
  animation: gs-how-in 0.18s ease-out;
}

.gs-how-dlg::backdrop {
  background: rgba(15, 23, 42, 0.5);
}

@keyframes gs-how-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.gs-how-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.gs-how-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.gs-how-title {
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
}

/* The theme's h2 is centered, 32px, letter-spaced tight and underlined
   with a dotted background image; neither of these is that kind of h2. */
.gs-how-title,
.how-article h2,
.how-group {
  padding: 0;
  background: none;
  text-align: left;
  letter-spacing: normal;
  font-family: inherit;
}

.gs-how-x {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #475569;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.gs-how-x:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.gs-how-x:focus-visible {
  outline: 2px solid var(--accent, #C2410C);
  outline-offset: -2px;
}

.gs-how-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 12px;
  outline: none;
}

.gs-how-foot {
  display: flex;
  gap: 18px;
  padding: 2px 20px;
  border-top: 1px solid #e2e8f0;
  font-size: 13.5px;
}

.gs-how-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-weight: 600;
}

.gs-how-msg {
  margin: 18px 0;
  color: var(--gs-muted, #5d6b7e);
}

/* The explanation itself: on its own page and in the dialog alike. */
.how-article {
  max-width: 640px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #1e293b;
}

.how-article .how-lede {
  margin: 12px 0 14px;
  font-size: 17px;
  line-height: 1.5;
  color: #0f172a;
}

.how-article h2 {
  margin: 20px 0 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gs-muted, #5d6b7e);
}

.how-article p {
  margin: 0 0 10px;
}

.how-article ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

.how-article li {
  margin: 0 0 6px;
}

.how-article .how-curious {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  font-size: 14.5px;
}

.how-article .how-curious h2 {
  margin-top: 2px;
}

.gs-how-body .how-article {
  max-width: none;
}

/* /how/ and each explainer page's links below the article. */
.how-where {
  margin: 22px 0 0;
  font-size: 14.5px;
}

.how-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.how-list li {
  padding: 10px 0;
  border-top: 1px solid #eef2f7;
  line-height: 1.45;
}

.how-list li:first-child {
  border-top: 0;
}

.how-list a {
  font-weight: 700;
}

.how-list span {
  display: block;
  font-size: 14px;
  color: var(--gs-muted, #5d6b7e);
}

.how-group {
  margin: 22px 0 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gs-muted, #5d6b7e);
}

/* A phone: a sheet up from the bottom, most of the screen tall. */
@media (max-width: 639px) {
  .gs-how-dlg {
    width: 100%;
    height: 88vh;
    height: 88dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }

  .gs-how-dlg[open] {
    animation-name: gs-how-up;
    animation-duration: 0.22s;
  }

  .gs-how-head {
    padding-left: 16px;
  }

  .gs-how-body {
    padding: 4px 16px 12px;
  }

  .gs-how-foot {
    padding: 2px 16px calc(2px + env(safe-area-inset-bottom, 0px));
  }

  @keyframes gs-how-up {
    from { transform: translateY(40px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-how-dlg[open] {
    animation: none;
  }
}

@media (prefers-color-scheme: dark) {
  .gs-how {
    color: #a5b4cb;
  }

  .gs-how-chip {
    background: #1b2540;
    border-color: #33425f;
  }

  .gs-how:hover .gs-how-chip {
    border-color: #52627f;
    color: #f1f5f9;
  }

  .gs-how-dlg {
    color-scheme: dark;
    background: #16203a;
    color: #dde5ef;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  }

  .gs-how-dlg::backdrop {
    background: rgba(2, 6, 23, 0.7);
  }

  .gs-how-head,
  .gs-how-foot {
    border-color: #2b3852;
  }

  .gs-how-title {
    color: #f1f5f9;
  }

  .gs-how-x {
    color: #a5b4cb;
  }

  .gs-how-x:hover {
    background: #24304d;
    color: #f1f5f9;
  }

  .how-article {
    color: #dde5ef;
  }

  .how-article .how-lede {
    color: #f1f5f9;
  }

  .how-article .how-curious {
    background: #1b2540;
  }

  .how-list li {
    border-top-color: #2b3852;
  }
}