:root {
  color-scheme: light;
  --bg:        #f2ead6;
  --surface:   #fffdf7;
  --surface-2: #ece0c2;
  --line:      #d9cca4;
  --text-1:    #241b14;
  --text-2:    #5b4d3a;
  --muted:     #6b5d42;
  --crest-red:     #8b2635;
  --crest-red-ink: #6e1d29;
  --forest:        #33513f;
  --forest-ink:    #223829;
  --rain-100:  #dcebf3;
  --rain-300:  #8fc3de;
  --rain-500:  #4a8bab;
  --rain-700:  #3d7391;
  --wind:      #8a95a3;
  --wind-ink:  #5f6b78;
  --flag:      #b8924a;
  --flag-ink:  #8f6f34;
  --flag-on-bg: var(--flag-ink); /* --flag itself is 2.42:1 on --bg and fails as text there — use this alias for any gold text on parchment, --flag stays fine on --scoreboard (4.82:1) */
  --scoreboard: #212e34;
  --scoreboard-ink: #f2ead6;
  --scoreboard-line: #3a4b53;
  --focus:     #3d7391;
  /* "No reading yet" — must never look like a measured zero. Distinct
     from --muted, which is for ordinary de-emphasized text. */
  --pending:    #665842;
  --pending-bg: #e6dcc0;
  /* Impact/severity gets its own warm ramp so crest-red can go back to
     being chrome only (brand accent, illustration) rather than doing
     double duty as "bad" too. */
  --impact-100: #f0d9c4;
  --impact-300: #d99a63;
  --impact-500: #b5652e;
  --impact-700: #8a4419;
  /* Temperature gets three more ramps of its own, distinct from impact's
     brown-orange: hot skews redder, cold skews toward blue-violet (so it
     doesn't collide with rain's teal-blue on the same chart grid), and
     shock (acclimatization) gets violet, since it's a different kind of
     finding (a surprise relative to a team's own norm, not a raw reading). */
  --hot-100:  #f6dccb;
  --hot-300:  #e2825c;
  --hot-500:  #c04a28;
  --hot-700:  #8f3016;
  --cold-100: #dde3f5;
  --cold-300: #8fa3e0;
  --cold-500: #5470c2;
  --cold-700: #374e94;
  --shock-100: #ecdcf2;
  --shock-300: #b47cc9;
  --shock-500: #8a4aa8;
  --shock-700: #623078;
  /* Fixed (deliberately NOT theme-inverting) — the scoreboard header is
     dark in both site themes, so text sitting on it needs the same light
     value in both, not the sequential rain-100/300 ramp steps, which
     invert with the theme and go dark-on-near-black in dark mode (found
     while checking the new wordmark's dark-mode contrast: rain-300 came
     out to only 3.37:1 against the dark-theme scoreboard, and rain-100
     was worse still at 1.58:1 — a real pre-existing bug, not new). */
  --scoreboard-blue:      #8fc3de; /* 7.33:1 light scoreboard, 7.7:1 leather */
  --scoreboard-blue-pale: #dcebf3; /* 11.44:1 light scoreboard, 15.53:1 dark scoreboard */
  /* Leather: the header, its subtitle tab and the Rankings control bar, in both themes (a little
     warmer here than in dark). The header's text tokens hold 7:1 or better on it. The score strip
     and tooltips stay on --scoreboard. */
  --leather:      #3a2314;
  --leather-line: #5a3a24;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #0d1626;
    --surface:   #142035;
    --surface-2: #1b2a43;
    --line:      #2a3c5a;
    --text-1:    #f3ecd9;
    --text-2:    #c2cbd9;
    --muted:     #8f9db3;
    --crest-red:     #d06975;
    --crest-red-ink: #e3828d;
    --forest:        #5a8a6e;
    --forest-ink:    #7fb096;
    --rain-100:  #1c3a4a;
    --rain-300:  #3f6d85;
    --rain-500:  #6fa4c4;
    --rain-700:  #93bfd8;
    --wind:      #a9b4c0;
    --wind-ink:  #c3ccd6;
    --flag:      #d9b06a;
    --flag-ink:  #e8c483;
    --flag-on-bg: var(--flag-ink);
    --scoreboard: #0b1320;
    --scoreboard-ink: #f3ecd9;
    --scoreboard-line: #24344d;
    --focus:     #93bfd8;
    --pending:    #d4c7ab;
    --pending-bg: #1b2a43;
    --impact-100: #3d2a1a;
    --impact-300: #8a5530;
    --impact-500: #d99a63;
    --impact-700: #f0b587;
    --hot-100:  #3d2015;
    --hot-300:  #8f4a2a;
    --hot-500:  #d97a4a;
    --hot-700:  #f2a878;
    --cold-100: #1e2540;
    --cold-300: #4a5f9c;
    --cold-500: #8098d4;
    --cold-700: #aebdf0;
    --shock-100: #33203d;
    --shock-300: #7a4a8f;
    --shock-500: #b47cc9;
    --shock-700: #d4aae0;
    --scoreboard-blue:      #8fc3de;
    --scoreboard-blue-pale: #dcebf3;
    --leather:      #2e1b10;
    --leather-line: #4a2f1d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0d1626;
  --surface:   #142035;
  --surface-2: #1b2a43;
  --line:      #2a3c5a;
  --text-1:    #f3ecd9;
  --text-2:    #c2cbd9;
  --muted:     #8f9db3;
  --crest-red:     #d06975;
  --crest-red-ink: #e3828d;
  --forest:        #5a8a6e;
  --forest-ink:    #7fb096;
  --rain-100:  #1c3a4a;
  --rain-300:  #3f6d85;
  --rain-500:  #6fa4c4;
  --rain-700:  #93bfd8;
  --wind:      #a9b4c0;
  --wind-ink:  #c3ccd6;
  --flag:      #d9b06a;
  --flag-ink:  #e8c483;
  --flag-on-bg: var(--flag-ink);
  --scoreboard: #0b1320;
  --scoreboard-ink: #f3ecd9;
  --scoreboard-line: #24344d;
  --focus:     #93bfd8;
  --pending:    #d4c7ab;
  --pending-bg: #1b2a43;
  --impact-100: #3d2a1a;
  --impact-300: #8a5530;
  --impact-500: #d99a63;
  --impact-700: #f0b587;
  --hot-100:  #3d2015;
  --hot-300:  #8f4a2a;
  --hot-500:  #d97a4a;
  --hot-700:  #f2a878;
  --cold-100: #1e2540;
  --cold-300: #4a5f9c;
  --cold-500: #8098d4;
  --cold-700: #aebdf0;
  --shock-100: #33203d;
  --shock-300: #7a4a8f;
  --shock-500: #b47cc9;
  --shock-700: #d4aae0;
  --scoreboard-blue:      #8fc3de;
  --scoreboard-blue-pale: #dcebf3;
  --leather:      #2e1b10;
  --leather-line: #4a2f1d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* ---------- masthead ---------- */
/* Pebbled leather: two offset dot grids (light highlights, dark pits) under a soft sheen. */
.masthead, .masthead-bar, .leather {
  background-color: var(--leather);
  background-image:
    radial-gradient(rgba(255, 236, 210, 0.07) 0.9px, transparent 1.3px),
    radial-gradient(rgba(0, 0, 0, 0.32) 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 150, 0.10), transparent 70%);
  background-size: 5px 5px, 7px 7px, 100% 100%;
  background-position: 0 0, 2px 3px, 0 0;
}
.masthead {
  color: var(--scoreboard-ink);
  border-bottom: 3px double var(--flag);
  position: relative;
}
/* The laces under the wordmark: one long lace with eight cross laces, as an inline SVG so every
   page (and every auto-published recap) gets them from this file alone. */
.masthead::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 150px;
  height: 20px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196 26'%3E%3Cg fill='rgba(0,0,0,0.5)' transform='translate(0 1.5)'%3E%3Crect x='4' y='10.5' width='188' height='4' rx='2'/%3E%3Crect x='18' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='40' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='62' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='84' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='106' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='128' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='150' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='172' y='2' width='7' height='20' rx='3.5'/%3E%3C/g%3E%3Cg fill='%23f2ead6'%3E%3Crect x='4' y='10.5' width='188' height='4' rx='2'/%3E%3Crect x='18' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='40' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='62' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='84' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='106' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='128' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='150' y='2' width='7' height='20' rx='3.5'/%3E%3Crect x='172' y='2' width='7' height='20' rx='3.5'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='0.55'%3E%3Crect x='19.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3Crect x='41.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3Crect x='63.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3Crect x='85.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3Crect x='107.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3Crect x='129.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3Crect x='151.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3Crect x='173.6' y='4' width='1.6' height='9' rx='0.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 640px) {
  .masthead::after { width: 112px; height: 15px; }
}
/* Nav on its own row across the top, then the logo + wordmark centered below
   it. The nav comes after the brand in the markup (so the brand is read
   first), and `order` lifts it visually to the top row. */
.masthead-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px 30px;  /* room for the laces */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
}
.masthead-mark {
  width: 40px;
  height: auto;
  flex: 0 0 auto;
  align-self: center;
}
@media (max-width: 640px) {
  .masthead-mark { width: 30px; }
}
/* Wraps the logo + wordmark as one link to the dashboard — display:contents
   keeps it out of the flex box model entirely, so .masthead-mark and .brand
   stay direct flex children of .masthead-inner, with the anchor just making
   both clickable. */
.masthead-brand-link {
  display: contents;
  text-decoration: none;
}
/* Sized so the five-letter RAINK reads a little wider than the tagline
   under it (the old eight-letter CFBRAINK needed a smaller step). */
.brand-word {
  font-family: "Alfa Slab One", Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 7vw, 44px);
  letter-spacing: 0.005em;
  line-height: 1;
  text-wrap: balance;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.brand-word b, .brand-word i { font-weight: inherit; font-style: normal; }
/* Split into two spans on purpose — a solid-color "RAINK" reads as a
   typo, since nobody decodes the rain/rank pun without the color cue:
   RAIN in blue, the K that turns it into RANK in gold. */
.brand-word b { color: var(--flag); }      /* 4.82:1 on --scoreboard */
.brand-word i { color: var(--scoreboard-blue); }  /* 7.33:1 on --scoreboard */
/* For reuse anywhere the wordmark sits on parchment instead of the dark
   scoreboard header — not currently used on this site, but the flat
   --flag/--rain-300 pairing above fails contrast off the dark background,
   so this is here for whenever that placement happens. */
.on-parchment .brand-word b { color: var(--flag-on-bg); } /* 3.90:1 */
.on-parchment .brand-word i { color: var(--rain-700); }   /* 4.31:1 */
/* The right margin mirrors the logo + gap on the left, so the wordmark itself
   (not the logo-plus-wordmark group) sits on the page's center line. */
.brand { text-align: center; margin-right: 54px; }
@media (max-width: 640px) {
  .brand { margin-right: 44px; }
}
.brand-tag {
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--scoreboard-blue);
  margin-top: 4px;
}
.masthead-nav {
  font-family: "Oswald", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  gap: 22px;
  order: -1;
  flex: 1 0 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--scoreboard-blue) 22%, transparent);
}
.masthead-nav a { color: var(--scoreboard-blue-pale); text-decoration: none; }
.masthead-nav a:hover, .masthead-nav a.active { color: var(--flag); }
/* The sub-bar: each page's subtitle and stats run in a full-width leather strip under the
   header, the same strip the Rankings page uses for its controls, so the header itself is the
   same height on every page. Its text lines up with the page content below. */
.masthead-bar {
  color: var(--scoreboard-ink);
  border-bottom: 1px solid var(--leather-line);
}
.masthead-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--scoreboard-blue-pale);
}
.masthead-bar-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--scoreboard-blue);
}
a.masthead-bar-meta { text-decoration: none; }
a.masthead-bar-meta:hover, a.masthead-bar-meta:focus-visible { color: var(--flag); }
.masthead-bar-sub + .masthead-bar-meta:not(:empty)::before {
  content: "\00b7";
  margin: 0 10px;
  color: var(--flag);
}
/* The dashboard's bar is filled in by script; keep its space (no jump) but hide the empty text. */
.masthead-bar-inner:not(:has(.masthead-bar-sub)):has(.masthead-bar-meta:empty)::after {
  content: "\00a0";
}
@media (max-width: 640px) {
  .masthead-bar-inner { padding-block: 8px; font-size: 13px; }
}

/* ---------- stat tiles (shared with the blog's .stat-callout-row) ---------- */
.stat-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-value.rain { color: var(--rain-700); }
.stat-value.flag { color: var(--flag-ink); }
.stat-value.wind { color: var(--wind-ink); }
.stat-value.hot { color: var(--hot-700); }
.stat-value.cold { color: var(--cold-700); }
.stat-value.shock { color: var(--shock-700); }
.stat-note {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.4;
}

section { margin-top: 34px; }
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
  margin-top: 34px;
}
.chart-grid section { margin-top: 0; }
.chart-grid-feature { grid-column: 1 / -1; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.section-head-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-links { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
h2 {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.section-note { font-size: 13px; color: var(--muted); }
.section-link {
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rain-700);
  text-decoration: none;
  white-space: nowrap;
}
.section-link:hover { color: var(--crest-red-ink); }
.section-link::after { content: ' \2192'; }

/* Marks the predictions module as an experiment rather than a tool (see the note under the table). */
.tag-experiment {
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

/* ---------- dashboard feature row: the featured post (left) and the Rankings card (right), half each.
   Below 1000px they stack. If the post doesn't load, the card takes the whole row. ---------- */
.feature-row { display: flex; gap: 16px; margin-top: 24px; align-items: stretch; }
.feature-row > * { flex: 1 1 0; min-width: 0; }
.feature-row > .blog-hero, .feature-row > .rank-card { margin-top: 0; }
@media (max-width: 999px) {
  .feature-row { flex-direction: column; }
  .feature-row > * { flex: none; }
}
/* Half width (beside the featured post): top 5 per list, so the row stays compact. */
@media (min-width: 1000px) {
  .feature-row > .blog-hero:not([hidden]) + .rank-card .rc-rows li:nth-child(n+6) { display: none; }
}

/* ---------- dashboard Rankings card: four lists, each changed with the Rankings page's list picker. Its columns follow
   the card's own width (a container query), so the same card works full width, half width and on a phone. ---------- */
.rank-card { container-type: inline-size; background: var(--surface); border: 1px solid var(--line); color: var(--text-1); border-radius: 8px; padding: 12px 0 12px; }
.rank-card[hidden] { display: none; }
.rank-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 14px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.rank-card-title { margin: 0; font: 600 15px "Oswald", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-1); }
.rank-card-note { font: 12px "IBM Plex Mono", monospace; color: var(--muted); }
.rank-card-controls { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.rank-card select { font: 12.5px "IBM Plex Mono", monospace; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; max-width: 170px; }
.rank-card select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rank-card .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rank-card-reset { appearance: none; -webkit-appearance: none; font: 500 12.5px "IBM Plex Sans", sans-serif; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; cursor: pointer; white-space: nowrap; }
.rank-card-reset:hover { color: var(--text-1); border-color: var(--focus); }
.rank-card-reset[hidden] { display: none; }
.rank-card-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-col { min-width: 0; padding: 0 14px; display: flex; flex-direction: column; }
.rc-col + .rc-col { border-left: 1px solid var(--line); }
.rc-eyebrow { display: flex; align-items: center; gap: 6px; font: 600 10.5px "Oswald", sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-eyebrow i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--acc); }
.rc-title { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 2px 0 0; margin: 0 0 6px; cursor: pointer; text-align: left;
  font: 600 15px/1.25 "IBM Plex Sans", sans-serif; color: var(--text-1); display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; }
.rc-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-title::after { content: "▾"; font-size: 12px; color: var(--muted); }
.rc-title:hover span { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rc-rows { list-style: none; margin: 0; padding: 0; flex: 1; }
.rc-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: baseline; gap: 8px; padding: 4px 4px; margin: 0 -4px;
  border-radius: 5px; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.rc-rows li + li .rc-row { box-shadow: 0 -1px 0 var(--line); }
a.rc-row:hover { background: var(--surface-2); }
a.rc-row:hover .rc-team b { color: var(--rain-700); }
.rc-pos { font: 600 12px "IBM Plex Mono", monospace; color: var(--text-2); text-align: right; }
.rc-team { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-team b { font-weight: 600; }
.rc-team .mv { margin-left: 5px; font: 500 10.5px "IBM Plex Mono", monospace; }
.rc-team .mv.up { color: var(--forest-ink); } .rc-team .mv.down { color: var(--crest-red-ink); } .rc-team .mv.new { color: var(--flag-on-bg); }
.rc-rec { font: 11px "IBM Plex Mono", monospace; color: var(--muted); white-space: nowrap; }
.rc-val { font: 600 12px "IBM Plex Mono", monospace; color: var(--acc-ink); white-space: nowrap; text-align: right; }
/* Kickoff lists: the away team on one line, "@ home" on the next. */
.rc-row.game { grid-template-columns: 20px minmax(0, 1fr) auto; }
.rc-row.game .rc-team { white-space: normal; font-size: 12.5px; line-height: 1.35; }
.rc-row.game .side { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-row.game .at { color: var(--muted); margin-right: 4px; }
.rc-empty { padding: 18px 0; color: var(--muted); font-size: 12.5px; }
.rc-more { margin-top: 6px; font: 600 11px "Oswald", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rain-700); text-decoration: none; }
.rc-more:hover { color: var(--crest-red-ink); }
.rank-card a:focus-visible, .rc-title:focus-visible, .rank-card-reset:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
@container (max-width: 899px) and (min-width: 480px) {
  .rank-card-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .rc-col:nth-child(odd) { border-left: 0; }
  .rc-col:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 12px; }
}
/* Phones: the lists sit side by side and swipe, like the scoreboard above. */
@container (max-width: 479px) {
  .rank-card-cols { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .rc-col { flex: 0 0 80%; scroll-snap-align: start; }
  .rank-card-controls { margin-left: 0; width: 100%; }
  .rank-card-controls label { flex: 1; min-width: 0; }
  .rank-card select { width: 100%; max-width: none; }
}

/* ---------- ranked lists: accents and the list picker (rankings.html and the dashboard's Rankings card, via rank-lists.js) ---------- */
/* Each list group gets one accent (--acc) that its bars and values use. */
.acc-polls    { --acc: var(--rain-500);   --acc-ink: var(--rain-700); }
.acc-wet      { --acc: var(--rain-500);   --acc-ink: var(--rain-700); }
.acc-wind     { --acc: var(--wind);       --acc-ink: var(--wind-ink); }
.acc-hot      { --acc: var(--hot-500);    --acc-ink: var(--hot-700); }
.acc-cold     { --acc: var(--cold-500);   --acc-ink: var(--cold-700); }
.acc-impact   { --acc: var(--impact-500); --acc-ink: var(--impact-700); }
.acc-shock    { --acc: var(--shock-500);  --acc-ink: var(--shock-700); }
.acc-offense  { --acc: var(--forest);     --acc-ink: var(--forest-ink); }
.acc-defense  { --acc: var(--crest-red);  --acc-ink: var(--crest-red-ink); }
.acc-betting  { --acc: var(--flag);       --acc-ink: var(--flag-on-bg); }
.acc-strength { --acc: var(--shock-500);  --acc-ink: var(--shock-700); }
.picker-scrim { position: fixed; inset: 0; z-index: 40; }
.picker-scrim[hidden], .picker[hidden] { display: none; }
.picker { position: fixed; z-index: 41; width: min(760px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.28); overflow: hidden; }
.pk-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pk-top input { flex: 1; font: 15px "IBM Plex Sans", sans-serif; color: var(--text-1); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 11px; }
.pk-top input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pk-top kbd { font: 11px "IBM Plex Mono", monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.pk-body { overflow-y: auto; padding: 10px 14px 14px; columns: 3 210px; column-gap: 18px; }
.pk-group { break-inside: avoid; margin: 4px 0 14px; }
.pk-group h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 600 11px "Oswald", sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.pk-group h4 i { width: 8px; height: 8px; border-radius: 2px; background: var(--acc); }
.pk-item { appearance: none; -webkit-appearance: none; display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 6px 8px; border-radius: 7px; margin: 0; }
.pk-item b { display: flex; align-items: center; gap: 6px; font: 600 13.5px "IBM Plex Sans", sans-serif; color: var(--text-1); }
.pk-item span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 1px; }
.pk-item em { font: normal 600 9.5px "Oswald", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-ink);
  border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }
.pk-item:hover, .pk-item.kb { background: var(--surface-2); }
.pk-item[aria-current="true"] b::before { content: "●"; color: var(--acc); font-size: 9px; }
.pk-none { padding: 24px; text-align: center; color: var(--muted); column-span: all; }
@media (max-width: 640px) {
  .picker { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 78vh; border-radius: 14px 14px 0 0; }
}

/* ---------- live indicator and "Live only" toggle (Scores page and the dashboard's scoreboard) ---------- */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--forest); margin-right: 6px; vertical-align: 1px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.live-toggle { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px "IBM Plex Sans", sans-serif;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; white-space: nowrap; }
.live-toggle .live-dot { margin-right: 0; animation: none; background: var(--muted); }
.live-toggle b { font-family: "IBM Plex Mono", monospace; font-weight: 600; color: var(--text-1); }
.live-toggle:hover { border-color: var(--forest); }
.live-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.live-toggle[aria-pressed="true"] { color: var(--forest-ink); border-color: var(--forest); background: color-mix(in srgb, var(--forest) 14%, var(--surface)); }
.live-toggle[aria-pressed="true"] .live-dot, .live-toggle.has-live .live-dot { background: var(--forest); }
.live-toggle.has-live .live-dot { animation: pulse 1.6s ease-in-out infinite; }
.live-toggle[aria-pressed="true"] b { color: var(--forest-ink); }
@media (prefers-reduced-motion: reduce) { .live-dot, .live-toggle.has-live .live-dot { animation: none; } }

/* ---------- scoreboard strip (dashboard): this week's games, above the featured post ----------
   A card like the dashboard's others; game tiles look like small Scores-page cards (green edge when live). */
.score-strip {
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-1);
  border-radius: 8px;
  padding: 12px 0 14px;
}
.score-strip[hidden] { display: none; }
.score-strip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 0 14px 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.score-strip-title {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-1);
}
.score-strip-week {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.score-strip-controls {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.score-strip select,
.score-strip-search {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.score-strip select { padding: 4px 8px; max-width: 170px; }
.score-strip-search { display: flex; align-items: center; gap: 6px; padding: 3px 8px; }
.score-strip-search svg { flex: none; color: var(--muted); }
.score-strip-search input {
  border: none; background: transparent; outline: none; color: var(--text-1);
  font: inherit; width: 130px;
}
.score-strip-search input::placeholder { color: var(--muted); }
.score-strip select:focus-visible,
.score-strip-search:focus-within,
.score-strip a:focus-visible,
.score-strip-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.score-strip-all {
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rain-700);
  text-decoration: none;
  white-space: nowrap;
}
.score-strip-all:hover { color: var(--crest-red-ink); }
/* The games fade out at the strip's edges as they scroll, via a mask, so the fade matches any background.
   The left fade appears once scrolled and the right one goes away at the end (classes set by the strip's script).
   Scroll snapping is for touch only: with a mouse, each small wheel step snapped back to the same game. */
.score-strip-track {
  --fade-l: 0px;
  --fade-r: 40px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 14px 6px;
  scroll-padding-inline: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
.score-strip-track.scrolled { --fade-l: 40px; }
.score-strip-track.at-end { --fade-r: 0px; }
@media (pointer: coarse) {
  .score-strip-track { scroll-snap-type: x proximity; }
  .ss-game { scroll-snap-align: start; }
}
.ss-game {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 10px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.ss-game:hover { border-color: var(--rain-500); }
.ss-game.live { border-color: color-mix(in srgb, var(--forest) 55%, var(--line)); box-shadow: inset 3px 0 0 var(--forest); }
.ss-game a { color: inherit; text-decoration: none; }
.ss-week, .ss-week .ss-status { display: block; min-width: 0; }
.ss-week:hover .ss-status { color: var(--rain-700); text-decoration: underline; text-underline-offset: 2px; }
a.ss-team:hover .ss-name { color: var(--rain-700); text-decoration: underline; text-underline-offset: 2px; }
.ss-game a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 3px; }
.ss-status {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-status.live { color: var(--forest-ink); font-weight: 600; }
.ss-status.live .live-dot { margin-right: 5px; }
.ss-status.final { color: var(--text-2); font-weight: 600; }
.ss-team { display: flex; align-items: baseline; gap: 5px; font-size: 13.5px; line-height: 1.3; }
.ss-team.lost { opacity: 0.55; }
.ss-rank { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--muted); min-width: 0; }
.ss-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ss-pts { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.ss-empty { padding: 10px 0; font-size: 13px; color: var(--muted); }
.ss-empty a { color: var(--rain-700); }
.score-strip .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .score-strip-controls { margin-left: 0; width: 100%; }
  /* Two menus share a row; the Live only toggle and All scores link take the next one. */
  .score-strip-controls label { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .score-strip-all { margin-left: auto; }
  .score-strip select { width: 100%; max-width: none; }
  .score-strip-search { order: 3; flex: 1 1 100%; }
  .score-strip-search input { width: 100%; }
  .ss-game { flex-basis: 150px; }
}

/* ---------- featured post (dashboard): the newest post, with its photo ---------- */
.blog-hero {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.blog-hero[hidden] { display: none; }
.blog-hero-link {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  color: inherit;
  text-decoration: none;
}
.blog-hero.no-img .blog-hero-link { grid-template-columns: minmax(0, 1fr); }
.blog-hero-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
.blog-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 340px;
  object-fit: cover;
  background: var(--surface-2);
}
.blog-hero-img[hidden] { display: none; }
.blog-hero-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px 28px;
  min-width: 0;
}
.blog-hero-kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-hero-title {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--text-1);
  text-wrap: balance;
}
.blog-hero-link:hover .blog-hero-title { color: var(--crest-red-ink); }
.blog-hero-excerpt {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 52ch;
}
.blog-hero-more {
  font-family: "Oswald", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rain-700);
}
/* Narrow (half the feature row, or a phone): photo on top, growing to fill whatever height the row gives it. */
@container (max-width: 699px) {
  .blog-hero-link { display: flex; flex-direction: column; }
  .blog-hero-img { flex: 1 1 auto; height: auto; min-height: 200px; max-height: none; aspect-ratio: 16 / 9; }
  .blog-hero-body { flex: none; padding: 18px 20px 20px; }
}
@container (max-width: 479px) {
  .blog-hero-img { max-height: 260px; }
  .blog-hero-body { padding: 16px 18px 18px; }
}

/* ---------- blog strip (dashboard): newest posts | random picks, below the featured post ---------- */
.blog-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.blog-strip[hidden] { display: none; }
.blog-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px 6px;
  margin: 0; /* overrides the global section spacing so the grid gap alone separates the cards */
  min-width: 0;
}
.blog-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.blog-col-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.blog-shuffle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rain-700);
  cursor: pointer;
}
.blog-shuffle:hover { color: var(--crest-red-ink); }
.blog-shuffle:focus-visible, .blog-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.blog-list { list-style: none; margin: 0; padding: 0; }
.blog-list li { padding: 9px 0; min-width: 0; }
.blog-list li + li { border-top: 1px solid var(--line); }
.blog-list a {
  font-size: 14px;
  font-weight: 600;
  color: var(--rain-700);
  text-decoration: none;
}
.blog-list a:hover { color: var(--crest-red-ink); }
.blog-item-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 1px;
}
.blog-item-excerpt {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 760px) {
  .blog-strip { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- top-N bar chart ---------- */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px 20px;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr 56px;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  border-radius: 6px;
  position: relative;
}
.bar-row + .bar-row { border-top: 1px solid var(--line); }
.bar-label {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-label strong { color: var(--text-1); font-weight: 600; }
.bar-track {
  background: var(--surface-2);
  height: 12px;
  border-radius: 3px;
  position: relative;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--rain-300), var(--rain-500));
}
.bar-row:first-child .bar-fill { background: linear-gradient(90deg, var(--rain-500), var(--rain-700)); }
.bar-fill.wind { background: linear-gradient(90deg, var(--wind), var(--wind-ink)); }
.bar-row:first-child .bar-fill.wind { background: linear-gradient(90deg, var(--wind-ink), var(--wind-ink)); }
.bar-fill.impact { background: linear-gradient(90deg, var(--impact-300), var(--impact-500)); }
.bar-row:first-child .bar-fill.impact { background: linear-gradient(90deg, var(--impact-500), var(--impact-700)); }
.bar-fill.hot { background: linear-gradient(90deg, var(--hot-300), var(--hot-500)); }
.bar-row:first-child .bar-fill.hot { background: linear-gradient(90deg, var(--hot-500), var(--hot-700)); }
.bar-fill.cold { background: linear-gradient(90deg, var(--cold-300), var(--cold-500)); }
.bar-row:first-child .bar-fill.cold { background: linear-gradient(90deg, var(--cold-500), var(--cold-700)); }
.bar-fill.shock { background: linear-gradient(90deg, var(--shock-300), var(--shock-500)); }
.bar-row:first-child .bar-fill.shock { background: linear-gradient(90deg, var(--shock-500), var(--shock-700)); }
.bar-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--rain-700);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bar-value.wind { color: var(--wind-ink); }
.bar-value.impact { color: var(--impact-700); }
.bar-value.hot { color: var(--hot-700); }
.bar-value.cold { color: var(--cold-700); }
.bar-value.shock { color: var(--shock-700); }
.bar-row:focus-visible, .has-tip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.has-tip { position: relative; cursor: default; }
.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--scoreboard);
  color: var(--scoreboard-ink);
  font-size: 12px;
  font-family: "IBM Plex Sans", sans-serif;
  /* Invisible tooltips still take up layout space; capping them at the viewport
     width keeps long ones from making the whole page scroll sideways on phones. */
  width: max-content;
  max-width: calc(100vw - 32px);
  white-space: normal;
  padding: 6px 9px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.has-tip:hover::after, .has-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* A tooltip anchored to a table header needs to wrap (an explanation is much
   longer than a chart bar's one-line stat), hang off the header's right
   edge rather than centering (this column sits near the right side of the
   table, so a centered box would run past the table-scroll container and
   get clipped), AND open downward instead of the base .has-tip's upward
   default — the header lives at the very top of .table-card, which has
   overflow:hidden for its rounded corners, so a tooltip opening upward
   renders outside the card's box and is silently clipped (found live:
   this is why the Impact column's tooltip wasn't appearing at all).
   Opening downward keeps it over the table body, still inside the card. */
.has-tip.wrap-tip::after {
  white-space: normal;
  width: 240px;
  left: auto;
  right: 0;
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateY(-4px);
  /* Reset the table header's text styling (uppercase, tracked, bold) that
     would otherwise inherit into this pseudo-element's sentence-case body copy. */
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  line-height: 1.4;
}
.has-tip.wrap-tip:hover::after, .has-tip.wrap-tip:focus-visible::after {
  transform: translateY(0);
}

/* ---------- table ---------- */
.table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.table-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.search {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 11px;
}
.search svg { flex: none; color: var(--muted); }
.search input {
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--text-1);
  width: 100%;
  font-size: 14px;
}
.search input::placeholder { color: var(--muted); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 700px; }
thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
thead th:hover { color: var(--text-1); }
thead th.sorted { color: var(--rain-700); }
thead th .arrow { font-size: 10px; margin-left: 3px; opacity: 0.7; }
thead th:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
.col-matchup { min-width: 220px; }
.away { color: var(--text-2); }
.home { color: var(--text-1); font-weight: 600; }
.col-score, .col-date { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.col-ou, .col-model, .col-edge { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.col-ou, .col-model { color: var(--text-1); }
.model-wx { display: block; margin-top: 1px; font-size: 11px; color: var(--rain-700); }
.col-edge { color: var(--text-2); font-size: 12.5px; }
/* Edge is the number this whole module exists to surface, so its
   magnitude gets a visual tier instead of uniform gray — a bigger
   disagreement with the market should be easier to spot scanning down
   the column, not just readable one row at a time. */
.edge-low { color: var(--muted); font-weight: 400; }
.edge-mid { color: var(--text-1); font-weight: 500; }
.edge-high { color: var(--rain-700); font-weight: 700; }
.col-conditions { color: var(--text-2); font-size: 13px; }
.col-score { white-space: nowrap; }
.col-score-figure {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-1);
}
.live-badge, .final-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.final-badge {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 16%, transparent);
}
.live-badge {
  color: var(--forest-ink);
  background: color-mix(in srgb, var(--forest) 20%, transparent);
}
.neutral-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wind-ink);
  background: color-mix(in srgb, var(--wind) 18%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
/* AP Top 25 rank, inline before a team name — distinct from .rank-badge
   (the leaderboard's row-position number, a different concept). */
.rank-badge-inline {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--flag-ink);
  background: color-mix(in srgb, var(--flag) 18%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
/* ---------- edge map ---------- */
.edge-map {
  height: 420px;
  width: 100%;
  background: var(--surface-2);
}
.edge-map .leaflet-container { background: var(--surface-2); font-family: "IBM Plex Sans", sans-serif; }
.football-marker { background: none; border: none; }
.edge-popup .leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--text-1);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.edge-popup .leaflet-popup-tip { background: var(--surface); }
.edge-popup .leaflet-popup-content { margin: 11px 14px; min-width: 168px; }
.edge-popup-matchup { font-weight: 600; font-size: 13.5px; }
.edge-popup-venue { color: var(--muted); font-size: 12px; margin-top: 2px; }
.edge-popup-stats {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.edge-popup-edge { color: var(--rain-700); font-weight: 700; }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-control-zoom a {
  background: var(--surface) !important;
  color: var(--text-1) !important;
  border-color: var(--line) !important;
}
.leaflet-control-zoom a:hover { background: var(--surface-2) !important; }
.edge-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
}
.wet-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--flag-ink);
  background: color-mix(in srgb, var(--flag) 18%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.snow-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rain-700);
  background: color-mix(in srgb, var(--rain-500) 18%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.pending-badge {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--pending);
  background: var(--pending-bg);
  padding: 1px 7px;
  border-radius: 3px;
}
/* Venue/wind are per-game facts, not per-team stats, so they don't fit
   the away/home stat_grid_row grid below — a single summary line above
   it instead. Only shown here on mobile, where the compact row hides
   Venue/Wind to make room; desktop already shows both in the row. */

/* ---------- pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.pagination-pages { display: flex; align-items: center; gap: 6px 4px; flex-wrap: wrap; }
.page-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.page-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn.current { background: var(--rain-700); border-color: var(--rain-700); color: var(--scoreboard-ink); }
.page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.page-size select {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--text-1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
}

/* ---------- leaderboard page ---------- */
.rank-badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  width: 28px;
  text-align: right;
  flex: none;
}
.leaderboard-row .bar-label { display: flex; align-items: baseline; gap: 8px; }
.metric-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.metric-toggle a, .metric-toggle button {
  /* A <button> carries native OS chrome (its own border/background/font)
     that an author stylesheet doesn't automatically clear the way it
     does for a div or anchor — appearance:none plus explicit font/
     margin resets below are what make it actually take the surface/
     border/type styling instead of the browser's default button look. */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  font: inherit;
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 14px;
  color: var(--text-2);
  background: var(--surface);
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.metric-toggle a + a, .metric-toggle button + button { border-left: 1px solid var(--line); }
.metric-toggle a.active, .metric-toggle button.active { background: var(--rain-700); color: var(--scoreboard-ink); }

/* ---------- blog ---------- */
.post-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.post-card {
  background: var(--surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}
.post-card:hover { background: var(--surface-2); }
.post-card-title {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--text-1);
}
.post-card-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.post-card-excerpt { font-size: 14px; color: var(--text-2); line-height: 1.5; }

.article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px clamp(20px, 5vw, 56px) 44px;
}
.article-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.article h1 {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: 0.01em;
  line-height: 1.15;
  margin: 0 0 18px;
  text-wrap: balance;
}
.article .lede {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 62ch;
}
.article h2 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 22px;
  margin-top: 36px;
  margin-bottom: 12px;
}
.article p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-1);
  max-width: 66ch;
  margin: 0 0 16px;
}
.article ul, .article ol { max-width: 66ch; font-size: 15.5px; line-height: 1.7; color: var(--text-1); padding-left: 22px; margin: 0 0 16px; }
.article li { margin-bottom: 6px; }
.article strong { color: var(--text-1); }
.article a { color: var(--rain-700); text-decoration-color: color-mix(in srgb, var(--rain-700) 40%, transparent); }
.article code { font-family: "IBM Plex Mono", monospace; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.article figure { margin: 24px 0; }
.article figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
/* ---------- blog: photos and "wait, what?" explainer boxes ---------- */
.photo { margin: 28px 0; }
.photo img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.photo figcaption { font-size: 13.5px; color: var(--text-2); margin-top: 8px; max-width: 72ch; line-height: 1.5; }
.photo .credit { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.photo .credit a { color: var(--muted); }
.photo.narrow { max-width: 320px; }
.photo.narrow img { max-height: none; }
.explainer {
  background: color-mix(in srgb, var(--flag) 10%, var(--surface));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 22px 0;
  max-width: 66ch;
}
.article .explainer p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.article .explainer p + p { margin-top: 8px; }
.article .explainer .explainer-title {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--flag-on-bg);
  margin-bottom: 6px;
}
.stat-callout-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 24px 0; }
.stat-callout { background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.stat-callout .stat-value { font-size: 24px; }

footer {
  max-width: 1080px;
  margin: 40px auto 0;
  padding: 18px 20px 32px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
footer code {
  font-family: "IBM Plex Mono", monospace;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .bar-row { grid-template-columns: 96px 1fr 48px; gap: 8px; }
  .bar-label { font-size: 12px; }
  .stat-callout-row { grid-template-columns: repeat(2, 1fr); }
  .edge-map { height: 300px; }

  /* Predictions table: Posted O/U and Model are the two inputs Edge is
     already the difference of, so on a narrow screen only Edge (the
     headline number) stays, alongside Kickoff/Matchup/Score/Conditions. */
  .col-ou-h, .col-ou, .col-model-h, .col-model { display: none; }

  /* Fewer columns need less width to be useful — letting the table
     shrink (instead of holding the desktop 700px floor) is what actually
     removes the horizontal scroll, not just hiding cells. A screenshot at
     phone width caught that .col-matchup's 220px floor was the actual
     remaining blocker even after hiding columns and shortening dates —
     team names wrap fine at a narrower width, so the floor just isn't
     needed here the way it is on desktop's single-line layout. */
  table { min-width: 0; }
  .col-matchup { min-width: 0; }
  .col-conditions { white-space: normal; }
  .col-score { white-space: normal; }

  /* 14px of horizontal cell padding per side was costing 28px per
     column — trivial with 4-5 desktop columns, but ~170px total across
     6 columns at phone width, more than any single column above. */
  thead th, tbody td { padding-left: 8px; padding-right: 8px; }

  /* Comfortable tap targets matter more without a mouse-hover fallback —
     desktop's tighter density stays as-is, this only widens the phone-
     width hit area. */
  .page-btn { padding: 9px 13px; }

  /* Six-plus leaderboard/dashboard metrics no longer fit on one line at
     phone width — wrapping the group is simpler than shrinking type past
     legibility, and the border-radius on the group as a whole reads fine
     even split across two rows. */
  .metric-toggle { flex-wrap: wrap; border-radius: 0; border: none; }
  .metric-toggle a, .metric-toggle button { border: 1px solid var(--line); border-radius: 8px; }
  .metric-toggle a + a, .metric-toggle button + button { border-left: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .has-tip::after { transition: none; }
}