/* WC site-wide chrome - body.wc-mode tournament shell.
 *
 * Loaded on every WC page AFTER theme.css + design-system.css + wc-public.css.
 * Sits ABOVE wc-public.css (more specific selectors win on shared tokens) and
 * supplies the post-S8A visual transformation: fluid full-width layout,
 * Streaks-grade hero treatment, Streaks-grade section dividers, refined
 * Eyebrow pill, shared.js-rendered top nav. Page-specific styles (radar
 * podiums, heatmap, group tiles, methodology TOC) live in their own files.
 *
 * Reference: Streaks (/streaks.html) hierarchy + Statpacks display rhythm.
 * Designed AWAY from Card Radar density, generic-SaaS gradient hero, the
 * old 1200px cap. Brand: Anton skewed -10deg display, Red Hat Display body,
 * Red Hat Mono numbers, red fills only, blue secondary, gold #ff2740 WC.
 * Mobile floor 360px, touch >= 44px, no emoji.
 */

/* ── Tournament tokens (cascade onto :root inside body.wc-mode) ─────── */
body.wc-mode {
  /* Brand refresh: accent flipped gold -> red (token name kept to avoid churn). */
  --wc-gold:         #ff2740;
  --wc-gold-soft:    rgba(255, 39, 64, 0.10);
  --wc-gold-line:    rgba(255, 39, 64, 0.32);
  --wc-gold-glow:    0 0 32px rgba(255, 39, 64, 0.16);
  --wc-blue:         #0257ff;
  --wc-blue-soft:    rgba(2, 87, 255, 0.10);
  --wc-silver:       #c4c9d4;
  --wc-bronze:       #d77a3a;
  --wc-glass:        rgba(11, 13, 18, 0.78);
  --wc-glass-border: rgba(255, 255, 255, 0.07);
  --wc-glass-blur:   blur(18px);
  --wc-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  /* Stronger ease curves per emil-design-eng (default CSS easings lack punch). */
  --wc-ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --wc-ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --wc-pad-x:        clamp(16px, 3vw, 64px);
  --wc-rhythm:       clamp(28px, 5vw, 56px);
}

/* ── Fluid container ─────────────────────────────────────────────────
 * Default behaviour: 100% width with horizontal padding aligned to the
 * top nav, so every block on the page sits on the same vertical ruler.
 * Use .wc-container--prose for reading-comfort max-width (methodology
 * body copy lands here). Use .wc-container--wide for the bracket /
 * heatmap which want every available pixel.
 */
.wc-container {
  width: 100%;
  margin: 0;
  padding-left: var(--wc-pad-x);
  padding-right: var(--wc-pad-x);
  min-width: 0;
}
.wc-container > * { min-width: 0; }
.wc-container--prose {
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}
.wc-container--wide { padding-left: clamp(8px, 1.5vw, 24px); padding-right: clamp(8px, 1.5vw, 24px); }

/* ── WC sibling subnav - sits BELOW the main BetBuilderAI nav.
 * The main nav (logo + tools + CTA + auth menu) is the same as Streaks /
 * Referees / Dashboard, rendered by shared.js's window.renderNav() into
 * #nav-container. This strip is the secondary navigator across the WC
 * surfaces and uses the same gold accent the dashboard cards use. The
 * base .wc-subnav rule lives in wc-public.css; this block lifts the
 * 1200px cap, adds an overflow-scroll behaviour at narrow widths, and
 * tightens the typography to read as a tool family bar rather than a
 * page-internal nav.
 */
body.wc-mode .wc-subnav {
  max-width: none;
  padding: 14px var(--wc-pad-x) 6px;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1px solid var(--border-subtle);
}
body.wc-mode .wc-subnav::-webkit-scrollbar { display: none; }
body.wc-mode .wc-subnav a {
  flex: 0 0 auto;
  transition:
    color 180ms var(--wc-ease-out),
    border-color 180ms var(--wc-ease-out),
    background 180ms var(--wc-ease-out),
    transform 140ms var(--wc-ease-out);
}
body.wc-mode .wc-subnav a:active { transform: scale(0.97); }
body.wc-mode .wc-subnav a.is-current {
  color: #fff;
  background: var(--wc-gold);
  border-color: var(--wc-gold);
  box-shadow: 0 4px 14px rgba(255, 39, 64, 0.18);
}
body.wc-mode .wc-subnav .home-link {
  margin-left: auto;
  padding-left: 16px;
  border-left: 1px solid var(--border-subtle);
}

/* ── Hero ─────────────────────────────────────────────────────────────
 * Asymmetric two-column grid on >=900px so the meta line offsets to the
 * right (breaks the predictable single-column eyebrow → H1 → para → meta
 * stack the design-taste-frontend skill calls "ANTI-CENTER BIAS"). Side
 * stripe dropped per the impeccable absolute ban. Hierarchy comes from
 * weight + color contrast, not just scale - H1 clamps to 64px ceiling
 * instead of 96px.
 */
body.wc-mode .wc-hero {
  max-width: none;
  margin: 0;
  padding: clamp(28px, 5vw, 56px) var(--wc-pad-x) clamp(24px, 3vw, 36px);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
body.wc-mode .wc-hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 720px 380px at 12% -10%, rgba(255, 39, 64, 0.055), transparent 70%),
    radial-gradient(ellipse 520px 320px at 92% 80%, rgba(2, 87, 255, 0.04), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
body.wc-mode .wc-hero > * { position: relative; grid-column: 1; min-width: 0; }
body.wc-mode .wc-hero > .wc-meta-line { grid-column: 2; align-self: end; }
@media (max-width: 900px) {
  body.wc-mode .wc-hero { grid-template-columns: 1fr; row-gap: 14px; }
  body.wc-mode .wc-hero > .wc-meta-line { grid-column: 1; }
}

body.wc-mode .wc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-gold);
  padding: 7px 12px;
  border: 1px solid var(--wc-gold-line);
  border-radius: 999px;
  background: var(--wc-gold-soft);
  width: max-content;
}
body.wc-mode .wc-eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wc-gold);
  box-shadow: 0 0 14px var(--wc-gold);
}
body.wc-mode .wc-hero h1,
/* See the note in wc-public.css: the player page's loading placeholder is a
   div, not a second h1, and has to look identical. */
body.wc-mode .wc-hero .wc-hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: none;
  margin: 18px 0 14px;
  color: var(--text-primary);
}
body.wc-mode .wc-hero p {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: 65ch;
}
body.wc-mode .wc-meta-line {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  display: grid;
  gap: 8px;
  padding-left: clamp(0px, 1.5vw, 16px);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 900px) {
  body.wc-mode .wc-meta-line {
    margin-top: 4px;
    border-left: 0;
    padding-left: 0;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    column-gap: 22px;
  }
}
body.wc-mode .wc-meta-line strong { color: var(--text-secondary); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
body.wc-mode .wc-meta-line span { display: flex; flex-direction: column; gap: 2px; }

/* ── Hero entry stagger - perceived-performance polish per emil-design-eng.
 *
 * The H1 is intentionally excluded from the opacity stagger so it can
 * paint at first frame and anchor the Largest Contentful Paint metric.
 * Including it (opacity 0 → 1 with an 80ms delay + 420ms transition)
 * dragged methodology's LCP from 1.4s to 3.5s and dropped perf below
 * the 90 floor. The supporting elements (eyebrow, paragraph, meta)
 * still cascade in around the headline; that polish is enough.
 *
 * @starting-style lets us animate from the initial mount state without
 * any JS - modern Chrome / Edge / Firefox / Safari all support it.
 * `prefers-reduced-motion` gets a static fade only.
 */
body.wc-mode .wc-hero .wc-eyebrow,
body.wc-mode .wc-hero p,
body.wc-mode .wc-hero .wc-meta-line {
  transition:
    opacity 360ms var(--wc-ease-out),
    transform 360ms var(--wc-ease-out);
}
body.wc-mode .wc-hero .wc-eyebrow   { transition-delay: 0ms; }
body.wc-mode .wc-hero p             { transition-delay: 80ms; }
body.wc-mode .wc-hero .wc-meta-line { transition-delay: 140ms; }
@starting-style {
  body.wc-mode .wc-hero .wc-eyebrow   { opacity: 0; transform: translateY(6px); }
  body.wc-mode .wc-hero p             { opacity: 0; transform: translateY(10px); }
  body.wc-mode .wc-hero .wc-meta-line { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  body.wc-mode .wc-hero .wc-eyebrow,
  body.wc-mode .wc-hero p,
  body.wc-mode .wc-hero .wc-meta-line {
    transition: opacity 200ms ease;
    transform: none;
  }
  @starting-style {
    body.wc-mode .wc-hero .wc-eyebrow,
    body.wc-mode .wc-hero p,
    body.wc-mode .wc-hero .wc-meta-line { opacity: 0; transform: none; }
  }
}

/* ── Section divider - used between hero, podium, table, methodology
 * anchor. Streaks-grade horizontal rule with heading + meta caption.
 */
body.wc-mode .wc-section-divider {
  max-width: none;
  margin: var(--wc-rhythm) 0 0;
  padding: 0 var(--wc-pad-x) 14px;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-section-divider h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0;
  color: var(--text-primary);
}
body.wc-mode .wc-section-divider .wc-section-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Toolbar + main get fluid widths too (override wc-public.css) ───── */
body.wc-mode .wc-toolbar,
body.wc-mode .wc-main,
body.wc-mode .wc-partial-banner,
body.wc-mode .wc-method-link,
body.wc-mode .wc-filter-row,
body.wc-mode .wc-podium-grid,
body.wc-mode .wc-table-wrap,
body.wc-mode .wc-loading {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--wc-pad-x);
  padding-right: var(--wc-pad-x);
}
body.wc-mode .wc-toolbar { margin-top: clamp(18px, 2.5vw, 28px); }
body.wc-mode .wc-main    { padding-bottom: clamp(48px, 6vw, 96px); padding-top: clamp(18px, 2.5vw, 28px); }
body.wc-mode .wc-partial-banner {
  border-radius: 0;
  border-left: 0; border-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 14px; padding-bottom: 14px;
}
body.wc-mode .wc-partial-banner + .wc-method-link { margin-top: 18px; }
body.wc-mode .wc-method-link    { margin-top: clamp(18px, 2.5vw, 28px); padding-top: 4px; padding-bottom: 4px; }
body.wc-mode .wc-filter-row     { margin-top: clamp(18px, 2.5vw, 28px); }
body.wc-mode .wc-filter-row     { padding-left: clamp(20px, 3vw, 32px); padding-right: clamp(20px, 3vw, 32px); padding-top: 20px; padding-bottom: 20px; }
body.wc-mode .wc-podium-grid    { margin-top: clamp(28px, 4vw, 48px); }
body.wc-mode .wc-table-wrap     { margin-top: 18px; margin-bottom: clamp(28px, 4vw, 48px); }

/* ── Page ground ───────────────────────────────────────────────────────
 * Flat --surface-base, no ambient wash.
 *
 * There used to be a fixed full-viewport "blue-dominant ambient wash" here:
 * rgba(2, 87, 255, 0.07) at the top-left and 0.045 at the bottom-right, over
 * a ground of rgb(11, 13, 18). Composited, the top-left corner landed on
 * rgb(9, 17, 36) - a blue channel four times its red, which is a blue page,
 * not a tinted one.
 *
 * The match page and the football hub had each already switched it off
 * locally, and the NFL sheet switched it off for body.nfl-mode, so the wash
 * only survived on the pages nobody had got to: squads, recent predictions,
 * the player and squad pages, and the pick tracker. Those were the pages
 * still reading blue. Removed rather than re-tinted to a neutral: the ask is
 * a flat ground, and a neutral wash is still a wash. */
body.wc-mode {
  background: var(--surface-base);
  min-height: 100vh;
}

/* No top padding from theme.css's body { padding-top: 80px } - the WC
 * nav is sticky in normal flow, so let the page sit naturally. */
body.wc-mode { padding-top: 0; }

/* ── Archive banner ────────────────────────────────────────────────
 * Injected by shared.js when /api/wc/mode reports archived: true (i.e.
 * WC_MODE_ENABLED env var is unset or false). Surfaces above the
 * wc-subnav strip on every WC page. Brand: blue accent strip + Red
 * Hat Mono caption + Anton-skewed strong opener. Layout-positive - 
 * adds vertical space rather than overlapping content.
 */
body.wc-mode .wc-archive-banner {
  background: linear-gradient(135deg, rgba(2, 87, 255, 0.10), rgba(2, 87, 255, 0.05));
  border-bottom: 1px solid rgba(2, 87, 255, 0.30);
  padding: 10px var(--wc-pad-x);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: center;
}
body.wc-mode .wc-archive-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
}
body.wc-mode .wc-archive-banner strong {
  color: var(--wc-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
body.wc-mode.wc-archive {
  /* Slight desaturation hint that the surface is historical. Subtle
     enough that the data still reads cleanly - the banner does the
     heavy lifting on the messaging. */
}

/* ── Skip link + focus ring polish ─────────────────────────────────── */
body.wc-mode .wc-skip-link {
  position: absolute; top: -100px; left: 12px;
  padding: 10px 14px;
  background: var(--wc-gold);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  z-index: 200;
  transition: top 0.2s var(--wc-ease);
}
body.wc-mode .wc-skip-link:focus { top: 12px; }

body.wc-mode a:focus-visible,
body.wc-mode button:focus-visible,
body.wc-mode input:focus-visible,
body.wc-mode select:focus-visible,
body.wc-mode summary:focus-visible {
  outline: 2px solid var(--wc-gold);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Narrow widths ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.wc-mode .wc-nav-inner { padding: 0 clamp(12px, 4vw, 20px); gap: 10px; height: 56px; min-height: 56px; }
  body.wc-mode .wc-nav-brand { font-size: 16px; }
  body.wc-mode .wc-nav-eyebrow { display: none; }
  body.wc-mode .wc-nav-home { padding: 8px 12px; font-size: 11px; }
  body.wc-mode .wc-hero { padding-top: clamp(20px, 4vw, 32px); padding-bottom: 14px; }
  body.wc-mode .wc-hero::before { width: 3px; }
}
@media (max-width: 480px) {
  body.wc-mode { --wc-pad-x: 14px; }
  body.wc-mode .wc-hero h1, body.wc-mode .wc-hero .wc-hero-title { font-size: clamp(32px, 9vw, 48px); }
  body.wc-mode .wc-meta-line { gap: 4px 14px; }
}

/* ── Sport switcher ─────────────────────────────────────────────────────
 * Moved to theme.css. shared.js renders the switcher into EVERY nav, but
 * this file is only loaded by the leagues and NFL pages, so on /offers the
 * markup arrived with no rules at all and the two links rendered as raw
 * underlined anchors ("FootballNFL"). The rest of the nav already lives in
 * theme.css, which every page carrying this nav loads; the switcher is part
 * of the same component and belongs beside it.
 */