/* nfl.css - NFL-only additions.
 *
 * Deliberately tiny. The player and hub pages use the existing football
 * components (.wc-pl-stat, .wc-pl-matrix, .wc-pl-hit, .wc-db-shell) and the
 * shared c-* tier palette, so almost nothing new is needed. Anything added here
 * uses existing tokens, never a literal colour.
 */

/* ── Nav clearance ───────────────────────────────────────────────────
 * .nav-inner is a fixed 80px and the nav adds a 1px bottom border, so the
 * fixed nav occupies 81px. The shared .wc-db-main pads 72px, which leaves
 * the top edge of the first card sitting behind it. Scoped to nfl-mode so
 * the football pages keep their existing spacing.
 */
body.wc-mode.nfl-mode .wc-db-main { padding-top: 96px; }
@media (max-width: 900px) {
  body.wc-mode.nfl-mode .wc-db-main { padding-top: 24px; }
}
/* The hero is the first thing under the nav, so give it room to breathe
 * rather than butting straight up against the section that follows. */
body.wc-mode.nfl-mode .wc-hero { margin-bottom: clamp(18px, 2.5vw, 28px); }
body.wc-mode.nfl-mode .wc-hero h1 { text-wrap: balance; margin: 10px 0 8px; }

/* The market line sits beside a hit-rate label, so it needs to read as a
 * quantity without competing with it. Mono only for the number itself. */
body.wc-mode .nfl-line {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
/* Best price + book. Right-aligned in the hit row's value column area. */
body.wc-mode .nfl-price {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
body.wc-mode .nfl-price b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
/* The projection-feed disagreement is the line-shopping signal, so it gets a
 * quiet blue rather than being buried. */
body.wc-mode .nfl-gap {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-blue);
  white-space: nowrap;
}
/* Hit row extended to carry the market line and the price alongside the bar.
 * Widens the base .wc-pl-hit grid rather than replacing it. */
body.wc-mode .wc-pl-hit.nfl-hit {
  grid-template-columns: 22px minmax(150px, 200px) 1fr 56px minmax(120px, auto);
}
@media (max-width: 900px) {
  body.wc-mode .wc-pl-hit.nfl-hit {
    grid-template-columns: 20px 1fr 1.1fr 44px;
  }
  body.wc-mode .wc-pl-hit.nfl-hit .nfl-price { display: none; }
}
/* Sidebar roster entry, matching the football sidebar link rhythm. */
body.wc-mode .nfl-mate {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 5px 0; text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
body.wc-mode .nfl-mate:last-child { border-bottom: 0; }
body.wc-mode .nfl-mate-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
body.wc-mode .nfl-mate:hover .nfl-mate-name { color: var(--wc-gold); }
body.wc-mode .nfl-mate-pos {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

/* Position badge beside a player name in the boards. Mono is right here: it is
 * a two-letter code, not a label. */
body.wc-mode .nfl-pos {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-left: 4px;
}
/* Tinted cells inside a .wc-squad-table need to sit as tiles, not fill the
 * cell, so the table keeps its row rhythm. */
body.wc-mode.nfl-mode .wc-squad-table td .wc-pl-matrix-cell {
  display: inline-flex; min-width: 52px; height: 26px; margin: 0;
}
body.wc-mode.nfl-mode .wc-db-main .wc-hero + .wc-home-section { margin-top: 0; }

/* Team record and score beside a name on a game card. Mono for the digits
 * only; the name itself stays body font. */
body.wc-mode .nfl-rec {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
/* Score sits at the end of the team row. margin-left:auto rather than float,
 * because .wc-today-card-team is a flex row and a float would escape it. */
body.wc-mode .nfl-score {
  font-family: var(--font-mono); font-size: 14px; font-weight: 800;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
  margin-left: auto;
}
body.wc-mode .nfl-rec { margin-left: auto; }
body.wc-mode .nfl-rec + .nfl-score { margin-left: 8px; }

/* Team abbreviation chip, standing in for the club badge the football cards
 * use. Mono is right: it is a code, not a label. */
body.wc-mode .nfl-abbr {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-muted);
  min-width: 34px; padding: 2px 5px; border-radius: 4px;
  background: rgba(255,255,255,0.05); text-align: center; flex: none;
}
/* Market rows in the card's right column. */
body.wc-mode .nfl-mkt-line-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4px 0; font-size: 12px; color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
body.wc-mode .nfl-mkt-line-row:last-child { border-bottom: 0; }
body.wc-mode .nfl-mkt-line-val {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}

/* Badge + name in a table cell (team board) and in the hero eyebrow. */
body.wc-mode .nfl-team-cell {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
body.wc-mode .wc-eyebrow .wc-fix-team-flag {
  width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px;
}

/* ── Game page: prop blocks grouped by player ─────────────────────────
 * Grouping a 600-rung board by player is what makes it readable; a flat
 * list of every market is the wall we are trying to avoid.
 */
body.wc-mode .nfl-panel { margin-top: clamp(14px, 2vw, 22px); }
body.wc-mode .nfl-prop-block {
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: rgba(255,255,255,0.02); padding: 12px 14px 14px; margin-bottom: 10px;
}
body.wc-mode .nfl-prop-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
body.wc-mode .nfl-prop-name {
  font-size: 14px; font-weight: 700; color: var(--text-primary); text-decoration: none;
}
body.wc-mode .nfl-prop-name:hover { color: var(--wc-gold); }
body.wc-mode .nfl-prop-count {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
/* Book name beside a price in a market row. */
body.wc-mode .nfl-book {
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--text-muted);
}
/* Team badge in the match header lockup. */
body.wc-mode .wc-match-side-flag .wc-match-flag { width: 100%; height: 100%; object-fit: contain; }

/* Two-way price pair on a game prop row. Over and under side by side is the
 * shape a bettor reads, and it makes a one-sided market visibly one-sided. */
body.wc-mode .nfl-two-way { display: flex; gap: 6px; align-items: center; min-width: 0; }
body.wc-mode .nfl-side {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
}
body.wc-mode .nfl-side b {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-primary); font-weight: 700; margin-left: 2px;
}
body.wc-mode .nfl-side.is-empty { color: var(--text-muted); background: none; border-style: dashed; }
/* Game prop rows carry a price pair rather than a bar, so the grid differs
 * from the player page's. */
body.wc-mode .nfl-prop-block .wc-pl-hit.nfl-hit {
  grid-template-columns: 22px minmax(140px, 1fr) auto 68px minmax(70px, auto);
}
@media (max-width: 900px) {
  body.wc-mode .nfl-prop-block .wc-pl-hit.nfl-hit {
    grid-template-columns: 0 minmax(0,1fr) auto;
  }
  body.wc-mode .nfl-prop-block .wc-pl-hit-value,
  body.wc-mode .nfl-prop-block .nfl-price { display: none; }
}

/* ── Team page ────────────────────────────────────────────────────────── */
/* Rank chip in the leaders grid's 28px icon column. */
body.wc-mode .nfl-rank {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
/* W/L/T chip in a result row. Sized down from the matrix cell default so it
 * sits inside the score line rather than dominating it. */
body.wc-mode .wc-pl-matrix-cell.nfl-result {
  display: inline-flex; width: 20px; min-width: 20px; height: 20px;
  font-size: 10px; margin-right: 2px;
}

/* ── Props board rows ─────────────────────────────────────────────────
 * Two lines in the label column (player, then market + lines) so a long
 * board stays scannable at a glance without a horizontal scroll.
 */
body.wc-mode .wc-pl-hit.nfl-prop-row {
  grid-template-columns: 26px minmax(180px, 1fr) auto 62px minmax(96px, auto);
}
body.wc-mode .nfl-prop-row .wc-pl-hit-label { display: grid; gap: 1px; min-width: 0; }
body.wc-mode .nfl-prop-link {
  font-size: 13px; font-weight: 700; color: var(--text-primary); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.wc-mode .nfl-prop-link:hover { color: var(--wc-gold); }
body.wc-mode .nfl-prop-sub {
  font-size: 11.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.wc-mode .nfl-prop-game {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
}
body.wc-mode .nfl-prop-game:hover { color: var(--wc-gold); }
/* The gap is the headline number on this board, so it is sized up. */
body.wc-mode .nfl-prop-row .wc-pl-hit-value { font-size: 15px; }
/* The team badge sits in the icon column. The base .wc-pl-hit-icon dims itself
 * to 0.85 because it was built for a monochrome glyph that inherits the tier
 * colour; a team logo is full-colour artwork and reads as washed out at that
 * opacity, so it is restored to 1 here. */
body.wc-mode .nfl-prop-row .wc-pl-hit-icon { width: 24px; height: 24px; opacity: 1; }
body.wc-mode .nfl-prop-row .wc-pl-hit-icon .wc-fix-team-flag {
  width: 24px; height: 24px; background: none; border: 0;
}

/* ── Prose note ───────────────────────────────────────────────────────
 * Every explanatory paragraph on an NFL page uses this. The shared
 * .wc-section-meta and .wc-rd-meta are both uppercase mono, which is right for
 * a three-word tag and wrong for a sentence: at paragraph length mono reads
 * cheap, and mono is reserved for numbers.
 */
body.wc-mode .nfl-note {
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  line-height: 1.55; color: var(--text-muted); letter-spacing: 0;
  text-transform: none; max-width: 74ch; margin: 0 0 14px;
}
body.wc-mode .nfl-note:empty { display: none; margin: 0; }
@media (max-width: 900px) {
  body.wc-mode .wc-pl-hit.nfl-prop-row {
    grid-template-columns: 22px minmax(0, 1fr) auto 48px;
  }
  body.wc-mode .nfl-prop-row .nfl-price { display: none; }
}
/* On the props board the gap already owns the coloured value column, so the
 * pick'em figure inside the sub-line does not also need the accent blue: two
 * treatments of one number reads as noise. Muted here only, since on the player
 * and game pages the blue is the single callout and earns its place.
 */
body.wc-mode .nfl-prop-row .nfl-gap { color: var(--text-muted); }
body.wc-mode .nfl-prop-row .nfl-gap::before {
  content: '·'; margin-right: 5px; opacity: 0.5;
}

/* ── Adjustable hit-rate rows ───────────────────────────────────────────
 * The line is a control, not a label. Stepping it regrades the row against the
 * game log in memory, so the rate, the bar and the run of results all move
 * together, and the steps are the rungs the books actually offer.
 */
/* No price column: this section is about the RECORD, and a price on every row
 * made it read as a bet slip. Prices live on the props board and the game page,
 * which is where you act on one. */
body.wc-mode .wc-pl-hit.nfl-hit-adj {
  grid-template-columns: 22px minmax(230px, 1fr) auto 74px;
  gap: 14px;
}
body.wc-mode .nfl-hit-adj .wc-pl-hit-label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0;
}
body.wc-mode .nfl-step {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px; padding: 1px;
}
body.wc-mode .nfl-step-btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 6px; padding: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--text-secondary);
  transition: background 120ms var(--wc-ease-out), color 120ms var(--wc-ease-out);
}
body.wc-mode .nfl-step-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.10); color: #fff;
}
body.wc-mode .nfl-step-btn:disabled { opacity: 0.25; cursor: default; }
body.wc-mode .nfl-step .nfl-line { min-width: 44px; text-align: center; }
/* A moved line is marked, so a screenshot can never be mistaken for the book's
 * own number. */
body.wc-mode .nfl-line.is-moved { color: var(--wc-gold); }
body.wc-mode .nfl-step-reset {
  appearance: none; cursor: pointer;
  background: rgba(255, 39, 64, 0.08); border: 1px solid rgba(255, 39, 64, 0.22);
  border-radius: 6px; padding: 2px 7px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--wc-gold);
}
body.wc-mode .nfl-step-reset:hover { background: rgba(255, 39, 64, 0.16); }

/* The run of results at the line in force. Replaces the plain progress bar:
 * a bar says 67%, this says which games and by how much. */
body.wc-mode .nfl-run {
  display: flex; gap: 3px; align-items: center; justify-content: flex-end;
  flex-wrap: nowrap;
}
body.wc-mode .nfl-run .wc-sp-chip {
  width: auto; min-width: 24px; padding: 0 4px; height: 20px;
  font-variant-numeric: tabular-nums;
}
body.wc-mode .nfl-hit-adj .wc-pl-hit-value {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0; line-height: 1.15;
}
body.wc-mode .nfl-hit-den {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-muted);
}
body.wc-mode .nfl-hit-price {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--text-secondary);
}
body.wc-mode .nfl-hit-price.is-empty { color: rgba(148, 163, 184, 0.35); }
@media (max-width: 900px) {
  body.wc-mode .wc-pl-hit.nfl-hit-adj {
    grid-template-columns: 20px minmax(0, 1fr) 60px; gap: 8px;
  }
  /* The run strip is the first thing to go; the rate and the line carry the row. */
  body.wc-mode .nfl-hit-adj .nfl-run { display: none; }
}

/* The hero photo rail holds a team logo. */
body.wc-mode #hero-rail .wc-player-photo-v2 { object-fit: contain; padding: 12%; }
body.wc-mode .nfl-hero-rail-fallback {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  color: rgba(255, 255, 255, 0.25);
}

/* The football page carries these two as unstyled structural hooks; the roster
 * links style against them. Kept so the markup matches leagues/player.html
 * exactly, and given the one thing a ninety-man list needs that a thirty-seven
 * man squad does not: room to scroll past the last group.
 *
 * .wc-db-sidebar is already sticky with its own overflow, so this only pads.
 */
body.wc-mode .wc-player-sidebar { padding-bottom: 0; }
body.wc-mode .wc-player-sidebar-roster { padding-bottom: 28px; }

/* The Last-10 matrix is table-layout: fixed, so the label column competes with
 * the ten game columns for the same width. Without a floor it settles at ~88px,
 * which is not enough for a stat name and pushes the text into the first cell.
 * 118px fits the shortened labels and still leaves ~82px per game column at
 * 943px, which is comfortable for a three-digit yardage.
 */
body.wc-mode .nfl-panel .wc-pl-matrix .wc-pl-matrix-rl,
body.wc-mode .wc-pl-matrix .wc-pl-matrix-rl { width: 118px; }
@media (max-width: 900px) {
  /* Below this the wrap scrolls horizontally, so the label can shrink back. */
  body.wc-mode .wc-pl-matrix .wc-pl-matrix-rl { width: 84px; }
}

/* ── Line explorer ──────────────────────────────────────────────────────
 * The prototype's slider. A continuous range over the values the player has
 * actually recorded, an over/under toggle, four cards, and one bar per game
 * coloured by the verdict at whatever line is set.
 *
 * Colours stay on the shared semantic palette: green cleared, red did not.
 * The brand red is not used here, because a red bar has to mean "missed".
 */
/* `display: grid` below is (0,2,1) and the UA's `[hidden] { display: none }` is
   (0,1,0), so renderExplorer()'s `host.hidden = true` had no visual effect and
   an inert slider rendered for every unpriced player. Same trap as the drawer
   toggle. This selector is (0,3,1) and restores the attribute's meaning. */
body.wc-mode .nfl-explorer[hidden] { display: none; }
body.wc-mode .nfl-explorer {
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 14px;
  padding: 18px 20px 14px;
  margin-bottom: 16px;
  display: grid; gap: 14px;
}
body.wc-mode .nfl-exp-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
body.wc-mode .nfl-exp-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
body.wc-mode .nfl-exp-value {
  margin-left: auto;
  font-family: var(--font-mono); font-size: clamp(22px, 3vw, 30px); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff;
}

/* The track. Styled on both engines' pseudo-elements, since a range input has
 * no shared shadow DOM. */
body.wc-mode .nfl-exp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; margin: 0;
  border-radius: 999px; background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
body.wc-mode .nfl-exp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--wc-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); cursor: grab;
}
body.wc-mode .nfl-exp-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--wc-gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); cursor: grab;
}
body.wc-mode .nfl-exp-range:focus-visible { outline: 2px solid var(--wc-gold); outline-offset: 3px; }

/* The book's own line, marked on the track so a moved handle reads as a
 * hypothetical rather than a bet you can place. */
body.wc-mode .nfl-exp-ticks { position: relative; height: 14px; margin-top: -8px; }
body.wc-mode .nfl-exp-book {
  position: absolute; top: 0; width: 1px; height: 7px;
  background: rgba(255, 255, 255, 0.35); transform: translateX(-50%);
}
body.wc-mode .nfl-exp-book-label {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42); white-space: nowrap;
}

/* Four cards. */
body.wc-mode .nfl-exp-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
@media (max-width: 640px) {
  body.wc-mode .nfl-exp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.wc-mode .nfl-exp-card {
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .nfl-exp-card-value {
  font-family: var(--font-mono); font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1; color: #fff;
}
body.wc-mode .nfl-exp-card-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-exp-card.is-good { border-color: rgba(52, 211, 153, 0.24); }
body.wc-mode .nfl-exp-card.is-good .nfl-exp-card-value { color: #34d399; }
body.wc-mode .nfl-exp-card.is-mid .nfl-exp-card-value { color: #ffb627; }
body.wc-mode .nfl-exp-card.is-poor .nfl-exp-card-value { color: #ff3d57; }

/* One bar per game, oldest left. */
body.wc-mode .nfl-exp-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 108px; padding: 0 2px;
}
body.wc-mode .nfl-exp-bar {
  flex: 1 1 0; min-width: 4px; border-radius: 3px 3px 1px 1px;
  transition: height 120ms var(--wc-ease-out), background 120ms var(--wc-ease-out);
}
body.wc-mode .nfl-exp-bar.is-hit { background: #34d399; }
body.wc-mode .nfl-exp-bar.is-miss { background: rgba(255, 255, 255, 0.16); }
body.wc-mode .nfl-exp-bar.is-push { background: #ffb627; }
body.wc-mode .nfl-exp-bar.is-absent {
  background: rgba(255, 255, 255, 0.05); min-height: 3px;
}
body.wc-mode .nfl-exp-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
/* The over/under toggle is a .wc-rd-pills group; this only reserves its slot in
 * the head row so the big value stays flush right. */
body.wc-mode .nfl-exp-side { display: inline-flex; }

/* The league label is hidden on NFL pages: everything under /nfl is the NFL.
 * .wc-player-hero-league sets its own display, which beats the bare [hidden]
 * UA rule, so hiding it needs saying explicitly. */
body.wc-mode .wc-player-hero-league[hidden] { display: none !important; }

/* ── Page ground ────────────────────────────────────────────────────────
 * Nothing here any more, deliberately.
 *
 * This block used to fork the NFL surface off the shared one: it set the body
 * to #0b0d12, switched off the football body wash, and restated
 * --surface-default / --surface-elevated / --surface-sunken with their blue
 * cast pulled back - all scoped to body.nfl-mode so football kept the cool
 * ramp. That fork is exactly why the two sports did not match.
 *
 * The de-blued values are now the shared ones in design-system.css and the
 * wash is gone from wc-site.css, so NFL gets this treatment by inheriting the
 * defaults and football gets it too.
 *
 * The block also carried `body.nfl-mode .wc-stk-tip { background: #101319 }`
 * to de-blue the streaks tooltip. There is no .wc-stk-tip in any markup or
 * sheet in the repo - the class is .wc-pl-stat-tip - so that rule never
 * matched and the tooltip stayed #0c1322 (a cast of twenty-two) on NFL as
 * well as football. It is fixed at source in wc-streaks.css now. */

/* ── Ghost/shimmer loading ───────────────────────────────────────────────
 * The football hub's own treatment (.hm-sk + hmshim), lifted so both sports
 * load the same way. A "Loading…" line says something is happening and nothing
 * about what; a skeleton in the shape of the content says what is coming and
 * how much, and the page does not jump when the real thing lands because the
 * placeholder already held the space.
 */
.hm-sk {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px; display: inline-block; vertical-align: middle;
}
.hm-sk::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: hmshim 1.7s infinite;
}
@keyframes hmshim { 100% { transform: translateX(100%); } }
.hm-sk-c { border-radius: 50%; }
/* Skeletons are inert: no hover, no pointer, no link affordance. */
.hm-skcard, .hm-skrow, .hm-skchip { pointer-events: none; }
body.wc-mode .hm-skrow:hover, body.wc-mode .hm-skcard:hover { background: inherit; }
/* A skeleton row inside a table still needs its cell padding to hold the height. */
/* Respect a reader who has asked for less motion: keep the ghost, drop the
 * sweep. The shape is the useful part; the shimmer is decoration. */
@media (prefers-reduced-motion: reduce) {
  .hm-sk::after { animation: none; }
}

/* ── Not found ────────────────────────────────────────────────────────────
   The state a detail page lands in when its id is missing, malformed, or
   names something the database has never held. It replaces the page rather
   than sitting under it: NFLSkel.fail() empties every skeleton and hides the
   sections first, so there is no shimmer running beneath a message saying the
   thing does not exist.

   Deliberately quiet. This is a stale link, not an outage, and a red alarm
   panel for "that team moved" reads as though the site is broken. Tokens are
   the hub's own, so it inherits any theme change for free. */
.nfl-fail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 46ch;
  padding: 30px 0 8px;
  /* Centred in the width the hidden rail gave back. Left-aligning it instead
     put the title 13px to the LEFT of the nav brand, because a normal page's
     body column starts after the 260px rail while this one starts at the
     viewport edge, and a heading that misses the site's content edge by a
     hair reads as a bug rather than as a layout. The copy inside stays
     left-aligned; only the block is centred. */
  margin-inline: auto;
}
/* Enough height that the panel is not a lone line under the nav on a tall
   desktop window, without pushing it off a short one. */
body.wc-mode .wc-db-shell.nfl-fail-shell .nfl-fail { margin-block: clamp(8px, 6vh, 72px); }
.nfl-fail-title {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.nfl-fail-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.nfl-fail-links { display: flex; flex-wrap: wrap; gap: 10px; }
.nfl-fail-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid var(--wc-streak-tile-border, var(--border-subtle));
  border-radius: 999px;
  background: var(--wc-streak-tile-bg, transparent);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.18s var(--wc-ease-out), color 0.18s var(--wc-ease-out);
}
.nfl-fail-link:hover,
.nfl-fail-link:focus-visible {
  border-color: var(--wc-gold-line, var(--wc-gold));
  color: var(--wc-gold);
}
/* The first pill is the primary way out, so it carries the accent outright. */
.nfl-fail-link:first-child {
  border-color: var(--wc-gold-line, var(--wc-gold));
  background: var(--wc-gold-soft, transparent);
}
/* With the rail hidden the shell must stop being a two-column grid, or the
   panel sits in the 260px rail column with the rest of the row empty.

   Selector matches main's own specificity deliberately: the grid is declared
   as `body.wc-mode .wc-db-shell` in wc-streaks.css (0,2,1), so a plain
   `.wc-db-shell.nfl-fail-shell` (0,2,0) loses and the panel renders 183px
   wide. That file belongs to the football side and is not mine to edit, so the
   override is scoped here and carries the same body qualifier. */
body.wc-mode .wc-db-shell.nfl-fail-shell {
  display: block;
  grid-template-columns: 1fr;
}

/* Not-found mode: no rail, and no button offering to open it.
   Specificity is deliberate. wc-streaks.css gives the float toggle
   `display: inline-flex` at (0,3,1), which beats the UA's
   `[hidden] { display: none }`, so setting the attribute in JS left the
   button on screen. These selectors are (0,4,1) and (0,3,1) and sit outside
   any media query, so they hold at every width. */
body.wc-mode.nfl-fail-mode .wc-drawer-toggle.wc-drawer-toggle--float,
body.wc-mode.nfl-fail-mode .wc-drawer-toggle,
body.wc-mode.nfl-fail-mode .wc-db-sidebar { display: none; }