/* Base: reset, the page, focus, type. Tokens only (tokens.css loads first). */
/* Fredoka (display, numerals) and Figtree (interface): variable weight, latin and latin-ext subsets, self-hosted from public/fonts. */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-300-700-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-300-700-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-300-900-latin-ext.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-300-900-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--control-h) + var(--space-6)); scroll-padding-bottom: calc(var(--bar-h) + var(--space-5) + env(safe-area-inset-bottom)); }
body {
  margin: 0;
  background: var(--floodlight), var(--surface-page);
  background-attachment: fixed;
  color: var(--text-strong);
  font: var(--type-body);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: inline-block; flex: none; vertical-align: -0.2em; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-xs); }
::selection { background: var(--accent); color: var(--text-on-accent); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Headings take their style from the tag. Round Fredoka, tight and friendly: the voice of the wordmark. */
h1, .h-page { font: var(--type-h1); letter-spacing: var(--tracking-display); text-wrap: balance; }
h2, .h-section { font: var(--type-h2); letter-spacing: var(--tracking-display); text-wrap: balance; }
h3, .h-item { font: var(--type-h3); font-size: var(--fs-body); line-height: var(--lh-label); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); text-wrap: pretty; }
.label { font: var(--type-label); }
.caption { font: var(--type-caption); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-subtle); }
.up { color: var(--text-up); }
.down { color: var(--text-down); }
.accent { color: var(--text-accent); }
.warn { color: var(--text-warning); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Numerals: Fredoka, tabular. Every score, rating, rank and point total uses these. */
.num { font-family: var(--font-display); font-weight: var(--weight-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--tracking-numeral); line-height: var(--lh-num); }
.num--s { font-size: var(--fs-num-s); }
.num--m { font-size: var(--fs-num-m); }
.num--l { font-size: var(--fs-num-l); }
.num--xl { font-size: var(--fs-num-xl); }
.num--2xl { font-size: var(--fs-num-2xl); }
.num--3xl { font-size: var(--fs-num-3xl); }

/* Small caps label for table heads and tile captions only. Never above a heading. */
.eyebrow { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }

/* Layout utilities */
.stack { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.stack--lg { gap: var(--space-5); }
.stack--sm { gap: var(--space-2); }
.stack--xs { gap: var(--space-1); }
.cluster { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cluster--between { justify-content: space-between; }
.cluster--wrap { flex-wrap: wrap; }
.cluster--tight { gap: var(--space-2); }
.cluster--center { justify-content: center; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; align-items: center; }

.skip { position: absolute; left: -999px; top: var(--space-2); z-index: var(--z-toast); background: var(--surface-inverse); color: var(--text-inverse); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-weight: var(--weight-bold); }
.skip:focus { left: var(--space-2); }