/* Shared styles for the "Round of 32 routing" unified component
   (football/wc-r32-routing.js). Extracted 2026-07-19 from three near-identical
   page-embedded <style> blocks (world-cup-simulator.qmd, world-cup-group.qmd,
   world-cup-round3.qmd — the simulator/round3 copies were byte-identical; group's
   differed by two lines, kept as a page-local override there instead of here):
   .wcr32u-wrap's top margin (0.7rem vs 1.4rem) and an extra .wcr32u-advance-line
   rule group.qmd alone uses. Warm cream cards + green accent; OPEN/LOCKED pill
   colours mirror the round3/sim route cards (locked = green, open = muted). */
.wcr32u-wrap { margin:1.4rem 0 1.8rem; }
.wcr32u-head { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.wcr32u-head h2 { margin:0; }
.wcr32u-sub { font-size:0.84rem; margin:0.3rem 0 0.6rem; max-width:106ch; }
.wcr32u-pills { display:flex; gap:0.4rem; flex-wrap:wrap; margin:0.2rem 0 0.7rem; }
.wcr32u-pill { font-family:var(--font-family-data, monospace); font-size:0.72rem; padding:0.25rem 0.75rem; border-radius:999px; cursor:pointer; border:1px solid var(--site-surface-border); background:transparent; color:var(--site-body-color); transition:background 0.12s, color 0.12s; }
.wcr32u-pill:hover { border-color:#5a9a7a; color:#5a9a7a; }
.wcr32u-pill.is-on { background:#5aa07d; color:#0d0f10; font-weight:700; border-color:#5aa07d; }
/* The three ALL-view route cards */
.wcr32u-routes { display:flex; flex-direction:column; gap:0.35rem; }
.wcr32u-route { display:flex; align-items:center; gap:0.55rem; flex-wrap:wrap; border:1px solid var(--site-surface-border); border-radius:7px; padding:0.5rem 0.75rem; background:rgba(var(--site-overlay-rgb),0.025); font-size:0.84rem; }
.wcr32u-finish { font-weight:700; }
.wcr32u-who .wc-team-link { font-weight:700; }
.wcr32u-flag { height:14px; width:auto; border-radius:2px; vertical-align:-2px; margin-right:0.25rem; }
.wcr32u-arrow { opacity:0.5; font-weight:700; }
.wcr32u-face { flex:1 1 auto; min-width:10ch; }
.wcr32u-vary { opacity:0.55; font-size:0.78rem; }
.wcr32u-state { font-family:var(--font-family-data, monospace); font-size:0.68rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:0.1rem 0.45rem; border-radius:4px; margin-left:auto; }
.wcr32u-state.is-locked { background:rgba(90,160,125,0.92); color:#0c1410; }
.wcr32u-state.is-open { background:rgba(var(--site-overlay-rgb),0.12); color:var(--site-muted-color); border:1px solid var(--site-surface-border); }
.wcr32u-hoverable { cursor:help; }
.wcr32u-face.wcr32u-hoverable, .wcr32u-finish.wcr32u-hoverable { border-bottom:1px dotted rgba(var(--site-overlay-rgb),0.4); }
/* Per-finish view: who-line + opponent odds table */
.wcr32u-who-line { font-size:0.82rem; margin:0.4rem 0 0.7rem; padding:0.35rem 0.6rem; border-left:2px solid rgba(90,160,125,0.5); background:rgba(var(--site-overlay-rgb),0.04); border-radius:0 5px 5px 0; line-height:1.5; }
.wcr32u-who-line b { color:#5a9a7a; }
.wcr32u-who-line img, .wcr32u-who-line .wc-flag { height:14px; vertical-align:-2px; margin:0 0.25rem; border-radius:2px; }
.wcr32u-table-scroll { margin:0.2rem 0 0.4rem; }
.wcr32u-table { border-collapse:collapse; font-size:0.84rem; max-width:480px; min-width:100%; }
.wcr32u-table th { font-family:var(--font-family-data, monospace); font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em; opacity:0.6; padding:0.3rem 0.5rem; text-align:right; border-bottom:1px solid rgba(var(--site-overlay-rgb),0.15); white-space:nowrap; }
.wcr32u-table th.l, .wcr32u-table td.l { text-align:left; }
.wcr32u-table td { padding:0.32rem 0.5rem; text-align:right; font-family:var(--font-family-data, monospace); font-size:0.8rem; border-bottom:1px dashed rgba(var(--site-overlay-rgb),0.1); white-space:nowrap; }
.wcr32u-table tbody tr:last-child td { border-bottom:none; }
.wcr32u-table td.l b { font-family:inherit; }
.wcr32u-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:0.45rem; vertical-align:middle; }
.wcr32u-slot-sub { opacity:0.55; font-size:0.82em; }
.wcr32u-pct-hl { font-family:var(--font-family-data, monospace); font-weight:700; color:#5a9a7a; background:rgba(90,160,125,0.14); padding:0.02em 0.4em; border-radius:4px; white-space:nowrap; }
.wcr32u-src { font-size:0.72rem; opacity:0.5; margin-top:0.8rem; }
/* Shared styled tooltip — override the base centred/above transform so the
   manual absolute positioning + edge flip is exact and never reflows. */
.wcr32u-tip { transform:none; white-space:nowrap; max-width:320px; }
.wcr32u-tip .wcr32u-tip-flag { height:13px; width:auto; border-radius:2px; vertical-align:-2px; margin-right:0.35rem; }
.wcr32u-tip .ft-row { gap:18px; }
@media (prefers-reduced-motion: reduce) { .wcr32u-pill { transition:none; } }