/* nfl-team.css - squad-page hero sub-classes extracted from
 * leagues/squad.html's inline <style> (12,478 chars). Same trap as the hub and
 * match pages: .wc-squad-hero is shared but its -row/-body/-meta children are
 * inline. Copied, not moved.
 */

.wc-squad-hero-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: clamp(14px, 2vw, 22px);
      align-items: center;
    }
@media (max-width: 720px) {
      .wc-squad-hero-row { grid-template-columns: 1fr; }
      .wc-squad-hero-row .wc-squad-hero-meta { justify-self: start; }
    }
.wc-squad-hero-body { display: grid; gap: 2px; min-width: 0; }
/* Old .wc-squad-hero-badge style kept as a no-op for any legacy
     * caller - current markup uses .wc-squad-hero-flag-inline. */
    .wc-squad-hero-badge { display: none; }
/* ── Sidebar: clubs grouped by league (collapsible) ───────────── */
    .wc-club-sidebar-league { padding: 6px 0 4px; }
.wc-club-sidebar-league > summary.wc-club-sidebar-summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none;
    }
.wc-club-sidebar-league > summary.wc-club-sidebar-summary::-webkit-details-marker { display: none; }
.wc-club-sidebar-league > summary.wc-club-sidebar-summary::after {
      content: '▾';
      margin-left: auto;
      color: var(--text-muted);
      font-size: 10px;
      transition: transform 140ms var(--wc-ease-out);
    }
.wc-club-sidebar-league:not([open]) > summary.wc-club-sidebar-summary::after {
      transform: rotate(-90deg);
    }
.wc-club-sidebar-season {
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--wc-gold);
    }
.wc-club-sidebar-group-title {
      margin: 8px 12px 2px;
      font-family: var(--font-mono);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

/* The LIVE hero badge. .wc-squad-hero-badge above is deliberately
 * display:none (a deprecated no-op), so using it renders a zero-size box,
 * and a lazy image inside a zero-size box never loads at all.
 * .wc-squad-hero-flag-inline is a styled <img>, not a container.
 */
.wc-squad-hero-flag-inline {
      width: clamp(36px, 4.5vw, 52px);
      height: clamp(36px, 4.5vw, 52px);
      object-fit: contain;
      background: var(--wc-streak-tile-bg);
      border: 1px solid var(--wc-streak-tile-border);
      border-radius: 10px;
      padding: 6px;
      flex-shrink: 0;
    }
/* Old .wc-squad-hero-badge style kept as a no-op for any legacy
     * caller - current markup uses .wc-squad-hero-flag-inline. */
    .wc-squad-hero-badge { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * The team page, rebuilt on the football club page's grammar
 * (leagues/squad.html): an identity card in the rail, a roster you can
 * actually read, a filter row over the squad, and a for/against block that is
 * a comparison rather than a spreadsheet.
 *
 * Most of what follows is a PORT, not a reference: .wc-roster-row and its
 * children, .wc-photo-initials and .wc-roster-head exist only inside
 * leagues/squad.html's inline <style>. Copied here so the NFL page does not
 * silently render unstyled markup.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rail: the roster, grouped by position ───────────────────────────────
 * Reuses the football PLAYER page's roster rail (.wc-player-sidebar-*, which
 * IS in wc-streaks.css) so a team page and a player page have the same rail. */
body.wc-mode .nfl-tm-rail-crest { width: 16px; height: 16px; object-fit: contain; flex: none; }
body.wc-mode .nfl-tm-rail-num {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  color: var(--text-muted); min-width: 18px; text-align: right; flex: none;
}

/* ── Squad: the roster rows (ported from leagues/squad.html) ─────────────── */
body.wc-mode .wc-roster-row {
  display: grid;
  /* jersey · initials · name over the physical line · appearances. Four
   * columns rather than three: the first version folded the initials into the
   * height/weight line under the name, which read as a stray avatar. */
  grid-template-columns: 34px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 8px clamp(8px, 1.6vw, 16px);
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: background 140ms var(--wc-ease-out);
}
body.wc-mode .wc-roster-row:last-child { border-bottom: 0; }
body.wc-mode a.wc-roster-row:hover { background: rgba(255, 255, 255, 0.03); }
body.wc-mode a.wc-roster-row:hover .wc-roster-name { color: var(--wc-gold); }
/* Player photos are compliance-gated off, so the slot carries initials. The
 * football page does the same; a row of empty circles would be worse. */
body.wc-mode .wc-roster-id { display: grid; gap: 2px; min-width: 0; }
body.wc-mode .wc-photo-initials {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--wc-gold-soft);
  color: var(--wc-gold);
  border: 1px solid var(--wc-gold-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
body.wc-mode .wc-roster-photo {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
body.wc-mode .wc-roster-name {
  font-family: var(--font-body);
  font-size: 14.5px; font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  transition: color 140ms var(--wc-ease-out);
}
body.wc-mode .wc-roster-pos-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* One tint per side of the ball, so a 114-name list is scannable by role. */
body.wc-mode .wc-roster-pos-chip.is-off {
  background: var(--wc-gold-soft); color: var(--wc-gold); border-color: var(--wc-gold-line);
}
body.wc-mode .wc-roster-pos-chip.is-def {
  background: var(--wc-streak-blue-soft); color: var(--wc-streak-blue);
  border-color: var(--wc-streak-blue-line);
}
body.wc-mode .wc-roster-pos-chip.is-st {
  background: rgba(52, 211, 153, 0.10); color: #34d399; border-color: rgba(52, 211, 153, 0.28);
}
body.wc-mode .wc-roster-club {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.wc-mode .wc-roster-meta {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-muted);
  display: flex; flex-direction: column; gap: 2px;
  white-space: nowrap;
}
body.wc-mode .wc-roster-meta strong {
  color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums;
}
body.wc-mode .nfl-roster-jersey {
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700;
  color: rgba(255, 255, 255, 0.30);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
body.wc-mode .wc-roster-head {
  display: flex; justify-content: flex-end;
  padding: 9px clamp(8px, 1.6vw, 16px);
  border-bottom: 1px solid var(--border-subtle);
}
body.wc-mode .wc-roster-head-metric {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 560px) {
  /* The initials go first on a phone: the name needs the width more than the
   * avatar does. */
  body.wc-mode .wc-roster-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
  body.wc-mode .wc-roster-row .wc-photo-initials,
  body.wc-mode .wc-roster-row .wc-roster-photo { display: none; }
}

/* ── For and against: a comparison, not a spreadsheet ────────────────────
 * The old version was every paired key in nfl_games.derived, sorted
 * alphabetically, as four numeric columns. That put "First team to score TDs is
 * special teams - 0.0 0.0 0.0" between first downs and fumbles, and left the
 * reader doing thirty subtractions by eye. This is the endpoint's own
 * TWO_WAY_STATS list, grouped by family, with the two figures drawn against
 * each other on one axis so the gap is the thing you see.
 */
body.wc-mode .nfl-fa { display: grid; gap: 18px; }
body.wc-mode .nfl-fa-group {
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  border-radius: 14px;
  overflow: hidden;
}
body.wc-mode .nfl-fa-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary);
}
body.wc-mode .nfl-fa-group-head::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--wc-gold); flex: none;
}
body.wc-mode .nfl-fa-legend {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 9px; letter-spacing: 0.08em; color: var(--text-muted);
}
body.wc-mode .nfl-fa-key { display: inline-flex; align-items: center; gap: 5px; }
body.wc-mode .nfl-fa-key::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px;
}
body.wc-mode .nfl-fa-key.is-for::before { background: var(--wc-gold); }
body.wc-mode .nfl-fa-key.is-against::before { background: var(--wc-streak-blue); }
body.wc-mode .nfl-fa-row {
  display: grid;
  grid-template-columns: minmax(120px, 168px) 56px minmax(120px, 1fr) 56px 64px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
body.wc-mode .nfl-fa-row + .nfl-fa-row { border-top: 1px solid rgba(255, 255, 255, 0.045); }
body.wc-mode .nfl-fa-label {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.wc-mode .nfl-fa-num {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.wc-mode .nfl-fa-num.is-for { color: var(--text-primary); text-align: right; }
body.wc-mode .nfl-fa-num.is-against { color: var(--text-secondary); }
/* The axis. Both bars are drawn from the centre outward against a shared
 * scale, so a row where the team gives up more than it makes visibly leans
 * the other way. Two abutting halves rather than one bar with a tick: the
 * comparison IS the row. */
body.wc-mode .nfl-fa-track {
  position: relative; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
body.wc-mode .nfl-fa-fill {
  position: absolute; top: 0; bottom: 0;
  border-radius: 999px;
}
body.wc-mode .nfl-fa-fill.is-for {
  right: 50%; background: linear-gradient(90deg, rgba(255, 39, 64, 0.45), var(--wc-gold));
}
body.wc-mode .nfl-fa-fill.is-against {
  left: 50%; background: linear-gradient(90deg, var(--wc-streak-blue), rgba(2, 87, 255, 0.45));
}
body.wc-mode .nfl-fa-mid {
  position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: rgba(255, 255, 255, 0.22);
}
body.wc-mode .nfl-fa-diff {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em; text-align: right;
  font-variant-numeric: tabular-nums;
}
body.wc-mode .nfl-fa-diff.is-good { color: #34d399; }
body.wc-mode .nfl-fa-diff.is-bad { color: #ff3d57; }
body.wc-mode .nfl-fa-diff.is-flat { color: var(--text-muted); }
@media (max-width: 860px) {
  body.wc-mode .nfl-fa-row {
    grid-template-columns: minmax(0, 1fr) 48px 48px 56px;
    gap: 8px 10px;
  }
  /* The axis is the first thing to go: the two figures and the gap survive. */
  body.wc-mode .nfl-fa-track { display: none; }
}

/* ── Schedule / results: a grid, not a column ────────────────────────────
 * Seventeen games as one narrow list used a third of the width and ran three
 * screens. Three columns of compact rows fit a season on one. */
body.wc-mode .nfl-sched {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 8px;
}
body.wc-mode .nfl-sched-row {
  display: grid;
  grid-template-columns: 34px 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--wc-streak-tile-bg);
  border: 1px solid var(--wc-streak-tile-border);
  transition: border-color 140ms var(--wc-ease-out), background 140ms var(--wc-ease-out);
}
body.wc-mode a.nfl-sched-row:hover {
  border-color: var(--wc-gold-line); background: var(--wc-gold-soft);
}
body.wc-mode .nfl-sched-wk {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
body.wc-mode .nfl-sched-crest { width: 22px; height: 22px; object-fit: contain; }
body.wc-mode .nfl-sched-opp {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
body.wc-mode .nfl-sched-opp-name {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.wc-mode .nfl-sched-when {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--text-muted); white-space: nowrap;
}
body.wc-mode .nfl-sched-out {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
body.wc-mode .nfl-sched-res {
  width: 19px; height: 19px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex: none;
}
body.wc-mode .nfl-sched-res.is-w { background: rgba(52, 211, 153, 0.14); color: #34d399; }
body.wc-mode .nfl-sched-res.is-l { background: rgba(255, 61, 87, 0.14); color: #ff3d57; }
body.wc-mode .nfl-sched-res.is-t { background: rgba(255, 255, 255, 0.07); color: var(--text-muted); }
body.wc-mode .nfl-sched-kick {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-secondary); white-space: nowrap;
}

/* ── The season switch, and the state before a season has started ──────── */
body.wc-mode .nfl-season-switch { display: inline-flex; align-items: center; gap: 10px; }
body.wc-mode .nfl-preseason {
  display: grid; gap: 6px;
  padding: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
}
body.wc-mode .nfl-preseason-head {
  font-family: var(--font-body); font-size: 15px; font-weight: 700; color: #fff;
}
body.wc-mode .nfl-preseason-sub {
  font-family: var(--font-body); font-size: 13px; color: var(--text-muted); max-width: 62ch;
}

/* The squad search sits in the filter toolbar beside the position pills.
 * .wc-home-search is the hub hero's search field, which is sized for a hero,
 * so it is brought down to toolbar scale here rather than being a second
 * lookalike component. */
body.wc-mode .nfl-squad-search {
  max-width: 240px;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 9px;
  font-size: 13px;
}
body.wc-mode .nfl-squad-search svg { width: 14px; height: 14px; }
body.wc-mode .nfl-squad-search input { font-size: 13px; }
@media (max-width: 640px) {
  body.wc-mode .nfl-squad-search { max-width: none; width: 100%; }
}
/* The roster rail can be a hundred names, so it scrolls inside the rail
 * rather than pushing the division and next-game blocks off the top. */
body.wc-mode .nfl-mode .wc-player-sidebar-roster,
body.wc-mode .wc-player-sidebar-roster { padding-bottom: 24px; }

/* ── Rail: the next game ─────────────────────────────────────────────────
 * "BUF @ HOU · wk 1" asked the reader to decode two abbreviations to find out
 * who their own team plays. Both crests, both codes, who is at home, and when.
 */
body.wc-mode .nfl-next {
  display: grid;
  gap: 9px;
  margin: 0 6px;
  padding: 11px 12px;
  border-radius: 12px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014));
  border: 1px solid rgba(255, 255, 255, 0.075);
  transition: border-color 160ms var(--wc-ease-out), background 160ms var(--wc-ease-out);
}
body.wc-mode .nfl-next:hover {
  border-color: var(--wc-gold-line);
  background: var(--wc-gold-soft);
}
body.wc-mode .nfl-next-head {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .nfl-next-wk { color: var(--wc-gold); }
body.wc-mode .nfl-next-when { margin-left: auto; white-space: nowrap; }
body.wc-mode .nfl-next-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
body.wc-mode .nfl-next-team {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}
body.wc-mode .nfl-next-crest {
  width: 28px; height: 28px; object-fit: contain;
  /* A team with no logo on file still holds the row's height, so the two
   * sides cannot end up at different heights. */
  display: block;
}
body.wc-mode .nfl-next-abbr {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 800;
  color: var(--text-secondary);
}
/* The reader's own team, so they are not working out which side is theirs. */
body.wc-mode .nfl-next-team.is-mine .nfl-next-abbr { color: #fff; }
body.wc-mode .nfl-next-ha {
  font-family: var(--font-mono);
  font-size: 7.5px; font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
body.wc-mode .nfl-next-at {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
}
body.wc-mode .nfl-next-venue {
  font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}

/* ── Phone: keep the crest ───────────────────────────────────────────────
 * wc-streaks.css hides .wc-player-photo-rail entirely below 640px, which is
 * right on the football PLAYER page: the rail there holds a 190px headshot and
 * it would eat a phone screen. Here it holds a TEAM CREST - the page's whole
 * identity, and legible at 56px - so it stays, sitting above the name rather
 * than beside it. Scoped to this file, which only the team page loads.
 */
@media (max-width: 640px) {
  body.wc-mode .wc-hero.wc-player-hero-v2 .wc-player-photo-rail {
    display: block;
    width: 56px;
    aspect-ratio: 1 / 1;
    padding: 6px;
    border-radius: 12px;
  }
}