/* nfl-match.css - the analysis components the football match page uses.
 *
 * Every rule here was lifted verbatim from leagues/match.html's inline <style>
 * block, which is where the real Top Picks podium, the 1+/2+ shout chips, the
 * head-to-head leader tiles and the stat-pack hit/miss chips actually live. None
 * of them exist in any shared stylesheet, which is why the NFL game page came
 * out looking like a price list: it had no access to the components that carry a
 * judgement.
 *
 * Extracted, not reimplemented, so the NFL pages inherit the football look
 * exactly and stay in step when that page changes. See nfl-hub.css for the same
 * treatment applied to leagues/index.html.
 */

/* ── Top Picks podium: score, band chip, gradient slider ───────────── */
@keyframes rdMenuIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdRowEnter {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdDetailIn {
      from { transform: translateY(-4px); }
      to   { transform: translateY(0); }
    }
.wc-pred-tiles {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
@media (max-width: 480px) {
  .wc-pred-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wc-pred-tile {
      appearance: none;
      display: flex; flex-direction: column; gap: 4px;
      padding: 12px 12px 10px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      color: inherit;
      text-align: left;
      cursor: pointer;
      transition: background 140ms var(--wc-ease-out),
                  border-color 140ms var(--wc-ease-out);
      min-height: 76px;
      position: relative;
    }
.wc-pred-tile:hover {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.12);
    }
.wc-pred-tile.is-hot {
      background: var(--rd-tone-soft);
      border-color: var(--rd-tone-line);
    }
.wc-pred-tile.is-hot .wc-pred-tile-pct { color: var(--rd-tone); }
.wc-pred-tile-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
.wc-pred-tile-pct {
      font-family: var(--font-mono);
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #fff;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      display: inline-block;
    }
.wc-pred-tile.is-hot .wc-pred-tile-pct { color: var(--rd-tone); }
.wc-pred-tile-bar {
      width: 100%; height: 3px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
      margin-top: 4px;
    }
.wc-pred-tile-bar-fill {
      height: 100%;
      background: var(--rd-tone);
      box-shadow: 0 0 8px var(--rd-tone-soft);
      transition: width 240ms var(--wc-ease-out);
    }
.wc-pred-top .wc-rd-table {
      border: 1px solid var(--rd-tone-line);
      box-shadow: 0 0 0 1px rgba(255, 39, 64, 0.02), 0 0 40px rgba(255, 39, 64, 0.04);
    }
.wc-pred-top .wc-rd-row { padding: 16px 20px; }
@media (max-width: 720px) {
  .wc-pred-top .wc-rd-row { padding: 13px 14px; }
}
.wc-pred-podium {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
@media (max-width: 720px) {
  .wc-pred-podium { grid-template-columns: 1fr; }
}
.wc-pred-podium-card {
      position: relative;
      display: flex; flex-direction: column;
      gap: 10px;
      padding: 18px 18px 16px;
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 14px;
      cursor: pointer;
      transition: border-color 160ms var(--wc-ease-out), background 160ms var(--wc-ease-out);
      min-height: 220px;
    }
.wc-pred-podium-card:hover {
      border-color: var(--rd-tone-line);
      background: rgba(255, 255, 255, 0.025);
    }
.wc-pred-podium-card.is-leader {
      border-color: var(--rd-tone-line);
      box-shadow: inset 0 0 0 1px var(--rd-tone-soft);
    }
.wc-pred-podium-card[aria-expanded="true"] {
      border-color: var(--rd-tone);
      background: rgba(255, 255, 255, 0.04);
      box-shadow: 0 0 0 1px var(--rd-tone), 0 10px 28px -10px var(--rd-tone-soft);
    }
.wc-pred-podium-head {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }
.wc-pred-podium-photo {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      position: relative;
    }
.wc-pred-podium-photo img {
      width: 100%; height: 100%; object-fit: cover;
      background: var(--surface-base);
      position: relative; z-index: 1;
    }
.wc-pred-podium-photo img.is-broken { display: none; }
.wc-pred-podium-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-pred-podium-name {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.01em;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.wc-pred-podium-sub {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
/* The line is the point, and the ellipsis was eating it. This slot is 228px on
   a desktop and 413px on a 1920, but the podium stays three-up in a 703px
   column on an iPad Air 13" in portrait, which leaves 120px: "WR · RECEIVING
   YARDS 51.5" needs 168, so it rendered as "WR · RECEIVING Y…" and the number
   a reader came for was the part that got cut.

   Wrapped to a second line instead of truncated. The cards are equal-height and
   had the slack for it, so this costs five pixels of card height and nothing
   above 1200px, where the slot is wide enough that the rule never engages. */
@media (max-width: 1200px) {
  .wc-pred-podium-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}
.wc-pred-podium-score-row {
      display: flex; align-items: flex-end; gap: 12px;
      margin-top: 4px;
    }
.wc-pred-podium-score {
      font-family: var(--font-mono);
      font-size: 46px;
      font-weight: 800;
      line-height: 0.9;
      letter-spacing: -0.03em;
      color: #fff;
      display: inline-block;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-podium-card[data-band="high"]   .wc-pred-podium-score { color: #34d399; }
.wc-pred-podium-card[data-band="medium"] .wc-pred-podium-score { color: #fbbf24; }
.wc-pred-podium-card[data-band="low"]    .wc-pred-podium-score { color: rgba(255,255,255,0.55); }
.wc-pred-podium-band {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 4px 9px;
      border-radius: 6px;
      align-self: flex-end;
      margin-bottom: 5px;
    }
.wc-pred-podium-card[data-band="high"]   .wc-pred-podium-band { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.32); }
.wc-pred-podium-card[data-band="medium"] .wc-pred-podium-band { background: rgba(251, 191, 36, 0.10); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.32); }
.wc-pred-podium-card[data-band="low"]    .wc-pred-podium-band { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); }
.wc-pred-podium-gradient {
      position: relative;
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--wc-streak-red) 0%, #fbbf24 50%, #34d399 100%);
      opacity: 0.78;
    }
.wc-pred-podium-gradient-dot {
      position: absolute;
      top: 50%;
      width: 14px; height: 14px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45), 0 0 8px rgba(255, 255, 255, 0.45);
    }
.wc-pred-podium-tagline {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.45;
      margin-top: auto;
    }
.wc-pred-podium-tagline em {
      font-style: normal;
      color: var(--rd-tone);
      font-weight: 600;
    }
.wc-pred-foul-shout { display: flex; gap: 8px; margin-top: 11px; }
.wc-pred-shout-chip {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 7px 10px;
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
.wc-pred-shout-chip.is-active {
      background: rgba(255, 255, 255, 0.065);
      border-color: rgba(255, 255, 255, 0.20);
    }
.wc-pred-shout-chip.is-best {
      border-color: var(--rd-tone-line);
      background: var(--rd-tone-soft);
    }
.wc-pred-shout-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wc-pred-shout-th {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.55);
      font-variant-numeric: tabular-nums;
    }
.wc-pred-shout-chip.is-best .wc-pred-shout-th { color: var(--rd-tone); }
.wc-pred-shout-best {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--rd-tone);
      padding: 1px 5px;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.22);
      border: 1px solid var(--rd-tone-line);
    }
.wc-pred-shout-score {
      font-family: var(--font-mono);
      font-size: 21px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-shout-hit {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.5);
      font-variant-numeric: tabular-nums;
    }
.wc-pick-facts {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      margin-top: 11px;
    }
.wc-pick-stat {
      font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums;
    }
.wc-pick-stat b { color: #fff; font-weight: 800; }
.wc-pick-sep { margin: 0 6px; opacity: 0.4; }
.wc-rd-extras .wc-pick-stat { white-space: nowrap; }

/* ── Ranked leaderboard deltas not already in nfl-hub.css ─────────── */
@keyframes rdMenuIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@media (max-width: 480px) {
  .wc-rd-filters { gap: 8px; }
}
@keyframes rdRowEnter {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdDetailIn {
      from { transform: translateY(-4px); }
      to   { transform: translateY(0); }
    }
@media (max-width: 480px) {
  body.wc-mode .wc-rd-head,
      body.wc-mode .wc-rd-row { grid-template-columns: 44px 1fr auto !important; gap: 8px; padding: 11px 12px; }
  body.wc-mode .wc-rd-head .wc-rd-head-cell:nth-child(2) { grid-column: 2 / 3; }
  body.wc-mode .wc-rd-head .wc-rd-head-stat { grid-column: 3 / 4; justify-self: end; text-align: right; }
  body.wc-mode .wc-rd-stat { justify-content: flex-end; }
  .wc-rd-name { font-size: 13.5px; }
  .wc-rd-meta { font-size: 10px; gap: 8px; }
  .wc-rd-rank { font-size: 22px; }
  .wc-rd-stat { gap: 8px; }
}
.wc-stk .wc-rd-list { min-height: 96px; }
@media (max-width: 480px) {
  body.wc-mode .wc-rd-row.wc-stk-row { grid-template-columns: 52px 36px minmax(0, 1fr) !important; }
}
.wc-pred-top .wc-rd-row { padding: 16px 20px; }
/* ── Streak rows ──────────────────────────────────────────────────── */
@keyframes rdMenuIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdRowEnter {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdDetailIn {
      from { transform: translateY(-4px); }
      to   { transform: translateY(0); }
    }
.wc-stk {
      display: grid; gap: 18px; padding-top: 20px;
      --rd-tone:      var(--wc-streak-green);
      --rd-tone-soft: var(--wc-streak-green-soft);
      --rd-tone-line: var(--wc-streak-green-line);
    }
.wc-stk-row {
      grid-template-columns: 84px 44px minmax(0, 1fr) auto;
    }
.wc-stk .wc-rd-list { min-height: 96px; }
.wc-stk-count {
      display: flex; flex-direction: column; gap: 3px;
      min-width: 0;
    }
.wc-stk-last {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap;
    }
.wc-stk-detail { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .wc-stk-row { grid-template-columns: 64px 40px minmax(0, 1fr); row-gap: 8px; }
}
@media (max-width: 480px) {
  body.wc-mode .wc-rd-row.wc-stk-row { grid-template-columns: 52px 36px minmax(0, 1fr) !important; }
  .wc-stk-row .wc-rd-stat-icon { display: inline-flex; }
}

/* ── Head to head: win bar, leader tiles, meetings ────────────────── */
@keyframes rdMenuIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdRowEnter {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdDetailIn {
      from { transform: translateY(-4px); }
      to   { transform: translateY(0); }
    }
.wc-h2h {
      display: grid; gap: 18px; padding-top: 20px;
      --rd-tone:      var(--wc-gold);
      --rd-tone-soft: rgba(255, 39, 64, 0.10);
      --rd-tone-line: rgba(255, 39, 64, 0.32);
    }
.wc-h2h-bar {
      grid-column: 1 / -1;
      display: flex;
      height: 6px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.05);
    }
.wc-h2h-bar span { display: block; height: 100%; }
.wc-h2h-bar .is-home { background: var(--wc-gold); }
.wc-h2h-bar .is-draw { background: rgba(255, 255, 255, 0.18); }
.wc-h2h-bar .is-away { background: var(--wc-streak-blue); }
.wc-h2h-tiles {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
    }
.wc-h2h-tile {
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 14px;
      padding: 14px 16px;
      display: grid; gap: 6px;
      align-content: start;
      min-width: 0;
      --tile-tone: var(--wc-gold);
    }
.wc-h2h-tile[data-tone="disc"] { --tile-tone: var(--wc-streak-red); }
.wc-h2h-tile[data-tone="def"]  { --tile-tone: var(--wc-streak-blue); }
.wc-h2h-tile-label {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
.wc-h2h-tile-label::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--tile-tone);
      box-shadow: 0 0 8px var(--tile-tone);
      flex-shrink: 0;
    }
.wc-h2h-tile-value {
      font-family: var(--font-mono);
      font-size: 28px;
      font-weight: 800;
      color: var(--tile-tone);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
.wc-h2h-tile-name {
      font-family: var(--font-body);
      font-size: 13.5px;
      font-weight: 700;
      color: #fff;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.wc-h2h-tile-meta {
      display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
.wc-h2h-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-h2h-chip {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-secondary);
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 999px;
      padding: 6px 12px;
    }
.wc-h2h-chip b {
      color: #fff;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }
.wc-h2h-meetings {
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 14px;
      overflow: hidden;
    }
.wc-h2h-meeting { border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
.wc-h2h-meeting:last-child { border-bottom: 0; }
.wc-h2h-meeting[aria-expanded="true"] .wc-h2h-meeting-row { background: rgba(255, 255, 255, 0.035); }

/* ── Stat pack hit/miss chips ─────────────────────────────────────── */
.wc-sp-last-meeting {
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 12px;
      overflow: hidden;
    }
.wc-sp-last-meeting > summary {
      list-style: none;
      cursor: pointer;
      padding: 14px 18px;
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #4ea1ff;
    }
.wc-sp-last-meeting > summary::-webkit-details-marker { display: none; }
.wc-sp-last-meeting > summary::after {
      content: '+';
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      color: var(--text-muted);
      transition: transform 140ms var(--wc-ease-out);
    }
.wc-sp-last-meeting[open] > summary::after { content: '−'; }
.wc-sp-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 12px;
      overflow: hidden;
    }
@media (max-width: 900px) {
  .wc-sp-grid { grid-template-columns: 1fr; }
}
.wc-sp-chips {
      display: inline-flex;
      gap: 3px;
      align-items: center;
      vertical-align: middle;
    }
.wc-sp-chip {
      display: inline-flex;
      align-items: center; justify-content: center;
      width: 18px; height: 18px;
      border-radius: 4px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }
.wc-sp-chip.is-hit  { background: rgba(52, 211, 153, 0.16); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.32); }
.wc-sp-chip.is-miss { background: rgba(239, 68, 68, 0.14); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.30); }
.wc-sp-chip.is-na   { background: transparent; color: rgba(148, 163, 184, 0.30); border: 1px solid rgba(148, 163, 184, 0.10); }
@keyframes rdMenuIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdRowEnter {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdDetailIn {
      from { transform: translateY(-4px); }
      to   { transform: translateY(0); }
    }

/* ── Sweep: every remaining rule for the ported families ────────────── */
.wc-sp-action-bar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      padding-top: 12px;
    }
.wc-sp-btn {
      appearance: none;
      display: inline-flex; align-items: center; gap: 6px;
      min-height: 44px;
      padding: 10px 16px;
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 8px;
      color: var(--text-secondary);
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: border-color 140ms var(--wc-ease-out),
                  color 140ms var(--wc-ease-out),
                  background 140ms var(--wc-ease-out);
    }
.wc-sp-btn:hover:not(:disabled) {
      color: var(--text-primary);
      border-color: rgba(255, 39, 64, 0.45);
    }
.wc-sp-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wc-sp-lineup-msg, .wc-sp-lineup-note {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      padding-left: 4px;
    }
.wc-sp-lineup-note { display: inline-flex; align-items: center; }
.wc-sp-share-panel { position: relative; margin-left: auto; }
.wc-sp-share-menu {
      position: absolute; top: calc(100% + 4px); right: 0;
      min-width: 168px;
      padding: 4px;
      background: #111318;
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      display: none;
      flex-direction: column;
      gap: 2px;
      z-index: 50;
    }
.wc-sp-share-menu.is-open { display: flex; }
.wc-sp-share-menu button {
      appearance: none;
      background: transparent;
      border: 0;
      padding: 10px 12px;
      text-align: left;
      color: var(--text-secondary);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 4px;
    }
.wc-sp-share-menu button:hover {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-primary);
    }
.wc-sp-sec-dot {
      width: 8px; height: 3px;
      border-radius: 2px;
      background: currentColor;
    }
.wc-sp-last-meeting-body {
      padding: 18px 20px 22px;
      border-top: 1px solid var(--wc-streak-tile-border);
    }
.wc-sp-empty {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--text-muted);
      text-align: center;
      margin: 0;
      padding: 12px 8px;
    }
.wc-sp-side { min-width: 0; }
.wc-sp-side.is-home { border-right: 1px solid var(--wc-streak-tile-border); }
@media (max-width: 900px) {
  .wc-sp-side.is-home {
        border-right: 0;
        border-bottom: 1px solid var(--wc-streak-tile-border);
      }
}
.wc-sp-sec-header {
      padding: 12px 16px;
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-muted);
      border-bottom: 1px solid var(--wc-streak-tile-border);
      background: rgba(255, 255, 255, 0.012);
    }
.wc-sp-sec-header img {
      width: 18px; height: 18px;
      border-radius: 50%; object-fit: contain;
      background: rgba(255, 255, 255, 0.04);
      padding: 1px;
    }
.wc-sp-ts-flag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      overflow: hidden;
      flex-shrink: 0;
    }
.wc-sp-ts-flag img {
      width: 100%; height: 100%;
      object-fit: contain;
      background: transparent;
      padding: 0;
    }
.wc-sp-sec-header.is-team-stats { background: rgba(255, 255, 255, 0.025); color: var(--text-secondary); }
.wc-sp-sec-header.is-defensive { color: #ef4444; }
.wc-sp-sec-header.is-offensive { color: #4ea1ff; }
.wc-sp-sec-header.is-shooting  { color: #ffb627; }
.wc-sp-sec-header.is-goals     { color: #34d399; }
.wc-sp-sec-header.is-defensive .wc-sp-sec-dot { background: #ef4444; }
.wc-sp-sec-header.is-offensive .wc-sp-sec-dot { background: #4ea1ff; }
.wc-sp-sec-header.is-shooting  .wc-sp-sec-dot { background: #ffb627; }
.wc-sp-sec-header.is-goals     .wc-sp-sec-dot { background: #34d399; }
.wc-sp-sec-header.is-team-stats .wc-sp-sec-dot { background: var(--wc-gold); }
.wc-sp-sec-meta {
      font-weight: 400;
      color: var(--text-muted);
      font-size: 10px;
      text-transform: none;
      letter-spacing: 0;
      margin-left: auto;
    }
.wc-sp-ts-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--wc-streak-tile-border);
    }
.wc-sp-ts-cell {
      background: rgba(255, 255, 255, 0.012);
      padding: 10px 8px;
      text-align: center;
      min-height: 70px;
      display: grid;
      gap: 2px;
      align-content: center;
    }
.wc-sp-ts-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      text-transform: uppercase;
    }
.wc-sp-ts-val {
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 800;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
.wc-sp-ts-val.is-empty { color: rgba(148, 163, 184, 0.30); font-weight: 600; }
.wc-sp-ts-sub {
      font-family: var(--font-mono);
      font-size: 8.5px;
      color: var(--text-muted);
      letter-spacing: 0.04em;
    }
@media (max-width: 480px) {
  .wc-sp-ts-grid { grid-template-columns: repeat(2, 1fr); }
}
.wc-sp-tbl-wrap {
      position: relative;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
.wc-sp-tbl {
      width: 100%;
      border-collapse: collapse;
    }
.wc-sp-tbl th {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      padding: 8px 6px;
      text-align: left;
      border-bottom: 1px solid var(--wc-streak-tile-border);
      white-space: nowrap;
    }
.wc-sp-tbl th:first-child { padding-left: 14px; }
.wc-sp-tbl th.is-num,
    .wc-sp-tbl td.is-num   { text-align: right; }
.wc-sp-tbl th.is-chip,
    .wc-sp-tbl td.is-chip  { text-align: center; }
.wc-sp-tbl td {
      font-family: var(--font-body);
      font-size: 12.5px;
      padding: 8px 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.025);
    }
.wc-sp-tbl td:first-child { padding-left: 14px; }
.wc-sp-tbl tr:last-child td { border-bottom: 0; }
.wc-sp-tbl tr:hover td { background: rgba(255, 255, 255, 0.015); }
.wc-sp-tbl .wc-sp-tbl-name {
      font-weight: 700;
      color: var(--wc-gold);
      cursor: pointer;
      white-space: nowrap;
    }
.wc-sp-tbl .wc-sp-tbl-name:hover { color: var(--text-primary); text-decoration: underline; }
.wc-sp-tbl .wc-sp-tbl-name:focus-visible {
      outline: 2px solid var(--wc-gold);
      outline-offset: 2px;
      border-radius: 2px;
    }
.wc-sp-tbl .wc-sp-tbl-pos {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: 0.05em;
    }
.wc-sp-tbl .wc-sp-tbl-num {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--text-secondary);
      text-align: right;
    }
.wc-sp-tbl .wc-sp-tbl-num.is-hot { color: #ef4444; font-weight: 800; }
.wc-sp-tbl .wc-sp-tbl-num.is-warm { color: #ffb627; }
.wc-sp-tbl .wc-sp-tbl-num.is-good { color: #34d399; font-weight: 700; }
.wc-sp-tbl .wc-sp-tbl-opp {
      font-family: var(--font-body);
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
    }
.wc-sp-tbl .wc-sp-tbl-empty td {
      color: var(--text-muted);
      text-align: center;
      padding: 18px 6px;
      font-size: 12px;
    }
.wc-sp-tbl .wc-sp-tbl-loading td {
      color: var(--text-muted);
      text-align: center;
      padding: 14px 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
    }
.wc-sp-popup-overlay {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.74);
      backdrop-filter: blur(6px);
      z-index: 200;
      display: flex; align-items: center; justify-content: center;
      padding: 16px;
    }
.wc-sp-popup-overlay[hidden] { display: none; }
.wc-sp-popup {
      /* Shared with the football match popup and the statpack popup. */
  background: linear-gradient(165deg, #101217 0%, #161a1e 40%, #14181c 100%);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 16px;
      max-width: 800px;
      width: 100%;
      max-height: 88vh;
      overflow-y: auto;
      box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7);
      position: relative;
    }
.wc-sp-popup-inner { padding: 22px 26px 20px; }
.wc-sp-popup-header {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 16px; padding-bottom: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
.wc-sp-popup-photo {
      width: 52px; height: 52px;
      border-radius: 50%; object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.10);
      flex-shrink: 0;
    }
.wc-sp-popup-photo.is-placeholder {
      background: rgba(255, 255, 255, 0.04);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
    }
.wc-sp-popup-name {
      font-family: var(--font-body);
      font-size: 19px;
      font-weight: 800;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }
.wc-sp-popup-team {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      margin-top: 2px;
      letter-spacing: 0.04em;
    }
.wc-sp-popup-close {
      margin-left: auto;
      appearance: none;
      width: 32px; height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--text-muted);
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }
.wc-sp-popup-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.08); }
.wc-sp-popup-section { margin-bottom: 14px; }
.wc-sp-popup-section-title {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--wc-gold);
      margin: 0 0 8px;
    }
.wc-sp-popup-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }
.wc-sp-popup-stat {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.04);
      border-radius: 6px;
      padding: 6px 8px;
      text-align: center;
    }
.wc-sp-popup-stat-label {
      font-family: var(--font-mono);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
.wc-sp-popup-stat-value {
      font-family: var(--font-mono);
      font-size: 13.5px;
      font-weight: 800;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
@media (max-width: 600px) {
  .wc-sp-popup-inner { padding: 18px 16px 16px; }
  .wc-sp-popup-stats { grid-template-columns: repeat(3, 1fr); }
  .wc-sp-popup-stat-value { font-size: 12px; }
  .wc-sp-popup-name { font-size: 17px; }
}
.wc-stk-thr {
      display: inline-flex; align-items: center;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.4px;
      color: var(--rd-tone);
      background: var(--rd-tone-soft);
      border: 1px solid var(--rd-tone-line);
      padding: 2px 7px;
      border-radius: 4px;
      text-transform: none;
      white-space: nowrap;
    }
.wc-stk-comp {
      display: inline-flex; align-items: center;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 2px 6px;
      border-radius: 3px;
      white-space: nowrap;
      max-width: 160px;
      overflow: hidden; text-overflow: ellipsis;
    }
.wc-stk-detail-head {
      display: inline-flex; align-items: center; gap: 8px;
      flex-wrap: wrap; row-gap: 4px;
    }
.wc-stk-ctx {
      display: flex; flex-direction: column; gap: 12px;
      margin-top: 8px;
    }
.wc-stk-ctx-head {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
.wc-stk-ctx-line {
      font-family: var(--font-body);       /* match the streak headline, not mono */
      font-size: 13px;
      line-height: 1.5;
      letter-spacing: -0.01em;
      color: rgba(255, 255, 255, 0.82);
      overflow-wrap: anywhere;
    }
.wc-stk-ctx-line strong { color: #fff; font-weight: 700; }
.wc-stk-ctx-sub {
      font-family: var(--font-body);
      font-size: 11.5px;
      color: var(--text-muted);
    }
.wc-stk-hit,
    .wc-stk-miss {
      display: inline-flex; align-items: center; gap: 4px;
      vertical-align: middle;
      margin-left: 6px;
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 2px 7px; border-radius: 4px;
      white-space: nowrap;
    }
.wc-stk-hit {
      color: var(--rd-tone);
      background: var(--rd-tone-soft);
      border: 1px solid var(--rd-tone-line);
    }
.wc-stk-hit svg { width: 10px; height: 10px; display: block; }
.wc-stk-miss {
      color: rgba(255, 255, 255, 0.45);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.09);
    }
.wc-stk-h2h-meta { color: var(--text-muted); white-space: nowrap; margin-left: 6px; }
@media (max-width: 720px) {
  .wc-stk-count-num { font-size: 26px; }
  .wc-stk-values {
        grid-column: 2 / -1;
        flex-direction: row; align-items: center; justify-content: flex-start;
        gap: 10px; flex-wrap: wrap;
      }
}
@media (max-width: 480px) {
  .wc-stk-count-num { font-size: 22px; }
}
.wc-h2h-sub {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--text-muted);
      margin: 0;
    }
.wc-h2h-body { display: grid; gap: 18px; }
.wc-h2h-status {
      padding: 28px 20px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11.5px;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin: 0;
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 12px;
    }
@media (max-width: 480px) {
  .wc-h2h-strip { padding: 14px 14px 12px; gap: 10px 10px; }
  .wc-h2h-strip-num { font-size: 24px; }
  .wc-h2h-crest { width: 26px; height: 26px; }
}
.wc-h2h-meeting-row {
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 13px 18px;
      cursor: pointer;
      transition: background 140ms var(--wc-ease-out);
    }
.wc-h2h-meeting-row:hover { background: rgba(255, 255, 255, 0.025); }
.wc-h2h-meeting-row:focus-visible { outline: none; background: rgba(255, 255, 255, 0.04); }
.wc-h2h-detail-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wc-h2h-detail-label {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.38);
    }
.wc-h2h-detail-icon {
      width: 24px; height: 24px;
      border-radius: 7px;
      background: var(--rd-tone-soft);
      border: 1px solid var(--rd-tone-line);
      color: var(--rd-tone);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
.wc-h2h-detail-icon svg { width: 16px; height: 16px; display: block; }
.wc-h2h-detail-extra { display: contents; }
.wc-h2h-detail-extra[hidden] { display: none; }
.wc-h2h-detail-more {
      appearance: none;
      align-self: flex-start;
      padding: 2px 0;
      background: none;
      border: 0;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--rd-tone);
      cursor: pointer;
      transition: color 140ms var(--wc-ease-out);
    }
.wc-h2h-detail-more:hover,
    .wc-h2h-detail-more:focus-visible { color: #fff; outline: none; }
.wc-h2h-detail-more[hidden] { display: none; }
.wc-h2h-detail-item {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-body);
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.82);
      min-width: 0;
    }
.wc-h2h-detail-name {
      min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.wc-h2h-detail-item b {
      font-family: var(--font-mono);
      font-weight: 800;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }
@media (max-width: 720px) {
  .wc-h2h-meeting-row { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .wc-h2h-meeting-venue { display: none; }
  .wc-h2h-detail { padding: 10px 14px 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; }
}
.wc-pred {
      display: grid; gap: 22px; padding-top: 20px;
      --rd-tone:      var(--wc-gold);
      --rd-tone-soft: rgba(255, 39, 64, 0.10);
      --rd-tone-line: rgba(255, 39, 64, 0.32);
    }
.wc-pred-section { display: grid; gap: 12px; }
.wc-pred-section[data-tone="def"] {
      --rd-tone:      var(--wc-streak-blue);
      --rd-tone-soft: var(--wc-streak-blue-soft);
      --rd-tone-line: var(--wc-streak-blue-line);
    }
.wc-pred-section[data-tone="disc"] {
      --rd-tone:      var(--wc-streak-red);
      --rd-tone-soft: var(--wc-streak-red-soft);
      --rd-tone-line: var(--wc-streak-red-line);
    }
.wc-pred-section-header {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 12px; flex-wrap: wrap;
    }
.wc-pred-section-title {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: #fff;
      margin: 0;
    }
.wc-pred-section-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--rd-tone);
      box-shadow: 0 0 10px var(--rd-tone-soft);
      flex-shrink: 0;
    }
.wc-pred-section-dot.has-icon {
      width: 20px; height: 20px;
      background: none; box-shadow: none; border-radius: 0;
      color: var(--rd-tone);
      display: inline-flex; align-items: center; justify-content: center;
    }
.wc-pred-section-dot.has-icon svg { width: 20px; height: 20px; display: block; }
.wc-pred-section-sub {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-left: auto;   /* push sub (+ any toggle + the collapse chevron) to the right */
    }
.wc-pred-section-header { cursor: pointer; }
.wc-pred-section-chevron {
      flex: 0 0 auto;
      width: 20px; height: 20px;
      display: inline-flex; align-items: center; justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      transition: transform 0.2s ease, color 0.2s ease;
    }
.wc-pred-section-header:hover .wc-pred-section-chevron { color: #fff; }
.wc-pred-section.is-collapsed .wc-pred-section-chevron { transform: rotate(-90deg); }
.wc-pred-section.is-collapsed > *:not(.wc-pred-section-header) { display: none; }
.wc-pred-section.is-collapsed .wc-pred-threshold-toggle { display: none; }
.wc-pred-profile-link {
      margin-left: auto; font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
      color: var(--rd-tone, #ff2740); text-decoration: none;
    }
.wc-pred-profile-link:hover { text-decoration: underline; }
.wc-pred-section-link {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--rd-tone);
      text-decoration: none;
      padding: 4px 9px;
      border-radius: 6px;
      background: var(--rd-tone-soft);
      border: 1px solid var(--rd-tone-line);
      transition: background 140ms var(--wc-ease-out);
    }
.wc-pred-section-link:hover { background: rgba(255, 255, 255, 0.06); }
.wc-pred-section-link::after { content: ' →'; }
.wc-pred-hero {
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 14px;
      padding: 22px 22px 18px;
      display: grid; gap: 22px;
    }
.wc-pred-1x2 {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 18px;
      align-items: center;
    }
.wc-pred-1x2-team {
      display: flex; flex-direction: column; gap: 6px;
      min-width: 0;
    }
.wc-pred-1x2-team.is-away { text-align: right; }
.wc-pred-1x2-flag {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      display: inline-flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
.wc-pred-1x2-team.is-away .wc-pred-1x2-flag { margin-left: auto; }
.wc-pred-1x2-flag img { width: 100%; height: 100%; object-fit: contain; }
.wc-pred-1x2-name {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.wc-pred-1x2-pct {
      font-family: var(--font-mono);
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      color: var(--wc-gold);
      font-variant-numeric: tabular-nums;
      display: inline-block;
    }
.wc-pred-1x2-team.is-away .wc-pred-1x2-pct { color: var(--wc-streak-blue); }
.wc-pred-1x2-team.is-draw {
      text-align: center;
      gap: 4px;
    }
.wc-pred-1x2-team.is-draw .wc-pred-1x2-pct {
      font-size: 26px;
      color: rgba(255, 255, 255, 0.78);
    }
.wc-pred-1x2-team.is-draw .wc-pred-1x2-label {
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
.wc-pred-1x2-bar {
      grid-column: 1 / -1;
      display: flex;
      width: 100%;
      height: 8px;
      border-radius: 6px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }
.wc-pred-1x2-bar-seg {
      transition: flex 220ms var(--wc-ease-out);
    }
.wc-pred-1x2-bar-seg.is-home  { background: var(--wc-gold); }
.wc-pred-1x2-bar-seg.is-draw  { background: rgba(255, 255, 255, 0.32); }
.wc-pred-1x2-bar-seg.is-away  { background: var(--wc-streak-blue); }
.wc-pred-mode {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
    }
.wc-pred-mode-line {
      font-family: var(--font-body);
      font-size: 13px;
      color: rgba(255, 255, 255, 0.78);
      line-height: 1.4;
    }
.wc-pred-mode-line strong { color: #fff; font-weight: 700; }
.wc-pred-mode-score {
      font-family: var(--font-mono);
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--wc-gold);
      display: inline-block;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-hero[aria-expanded="true"] { border-color: var(--rd-tone-line); }
.wc-pred-method {
      grid-column: 1 / -1;
      margin-top: 4px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px 28px;
      animation: rdDetailIn 220ms var(--wc-ease-out);
    }
.wc-pred-method[hidden] { display: none; }
@media (max-width: 720px) {
  .wc-pred-method { grid-template-columns: 1fr; }
}
.wc-pred-method-cell { display: flex; flex-direction: column; gap: 4px; }
.wc-pred-method-label {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.4);
    }
.wc-pred-method-line {
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.82);
      line-height: 1.5;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-method-line strong { color: #fff; font-weight: 700; }
.wc-pred-method-line em {
      font-style: normal;
      color: var(--rd-tone);
      font-weight: 600;
    }
.wc-pred-expand-toggle {
      appearance: none;
      background: transparent;
      border: 1px dashed rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 6px 10px;
      cursor: pointer;
      transition: color 140ms, border-color 140ms;
      justify-self: end;
    }
.wc-pred-expand-toggle:hover { color: #fff; border-color: var(--rd-tone-line); }
.wc-pred-hero[aria-expanded="true"] .wc-pred-expand-toggle {
      color: var(--rd-tone);
      border-color: var(--rd-tone-line);
    }
@media (max-width: 720px) {
  .wc-pred-hero { padding: 18px 16px 14px; }
  .wc-pred-1x2 { gap: 10px; }
  .wc-pred-1x2-pct { font-size: 26px; }
  .wc-pred-1x2-name { font-size: 12px; }
  .wc-pred-mode-score { font-size: 22px; }
}
.wc-pred-empty {
      padding: 22px 18px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 14px;
    }
.wc-pred-podium-photo-fallback {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.42);
      z-index: 0;
    }
.wc-pred-threshold-toggle {
      display: inline-flex;
      gap: 2px;
      padding: 2px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.10);
      align-self: center;
    }
.wc-pred-th-btn {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.6);
      background: transparent;
      border: 0;
      border-radius: 6px;
      padding: 4px 13px;
      cursor: pointer;
      font-variant-numeric: tabular-nums;
      transition: background 0.15s ease, color 0.15s ease;
    }
.wc-pred-th-btn:hover { color: #fff; }
.wc-pred-th-btn.is-active {
      background: var(--rd-tone-soft);
      color: var(--rd-tone);
      box-shadow: inset 0 0 0 1px var(--rd-tone-line);
    }
.wc-pred-reasoning {
      grid-column: 1 / -1;
      margin-top: 12px;
      padding: 18px 18px 16px;
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--rd-tone-line);
      border-radius: 14px;
      display: grid;
      gap: 16px;
      animation: rdDetailIn 220ms var(--wc-ease-out);
    }
.wc-pred-reasoning-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; flex-wrap: wrap;
    }
.wc-pred-reasoning-title {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--rd-tone);
    }
.wc-pred-reasoning-opp {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--text-muted);
    }
.wc-pred-reasoning-opp-select {
      appearance: none;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--rd-tone-line);
      border-radius: 8px;
      color: #fff;
      padding: 6px 28px 6px 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.04em;
      cursor: pointer;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4l3 4 3-4' fill='none' stroke='%23ffffff88' stroke-width='1.5'/></svg>");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }
.wc-pred-factors {
      display: grid;
      gap: 8px;
    }
.wc-pred-factor {
      display: grid;
      grid-template-columns: 130px 1fr 60px;
      align-items: center;
      gap: 12px;
    }
.wc-pred-factor-label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
    }
.wc-pred-factor-track {
      position: relative;
      height: 8px;
      background: rgba(255, 255, 255, 0.04);
      border-radius: 4px;
      overflow: hidden;
    }
.wc-pred-factor-fill {
      position: absolute; inset: 0;
      width: 0;
      background: var(--rd-tone);
      box-shadow: 0 0 10px var(--rd-tone-soft);
      border-radius: 4px;
      transition: width 280ms var(--wc-ease-out);
    }
.wc-pred-factor-value {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: #fff;
      text-align: right;
      display: inline-block;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-mults {
      display: flex; flex-wrap: wrap;
      gap: 8px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
.wc-pred-mult {
      display: inline-flex; align-items: baseline; gap: 5px;
      padding: 4px 9px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.04em;
      color: var(--text-muted);
    }
.wc-pred-mult-label { text-transform: uppercase; letter-spacing: 0.06em; }
.wc-pred-mult-value {
      font-family: var(--font-mono);
      font-weight: 700;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-mult.is-up    .wc-pred-mult-value { color: var(--rd-tone); }
.wc-pred-mult.is-down  .wc-pred-mult-value { color: var(--wc-streak-blue); }
.wc-pred-raw {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }
@media (max-width: 720px) {
  .wc-pred-raw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wc-pred-raw-cell { display: flex; flex-direction: column; gap: 2px; }
.wc-pred-raw-label {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.4);
    }
.wc-pred-raw-value {
      font-family: var(--font-mono);
      font-size: 13.5px;
      font-weight: 700;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-opp-card {
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--rd-tone-line);
      border-radius: 12px;
      display: grid;
      gap: 10px;
      animation: rdDetailIn 200ms var(--wc-ease-out);
    }
.wc-pred-opp-card[hidden] { display: none; }
.wc-pred-opp-card-head {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
.wc-pred-opp-card-photo {
      width: 30px; height: 30px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
.wc-pred-opp-card-photo img {
      width: 100%; height: 100%; object-fit: cover;
      position: relative; z-index: 1;
    }
.wc-pred-opp-card-photo img.is-broken { display: none; }
.wc-pred-opp-card-initials {
      position: absolute; inset: 0; z-index: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-size: 10px; font-weight: 700;
      color: rgba(255, 255, 255, 0.5);
    }
.wc-pred-opp-card-name {
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #fff;
    }
.wc-pred-opp-card-pos {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--rd-tone);
      padding: 2px 7px;
      border: 1px solid var(--rd-tone-line);
      border-radius: 999px;
    }
.wc-pred-opp-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
.wc-pred-opp-stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
    }
.wc-pred-opp-stat-label {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.45);
    }
.wc-pred-opp-stat-per90 {
      font-family: var(--font-mono);
      font-size: 22px;
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.01em;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }
.wc-pred-opp-stat-unit {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.4);
      margin-left: 3px;
    }
.wc-pred-opp-stat-total {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.4);
      font-variant-numeric: tabular-nums;
    }
.wc-pred-nuggets {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
.wc-pred-nuggets[hidden] { display: none; }
.wc-pred-nugget {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #fff;
      background: var(--rd-tone-soft);
      border: 1px solid var(--rd-tone);
      border-radius: 999px;
      padding: 5px 11px 5px 7px;
    }
.wc-pred-nugget-icon {
      display: inline-flex;
      flex-shrink: 0;
      color: var(--rd-tone);
    }
.wc-pred-nugget-icon svg { width: 15px; height: 15px; display: block; }
.wc-pred-nugget-text { line-height: 1; }
.pv-picks > .wc-pred-section-header .wc-pred-section-title,
    .pv-board-sec > .wc-pred-section-header .wc-pred-section-title { font-size: 22px; letter-spacing: -0.01em; }
.pv-picks > .wc-pred-section-header, .pv-board-sec > .wc-pred-section-header { margin-bottom: 4px; }

/* ── NFL-only modifiers on the ported components ────────────────────────
 * Everything above is football markup, verbatim. These are the handful of
 * adjustments the NFL data needs: a chip that holds a three-digit yardage
 * instead of a tick, and a team logo where the football pages put a player
 * photo (NFL player photos are off, and a helmet identifies a player faster
 * than initials do anyway).
 */
body.wc-mode .nfl-vals .wc-sp-chip {
  width: auto; min-width: 22px; padding: 0 4px; height: 20px;
  font-variant-numeric: tabular-nums;
}
body.wc-mode .nfl-vals { gap: 4px; flex-wrap: nowrap; }

/* The podium's photo slot, holding a logo. object-fit keeps the mark whole. */
body.wc-mode .nfl-podium-logo,
body.wc-mode .nfl-rd-logo { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
body.wc-mode .wc-rd-avatar .nfl-rd-logo { padding: 6px; }

/* A pick row carries the value chips AND the rate, so the stat column needs to
 * be a two-part flex rather than a single right-aligned number. */
body.wc-mode .wc-rd-row.nfl-pick-row .wc-rd-stat {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
body.wc-mode .wc-rd-row.nfl-pick-row[data-band="high"]   .wc-rd-stat-value { color: #34d399; }
body.wc-mode .wc-rd-row.nfl-pick-row[data-band="medium"] .wc-rd-stat-value { color: #fbbf24; }
body.wc-mode .wc-rd-row.nfl-pick-row[data-band="low"]    .wc-rd-stat-value { color: rgba(255,255,255,0.55); }
/* Below the leaderboard's own breakpoint the chips are the first thing to go:
 * the name and the rate are what the row is for. */
@media (max-width: 720px) {
  body.wc-mode .wc-rd-row.nfl-pick-row .nfl-vals { display: none; }
}

/* The window pills sit in the same toolbar as the position pills, so they need
 * to be visibly a second, separate control rather than more of the first. */
body.wc-mode #prop-window {
  display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto;
  padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* The podium name is a <span> on the football page; here it links to the player
 * page, so the underline has to go or every card wears one. */
body.wc-mode a.wc-pred-podium-name { text-decoration: none; }
body.wc-mode a.wc-pred-podium-name:hover { color: var(--wc-gold); }

/* ── History vs price: the second marker ────────────────────────────────
 * The gradient bar carries two things now. The filled dot is the measured hit
 * rate; the tick is what the price implies with the margin stripped out. The
 * gap between them is the signal, so the tick is deliberately a different
 * shape rather than a second dot: two dots would read as a range.
 */
body.wc-mode .nfl-implied-tick {
  position: absolute; top: -3px; width: 2px; height: 12px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
body.wc-mode .nfl-gradient-key {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-muted); margin-top: -4px;
}
body.wc-mode .nfl-key-hit { color: rgba(255, 255, 255, 0.72); }
body.wc-mode .nfl-key-price { color: var(--text-muted); }

/* The band chip now holds "+12 vs price", which is wider than "medium", so it
 * has to stop clipping. */
body.wc-mode .wc-pred-podium-band { white-space: nowrap; }

/* Board row: the edge over the rate, right-aligned as one unit. */
body.wc-mode .nfl-rd-pair {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  min-width: 56px;
}
body.wc-mode .nfl-rd-sub {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--text-muted); white-space: nowrap;
}

/* ── Streak rows: the count, the stat icon slot, the value strip ────── */
.wc-rd-pill.is-active .wc-rd-pill-icon { color: var(--rd-tone); opacity: 1; }
.wc-stk-sub {
      font-family: var(--font-body);
      font-size: 12.5px;
      color: var(--text-muted);
      margin: 0;
    }
.wc-stk-filters {
      display: flex; flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
@media (max-width: 600px) {
  .wc-stk-filters { gap: 5px; }
  .wc-stk-filters .wc-rd-pills { padding: 2px; gap: 1px; }
  .wc-stk-filters .wc-rd-pill { padding: 4px 8px; font-size: 11px; min-height: 26px; gap: 4px; }
  .wc-stk-filters .wc-rd-metric-btn { padding: 4px 9px; font-size: 11px; min-height: 26px; gap: 6px; }
  .wc-stk-filters .wc-rd-metric-btn-icon { display: none; }
}
.wc-stk-count-num {
      font-family: var(--font-mono);
      font-size: 34px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.03em;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }
.wc-stk-count-num[data-heat="strong"] { color: var(--rd-tone); }
.wc-stk-count-num[data-heat="fire"] {
      background: linear-gradient(135deg, var(--rd-tone) 0%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 14px var(--rd-tone-soft));
    }
.wc-stk-count-unit {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
.wc-stk-values {
      display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
      min-width: 0;
    }
.wc-stk-note {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--text-muted);
      margin: 0;
      padding: 0 4px;
    }
.wc-stk-ctx-block { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-stk-team-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wc-stk-team-crest { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }

/* The streak row's icon slot holds a team logo rather than a stat glyph, so it
 * needs the box the glyph had. */
body.wc-mode .nfl-stk-row .wc-rd-stat-icon { width: 28px; height: 28px; }
body.wc-mode .nfl-stk-row .wc-stk-team-crest { width: 28px; height: 28px; }
body.wc-mode a.wc-stk-row { text-decoration: none; color: inherit; }
/* Values column: chips over the last-hit line, right-aligned as one unit. */
body.wc-mode .nfl-stk-row .wc-stk-values .wc-rd-mins {
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── Head to head: the record strip and its win bar ─────────────────── */
.wc-h2h-sec-title {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin: 0;
    }
.wc-h2h-sec-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--wc-gold);
      box-shadow: 0 0 12px rgba(255, 39, 64, 0.4);
      flex-shrink: 0;
    }
.wc-h2h-strip {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 14px 18px;
      align-items: center;
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 14px;
      padding: 18px 20px 16px;
    }
.wc-h2h-strip-side {
      display: flex; align-items: center; gap: 12px;
      min-width: 0;
    }
.wc-h2h-strip-side.is-away { flex-direction: row-reverse; }
.wc-h2h-strip-side.is-away .wc-h2h-strip-cell { align-items: flex-end; text-align: right; }
.wc-h2h-crest {
      width: 34px; height: 34px;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
    }
.wc-h2h-crest img { width: 100%; height: 100%; object-fit: contain; }
.wc-h2h-strip-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wc-h2h-strip-num {
      font-family: var(--font-mono);
      font-size: 30px;
      font-weight: 800;
      color: #fff;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
.wc-h2h-strip-side.is-leading .wc-h2h-strip-num { color: var(--wc-gold); }
.wc-h2h-strip-side .wc-h2h-strip-label { display: none; }
.wc-h2h-strip-label {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      max-width: 100%;
    }
.wc-h2h-leaders { display: grid; gap: 12px; }
.wc-h2h-meeting-date {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.75);
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
.wc-h2h-meeting-score {
      display: inline-flex; align-items: center; gap: 10px;
      flex-wrap: wrap; row-gap: 4px;
      min-width: 0;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
    }
.wc-h2h-meeting-venue {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      max-width: 180px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      text-align: right;
    }
@keyframes rdMenuIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdRowEnter {
      from { opacity: 0; transform: translateY(3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
@keyframes rdDetailIn {
      from { transform: translateY(-4px); }
      to   { transform: translateY(0); }
    }
.wc-h2h-strip-mid {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }

/* Head-to-head: the crest slot holds a logo, and the winning side of a
 * meeting row is emphasised so a list of scores reads as results. */
body.wc-mode .nfl-h2h-logo { width: 100%; height: 100%; object-fit: contain; }
body.wc-mode a.wc-h2h-tile-name { text-decoration: none; }
body.wc-mode a.wc-h2h-tile-name:hover { color: var(--wc-gold); }

/* ── Head to head: the meetings list ──────────────────────────────── */
.wc-h2h-meetings-wrap { display: grid; gap: 12px; }
.wc-h2h-meeting-when { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-h2h-meeting-comp {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.wc-h2h-ms-team {
      display: inline-flex; align-items: center; gap: 6px;
      min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
.wc-h2h-ms-team img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.wc-h2h-ms-team.is-winner { color: #fff; font-weight: 800; }
.wc-h2h-ms-score {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 800;
      color: var(--wc-gold);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
.wc-h2h-detail {
      padding: 12px 18px 16px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 14px 24px;
      border-top: 1px dashed rgba(255, 255, 255, 0.06);
      animation: rdDetailIn 220ms var(--wc-ease-out);
    }
.wc-h2h-detail[hidden] { display: none; }

/* Football lists the HOME side first and reverses the away column, because its
 * fixtures read "home v away". NFL reads "AWAY @ HOME" and the game header puts
 * the away side on the left, so the reversal moves to the home column to keep
 * the crests on the outside of the strip.
 */
body.wc-mode .wc-h2h-strip-side.is-away { flex-direction: row; }
body.wc-mode .wc-h2h-strip-side.is-away .wc-h2h-strip-cell {
  align-items: flex-start; text-align: left;
}
body.wc-mode .wc-h2h-strip-side.is-home { flex-direction: row-reverse; }
body.wc-mode .wc-h2h-strip-side.is-home .wc-h2h-strip-cell {
  align-items: flex-end; text-align: right;
}
/* The venue is hidden on the football page at its own breakpoint. On a desktop
 * NFL board the stadium is worth having, since a neutral-site or international
 * game is exactly the kind of context a head-to-head record hides. */
@media (min-width: 900px) {
  body.wc-mode .wc-h2h-meeting .wc-h2h-meeting-venue { display: block; }
}

/* ── Matchup: the pairing rows ──────────────────────────────────────────
 * An attack's average, what the defence it faces normally gives up, and the
 * span between them with the midpoint marked. The width of the span is itself
 * the information: a wide one means the two sides disagree about this game.
 */
body.wc-mode .nfl-pair-block {
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 14px; overflow: hidden; margin-bottom: 14px;
}
body.wc-mode .nfl-pair-block .wc-sp-sec-header { gap: 8px; }
body.wc-mode .nfl-pair-logo {
  width: 20px; height: 20px; object-fit: contain; vertical-align: -4px;
}
body.wc-mode .nfl-pair-head,
body.wc-mode .nfl-pair {
  display: grid;
  /* Retuned for half the page: the two blocks now sit side by side, so the row
   * has ~471px rather than 943. Labels and numbers give up what the track needs
   * to stay readable. */
  grid-template-columns: 84px 48px minmax(90px, 1fr) 48px 52px;
  align-items: center; gap: 9px; padding: 8px 12px;
}
body.wc-mode .nfl-pair-head {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 8px;
}
body.wc-mode .nfl-pair-head span:nth-child(2),
body.wc-mode .nfl-pair-head span:nth-child(4) { text-align: right; }
body.wc-mode .nfl-pair-head span:nth-child(5) { text-align: right; }
body.wc-mode .nfl-pair { border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
body.wc-mode .nfl-pair:last-child { border-bottom: 0; }
body.wc-mode .nfl-pair-label {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
}
body.wc-mode .nfl-pair-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
}
body.wc-mode .nfl-pair-att { color: #fff; }
body.wc-mode .nfl-pair-def { color: rgba(255, 255, 255, 0.62); }
body.wc-mode .nfl-pair-track {
  position: relative; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
/* Faint ticks at every quarter of the axis, so a bar's position can be read
 * rather than guessed at. */
body.wc-mode .nfl-pair-grid {
  position: absolute; inset: -3px 0 -3px 0;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 25%);
}
/* Two halves meeting at the midpoint. The row exists to show that the midpoint
 * sits exactly halfway between what this attack does and what that defence
 * allows; two abutting halves show it, where a tick on one bar leaves the
 * reader measuring by eye.
 *
 * The attacking half takes the accent, the conceding half stays neutral, so
 * which end is which is legible without reading the numbers either side. */
body.wc-mode .nfl-pair-half {
  position: absolute; top: 0; bottom: 0;
}
body.wc-mode .nfl-pair-half.is-low {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px 0 0 999px;
}
body.wc-mode .nfl-pair-half.is-high {
  background: linear-gradient(90deg, rgba(255, 39, 64, 0.55), rgba(255, 39, 64, 0.30));
  border-radius: 0 999px 999px 0;
}
/* The midpoint itself: a full-height line, not a nub, since it is the number the
 * row is built to deliver. */
body.wc-mode .nfl-pair-mid {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  transform: translateX(-50%); border-radius: 1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(11, 13, 18, 0.7), 0 0 8px rgba(255,255,255,0.35);
}
body.wc-mode .nfl-pair-mid-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--wc-gold);
}
/* The tile grid inside each stat-pack column. */
body.wc-mode .nfl-tile-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 1100px) {
  body.wc-mode .nfl-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body.wc-mode .nfl-pair-head,
  body.wc-mode .nfl-pair {
    grid-template-columns: 96px 48px 48px 56px; gap: 8px; padding: 9px 12px;
  }
  /* The track is the first thing to go: the three numbers carry the row. */
  body.wc-mode .nfl-pair-track { display: none; }
  body.wc-mode .nfl-pair-head span:nth-child(3) { display: none; }
}

/* ── Market: the line-shopping row ──────────────────────────────────────
 * A <details> so the per-book list is one click away rather than a wall. The
 * summary carries the four things a bettor compares: what the market reads, the
 * best price, who has it, and how far the books are apart.
 */
body.wc-mode .nfl-mkt-row { border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
body.wc-mode .nfl-mkt-row:last-child { border-bottom: 0; }
body.wc-mode .nfl-mkt-row > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: minmax(0, 1fr) 52px auto 120px 18px;
  align-items: center; gap: 12px; padding: 12px 18px;
  transition: background 140ms var(--wc-ease-out);
}
body.wc-mode .nfl-mkt-row > summary::-webkit-details-marker { display: none; }
body.wc-mode .nfl-mkt-row > summary::after {
  content: '+'; font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  color: var(--text-muted); text-align: right;
}
body.wc-mode .nfl-mkt-row[open] > summary::after { content: '\2212'; }
body.wc-mode .nfl-mkt-row > summary:hover { background: rgba(255, 255, 255, 0.025); }
body.wc-mode .nfl-mkt-row[open] > summary { background: rgba(255, 255, 255, 0.03); }
/* A row with no second side to de-vig against, and no book disagreement, has
 * nothing to expand, so it should not advertise a control. */
body.wc-mode .nfl-mkt-row:not(:has(.nfl-books)) > summary { cursor: default; }
body.wc-mode .nfl-mkt-row:not(:has(.nfl-books)) > summary::after { content: ''; }

body.wc-mode .nfl-mkt-implied {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right;
  color: rgba(255, 255, 255, 0.78);
}
body.wc-mode .nfl-mkt-implied.is-empty { color: rgba(148, 163, 184, 0.4); }
body.wc-mode .nfl-mkt-spread {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); text-align: right;
  white-space: nowrap;
}

/* Per-book prices, best first. */
body.wc-mode .nfl-books {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px; padding: 0 18px 14px;
}
body.wc-mode .nfl-books-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: 8px; text-decoration: none;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
body.wc-mode a.nfl-books-row:hover {
  background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14);
}
body.wc-mode .nfl-books-row.is-best {
  border-color: rgba(52, 211, 153, 0.30); background: rgba(52, 211, 153, 0.07);
}
body.wc-mode .nfl-books-name {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
body.wc-mode .nfl-books-price {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
body.wc-mode .nfl-books-row.is-best .nfl-books-price { color: #34d399; }
body.wc-mode .wc-match-market-meta {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  body.wc-mode .nfl-mkt-row > summary {
    grid-template-columns: minmax(0, 1fr) 44px auto 16px; gap: 8px; padding: 11px 14px;
  }
  body.wc-mode .nfl-mkt-spread { display: none; }
}

/* The shared .wc-match-markets is a two-column grid, which suited the old
 * three-column price row. The line-shopping row carries five columns and eleven
 * books, so at ~260px per card the market read collided with the team name.
 * NFL markets get the full width; the per-book list is a self-filling grid, so
 * it uses the extra space rather than stretching two prices across it.
 */
body.wc-mode .nfl-panel .wc-match-markets { grid-template-columns: 1fr; }

/* Deep head-to-head era: score and closing line only, so it reads as a
 * different depth rather than the same row with fields missing. */
body.wc-mode .nfl-h2h-deep-head {
  padding: 10px 18px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
body.wc-mode .wc-h2h-meeting.nfl-h2h-deep .wc-h2h-meeting-row { cursor: default; }
body.wc-mode .wc-h2h-meeting.nfl-h2h-deep .wc-h2h-meeting-row:hover { background: none; }
body.wc-mode .nfl-h2h-deep .wc-h2h-ms-team { opacity: 0.85; }
body.wc-mode .nfl-h2h-ot {
  margin-left: 5px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--wc-gold); vertical-align: 2px;
}
body.wc-mode .nfl-h2h-count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text-muted); margin-left: 2px;
}
body.wc-mode .nfl-h2h-deep-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  text-transform: none; letter-spacing: 0.02em;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
  padding: 12px 18px;
}

/* ── Filter bar ─────────────────────────────────────────────────────────
 * The football controls need a row that lets the dropdown menu escape and
 * pushes the meta to the far end. The long explainer paragraphs that used to
 * sit under these bars are gone: the count and the basis fit on one line, and
 * the reasoning lives in a title attribute plus the rows themselves.
 */
/* The filter bar is a SURFACE, not a row of loose controls.
 *
 * Before this the pill groups sat straight on the page background: each group
 * had its own rounded container, so the controls looked finished while the bar
 * they lived in did not exist. Giving it the same tile background, border and
 * radius the rest of the page uses makes it read as one bar, and the padding
 * stops the pills touching the edges.
 */
body.wc-mode .wc-stk-filters {
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  row-gap: 10px;
}
/* A divider before the trailing meta, so the count reads as a summary of the
 * bar rather than another control in it. */
body.wc-mode .wc-stk-filters .wc-stk-meta {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 720px) {
  body.wc-mode .wc-stk-filters { padding: 10px; }
  /* On one column the meta has no bar edge to sit against. */
  body.wc-mode .wc-stk-filters .wc-stk-meta {
    margin-left: 0; padding-left: 0; border-left: 0;
  }
}
body.wc-mode .wc-stk-meta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
/* A pill can carry a count. Muted, so it reads as a quantity and not a label. */
body.wc-mode .nfl-pill-count {
  margin-left: 5px; font-family: var(--font-mono); font-size: 9.5px;
  font-weight: 700; color: rgba(255, 255, 255, 0.42);
}
body.wc-mode .wc-rd-pill.is-active .nfl-pill-count { color: var(--rd-tone); }
/* An open dropdown has to sit above the rows beneath it. */
body.wc-mode .wc-rd-metric-select.is-open { z-index: 30; }
body.wc-mode .wc-stk-filters { position: relative; z-index: 20; }

/* Streak rows: the icon slot holds a crest, and the subject's market chip is a
 * threshold rather than a book's line. */
body.wc-mode .nfl-stk-row .wc-rd-team {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
body.wc-mode a.wc-rd-name { text-decoration: none; color: inherit; }
body.wc-mode a.wc-rd-name:hover { color: var(--rd-tone); }

/* ── Stat pack tables ────────────────────────────────────────────────── */


/* One section = two side-by-side tables, one per team. Each section is its own
 * .wc-sp-grid so the two halves stay aligned row for row. */
body.wc-mode .nfl-pack-grid { margin-bottom: 14px; }
body.wc-mode .nfl-pack-grid .wc-sp-sec-header { gap: 8px; }
body.wc-mode .wc-sp-tbl-name a { color: inherit; text-decoration: none; font-weight: 700; }
body.wc-mode .wc-sp-tbl-name a:hover { color: var(--wc-gold); }

/* The football stat pack is a wide export image, so its seven columns have the
 * full page each. Inside a game tab each team gets ~471px and the table needed
 * 519, so it scrolled: only 48px short, which is padding. Trimmed here rather
 * than by dropping a column, since every one of the seven is load-bearing.
 */
body.wc-mode .nfl-pack-grid .wc-sp-tbl th,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td { padding-left: 6px; padding-right: 6px; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl .wc-sp-chips { gap: 2px; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl .wc-sp-chip { width: 16px; height: 16px; font-size: 10px; }
/* Away left, home right, one row per family, the way the football pack reads.
 *
 * Fitting seven-to-ten columns into ~471px per half took four things, in
 * descending order of how much they bought: folding the games count into the
 * position cell, dropping the numeric font a step, tightening cell padding to
 * 4px, and shrinking the chips to 13px. A first attempt stacked the two teams
 * instead, which fit easily and read worse: the whole point of a stat pack is
 * comparing the two sides on one line.
 */
body.wc-mode .nfl-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.wc-mode .nfl-pack-grid .wc-sp-tbl th,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td { padding-left: 4px; padding-right: 4px; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl { font-size: 11px; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl .wc-sp-tbl-num { font-size: 10.5px; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl th { font-size: 8.5px; letter-spacing: 0.04em; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl-name { max-width: 104px; }
body.wc-mode .nfl-pack-grid .wc-sp-chips { gap: 2px; }
body.wc-mode .nfl-pack-grid .wc-sp-chip { width: 13px; height: 13px; font-size: 8px; }
/* Games, folded in beside the position. */
body.wc-mode .nfl-tbl-gms {
  margin-left: 4px; font-size: 9px; color: rgba(255, 255, 255, 0.34);
}
/* One header row above the family rows, then a divider between families. */
body.wc-mode .nfl-team-head { margin-bottom: 0; }
body.wc-mode .nfl-team-row { margin-bottom: 0; }
body.wc-mode .nfl-team-row + .nfl-team-row .wc-sp-side {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* Below this the halves stack: at a phone width no amount of tightening fits
 * two tables, and a stacked table beats a scrolling one. */
@media (max-width: 860px) {
  body.wc-mode .nfl-pack-grid { grid-template-columns: 1fr; }
  /* The stacked divider is set once, further down with the gutter rules that own
   * this decision. A second border-top here at a different alpha only made which
   * one wins a question of file order. */
}

/* ── Stat pack: team for-and-against tables ─────────────────────────────
 * One block per team, one small table per stat family, two rows each. The
 * better of the two figures per column is marked, with the direction of
 * "better" set per stat, so a defence conceding less than the offence makes is
 * visible without subtraction.
 */
body.wc-mode .nfl-pack-title { margin: 20px 0 10px; }
body.wc-mode .nfl-pack-games {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px;
  font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .nfl-team-sec { padding: 10px 14px 12px; }
body.wc-mode .nfl-team-sec-label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
/* Every family's columns start at the same x and are the same width, so the
 * numbers stack straight down the block.
 *
 * They did not before: each mini-table stretched to 100% and right-aligned, so
 * six-column PASSING put its figures at completely different offsets from
 * three-column RUSHING and the block read as numbers scattered at random. A
 * FIXED column width, left-anchored after the label, means PASSING fills slots
 * one to six and RUSHING fills one to three - same grid, different length.
 */
/* Pinned with min-width AND max-width rather than table-layout: fixed.
 *
 * `fixed` needs the table to have a resolved width to divide up, and inside a
 * grid cell it does not: the columns came out 35, 42 and 48px wide even with an
 * explicit width set. min/max on the cells does not depend on the table's own
 * width.
 *
 * The numeric width itself comes from the shared .nfl-pack-grid rule below,
 * which these tables also match, so every numeric column across every family
 * and both halves of the page is the same 38px. Declaring a second width here
 * would be dead code that reads as the source of truth. */
body.wc-mode .nfl-team-tbl { width: auto; table-layout: auto; }
body.wc-mode .nfl-team-tbl th,
body.wc-mode .nfl-team-tbl td { padding: 5px 0; }
body.wc-mode .nfl-team-tbl th:first-child,
body.wc-mode .nfl-team-tbl td:first-child {
  min-width: 74px; max-width: 74px; text-align: left; padding-right: 6px;
}
body.wc-mode .nfl-team-tbl th:not(:first-child),
body.wc-mode .nfl-team-tbl td:not(:first-child) {
  text-align: right; padding-right: 10px;
}
/* The table no longer fills the block, so the wrap stops stretching it. */
body.wc-mode .nfl-team-sec .wc-sp-tbl-wrap { display: block; }
body.wc-mode .nfl-team-tbl-against td { color: rgba(255, 255, 255, 0.62); }
/* Green marks the better figure. Deliberately the semantic green rather than
 * the brand red, because this is a judgement and not a brand accent. */
body.wc-mode .nfl-team-tbl .wc-sp-tbl-num.is-better { color: #34d399; font-weight: 800; }

/* Player tables now carry a full stat line, so the numeric columns tighten
 * further and the name column stops growing. */
body.wc-mode .nfl-pack-grid .wc-sp-tbl th,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td { padding-left: 5px; padding-right: 5px; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl-name { max-width: 132px; }

/* With the basis line gone from every tile, the cells lose their third row and
 * can tighten up: the number is what the tile is for. */
body.wc-mode .nfl-tile-grid .wc-sp-ts-cell {
  min-height: 0; padding: 12px 8px 13px;
  display: flex; flex-direction: column; gap: 5px; justify-content: center;
}

/* Route from a podium card to the draggable line explorer on the player page.
 * The card's two-marker gradient is a still of the same idea; this is how a
 * reader finds the version they can drag. */
body.wc-mode .nfl-podium-explore {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 2px; padding: 5px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none;
  transition: background 140ms var(--wc-ease-out), color 140ms var(--wc-ease-out),
              border-color 140ms var(--wc-ease-out);
}
body.wc-mode .nfl-podium-explore svg { width: 12px; height: 12px; }
body.wc-mode .nfl-podium-explore:hover {
  background: rgba(255, 255, 255, 0.08); color: #fff;
  border-color: rgba(255, 255, 255, 0.20);
}

/* ── Market: what the market thinks ─────────────────────────────────────
 * The spread and total solved into a scoreline, with de-vigged win
 * probabilities. It is the market's opinion restated, so it gets the page's
 * top slot and the biggest numbers.
 */
/* ── Filters: make the selection obvious, and make them look clickable ───
 *
 * The active pill was a 10% tint of the accent behind white text, which at the
 * 11px size the filter bar shrank them to was almost invisible: "All" and "L10"
 * read the same as their neighbours. Two problems, both fixed here.
 *
 * SELECTED needs to be unmistakable, so it gets a solid accent-tinted fill, a
 * full-strength border and a weight step. UNSELECTED needs to look pressable,
 * so it gets a faint surface of its own rather than sitting transparent, plus a
 * hover that clearly lifts.
 */
body.wc-mode .wc-stk-filters .wc-rd-pill {
  padding: 6px 12px; font-size: 11.5px; min-height: 30px; gap: 6px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
}
body.wc-mode .wc-stk-filters .wc-rd-pill:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
/* The tone comes from an ancestor where one sets it (.wc-stk makes the streaks
 * bar green) and falls back to the brand accent where none does.
 *
 * The fallback belongs at the USE SITE, not as a declaration on .wc-stk-filters:
 * a custom property declared on an element beats the same property inherited
 * from its parent, so declaring a default on the bar would have overridden
 * .wc-stk's green and turned the streaks filters red. The var() fallback form
 * only applies when nothing up the tree has set it, which is the actual
 * requirement.
 *
 * Without any of this the active pill computed to a transparent background
 * behind dark text - invisible, and worse than the subtle state it replaced. */
body.wc-mode .wc-stk-filters .wc-rd-pill.is-active {
  background: var(--rd-tone, var(--wc-gold));
  border-color: var(--rd-tone, var(--wc-gold));
  color: var(--surface-base);
  font-weight: 800;
  box-shadow: 0 2px 10px var(--rd-tone-soft, rgba(255, 39, 64, 0.16));
}
body.wc-mode .wc-stk-filters .wc-rd-pill.is-active .wc-rd-pill-icon,
body.wc-mode .wc-stk-filters .wc-rd-pill.is-active .nfl-pill-count { color: var(--surface-base); }
body.wc-mode .wc-stk-filters .wc-rd-pill.is-active .nfl-pill-count { opacity: 0.6; }
/* The group gets a little more room now the pills are bigger. */
body.wc-mode .wc-stk-filters .wc-rd-pills { padding: 3px; gap: 3px; }
/* The dropdown button has to look like the same family of control. */
body.wc-mode .wc-stk-filters .wc-rd-metric-btn {
  min-height: 36px; padding: 6px 12px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
body.wc-mode .wc-stk-filters .wc-rd-metric-btn:hover {
  background: rgba(255, 255, 255, 0.075); border-color: rgba(255, 255, 255, 0.20);
}
body.wc-mode .wc-stk-filters .wc-rd-metric-select.is-open .wc-rd-metric-btn {
  border-color: var(--rd-tone, var(--wc-gold)); color: #fff;
}

/* ── Tables: align the two halves column for column ──────────────────────
 *
 * Two independent <table> elements sized their columns by their own content, so
 * NE PASSING and SEA PASSING put COMP, ATT and YDS at different offsets and the
 * pair read as two unrelated tables. table-layout: fixed makes every column an
 * equal share of the same width, so the halves line up and a reader can compare
 * straight across.
 *
 * The first two columns are pinned in px because a name and a position code
 * should not get the same width as a three-digit number.
 */
body.wc-mode .nfl-pack-grid .wc-sp-tbl { table-layout: auto; width: 100%; }
/* min/max rather than width, for the same reason as the team tables: a bare
 * width inside a grid cell gave the name column 101px in one half and 85px in
 * the other, so NE PASSING and SEA PASSING put COMP, ATT and YDS at different
 * offsets and the pair read as two unrelated tables. */
body.wc-mode .nfl-pack-grid .wc-sp-tbl th:first-child,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td:first-child {
  min-width: 96px; max-width: 96px;
}
body.wc-mode .nfl-pack-grid .wc-sp-tbl th:nth-child(2),
body.wc-mode .nfl-pack-grid .wc-sp-tbl td:nth-child(2) {
  min-width: 44px; max-width: 44px;
}
/* The chip column is last and needs a floor, or a five-chip strip wraps. */
body.wc-mode .nfl-pack-grid .wc-sp-tbl th:last-child,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td:last-child {
  min-width: 80px; max-width: 80px;
}
/* Everything between is a number and gets one shared width. */
body.wc-mode .nfl-pack-grid .wc-sp-tbl th.is-num,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td.wc-sp-tbl-num {
  min-width: 38px; max-width: 38px;
}
body.wc-mode .nfl-pack-grid .wc-sp-tbl-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Numbers right-align on a consistent edge, which is what makes a column of
 * decimals scannable. */
body.wc-mode .nfl-pack-grid .wc-sp-tbl th.is-num,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td.wc-sp-tbl-num { text-align: right; }
body.wc-mode .nfl-pack-grid .wc-sp-tbl th.is-chip,
body.wc-mode .nfl-pack-grid .wc-sp-tbl td:last-child { text-align: right; }

/* The two pairing blocks side by side, each keeping its own frame. */
body.wc-mode .nfl-pairs-grid { margin-bottom: 14px; }
body.wc-mode .nfl-pairs-grid > .nfl-pair-block { margin-bottom: 0; }
@media (max-width: 1000px) {
  /* Below this the track is too narrow to read, so the blocks stack and get the
   * full width back. */
  body.wc-mode .nfl-pairs-grid { grid-template-columns: 1fr; }
  body.wc-mode .nfl-pairs-grid > .nfl-pair-block + .nfl-pair-block { margin-top: 14px; }
  body.wc-mode .nfl-pair-head,
  body.wc-mode .nfl-pair {
    grid-template-columns: 116px 58px minmax(90px, 1fr) 58px 64px; gap: 12px; padding: 9px 16px;
  }
}

/* ── Market: the comparison flow ────────────────────────────────────────
 * Say what you want, get ranked results. Market, side, stake, then a card per
 * book, best first.
 *
 * COLOUR DISCIPLINE, because the first pass got this wrong. Green had become the
 * button colour, the money colour, the top-row border, the rank colour and the
 * badge colour: five greens on one row, which turns a SEMANTIC colour into a
 * brand accent and leaves the page with three accents competing.
 *
 * On the football site red is the brand and does the brand's work (buttons,
 * active states, section dots), and green means one thing: this figure is good.
 * So here: the CTA is brand red, the top row is tinted brand red, money is
 * plain white, and green is reserved for the best price and nothing else.
 */
body.wc-mode .nfl-read {
  padding: 0; margin-bottom: 14px; border-radius: 14px; overflow: hidden;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
}
body.wc-mode .nfl-read-body { padding: 16px 18px 18px; display: grid; gap: 12px; }
/* The away side takes the blue segment and the home side the brand red, which is
 * the football bar's own pairing. Two segments rather than three: no draws. */
body.wc-mode .nfl-read .wc-mo-12x { margin: 0; }

body.wc-mode .nfl-stake {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
body.wc-mode .nfl-stake:focus-within { border-color: var(--rd-tone, var(--wc-gold)); }
body.wc-mode .nfl-stake-label {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted);
}
body.wc-mode .nfl-stake-cur {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
body.wc-mode .nfl-stake-input {
  width: 58px; padding: 0; border: 0; background: none; outline: none;
  font-family: var(--font-mono); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #fff; -moz-appearance: textfield;
}
body.wc-mode .nfl-stake-input::-webkit-outer-spin-button,
body.wc-mode .nfl-stake-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* One card per book, one shared column template so the list is scannable. */
body.wc-mode .nfl-res { display: grid; gap: 8px; }
body.wc-mode .nfl-res-row {
  display: grid;
  grid-template-columns: 30px minmax(120px, 1.4fr) 66px 74px minmax(126px, 1fr) 62px 92px;
  align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 14px; text-decoration: none;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  transition: border-color 160ms var(--wc-ease-out), background 160ms var(--wc-ease-out);
}
body.wc-mode a.nfl-res-row:hover {
  border-color: var(--wc-gold-line); background: var(--wc-gold-soft);
}
/* The top result is the answer, so it wears the brand accent. */
body.wc-mode .nfl-res-row.is-top {
  background: var(--wc-gold-soft); border-color: var(--wc-gold-line);
}
body.wc-mode .nfl-res-rank {
  font-family: var(--font-mono); font-size: 15px; font-weight: 800;
  color: rgba(255, 255, 255, 0.24); text-align: center;
}
body.wc-mode .nfl-res-row.is-top .nfl-res-rank { color: var(--wc-gold); }
body.wc-mode .nfl-res-book { display: grid; gap: 4px; min-width: 0; }
body.wc-mode .nfl-res-name {
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.wc-mode .nfl-res-badges { display: flex; gap: 5px; flex-wrap: wrap; }
body.wc-mode .nfl-res-badge {
  padding: 2px 7px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06); color: var(--text-muted);
}
/* Brand accent for "this is the one", semantic green ONLY for "this price is
 * the best on the board", amber for the line trade-off. Three badges, three
 * distinct meanings, no overlap. */
body.wc-mode .nfl-res-badge.is-top { background: var(--wc-gold); color: var(--surface-base); }
body.wc-mode .nfl-res-badge.is-price {
  background: rgba(52, 211, 153, 0.14); color: #34d399;
}
body.wc-mode .nfl-res-badge.is-number {
  background: rgba(255, 182, 39, 0.14); color: #ffb627;
}

body.wc-mode .nfl-res-line,
body.wc-mode .nfl-res-odds,
body.wc-mode .nfl-res-ret,
body.wc-mode .nfl-res-hold {
  display: grid; gap: 1px;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; line-height: 1.1;
}
body.wc-mode .nfl-res-line { font-size: 15px; font-weight: 700; color: var(--text-secondary); }
body.wc-mode .nfl-res-odds { font-size: 17px; font-weight: 700; color: #fff; }
/* Money is plain white. It is a figure, not a verdict, and making it green made
 * every row look like a recommendation. */
body.wc-mode .nfl-res-ret { font-size: 18px; font-weight: 800; color: var(--text-primary); }
/* Green appears on exactly one thing: the row holding the best price. */
body.wc-mode .nfl-res-odds.is-best { color: #34d399; }
body.wc-mode .nfl-res-hold { font-size: 12px; color: var(--text-muted); }
body.wc-mode .nfl-res-line-label,
body.wc-mode .nfl-res-odds-label,
body.wc-mode .nfl-res-ret-label,
body.wc-mode .nfl-res-hold-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

body.wc-mode .nfl-res-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-secondary);
  transition: background 160ms var(--wc-ease-out), color 160ms var(--wc-ease-out),
              border-color 160ms var(--wc-ease-out);
}
body.wc-mode .nfl-res-cta svg { width: 12px; height: 12px; }
/* Buttons are brand red, the way they are everywhere else on this site. */
body.wc-mode .nfl-res-row.is-top .nfl-res-cta,
body.wc-mode a.nfl-res-row:hover .nfl-res-cta {
  background: var(--wc-gold); border-color: var(--wc-gold); color: var(--surface-base);
}
body.wc-mode .nfl-res-cta.is-off { opacity: 0.4; }
/* Locked, not broken. The button keeps its shape so the row still reads as a
 * row that will have a bet button in it, and the padlock plus the cursor say
 * why it does not yet. `is-top` and the row hover both paint the CTA brand red
 * further up, and a locked one must not pick that up: it would look live.
 *
 * This is the appearance of the lock, never the lock itself - that is
 * /api/nfl/odds withholding the address (see stripDeepLinks). A CSS lock is a
 * suggestion; an absent url is a lock.
 */
body.wc-mode .nfl-res-cta.is-locked,
body.wc-mode .nfl-res-row.is-top .nfl-res-cta.is-locked {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  border-style: dashed;
  color: rgba(255, 255, 255, 0.38);
  cursor: not-allowed;
}
body.wc-mode .nfl-res-cta.is-locked svg { opacity: 0.7; }

@media (max-width: 900px) {
  body.wc-mode .nfl-res-row {
    grid-template-columns: 26px minmax(0, 1fr) 66px auto;
    gap: 10px 12px; padding: 13px 14px;
  }
  body.wc-mode .nfl-res-odds,
  body.wc-mode .nfl-res-hold { display: none; }
  body.wc-mode .nfl-res-cta { grid-column: 2 / -1; }
}

/* ── Market read: the football Match-outcome components ─────────────────
 * Extracted verbatim from leagues/match.html. Same segmented bar with the
 * labels INSIDE each segment, same legend, same row of outcome cards. */
.wc-mo-12x {
      display: flex; align-items: stretch; height: 66px; margin-top: 6px;
      border-radius: 12px; overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.02);
    }
.wc-mo-seg {
      flex: 1 1 0; min-width: 0; position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      padding: 8px 6px; overflow: hidden;
      transition: flex-grow 0.35s ease;
    }
.wc-mo-seg + .wc-mo-seg { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.35); }
.wc-mo-seg-home { background: linear-gradient(180deg, rgba(255, 39, 64, 0.14), rgba(255, 39, 64, 0.03)); }
.wc-mo-seg-draw { background: rgba(255, 255, 255, 0.04); }
.wc-mo-seg-away { background: linear-gradient(180deg, rgba(88, 166, 255, 0.14), rgba(88, 166, 255, 0.03)); }
.wc-mo-seg.is-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mo-accent, rgba(255,255,255,0.5)); }
.wc-mo-seg-home.is-top { --mo-accent: #ff2740; }
.wc-mo-seg-away.is-top { --mo-accent: #58a6ff; }
.wc-mo-seg.is-top .wc-mo-seg-pct { color: #fff; }
.wc-mo-seg:not(.is-top) .wc-mo-seg-pct { color: rgba(255, 255, 255, 0.82); }
.wc-mo-seg-flag { width: 21px; height: 15px; object-fit: cover; border-radius: 3px; }
.wc-mo-seg-team { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-width: 0; }
.wc-mo-seg-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-mo-seg-pct { font-family: var(--font-mono); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
@media (max-width: 600px) {
  .wc-mo-12x { height: 58px; }
  .wc-mo-seg { padding: 6px 3px; gap: 2px; }
  .wc-mo-seg-pct { font-size: 12.5px; }
  .wc-mo-seg-label { font-size: 8px; letter-spacing: 0.02em; }
  .wc-mo-seg-flag { width: 15px; height: 11px; }
}
.wc-mo-seg.is-narrow .wc-mo-seg-team,
    .wc-mo-seg.is-narrow .wc-mo-seg-pct { display: none; }
.wc-mo-legend {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 5px 18px; margin-top: 8px;
    }
.wc-mo-legend-item {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
      color: var(--text-secondary);
    }
.wc-mo-legend-item .wc-mo-seg-flag { width: 18px; height: 13px; }
.wc-mo-legend-label { text-transform: uppercase; }
.wc-mo-legend-pct { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.wc-mo-legend-home .wc-mo-legend-pct { color: #ff6b7d; }
.wc-mo-legend-away .wc-mo-legend-pct { color: #58a6ff; }
.wc-mo-mid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; align-items: stretch; }
.wc-mo-scoreline {
      flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; justify-content: center;
      padding: 12px 18px; border-radius: 12px;
      background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
    }
.wc-mo-scoreline-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.wc-mo-scoreline-val { font-family: var(--font-mono); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; }
.wc-mo-scoreline-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.wc-mo-goals { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: 8px; align-content: center; }
.wc-mo-goal {
      display: flex; flex-direction: column; gap: 4px; min-width: 84px; flex: 1 1 auto;
      padding: 9px 12px; border-radius: 10px;
      background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06);
    }
.wc-mo-goal-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.wc-mo-goal-pct { font-family: var(--font-mono); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.wc-mo-goal.is-hot { border-color: rgba(255, 39, 64, 0.45); background: rgba(255, 39, 64, 0.07); }
.wc-mo-goal.is-hot .wc-mo-goal-pct { color: #ff2740; }
@media (max-width: 480px) {
  .wc-mo-scoreline { flex: 1 1 100%; }
  .wc-mo-seg-pct { font-size: 16px; }
}

/* A team crest in a pill's icon slot.
 *
 * .wc-rd-pill-icon has no base rule anywhere in the football sheets - it is only
 * ever given a colour - so it is an unstyled span with no width or height. The
 * first version of this set the image to 100%/100% inside it, which resolved
 * against nothing, let the crest take its intrinsic size and blew each pill up
 * to fill the panel. A percentage needs a parent with a size.
 *
 * So the slot gets a real box, which the SVG glyphs want anyway, and the crest is
 * pinned in absolute units.
 */
body.wc-mode .wc-rd-pill-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: 0 0 16px;
}
body.wc-mode .wc-rd-pill-icon svg { width: 14px; height: 14px; display: block; }
body.wc-mode .nfl-pill-logo {
  width: 16px; height: 16px; max-width: 16px; max-height: 16px;
  object-fit: contain; display: block; flex: 0 0 16px;
}

/* Without a line column the row loses a slot; the rest shares the space rather
 * than leaving a gap where the moneyline's phantom "0" used to be. */
body.wc-mode .nfl-res-row.is-noline {
  grid-template-columns: 30px minmax(120px, 1.6fr) 74px minmax(126px, 1fr) 62px 92px;
}
@media (max-width: 900px) {
  body.wc-mode .nfl-res-row.is-noline {
    grid-template-columns: 26px minmax(0, 1fr) auto;
  }
}

/* ── The gutter between the two teams ────────────────────────────────────
 * .wc-sp-grid is gap: 0 with overflow: hidden, which suits the football pack's
 * export where the two halves butt against a hairline. On screen the halves ran
 * straight into each other with no breathing room, so the eye had to work out
 * where one team stopped.
 *
 * A real gutter plus a divider down the middle. The divider is drawn on the
 * right-hand half's left border rather than as a pseudo-element, so it lands
 * exactly on the grid line and disappears by itself when the halves stack.
 */
body.wc-mode .nfl-pack-grid,
body.wc-mode .nfl-pairs-grid { column-gap: 26px; }
body.wc-mode .nfl-pack-grid > .wc-sp-side + .wc-sp-side,
body.wc-mode .nfl-team-row > .wc-sp-side + .wc-sp-side {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  padding-left: 26px;
  margin-left: -26px;   /* the divider sits ON the gap, not beside it */
}
@media (max-width: 860px) {
  /* Stacked: the divider becomes a horizontal rule and the gutter goes away. */
  body.wc-mode .nfl-pack-grid > .wc-sp-side + .wc-sp-side,
  body.wc-mode .nfl-team-row > .wc-sp-side + .wc-sp-side {
    border-left: 0; padding-left: 0; margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
}

/* ── The pairing table: separators and a centre split ────────────────────
 * The rows had a 0.035-alpha bottom border, which is invisible against the
 * panel. Each row is a distinct stat and needs to read as one, and the two
 * halves need a split you can actually see.
 */
body.wc-mode .nfl-pair { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
body.wc-mode .nfl-pair:last-child { border-bottom: 0; }
body.wc-mode .nfl-pair-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
/* A vertical rule between the numbers and the track, so the label-and-figure
 * column reads as one group and the bar as another. */
body.wc-mode .nfl-pair-track::before {
  content: ''; position: absolute; left: -5px; top: -8px; bottom: -8px;
  width: 1px; background: rgba(255, 255, 255, 0.05);
}
/* The two pairing blocks get the same centre divider as the tables. */
body.wc-mode .nfl-pairs-grid > .nfl-pair-block + .nfl-pair-block {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 1000px) {
  body.wc-mode .nfl-pairs-grid > .nfl-pair-block + .nfl-pair-block { border-left: 0; }
}
/* Spacer rows on the shorter half of a section. Same height as a real row so
 * the two halves end level; no borders, so they read as empty space rather than
 * as rows with nothing in them. */
body.wc-mode tr.nfl-tbl-pad td {
  height: 30px; border: 0; padding: 0;
}

/* ── Head to head: meetings that expand in place ─────────────────────────
 * The row used to be an <a> straight to the game page. It is now a button that
 * opens the meeting's own player detail underneath it, which is what the
 * football H2H does; the game page moved to a link inside the panel.
 *
 * The base .wc-h2h-meeting-row grid is three columns (when / score / venue), so
 * the chevron needs a fourth. Declared here rather than edited into the ported
 * block above, because that block is the football component verbatim.
 */
body.wc-mode .wc-h2h-meeting-row { grid-template-columns: 104px minmax(0, 1fr) auto 18px; }
body.wc-mode .nfl-h2h-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: rgba(255, 255, 255, 0.32);
  transition: transform 180ms var(--wc-ease-out), color 180ms var(--wc-ease-out);
}
body.wc-mode .nfl-h2h-chev svg { width: 14px; height: 14px; display: block; }
body.wc-mode .wc-h2h-meeting-row:hover .nfl-h2h-chev { color: rgba(255, 255, 255, 0.7); }
body.wc-mode .wc-h2h-meeting[aria-expanded="true"] .nfl-h2h-chev {
  transform: rotate(180deg);
  color: var(--wc-gold);
}
/* A pre-2024 meeting has no player rows behind it, so it does not pretend to
 * open: no chevron, no pointer, no hover lift (the last two are set above). */
body.wc-mode .wc-h2h-meeting.nfl-h2h-deep .nfl-h2h-chev { display: none; }
body.wc-mode .wc-h2h-meeting.nfl-h2h-deep .wc-h2h-meeting-row {
  grid-template-columns: 104px minmax(0, 1fr) auto 18px;
}
/* Names in the panel are links to the player page. */
body.wc-mode a.wc-h2h-detail-name { color: inherit; text-decoration: none; }
body.wc-mode a.wc-h2h-detail-name:hover { color: var(--wc-gold); }
/* The route to the game page, spanning the panel under the categories. */
body.wc-mode .nfl-h2h-detail-foot {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
}
body.wc-mode .nfl-h2h-detail-link {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wc-gold);
  text-decoration: none;
  padding: 6px 2px;
}
body.wc-mode .nfl-h2h-detail-link:hover { color: #fff; }
@media (max-width: 720px) {
  /* The venue drops at this width (base block), so the chevron takes the third
   * column rather than wrapping to a row of its own. */
  body.wc-mode .wc-h2h-meeting-row,
  body.wc-mode .wc-h2h-meeting.nfl-h2h-deep .wc-h2h-meeting-row {
    grid-template-columns: 84px minmax(0, 1fr) 18px;
  }
}