/* nfl-game.css - match-page classes extracted from leagues/match.html.
 *
 * Same trap as nfl-hub.css: leagues/match.html carries ~157,578 chars of INLINE
 * <style>, and .wc-match-tabs / .wc-match-tab live there rather than in
 * wc-match.css. Using the names without the rules leaves the tab bar unstyled.
 *
 * Extracted verbatim and COPIED, not moved, so leagues/match.html is untouched.
 */

/* Full-bleed hero - pull the gradient + background out to the
     * main column's left/right edges. Negative margins cancel the
     * .wc-db-main horizontal padding; matching positive padding on
     * the hero keeps the content alignment exactly where it was. */
    body.wc-mode .wc-match-header {
      background: var(--surface-base);
      position: relative;
      margin-left: calc(-1 * clamp(20px, 3vw, 40px));
      margin-right: calc(-1 * clamp(20px, 3vw, 40px));
      padding-left: calc(var(--wc-pad-x) + clamp(20px, 3vw, 40px));
      padding-right: calc(var(--wc-pad-x) + clamp(20px, 3vw, 40px));
    }
/* Directional gradient rising up from the tab bar into the hero's
     * lower half - replaces the four radial blobs (which created the
     * "light strip" artefacts). Single linear sweep so the brightest
     * point is exactly at the hero/tab-bar seam and fades cleanly to
     * flat --surface-base ~140px above, with no edge bands. Overrides the
     * old radials via !important since wc-match.css still defines
     * the ::after pseudo. */
    body.wc-mode .wc-match-header::after {
      background: linear-gradient(
        to top,
        rgba(255, 39, 64, 0.07) 0%,
        rgba(2, 87, 255, 0.04) 35%,
        transparent 70%
      ) !important;
      z-index: 0 !important;
    }
body.wc-mode .wc-match-header > * { position: relative; z-index: 1; }
/* ── Match-page sub tabs (Raw Data / Predictions / Stat Pack) ─────
     * The tab bar lives inside .wc-db-main's clamp(20px, 3vw, 40px)
     * horizontal padding. Negative margins + matching positive padding
     * pull the strip out to the full-bleed sidebar edge so the
     * underline + background read as one continuous bar rather than
     * a floating chip surrounded by gutter. */
    .wc-match-tabs {
      position: relative;
      z-index: 3;
      display: flex;
      gap: 4px;
      padding: 18px clamp(20px, 3vw, 40px) 0;
      margin: 20px calc(-1 * clamp(20px, 3vw, 40px)) 0;
      border-bottom: 1px solid var(--wc-streak-tile-border);
      background: var(--surface-base);
      overflow-x: auto;
      scrollbar-width: none;
    }
.wc-match-tabs::-webkit-scrollbar { display: none; }
.wc-match-tab {
      appearance: none;
      background: transparent;
      border: 0;
      padding: 12px 18px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
      cursor: pointer;
      position: relative;
      transition: color 160ms var(--wc-ease-out);
      white-space: nowrap;
    }
.wc-match-tab:hover { color: var(--text-secondary); }
.wc-match-tab.is-active { color: var(--text-primary); }
.wc-match-tab.is-disabled { opacity: .38; cursor: not-allowed; }
.wc-match-tab.is-disabled:hover { color: inherit; }
.wc-match-tab.is-active::after {
      content: '';
      position: absolute;
      left: 18px; right: 18px;
      bottom: -1px;
      height: 2px;
      background: var(--wc-gold);
      border-radius: 2px 2px 0 0;
    }
.wc-match-tab-badge {
      display: inline-block;
      margin-left: 8px;
      padding: 1px 6px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 999px;
      font-size: 9.5px;
      font-weight: 700;
      color: var(--text-muted);
    }
.wc-tab-new {
      display: inline-block;
      margin-left: 7px;
      padding: 1px 5px 0;
      border-radius: 5px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1.5;
      vertical-align: middle;
      background: rgba(52, 211, 153, 0.14);
      color: #34d399;
      border: 1px solid rgba(52, 211, 153, 0.34);
    }
.wc-match-tab.is-active .wc-match-tab-badge {
      background: rgba(255, 39, 64, 0.10);
      color: var(--wc-gold);
    }
/* Breathing room between the sticky tab bar and the first thing
     * inside each view - Download/Check lineups (Stat Pack) and the AI
     * preview card (Predictions). 18px reads cramped under the bar's
     * underline; 28px lets them sit cleanly. */
    .wc-match-tabs + .wc-match-view { padding-top: 28px; }
/* Action bar: Download / Check Lineups / Share. Extra top padding
     * so the buttons don't kiss the sticky tab bar's underline - the
     * view-level padding-top (.wc-match-tabs + .wc-match-view) sets
     * the floor; this adds visual headroom on top of that for the
     * Stat Pack tab specifically. */
    .wc-sp-action-bar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      padding-top: 12px;
    }

/* ── The squeeze band: rail present, main column too narrow ───────────────
   Between 961px and 1200px the shell has already switched the 260px rail on
   (wc-streaks.css turns it off at 960) but the viewport has not grown enough
   to pay for it, so the main column is 700-940px and the full-bleed padding
   above takes another ~122px off that. The header's three-up then has roughly
   580-730px for two team names plus a 252px meta column, and it does not fit:
   `.wc-match-side` carries min-width 0, so the 1fr tracks collapse BELOW the
   name's min-content and `overflow: hidden` on the header silently eats the
   difference. Measured on an iPad Air 13" in portrait (1024x1366):
   "San Francisco 49ers" was cut by 75px and "Washington Commanders" by 177px.

   The fix is main's own tablet treatment, not a new one. wc-match.css already
   stacks this header into a single column at <=720px, and its comment there
   says the three-up "read as a disjointed diagonal on phones/tablets" - the
   same judgement, one breakpoint too low for a layout that also has a rail to
   pay for. Stacking gives the names the full column: zero clipping at every
   width in the band, and they keep their full 48-52px size, where shrinking
   the font to fit needed 29px AND still clipped the longest name.

   The upper bound is 1439 because that is where the three-up starts fitting
   the LONGEST name in the league. "Washington Commanders" wraps to
   "Washington" / "Commanders" and its widest line is 338px, so it needs a
   338px side track: 1366 gives 298 (clips 23), 1400 gives 314 (clips 6), 1440
   gives 333 and measures clean. Tested against that fixture rather than a
   short one, which is why an earlier pass with the bound at 1200 looked fine
   on "San Francisco 49ers" (241px, fits 298) and still clipped Washington on
   an iPad in landscape.

   The alternative was keeping three-up below 1440 and shrinking the name to
   fit, which needs about 3.1vw: 42px at 1366 instead of 52. That penalises
   every matchup to accommodate the eight or so long names, so stacking wins.
   Two other candidates are recorded here because both look right and are
   wrong: `overflow-wrap: anywhere` drops min-content to one character, so the
   1fr track collapses and the name becomes a vertical letter stack (header
   480px tall), and a bare `min-width: 0` lets the h1 shrink to 129px over six
   lines instead of filling its track (header 400px tall).

   Duplicated rather than shared because those rules live in wc-match.css,
   which belongs to the football side: widening ITS media query would restyle
   the football match page on every tablet. Scoped to .nfl-mode here instead.
   IF MAIN CHANGES ITS <=720 BLOCK, THIS NEEDS THE SAME CHANGE. */
@media (min-width: 721px) and (max-width: 1439px) {
  body.wc-mode.nfl-mode .wc-match-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Both teams as a flag-left lockup, so they read as a stacked pair rather
     than as two halves of a split that is no longer there. */
  body.wc-mode.nfl-mode .wc-match-side,
  body.wc-mode.nfl-mode .wc-match-side.is-away {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    gap: 14px;
  }
  /* Meta drops below the two teams as one line instead of sitting between
     them in a column narrow enough to wrap the kickoff time. */
  body.wc-mode.nfl-mode .wc-match-vs {
    order: 1;
    padding: 0;
    margin-top: 8px;
    gap: 0;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
  }
  /* The "AT" glyph only means something between two side-by-side teams. */
  body.wc-mode.nfl-mode .wc-match-vs-glyph { display: none; }
}