/* WC Match page styles. Layered on top of theme.css + wc-public.css +
 * wc-site.css. The page already inherits the body.wc-mode chrome
 * (fluid container, sticky subnav, gold accent, body background overlay)
 * from wc-site.css. Only NEW patterns live here:
 *  - .wc-match-header           (two team flags + kickoff + venue + ref)
 *  - .wc-match-preview          (AI Haiku card with eyebrow + body)
 *  - .wc-match-markets          (8-market grid: 4 player podiums + 4
 *                                whole-match callouts)
 *  - .wc-match-side-grid        (Expected XI + bench per side)
 *  - .wc-match-pairings         (4 matchup pairing cards + highlights)
 *  - .wc-match-sources          (squad sources block - club logos / counts)
 *  - .wc-match-takers           (set-piece takers callout)
 *  - .wc-match-share            (statpack share button)
 *  - #wc-match-shareable        (container the render-statpack pipeline
 *                                screenshots - wraps everything from the
 *                                header through the matchup module)
 *
 * Brand: red #ff0000 fills only, gold #ff2740 WC accent, blue #0257ff
 * secondary, Anton skewed -10deg display, Red Hat Display body, Red Hat
 * Mono numbers. No em-dashes as sentence punctuation. No emoji.
 */

/* ── Shareable region ─────────────────────────────────────────────── */
body.wc-mode #wc-match-shareable {
  display: block;
  width: 100%;
}

/* ── Match header - two-team identity + meta strip ─────────────────── */
body.wc-mode .wc-match-header {
  display: grid;
  /* The centre column was `auto`, so it absorbed whatever the gutters gave
   * back and the club names never saw the width: tightening the gap actually
   * made the side columns NARROWER (367px to 341px) because the centre grew.
   * Bounding it hands that slack to the two 1fr sides, where the long names
   * live. The centre still carries stage, kickoff, VS and venue, and the venue
   * was already free to wrap. */
  grid-template-columns: 1fr clamp(140px, 13.5vw, 184px) 1fr;
  align-items: center;
  /* Was clamp(16px, 4vw, 48px). The two 48px gutters plus the centre column
   * left each club only 273px for its name at 1440, and at the 52px type size
   * that fits the word "Freiburg" and almost nothing else. Tightening the
   * gutter is the cheapest place to find that width back: the centre column
   * still carries the stage, kickoff, VS and venue with room to spare. */
  gap: clamp(12px, 2.2vw, 28px);
  padding: clamp(28px, 5vw, 56px) var(--wc-pad-x) clamp(20px, 3vw, 32px);
  position: relative;
  overflow: hidden;
}
body.wc-mode .wc-match-header::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;
}
/* Single-row flex: flag next to team name, no meta beneath. The group
 * label lives once in the centre column (.wc-match-stage) since both
 * teams are by definition in the same group. */
body.wc-mode .wc-match-side {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  min-width: 0;
}
body.wc-mode .wc-match-side.is-away {
  flex-direction: row-reverse;
  text-align: right;
}
/* Statpack PNG export - regression guard. The download (downloadStatPack in
 * match.html) renders a clone inside #sp-export-render and re-declares the hero
 * layout in an inline <style>. That inline block has twice silently regressed to
 * justify-content:flex-end (which, under row-reverse, drifts the away team toward
 * centre) when a stale branch overwrote match.html. This rule outranks that inline
 * block (extra body.wc-mode + #id specificity) so the away side stays flush-right - 
 * mirroring home - no matter what the inline block says. Export-only: the
 * #sp-export-render container exists solely while the download renders. */
body.wc-mode #sp-export-render .wc-match-side.is-away {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  text-align: right !important;
}
body.wc-mode .wc-match-side-flag {
  width: 72px;
  height: 48px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}
/* Page title. The hero shows the two club names at display size, but neither
 * is the page's subject on its own, so both are plain divs and this single
 * line is the H1. Deliberately quiet: it states what the page is for a reader
 * skimming and for a crawler, without competing with the club lockup. Sits
 * outside #wc-match-shareable so the stat-pack export is unaffected. */
body.wc-mode .wc-match-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  color: var(--text-secondary);
  text-wrap: balance;
}
@media (max-width: 640px) {
  body.wc-mode .wc-match-title { font-size: 13px; margin-bottom: 10px; }
}
/* Nav clearance, desktop only.
 *
 * Above 768px the global nav is FIXED and 81px tall, but .wc-db-main only
 * pads 72px. The hero made up the difference with its own top padding, so
 * nothing had ever been placed before it, and this title shipped rendering
 * in that 9px dead zone: present in the DOM, sitting behind the nav.
 *
 * So the title takes the clearance, and the hero gives back the padding it
 * no longer needs. The page does not grow: measured on the live layout the
 * title lands 21px clear of the nav and the hero moves UP 6px.
 *
 * :not([hidden]) matters. An adjacent-sibling selector still matches a
 * display:none sibling, so without it a client-only render (no SSR payload,
 * title hidden) would hand the hero the reduced padding with nothing taking
 * its place, putting the hero back under the nav.
 *
 * The stat-pack export is untouched by construction: it clones
 * #wc-match-shareable into #sp-export-render, where this title is not a
 * sibling, so the hero keeps its full padding there.
 *
 * Below 768px the nav drops into normal flow (theme.css) and .wc-db-main
 * pads 16px, so there is no overlap and none of this applies. */
@media (min-width: 769px) {
  body.wc-mode .wc-match-title { margin-top: 30px; }
  body.wc-mode .wc-match-title:not([hidden]) + #wc-match-shareable .wc-match-header {
    padding-top: clamp(8px, 1.5vw, 20px);
  }
}

/* The opening paragraph, server-rendered by render-match.js. The page carried
 * 7,400 characters and almost no prose, which is what a "X vs Y betting tips"
 * search matches on, so this is the first thing a reader or a crawler gets.
 * Measured to a readable line rather than the full column. */
body.wc-mode .wc-match-side-name {
  font-family: var(--font-display);
  font-weight: 800;
  /* Was clamp(28px, 5vw, 52px). Measured against the real column: at 52px a
   * single word wider than ~273px breaks MID-WORD, which is how
   * "M'gladbach" rendered as "M'gladbac / h" once min-width:0 let the box
   * shrink. It was never Gladbach-specific - "Bournemouth" needs 345px at
   * 52px and "Huddersfield" 324px, so both have been breaking too. At 44px
   * they measure 292px and 275px and fit the widened column. */
  font-size: clamp(26px, 3.9vw, 42px);
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--text-primary);
  line-height: 1.0;
  text-wrap: balance;        /* cleaner 2-line wrap for long club names */
  overflow-wrap: break-word;
  /* A flex item's default min-width is auto, which means it refuses to shrink
   * below its longest word. "Monchengladbach" at the 52px cap is wider than
   * this column, so the box grew instead of wrapping and the name ran over the
   * VS glyph. min-width:0 lets it shrink, and break-word above then wraps the
   * word itself rather than overflowing.
   *
   * The names are shortened server-side (api/_lib/lg-club-display.js), so this
   * should never be load-bearing - it is the guard for the club nobody has
   * curated yet, so a new long name degrades to an ugly wrap instead of a
   * collision. */
  min-width: 0;
}
body.wc-mode .wc-match-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
/* "Group L" lockup - sits above the kickoff time. Pill styling so the
 * eye reads it as fixture metadata rather than a heading. */
body.wc-mode .wc-match-stage {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);       /* plain sub-info, not a pill */
  font-variant-numeric: tabular-nums;
}
body.wc-mode .wc-match-kickoff {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* "Today · 14:30 BST" is a fixed-format string; wrapping it reads as a
   * layout fault rather than a long word. It is also what sets the centre
   * column's natural width, which is why the column is bounded no tighter
   * than this line needs. */
  white-space: nowrap;
}
body.wc-mode .wc-match-vs-glyph {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--wc-gold);
}
body.wc-mode .wc-match-venue {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  max-width: 220px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  body.wc-mode .wc-match-header { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; padding-bottom: 18px; }
  /* Centre both teams with a consistent flag-left lockup. The default
   * is-away row-reverse + flex-start pushed the two sides to opposite
   * edges, which read as a disjointed diagonal on phones/tablets. */
  body.wc-mode .wc-match-side,
  body.wc-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 teams as ONE compact sub-info line:
     league · day · time · stadium, dot-separated and smaller than the
     team names (wraps only if a very long venue forces it). */
  body.wc-mode .wc-match-vs {
    order: 1; padding: 0; margin-top: 8px; gap: 0;
    flex-direction: row; flex-wrap: wrap; align-items: baseline;
    justify-content: flex-start; text-align: left;
  }
  body.wc-mode .wc-match-vs-glyph { display: none; }
  body.wc-mode .wc-match-stage,
  body.wc-mode .wc-match-kickoff,
  body.wc-mode .wc-match-venue {
    font-size: 10px; letter-spacing: 0.07em; line-height: 1.5;
    text-align: left; max-width: none;
  }
  body.wc-mode .wc-match-kickoff::before,
  body.wc-mode .wc-match-venue::before {
    content: '·'; margin: 0 7px; color: rgba(255, 255, 255, 0.26);
  }
}

/* ── Postponement banner - visible when status != 'active' (audit F7.3) ── */
body.wc-mode .wc-match-banner {
  margin: 12px var(--wc-pad-x) 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(2, 87, 255, 0.08);
  border-left: 4px solid var(--wc-blue);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}
body.wc-mode .wc-match-banner strong { color: var(--text-primary); font-weight: 700; letter-spacing: 0.04em; }

/* ── AI preview ────────────────────────────────────────────────────── */
body.wc-mode .wc-match-preview {
  margin: clamp(20px, 3vw, 32px) var(--wc-pad-x) 0;
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 39, 64, 0.045), rgba(2, 87, 255, 0.025));
  border: 1px solid rgba(255, 39, 64, 0.18);
  display: grid;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
body.wc-mode .wc-match-preview::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 39, 64, 0.08), transparent 70%);
  pointer-events: none;
}
body.wc-mode .wc-match-preview-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.wc-mode .wc-match-preview-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wc-gold);
  box-shadow: 0 0 12px var(--wc-gold);
}
body.wc-mode .wc-match-preview p {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
  max-width: 80ch;
}
body.wc-mode .wc-match-preview-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Reveal-on-mount entry per emil-design-eng. The preview card cascades
   in slightly after the header lands (skip if user prefers reduced motion). */
body.wc-mode .wc-match-preview {
  transition: opacity 360ms var(--wc-ease-out), transform 360ms var(--wc-ease-out);
  transition-delay: 100ms;
}
@starting-style {
  body.wc-mode .wc-match-preview { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  body.wc-mode .wc-match-preview { transition: opacity 200ms ease; transform: none; }
  @starting-style {
    body.wc-mode .wc-match-preview { opacity: 0; transform: none; }
  }
}

/* ── Markets grid ─────────────────────────────────────────────────── */
body.wc-mode .wc-match-markets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(24px, 4vw, 40px) var(--wc-pad-x) 0;
}
@media (max-width: 900px) {
  body.wc-mode .wc-match-markets { grid-template-columns: 1fr; }
}
body.wc-mode .wc-match-market {
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: var(--wc-glass);
  backdrop-filter: var(--wc-glass-blur);
  -webkit-backdrop-filter: var(--wc-glass-blur);
  border: 1px solid var(--wc-glass-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
body.wc-mode .wc-match-market.is-spanning { grid-column: 1 / -1; }
body.wc-mode .wc-match-market-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
body.wc-mode .wc-match-market-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--text-primary);
}
body.wc-mode .wc-match-market-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-match-market-row {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
body.wc-mode .wc-match-market-row:first-of-type { border-top: 0; }
body.wc-mode .wc-match-market-rank {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
body.wc-mode .wc-match-market-name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.wc-mode .wc-match-market-name .wc-match-flag-mini {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
body.wc-mode .wc-match-market-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--wc-gold);
  font-weight: 700;
  text-align: right;
}
body.wc-mode .wc-match-market-row.is-leader .wc-match-market-rank { color: var(--wc-gold); font-weight: 700; }

/* Whole-match callouts (BTTS / O2.5 / U2.5 / corners) - single block
   with a verdict pill + probability bar */
body.wc-mode .wc-match-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-top: 4px;
}
body.wc-mode .wc-match-callout-rows {
  display: grid;
  gap: 8px;
}
body.wc-mode .wc-match-callout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 36px;
  align-items: center;
  gap: 12px;
}
body.wc-mode .wc-match-callout-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
body.wc-mode .wc-match-callout-bar {
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
body.wc-mode .wc-match-callout-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--wc-gold) 0%, rgba(255, 39, 64, 0.6) 100%);
  border-radius: inherit;
  width: var(--fill, 0%);
}
body.wc-mode .wc-match-callout-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
}

body.wc-mode .wc-match-callout-mode {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 39, 64, 0.06);
  border: 1px solid var(--wc-gold-line);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
body.wc-mode .wc-match-callout-mode strong { color: var(--wc-gold); font-weight: 700; }

/* ── Squads block (Expected XI + bench per side) ──────────────────── */
body.wc-mode .wc-match-squads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(28px, 4vw, 40px) var(--wc-pad-x) 0;
}
@media (max-width: 900px) {
  body.wc-mode .wc-match-squads { grid-template-columns: 1fr; }
}
body.wc-mode .wc-match-squad-card {
  padding: 22px;
  border-radius: 14px;
  background: var(--wc-glass);
  border: 1px solid var(--wc-glass-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
body.wc-mode .wc-match-squad-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 26px);
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--text-primary);
}
body.wc-mode .wc-match-squad-card .wc-match-xi-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.wc-mode .wc-match-xi-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-body);
  font-size: 14px;
}
body.wc-mode .wc-match-xi-row:first-of-type { border-top: 0; }
body.wc-mode .wc-match-xi-row .wc-match-xi-pos {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}
body.wc-mode .wc-match-xi-name {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.wc-mode .wc-match-xi-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 160ms var(--wc-ease-out), border-color 160ms var(--wc-ease-out);
}
body.wc-mode .wc-match-xi-name a:hover { color: var(--wc-gold); border-color: var(--wc-gold-line); }

body.wc-mode .wc-match-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--wc-gold-soft);
  color: var(--wc-gold);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--wc-gold-line);
}
body.wc-mode .wc-match-flag.is-role-gap { background: var(--wc-blue-soft); color: var(--wc-blue); border-color: rgba(2, 87, 255, 0.28); }
body.wc-mode .wc-match-flag.is-suspended {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.34);
}
body.wc-mode .wc-match-flag.is-on-yellow {
  background: rgba(250, 204, 21, 0.16);
  color: #facc15;
  border-color: rgba(250, 204, 21, 0.4);
}
body.wc-mode .wc-match-flag.is-booked {
  background: rgba(250, 204, 21, 0.08);
  color: #d4b51a;
  border-color: rgba(250, 204, 21, 0.24);
}
body.wc-mode a.wc-match-flag.is-on-form {
  background: var(--wc-blue-soft);
  color: var(--wc-blue);
  border-color: rgba(2, 87, 255, 0.34);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}
body.wc-mode a.wc-match-flag.is-on-form:hover {
  border-color: var(--wc-blue);
  transform: translateY(-1px);
}

/* S9 fills these slots at render time. Hidden by default; populated
   nodes pick up the .wc-match-flag styles above when the slot filler
   writes innerHTML. The 1px dashed gold outline is the empty-state
   placeholder retained pre-tournament. */
body.wc-mode .wc-match-suspension-slot,
body.wc-mode .wc-match-onform-slot {
  display: inline-flex;
  margin-left: 4px;
}
body.wc-mode .wc-match-suspension-slot[aria-hidden="true"],
body.wc-mode .wc-match-onform-slot[aria-hidden="true"] {
  width: 0;
  height: 0;
  margin-left: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}

body.wc-mode .wc-match-banner.is-suspension-watch {
  border-left: 3px solid #facc15;
  background: rgba(250, 204, 21, 0.08);
  color: var(--text-secondary);
}
body.wc-mode .wc-match-banner.is-suspension-watch strong { color: #facc15; }

/* ── Matchup module pairings + highlights ─────────────────────────── */
body.wc-mode .wc-match-pairings {
  margin: clamp(28px, 4vw, 40px) var(--wc-pad-x) 0;
}
body.wc-mode .wc-match-highlights {
  background: rgba(255, 39, 64, 0.04);
  border: 1px solid var(--wc-gold-line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: clamp(16px, 2vw, 24px);
  display: grid;
  gap: 10px;
}
body.wc-mode .wc-match-highlights-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-gold);
  margin: 0;
}
body.wc-mode .wc-match-highlights-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 8px;
}
body.wc-mode .wc-match-highlight-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  padding: 6px 0;
  border-top: 1px solid rgba(255, 39, 64, 0.08);
}
body.wc-mode .wc-match-highlight-row:first-child { border-top: 0; }
body.wc-mode .wc-match-highlight-name { font-weight: 600; color: var(--text-primary); }
body.wc-mode .wc-match-highlight-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; }
body.wc-mode .wc-match-highlight-value { font-family: var(--font-mono); font-size: 13px; color: var(--wc-gold); font-weight: 700; }

body.wc-mode .wc-match-pairing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) {
  body.wc-mode .wc-match-pairing-grid { grid-template-columns: 1fr; }
}
body.wc-mode .wc-match-pairing-card {
  padding: 22px;
  border-radius: 14px;
  background: var(--wc-glass);
  border: 1px solid var(--wc-glass-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
body.wc-mode .wc-match-pairing-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-gold);
  margin: 0;
}
body.wc-mode .wc-match-pairing-players {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
body.wc-mode .wc-match-pairing-player {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.wc-mode .wc-match-pairing-player.is-away { align-items: flex-end; text-align: right; }
body.wc-mode .wc-match-pairing-player-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
body.wc-mode .wc-match-pairing-player-team {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}
body.wc-mode .wc-match-pairing-vs {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--wc-gold);
  padding: 0 6px;
  letter-spacing: 0.04em;
}
body.wc-mode .wc-match-pairing-table { display: grid; gap: 6px; }
body.wc-mode .wc-match-pairing-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-mono);
  font-size: 12px;
}
body.wc-mode .wc-match-pairing-row:first-of-type { border-top: 0; }
body.wc-mode .wc-match-pairing-row .wc-cell-home,
body.wc-mode .wc-match-pairing-row .wc-cell-away {
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
body.wc-mode .wc-match-pairing-row .wc-cell-away { text-align: right; }
body.wc-mode .wc-match-pairing-row .wc-cell-label {
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  font-size: 10px;
}
body.wc-mode .wc-match-pairing-row.is-home-leader .wc-cell-home { color: var(--wc-gold); font-weight: 700; }
body.wc-mode .wc-match-pairing-row.is-away-leader .wc-cell-away { color: var(--wc-gold); font-weight: 700; }

/* IntersectionObserver-triggered reveal on the pairing cards per
   emil-design-eng. Section reveals only (data tables stay static). */
body.wc-mode .wc-match-pairing-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--wc-ease-out), transform 420ms var(--wc-ease-out);
}
body.wc-mode .wc-match-pairing-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.wc-mode .wc-match-pairing-card { opacity: 1; transform: none; transition: none; }
}

/* ── Squad Sources block ──────────────────────────────────────────── */
body.wc-mode .wc-match-sources {
  margin: clamp(28px, 4vw, 40px) var(--wc-pad-x) 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) {
  body.wc-mode .wc-match-sources { grid-template-columns: 1fr; }
}
body.wc-mode .wc-match-sources-card {
  padding: 22px;
  border-radius: 14px;
  background: var(--wc-glass);
  border: 1px solid var(--wc-glass-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
body.wc-mode .wc-match-sources-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--text-primary);
}
body.wc-mode .wc-match-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.wc-mode .wc-match-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
body.wc-mode .wc-match-source-pill strong { color: var(--wc-gold); font-weight: 700; letter-spacing: 0.06em; }

/* ── Set-piece takers callout ────────────────────────────────────── */
body.wc-mode .wc-match-takers {
  margin: clamp(28px, 4vw, 40px) var(--wc-pad-x) 0;
  padding: 22px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(2, 87, 255, 0.05), rgba(255, 39, 64, 0.03));
  border: 1px solid rgba(2, 87, 255, 0.22);
  display: grid;
  gap: 14px;
}
body.wc-mode .wc-match-takers-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wc-blue);
  margin: 0;
}
body.wc-mode .wc-match-takers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
@media (max-width: 720px) {
  body.wc-mode .wc-match-takers-grid { grid-template-columns: 1fr; }
}
body.wc-mode .wc-match-takers-side {
  display: grid;
  gap: 6px;
  min-width: 0;
}
body.wc-mode .wc-match-takers-side h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--text-primary);
}
body.wc-mode .wc-match-takers-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 13px;
}
body.wc-mode .wc-match-takers-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.wc-mode .wc-match-takers-name { color: var(--text-primary); font-weight: 600; }
body.wc-mode .wc-match-takers-empty { color: var(--text-muted); font-style: italic; }

/* ── Share row ────────────────────────────────────────────────────── */
body.wc-mode .wc-share-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: clamp(24px, 3vw, 36px) var(--wc-pad-x) clamp(40px, 5vw, 64px);
  flex-wrap: wrap;
}
body.wc-mode .wc-match-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--wc-gold);
  color: #fff;
  border: 1px solid var(--wc-gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(255, 39, 64, 0.18);
  transition:
    transform 140ms var(--wc-ease-out),
    box-shadow 220ms var(--wc-ease-out),
    background-color 220ms var(--wc-ease-out);
  min-height: 44px;
}
body.wc-mode .wc-match-share-btn:hover { box-shadow: 0 10px 28px rgba(255, 39, 64, 0.28); }
body.wc-mode .wc-match-share-btn:active { transform: scale(0.97); }
body.wc-mode .wc-match-share-btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
body.wc-mode .wc-share-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ── Loading + error states ───────────────────────────────────────── */
/* Reserve roughly one viewport of vertical space so the swap from
   loading → main content doesn't shift the page (CLS-positive). */
body.wc-mode .wc-match-loading,
body.wc-mode .wc-empty-state {
  margin: clamp(36px, 5vw, 56px) var(--wc-pad-x);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-align: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The display: flex above wins against the user-agent [hidden] rule,
 * so the loading message stays visible after JS flips loadingEl.hidden
 * = true. Restore the hide. */
body.wc-mode .wc-match-loading[hidden],
body.wc-mode .wc-empty-state[hidden] {
  display: none;
}

/* ── Held-back fixture ────────────────────────────────────────────────
 * Shown in place of the tabs when neither club plays in a competition we
 * cover, so nothing on the page would be backed by evidence. Deliberately
 * quiet: it is an honest note, not an error. */
body.wc-mode .wc-match-locked {
  margin: clamp(32px, 5vw, 56px) var(--wc-pad-x);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--wc-line, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
body.wc-mode .wc-match-locked[hidden] { display: none; }
body.wc-mode .wc-match-locked-title {
  margin: 0 0 10px;
  font-family: var(--font-display, inherit);
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 800;
  color: var(--text-strong, #fff);
}
body.wc-mode .wc-match-locked-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Narrow-width refinements ─────────────────────────────────────── */
@media (max-width: 480px) {
  body.wc-mode .wc-match-side-flag { width: 56px; height: 38px; }
  body.wc-mode .wc-match-market { padding: 16px; }
  body.wc-mode .wc-match-market-title { font-size: 19px; }
  body.wc-mode .wc-match-pairing-row { grid-template-columns: 56px minmax(0, 1fr) 56px; }
}

/* ── Top picks + the featured offer, side by side ──────────────────────────
 * Josh: put the offer at the top of a match page, beside Top picks on
 * desktop and under it on a phone.
 *
 * One column until there is genuinely room for two. 1040px rather than a
 * round 1024: below that the picks table's own columns (market, player,
 * confidence) start wrapping, and a cramped picks table to win a narrow
 * offer column is a bad trade.
 *
 * The offer column is fixed rather than fractional so the picks table keeps
 * the space it needs as the viewport grows, and the row is align-items:start
 * so neither stretches to the other's height. */
body.wc-mode .wc-pred-top-row {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
}
@media (min-width: 1040px) {
  body.wc-mode .wc-pred-top-row { grid-template-columns: minmax(0, 1fr) 340px; }
}
/* The offer is the second grid child on desktop and the second in the stack
 * on a phone, which is "under it" either way, so no order juggling. */
body.wc-mode .wc-pred-top-row > .bba-fo[hidden] { display: none; }

/* ── FAQ block: TEMPORARY DUPLICATE of the copy in wc-streaks.css ─────────
 * The rules moved to wc-streaks.css so player pages get them too. Both
 * stylesheets are served with max-age=1800, and the MIXED state that
 * makes - a browser holding the new wc-match.css and a 30-minute-old
 * wc-streaks.css - has the rules in neither, so the match FAQ rendered
 * unstyled in production. Measured, not guessed.
 *
 * A cache-fronted move has to be add-then-remove across two deploys.
 * This is the add half, arriving late. REMOVE THIS BLOCK once the
 * window has passed: by then a stale wc-match.css pairs with a fresh
 * wc-streaks.css, which is the safe direction. */
 * The page had nine H2s, all generic market labels identical across 236
 * fixtures, and almost no prose. This is where the questions people type
 * alongside a fixture get answered and where the tool's USPs get stated.
 *
 * <details> rather than a JS toggle: the answers stay in the HTML whether
 * open or shut, so a crawler reads all of it, and it is keyboard accessible
 * for free. Collapsed by default because six open blocks at the foot of a
 * dossier this long is clutter. */
body.wc-mode .wc-match-faq {
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.wc-mode .wc-match-faq-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin: 0 0 6px;
  text-wrap: balance;
}
body.wc-mode .wc-match-faq-q { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
body.wc-mode .wc-match-faq-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 4px;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  transition: background .14s ease;
}
body.wc-mode .wc-match-faq-q > summary::-webkit-details-marker { display: none; }
body.wc-mode .wc-match-faq-q > summary:hover { background: rgba(255, 255, 255, 0.03); }
body.wc-mode .wc-match-faq-q > summary h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
  transition: color .14s ease;
}
body.wc-mode .wc-match-faq-q[open] > summary h3,
body.wc-mode .wc-match-faq-q > summary:hover h3 { color: var(--text-primary); }
body.wc-mode .wc-match-faq-q > summary:focus-visible {
  outline: 2px solid var(--wc-gold, #ff2740);
  outline-offset: 2px;
}
/* Chevron, drawn in CSS so there is no icon dependency. */
body.wc-mode .wc-match-faq-q > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease, border-color .14s ease;
}
body.wc-mode .wc-match-faq-q[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--wc-gold, #ff2740);
}
body.wc-mode .wc-match-faq-a { padding: 0 4px 20px; }
body.wc-mode .wc-match-faq-p {
  font-size: 14px;
  line-height: 1.62;
  color: var(--text-secondary);
  margin: 0;
  max-width: 74ch;
}
body.wc-mode .wc-match-faq-a .wc-match-faq-p + .wc-match-faq-p { margin-top: 14px; }
body.wc-mode .wc-match-faq-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 78ch;
}
body.wc-mode .wc-match-faq-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
body.wc-mode .wc-match-faq-list li strong { color: var(--text-secondary); font-weight: 700; }
body.wc-mode .wc-match-faq-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wc-gold, #ff2740);
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  body.wc-mode .wc-match-faq-q > summary::after { transition: none; }
}