/* Hallmark · shape: broadcast sheet (ruled cells, one page of results) · genre: editorial · theme: Brutal (deal 3/3, seed fantasy-football-adjacent-blind-resume-ranking-2bed·0dfb919a·2026-11-05·r0) · job: play (rank a blind six, seven rounds) · draw: 2bed·0dfb919a
 * hero: Marquee, the head over a full-width strip of six tickets, the strip resting at the base of the screen · nav: slab, the wordmark and three links on the bar under a 3px rule · footer: ink band, the wordmark over the links and the season stamp · imagery: none, the product is the picture: the cards and the board grid · signature: the slot strip, six anonymous tickets with a record at display size
 * axes: light/grotesk-heavy/chromatic-green-navy · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E5 S5 R4 V4 · weakest: H, the round bar, the progress strip and the cards all fought for the top of the section; the head dropped to section size and the strip became a 12px rule under it */
/* Hallmark · waive 44c · no page carries a side visual: the strip sits under the head, the other screens open on a head block · a slab of type on a rule is the composition, a head beside its picture is the default these screens refuse */
/* Hallmark · dismissed 77 · these are product screens, three or four objects each; a fifth section would be copy for a count */
/* Hallmark · dismissed F4 · the second fill is the pressed chip of a segmented control, a state, not a second action */
/* Hallmark · sweep: 0 FAIL, 0 WARN · 2 waived (44c hero; 77 the board's footnote) · 3 dismissed (77, F4) · 1 answer (F20) · render tier: 2 pages at 320 to 1920 · play loop driven in headless Chrome, seven rounds of six, guest and signed in */
/* Hallmark · hero-review: in-thread · 3 findings · 3 resolved · the hero shipped before any section below it */
/* Hallmark · finish-review: in-thread · 4 findings · 3 resolved · open: team logos are a handoff, the fixture ships none */
/* Hallmark · edit 2026-11-05 · palette: the acid yellow is gone; field green (signal: fills, stars, the rise) and navy (links, the chosen comparator) · the run is seven rounds of six, ranked by tapping in order · the reveal prints 25 ranked rows and the five it never placed */
/* Hallmark · waive 77 · the board's footnote, teams the comparison ranks outside your twenty-five · a footnote under the board is not a section, and giving it mass would compete with the board above it */
/* Hallmark · answered F20 · twenty-five tiles over two columns leave one on the last row; two across on a phone is fixed by the brief */
/* Hallmark · edit 2026-11-05 · the simulated BCS nominates each pool rather than seeding an order: every ranked row carries its BCS position and its move, ranks print 1..25, and the five never placed list apart under their BCS position only, the week rides in the subhead and the export name */
/* Hallmark · sweep 2026-11-05 · 0 FAIL · 2 waived (44c the hero; 77 the footnote), 3 dismissed, all as at the build */
/* Hallmark · edit 2026-11-05 · the play surface: six cards in a 3x2 grid that fits 1440x900, and a one-card snap carousel under 60rem with a position counter; five taps settle a ballot and the sixth takes the last slot on its own (lift any placed card to redo); the bucket column prints its range alone; the comparison sends the played order, so a guest gets CFP, AP, Coaches and BCS; the group chip is absent for a guest */
/* Hallmark · edit 2026-11-06 · the results screen is one table: rank, logo, team, move, then CFP, AP, Coaches and BCS, set against the CFP board by default; the appearances and seed columns, the four comparison chips and the warm chips on ranks 1-3 are gone; each play card names its head-to-head against another slot in the round's own letters */
/* Hallmark · dismissed 58 · the glossary's terms band at 83 words: ten definitions, each already one clause, and the screen is the list */
/* Hallmark · sweep 2026-11-05 (second) · 0 FAIL, 0 WARN on index and board · render tier 1440x900: six cards 830px tall, the commit row at 894px; 390px: one-card carousel with snap and a position counter, no sideways page scroll · the play loop driven in headless Chrome, guest and signed in, seven rounds of six, five taps each */
/* Hallmark · palette 2026-11-05 · warm oklch(52% .16 45) #af4000 (paper on it 5.48:1, it on paper 5.48:1) · tints #ffecdd/#e2f6e8/#e7f1ff carry ink at 17.9:1 or better · bands #095c34 7.50, #2a7449 5.32, #a95a00 4.69, #b2511e 4.78, #9c4438 5.92 against paper · card heads green #156f41 with paper at 5.76:1, placed footers navy #1e4b8d at 7.97:1 */

@import url("./tokens.css");
@import url("./base.css");

/* ---- chrome ---- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); font-weight: 700; }
.skip:focus-visible { top: var(--space-md); }

.nav { border-bottom: var(--rule-bar) solid var(--color-rule); background: var(--color-paper); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.brand { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; }
/* no filled box behind the wordmark: it matches the nav links' underline instead */
.brand { border-bottom: 2px solid transparent; padding-block: var(--space-2xs); }
.brand:hover { border-bottom-color: var(--color-accent); }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links a { font-size: var(--text-sm); font-weight: 700; text-decoration: none; white-space: nowrap; padding-block: var(--space-2xs); border-bottom: 2px solid transparent; }
.nav__links a:hover { border-bottom-color: var(--color-accent); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--color-accent); }

.foot { background: var(--color-ink); color: var(--color-paper); border-top: var(--rule-bar) solid var(--color-warm); padding-block: var(--space-2xl); margin-top: var(--space-3xl); }
.foot__in { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--space-lg) var(--space-2xl); align-items: start; }
.foot__mark { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); text-transform: uppercase; line-height: 1; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); font-size: var(--text-sm); }
.foot__links a { text-decoration: none; border-bottom: 1px solid currentColor; }
.foot__links a:hover { background: var(--color-accent); color: var(--color-accent-ink); border-bottom-color: transparent; }
.foot__note { font-size: var(--text-xs); color: var(--color-paper-3); max-width: 34ch; }

/* ---- controls ---- */
/* body links take the second hue; a button, chip, nav link or the wordmark keeps its own colour */
main a:not([class]) { color: var(--color-link); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-weight: 700; font-size: var(--text-md); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear; }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--color-paper); color: var(--color-ink); }
.btn--ink { background: var(--color-ink); color: var(--color-paper); }
.btn--ink:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--line { background: var(--color-paper); color: var(--color-ink); }

/* ---- hero ---- */
.hero { padding-block: var(--space-2xl); border-bottom: var(--rule-bar) solid var(--color-rule); background: var(--color-tint-navy); }
.hero__in { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xl); min-height: calc(100svh - var(--nav-h) - (var(--space-2xl) * 2)); }
.hero__text h1 { max-width: 12ch; }
.hero__text .lead { margin-top: var(--space-md); max-width: 40ch; }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

.slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--rule-bar); background: var(--color-rule); border: var(--rule-bar) solid var(--color-rule); }
.slot { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg); min-height: 12.5rem; padding: var(--space-md); background: var(--color-paper); }
.slot__letter { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 900; font-size: var(--text-lg); line-height: 1; }
.slot__rec { font-family: var(--font-display); font-weight: 900; font-size: var(--text-display-s); letter-spacing: var(--tracking-display); line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.slot__sub { font-size: var(--text-xs); color: var(--color-muted); }

/* ---- the round ---- */
.round { border-top: var(--rule-bar) solid var(--color-warm); background: var(--color-tint-warm); padding-block: var(--space-xl) var(--space-2xl); }
.round__bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }

.progress { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3xs); list-style: none; margin: var(--space-sm) 0 var(--space-lg); padding: 0; }
.progress li { height: 12px; background: var(--color-paper-3); }
.progress li.is-done { background: var(--color-ink); }
.progress li.is-now { background: var(--color-accent); }

.arena > .notice, .board > .notice { grid-column: 1 / -1; padding: var(--space-lg); background: var(--color-paper); }
/* six across three columns and two rows: the whole ballot in one viewport, no scroll */
.arena { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rule-bar); background: var(--color-rule); border: var(--rule-bar) solid var(--color-rule); }
.arena__pos { display: none; }

.card { display: flex; flex-direction: column; min-width: 0; background: var(--color-paper); }
/* the card's head is the colour: green field, the record in paper, the slot knocked out of it */
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-3xs) var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); }
.card__slot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--color-accent-ink); font-weight: 900; font-size: var(--text-md); line-height: 1; }
.card__rec { text-align: right; }
.card__rec .card__score { display: block; font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.card__rec span { font-size: var(--text-xs); color: var(--color-paper-2); }
/* head to head: the games against the other cards in this round, slots only, sharing the head's height */
.card__h2h { display: flex; flex-wrap: wrap; gap: 0 var(--space-sm); margin-left: auto; font-size: var(--text-xs); line-height: 1.15; color: var(--color-paper-2); white-space: nowrap; }

/* the card's strength, colour-coded: the best opponent bucket it has played, five ticks for five stars */

.stats { border-bottom: 1px solid var(--color-rule); }
.stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); width: 100%; min-height: 22px; padding: 0 var(--space-sm); border: 0; border-top: 1px solid var(--color-paper-2); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.stats > div:first-child .stat { border-top: 0; }
.stat:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.stat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.stat__label { font-size: var(--text-sm); }
.stat__rank { font-weight: 900; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.stat__note { padding: 0 var(--space-sm) var(--space-2xs); font-size: var(--text-xs); line-height: 1.3; color: var(--color-muted); }

.results { width: 100%; border-collapse: collapse; table-layout: fixed; }
.results th { padding: var(--space-2xs) var(--space-sm) 0; border-top: 1px solid var(--color-rule); font-size: 0.6875rem; font-weight: 400; color: var(--color-muted); text-align: left; }
.results td { padding: 1px var(--space-sm); font-size: var(--text-xs); line-height: 1.25; }
.results tr + tr td { border-top: 1px solid var(--color-paper-2); }
.results__stars { width: 5.25rem; }
.results__site { width: 1.5rem; }
.site { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border: 1px solid var(--color-muted); font-size: 0.625rem; line-height: 1; text-decoration: none; color: var(--color-ink); }
.results__res { width: 4.25rem; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.results__res b { font-weight: 900; }
.results__res span { color: var(--color-muted); }

.stars { position: relative; display: inline-block; color: var(--color-muted); font-size: var(--text-md); line-height: 1; white-space: nowrap; }
.stars__on { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; color: var(--color-star); white-space: nowrap; width: calc(var(--r) * 1%); }

.card__pick { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); width: 100%; min-height: 32px; margin-top: auto; padding: var(--space-2xs) var(--space-sm); border: 0; border-top: var(--rule-bar) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; cursor: pointer; text-align: left; }
.card__pick:hover { background: var(--color-ink); color: var(--color-paper); }
.card__pick:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.card__pick b { font-weight: 900; font-variant-numeric: tabular-nums; }
.card.is-placed .card__pick, .card.is-placed .card__pick:hover { background: var(--color-secondary); color: var(--color-paper); }
.card.is-first .card__pick, .card.is-first .card__pick:hover { background: var(--color-warm); color: var(--color-warm-ink); }
/* the sixth card needs no tap: it prints as placed, so the finished order is visible before the commit */
.card__pick--auto { cursor: default; }
.card__pick--auto span { color: var(--color-paper-3); }
.card.is-placed .card__pick:focus-visible { outline-color: var(--color-paper); }

.round__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }
.round__status { font-size: var(--text-md); color: var(--color-muted); }
/* named once, quietly: the player knows the order starts somewhere, never who is in it */
.round__base { font-size: var(--text-sm); color: var(--color-muted); }
.round__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.notice { padding: var(--space-xl) 0; color: var(--color-muted); font-size: var(--text-md); }

/* ---- the reveal: one row a team, our board beside all four polls ---- */
.reveal { border-top: var(--rule-bar) solid var(--color-rule); background: var(--color-tint-green); padding-block: var(--space-2xl) var(--space-3xl); }
.reveal__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }
.reveal__line { font-size: var(--text-md); color: var(--color-muted); max-width: 52ch; }

.ranks { width: 100%; margin-top: var(--space-lg); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ranks caption { padding-bottom: var(--space-sm); text-align: left; font-size: var(--text-sm); color: var(--color-muted); }
.ranks th, .ranks td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: left; }
.ranks thead th { border-bottom: var(--rule-bar) solid var(--color-rule); font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.ranks .num { text-align: right; }
.ranks tbody th { font-weight: 700; }
/* the CFP board is the one people argue about: tinted head, strongest figure in the row, nothing else */
.ranks thead .rank__cfp { background: var(--color-tint-warm); color: var(--color-ink); font-weight: 700; }
.ranks tbody .rank__cfp { font-weight: 900; }

/* ranks print plainly: the number is the emphasis, so no chip, no warm fill */
.rank__n { width: 3.5rem; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.rank__mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; }
.rank__logo { width: auto; height: 1.75rem; object-fit: contain; }
.rank__abbr { font-size: var(--text-xs); font-weight: 700; color: var(--color-muted); }
.rank__name { min-width: 0; font-weight: 700; }
.ranks .rank__move { width: 4.5rem; white-space: nowrap; }
.rank__move--up { color: var(--color-accent); font-weight: 700; }
.rank__move--down { color: var(--color-warm); font-weight: 700; }
.rank__move--held { color: var(--color-muted); }

/* the five the seven rounds never reached: apart from the twenty-five, with no invented rank */
.unplaced { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule); }
.unplaced h3 { font-size: var(--text-title); }
.unplaced__line { margin-top: var(--space-xs); color: var(--color-muted); max-width: 60ch; }
.unplaced__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: 1px solid var(--color-rule); }
.unplaced__list li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.unplaced__list .rank__n { color: var(--color-muted); }

.reveal__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.guest { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-bar) solid var(--color-rule); }
.guest h3 { font-size: var(--text-title); }
.guest p { margin-top: var(--space-2xs); color: var(--color-muted); max-width: 52ch; }
.guest__acts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* ---- statement band ---- */
.budget { border-block: var(--rule-bar) solid var(--color-rule); background: var(--color-paper-2); padding-block: var(--space-3xl); }
.statement { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1.04; font-size: clamp(1.75rem, 3.6vw, 3.25rem); max-width: 26ch; }
.budget__line { margin-top: var(--space-lg); max-width: 60ch; }
.budget h2 { margin-bottom: var(--space-md); }

/* ---- board ---- */
.reveal-head { display: grid; align-content: center; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-2xl); background: var(--color-tint-navy); }
.reveal-grid { padding-block: var(--space-2xl) var(--space-3xl); }
.reveal__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--space-2xl); align-items: end; }
.reveal__head h1 { max-width: 18ch; }
.reveal__head .lead { margin-top: var(--space-md); max-width: 40ch; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }
.chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border: var(--rule-bar) solid var(--color-rule); background: transparent; color: var(--color-ink); font-weight: 700; text-decoration: none; cursor: pointer; }
.chip:hover { background: var(--color-paper-3); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--color-secondary); color: var(--color-paper); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip:disabled { opacity: 0.55; cursor: not-allowed; }
.chip:disabled:hover { background: transparent; }
.chips__note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.legend { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) { .reveal__head, .summary { grid-template-columns: minmax(0, 1fr); } }
.summary { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg) var(--space-2xl); align-items: end; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-bar) solid var(--color-rule); }
.summary b { display: block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: var(--tracking-display); line-height: 1.04; font-size: var(--text-section); }
.summary span { display: block; margin-top: var(--space-md); font-size: var(--text-lead); line-height: 1.4; max-width: 44ch; }

.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rule-bar); background: var(--color-rule); border: var(--rule-bar) solid var(--color-rule); list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.board > .notice { grid-column: 1 / -1; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-sm); min-height: 13rem; padding: var(--space-sm); background: var(--color-paper); }
.tile__mine { align-self: flex-start; min-width: 2.5rem; padding: var(--space-3xs) var(--space-2xs); background: var(--color-secondary); color: var(--color-paper); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.tile__delta { position: absolute; top: var(--space-sm); right: var(--space-sm); padding: var(--space-3xs) var(--space-2xs); font-size: var(--text-sm); font-weight: 900; font-variant-numeric: tabular-nums; }
.tile__delta--up { background: var(--color-accent); color: var(--color-accent-ink); }
.tile__delta--down { background: var(--color-warm); color: var(--color-warm-ink); }
.tile__mark { display: flex; align-items: center; justify-content: center; min-height: 4.5rem; font-family: var(--font-display); font-weight: 900; font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1; }
.tile__logo { width: auto; height: 3.5rem; object-fit: contain; }
.tile__theirs { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }

.leftout { margin-top: var(--space-2xl); }
.leftout h2 { font-size: var(--text-section); }
.leftout__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.leftout__list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-rule); }
.leftout__list b { font-variant-numeric: tabular-nums; }

.save { border-block: var(--rule-bar) solid var(--color-rule); background: var(--color-paper-2); padding-block: var(--space-2xl); }
.save__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.save h2 { font-size: var(--text-section); }
.save p { margin-top: var(--space-xs); max-width: 48ch; }
.save__acts { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.save__status { font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }

/* ---- groups ---- */
.groups-head { padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--rule-bar) solid var(--color-rule); background: var(--color-tint-warm); }
.groups-head .lead { margin-top: var(--space-md); max-width: 46ch; }
.groups-head__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }

.form { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; }
.form h2 { font-size: var(--text-section); }
.form__row { display: flex; flex-direction: column; gap: var(--space-2xs); width: 100%; }
.form label { font-size: var(--text-sm); color: var(--color-muted); }
.form input { width: 100%; min-height: 52px; padding: 0 var(--space-sm); border: var(--rule-bar) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -5px; }
.form input:focus-visible { outline-color: var(--color-focus); }
.form input[aria-invalid] { border-color: var(--color-error); }
.form input::placeholder { color: var(--color-muted); }
.form__status { font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }
.form__help { font-size: var(--text-sm); color: var(--color-muted); }

.group-rows { list-style: none; margin: var(--space-lg) 0 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.group-rows li { border-bottom: 1px solid var(--color-rule); }
.group-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-sm); text-decoration: none; }
.group-row:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.group-row__name { font-weight: 700; font-size: var(--text-title); }
.group-row__meta { font-size: var(--text-sm); color: var(--color-muted); }
.group-row:hover .group-row__meta { color: var(--color-accent-ink); }

.join { border-block: var(--rule-bar) solid var(--color-rule); background: var(--color-paper-2); padding-block: var(--space-2xl); }
.join__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-lg) var(--space-3xl); align-items: start; }
.join h2 { font-size: var(--text-section); }
.join p { margin-top: var(--space-sm); max-width: 52ch; }

.group-board { padding-block: var(--space-xl) var(--space-3xl); }
.group-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.group-board__count { font-size: var(--text-title); font-weight: 700; font-variant-numeric: tabular-nums; }
.table-wrap { margin-top: var(--space-lg); overflow-x: auto; }
.sheet { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.sheet th, .sheet td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.sheet thead th { font-size: var(--text-xs); font-weight: 400; color: var(--color-muted); border-bottom: var(--rule-bar) solid var(--color-rule); white-space: nowrap; }
.sheet thead th.sheet__rank, .sheet thead th.sheet__member { text-align: right; }
.sheet tbody th { font-weight: 400; }
.sheet td:first-child, .sheet th:first-child { padding-left: 0; }
.sheet td:last-child, .sheet th:last-child { padding-right: 0; }
.sheet tbody tr:hover { background: var(--color-paper-2); }
.sheet--plain tbody td:first-child { font-weight: 700; }
.sheet .num, .sheet .sheet__rank { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet__rank { font-weight: 900; width: 4rem; }
.sheet td.sheet__rank { text-align: right; }
.sheet__team { font-weight: 700; white-space: nowrap; }
.sheet td.sheet__member { text-align: right; width: 6.5rem; }
.sheet thead th.sheet__member { width: 6.5rem; }
.sheet--plain { margin-top: var(--space-xl); }

.agree__title { margin-top: var(--space-2xl); font-size: var(--text-section); }
.agree { list-style: none; margin: var(--space-sm) 0 0; padding: 0; max-width: 40rem; }
.agree li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
.agree b { font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---- glossary ---- */
.gloss-head { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-tint-green); }
.gloss-head .lead { margin-top: var(--space-md); max-width: 52ch; }
.constants { padding-block: var(--space-2xl); border-top: var(--rule-bar) solid var(--color-rule); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rule-bar); background: var(--color-rule); border: var(--rule-bar) solid var(--color-rule); margin: var(--space-lg) 0 0; }
.figures__cell { padding: var(--space-lg); background: var(--color-paper); }
.figures dt { font-size: var(--text-sm); color: var(--color-muted); }
.figures dd { margin: 0; }
.figures .figure { font-family: var(--font-display); font-weight: 900; font-size: var(--text-display-s); line-height: 1; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; margin-top: var(--space-xs); }
.figures__note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }
.constants__line { margin-top: var(--space-lg); max-width: 62ch; }

.terms { padding-block: var(--space-2xl) var(--space-3xl); }
.term-list { margin: var(--space-lg) 0 0; border-top: var(--rule-bar) solid var(--color-rule); }
.term { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xs) var(--space-2xl); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.term dt { font-weight: 700; font-size: var(--text-lg); }
.term dd { margin: 0; max-width: 52ch; }

/* ---- method ---- */
.method-head { padding-block: var(--space-3xl) var(--space-xl); }
.method-head .lead { margin-top: var(--space-md); max-width: 60ch; }
.method-block { padding-block: var(--space-3xl); }
.method-block--paper { background: var(--color-paper-2); border-block: var(--rule-bar) solid var(--color-rule); }
.method-block__text { max-width: 58ch; }
.method-block__text p { margin-top: var(--space-md); }
.method-block .sheet, .method-block .systems, .method-block .limits { margin-top: var(--space-xl); }
.sheet td, .sheet th { padding-block: var(--space-md); }
.systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rule-bar); background: var(--color-rule); border: var(--rule-bar) solid var(--color-rule); }
.systems__cell { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); min-height: 7rem; padding: var(--space-lg); background: var(--color-paper); }
.systems__cell b { font-size: var(--text-lg); }
.systems__cell span { font-size: var(--text-sm); color: var(--color-muted); }
.limits { list-style: none; padding: 0; border-top: var(--rule-bar) solid var(--color-rule); }
.limits li { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); max-width: 56ch; }
.budget--method { padding-block: var(--space-3xl); }
.budget--method .statement { max-width: 30ch; }

/* ---- responsive ---- */
@media (min-width: 60rem) {
  .term { padding-block: var(--space-2xl); }
}

@media (max-width: 60rem) {
  .hero__in { min-height: 0; gap: var(--space-xl); }
  .hero__text h1 { max-width: 16ch; }
  .slot { min-height: 8rem; gap: var(--space-md); }
  .slot__rec { font-size: var(--text-2xl); }
  /* six cards on a phone are one carousel, not six stacked sheets: snap, a peek of the next, one thumb away */
  /* contain: paint keeps the carousel's width out of the document, so the page cannot be dragged sideways */
  .arena { display: flex; gap: var(--space-sm); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; background: transparent; border: 0; contain: paint; }
  .arena::-webkit-scrollbar { display: none; }
  .arena > .notice { flex: 1 0 100%; background: var(--color-paper); }
  .card { flex: 0 0 86%; border: var(--rule-bar) solid var(--color-rule); scroll-snap-align: start; }
  .arena__pos { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-muted); }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { min-height: 10rem; }
  .groups-head__cols, .join__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .systems { grid-template-columns: minmax(0, 1fr); }
  .figures { grid-template-columns: minmax(0, 1fr); }
  .figures__cell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-xs) var(--space-md); }
  .figures dt { grid-column: 1; }
  .figures .figure { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .figures__note { grid-column: 1; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .foot__note { max-width: 40ch; }
}

@media (max-width: 40rem) {
  /* five links and the wordmark do not fit one phone line: wrap rather than push past the edge */
  .nav__in { flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); min-height: 0; padding-block: var(--space-xs); }
  .nav__links { flex-wrap: wrap; }
  .brand { font-size: var(--text-md); }
  .nav__links { gap: var(--space-2xs) var(--space-sm); }
  /* a phone keeps all eight columns: the padding and the name give the room, not the polls */
  .ranks th, .ranks td { padding-inline: var(--space-2xs); }
  .ranks .rank__move { width: 3rem; }
  .rank__n { width: 2.25rem; }
  .rank__mark { width: 1.5rem; }
  .nav__links a { font-size: var(--text-xs); }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot { padding: var(--space-xs); gap: var(--space-md); }
  .slot__rec { font-size: 1.75rem; }
  .slot__sub { font-size: 0.75rem; }
  /* one card at a time owns the screen, so it can breathe again and the tap target grows back */
  .card__rec .card__score { font-size: var(--text-2xl); }
  .results td { font-size: var(--text-sm); padding-block: var(--space-3xs); }
  .results th { font-size: var(--text-xs); }
  .stat { min-height: 30px; }
  .card__pick { min-height: 44px; }
  .hero__acts .btn { width: 100%; }
  .round__bar { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .progress li { height: 8px; }
  .tile { min-height: 9rem; }
  .tile__mark { font-size: 1.75rem; min-height: 3rem; }
  .tile__theirs { font-size: var(--text-xs); }
  .sheet td, .sheet th { padding-inline: var(--space-2xs); }
  .sheet__team { white-space: normal; }
  .save__in { align-items: flex-start; }
}

@media (max-width: 23rem) {
  .nav__links { gap: var(--space-2xs); }
  .nav__links a { font-size: 0.75rem; }
  .brand { font-size: var(--text-sm); }
}

/* the group table keeps the name column while the ranks scroll */
@media (max-width: 60rem) {
  .sheet thead th:nth-child(2), .sheet tbody td:nth-child(2) { position: sticky; left: 0; background: var(--color-paper); }
  .sheet tbody tr:hover td:nth-child(2) { background: var(--color-paper-2); }
}

/* Once the first round is dealt the hero has done its job: collapse it so the six cards own the
   viewport without a scroll. :has() keeps this in CSS, so there is no JS state to keep in sync. */
body:has(.arena .card) .hero { display: none; }
/* No min-height here: the arena begins ~221px down the page, so pinning it to the viewport height
   pushes the second row and the commit row below the fold. It sizes to its own grid. */