/* Archivo Narrow, SIL OFL 1.1 - licence shipped alongside as
   archivo-narrow-OFL.txt. Self-hosted on purpose: this box serves from a home
   connection, and a font from a CDN is a third party sitting in front of the
   first paint of every page. One variable file covers 400-700, latin only,
   18 KB. `swap` means the page is readable before it arrives. */
@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/archivo-narrow-latin.woff2") format("woff2");
}

/* Tokens: light is the base, dark is separately stepped (not an inverted flip). */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --plane: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --pole-pos: #2a78d6;   /* diverging: above average */
  --pole-neg: #e34948;   /* diverging: below average */
  --neutral-mid: #f0efec;
  --good: #0ca30c;
  --status-warning: #fab219;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Prose stays on the system face - it is the one the reader's OS already
     tuned. The display face carries the brand, the headings and every number,
     which is what a scoreboard is made of. */
  --display: "Archivo Narrow", var(--sans);
  --sidebar-w: 236px;    /* left nav on a wide screen */
  --topbar-h: 54px;      /* the slim bar it collapses to on a phone */

  /* One radius per role, so a card, a button and a tile are visibly the same
     family rather than five hand-picked numbers. */
  --r-card: 14px;
  --r-ctl: 9px;
  --r-pill: 999px;

  /* One elevation step, and a second for the thing under the pointer. Subtle
     on purpose: depth here is meant to say "this is a surface", not to drop a
     card onto the page from a height. --lift-3 is for the few things that
     genuinely float over the page - a drawer, a menu, a popover. */
  --lift-1: 0 1px 2px rgba(11, 11, 11, .05), 0 2px 6px rgba(11, 11, 11, .05);
  --lift-2: 0 2px 4px rgba(11, 11, 11, .07), 0 8px 18px rgba(11, 11, 11, .09);
  --lift-3: 0 10px 28px rgba(11, 11, 11, .17);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --plane: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --pole-pos: #3987e5;
    --pole-neg: #e66767;
    --neutral-mid: #383835;
    --status-warning: #fab219;
    /* A shadow on a dark plane has to be darker than the plane to read at all,
       so these are deeper rather than the same values reused. */
    --lift-1: 0 1px 2px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .30);
    --lift-2: 0 2px 4px rgba(0, 0, 0, .44), 0 8px 18px rgba(0, 0, 0, .40);
    --lift-3: 0 10px 28px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --pole-pos: #3987e5;
  --pole-neg: #e66767;
  --neutral-mid: #383835;
  --status-warning: #fab219;
  --lift-1: 0 1px 2px rgba(0, 0, 0, .38), 0 2px 6px rgba(0, 0, 0, .30);
  --lift-2: 0 2px 4px rgba(0, 0, 0, .44), 0 8px 18px rgba(0, 0, 0, .40);
  --lift-3: 0 10px 28px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--plane);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.45;
}
/* The sidebar is fixed, so the page shell is inset by its width rather than
   sharing a grid with it. Under 900px that inset becomes a top one instead. */
body { padding-left: var(--sidebar-w); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 16px 64px; }

/* ---- every number on the site ----
   Condensed, lining, tabular. Tabular so a column of them lines up and a score
   ticking 9 -> 10 does not shove the rest of the card sideways; lining because
   Archivo Narrow ships old-style figures too and a scoreboard wants neither
   descenders nor ambiguity. */
.tile .value, .rk, td.pts-cell, .side .pts, .side .rec, .pay,
.slot .sd, .slot .wl, .prob .end, .prob-caption, .total, .meta,
.scoreline input, .peek-table td, .breakline, th, .champ .who {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- masthead: the brand at a size worth having ----
   The sidebar mark is 28px because it is navigation. This is the front door. */
.masthead {
  display: flex; align-items: center; gap: 16px;
  padding: 4px 0 20px; margin-bottom: 18px;
  border-bottom: 1px solid var(--grid);
}
.masthead img { width: 58px; height: 58px; border-radius: var(--r-ctl); flex: none; }
.masthead-name {
  font-family: var(--display); font-size: 34px; font-weight: 700;
  line-height: 1.02; letter-spacing: -0.005em;
}
.masthead-line {
  margin: 5px 0 0; max-width: 44ch;
  font-size: 14px; line-height: 1.45; color: var(--text-secondary);
}

/* ---- header: one row - page title left, stats and controls right ---- */
header { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 16px; }
.titles { min-width: 0; }          /* so a long title wraps instead of shoving the controls off */
h1 {
  font-family: var(--display); font-size: 27px; font-weight: 700;
  margin: 0; line-height: 1.1; letter-spacing: -0.005em;
}
.sub { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.spacer { flex: 1; }

/* Stat tile - a number with no plot, so no hover layer. Compact here because it
   now shares one row with the title and every control. */
.tile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-ctl); padding: 5px 12px; min-width: 92px;
  box-shadow: var(--lift-1);
}
.tile .value {
  font-family: var(--display); font-size: 23px; font-weight: 700;
  line-height: 1.15; letter-spacing: -0.01em;
}
.tile .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

button {
  font: inherit; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 6px 11px;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
button:hover:not(:disabled) { border-color: var(--baseline); box-shadow: var(--lift-1); }
button.ghost { background: transparent; }

/* ---- tabs ---- */
nav.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--grid); margin-bottom: 18px; }
nav.tabs button {
  border: none; background: none; border-radius: 0; padding: 9px 14px;
  color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
nav.tabs button[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--pole-pos); font-weight: 600; }

/* ---- week strip ---- */
.weeks { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.weeks button {
  padding: 4px 10px; min-width: 40px;
  font-family: var(--display); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.weeks button[aria-current="true"] { background: var(--pole-pos); color: #fff; border-color: transparent; font-weight: 600; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.toolbar .note { color: var(--muted); font-size: 12px; }

/* ---- games ---- */
.game {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--lift-1);
  padding: 12px 14px; margin-bottom: 10px;
}
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }

/* Team panel: the club's colour is a wash behind an oversized logo. Text stays on
   ink tokens so it is legible whatever the club colour happens to be. */
.side {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 84px; padding: 12px 14px 12px 78px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-card); width: 100%;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--team) 26%, var(--surface-1)) 0%,
                           var(--surface-1) 62%);
  /* The panel carries two independent shadow layers - the picked rail and the
     hover lift - and a panel can be both at once. Declaring box-shadow once and
     letting each layer cascade as its own property is what keeps them
     independent; writing the whole stack out in each state means the more
     specific state silently erases the other one's layer. */
  --rail: 0 0 0 0 transparent;
  --elev: 0 0 0 0 transparent;
  box-shadow: var(--rail), var(--elev);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease,
              transform .18s ease;
}
.side.away {
  text-align: right; align-items: flex-end;
  padding: 12px 78px 12px 14px;
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--team) 26%, var(--surface-1)) 0%,
                            var(--surface-1) 62%);
}
.side .badge {
  position: absolute; top: 50%; left: 12px; transform: translateY(-50%);
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}
.side.away .badge { left: auto; right: 12px; }
.side:hover:not(:disabled) { border-color: var(--baseline); --elev: var(--lift-2); }
.side .nm { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.15; }
.side .loc { font-size: 11px; color: var(--text-secondary); }
.side .rec { font-size: 12px; color: var(--muted); }
/* What the pick pays. One step quieter than the record above it: it must inform
   the choice, not compete with the club's name or colour. */
.side .pay { font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--muted); }
.draw-pill .pay { font-size: 11px; color: var(--muted); margin-left: 5px; }
/* Once the fixture grades, the same label stops advertising and starts
   reporting: what it would have paid becomes what it did. Never colour alone -
   the sign carries it, and the pill in the scorebar already says hit or miss. */
.side .pay.won, .draw-pill .pay.won { color: var(--text-primary); font-weight: 700; }
.side .pay.missed, .draw-pill .pay.missed { color: var(--muted); text-decoration: line-through; }

/* ---- the pick ----
   The core act of the whole site, so it is allowed to look decided: the club's
   own colour washed properly across its side, a solid rail down the outer edge
   in that colour, a ring, a check and a lift. The wash still fades out before
   the text, because the name has to stay legible on top of forty different club
   colours across two themes - the rail is what carries the full-strength hue.
   The ring is an inset shadow rather than a thicker border so nothing on the
   card moves by a pixel when you pick. */
.side[aria-pressed="true"] {
  border-color: var(--good);
  --rail: inset 0 0 0 1px var(--good), inset 7px 0 0 var(--team);
  --elev: var(--lift-2);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--team) 52%, var(--surface-1)) 0%,
                           color-mix(in srgb, var(--team) 20%, var(--surface-1)) 38%,
                           var(--surface-1) 74%);
}
.side.away[aria-pressed="true"] {
  --rail: inset 0 0 0 1px var(--good), inset -7px 0 0 var(--team);
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--team) 52%, var(--surface-1)) 0%,
                            color-mix(in srgb, var(--team) 20%, var(--surface-1)) 38%,
                            var(--surface-1) 74%);
}
.side[aria-pressed="true"] .nm::after { content: " ✓"; color: var(--good); }
/* The scoreline is the loudest thing on the card, which is what it is on a
   broadcast scoreboard too. */
.side .pts {
  position: absolute; top: 6px; right: 12px;
  font-family: var(--display); font-size: 34px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1;
}
.side.away .pts { right: auto; left: 12px; }
/* A scoreline that size needs the room kept for it, and only while there is one
   to show - a fixture that has not kicked off should not carry a gap where a
   number is going to be. */
.side:has(.pts) { padding-right: 56px; }
.side.away:has(.pts) { padding-right: 78px; padding-left: 56px; }
.side.lost { opacity: .62; }
.side.lost .pts { color: var(--text-secondary); font-weight: 600; }
.vs {
  align-self: center; font-family: var(--display); font-weight: 600;
  color: var(--muted); font-size: 13px; padding: 0 2px;
}

/* Score / status strip */
.scorebar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12px; color: var(--text-secondary);
}
.pill {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--border);
}
.pill.live { border-color: var(--status-warning); color: var(--text-primary); }
.pill.live::before { content: "● "; color: var(--status-warning); }
/* A game in progress is the one thing on the page that is changing while you
   look at it, so the badge breathes. Slow, opacity only, and off entirely when
   motion is not wanted - the word "Live" and the dot are still there either way,
   so nothing depends on the animation running. */
@media (prefers-reduced-motion: no-preference) {
  .pill.live::before { animation: live-breathe 2.4s ease-in-out infinite; }
}
@keyframes live-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .38; }
}
.pill.final { color: var(--muted); }
.pill.hit { border-color: var(--good); color: var(--text-primary); }
.pill.hit::before { content: "✓ "; color: var(--good); }
.pill.miss { border-color: var(--pole-neg); color: var(--text-primary); }
.pill.miss::before { content: "✗ "; color: var(--pole-neg); }

.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; align-items: center; }

.meta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; font-size: 12px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.meta .k { color: var(--muted); }

/* Win-probability bar: club colours, hard-separated, directly labelled.
   The slit is a real gap showing a near-black track through it, so two clubs in
   similar colours still read as two segments. */
.prob-wrap { margin-top: 9px; }
.prob { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.prob-wrap .prob { margin-top: 0; }
.prob .end {
  font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; min-width: 62px;
}
.prob .end.r { text-align: right; }
.prob .track {
  flex: 1; display: flex; gap: 3px;
  height: 10px; border-radius: 5px; overflow: hidden;
  background: #0b0b0b;
}
.prob .seg { height: 100%; min-width: 2px; }
.prob .seg.draw {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .35);
}
.prob-caption {
  text-align: center; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}

/* ---- tables: a scoreboard, not a spreadsheet ---- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-family: var(--display); font-size: 12px; color: var(--muted);
     text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
     padding: 6px 8px; border-bottom: 1px solid var(--baseline); }
td { padding: 7px 8px; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
td.team { display: flex; align-items: center; gap: 8px; }
td.team img { width: 22px; height: 22px; }
/* Position, at a size you can find with your eye rather than read. */
.rk {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text-secondary); width: 38px;
}

/* Points, with the standing drawn behind the digits. `--fill` is a share of the
   leader's total, set by scoreboard.js from the numbers already on the page;
   with no script it is 0 and the cell is exactly what it was before.
   z-index -1 under an isolated cell puts the bar over the row's background and
   under its own text, which is the one arrangement that needs no extra element
   wrapped around the number. */
td.pts-cell {
  position: relative; isolation: isolate;
  font-family: var(--display); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; padding-left: 10px;
}
td.pts-cell::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 3px; bottom: 3px;
  width: calc(var(--fill, 0) * 1%); border-radius: 0 3px 3px 0;
  background: color-mix(in srgb, var(--pole-pos) 24%, transparent);
}

/* The top three. Weight and a rule, never colour: the podium has to survive a
   greyscale print and a colour-blind reader, same as every other state here.
   The rule under third place is where the podium ends. */
tr.lead-1 td, tr.lead-2 td, tr.lead-3 td { font-weight: 650; }
tr.lead-1 td { font-weight: 750; }
tr.lead-1 .rk { font-size: 23px; }
tr.lead-2 .rk { font-size: 21px; }
tr.lead-1 td:first-child { box-shadow: inset 3px 0 0 var(--text-primary); }
tr.lead-2 td:first-child { box-shadow: inset 2px 0 0 var(--text-secondary); }
tr.lead-3 td:first-child { box-shadow: inset 1px 0 0 var(--muted); }
tr.lead-3 td { border-bottom: 2px solid var(--baseline); }
.diverge { position: relative; height: 16px; min-width: 200px; }
.diverge .axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--baseline); }
.diverge .bar { position: absolute; top: 3px; height: 10px; border-radius: 3px; }
.diverge .bar.pos { left: 50%; background: var(--pole-pos); border-radius: 0 4px 4px 0; }
.diverge .bar.neg { right: 50%; background: var(--pole-neg); border-radius: 4px 0 0 4px; }

/* ---- standings & seeds ---- */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; }
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--lift-1); padding: 14px 16px;
}
.card h3 {
  margin: 0 0 8px; font-family: var(--display); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
.seed-kind { font-size: 11px; color: var(--muted); }
.bye { color: var(--good); font-size: 11px; font-weight: 600; }
/* Nothing here yet is a state the page is in, not an error, so it gets a shape
   of its own rather than a stranded grey sentence. */
.empty {
  color: var(--text-secondary); padding: 30px 20px; margin: 6px 0;
  text-align: center; font-size: 14px;
  border: 1px dashed var(--baseline); border-radius: var(--r-card);
}
/* ---- playoff bracket ---- */
.bracket {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch;
  overflow-x: auto; padding-bottom: 8px;
}
.conf { display: flex; gap: 12px; }
.conf.nfc { flex-direction: row-reverse; }
.round { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 168px; flex: 1; }
.round-label {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  text-align: center; margin-bottom: 2px;
}
.tie {
  border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden;
  background: var(--surface-1); box-shadow: var(--lift-1);
}
.tie.pending { opacity: .5; box-shadow: none; }
.slot {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 9px;
  border: none; border-radius: 0; background: transparent; text-align: left;
  border-left: 3px solid transparent;
}
.slot + .slot { border-top: 1px solid var(--grid); }
.slot:hover:not(:disabled) { background: var(--neutral-mid); }
.slot { transition: background .14s ease, transform .14s ease; }
.slot:disabled { cursor: default; }
.slot img { width: 20px; height: 20px; flex: none; }
.slot .sd { font-family: var(--display); font-size: 13px; font-weight: 700;
            color: var(--muted); width: 14px; }
.slot .tn { font-family: var(--display); font-weight: 700; font-size: 15px; }
.slot .wl { margin-left: auto; font-family: var(--display); font-size: 12px; color: var(--muted); }
/* An advanced team gets the rule it always had, plus weight and a fill, so it
   reads as advanced on a greyscale screen too. The rule stays 3px: widening it
   would shunt the row's contents a pixel sideways on every pick. */
.slot[aria-pressed="true"] { border-left-color: var(--good); background: var(--neutral-mid); }
.slot[aria-pressed="true"] .tn::after { content: " ✓"; color: var(--good); }
.slot .tbd { color: var(--muted); font-size: 12px; font-style: italic; }

.final { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 210px; }
.final .tie { border-width: 2px; }
.champ {
  text-align: center; padding: 12px; border-radius: var(--r-card);
  border: 1px solid var(--border); background: var(--surface-1);
  box-shadow: var(--lift-1);
}
.champ .who { font-family: var(--display); font-size: 21px; font-weight: 700; margin-top: 4px; }
.champ img { width: 40px; height: 40px; }
.scorebox { display: flex; flex-direction: column; gap: 6px; }
.scoreline { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.scoreline input {
  width: 58px; font-family: var(--display); font-size: 19px; font-weight: 700;
  padding: 3px 7px; text-align: right;
  border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--surface-1); color: var(--text-primary);
}
.scoreline .who { flex: 1; }
.total { font-family: var(--display); font-size: 14px; font-weight: 600;
         color: var(--text-secondary); text-align: center; }
/* Status cue: icon + words, never colour alone. */
.warn { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--text-secondary);
        border-left: 3px solid var(--status-warning); padding: 6px 9px; background: var(--surface-1);
        border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.warn .ic { color: var(--status-warning); font-weight: 700; }

@media (max-width: 860px) {
  .bracket { grid-template-columns: 1fr; }
  .conf, .conf.nfc { flex-direction: column; }
  .round { min-width: 0; }
}

.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; align-items: center; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* ---- Champions League ---- */
nav.tabs .crosslink {
  margin-left: auto; align-self: center; padding: 9px 14px;
  color: var(--text-secondary); text-decoration: none; font-size: 14px;
}
nav.tabs .crosslink:hover { color: var(--text-primary); }


/* Qualification zones: a left rule plus the position number, never colour alone. */
tr.zone-r16 td.team { box-shadow: inset 3px 0 0 var(--good); }
tr.zone-playoff td.team { box-shadow: inset 3px 0 0 var(--pole-pos); }
tr.zone-out td.team { box-shadow: inset 3px 0 0 var(--neutral-mid); }
.note { color: var(--muted); font-size: 12px; margin-top: 10px; display: block; }

/* Domestic origin: flag plus how the club qualified. */
.flag {
  width: 18px; height: 13px; object-fit: cover; border-radius: 2px;
  border: 1px solid var(--border); flex: none;
}
.side .qual {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-secondary);
}
.side.away .qual { flex-direction: row-reverse; }
td.via { display: flex; align-items: center; gap: 7px; font-size: 12px;
         color: var(--text-secondary); white-space: nowrap; }

/* ---- NHL: day navigation ---- */
.daynav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.daynav select {
  font: inherit; padding: 6px 10px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
}
h2.conf-head {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-secondary); margin: 22px 0 10px;
}

/* ---- site navigation: sidebar on a wide screen, top bar + drawer on a phone ----
   One element, two shapes. The wide form needs no open/closed state at all: the
   competitions are simply always on screen. */
.sidebar {
  position: fixed; z-index: 50; inset: 0 auto 0 0; width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--surface-1); border-right: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
}

.sidebar-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 10px; }
.brand {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  text-decoration: none; color: var(--text-primary);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
}
.brand img { border-radius: var(--r-ctl); flex: none; }
.menubtn { display: none; }        /* wide screens have the list itself, not a button */

.navdrawer { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 18px; }
.navlist { display: flex; flex-direction: column; gap: 1px; }
.navlist a, .navsub {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 11px; border-radius: var(--r-ctl); text-decoration: none;
  color: var(--text-secondary); font-size: 14px; border: none; background: none;
  text-align: left; cursor: pointer;
}
.navlist a:hover, .navsub:hover { background: var(--neutral-mid); color: var(--text-primary); }
/* Current page: weight and a left rule, so it does not depend on colour alone. */
.navlist a.here {
  background: var(--neutral-mid); color: var(--text-primary); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--pole-pos);
}
/* Separated from the competitions by a rule: it is not a place to play. */
.navfoot {
  display: flex; flex-direction: column; gap: 1px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.navfoot a, .navfoot a.here {
  display: block; padding: 9px 11px; border-radius: var(--r-ctl); text-decoration: none;
  color: var(--muted); font-size: 13px;
}
.navfoot a:hover { background: var(--neutral-mid); color: var(--text-primary); }
.navfoot a.here {
  background: var(--neutral-mid); color: var(--text-primary); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--pole-pos);
}

.navsub .caret { color: var(--muted); font-size: 11px; transition: transform .15s; }
.navgroup.open > .navsub .caret { transform: rotate(180deg); }

.navsublist {
  display: none; margin: 1px 0 3px 21px; padding-left: 7px;
  border-left: 1px solid var(--grid);
}
.navgroup.open > .navsublist { display: flex; flex-direction: column; gap: 1px; }
.navsublist a { font-size: 13px; padding: 7px 10px; }

.scrim { display: none; }

@media (max-width: 899px) {
  /* The sidebar would eat half a phone screen, so it becomes a bar and a drawer.
     env() keeps the bar clear of the notch: this is installed to a home screen,
     where black-translucent puts the page under the status bar. */
  :root { --bar: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }
  body { padding-left: 0; padding-top: var(--bar); }

  .sidebar {
    inset: 0 0 auto 0; width: auto; height: var(--bar);
    flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .sidebar-head { padding: 0 12px; flex: 1; }
  .menubtn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1; padding: 6px 11px; flex: none;
  }

  .navdrawer {
    position: fixed; top: var(--bar); left: 0; bottom: 0; z-index: 2;
    width: 272px; max-width: 82vw; padding: 12px 10px 24px;
    background: var(--surface-1); border-right: 1px solid var(--border);
    box-shadow: var(--lift-3);
    /* visibility, not just the transform: a drawer that is off-screen must also
       be out of the tab order, or Tab walks into links nobody can see. */
    visibility: hidden; transform: translateX(-100%);
    transition: transform .18s ease-out, visibility .18s;
  }
  .sidebar.open .navdrawer { visibility: visible; transform: none; }

  /* Below the drawer: it comes after it in the DOM and would otherwise veil it. */
  .scrim {
    display: block; position: fixed; top: var(--bar); left: 0; right: 0; bottom: 0; z-index: 1;
    background: rgba(0, 0, 0, .42);
    opacity: 0; pointer-events: none; transition: opacity .18s;
  }
  .sidebar.open .scrim { opacity: 1; pointer-events: auto; }
}

/* ---- on a phone ----
 *
 * 390px, which is what this is used on and installed to. Two club panels and a
 * scoreline share about 160px each, so the badge and the numerals both give
 * ground - but the club's name does not, because that is the thing being
 * chosen. The score stays the loudest item on the card, just at a size the card
 * can hold.
 */
@media (max-width: 560px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .matchup { gap: 6px; }

  .side { min-height: 74px; padding: 10px 12px 10px 56px; }
  .side.away { padding: 10px 56px 10px 12px; }
  .side .badge { width: 42px; height: 42px; left: 8px; }
  .side.away .badge { left: auto; right: 8px; }
  .side .nm { font-size: 15px; }
  .side .pts { font-size: 27px; top: 5px; right: 9px; }
  .side.away .pts { right: auto; left: 9px; }
  .side:has(.pts) { padding-right: 40px; }
  .side.away:has(.pts) { padding-right: 56px; padding-left: 40px; }
  .side[aria-pressed="true"] { --rail: inset 0 0 0 1px var(--good), inset 5px 0 0 var(--team); }
  .side.away[aria-pressed="true"] { --rail: inset 0 0 0 1px var(--good), inset -5px 0 0 var(--team); }

  .masthead { gap: 12px; padding-bottom: 16px; margin-bottom: 14px; }
  .masthead img { width: 46px; height: 46px; }
  .masthead-name { font-size: 27px; }
  .masthead-line { font-size: 13px; }
  h1 { font-size: 23px; }

  /* Tables are the other thing that has to fit: trim the gutters rather than
     the numbers. */
  td, th { padding-left: 5px; padding-right: 5px; }
  .rk { width: 30px; font-size: 17px; }
  tr.lead-1 .rk { font-size: 20px; }
  tr.lead-2 .rk { font-size: 19px; }
  td.pts-cell { font-size: 16px; }
}

/* ---- motion ----
 *
 * Everything that moves lives in here, behind the same query, so there is one
 * place to look rather than a guard bolted onto each rule. Nothing below carries
 * meaning on its own: the pick is already a ring, a rail and a check before any
 * of this runs, and the live badge already says "Live".
 */
@media (prefers-reduced-motion: no-preference) {
  .side:hover:not(:disabled), .slot:hover:not(:disabled), .card button:hover:not(:disabled) {
    transform: translateY(-1px);
  }
  .side:active:not(:disabled) { transform: translateY(0) scale(.994); }

  /* Acknowledging the pick. The button that was clicked no longer exists by the
     time this runs - the server's answer rebuilds the view - so scoreboard.js
     hands the note to whichever control the pick landed on, once. A refresh
     five minutes later finds no note and nothing moves. */
  .side.just-picked { animation: pick-lands .26s cubic-bezier(.2, .75, .3, 1); }
}

@keyframes pick-lands {
  0% { transform: scale(.976); }
  62% { transform: scale(1.007); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .navdrawer, .scrim, .navsub .caret, .side, .slot, button { transition: none; }
}

.title-flag { width: 22px; height: 16px; vertical-align: -2px; margin-right: 8px; }

/* Draw is a small toggle in the metadata row, not a block between the clubs. */
.draw-pill {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 10px; border-radius: var(--r-pill); background: transparent;
  border: 1px solid var(--border); color: var(--text-secondary);
}
.draw-pill:hover { border-color: var(--baseline); color: var(--text-primary); }
.draw-pill[aria-pressed="true"] {
  border-color: var(--good); color: var(--text-primary); font-weight: 700;
}

/* Real results vs projection */
.mode-wrap { margin-bottom: 14px; }
.modes { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r-ctl);
         overflow: hidden; }
.modes .mode {
  border: none; border-radius: 0; background: var(--surface-1);
  color: var(--text-secondary); font-size: 13px; padding: 7px 14px;
}
.modes .mode + .mode { border-left: 1px solid var(--border); }
.modes .mode:hover { color: var(--text-primary); }
.modes .mode[aria-pressed="true"] {
  background: var(--pole-pos); color: #fff; font-weight: 650;
}
.mode-note { font-size: 12px; color: var(--muted); margin-top: 6px; max-width: 66ch; }
.pill.locked { border-color: var(--baseline); color: var(--muted); }
.pill.locked::before { content: "🔒 "; }

/* ---- account strip ---- */
.account { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.whoami { display: flex; flex-direction: column; line-height: 1.25; font-size: 13px; font-weight: 650; }
.whoami-contact { font-size: 11px; font-weight: 400; color: var(--muted); }
.unverified {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--status-warning); border: 1px solid var(--status-warning);
  border-radius: var(--r-pill); padding: 0 5px;
}
.authform {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 45; width: 268px;
  display: flex; flex-direction: column; gap: 9px; padding: 13px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--lift-3);
}
.authtabs { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; }
.authtabs button {
  flex: 1; border: none; border-radius: 0; background: var(--surface-1);
  color: var(--text-secondary); font-size: 12px; padding: 6px 8px;
}
.authtabs button + button { border-left: 1px solid var(--border); }
.authtabs button[aria-pressed="true"] { background: var(--pole-pos); color: #fff; font-weight: 650; }
.authfield { display: flex; flex-direction: column; gap: 4px; font-size: 11px;
             color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.authfield input {
  font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0;
  color: var(--text-primary); background: var(--plane);
  border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 7px 9px;
}
.authform button[type="submit"] {
  background: var(--pole-pos); color: #fff; border-color: transparent; font-weight: 650;
}
.autherror { font-size: 12px; color: var(--pole-neg); }
.authnote { font-size: 11px; color: var(--muted); }
a.unverified { text-decoration: none; }
.verified {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--pole-pos); border: 1px solid var(--pole-pos);
  border-radius: var(--r-pill); padding: 0 5px;
}

/* ---- verify / reset pages ---- */
/* The same fields as the sign-in dropdown, but in the page rather than floating
   over it: these are whole screens, not a menu. */
.codeform { display: flex; flex-direction: column; gap: 9px; max-width: 340px; }
.codeform button[type="submit"] {
  background: var(--pole-pos); color: #fff; border-color: transparent; font-weight: 650;
}
.contactrow { max-width: 420px; margin-bottom: 12px; }
.contacthead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.contactvalue { font-family: var(--display); font-size: 17px; font-weight: 700; }

/* ---- friends & leagues ---- */
.addbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.addbar input, .addbar select, .toolbar select {
  font: inherit; font-size: 14px; padding: 7px 10px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
}
.addbar input { min-width: 190px; }
.person { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          padding: 9px 2px; border-bottom: 1px solid var(--grid); }
.person:last-child { border-bottom: none; }
.person-name { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.person-actions { display: flex; gap: 6px; }
.avatar {
  width: 26px; height: 26px; border-radius: var(--r-pill); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pole-pos); color: #fff;
  font-family: var(--display); font-size: 13px; font-weight: 700;
}
.league-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.league-head h3 { margin: 0 0 2px; font-family: var(--display); font-size: 19px;
                  font-weight: 700; text-transform: none; letter-spacing: 0;
                  color: var(--text-primary); }
.league-sub { font-size: 12px; color: var(--muted); }
.codebtn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
tr.me td { background: color-mix(in srgb, var(--pole-pos) 12%, transparent); }
.notice { font-size: 13px; color: var(--good); margin-bottom: 10px; }

/* Which pick set you are looking at */
.entrybar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.entrylabel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.entrybar select {
  font: inherit; font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
}

/* Someone else's picks, opened from their name in a league table.
 *
 * The panel is positioned rather than inline so a long season does not push the
 * rest of the table down the page, and it is padded-and-bridged like the nav
 * menu so the pointer can travel into it without crossing dead space. */
td.team.peekwrap { position: relative; overflow: visible; }
.peekname {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-align: left;
}
.peekname:hover span:not(.avatar) { text-decoration: underline; }
.peekname .caret { color: var(--muted); font-size: 11px; }
.peek {
  display: none; position: absolute; z-index: 30; top: 100%; left: 0; min-width: 330px;
  max-width: min(560px, 88vw); max-height: 340px; overflow-y: auto;
  margin-top: 6px; padding: 11px 13px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--lift-3);
}
.peekwrap.open .peek { display: block; }
.peek-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
             margin-bottom: 8px; }
.peek-sub { font-size: 12px; color: var(--muted); }
.peek-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.peek-table td, .peek-table th { padding: 5px 7px; font-size: 12px; }
.peek-table tr.hit td:first-child { box-shadow: inset 2px 0 var(--good); }
.peek-table tr.miss td:first-child { box-shadow: inset 2px 0 var(--pole-neg); }

/* World leaderboard */
tr.detail > td { background: var(--plane); }
td.breakdown { padding: 4px 10px 10px; }

/* Which kind of league this is. Sealed is the quiet default; open book is the
   one that changes behaviour, so it gets the warning colour rather than an
   approving green - it is a disclosure, not an achievement. */
.book {
  font-family: var(--display); font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap;
}
.book.sealed { background: var(--neutral-mid); color: var(--text-secondary); }
.book.open { background: color-mix(in srgb, var(--status-warning) 22%, transparent);
             color: var(--text-primary); }
.league-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
              margin: 12px 0 4px; }
.checkbar { display: flex; align-items: center; gap: 7px; font-size: 13px;
            color: var(--text-secondary); }
.checkbar input { width: 15px; height: 15px; }
.joinbox { margin: 12px 0; border-color: var(--baseline); }
.peek-head .book { margin-left: 8px; }
.breakline { font-size: 12px; color: var(--text-secondary); }
.shared-picks { margin-top: 10px; }
.peek-inline { margin-top: 6px; }
tr.gap td { text-align: center; color: var(--muted); padding: 2px 8px; }
tr.pinned td { border-top: 2px solid var(--pole-pos); }
.settings { flex-basis: 100%; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-card);
            background: var(--surface-1); border: 1px solid var(--border); max-width: 420px; }
.settings .authnote { margin-top: 6px; }

/* How to play: long-form prose, which nothing else on the site is. Measure is
   capped because a rule read across 1000px is a rule nobody finishes. */
.prose { max-width: 68ch; }
.prose h2 {
  font-family: var(--display); font-size: 21px; font-weight: 700; margin: 26px 0 8px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.prose h2:first-child { margin-top: 4px; padding-top: 0; border-top: none; }
.prose p { margin: 0 0 10px; line-height: 1.6; color: var(--text-secondary); }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 6px; line-height: 1.55; color: var(--text-secondary); }
.prose strong { color: var(--text-primary); font-weight: 650; }
.prose a { color: var(--pole-pos); }
.prose .note {
  font-size: 13px; color: var(--muted); border-left: 2px solid var(--border);
  padding-left: 12px; margin-top: 14px;
}