/* Archivo, self-hosted: weights 400–900, widths 62–125%, ASCII plus · ½ – ’ … */
@font-face {
  font-family: 'Archivo';
  src: url(fonts/archivo.woff2) format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --blue: oklch(0.27 0.11 263);
  --ink: oklch(0.97 0.01 263);
  --muted: oklch(0.8 0.05 263);
  --faint: oklch(0.7 0.06 263);
  --rule: oklch(0.36 0.1 263);
  --good: oklch(0.86 0.14 155);
  --bad: oklch(0.78 0.13 25);
  --half: oklch(0.88 0.12 90);
  --tint: oklch(0.33 0.12 263);
  --raised: oklch(0.42 0.11 263);
  --font: 'Archivo', system-ui, -apple-system, sans-serif;

  /* Spacing scale. Fixed, like the column: s1–s2 inside a block, s3–s4
     between blocks (rows, groups, hero to picks), s5 between sections. */
  --s1: 8px;
  --s2: 12px;
  --s3: 20px;
  --s4: 32px;
  --s5: 48px;
  --s6: 72px;
}
* { box-sizing: border-box; }
html { background: var(--blue); }
body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font: 400 17px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Page: one column at every width. Masthead strip, the night (hero + picks),
   then the standings below a rule. */
.page {
  max-width: 664px; /* a 600px column plus gutters */
  margin: 0 auto;
  padding: max(var(--s3), env(safe-area-inset-top)) var(--s3) var(--s5);
}
.night, .leafs { container-type: inline-size; }
.night { margin-top: var(--s5); }
.night > section + section { margin-top: var(--s4); } /* the picks hang off the tally */
.picks:has(> #games:empty) { display: none; } /* no games, or none that matter */
.leafs { margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--rule); }
@media (min-width: 960px) {
  .page { padding: var(--s4) var(--s4) var(--s6); }
}

/* One label style for every heading and column head on the page */
h2, .cols, .race th {
  font: 600 13px/1.3 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
h2 { margin: 0; }

/* Masthead: a slim identity strip */
.mast { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; }
/* The crest SVG has built-in padding; pull it so the leaf sits on the column edge. */
.crest { grid-row: span 2; width: clamp(44px, 4vw, 56px); height: auto; margin-left: -10px; }
h1 {
  margin: 0;
  align-self: end;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1;
}
.status { margin: 4px 0 0; align-self: start; color: var(--muted); font-size: clamp(14px, 1.2vw, 17px); text-wrap: balance; }
.status b { color: var(--ink); font-weight: 600; }
.skel { display: inline-block; width: 220px; height: 1em; border-radius: 4px; background: var(--rule); vertical-align: middle; }
.skel.big { width: 3.2em; height: .8em; }
.alert { margin: var(--s3) 0 0; padding: var(--s2); border: 1px solid var(--bad); border-radius: 8px; font-size: 15px; }

/* Hero: one square per game that matters, in list order and list colours,
   captioned by the count that went our way. Squares shrink to fit a busy night. */
.meter { display: flex; align-items: flex-start; gap: 4px; margin-top: var(--s2); }
.meter[hidden] { display: none; }
.meter i {
  flex: 0 1 56px; min-width: 0; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--rule);
  font: normal 800 16px/1 var(--font);
  color: var(--blue);
}
.meter .done.good { background: var(--good); }
.meter .done.mixed { background: var(--half); }
.meter .done.bad { background: var(--bad); }
.meter .live { box-shadow: inset 0 0 0 2px var(--ink); }
.meter .live.good { box-shadow: inset 0 0 0 2px var(--good); }
.meter .live.mixed { box-shadow: inset 0 0 0 2px var(--half); }
.meter .live.bad { box-shadow: inset 0 0 0 2px var(--bad); }
/* Pointing at a square: its game stays lit in the strip and the list, the rest dim */
.meter i, .games .row { transition: opacity .15s cubic-bezier(.25, 1, .5, 1); }
.meter.peeking i:not(.lit), .games.peeking .row:not(.lit) { opacity: .3; }
.hero { position: relative; }
.tip {
  position: absolute;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s1) var(--s2);
  border-radius: 8px;
  background: var(--raised);
  box-shadow: 0 6px 20px oklch(0.15 0.08 263 / .45);
  white-space: nowrap;
  pointer-events: none;
}
.tip[hidden] { display: none; }
.tip b { font-size: 18px; font-weight: 800; font-stretch: 75%; line-height: 1.1; }
.tip span { font-size: 14px; color: var(--muted); }
.tip .why { color: var(--ink); }
.tip .why:empty { display: none; }
.figure { margin: var(--s3) 0 0; font-size: clamp(24px, 5.5cqi, 30px); font-weight: 600; font-stretch: 75%; line-height: 1.15; }
.figure b { font-weight: 800; }
.tally { margin: var(--s1) 0 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); }
.tally:empty { display: none; }
.tally b { color: var(--ink); font-weight: 600; }
.tally span { white-space: nowrap; }
.tally span:not(:last-child)::after { content: ' ·'; }

/* Day nav: ‹ › then the day word. The arrows come first so they never move,
   whatever the word's width. Pulled left so ‹ lines up with the figure. */
.daynav { display: flex; align-items: center; margin-left: -15px; }
.daynav button {
  appearance: none; border: 0; background: none; color: var(--ink);
  min-width: 44px; height: 44px; border-radius: 22px; font-size: 24px; line-height: 1; cursor: pointer;
}
.daynav button:hover { background: var(--rule); }
.daynav button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.daynav .day {
  height: auto; padding: 0 0 0 var(--s1); border-radius: 4px; text-align: left;
  font: 700 clamp(22px, 2vw, 28px)/1 var(--font); font-stretch: 80%; color: var(--ink);
}
.daynav .day:hover { background: none; text-decoration: underline 2px; text-decoration-color: var(--faint); text-underline-offset: 6px; }
.daynav svg { display: block; margin: auto; }
.daynav .day.away { text-decoration: underline dotted 2px; text-decoration-color: var(--faint); text-underline-offset: 6px; }

/* Cheer list */
.night { transition: opacity .2s cubic-bezier(.22, 1, .36, 1); }
.night.loading { opacity: .4; }
.games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto auto 1fr; column-gap: .28em; font-size: clamp(34px, 7cqi, 52px); }
.games .pick, .games .mid, .games .rival { white-space: nowrap; }

/* Column labels: the list's own heading */
.cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  padding-bottom: var(--s2); /* labels may wrap on the narrowest phones */
}
.cols .c1 { grid-column: 1 / 3; }
.cols .c3 { grid-column: 3; }
.row + .cols.group { padding-top: var(--s4); }
.cols.group span { grid-column: 1 / -1; white-space: normal; line-height: 1.4; text-wrap: balance; }
.row:has(+ .cols.group) { border-bottom: 0; }

/* Row: pick | score-or-"vs" | rival | time */
.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1;
}
.row:last-child { border-bottom: 0; }
/* The Leafs game: always first, on a lighter band that bleeds past the column edge */
.row.ours {
  background: var(--tint);
  border-radius: 10px;
  border-bottom-color: transparent;
  box-shadow: calc(-1 * var(--s2)) 0 0 var(--tint), var(--s2) 0 0 var(--tint);
  margin-bottom: var(--s1);
}
/* The crest hangs in the band's left bleed on wide screens so TOR stays on the
   column edge; phones have no room for it. */
.row .mini { display: none; }
@media (min-width: 1000px) {
  .row.ours { box-shadow: -76px 0 0 var(--tint), var(--s3) 0 0 var(--tint); }
  .row.ours .pick { position: relative; }
  .row .mini { display: block; position: absolute; right: calc(100% + 18px); top: 50%; height: .7em; width: auto; transform: translateY(-58%); }
}
.row .mark { font-size: .5em; font-weight: 700; margin-left: .15em; vertical-align: .35em; }
.row .mark.mixed { font-size: .64em; font-weight: 800; vertical-align: .2em; }
.row .t .mark { font-size: 1.1em; margin: 0 .35em 0 0; vertical-align: 0; }
.row .pick, .row .rival { font-weight: 800; font-stretch: 68%; }
.row .rival { color: var(--faint); }
.row .mid { justify-self: center; font-size: .36em; font-weight: 500; color: var(--muted); padding: 0 .1em; }
.row .t { justify-self: end; font-size: 15px; color: var(--muted); white-space: nowrap; }
.row .t.live { color: var(--ink); font-weight: 600; }
.row.good .pick, .row.good .mark { color: var(--good); }
.row.mixed .pick, .row.mixed .mark { color: var(--half); }
.row.bad .pick, .row.bad .mark { color: var(--bad); }
.row.good .t, .row.mixed .t, .row.bad .t { font-weight: 600; }
.row.good .mid, .row.bad .mid, .row.mixed .mid { font-size: .5em; font-weight: 700; color: var(--ink); }
/* Both in the race: neither team is highlighted; only the score carries a result */
.row.both .pick, .row.both .rival, .row.both.good .pick, .row.both.bad .pick { color: var(--muted); }
.row.both.good .t .mark { color: var(--good); }
.row.both.bad .t .mark { color: var(--bad); }

/* Race table. The heading shares a line with the GP / PTS heads: both sit in
   one grid cell, and the first two header cells are empty. */
.standings { display: grid; }
.standings > h2, .standings > .race { grid-area: 1 / 1; }
.race { width: 100%; border-collapse: collapse; font-size: 17px; }
.race td { padding: 9px 0; color: var(--muted); }
.race td.n { width: 32px; color: var(--faint); font-size: 14px; }
.race td.team { font-weight: 600; }
.race td.num { text-align: right; width: 56px; }
.race th { color: var(--faint); text-align: right; padding: 0 0 var(--s1); }
.race tr.tor td { color: var(--ink); font-weight: 700; }
.race tr.cut td { border-bottom: 1px dashed var(--faint); padding-bottom: 11px; }
.race tr.cut + tr td { padding-top: 11px; }

footer { margin-top: var(--s5); color: var(--faint); font-size: 13px; }

/* Big screens: step reading text up so it holds at arm's length */
@media (min-width: 1400px) {
  body { font-size: 19px; }
  .race { font-size: 19px; }
  .row .t { font-size: 17px; }
}