:root {
  --bg: #0d0f13;
  --panel: #181b22;
  --panel-2: #1f242d;
  --line: #2b313c;
  --text: #e7eaf0;
  --muted: #9aa3b2;
  --accent: #38bdf8;
  --accent-2: #818cf8;
  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --radius: 10px;
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
/* A faint cyan glow behind the top of the page for a little depth. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 480px at 50% -8%, rgba(56, 189, 248, .07),
                    transparent 70%);
}

a { color: var(--accent); text-decoration: none; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
}
.brand {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  font-weight: 700; font-size: 1.1rem; white-space: nowrap;
  letter-spacing: -.01em;
}
.brand-mark { width: 1.25rem; height: 1.25rem; flex: none; }
/* League name shown beside the brand on /l/<slug>/* pages, so you always
   know which pool you are looking at; truncates on narrow screens. */
.crumb {
  color: var(--text); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 48vw;
}
.crumb::before {
  content: "\203A"; color: var(--muted); font-weight: 400;
  margin-right: .55rem;
}
.topbar-right { display: flex; align-items: center; gap: .8rem; }
.who { color: var(--muted); }
.inline { display: inline; margin: 0; }
button.link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font: inherit; padding: 0;
}

/* Hamburger: hidden on desktop, shown below the nav breakpoint. The checkbox
   is the pure-CSS toggle state; the label is the visible three-bar button
   that morphs into an X when open. */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 9px; cursor: pointer;
  border-radius: 8px; flex: none;
}
.nav-burger:hover { background: var(--panel-2); }
.nav-burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--text); transition: transform .2s ease, opacity .2s ease;
}

main { max-width: 1100px; margin: 0 auto; padding: 1rem; }

/* Mobile: collapse the nav into a drop-down drawer under the top bar. */
@media (max-width: 760px) {
  .nav-burger { display: flex; }
  /* …but not when there is no menu to open (e.g. the landing page). */
  .topbar:has(.topbar-right:empty) .nav-burger { display: none; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .topbar .topbar-right {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .25s ease;
  }
  .nav-toggle:checked ~ .topbar-right {
    max-height: 80vh; overflow-y: auto; visibility: visible;
  }
  .topbar .nav {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }
  .topbar .nav a {
    padding: .85rem 1.1rem; border-top: 1px solid var(--line);
    text-align: left;
  }
  .topbar .topbar-right > .who {
    padding: .85rem 1.1rem; border-top: 1px solid var(--line);
  }
  .topbar .topbar-right > .inline { padding: .6rem 1.1rem .85rem; }
}

/* Landing */
.landing { max-width: 560px; margin: 2.5rem auto; padding: 0 .25rem; }
.landing-hero { text-align: center; margin-bottom: 1.8rem; }
.landing-hero h1 {
  font-size: clamp(1.7rem, 6vw, 2.5rem); line-height: 1.12; margin: 0;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.landing-hero .tagline {
  color: var(--muted); margin: .9rem auto 0; max-width: 46ch;
}
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.identify { display: flex; flex-direction: column; gap: .8rem; }
.identify.card { padding: 1.3rem 1.4rem; }
.identify h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.identify label { display: flex; flex-direction: column; gap: .25rem; color: var(--muted); }
.identify input, .goal {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: .55rem;
}
.identify input:focus, .goal:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}
.identify button, .lock-btn {
  background: var(--accent); color: #04212e; border: none; border-radius: 6px;
  padding: .65rem 1rem; font-weight: 600; cursor: pointer;
}
.identify button:hover, .lock-btn:hover { filter: brightness(1.06); }
.fineprint { color: var(--muted); font-size: .8rem; margin: .1rem 0 0; }
.error { color: var(--bad); }

/* Landing: how-it-works */
.how {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .9rem;
}
.how li { display: flex; gap: .8rem; align-items: flex-start; }
.how-step {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  color: var(--accent); background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .35);
}
.how strong { display: block; }
.how p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }

/* Reusable button (links styled as buttons) */
.btn {
  display: inline-block; padding: .5rem .95rem; border-radius: 8px;
  font-weight: 600; font-size: .9rem; cursor: pointer; line-height: 1.2;
  background: var(--accent); color: #04212e; border: 1px solid var(--accent);
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: rgba(56, 189, 248, .1); filter: none; }

/* League welcome (the invite front door) */
.invite-kicker {
  margin: 0 0 .35rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
}
.invite-deadline {
  margin: .8rem 0 0; color: var(--accent); font-size: .9rem; font-weight: 600;
}
.invite-actions {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  margin: 1.4rem 0 0;
}

/* Home: your leagues */
.home h1 { margin-bottom: 1rem; }
.league-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.league-card {
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem;
  transition: border-color .15s ease, transform .15s ease;
}
.league-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.league-name { margin: 0; font-size: 1.15rem; }
.league-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.empty-state { padding: 1.4rem 1.5rem; max-width: 560px; }
.empty-title { margin: 0 0 .3rem; font-weight: 600; font-size: 1.05rem; }
.home-links {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.6rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}

/* Lock panel */
.lock-panel {
  position: sticky; top: 52px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .8rem 1rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.progress strong { color: var(--accent); }
.locked-msg { margin: 0; }
.deadline {
  margin: 0; font-size: .85rem; font-weight: 600;
  color: var(--muted); width: 100%;
}
.deadline.past { color: var(--bad); }

/* Feeling-lucky autofill */
.lucky-bar { margin-bottom: 1rem; }
.lucky-bar form { display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; }
.lucky-btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .5rem .9rem; font-weight: 600; cursor: pointer;
}
.lucky-btn:hover { border-color: var(--accent); color: var(--accent); }
.lucky-hint { color: var(--muted); font-size: .8rem; }
.not-ready-head { color: var(--warn); font-weight: 600; }
.issues { margin: .3rem 0 0; padding-left: 1.1rem; max-height: 7rem; overflow-y: auto; }
.issues li { color: var(--warn); }

/* Standings */
.standings-panel {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem; margin: 1rem 0 1.5rem;
}
@media (max-width: 760px) {
  .standings-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* One column on phones so the table gets the full width: team names stop
   wrapping and the GF column no longer clips off the right edge. */
@media (max-width: 560px) {
  .standings-panel { grid-template-columns: 1fr; }
}
table.standings {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  font-size: .82rem;
}
table.standings caption {
  text-align: left; font-weight: 600; padding: .35rem .5rem; background: var(--panel-2);
}
table.standings.decided caption { color: var(--good); }
.standings th, .standings td { padding: .25rem .5rem; text-align: right; }
.standings th:nth-child(2), .standings td.team { text-align: left; }
.standings tr.adv td { color: var(--good); }          /* top two qualify */
.standings tr.adv.third td { color: var(--warn); }    /* best-third qualifier */

/* Groups + matches */
.groups {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: .8rem;
}
.group-card, .ko-round {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .8rem;
}
.group-card h3, .ko-round h3 { margin: .2rem 0 .5rem; }
.count { font-size: .75rem; font-weight: 500; color: var(--muted);
  margin-left: .35rem; }
.count.all-done { color: var(--good); }
.legend { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  color: var(--muted); font-size: .8rem; margin: .2rem 0 .8rem; }
/* Prose variant: a legend that is a running sentence, not a swatch-key row
   (flex would break each inline fragment onto its own line on phones). */
.legend.prose { display: block; line-height: 1.55; }
.legend .swatch { display: inline-block; width: .8rem; height: .8rem;
  border-radius: 3px; vertical-align: middle; margin-right: .35rem;
  border: 1px solid var(--line); }
.legend .swatch.todo { background: rgba(251, 191, 36, .25);
  border-color: rgba(251, 191, 36, .55); }
.legend .swatch.bad { background: rgba(248, 113, 113, .3);
  border-color: var(--bad); }
.legend .swatch.done { background: transparent; border-color: var(--good); }
.match-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr 2.6rem .6rem 2.6rem 1fr;
  align-items: center; gap: .3rem; margin: 0; padding: .15rem 0;
}
.match-row.ko { grid-template-columns: 1.4rem 1fr 2.6rem .6rem 2.6rem 1fr auto; }
.num { color: var(--muted); font-size: .75rem; }
.team { font-size: .85rem; }
.team.away { text-align: right; }
.flag { width: 18px; height: 13px; vertical-align: -2px; margin-right: .4rem;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  object-fit: cover; }
.flag-blank { display: inline-block; width: 18px; height: 13px;
  vertical-align: -2px; margin-right: .4rem; border-radius: 2px;
  background: var(--panel-2); box-shadow: 0 0 0 1px var(--line); }
.match-row.ko .team.away { text-align: left; }
.goal { width: 100%; text-align: center; padding: .3rem; }
/* Live fill-state cues (update as you type, no re-render needed):
   empty = still to fill (amber), out of 0-20 = invalid (red),
   filled & valid = done (green). */
.goal:placeholder-shown {
  background: rgba(251, 191, 36, .10);
  border-color: rgba(251, 191, 36, .55);
}
.goal:not(:placeholder-shown):valid { border-color: var(--good); }
.goal:invalid {
  background: rgba(248, 113, 113, .18);
  border-color: var(--bad);
}
.dash { text-align: center; color: var(--muted); }
.match-row.entered .num { color: var(--accent); }
.adv-pick { display: flex; align-items: center; gap: .25rem; cursor: pointer; }
.adv-hint { color: var(--warn); font-size: .75rem; }
.needs-advancer { outline: 1px solid var(--warn); border-radius: 6px; }
.locked-note { color: var(--muted); font-size: .75rem; text-align: center; }
.is-locked-slot { opacity: .8; }
/* A late-entry sheet's already-played matches: pinned at 0-0, not editable. */
.match-row.pinned { opacity: .6; }
.match-row.pinned .goal { background: var(--panel-2); border-color: var(--line); }
.member-actions .hours { width: 3.5rem; text-align: center; padding: .15rem; }

/* Knockout */
.bracket-panel { margin-top: 1.5rem; }
.bracket-panel .ko-round { margin-bottom: .8rem; }
.champion { color: var(--good); font-size: 1.05rem; }

.sheet.is-locked input, .sheet.is-locked button { pointer-events: none; }

/* Read-only centered wall-chart bracket. Full-bleed to the *visible* width
   (100vw minus the scrollbar width in --sbw, set by a small script in
   base.html) so the wide chart can use the whole window without adding a
   page scrollbar. When it is still wider than that (narrow screens), the
   panel scrolls; the row's auto side-margins centre it when it fits and go
   flush-left when it overflows so the far edge stays reachable. */
.bracket-view {
  margin: 1.5rem 0;
  width: calc(100vw - var(--sbw, 0px));
  position: relative;
  left: 50%;
  margin-left: calc(-50vw + var(--sbw, 0px) / 2);
  padding: 0 1rem;
}
.wallchart { display: flex; overflow-x: auto; padding-bottom: .5rem; }
.wallchart-row { display: flex; align-items: center; margin-inline: auto; }
.wc-side, .wc-final { display: flex; align-items: center; }

/* one tree node: its two feeders (.bn-kids) and its own box (.bn-self) */
.bn { display: flex; align-items: center; }
.bn-kids { display: flex; flex-direction: column; justify-content: center;
  position: relative; }
.bn-self { position: relative; padding: .25rem .62rem; }

.bmatch { width: 132px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; font-size: .72rem; }
.bmatch.pending { opacity: .4; }
.bteam { display: flex; align-items: center; gap: .3rem; padding: .2rem .4rem; }
.bteam + .bteam { border-top: 1px solid var(--line); }
.bteam .bname { flex: 1; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.bteam .bscore { font-variant-numeric: tabular-nums; min-width: 1.2ch;
  text-align: right; color: var(--muted); }
.bteam.win { color: var(--good); font-weight: 600; }
.bteam.win .bscore { color: var(--good); }
.bpicks {
  display: block; border-top: 1px solid var(--line); text-align: center;
  font-size: .62rem; padding: .12rem; color: var(--muted);
}
.bpicks:hover { color: var(--accent); background: rgba(56, 189, 248, .08); }
/* mark the centre box as the final (title match) */
.bn-final .bmatch { border-color: rgba(251, 191, 36, .6);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, .3); }

/* connector colour for every stub/joiner */
.bn-self::before, .bn-self::after,
.bn-kids::before, .bn-kids::after { background: rgba(154, 163, 178, .5); }

/* LEFT half: feeders left, box right -> connectors go right */
.wc-left .bn-self::after { content: ""; position: absolute; right: 0;
  top: 50%; width: .62rem; height: 2px; }
.wc-left .bn-kids::after { content: ""; position: absolute; right: 0;
  top: 25%; width: 2px; height: 50%; }
.wc-left .bn-parent::before { content: ""; position: absolute; left: 0;
  top: 50%; width: .62rem; height: 2px; }

/* RIGHT half: mirrored */
.wc-right .bn-self::before { content: ""; position: absolute; left: 0;
  top: 50%; width: .62rem; height: 2px; }
.wc-right .bn-kids::before { content: ""; position: absolute; left: 0;
  top: 25%; width: 2px; height: 50%; }
.wc-right .bn-parent::after { content: ""; position: absolute; right: 0;
  top: 50%; width: .62rem; height: 2px; }

/* FINAL (centre): a stub each side toward the two semi-final winners */
.wc-final .bn-final::before { content: ""; position: absolute; left: 0;
  top: 50%; width: .62rem; height: 2px; }
.wc-final .bn-final::after { content: ""; position: absolute; right: 0;
  top: 50%; width: .62rem; height: 2px; }

.bracket-footer { display: flex; gap: 2rem; align-items: center;
  flex-wrap: wrap; margin-top: .8rem; padding-top: .6rem;
  border-top: 1px solid var(--line); }
.bchamp { font-size: 1rem; }
.bchamp strong { color: var(--good); }
.bthird { color: var(--muted); }

/* Bracket vs reality: each predicted slot's fate. `.win` (the side the
   player advanced) keeps its weight; the fate colours the name. */
.bteam.cmp-hit .bname, .cmp-key.cmp-hit,
.cmp-key.cmp-hit strong { color: var(--good); }
.bteam.cmp-miss .bname, .cmp-key.cmp-miss,
.cmp-key.cmp-miss strong { color: var(--bad); text-decoration: line-through; }
.bteam.cmp-dead .bname, .cmp-key.cmp-dead,
.cmp-key.cmp-dead strong { color: var(--muted); text-decoration: line-through; }
.bteam.win .bname { font-weight: 600; }
.cmp-actual { font-size: .78rem; white-space: nowrap; color: var(--muted); }
.bscore.cmp-scored { color: var(--good); font-weight: 700; }
.muted { color: var(--muted); }
.hint { color: var(--muted); }

/* Top-bar navigation */
.nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; }
/* Keep each label intact: a crowded bar wraps whole items to a new line
   rather than breaking a label like "My sheet" mid-word. */
.nav a { color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--accent); }

/* Leaderboard */
.board { max-width: 900px; margin: 0 auto; }
/* Wide tables stay swipeable on phones instead of squishing every column;
   the essential left-most columns (rank/name/points) show first. While more
   columns hide off to the right (base.html toggles .can-scroll), the right
   edge fades out as the swipe affordance. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll.can-scroll {
  -webkit-mask-image: linear-gradient(to right,
    #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right,
    #000 calc(100% - 2.5rem), transparent);
}
.table-scroll table.leaderboard { margin-top: 1rem; }
table.leaderboard {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  margin-top: 1rem;
}
@media (max-width: 640px) {
  .table-scroll table.leaderboard { min-width: 540px; }
  .leaderboard td.player, .leaderboard th.player { white-space: nowrap; }
  .leaderboard th, .leaderboard td { padding: .45rem .5rem; }
}
.leaderboard th, .leaderboard td {
  padding: .45rem .6rem; text-align: right;
  border-bottom: 1px solid var(--line);
}
.leaderboard tbody tr:last-child td { border-bottom: none; }
.leaderboard th {
  background: var(--panel-2); color: var(--muted); font-weight: 600;
  font-size: .82rem;
}
.leaderboard th.player, .leaderboard td.player { text-align: left; }
.leaderboard th.rank, .leaderboard td.rank {
  text-align: center; color: var(--muted); width: 2.2rem;
}
.leaderboard th.total, .leaderboard td.total {
  font-weight: 700; color: var(--accent);
}
.leaderboard tr.leader td { background: rgba(56, 189, 248, .08); }
.leaderboard tr.leader td.rank { color: var(--warn); font-weight: 700; }
.leaderboard tbody tr:hover td { background: rgba(255, 255, 255, .03); }
/* Icon beside a player's name -> their full locked sheet. */
.player .mini-link { margin-left: .35rem; font-size: .8rem; opacity: .55; }
.player .mini-link:hover { opacity: 1; }
/* Pool-race state: the Max column and the clinched/out chips. */
.leaderboard th.max, .leaderboard td.max { font-size: .85rem; }
.race-chip {
  margin-left: .4rem; padding: .05rem .4rem; border-radius: 9px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.race-chip.clinched {
  background: rgba(251, 191, 36, .15); color: var(--warn);
}
.race-chip.out { background: rgba(248, 113, 113, .12); color: var(--bad); }
.leaderboard tr.race-out td.player a:first-child,
.leaderboard tr.race-out td.total { opacity: .6; }

/* Per-participant detail */
.detail { max-width: 760px; margin: 0 auto; }
.backlink { margin: 0 0 .6rem; }
.detail h1 .grand {
  color: var(--accent); font-size: 1rem; margin-left: .6rem;
}
.cat-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .9rem; margin-bottom: .9rem;
}
.cat-card h3 {
  margin: .1rem 0 .5rem; display: flex; align-items: baseline;
  gap: .6rem; flex-wrap: wrap;
}
.cat-total { color: var(--accent); font-size: .9rem; }
.cat-counts { color: var(--muted); font-size: .8rem; font-weight: 400; }
.cat-counts .ok { color: var(--good); }
.cat-counts .bad { color: var(--bad); }
table.items { width: 100%; border-collapse: collapse; font-size: .85rem; }
.items th, .items td {
  padding: .25rem .4rem; text-align: left;
  border-bottom: 1px solid var(--line);
}
.items th.pts, .items td.pts { text-align: right; }
.items tr.hit td:first-child { box-shadow: inset 2px 0 0 var(--good); }
.items tr.miss td:first-child { box-shadow: inset 2px 0 0 var(--bad); }
.items tr.hit td.pts { color: var(--good); font-weight: 600; }
.items .mu { white-space: nowrap; }
.items .vs { color: var(--muted); margin: 0 .15rem; }
.items .when {
  display: block; color: var(--muted); font-size: .75rem; margin-top: .1rem;
}

/* Admin results grid (reuses .match-row from the sheet) */
.results-progress {
  position: sticky; top: 52px; z-index: 5; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem 1rem; margin-bottom: 1rem;
}
.results-progress strong { color: var(--accent); }
/* Foldable stage sections (admin results grid + the results/schedule page) */
.result-section, .sched-section {
  margin-bottom: .7rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel);
}
.result-section > summary, .sched-section > summary {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; cursor: pointer; user-select: none;
  color: var(--muted); font-weight: 600; list-style: none;
}
.result-section > summary::-webkit-details-marker,
.sched-section > summary::-webkit-details-marker { display: none; }
.result-section > summary::before, .sched-section > summary::before {
  content: "▸"; display: inline-block;
  transition: transform .15s ease;
}
.result-section[open] > summary::before,
.sched-section[open] > summary::before { transform: rotate(90deg); }
.result-section > summary:hover,
.sched-section > summary:hover { color: var(--text); }
.section-label { flex: 1; }
.section-count { font-variant-numeric: tabular-nums; font-weight: 500; }
.section-count.done { color: var(--accent); }
.result-matches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0 1.2rem;
  padding: .1rem .9rem .7rem;
}

/* Projection (reuses table.leaderboard) */
.stale {
  color: var(--warn); font-size: .85rem; margin: -.3rem 0 .4rem;
}
.projection h2 { margin: 1.4rem 0 .2rem; color: var(--muted); }
.projection td.prob { position: relative; white-space: nowrap; }
.prob-bar {
  display: inline-block; height: .5rem; width: var(--p, 0%);
  vertical-align: middle; border-radius: 3px;
  background: var(--accent); opacity: .85;
}
.prob-bar.team { background: var(--good); }
.prob-val { margin-left: .45rem; font-variant-numeric: tabular-nums; }
.projection.teams { max-width: 480px; }

/* Merged dashboard + time-series charts */
:root {
  --c0: #38bdf8; --c1: #fbbf24; --c2: #34d399; --c3: #f87171;
  --c4: #a78bfa; --c5: #fb923c; --c6: #22d3ee; --c7: #f472b6;
}
.board-wide { max-width: 1100px; margin: 0 auto; }
.charts { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
figure.chart-fig {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem .9rem; margin: 0;
  position: relative;  /* anchors the hover tooltip (charts.js) */
}
figure.chart-fig figcaption {
  color: var(--muted); font-size: .85rem; margin-bottom: .2rem;
}
svg.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: .7rem; }
.chart .ln {
  fill: none; stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round;
}
.chart .ln.dim { stroke: var(--muted); opacity: .22; stroke-width: 1; }
.chart .ln.s0 { stroke: var(--c0); }
.chart .ln.s1 { stroke: var(--c1); }
.chart .ln.s2 { stroke: var(--c2); }
.chart .ln.s3 { stroke: var(--c3); }
.chart .ln.s4 { stroke: var(--c4); }
.chart .ln.s5 { stroke: var(--c5); }
.chart .ln.s6 { stroke: var(--c6); }
.chart .ln.s7 { stroke: var(--c7); }
.chart .endlbl { font-size: .72rem; }
.chart .endlbl.s0 { fill: var(--c0); }
.chart .endlbl.s1 { fill: var(--c1); }
.chart .endlbl.s2 { fill: var(--c2); }
.chart .endlbl.s3 { fill: var(--c3); }
.chart .endlbl.s4 { fill: var(--c4); }
.chart .endlbl.s5 { fill: var(--c5); }
.chart .endlbl.s6 { fill: var(--c6); }
.chart .endlbl.s7 { fill: var(--c7); }
/* Pure-CSS spotlight (JS off): hover the chart to dim all, a line to lift it.
   When charts.js is active (`.js-cursor`) the crosshair does the focusing, so
   the lines stay at full strength as context behind the tooltip. */
svg.chart:not(.js-cursor):hover .ln { opacity: .15; }
svg.chart .ln:hover { opacity: 1; stroke-width: 2.8; }
.chart-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1rem;
  padding: 0; margin: .4rem 0 0; font-size: .8rem; color: var(--text);
}
.chart-legend li { display: flex; align-items: center; }
.chart-legend .swatch {
  display: inline-block; width: .8rem; height: .8rem;
  border-radius: 2px; margin-right: .35rem;
}
.chart-legend .swatch.s0 { background: var(--c0); }
.chart-legend .swatch.s1 { background: var(--c1); }
.chart-legend .swatch.s2 { background: var(--c2); }
.chart-legend .swatch.s3 { background: var(--c3); }
.chart-legend .swatch.s4 { background: var(--c4); }
.chart-legend .swatch.s5 { background: var(--c5); }
.chart-legend .swatch.s6 { background: var(--c6); }
.chart-legend .swatch.s7 { background: var(--c7); }
.chart-legend .swatch.dim { background: var(--muted); opacity: .4; }

/* Interactive chart marker (progressive enhancement; charts.js injects the
   hit rect, the dot and the value label -- the static SVG above renders
   without it). Hovering near a line spotlights it and labels the data point
   closest to the pointer. */
.chart-hit { fill: none; pointer-events: all; }
.chart-mark { pointer-events: none; }
.chart-mark-dot { stroke: var(--bg); stroke-width: 1.5; }
.chart-mark-dot.dim { fill: var(--muted); }
.chart-mark-dot.s0 { fill: var(--c0); }
.chart-mark-dot.s1 { fill: var(--c1); }
.chart-mark-dot.s2 { fill: var(--c2); }
.chart-mark-dot.s3 { fill: var(--c3); }
.chart-mark-dot.s4 { fill: var(--c4); }
.chart-mark-dot.s5 { fill: var(--c5); }
.chart-mark-dot.s6 { fill: var(--c6); }
.chart-mark-dot.s7 { fill: var(--c7); }
/* A bg-coloured halo (paint-order: stroke) keeps the value readable over
   the lines and gridlines. */
.chart-mark-val {
  font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px;
  stroke-linejoin: round;
}
.chart-mark-val.dim { fill: var(--text); }
.chart-mark-val.s0 { fill: var(--c0); }
.chart-mark-val.s1 { fill: var(--c1); }
.chart-mark-val.s2 { fill: var(--c2); }
.chart-mark-val.s3 { fill: var(--c3); }
.chart-mark-val.s4 { fill: var(--c4); }
.chart-mark-val.s5 { fill: var(--c5); }
.chart-mark-val.s6 { fill: var(--c6); }
.chart-mark-val.s7 { fill: var(--c7); }
/* Spotlight the line under the pointer; dim the rest. */
svg.chart.has-mark .ln { opacity: .16; }
svg.chart.has-mark .ln.marked { opacity: 1; stroke-width: 2.8; }

.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--muted); }
.leaderboard th.proj-start, .leaderboard td.proj-start {
  border-left: 1px solid var(--line);
}

/* Team page: per-team knockout matchup cards */
.matchup-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .8rem; margin-bottom: .7rem;
}
.matchup-card h3 {
  margin: .1rem 0 .3rem; font-size: 1rem;
  display: flex; align-items: baseline; gap: .5rem;
}
.matchup-card h3 .title-odd { color: var(--accent); font-size: .85rem; }
.matchup-round {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  padding: .3rem 0; border-top: 1px solid var(--line);
}
.matchup-round .rnd {
  color: var(--muted); font-size: .78rem; width: 3.2rem; flex: none;
}
.matchup-opp {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .82rem; white-space: nowrap;
}
.matchup-opp .obar {
  display: inline-block; height: .45rem; border-radius: 2px;
  background: var(--good); opacity: .8;
}
.matchup-opp .oval {
  color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Admin: dashboard hub links */
.admin-links { display: flex; gap: 1rem; margin: 0 0 1.6rem; }

/* Admin: per-league management */
.admin-league { max-width: 760px; margin: 0 auto; }
.admin-league h2 { margin: 1.6rem 0 .4rem; color: var(--muted); font-size: 1rem; }
.admin-league .identify { max-width: 420px; }
.members .ok { color: var(--good); }
.member-actions { white-space: nowrap; text-align: right; }
.member-actions .inline + .inline { margin-left: .8rem; }
button.danger-link { color: var(--bad); }
.danger-head { color: var(--bad) !important; }
.danger-zone {
  border: 1px solid var(--bad); border-radius: 8px;
  padding: .8rem 1rem; margin-top: .4rem;
}
.danger-zone p { margin-top: 0; color: var(--muted); }
button.danger {
  background: var(--bad); color: #2a0707; border: none; border-radius: 6px;
  padding: .6rem 1rem; font-weight: 600; cursor: pointer;
}

/* ===== Nations: the index of all 48 teams ===== */
.nations h2, .nation h2 {
  margin: 1.5rem 0 .3rem; color: var(--muted); font-size: 1rem;
}
.mini-legend { margin: .8rem 0 .4rem; }
.mini-key { font-weight: 600; }
.mini-key.out { color: var(--muted); }
.mini-key.ko { color: var(--accent); }
.mini-key.fin { color: var(--good); }

.nation-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.group-card { padding: .7rem .9rem; }
.group-card h2 {
  margin: 0 0 .5rem; color: var(--text); font-size: .95rem;
  letter-spacing: .02em;
}
.nation-list { list-style: none; margin: 0; padding: 0; }
.nation-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: .5rem;
  padding: .3rem 0; border-top: 1px solid var(--line);
}
.nation-row:first-child { border-top: none; }
.nation-link {
  display: flex; align-items: center; gap: .45rem;
  color: var(--text); min-width: 0;
}
.nation-link:hover .nname { color: var(--accent); }
.nname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A nation whose run is over fades back so the live field pops. */
.nation-row.out { opacity: .5; }
.nation-row.out .nname { text-decoration: line-through;
  text-decoration-thickness: 1px; }
.ntitle.dead { font-size: .75rem; font-style: italic; }
.ntitle.champ { font-size: .95rem; }
.ntitle {
  color: var(--muted); font-variant-numeric: tabular-nums;
  font-size: .85rem; min-width: 3rem; text-align: right;
}
.mini {
  display: inline-flex; width: 90px; height: .5rem; flex: none;
  border-radius: 3px; overflow: hidden; background: var(--line);
}
.mini .seg { height: 100%; }
.mini .seg.out { background: var(--panel-2); }
.mini .seg.ko { background: var(--accent); opacity: .85; }
.mini .seg.fin { background: var(--good); }

/* ===== A single nation's page ===== */
.back { display: inline-block; margin-bottom: .6rem; color: var(--muted); }
.back:hover { color: var(--accent); }
.nation-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem; padding: 1rem 1.2rem;
}
.nation-id { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.nation-id .flag {
  width: 3rem; height: auto; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line);
}
.nation-id h1 { margin: 0; font-size: 1.5rem; }
.nation-facts { margin: .15rem 0 0; color: var(--muted); font-size: .85rem; }
.status {
  font-size: .82rem; font-weight: 600; padding: .3rem .7rem;
  border-radius: 999px; white-space: nowrap;
}
.status.alive { background: rgba(52, 211, 153, .12); color: var(--good); }
.status.out { background: rgba(248, 113, 113, .12); color: var(--bad); }

.nation-odds { display: flex; gap: 1rem; margin: 1rem 0 .2rem; }
.odd {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .6rem 1rem; min-width: 7rem;
}
.odd-val {
  display: block; font-size: 1.4rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.odd-lbl { color: var(--muted); font-size: .8rem; }

/* Group standings: finish-position odds bar */
.group-standings td.finish, .group-standings th.finish { min-width: 130px; }
.posbar {
  display: flex; width: 130px; height: .55rem;
  border-radius: 3px; overflow: hidden; background: var(--line);
}
.posbar .seg { height: 100%; }
.posbar .seg.p1 { background: var(--good); }
.posbar .seg.p2 { background: var(--accent); }
.posbar .seg.p3 { background: var(--warn); }
.posbar .seg.p4 { background: var(--muted); opacity: .5; }
.finish-legend { display: flex; gap: .8rem; align-items: center; }
.finish-legend .key { display: inline-flex; align-items: center; }
.finish-legend .key::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 2px;
  margin-right: .3rem; display: inline-block;
}
.finish-legend .key.p1::before { background: var(--good); }
.finish-legend .key.p2::before { background: var(--accent); }
.finish-legend .key.p3::before { background: var(--warn); }
.finish-legend .key.p4::before { background: var(--muted); opacity: .5; }

/* The nation's three group fixtures */
.fixtures {
  list-style: none; padding: 0; margin: .8rem 0 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.fixture {
  display: flex; align-items: center; gap: .7rem;
  padding: .35rem .6rem; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 6px; font-size: .9rem;
}
.fixture.w { border-left-color: var(--good); }
.fixture.d { border-left-color: var(--warn); }
.fixture.l { border-left-color: var(--bad); }
.fx-day { color: var(--muted); font-size: .75rem; width: 2.9rem; flex: none; }
.fx-opp {
  display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 0;
}
.fx-ha { color: var(--muted); }
.fx-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-kick { color: var(--muted); font-size: .8rem; }
.fx-odds {
  display: inline-flex; gap: .45rem; flex: none;
  font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fx-odds .o.w { color: var(--good); }
.fx-odds .o.d { color: var(--muted); }
.fx-odds .o.l { color: var(--bad); }

/* ===== Knockout matchup funnel ===== */
.funnel { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0; }
.funnel-round { display: flex; flex-direction: column; gap: .2rem; }
.fr-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem;
}
.fr-label { color: var(--text); font-weight: 600; }
.fr-reach { color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-bar {
  display: flex; gap: 1px; width: 100%; height: 1.6rem;
  border-radius: 5px; overflow: hidden; background: var(--line);
}
.fr-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  background: var(--accent); opacity: .85;
}
.fr-seg .flag { width: 18px; height: auto; }
.fr-seg.others { background: var(--panel-2); opacity: 1; }
/* A funnel round already played: the real opponent + result as history. */
.fr-actual {
  display: flex; align-items: center; gap: .6rem;
  padding: .25rem .5rem; border-radius: 4px;
  background: var(--panel-2); border-left: 3px solid var(--muted);
  font-size: .85rem;
}
.fr-actual.w { border-left-color: var(--good); }
.fr-actual.l { border-left-color: var(--bad); }
.fr-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.fr-res { font-size: .75rem; color: var(--muted); }
.fr-res.w { color: var(--good); }
.fr-res.l { color: var(--bad); }

/* Index: league champion-pick badge */
.champ-badge {
  font-size: .72rem; color: var(--warn); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== A nation's "your pool" block (league context) ===== */
.pool {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: .8rem 1rem; margin-top: .3rem;
}
.pool-stats {
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin-bottom: .8rem;
}
.pool-stat { display: flex; flex-direction: column; }
.ps-pool {
  font-size: 1.3rem; font-weight: 700; color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.ps-pool small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.ps-lbl { color: var(--text); font-size: .82rem; }
.ps-model { color: var(--muted); font-size: .76rem; }
.pool-bar {
  display: flex; width: 100%; height: .6rem; border-radius: 3px;
  overflow: hidden; background: var(--line);
}
.pool-bar .seg { height: 100%; }
.pool-bar .seg.out { background: var(--panel-2); }
.pool-bar .seg.ko { background: var(--accent); opacity: .85; }
.pool-bar .seg.fin { background: var(--good); }
.pool-backers { margin: .6rem 0 0; font-size: .9rem; }

/* ===== Tournament pages: bracket + group tables ===== */
.section-links {
  display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 .4rem;
  font-size: .85rem;
}
/* Linked nation names in tables/fixtures stay text-coloured, lift on hover. */
.nlink { color: inherit; }
.nlink:hover { color: var(--accent); }
/* Advancing rows on the group tables. */
.group-standings tr.adv td.rank { color: var(--good); font-weight: 700; }
.group-standings tr.adv td { background: rgba(52, 211, 153, .06); }

/* ===== Results & schedule list ===== */
.schedule-page { max-width: 760px; }
.sched-section > .table-scroll { padding: 0 .6rem .5rem; }
table.schedule { width: 100%; border-collapse: collapse; font-size: .9rem; }
.schedule td {
  padding: .35rem .5rem; border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.sched-when {
  color: var(--muted); font-size: .8rem; white-space: nowrap; width: 1%;
}
.schedule tr.played .sched-when { opacity: .7; }
.sched-home { text-align: right; }
.sched-away { text-align: left; }
.sched-home .nlink, .sched-away .nlink {
  display: inline-flex; align-items: center; gap: .35rem;
}
.schedule .win { font-weight: 700; }
.sched-score {
  text-align: center; white-space: nowrap; min-width: 3rem;
  font-variant-numeric: tabular-nums;
}
.sched-score .vs { color: var(--muted); }
.slot-rule { color: var(--muted); font-style: italic; }

/* The signed-in viewer's own predicted score, under the result */
.my-pick {
  display: block; font-size: .72rem; margin-top: .12rem;
  font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 400;
}
.my-pick.pending { color: var(--muted); }
.my-pick.result { color: var(--good); }
.my-pick.exact { color: var(--good); font-weight: 700; }
.my-pick.miss { color: var(--bad); }
/* In the legend sentence the swatches sit inline, not on their own line. */
.odds-legend .my-pick { display: inline; font-size: inherit; }

/* Per-match model odds (H/D/A bar) + pool split */
.sched-model { width: 9.5rem; white-space: nowrap; }
.odds-bar {
  display: inline-flex; width: 84px; height: .55rem; border-radius: 3px;
  overflow: hidden; background: var(--line); vertical-align: middle;
}
.odds-bar .seg { height: 100%; }
.odds-bar .seg.h { background: var(--good); }
.odds-bar .seg.d { background: var(--muted); opacity: .55; }
.odds-bar .seg.a { background: var(--accent); }
/* For a played match, dim the bands and brighten the one that happened. */
.odds-bar.decided .seg { opacity: .3; }
.odds-bar.decided .seg.hit { opacity: 1; box-shadow: inset 0 0 0 1px var(--text); }
.odds-note {
  font-size: .75rem; color: var(--muted); margin-left: .35rem;
  font-variant-numeric: tabular-nums;
}
.pool-note {
  display: block; font-size: .72rem; color: var(--muted); margin-top: .12rem;
  font-variant-numeric: tabular-nums;
}
/* Drill-down to one match's full pick list, from the results list */
.pick-link {
  display: block; font-size: .72rem; margin-top: .12rem;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.pick-link:hover { text-decoration: underline; }

/* ===== Single-match predictions page ===== */
.match-page { max-width: 640px; }
/* The match hero: round + flip-through nav on top, big matchup below. */
.match-hero { padding: .7rem 1rem .9rem; margin: .6rem 0 1rem; }
.mh-top {
  display: flex; align-items: baseline; gap: .8rem;
  font-size: .78rem; margin-bottom: .55rem;
}
.mh-round {
  color: var(--muted); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; flex: 1;
}
.mh-nav { flex: 1; min-width: 0; white-space: nowrap; }
.mh-nav.next { text-align: right; }
.mh-nav a { color: var(--muted); text-decoration: none; }
.mh-nav a:hover { color: var(--accent); }
.mh-grid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .9rem;
}
.mh-side { font-size: 1.25rem; font-weight: 600; min-width: 0; }
.mh-side.home { text-align: right; }
.mh-side .flag { width: 27px; height: 19px; vertical-align: -3px; }
.mh-mid {
  display: flex; flex-direction: column; align-items: center;
  gap: .1rem; min-width: 4.5rem;
}
.mh-score {
  font-size: 1.9rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mh-vs { font-size: 1.1rem; color: var(--muted); }
.mh-kick { color: var(--muted); font-size: .78rem; white-space: nowrap; }
@media (max-width: 640px) {
  .mh-side { font-size: 1rem; }
  .mh-score { font-size: 1.5rem; }
}
.match-picks {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  margin-top: .6rem;
}
.match-picks th, .match-picks td {
  padding: .35rem .5rem; border-bottom: 1px solid var(--line);
  text-align: left;
}
.match-picks th {
  color: var(--muted); font-weight: 600; font-size: .8rem;
}
.match-picks .num { text-align: right; font-variant-numeric: tabular-nums; }
.match-picks .my-pick { display: inline; }
.pick-pair { white-space: nowrap; }
.pick-pair .vs { color: var(--muted); margin: 0 .25rem; }
.pick-points { color: var(--muted); }
.model-prob { color: var(--muted); }

/* Knockout team-conditional cues (match page + breakdown) */
.ko-note { border-left: 2px solid var(--warn); padding-left: .5rem; }
/* Picks that were for a different tie sit collapsed and dimmed under the
   scoreable ones -- they carry no signal for this match. */
details.other-ties { margin-top: .8rem; }
details.other-ties summary {
  cursor: pointer; color: var(--muted); font-size: .85rem;
}
details.other-ties summary:hover { color: var(--text); }
.match-picks.dim { opacity: .6; }
.teams-ok { color: var(--good); font-weight: 600; margin-left: .3rem; }
.teams-no {
  color: var(--warn); font-weight: 600; white-space: nowrap;
  margin-left: .3rem;
}
.ko-mismatch {
  display: block; color: var(--muted); font-size: .75rem; margin-top: .1rem;
}
.ko-mismatch .vs { margin: 0 .15rem; }
.ko-mismatch .teams-no { margin-left: 0; }
.items tr.wrong-teams td:first-child { box-shadow: inset 2px 0 0 var(--warn); }
.imp-note { color: var(--muted); }

/* The model's likeliest-scorelines strip */
.model-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem;
}
.model-strip-label { color: var(--muted); }
.model-cell {
  display: inline-flex; gap: .3rem; padding: .1rem .4rem; border-radius: 4px;
  background: var(--line); font-variant-numeric: tabular-nums;
}
.model-cell em { color: var(--muted); font-style: normal; }
.model-cell.picked {
  background: transparent; box-shadow: inset 0 0 0 1px var(--accent);
}
.model-cell.picked em { color: var(--accent); }
.model-note { color: var(--muted); font-size: .8rem; font-style: italic; }

/* Next-match swing: how each result would move the pool. */
.swing { margin-top: 1.5rem; }
.swing h2, .swing h3 { margin: 1rem 0 .15rem; font-size: 1rem; }
.swing-table, .swing-scores {
  width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .4rem;
}
.swing-table th, .swing-table td,
.swing-scores th, .swing-scores td {
  padding: .35rem .5rem; border-bottom: 1px solid var(--line);
  text-align: left;
}
.swing-table th, .swing-scores th {
  color: var(--muted); font-weight: 600; font-size: .8rem;
}
.swing-table .num, .swing-scores .num {
  text-align: right; font-variant-numeric: tabular-nums;
}
.swing-table th em, .swing-scores em {
  color: var(--muted); font-style: normal; font-weight: 400;
}
.swing-table .now { color: var(--muted); }
.swing-table td.root { font-weight: 700; color: var(--good); }
.swing-table td.impact { color: var(--muted); }
.swing-table tr.me td.impact { color: var(--text); font-weight: 600; }
.swing-lead { margin: .2rem 0 .5rem; font-size: .95rem; }
.swing-lead strong { color: var(--accent); }
.team-swing { margin-top: 1rem; }

/* Leaderboard "root for" card: the next match + the viewer's best result. */
a.rootfor {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 1.2rem; justify-content: space-between;
  margin: .8rem 0; padding: .55rem .9rem;
  border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: var(--text);
}
a.rootfor:hover { border-color: var(--accent); }
.rootfor-next {
  display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.rootfor-label {
  text-transform: uppercase; font-size: .7rem; letter-spacing: .04em;
  color: var(--muted);
}
.rootfor-match { font-weight: 600; }
.rootfor-match .vs { color: var(--muted); font-weight: 400; margin: 0 .2rem; }
.rootfor-when { color: var(--muted); font-size: .85rem; }
.rootfor-call { color: var(--muted); }
.rootfor-call strong { color: var(--good); }
.rootfor-call em {
  color: var(--accent); font-style: normal; margin-left: .35rem;
}

/* "Your pivotal upcoming matches" list. */
.pivotal { margin: .2rem 0 .8rem; }
.pivotal > summary {
  cursor: pointer; color: var(--muted); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; padding: .2rem 0;
}
.pivotal-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.pivotal-list li { border-bottom: 1px solid var(--line); }
.pivotal-list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  padding: .4rem .2rem; text-decoration: none; color: var(--text);
}
.pivotal-list a:hover { background: rgba(255, 255, 255, .03); }
.pivotal-imp {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent);
  min-width: 3.4rem;
}
.pivotal-imp small { color: var(--muted); font-weight: 400; }
.pivotal-match { font-weight: 600; }
.pivotal-match .vs {
  color: var(--muted); font-weight: 400; margin: 0 .15rem;
}
.pivotal-when { color: var(--muted); font-size: .85rem; }
.pivotal-call { color: var(--muted); margin-left: auto; }
.pivotal-call em { color: var(--good); font-style: normal; }

/* "Matches that matter to <team>'s title" on the nation page. */
.team-pivotal { list-style: none; margin: .4rem 0 1rem; padding: 0; }
.team-pivotal li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
  padding: .45rem .1rem; border-bottom: 1px solid var(--line);
}
.team-pivotal .pivotal-imp {
  min-width: 3.4rem; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.team-pivotal .pivotal-imp small { color: var(--muted); font-weight: 400; }
.team-pivotal .pivotal-match a {
  text-decoration: none; color: var(--text); font-weight: 600;
}
.team-pivotal .pivotal-match a:hover { color: var(--accent); }
.team-pivotal .vs { color: var(--muted); font-weight: 400; margin: 0 .15rem; }
.team-pivotal .tag {
  font-size: .7rem; color: var(--muted); border: 1px solid var(--line);
  border-radius: 3px; padding: 0 .25rem; margin-left: .3rem;
}
.team-pivotal .pivotal-when { color: var(--muted); font-size: .85rem; }
.team-pivotal .pivotal-call { color: var(--muted); margin-left: auto; }
.team-pivotal .pivotal-call em { color: var(--good); font-style: normal; }
.swing-table tr.me { box-shadow: inset 3px 0 0 var(--accent); }
.swing-table tr.me td:first-child { font-weight: 600; }
.swing-scores tr.picked { box-shadow: inset 3px 0 0 var(--accent); }
.swing-scores .tag {
  font-size: .7rem; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: 0 .25rem; margin-left: .25rem;
}
.odds-legend .key { display: inline-flex; align-items: center; }
.odds-legend .key::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 2px;
  margin-right: .25rem; display: inline-block;
}
.odds-legend .key.h::before { background: var(--good); }
.odds-legend .key.d::before { background: var(--muted); opacity: .55; }
.odds-legend .key.a::before { background: var(--accent); }

/* Bracket boxes: linked team + the source rule for empty slots. */
.bteam .blink {
  display: flex; align-items: center; gap: .3rem; flex: 1; min-width: 0;
  color: inherit;
}
.bteam .blink:hover .bname { color: var(--accent); }
.bname.slot-rule { color: var(--muted); font-style: italic; }

/* ===== Survival curve (charts.py survival_chart) ===== */
.surv-area { fill: var(--accent); opacity: .12; }
/* The achieved prefix of the curve (stages actually reached) reads as
   fact, not odds. */
.surv-line.done { stroke: var(--good); }
.surv-dot.done { fill: var(--good); }
.surv-line {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.surv-dot { fill: var(--accent); }
.surv-val {
  fill: var(--text); font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

/* ===== Draw luck (nation block, /draw-luck table, draw_luck_chart) ===== */
.dl-band.outer { fill: var(--muted); opacity: .13; }
.dl-band.inner { fill: var(--muted); opacity: .20; }
.dl-median {
  fill: none; stroke: var(--muted); stroke-width: 1.2;
  stroke-dasharray: 4 3;
}
.dl-actual {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.dl-dot { fill: var(--accent); }

/* The three metric chips reuse the nation-odds card look; the sub line
   carries the actual-vs-median context. */
.dl-chips { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 .2rem; }
.dl-chips .odd { min-width: 11rem; }
.dl-sub { display: block; color: var(--muted); font-size: .75rem; }
.odd-val.lucky { color: var(--good); }
.odd-val.unlucky { color: var(--bad); }

table.dl-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
table.dl-table th, table.dl-table td {
  padding: .4rem .55rem; text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.dl-table th { color: var(--muted); font-weight: 600; }
table.dl-table th.nation-col, table.dl-table td.nation-col {
  text-align: left; width: 100%;
}
table.dl-table td.rank { color: var(--muted); }
table.dl-table tr.out td { opacity: .75; }
table.dl-table td.outcome { color: var(--muted); }
table.dl-table td.outcome.alive { color: var(--good); }
table.dl-table .vs { color: var(--muted); font-size: .8rem; }
.dl-pct { font-weight: 700; }
.dl-pct.lucky { color: var(--good); }
.dl-pct.unlucky { color: var(--bad); }
/* Tiny percentile bar under the luck column. */
.dl-bar {
  display: inline-block; width: 56px; height: 5px; margin-left: .45rem;
  background: var(--line); border-radius: 3px; vertical-align: middle;
}
.dl-bar span {
  display: block; height: 100%; background: var(--accent);
  border-radius: 3px;
}

/* ===== Stacked area (charts.py stacked_area_chart) ===== */
/* A hairline in the panel colour separates the stacked bands. */
.chart .area { stroke: var(--panel); stroke-width: .6; }
.chart .area.s0 { fill: var(--c0); }
.chart .area.s1 { fill: var(--c1); }
.chart .area.s2 { fill: var(--c2); }
.chart .area.s3 { fill: var(--c3); }
.chart .area.s4 { fill: var(--c4); }
.chart .area.s5 { fill: var(--c5); }
.chart .area.s6 { fill: var(--c6); }
.chart .area.s7 { fill: var(--c7); }

/* ===== Conditional-finish table (nation page) ===== */
table.cond-finish {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
table.cond-finish th, table.cond-finish td {
  padding: .4rem .55rem; text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
table.cond-finish th { color: var(--muted); font-weight: 600; }
table.cond-finish th:first-child,
table.cond-finish td.finish { text-align: left; font-weight: 600; }
table.cond-finish td.opps { text-align: left; white-space: nowrap; }
table.cond-finish .opp {
  display: inline-flex; align-items: center; gap: .2rem; margin-right: .5rem;
}
table.cond-finish .opp-p { color: var(--muted); font-size: .8rem; }

/* ===== Rules / how-it-works page ===== */
.rules-page h2 { margin: 1.8rem 0 .4rem; }
.rules-page > .hint { margin-bottom: 1.4rem; }
.rules-scope { font-size: .85rem; margin: 0 0 1rem; }
.rules-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rule-card { padding: .9rem 1.1rem 1rem; }
.rule-card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.rule-rows { list-style: none; margin: 0; padding: 0; }
.rule-rows li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .35rem 0; border-top: 1px solid var(--line);
}
.rule-rows li:first-child { border-top: none; }
.rule-text { flex: 1; min-width: 0; }
.rule-pts {
  flex: none; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rule-note { margin: .6rem 0 0; font-size: .82rem; color: var(--muted); }
.rules-caveats {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.rules-caveats li {
  padding: .6rem .8rem; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; font-size: .9rem;
}
.rules-cta { margin-top: 1.6rem; }

/* Collapsible "how to fill" helper on the prediction sheet. */
.fill-help {
  margin: 0 0 1.2rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .2rem .9rem;
}
.fill-help > summary {
  cursor: pointer; padding: .55rem 0; font-weight: 600; color: var(--accent);
  list-style-position: inside;
}
.fill-help[open] > summary { border-bottom: 1px solid var(--line); }
.fill-help ul {
  margin: .7rem 0 .8rem; padding-left: 1.1rem;
  display: flex; flex-direction: column; gap: .45rem;
  font-size: .9rem; color: var(--muted);
}
.fill-help ul strong { color: var(--text); font-weight: 600; }

/* ===== Banter stats ===== */
.banter h2 { margin: 1.6rem 0 .2rem; }
.award-grid {
  display: grid; gap: .9rem; margin: .7rem 0 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.award { padding: .95rem 1.05rem; }
.award h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.award-blurb { margin: 0 0 .65rem; font-size: .8rem; line-height: 1.35; }
.award-winner {
  margin: 0; font-size: 1.05rem; display: flex; align-items: center;
  gap: .4rem;
}
.award-detail { margin: .3rem 0 0; font-size: .88rem; color: var(--text); }
.award-pending { margin: 0; font-size: .88rem; font-style: italic; }