/* ---------------------------------------------------------------------------
 * Beer World Cup XI — shared components (v2, wall-chart redesign)
 *
 * Used by:
 *   beer-world-cup-xi.html          (manifesto — minimal, mostly inline)
 *   beer-world-cup-xi-fixtures.html (wall chart of 12 groups × 6 matches)
 *   beer-world-cup-xi-line-ups.html (48-country squad tile grid)
 *   world-cup-stadium-beer-map.html (stadium map + venue cards)
 *   world-cup-venues/<slug>.html    (per-stadium venue lists)
 *
 * Theme tokens (overridable per page; defaults here so the file works
 * standalone if a page forgets to set them):
 * ----------------------------------------------------------------------- */
:root {
  --bg: #0d1117;
  --teal: #00D4AA;
  --text: #ffffff;
  --muted: #8b949e;
  --card: #161b22;
  --border: rgba(255,255,255,0.08);
  --amber: #C0A340;
}


/* === FLAGS =================================================================
 * Country flag emoji used across wall chart + squad tiles. Slightly
 * desaturated grayscale rendering on monochrome systems would be a regression
 * — keep the actual emoji glyph. Small bump for line-height parity with
 * adjacent text. */
.flag {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
}


/* === FIXTURES WALL CHART ====================================================
 * Tournament-programme aesthetic: 12 compact group blocks laid out in a
 * responsive grid. Each group block has a group letter, the four team names,
 * and the six match rows. Played matches show the verdict; blank matches
 * show a dash + faded styling. */

/* Wall = swipe deck of 4 panels (A–C / D–F / G–I / J–L). Each panel is
   full-viewport-wide and contains a 3-column grid of its 3 groups.
   Horizontal scroll-snap so swipes settle on panel boundaries. Chip
   filter (A–C, D–F, ...) uses anchor links whose targets are panel ids;
   native scroll + snap handles the jump. No JS needed.
   Simpler than the previous 3×4 flat grid, and reads as a proper
   wallchart because each panel = one printable page of 3 groups. */
.bwc-wall {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.bwc-wall::-webkit-scrollbar { display: none; }

.bwc-wall-panel {
  scroll-snap-align: start;
  scroll-margin-left: 0;
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.bwc-wall-panel > .bwc-group { min-width: 0; }

/* Anchor scroll offset — sticky nav sits at top:0, so anchor targets
   need extra top padding when scrolled to, else they land under the nav. */
.bwc-wall-panel[id] { scroll-margin-top: 90px; }

.bwc-deck-dots,
.bwc-deck-counter { display: none !important; }

/* Print: kill the swipe deck, stack panels vertically, and let each
   panel's 3-column grid show as-is (or collapse if too narrow for print). */
@media print {
  .bwc-wall {
    display: block;
    overflow: visible;
    scroll-snap-type: none;
  }
  .bwc-wall-panel {
    display: grid;
    grid-template-columns: 1fr;
    page-break-inside: avoid;
    margin-bottom: 16px;
  }
  .bwc-filters { display: none !important; }
}

.bwc-deck-wrap { display: flex; flex-direction: column; gap: 10px; }

/* Filter chips — two rows: groups (A–L) + days (1–18). Horizontal
   scrollable on narrow screens to avoid wrapping into a tall block. */
.bwc-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0 14px;
}
.bwc-filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}
.bwc-filter-row::-webkit-scrollbar { display: none; }
.bwc-chip {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 12px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: color .12s, border-color .12s, background-color .12s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.bwc-chip:hover,
.bwc-chip:focus-visible { color: var(--text); border-color: var(--teal); outline: none; }
:target + * .bwc-chip, /* placeholder */
.bwc-wall-panel:target ~ .bwc-filters .bwc-chip { }
.bwc-chip.is-active {
  color: var(--text);
  border-color: var(--teal);
  background: rgba(0,212,170,0.10);
}

/* Hidden rows / groups (used by JS filter). Keeping in DOM rather than
   removing so toggling is fast. */
.bwc-group.is-hidden,
.bwc-m.is-hidden,
.bwc-deck-dot.is-hidden { display: none !important; }

/* Dots indicator — small dots below the deck, one per group card.
   Filled = active group in the viewport. */
.bwc-deck-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 4px;
  flex-wrap: wrap;
}
.bwc-deck-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  transition: background-color .12s, transform .12s;
}
.bwc-deck-dot:hover { background: var(--muted); }
.bwc-deck-dot.is-active { background: var(--teal); transform: scale(1.3); }

.bwc-deck-counter {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 1px;
  font-family: 'SF Mono', Menlo, Monaco, monospace;
}

.bwc-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bwc-group-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.bwc-group-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(192,163,64,0.08);
  border: 1px solid rgba(192,163,64,0.3);
  border-radius: 4px;
  padding: 3px 9px;
}

.bwc-group-teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  list-style: none;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 600;
  padding: 4px 0 6px;
  border-bottom: 1px dashed var(--border);
}
.bwc-group-teams li .flag { margin-right: 4px; }


/* === GROUP STANDINGS ========================================================
 * Replaces the flat 2-column team list with a P/GD/Pts grid. Qualifier
 * status uses BOTH a colour strip (left border) AND a glyph (Q / 3 / blank)
 * so it survives colour-blindness and greyscale print. Generated by
 * scratchpad/standings-render.mjs from match results — never hand-edit. */
.bwc-standings {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-bottom: 1px dashed var(--border);
}
.bwc-st-row,
.bwc-st-head {
  display: grid;
  grid-template-columns: 22px 22px minmax(0, 1fr) 26px 40px 30px 22px;
  gap: 6px;
  align-items: center;
  padding: 5px 6px;
  border-left: 3px solid transparent;
  border-radius: 4px;
  font-size: 0.82rem;
}
.bwc-st-head {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  padding: 2px 6px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 2px;
}
.bwc-st-row.is-q {
  border-left-color: var(--teal);
  background: rgba(0, 212, 170, 0.05);
}
.bwc-st-row.is-third {
  border-left-color: var(--amber);
  background: rgba(192, 163, 64, 0.05);
}
.bwc-st-rank {
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  font-size: 0.76rem;
}
.bwc-st-flag {
  text-align: center;
  line-height: 1;
}
.bwc-st-team {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}
.bwc-st-p,
.bwc-st-gd,
.bwc-st-pts {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-size: 0.78rem;
  color: var(--muted);
}
.bwc-st-pts {
  color: var(--text);
  font-weight: 800;
}
.bwc-st-q {
  text-align: center;
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: transparent;
}
.bwc-st-row.is-q .bwc-st-q { color: var(--teal); }
.bwc-st-row.is-third .bwc-st-q { color: var(--amber); }

.bwc-group-matches {
  list-style: none;
  counter-reset: m;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bwc-m {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: baseline;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.35;
  border: 1px solid transparent;
}

.bwc-m-teams {
  font-weight: 600;
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.1px;
}
.bwc-m-teams .flag { margin-right: 2px; }
.bwc-m-teams em { font-style: normal; color: var(--muted); font-weight: 500; margin: 0 4px; font-size: 0.75rem; }

.bwc-m-score {
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.bwc-m-winner {
  grid-column: 1 / -1;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 1px;
}

.bwc-m-verdict {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
}

/* .scored: football has been played, beer verdict not yet written.
   Distinguishes 'tournament reality is in' from 'we've also got an opinion'.
   Visually solid (no dashed border, full opacity, score visible) but no
   teal background tint or trophy stamp — those belong to .played. */
.bwc-m.scored {
  background: rgba(255,255,255,0.02);
  border-color: var(--border);
}

.bwc-m.played {
  background: rgba(0,212,170,0.04);
  border-color: rgba(0,212,170,0.25);
}

/* .predicted: kicks off later, we've called the beer winner pre-match.
   Amber palette to distinguish a pub-pick prediction from a settled
   verdict — readers shouldn't mistake a punt for a result. */
.bwc-m.predicted {
  background: rgba(192,163,64,0.04);
  border-color: rgba(192,163,64,0.3);
  border-style: dashed;
}
.bwc-m.predicted .bwc-m-winner { color: var(--amber); }
.bwc-m.predicted .bwc-m-score { color: var(--amber); }

.bwc-m.blank {
  /* Was 0.5 — dimmed the preview text below legibility. The dashed
     border + muted teams text already signal "not yet played"; opacity
     only needs to gently sit the row back. */
  opacity: 0.85;
  background: rgba(255,255,255,0.015);
  border-color: var(--border);
  border-style: dashed;
}
.bwc-m-status {
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* Pre-match preview line for upcoming fixtures. Sits where the verdict
   would sit on a played row, but italic + slightly more muted to signal
   "the question, not the answer". One bartender-voice sentence per
   match, framing the face-off without picking a winner. */
.bwc-m-preview {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}


/* === SQUAD TILES ============================================================
 * 48-country grid. Tiles in 1/2/3/4-column responsive layout. Group H2
 * heading above each row of four tiles to mirror the wall-chart grouping. */

.bwc-squads { display: flex; flex-direction: column; gap: 6px; }

/* When .bwc-squads is also .bwc-deck, switch to horizontal scroll-snap
   like the fixtures wall. Each .bwc-sq-card becomes a snap point. */
.bwc-squads.bwc-deck {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.bwc-squads.bwc-deck::-webkit-scrollbar { display: none; }
.bwc-squads.bwc-deck > .bwc-sq-card { scroll-snap-align: start; min-width: 0; }
@media (min-width: 720px)  { .bwc-squads.bwc-deck { grid-auto-columns: calc(50% - 7px); } }
@media (min-width: 1080px) { .bwc-squads.bwc-deck { grid-auto-columns: calc(33.333% - 9.33px); } }
@media print {
  .bwc-squads.bwc-deck { display: flex; flex-direction: column; overflow: visible; }
}

.bwc-sq-card {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bwc-sq-card .bwc-sq-group {
  margin: 0 0 6px;
  padding-bottom: 4px;
}
.bwc-sq-card .bwc-sq-row {
  /* Inside a card, the 4 tiles stack vertically so all 4 squads of
     the group are readable in one scroll-snap viewport on mobile. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}
@media (min-width: 1080px) {
  /* On 3-card desktop view each card is narrow — keep tiles stacked. */
  .bwc-sq-card .bwc-sq-row { display: flex; flex-direction: column; }
}

.bwc-sq-group {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--amber);
  margin: 22px 0 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

.bwc-sq-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 8px;
}
@media (min-width: 640px) { .bwc-sq-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .bwc-sq-row { grid-template-columns: repeat(4, 1fr); } }

.bwc-sq {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 96px;
}
/* Iran was previously gold-bordered as a v1 "centrepiece" signal; dropped
   because the signal was undecodable without a key. Editorial weight now
   lives entirely in the tile's note line. */

.bwc-sq-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.bwc-sq-h .flag { font-size: 1.15rem; }
.bwc-sq-h .name { font-weight: 800; color: var(--text); font-size: 0.96rem; letter-spacing: -0.2px; }

.bwc-sq-beers {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
  padding: 2px 0;
  flex: 1;
}

.bwc-sq-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  font-style: italic;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}


/* === STADIUM MAP — VENUE CARDS ==============================================
 * The 16 city cards on world-cup-stadium-beer-map.html. Each is an <a>
 * linking to /blog/world-cup-venues/<slug>.html. */

.bwc-venues {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .bwc-venues { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px)  { .bwc-venues { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .bwc-venues { grid-template-columns: repeat(4, 1fr); } }

.bwc-venue,
.bwc-venue:link,
.bwc-venue:visited {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.bwc-venue:hover { border-color: var(--teal); transform: translateY(-1px); }
.bwc-venue:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.bwc-venue .v-top { display: flex; gap: 8px; align-items: center; }
.bwc-venue .v-cc {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(192,163,64,0.4); border-radius: 3px; padding: 2px 6px;
}
.bwc-venue .v-city { font-weight: 800; font-size: 1.05rem; color: var(--text); letter-spacing: -0.2px; }
.bwc-venue:hover .v-city { color: var(--teal); }
.bwc-venue .v-stadium { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.bwc-venue .v-count { font-family: 'SF Mono', Menlo, Monaco, monospace; font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.3px; margin-left: 6px; }
.bwc-venue:hover .v-count { color: var(--teal); }


/* === STADIUM MAP — FILTER CHIPS =============================================
 * Three filter buttons above the venue grid (USA / Canada / Mexico). */

.bwc-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.bwc-filter-btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background-color .12s;
}
.bwc-filter-btn[aria-pressed="true"] { color: var(--text); border-color: var(--teal); background: rgba(0,212,170,0.08); }
.bwc-filter-btn:hover { color: var(--text); border-color: var(--teal); }


/* === STADIUM MAP — SCOUT CALLOUT ============================================
 * Single paragraph below the venue grid acknowledging the host-geography
 * caveat. One panel, no decoration. */

.bwc-scout-callout {
  margin: 22px 0 8px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}
.bwc-scout-callout p { margin: 0; color: inherit; }


/* === BWC v3: CSS-only state machines (fixtures page) ========================
 * Tabs / flips / filters are driven by radio + checkbox inputs and the
 * sibling selector (~). No JS required for any of them. Print fallbacks
 * force everything visible. Page must include the matching <input> elements
 * before the panels for ~ to reach them. */

/* --- View tabs (radio-hack: Wall Chart ↔ Knockout Bracket) ---------------- */
.bwc-view-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.bwc-view-nav {
  display: flex;
  gap: 8px;
  padding: 12px 0 0;
  margin: 0;
}
.bwc-view-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  margin-bottom: -1px;
  background: var(--card);
  transition: color .15s, background-color .15s;
}
.bwc-view-tab:hover { color: var(--text); }

/* Tab "active" state — strong contrast so it's obvious which view is on. */
#v-wall:checked    ~ * .bwc-view-tab[for="v-wall"],
#v-bracket:checked ~ * .bwc-view-tab[for="v-bracket"] {
  color: #06100c;
  background: var(--teal);
  border-color: var(--teal);
  border-bottom-color: var(--teal);
}

.bwc-view-panel { display: none; }
#v-wall:checked    ~ .bwc-view-panel[data-view="wall"],
#v-bracket:checked ~ .bwc-view-panel[data-view="bracket"] { display: block; }

/* CSS-off / no-JS: radios won't be styled invisible, but the :checked
   selectors still resolve, so the default-checked wall view shows. Print
   shows both panels stacked so nothing is hidden. */
@media print {
  .bwc-view-nav { display: none; }
  .bwc-view-panel { display: block !important; }
  .bwc-view-panel + .bwc-view-panel { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 18px; }
}

/* --- Status filter (radio-hack: All / Played / Upcoming) ----------------- */
.bwc-status-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.bwc-status-chips {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  padding: 2px 0;
  flex-wrap: wrap;
}
.bwc-status-chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background-color .12s;
}
.bwc-status-chip:hover { color: var(--text); border-color: var(--teal); }
#f-all:checked      ~ .bwc-status-chips .bwc-status-chip[for="f-all"],
#f-played:checked   ~ .bwc-status-chips .bwc-status-chip[for="f-played"],
#f-upcoming:checked ~ .bwc-status-chips .bwc-status-chip[for="f-upcoming"] {
  color: #06100c;
  border-color: var(--teal);
  background: var(--teal);
}
/* Hide matches that don't fit the filter. .bwc-m.played has the verdict
   stamp; everything else (.scored, .predicted, .blank, no-class) is treated
   as upcoming. */
#f-played:checked   ~ * .bwc-m:not(.played) { display: none; }
#f-upcoming:checked ~ * .bwc-m.played       { display: none; }
@media print {
  .bwc-status-chips { display: none; }
  .bwc-m { display: grid !important; }
}

/* --- Match flip card (checkbox-hack) ------------------------------------- */
/* Both faces share `grid-area: stack` so they occupy the same grid cell.
   The grid sizes to the LARGER of the two faces, so the card height stays
   constant between front and back — no jarring resize when flipped.
   `display: block` on .bwc-m--flip overrides the inherited grid layout
   from base .bwc-m. */
.bwc-m--flip {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 1200px;
  min-height: 88px;
}

/* When the group's match list contains flip cards, give each row a
   fixed height. Previous approach used grid-auto-rows: 1fr which
   sizes each row to the tallest card — that's fine when all cards
   fit their content, but on narrow-column mobile the tallest card
   (long team names wrapping) becomes ~200px and drags every card
   with it. Fixed height keeps the deck uniform at every viewport. */
.bwc-group-matches:has(.bwc-m--flip) {
  display: grid;
  grid-auto-rows: 88px;
}
.bwc-m-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.bwc-m-inner {
  display: grid;
  grid-template-areas: "stack";
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,.2,.2,1);
  height: 100%;
}
.bwc-m-toggle:checked + .bwc-m-inner { transform: rotateY(180deg); }
.bwc-m-face {
  grid-area: stack;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: baseline;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bwc-m-front {
  background: rgba(0,212,170,0.05);
  border-color: rgba(0,212,170,0.25);
}
.bwc-m-back {
  transform: rotateY(180deg);
  background: rgba(0,212,170,0.10);
  border-color: rgba(0,212,170,0.45);
  grid-template-columns: 1fr;
}
/* Tap hints on wall-chart flip cards — retired. Users discover the flip
   fast; the hint text was visual noise on the poster-grid layout. */
.bwc-m-tap,
.bwc-m-tap-back { display: none; }
.bwc-m-back .bwc-m-winner { margin-top: 0; }
.bwc-m-back .bwc-m-verdict {
  font-style: normal;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}
.bwc-m-toggle:focus-visible + .bwc-m-inner .bwc-m-face {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .bwc-m-inner { transition: none; }
}
/* Print + CSS-off: drop transforms entirely and place the back into normal
   flow under the front so both score AND verdict are visible together. */
@media print {
  .bwc-m--flip { perspective: none; }
  .bwc-m-inner {
    display: block;
    transform: none !important;
    transform-style: flat;
  }
  .bwc-m-back {
    transform: none;
    backface-visibility: visible;
    margin-top: 4px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* --- Knockout rounds (LEGACY — retained for the old .bwc-knockout /
 * .bwc-r32-pair markup; bracket panel now uses .bwc-bracket + .bwc-slot
 * below. These rules are inert on the fixtures page but kept in case
 * any other bracket-adjacent page still references them.) -------------- */
.bwc-knockout {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
@media (min-width: 640px) {
  .bwc-knockout { grid-template-columns: 1fr 1fr; }
}


/* === MIRRORED BRACKET (fixtures page) ======================================
 * Nine-column poster shape on desktop:
 *   R32-L | R16-L | QF-L | SF-L | FINAL | SF-R | QF-R | R16-R | R32-R
 * Column ORDER mirrors around the FINAL; card contents stay L→R inside
 * every slot (teams read left-to-right on both sides — no glyph flipping).
 *
 * Vertical scaling: 8 base rows. R32 slots span 1 row (8 per side); R16
 * span 2 (4 per side); QF span 4 (2 per side); SF and FINAL span 8.
 * That aligns each winner's slot vertically between its two feeders.
 *
 * Mobile fallback (<900px): five-column single-side ladder. R32 → R16 →
 * QF → SF → FINAL, horizontal scroll. Both halves collapse into the same
 * round column so all 16 R32s stack in column 1, etc.
 * ----------------------------------------------------------------------- */

.bwc-bracket-caption {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  margin: 0 0 12px;
  text-align: center;
}

.bwc-bracket {
  position: relative;
  display: grid;
  grid-auto-flow: dense;
  gap: 6px 4px;
  margin: 0 auto;
  max-width: 100%;
}

/* Column headers (row 1). Muted grey, thin underline — quiet enough to
   sit as scaffolding rather than shout. Only FINAL breaks colour. */
.bwc-bracket-hd {
  grid-row: 1;
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--border);
  align-self: end;
}
.bwc-bracket-hd[data-round="FINAL"] {
  color: var(--teal);
  border-bottom-color: rgba(0, 212, 170, 0.35);
}

/* Slot base — flip-card + non-flip variants share these looks.
 * Position: relative so inner + faces below can absolute-position and
 * fill the grid cell exactly. Grid rows control the height (see the
 * grid-template-rows on .bwc-bracket); slots never grow to content. */
.bwc-slot {
  position: relative;
  perspective: 900px;
}
.bwc-slot-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.bwc-slot-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,.2,.2,1);
}
.bwc-slot-toggle:checked + .bwc-slot-inner { transform: rotateY(180deg); }
/* Faces fill the slot exactly — position: absolute + inset: 0 so the
   grid cell (fixed 56px) is the source of truth for cell size. Uniform
   boxes across the whole bracket, regardless of content.
   Borders are 1.5px at rgba(255,255,255,0.25) — bright enough to define
   each cell against the dark background without shouting. Previous 1px
   at .08 was invisible per Paul's review. */
.bwc-slot-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px 7px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.bwc-slot-back { transform: rotateY(180deg); }
/* Played R32 slots: teal border + mint tint. Back gets stronger tint. */
.bwc-slot--played .bwc-slot-front {
  border-color: var(--teal);
  background: rgba(0, 212, 170, 0.10);
}
.bwc-slot--played .bwc-slot-back {
  background: rgba(0, 212, 170, 0.20);
  border-color: var(--teal);
}
.bwc-slot--previewable .bwc-slot-back { background: rgba(255, 255, 255, 0.06); }

/* Non-flip placeholder slots (R16/QF/SF/FINAL awaiting-feeder cards) —
   render the slot itself as the outlined rectangle. Same fixed cell size,
   same solid stroke as everything else — the played/unplayed distinction
   is carried by border colour, not by dashed vs solid style. */
.bwc-slot--blank:not(.bwc-slot--previewable) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px 7px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  cursor: default;
}

.bwc-slot-teams {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  letter-spacing: 0.02em;
}
.bwc-slot-teams em { font-style: normal; color: var(--muted); font-weight: 500; margin: 0 3px; font-size: 0.66rem; }

/* Kill flag emojis in the bracket — 1desk uses codes only, and the flag
   glyphs push the team codes off in ~140px cells. Group standings and
   wall-chart match rows keep flags. */
.bwc-bracket .flag { display: none; }

/* Match label (M1, R16-1, QF 1, etc.) — small monospace tag at the top
   of each cell, muted so it's scaffolding not decoration. Mirrors 1desk
   style. */
.bwc-slot-num {
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 2px;
}
.bwc-slot--played .bwc-slot-num { color: rgba(0, 212, 170, 0.7); }

/* Compact feeder lines in placeholder slots — stack "W R32-1" / "W R32-2"
   vertically instead of the earlier verbose "Winner ... v Winner ..." prose. */
.bwc-slot-feed {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.bwc-slot-score {
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--text);
  letter-spacing: 0.5px;
}
.bwc-slot-status,
.bwc-slot-winner {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bwc-slot--played .bwc-slot-winner { color: var(--teal); }

/* Verdicts and previews truncate to 3 lines to preserve uniform cell
   sizing on the back face. Full editorial content still lives in the
   wall-chart flip cards where R32 group-stage matches have room. */
.bwc-slot-verdict,
.bwc-slot-preview {
  font-size: 0.62rem;
  line-height: 1.32;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bwc-slot-preview {
  color: var(--muted);
  font-style: italic;
}

/* "Read full ›" chip on the back face — the escape hatch for the
   3-line clamp on knockout verdicts. Injected by bwc.js so slot
   markup stays clean. Positioned absolutely so it can't be pushed
   off by the verdict content, styled as a visible pill so it reads
   as a control at small sizes. Whole back-face is also clickable as
   a backup affordance — see bwc.js wireSlotOverlay. */
.bwc-slot-back { cursor: pointer; }
.bwc-slot-readmore {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 7px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--teal);
  background: rgba(0, 212, 170, 0.14);
  border: 1px solid rgba(0, 212, 170, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.bwc-slot-readmore:hover,
.bwc-slot-readmore:focus-visible {
  background: rgba(0, 212, 170, 0.28);
  color: #ffffff;
  outline: none;
}

/* Full-verdict overlay — one-per-page modal, populated by JS from
   whichever slot's chip was tapped. Backdrop click / close / Esc all
   dismiss. z-index sits above the sticky page nav. */
.bwc-slot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 12, 0.86);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: bwc-fadein 0.16s ease-out;
}
.bwc-slot-overlay[data-open="true"] { display: flex; }
@keyframes bwc-fadein { from { opacity: 0; } to { opacity: 1; } }

.bwc-slot-overlay-card {
  position: relative;
  background: #0e1a1c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 28px 24px 24px;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.bwc-slot-overlay-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.bwc-slot-overlay-close:hover,
.bwc-slot-overlay-close:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.bwc-slot-overlay-match {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.bwc-slot-overlay-winner {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.bwc-slot-overlay-verdict {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

/* Trophy accent in the centre of the bracket. Positioned via grid area
   so it sits behind the FINAL slot for a subtle "champion" watermark. */
.bwc-bracket-trophy {
  grid-row: 5 / span 4;
  align-self: center;
  justify-self: center;
  font-size: 2.6rem;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bwc-slot-inner { transition: none; }
}

/* ─── Ladder layout (single-side L→R, 5 columns) — unified desktop + mobile
 * Paul revised the mirror brief after seeing the 1desk chart: the ladder
 * gets the same "wallchart" identity with half the visual surface. Same
 * shape at all viewport widths; on narrow screens the container
 * horizontally scrolls. Base rows scaled to R32 depth (16), with R16 span
 * 2, QF span 4, SF span 8, FINAL span 16 so each winner slot sits centred
 * between its two feeders. */
.bwc-bracket {
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  grid-template-rows: auto repeat(16, 56px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.bwc-slot[data-round="R32"]  { grid-column: 1; grid-row: span 1; }
.bwc-slot[data-round="R16"]  { grid-column: 2; grid-row: span 2; }
.bwc-slot[data-round="QF"]   { grid-column: 3; grid-row: span 4; }
.bwc-slot[data-round="SF"]   { grid-column: 4; grid-row: span 8; }
.bwc-slot[data-round="FINAL"] { grid-column: 5; grid-row: span 16; }
.bwc-bracket-hd[data-round="R32"]   { grid-column: 1; }
.bwc-bracket-hd[data-round="R16"]   { grid-column: 2; }
.bwc-bracket-hd[data-round="QF"]    { grid-column: 3; }
.bwc-bracket-hd[data-round="SF"]    { grid-column: 4; }
.bwc-bracket-hd[data-round="FINAL"] { grid-column: 5; }

/* Right-side duplicate headers hidden — one per round is enough now that
   the mirror is gone. */
.bwc-bracket-hd[data-side="right"] { display: none; }

/* Watermark trophy retired; trophy now sits INSIDE the FINAL cell. */
.bwc-bracket-trophy { display: none; }

/* Trophy inside the FINAL cell — via ::before so we don't need to touch
   the render script. */
.bwc-slot[data-round="FINAL"] .bwc-slot-face::before {
  content: "🏆";
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0.9;
}

/* FINAL cell: bold teal outline + soft glow so the champion slot reads
   as the destination of the whole bracket. */
.bwc-slot[data-round="FINAL"] .bwc-slot-face,
.bwc-slot[data-round="FINAL"].bwc-slot--blank:not(.bwc-slot--previewable) {
  border-color: var(--teal);
  border-width: 2px;
  border-style: solid;
  background: rgba(0, 212, 170, 0.06);
  box-shadow: 0 6px 20px -14px rgba(0, 212, 170, 0.6);
}
.bwc-slot[data-round="FINAL"] .bwc-slot-teams { font-size: 0.82rem; }

/* Print: drop the flip transforms so the back is visible next to the front. */
@media print {
  .bwc-slot-inner { transform: none !important; }
  .bwc-slot-back  { transform: none; }
}


/* === FOLLOW-A-TEAM (JS-only progressive enhancement) =======================
 * Click a standings row to follow that team. Non-followed matches and
 * standings rows dim; the followed team's journey strip drops in below
 * the sticky tab bar.
 *
 * Pure PE: every score, verdict, and standings cell stays visible without
 * JS. CSS rules below only kick in when <html data-follow="XXX"> is set
 * by the script. JS-off = base layout, no dimming, no journey strip. */

/* Dim non-followed matches + standings rows. */
html[data-follow] .bwc-m,
html[data-follow] .bwc-st-row {
  transition: opacity .25s, filter .25s;
  opacity: 0.32;
  filter: saturate(0.6);
}
/* Re-light the followed team's rows. data-teams holds space-separated
   codes; the ~= attribute selector matches whole words. */
html[data-follow="MEX"] .bwc-m[data-teams~="MEX"], html[data-follow="MEX"] .bwc-st-row[data-team="MEX"],
html[data-follow="RSA"] .bwc-m[data-teams~="RSA"], html[data-follow="RSA"] .bwc-st-row[data-team="RSA"],
html[data-follow="KOR"] .bwc-m[data-teams~="KOR"], html[data-follow="KOR"] .bwc-st-row[data-team="KOR"],
html[data-follow="CZE"] .bwc-m[data-teams~="CZE"], html[data-follow="CZE"] .bwc-st-row[data-team="CZE"],
html[data-follow="CAN"] .bwc-m[data-teams~="CAN"], html[data-follow="CAN"] .bwc-st-row[data-team="CAN"],
html[data-follow="BIH"] .bwc-m[data-teams~="BIH"], html[data-follow="BIH"] .bwc-st-row[data-team="BIH"],
html[data-follow="QAT"] .bwc-m[data-teams~="QAT"], html[data-follow="QAT"] .bwc-st-row[data-team="QAT"],
html[data-follow="SUI"] .bwc-m[data-teams~="SUI"], html[data-follow="SUI"] .bwc-st-row[data-team="SUI"],
html[data-follow="BRA"] .bwc-m[data-teams~="BRA"], html[data-follow="BRA"] .bwc-st-row[data-team="BRA"],
html[data-follow="MAR"] .bwc-m[data-teams~="MAR"], html[data-follow="MAR"] .bwc-st-row[data-team="MAR"],
html[data-follow="HAI"] .bwc-m[data-teams~="HAI"], html[data-follow="HAI"] .bwc-st-row[data-team="HAI"],
html[data-follow="SCO"] .bwc-m[data-teams~="SCO"], html[data-follow="SCO"] .bwc-st-row[data-team="SCO"],
html[data-follow="USA"] .bwc-m[data-teams~="USA"], html[data-follow="USA"] .bwc-st-row[data-team="USA"],
html[data-follow="PAR"] .bwc-m[data-teams~="PAR"], html[data-follow="PAR"] .bwc-st-row[data-team="PAR"],
html[data-follow="AUS"] .bwc-m[data-teams~="AUS"], html[data-follow="AUS"] .bwc-st-row[data-team="AUS"],
html[data-follow="TUR"] .bwc-m[data-teams~="TUR"], html[data-follow="TUR"] .bwc-st-row[data-team="TUR"],
html[data-follow="GER"] .bwc-m[data-teams~="GER"], html[data-follow="GER"] .bwc-st-row[data-team="GER"],
html[data-follow="CUW"] .bwc-m[data-teams~="CUW"], html[data-follow="CUW"] .bwc-st-row[data-team="CUW"],
html[data-follow="CIV"] .bwc-m[data-teams~="CIV"], html[data-follow="CIV"] .bwc-st-row[data-team="CIV"],
html[data-follow="ECU"] .bwc-m[data-teams~="ECU"], html[data-follow="ECU"] .bwc-st-row[data-team="ECU"],
html[data-follow="NED"] .bwc-m[data-teams~="NED"], html[data-follow="NED"] .bwc-st-row[data-team="NED"],
html[data-follow="JPN"] .bwc-m[data-teams~="JPN"], html[data-follow="JPN"] .bwc-st-row[data-team="JPN"],
html[data-follow="SWE"] .bwc-m[data-teams~="SWE"], html[data-follow="SWE"] .bwc-st-row[data-team="SWE"],
html[data-follow="CPV"] .bwc-m[data-teams~="CPV"], html[data-follow="CPV"] .bwc-st-row[data-team="CPV"],
html[data-follow="BEL"] .bwc-m[data-teams~="BEL"], html[data-follow="BEL"] .bwc-st-row[data-team="BEL"],
html[data-follow="IRN"] .bwc-m[data-teams~="IRN"], html[data-follow="IRN"] .bwc-st-row[data-team="IRN"],
html[data-follow="SEN"] .bwc-m[data-teams~="SEN"], html[data-follow="SEN"] .bwc-st-row[data-team="SEN"],
html[data-follow="EGY"] .bwc-m[data-teams~="EGY"], html[data-follow="EGY"] .bwc-st-row[data-team="EGY"],
html[data-follow="ESP"] .bwc-m[data-teams~="ESP"], html[data-follow="ESP"] .bwc-st-row[data-team="ESP"],
html[data-follow="KSA"] .bwc-m[data-teams~="KSA"], html[data-follow="KSA"] .bwc-st-row[data-team="KSA"],
html[data-follow="URU"] .bwc-m[data-teams~="URU"], html[data-follow="URU"] .bwc-st-row[data-team="URU"],
html[data-follow="TUN"] .bwc-m[data-teams~="TUN"], html[data-follow="TUN"] .bwc-st-row[data-team="TUN"],
html[data-follow="FRA"] .bwc-m[data-teams~="FRA"], html[data-follow="FRA"] .bwc-st-row[data-team="FRA"],
html[data-follow="NZL"] .bwc-m[data-teams~="NZL"], html[data-follow="NZL"] .bwc-st-row[data-team="NZL"],
html[data-follow="UZB"] .bwc-m[data-teams~="UZB"], html[data-follow="UZB"] .bwc-st-row[data-team="UZB"],
html[data-follow="PAN"] .bwc-m[data-teams~="PAN"], html[data-follow="PAN"] .bwc-st-row[data-team="PAN"],
html[data-follow="AUT"] .bwc-m[data-teams~="AUT"], html[data-follow="AUT"] .bwc-st-row[data-team="AUT"],
html[data-follow="ARG"] .bwc-m[data-teams~="ARG"], html[data-follow="ARG"] .bwc-st-row[data-team="ARG"],
html[data-follow="ALG"] .bwc-m[data-teams~="ALG"], html[data-follow="ALG"] .bwc-st-row[data-team="ALG"],
html[data-follow="COD"] .bwc-m[data-teams~="COD"], html[data-follow="COD"] .bwc-st-row[data-team="COD"],
html[data-follow="POR"] .bwc-m[data-teams~="POR"], html[data-follow="POR"] .bwc-st-row[data-team="POR"],
html[data-follow="COL"] .bwc-m[data-teams~="COL"], html[data-follow="COL"] .bwc-st-row[data-team="COL"],
html[data-follow="GHA"] .bwc-m[data-teams~="GHA"], html[data-follow="GHA"] .bwc-st-row[data-team="GHA"],
html[data-follow="ITA"] .bwc-m[data-teams~="ITA"], html[data-follow="ITA"] .bwc-st-row[data-team="ITA"],
html[data-follow="CRO"] .bwc-m[data-teams~="CRO"], html[data-follow="CRO"] .bwc-st-row[data-team="CRO"],
html[data-follow="ENG"] .bwc-m[data-teams~="ENG"], html[data-follow="ENG"] .bwc-st-row[data-team="ENG"],
html[data-follow="NOR"] .bwc-m[data-teams~="NOR"], html[data-follow="NOR"] .bwc-st-row[data-team="NOR"],
html[data-follow="JOR"] .bwc-m[data-teams~="JOR"], html[data-follow="JOR"] .bwc-st-row[data-team="JOR"],
html[data-follow="IRQ"] .bwc-m[data-teams~="IRQ"], html[data-follow="IRQ"] .bwc-st-row[data-team="IRQ"] {
  opacity: 1;
  filter: none;
}

/* Clickable affordance on standings rows (only when JS has wired them up). */
.bwc-st-row[data-team] { cursor: pointer; }
.bwc-st-row[data-team]:hover { background: rgba(0, 212, 170, 0.08); }
.bwc-st-row[data-team]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

/* The follow strip itself — sits in flow below the sticky stage. */
.bwc-follow {
  background: linear-gradient(180deg, rgba(0, 212, 170, 0.07), rgba(0, 212, 170, 0.02));
  border-bottom: 1px solid rgba(0, 212, 170, 0.25);
  margin: 0 -24px;
  padding: 0 24px;
}
.bwc-follow:empty { display: none; }
.bwc-follow__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bwc-follow__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bwc-follow__flag { font-size: 1.8rem; line-height: 1; }
.bwc-follow__id { display: flex; flex-direction: column; gap: 2px; }
.bwc-follow__id strong {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.bwc-follow__summary {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bwc-follow__clear {
  margin-left: auto;
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.bwc-follow__clear:hover { border-color: var(--teal); color: var(--teal); }

.bwc-follow__journey {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.bwc-follow__journey::-webkit-scrollbar { display: none; }

.bwc-follow__game {
  flex: 0 0 auto;
  min-width: 130px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 6px 8px;
  padding: 7px 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
}
.bwc-follow__game.is-cellar-win {
  border-color: rgba(0, 212, 170, 0.35);
  background: rgba(0, 212, 170, 0.05);
}
.bwc-follow__day {
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.bwc-follow__opp { font-weight: 700; color: var(--text); }
.bwc-follow__score {
  font-family: 'SF Mono', Menlo, Monaco, monospace;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bwc-follow__cellar { font-size: 0.95rem; line-height: 1; }

@media print {
  /* No follow UI in print, no dimming. */
  .bwc-follow { display: none !important; }
  html[data-follow] .bwc-m,
  html[data-follow] .bwc-st-row {
    opacity: 1 !important;
    filter: none !important;
  }
}