/* BayerRank — hybrid design system (docs/site-plan.md, locked 2026-07-13):
   Sports Desk (2c) structure/mark/kickers · "ALL NUMBERS, NO VIBES." masthead ·
   Almanac (2a) serif for editorial prose · optic accent dialed down one notch
   (kept: masthead rule, active tab, bar fills, top-3 ranks, chips; dropped: the
   footer domain runs muted, not optic). Tokens: design/claude-design-2026-07-13/ */

:root {
  color-scheme: dark;
  --bg: #0c0d0f;
  --card: #171a1f;
  --card-border: rgba(229, 232, 236, .13);
  --ink: #f2f4f6;
  --ink-row: #eef1f4;
  --muted: rgba(229, 232, 236, .5);
  --faint: rgba(229, 232, 236, .4);
  --ghost: rgba(229, 232, 236, .3);
  /* Between --muted and --ink: for a footnote that is a CLAIM, not
     mechanical small print (the finals card's pick assumption). */
  --note: rgba(229, 232, 236, .72);
  --hairline: rgba(229, 232, 236, .08);
  --rule: rgba(229, 232, 236, .25);
  --optic: #c7d24a;
  --optic-soft: rgba(199, 210, 74, .12);
  --up: #58a97c;
  --down: #c4645a;
  --chip-bg: #232830;
  --chip-fg: #c8cdd4;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: Archivo, system-ui, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }

.wrap { max-width: 600px; margin: 0 auto; padding: 18px 14px 40px; }

/* ---------- masthead ---------- */
.masthead { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.mast-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 11px; }
/* Mark scales with the wordmark: same height as the title line, tops aligned
   (operator feedback 2026-07-14) — not centered on the combined lockup. */
/* Mark spans the full lockup EXACTLY — ink top at title cap top, ink bottom at
   tagline bottom (operator 2026-07-14; sizes solved from measured geometry:
   artwork occupies 6%..92% of the svg box). */
.mast-brand { display: flex; align-items: flex-start; gap: 13px; }
.mast-brand svg { display: block; flex: none; width: auto; height: 48px; margin-top: 1px; }
/* Faux small caps: initials of Bayer + Rank render larger so the compound
   stays legible in all-caps (operator feedback 2026-07-14). */
.wordmark { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 25px; letter-spacing: .045em; text-transform: uppercase; line-height: 1; }
.wordmark .lg { font-size: 30px; }
.tagline { font-family: var(--mono); font-weight: 500; font-size: 8.5px; letter-spacing: .26em; color: rgba(229, 232, 236, .72); margin-top: 5px; }
.mast-updated { text-align: right; font-size: 9px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.mast-updated b { display: block; color: var(--ink); margin-top: 2px; font-weight: 600; }
.optic-rule { height: 3px; background: var(--optic); }
nav.tabs { display: flex; gap: 18px; padding: 10px 18px; font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; overflow-x: auto; }
nav.tabs a { color: var(--muted); white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; }
nav.tabs a.active { color: var(--ink); border-bottom-color: var(--optic); }
.kicker { border-top: 1px solid var(--hairline); padding: 7px 18px 9px; font-size: 9px; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: 10px; margin-top: 14px; overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 4px; gap: 10px; }
.card-title { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 700; font-size: 21px; letter-spacing: .05em; text-transform: uppercase; }
.card-title svg { flex: none; }
.card-chip { font-size: 9px; font-weight: 600; letter-spacing: .1em; color: var(--optic); background: var(--optic-soft); padding: 4px 8px; border-radius: 3px; white-space: nowrap; }
.card-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.card-chip.dim { color: var(--chip-fg); background: var(--chip-bg); }
/* Card-head declutter (operator call 2026-07-18): inert meta chips (status,
   model version, sims/matches count) sit under the title as a byline row so
   the head's right corner holds only the share action. */
.card-head.meta-under { align-items: flex-start; }
.card-title-block { min-width: 0; }
.title-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.card-head.meta-under .card-chips { margin-top: 3px; }
/* Share affordance (site-plan #11): an icon-only button — native share sheet
   where the browser has one, else the .share-menu fallback. The box + border
   is the "this one is a button" cue; with the meta chips demoted to
   .title-chips it is the only boxed element in the head's corner. The ::after
   pad grows the touch target (~45px) without growing the button. */
button.share-btn { cursor: pointer; color: var(--chip-fg); background: var(--chip-bg); border: 1px solid var(--rule); border-radius: 3px; padding: 6px; line-height: 0; display: inline-flex; position: relative; }
button.share-btn:hover { color: var(--optic); background: var(--optic-soft); border-color: var(--optic); }
.share-btn::after { content: ""; position: absolute; inset: -9px; }
.share-menu {
  position: fixed; z-index: 20; min-width: 132px;
  background: var(--chip-bg); border: 1px solid var(--card-border);
  border-radius: 6px; padding: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
}
.share-item { display: block; border: 0; background: none; text-align: left; padding: 8px 11px; border-radius: 4px; font-family: inherit; font-size: 12.5px; color: var(--ink-row); cursor: pointer; }
.share-item:hover { background: rgba(229, 232, 236, .07); color: var(--ink); }
/* Freshness stamp for a card built from a payload THIS publish may not have
   rebuilt (today: the rankings board, which card-lock/roster-move/editorial
   modes all leave alone). Sits in .card-head's right corner, which is
   space-between and empty on that card. Same meta treatment as .card-foot --
   9px caps, faint, tracked -- so it reads as a timestamp, not a heading.
   white-space:nowrap keeps the date off two lines; the head's gap and the
   title's own wrapping absorb narrow screens. */
.card-asof { font-size: 9px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; white-space: nowrap; align-self: center; }
.card-sub { padding: 0 18px 12px; font-size: 10.5px; color: var(--muted); }
/* The frozen pick assumption on a finals card — its largest caveat, so it
   reads as a statement rather than small print (operator 2026-08-17):
   header-style caps, and brighter than BOTH .card-sub (.5) above it and the
   .card-foot line (.4) beneath, which it was previously indistinguishable
   from.  Top padding is here rather than inline (operator: more air above). */
.pick-note { padding: 14px 18px 2px; font-size: 9.5px; font-weight: 600;
             letter-spacing: .1em; text-transform: uppercase; color: var(--note); }
/* Rankings footnotes (Δ legend, surge legend, model-update note) stack as
   divs inside #rate-note — give the lines a little air between them. */
#rate-note div + div { margin-top: 4px; }
/* the model-upgraded line gets a touch more separation from the mechanical
   footnotes below it (operator, 2026-07-27) */
#rate-note .mu-note + div { margin-top: 9px; }
/* Fetch-failure message inside an otherwise-empty table body. */
.load-fail { padding: 16px 18px; font-size: 12px; color: var(--muted); }

/* ---------- hero strip (top-3 title odds above the fold) ----------
   Phones only: at >=640px the champ column is already on screen, so the
   strip would just repeat the table's right edge. */
.hero-strip { padding: 10px 18px 14px; }
.hero-cap { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; padding-bottom: 7px; }
.hero-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tile { display: flex; align-items: center; gap: 7px; background: rgba(229, 232, 236, .045); border-radius: 6px; padding: 7px 11px; }
.hero-pct { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.hero-pct small { font-size: 10px; color: var(--muted); margin-left: 1px; }
.hero-tile:first-child .hero-pct { color: var(--optic); }
@media (min-width: 640px) {
  .hero-strip { display: none; }
  /* With the hero strip gone, the title-chips byline would sit right on the
     table header — restore the breathing room the strip provided. */
  .board-scroll { margin-top: 12px; }
}

/* Playoff cutline: the actionable number on the board. Board-footnote language
   (faint small-caps label + bold tabular figures) with the optic on the
   NUMBERS — the site colors data, not containers (filled callout box dropped,
   operator call 2026-07-18). */
.cutline { margin: 12px 18px 2px; padding: 10px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cut-lab { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; padding-bottom: 6px; }
.cut-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 18px; }
.cut-stat { font-size: 11.5px; color: var(--muted); }
.cut-stat b { font-weight: 700; font-size: 14px; color: var(--optic); font-variant-numeric: tabular-nums; }
.cut-stat small { font-size: 8.5px; font-weight: 600; letter-spacing: .06em; color: var(--faint); text-transform: uppercase; margin-right: 3px; }
.card-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px 14px; font-size: 9px; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.card-foot .domain { font-weight: 700; }
/* Series cards (playoff best-of-3 rounds): each row is a matchup; the call
   column carries the favored side's chip + advance probability. Both team
   names share the same ink (operator, 2026-07-31) — the call column alone
   says who advances. */
/* Percent column sized to its CONTENT, not padded out (operator 2026-08-17:
   the monogram and the percent should sit together under the "To advance"
   umbrella).  Measured on the graded Newport card: the glyphs are 26px wide
   (35px worst case, "100%") inside a 46px right-aligned column, so 20px of
   the 27px chip-to-digits gap was pure slack.  36px is the tightest value
   that still clears "100%" AND keeps the header on one line — 34px wraps it.
   Desktop equivalent: 40px against a 38px worst case. */
.sr-head, .sr-row { display: grid; grid-template-columns: 1fr 26px 36px; gap: 7px; align-items: center; margin: 0 18px; }
.sr-head { padding-top: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.sr-head span:last-child { grid-column: 2 / 4; text-align: right; }
.sr-row { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.sr-row:last-of-type { border-bottom: 0; }
/* One line at every width (operator 2026-08-02, after a stacked experiment):
   portrait phones swap to city-short names ("Brooklyn vs SoCal") instead of
   wrapping; both forms ship in the DOM and this boundary picks one. The verb
   rides the row center with a 1px optical drop (uppercase micro-type reads
   high against the larger condensed caps at geometric centering). */
.sr-match { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; min-width: 0; }
.sr-match .sr-verb { position: relative; top: 1px; }
.sr-name .nm-short { display: none; }
@media (max-width: 639.98px) {
  .sr-name .nm-full { display: none; }
  .sr-name .nm-short { display: inline; }
}
.sr-side { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sr-side .tchip { width: 21px; height: 21px; font-size: 8.5px; }
.sr-side .tchip.long { font-size: 6px; }
/* Team names match the season board's register (operator 2026-08-02):
   condensed, uppercase, same tracking — one team-name voice across cards. */
.sr-name { font-family: var(--cond); font-size: 14.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-row); line-height: 1; }
.sr-verb { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; line-height: 1; align-self: center; }
.sr-call { display: flex; justify-content: flex-end; }
.sr-call .tchip { width: 21px; height: 21px; font-size: 8.5px; }
.sr-call .tchip.long { font-size: 6px; }
.sr-row .pct { text-align: right; }
/* Graded rounds add an ADVANCED verdict column (operator 2026-08-09): the
   top-level table grades its own call instead of leaving the outcome to the
   per-match drawer. Pending cards are untouched — the grader omits `advanced`,
   so .sr-graded is simply absent and the 3-column shape stands. */
.sr-graded .sr-head, .sr-graded .sr-row { grid-template-columns: 1fr 26px 36px 44px; }
.sr-graded .sr-head span:nth-child(2) { grid-column: 2 / 4; text-align: right; }
.sr-graded .sr-head span:last-child { grid-column: 4; text-align: right; }
.sr-adv { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.sr-adv .tchip { width: 21px; height: 21px; font-size: 8.5px; }
.sr-adv .tchip.long { font-size: 6px; }
/* Same --up/--down pair as the per-match Result column (.mlog-res) so the two
   grading layers read as one system. */
.sr-mark { display: inline-flex; font-size: 11px; line-height: 1; }
.sr-mark.hit { color: var(--up); }
.sr-mark.miss { color: var(--down); }
.sr-mark.dim { color: var(--faint); font-family: var(--cond); font-size: 12px; }
/* Series per-match drawer: mlog rows without the Result column. */
.mlog-head.cols2, .mlog-row.cols2 { grid-template-columns: 1fr 56px; }

/* ---------- season odds board (full ErneCast table) ---------- */
/* Scrolling shadow (cover scrolls with content, vignette stays put) so a
   narrow viewport signals there are more columns to the right. */
.board-scroll {
  overflow-x: auto;
  background:
    linear-gradient(270deg, var(--card) 40%, rgba(23, 26, 31, 0)) 100% 0 / 36px 100%,
    linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) 100% 0 / 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
/* RK + team stay pinned while the probability columns scroll underneath. */
.board-head span:nth-child(-n+2), .board-row .rk, .board-row .bteam {
  position: sticky; z-index: 1; background: var(--card);
}
.board-head span:nth-child(1), .board-row .rk { left: 0; padding-left: 18px; }
.board-head span:nth-child(2), .board-row .bteam { left: 44px; }
.board-row .rk { align-self: stretch; display: flex; align-items: center; }
.board-row .bteam { align-self: stretch; }
/* Side gutters live INSIDE the sticky cells / as inner padding (not margins on
   the rows) so the pinned RK+team keep their breathing room while scrolled. */
.board-inner { min-width: 580px; padding-right: 18px; }
.board-head, .board-row { display: grid; grid-template-columns: 44px minmax(148px, 1fr) 42px 42px repeat(5, 40px) 50px; gap: 0; }
/* Settled board (postseason decided): six forecast columns retire, so the grid
   drops to #/Team/PWR/Pts and the horizontal scroll floor goes with them. */
.board-head.settled, .board-row.settled { grid-template-columns: 44px minmax(148px, 1fr) 42px repeat(5, 40px) 50px; }
.champ-tag { margin-left: 8px; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--optic); white-space: nowrap; }
.board-row.is-champ .rk { color: var(--optic); }
.board-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.board-head span { text-align: center; }
.board-head span:nth-child(-n+2) { text-align: left; }
.board-row { align-items: stretch; border-bottom: 1px solid var(--hairline); }
.board-row:last-of-type { border-bottom: 0; }
/* Zebra + hover: ten columns is a lot of row to track by eye. Sticky cells are
   opaque (they cover content scrolling beneath), so they get the same tint as a
   SOLID color — #1c1f24 == rgba(229,232,236,.025) composited over the card. */
.board-row:nth-child(even) { background: rgba(229, 232, 236, .03); }
.board-row:nth-child(even) .rk, .board-row:nth-child(even) .bteam { background: #1d2025; }
@media (hover: hover) {
  .board-row:hover { background: rgba(229, 232, 236, .07); }
  .board-row:hover .rk, .board-row:hover .bteam { background: #25282d; }
}
.board-row > * { align-self: center; }
.rk { font-family: var(--cond); font-weight: 700; font-size: 17px; color: var(--faint); }
.rk.top { color: var(--optic); }
.bteam { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 0; min-width: 0; }
/* Team monogram chip: initials, never league logo artwork (copyright).
   Palette mirrors make_og_card.py's .ab.txt chip. */
.tchip { flex: none; width: 22px; height: 22px; background: #232830; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--cond); font-weight: 600; font-size: 9px; letter-spacing: .05em; color: #c8cdd4; }
.tchip.long { font-size: 6.5px; letter-spacing: .02em; } /* 4-5 char codes (SOCAL) */
.team-name { font-family: var(--cond); font-weight: 600; font-size: 15.5px; letter-spacing: .03em; color: var(--ink-row); text-transform: uppercase; line-height: 1.1; }
.bnum { font-size: 11px; font-weight: 600; text-align: center; color: var(--chip-fg); font-variant-numeric: tabular-nums; }
.pc { align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc small { font-size: 8.5px; color: var(--muted); font-weight: 600; margin-left: 1px; }
.pc.champ { font-weight: 700; font-size: 12.5px; border-left: 2px solid rgba(229, 232, 236, .14); }
.pc.dim, .pc.dim small { color: var(--faint); }
/* Fully-eliminated teams recede as a row — the per-cell "–" dim extended to
   the whole line (operator call 2026-08-02). Dim children and colors only:
   opacity on .board-row (or on .rk/.bteam themselves) would fade the sticky
   cells' opaque backgrounds and let columns ghost through them mid-scroll. */
.board-row.elim .bnum, .board-row.elim .pc,
.board-row.elim .team-name { opacity: .45; }
.board-row.elim .rk { color: rgba(229, 232, 236, .18); }
.board-row.elim .tchip { opacity: .45; filter: grayscale(.75); }
.board-head span[title], .pc[title], .mast-updated[title], .card-sub[title], .rate-head span[title], .surge[title], .cutline[title], .lk-pair[title] { cursor: help; }
/* Tap-tooltip toast (title= text surfaced on touch screens); positioned by
   showTip() next to the tapped element. */
.tip-toast {
  position: fixed; max-width: min(80vw, 340px); z-index: 10;
  background: var(--chip-bg); color: var(--ink-row);
  border: 1px solid var(--card-border); border-left: 3px solid var(--optic);
  padding: 9px 14px; border-radius: 6px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.tip-toast.show { opacity: 1; }
.pct { font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.pct small { font-size: 10px; color: var(--faint); font-weight: 600; }
.pct.dim, .pct.dim small { color: var(--faint); } /* "<1%" grays whole-token, like .pc.dim */
/* align-self: the row aligns cells on the text baseline, which parks the
   smaller delta type visibly low next to 16px rank digits — optical center
   wins here (operator call 2026-07-18). */
.delta { font-weight: 600; font-size: 11px; text-align: left; font-variant-numeric: tabular-nums; color: var(--faint); align-self: center; }
/* Header Δ centers on the TYPICAL value ("▲3", single digit — the <10 case),
   which left-alignment puts at ~7px in: pad the glyph to that center.
   Plain center-in-column would sit right of the values. */
#delta-head { padding-left: 4px; }
/* #rate-note selectors so the LEGEND's arrows carry the same colours as the
   board's own delta cells (operator, 2026-08-24). The momentum legend below it
   already reuses .glyph-hot/.glyph-cold verbatim; the rank arrows were the one
   legend rendering in flat --faint while the column above them was coloured.
   Scoped to the note rather than made global .up/.down, which are too generic a
   pair of class names to hand a colour to site-wide. */
.delta.up, #rate-note .up { color: var(--up); }
.delta.down, #rate-note .down { color: var(--down); }

/* ---------- ratings ---------- */
.pills { display: flex; gap: 8px; padding: 6px 18px 12px; flex-wrap: wrap; }
.pill { font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--chip-bg); border: 1px solid transparent; border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.pill.active { color: var(--ink); border-color: var(--optic); }
/* Column order (operator call 2026-07-18): rank flush at the margin (the
   table's spine), Δ right beside the rank it describes, surge glyph hanging
   off the rating it describes. */
.rate-head, .rate-row { display: grid; grid-template-columns: 26px 26px 1fr 56px; gap: 9px; margin: 0 18px; }
.rate-head.no-delta, .rate-row.no-delta { grid-template-columns: 26px 1fr 56px; }
.rate-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.rate-row { align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.rate-row:last-of-type { border-bottom: 0; }

/* Player lookup: search box above the boards. The results list opens DOWNWARD
   inside the card (the card clips overflow — same constraint as .tips-down). */
/* Below the boards on purpose (secondary feature, operator call 2026-07-17);
   the results list flows IN the card (no overlay), pushing the footer down —
   an absolutely-positioned dropdown would clip on the card's overflow:hidden
   this close to its bottom edge. */
.lookup { margin: 16px 18px 12px; }
.lookup-box { position: relative; }
/* 16px input font on purpose: below 16px iOS Safari auto-zooms the page on focus.
   padding-right clears our own clear button; the native webkit cancel is hidden. */
#lookup-input { width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--chip-bg); border: 1px solid var(--rule); border-radius: 4px; padding: 8px 38px 8px 11px; outline: none; -webkit-appearance: none; appearance: none; }
#lookup-input:focus { border-color: var(--optic); }
#lookup-input::placeholder { color: var(--faint); }
#lookup-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#lookup-clear { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 3px; color: var(--muted); font-family: inherit; font-size: 14px; cursor: pointer; }
#lookup-clear:hover { color: var(--ink); }
#lookup-results { margin-top: 6px; background: var(--chip-bg); border: 1px solid var(--card-border); border-radius: 4px; max-height: 320px; overflow-y: auto; }
.lookup-opt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 11px 9px 9px; cursor: pointer; border-bottom: 1px solid var(--hairline); border-left: 2px solid transparent; }
.lookup-opt:last-child { border-bottom: 0; }
.lookup-opt:hover { background: rgba(229, 232, 236, .07); }
.lookup-opt.active { background: var(--optic-soft); border-left-color: var(--optic); }
.lookup-opt .nm { color: var(--ink-row); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .66 alpha, not --faint (.4): 12px status text needs >=4.5:1 on the chip bg. */
.lookup-opt .st { color: rgba(229, 232, 236, .66); font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
#lookup-status { margin-top: 6px; background: var(--chip-bg); border: 1px solid var(--card-border); border-radius: 4px; padding: 9px 11px; color: rgba(229, 232, 236, .66); font-size: 13px; }
#lookup-card { margin: 0 18px 14px; border: 1px solid var(--card-border); border-left: 3px solid var(--optic); border-radius: 4px; padding: 10px 12px; }
.lookup-name { font-weight: 600; font-size: 14.5px; letter-spacing: .01em; margin-bottom: 4px; }
.lookup-div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hairline); }
.lookup-div .dv { font-family: var(--cond); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Rank/rating as stat pairs in the boards' label language (prose read
   off-aesthetic — operator call 2026-07-18). */
.lookup-div .dt { display: flex; align-items: baseline; gap: 13px; }
.lk-pair { display: inline-flex; align-items: baseline; gap: 5px; }
.lk-lab { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.lk-num { font-weight: 700; font-size: 13px; color: var(--ink-row); font-variant-numeric: tabular-nums; }
.rk-sm { font-family: var(--cond); font-weight: 700; font-size: 16px; color: var(--faint); }
.rk-sm.top { color: var(--optic); }
.player { font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: .02em; color: var(--ink-row); }
.surge { font-family: var(--sans); font-size: 12px; }
/* Momentum glyph colors: ember + ice, tuned to the dark theme (the emoji
   they replaced were the only elements outside the palette). */
.glyph-hot { color: #d98a45; }
.glyph-cold { color: #7fb0d4; }
.surge svg, #rate-note svg { vertical-align: -1px; }
.rtg { font-weight: 700; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; position: relative; }
/* When any row on the board carries a surge glyph, every rating reserves the
   same right gutter for it — digits stay column-aligned, the glyph hangs in
   the gutter beside its rating. */
#rating-rows.has-surge .rtg { padding-right: 19px; }
.rtg .surge { position: absolute; right: -1px; top: 50%; transform: translateY(-50%); line-height: 0; }

/* ---------- prose (Almanac serif) ---------- */
.prose { padding: 6px 20px 18px; font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--ink-row); }
.prose p { margin: 0 0 1em; }
.prose .lab { font-style: italic; color: var(--muted); }

/* ---------- FAQ (native <details> accordion — no JS) ---------- */
.faq-list { padding: 6px 0 10px; }
.faq { border-top: 1px solid var(--hairline); }
.faq:first-child { border-top: 0; }
/* Section labels inside the accordion (The ratings / The model / The forecasts). */
.faq-sec { padding: 18px 18px 3px; font-size: 8.5px; font-weight: 600; letter-spacing: .14em; color: var(--faint); text-transform: uppercase; }
.faq-sec:first-child { padding-top: 8px; }
.faq-sec + .faq { border-top: 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 18px; cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--ink-row); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 13px; color: var(--faint); position: relative; top: -1px; }
.faq[open] summary { color: var(--ink); }
.faq[open] summary::after { content: "\2212"; }
.faq-a { padding: 0 18px 14px; font-family: var(--serif); font-size: 14.5px; line-height: 1.65; color: var(--ink-row); }
.faq-a p { margin: 0 0 .9em; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a, .prose a, .card-sub a { text-decoration: underline; text-decoration-color: rgba(199, 210, 74, .55); text-underline-offset: 3px; }
.faq-a a:hover, .prose a:hover, .card-sub a:hover { text-decoration-color: var(--optic); }
/* FAQ version log: data register (sans, small) inside the serif answer prose.
   The p:has rule restores the answer's last-paragraph margin reset, which the
   log's presence as a following sibling otherwise defeats (also when hidden —
   :last-child is structural, display:none does not restore it). */
.faq-a p:has(+ .vlog) { margin-bottom: 0; }
.vlog { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 10px; font-family: var(--sans); font-size: 12.5px; line-height: 1.6; }
.vlog-pre { color: var(--faint); margin-bottom: 6px; }
.vlog-row { color: var(--muted); padding: 1px 0; }
.vlog-row b { color: var(--ink-row); font-family: var(--mono); font-weight: 600; font-size: 12px; }
.card-sub a { color: var(--ink-row); }
/* ---------- events / track record (merged) ---------- */
#tab-events .card + .card { margin-top: 14px; }
.verdict { font-family: var(--serif); font-size: 14px; line-height: 1.45; padding: 7px 18px 10px; }
.tr-head, .tr-row { display: grid; grid-template-columns: 1fr 40px 40px 44px 44px; gap: 7px; margin: 0 18px; }
/* One probability column. A bracket card claims who WINS, and the second
   column it used to carry was labelled 'Top 4' over a number that was
   P(gold)+P(silver)+P(bronze) -- never top-4, and two different things on
   one card once a bronze is played in some divisions and not others. */
.tr-head.tr-4, .tr-row.tr-4 { grid-template-columns: 1fr 40px 44px 44px; }
/* Sits between the division pills and the round pills, so a division reads
   top-down as: which division, who we say wins it, then the matchups. */
.podium-board { margin-bottom: 4px; }
.podium-board .tr-head { padding-top: 4px; }
/* Sibling-scoped so only the bracket card's stack moves: the verdict sentence
   sits closer to the division pills, the board gets air under them, and the
   round pills come back up under the board. */
.verdict + .pill-tabs { margin-top: 2px; }
.pill-tabs + .podium-board { margin-top: 10px; }
.podium-board + .pill-tabs.pill-sub { margin-top: 14px; }
/* A division with no locked rounds still renders the round-pill row, empty. It
   carried its own margins into the gap under the board, spacing the board off
   a note about there being nothing to show. */
.pill-tabs:empty { display: none; }
.podium-board + .pill-tabs:empty + .mlog .mlog-note { padding-top: 6px; }
/* A bracket card's stat block (graded only) sits directly under the card
   header, ahead of the pills and any podium board, so there is nothing above
   it for its rule to divide off.  The rule would read as a stray line under
   the header (operator 2026-09-13, extending the withheld-podium case). */
.card.bracket .stat-head { border-top: none; padding-top: 0; }
/* The graded rounds drawer sits unruled under the podium board (app.js
   pastRoundsDrawer), kept close so it reads as part of the division the
   pills above select.  Two classes, so this beats `.mlog { margin: 0 ... }`
   in every layer. */
.podium-board ~ .past-rounds { margin-top: 12px; }
/* Team / Gold / Finish, and Winning team / Locked / Now / Finish on a pending board
   once the nightly re-price has moved away from the frozen one (a graded
   board never goes live). No predicted-rank column: it restated the locked
   percentages, and a live board sorts by the LIVE price. */
.podium-board .tr-head, .podium-board .tr-row { grid-template-columns: 1fr 40px 44px; }
.podium-board.live .tr-head, .podium-board.live .tr-row { grid-template-columns: 1fr 40px 40px 44px; }
.tr-head { padding-top: 10px; }
/* Logo chips squeeze the team column on small screens: slim chip + type there,
   full board sizing restored in the desktop media query below. */
.tr-row .bteam { padding: 0; gap: 7px; }
.tr-row .tchip { width: 19px; height: 19px; font-size: 8px; }
.tr-row .tchip.long { font-size: 6px; }
.tr-row .team-name { font-size: 14.5px; }
.cal-head, .cal-row { display: grid; grid-template-columns: 1fr 62px 68px 68px; gap: 9px; margin: 0 18px; }
.tr-head, .cal-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.tr-row, .cal-row { align-items: center; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.tr-row:last-of-type, .cal-row:last-of-type { border-bottom: 0; }
.tr-row.champ .team-name { color: var(--optic); }
.fin { font-weight: 700; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.fin.dim { color: var(--faint); font-weight: 500; }
/* podium tint on placement ordinals — 1st rides the brand optic */
.fin.m1 { color: var(--optic); }
.fin.m2 { color: #96aac6; }
.fin.m3 { color: #c98e57; }
.pct.dimn { color: var(--faint); font-weight: 500; }
/* Podium board, three tiers (operator 2026-09-11): a live row's name, then its
   numbers, then everything in an eliminated row, name included. .elim rides
   pending boards only: a graded board dims no one (operator 2026-09-13). */
.podium-board .tr-row .pct.dimn, .podium-board .tr-row .fin.dim { color: var(--muted); }
.podium-board .tr-row.elim .team-name, .podium-board .tr-row.elim .pct,
.podium-board .tr-row.elim .pct small, .podium-board .tr-row.elim .fin { color: var(--ghost); }
.tr-head span[title] { cursor: help; }
/* Match log: the row-level receipts behind a graded card's aggregates.
   Native <details>, collapsed by default; +/− marker as in the FAQ. */
.mlog { margin: 0 18px; }
.mlog summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 2px 0 10px; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.mlog summary::-webkit-details-marker { display: none; }
.mlog summary::after { content: "+"; font-family: var(--mono); font-size: 11px; position: relative; top: -1px; }
.mlog[open] summary::after { content: "\2212"; }
.mlog summary:hover { color: var(--muted); }
.mlog-head, .mlog-row { display: grid; grid-template-columns: 1fr 56px 52px; gap: 7px; align-items: center; }
/* PPA bracket cards: pro divisions as sections, one drawer per round.
   Entrants are players/pairs, so calls are text names, never monogram chips. */
.pdivs { padding: 2px 0 8px; }
.pdiv { border-top: 1px solid var(--rule); margin: 0 18px; }
.pdiv > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 11px 0; }
.pdiv > summary::-webkit-details-marker { display: none; }
.pdiv > summary::after { content: "+"; font-family: var(--mono); font-size: 12px; color: var(--faint); position: relative; top: -1px; }
.pdiv[open] > summary::after { content: "\2212"; }
.pdiv > summary:hover .pdiv-name { color: var(--ink); }
.pdiv-name { font-family: var(--cond); font-weight: 600; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-row); }
.pdiv-meta { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pdiv .mlog { margin: 0 0 10px; }
.pdiv .mlog-note { margin: 0 0 12px; padding: 0; }
/* Current Event tab: division + round pill tabs (2026-09-01). "npill", NOT "pill" —
   .pill is the Player Rankings division picker and its wide-layer override
   (font-size 14px at >=860) would win the cascade and wrap this row; the
   collision restyled that tab too before it was caught. Sized so all five
   division pills hold one line on the desktop card (operator, 2026-09-01). */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 18px 0; }
/* Bottom margin here, not margin-top on .now-rounds: the >=860 layer's
   `.mlog { margin: 0 24px }` comes later in the cascade and zeroes any
   margin set on the .mlog wrapper itself. */
.pill-tabs.pill-sub { margin-top: 12px; margin-bottom: 16px; }
/* A graded card's rounds drawer (app.js pastRoundsDrawer) is itself an .mlog,
   so it already carries the card's side margin. Everything nested in it drops
   its own, or the pills and rows would indent twice. Two classes each, so
   these beat .pill-tabs and the >=860 layer's `.mlog { margin: 0 24px }`
   wherever they sit in the cascade. */
.past-rounds .pill-tabs { margin-left: 0; margin-right: 0; }
.past-rounds .now-rounds { margin: 0; }
/* The first pill row sits just under the summary, which already has 10px of
   air below it. */
.past-rounds > summary + .pill-tabs { margin-top: 2px; }
.npill { font-family: inherit; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1px solid var(--chip-bg); border-radius: 999px; padding: 4px 9px; cursor: pointer; }
.npill:hover { color: var(--ink); }
.npill.active { color: var(--optic); background: var(--optic-soft); border-color: transparent; }
/* Phone widths: tighter pills so five divisions pack two rows, not three —
   without shrinking the desktop sizing that already holds one line. AFTER
   the base rule: a media query adds no specificity, so placed before it the
   base rule would win at every width. */
@media (max-width: 480px) {
  .pill-tabs { gap: 4px; }
  .npill { font-size: 8px; letter-spacing: .05em; padding: 3px 7px; }
}
a.card.link-card { display: block; text-decoration: none; }
a.card.link-card:hover .stub-line { color: var(--optic); }

.pm-row { padding: 6px 0; border-top: 1px solid rgba(229, 232, 236, .06); }
.pm-call { min-width: 0; }
.pm-side { font-family: var(--cond); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; color: var(--ink-row); line-height: 1.35; overflow-wrap: anywhere; }
/* Atomic wrap units: an inline-block never wraps internally while narrower
   than the line, so "over Z/A" moves down whole when the row is tight and a
   side wraps mid-name only when it alone exceeds the column. */
.pm-unit { display: inline-block; max-width: 100%; }
/* 6px left of OVER vs 5px + ~1px of trailing letter-spacing right of it:
   visually symmetric (operator flagged the 9px original as lopsided). */
.pm-fav { margin-right: 6px; }
.pm-vs { font-family: var(--sans); font-weight: 400; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-right: 5px; }
.pm-seed { font-family: var(--sans); font-weight: 400; font-size: 10px; color: var(--faint); margin-left: 4px; }
.pm-seed-l { margin-left: 0; margin-right: 4px; }
/* Call against the draw: the model favors the worse seed. The bolt carries it
   ALONE -- the seeds stay --faint (operator 2026-09-02: tinting them too was
   visual noise). Accent yellow, not red: --down is "the frozen call lost" two
   columns over and ~77% of these grade correct, so red's usual neighbour
   would be a green check. Yellow also beats blue under red-green colour
   blindness here, which is not the usual answer -- simulated, blue lands
   ~30 dE from the green check (it shifts cyan, the check shifts teal) while
   this yellow reads orange at ~90 dE from it.

   Margins run tighter than the numbers suggest: the glyph carries ~4.5 units
   of its own padding inside a 24-unit viewBox, about 2.6px a side here, so
   the ink-to-ink gap is wider than margin-left alone (operator 2026-09-02:
   tightened on both sides). */
/* Seed + bolt travel as one: on a phone they wrapped apart and left a lone
   glyph on its own line (operator 2026-09-03). */
.pm-tail { white-space: nowrap; }
.pm-bolt { color: var(--optic); font-size: 14px; margin-left: 4px; line-height: 0;
           display: inline-flex; vertical-align: middle; }
/* Legend shares .mlog-note's box so the two footnotes share a left edge. */
.contra-legend { display: flex; align-items: center; }
/* The glyph's own left padding, pulled back so its INK aligns with the text
   footnote above, not merely its box (operator 2026-09-02). The bolt path
   starts at x=4.5 in a 24-unit viewBox, so it carries 4.5/24 = .1875em of
   transparent space; expressed in em it stays correct if the size changes.
   Only the legend needs this -- inline in a row the glyph sits after text,
   where that padding IS the gap. */
/* Two footnotes stacked (N/A explainer + this legend) sat 14px apart, the sum
   of one's bottom pad and the other's top. They read as one block, so close
   it up (operator 2026-09-02). */
.mlog-note + .mlog-note { padding-top: 2px; }
/* Conditional pairing chip (app.js isCond): the matchup exists only if a
   named unfinished match goes a named way. Same chip-plus-legend pattern as
   the bolt, in --muted rather than --optic so it can never be read as the
   bolt's meaning. Lives inside .pm-tail, so it wraps with the seed. */
/* Same box model and the same vertical-align as .pm-bolt, deliberately: with
   `middle` both glyphs centre on one point regardless of their size, so a row
   carrying BOTH has them on a shared centre line (operator, 2026-09-09).
   Matching the bolt's 14px too -- a circle reads heavier than a thin diagonal
   at equal height, and its ink is the shorter of the two (.75em against the
   bolt's .875em), which cancels out. */
.pm-cond-icon { color: var(--muted); font-size: 14px; margin-left: 4px; line-height: 0;
  display: inline-flex; vertical-align: middle; }

/* Footnote glyphs: line the "=" up across both legends (operator 2026-09-09).
   Each glyph is pulled left by ITS OWN transparent padding so the ink meets the
   note's left edge (the 2026-09-02 rule), and those paddings differ -- .1875em
   for the bolt, .125em for the circle. Pulling back alone would therefore end
   the two boxes at different x and stagger the "=". Adding the same amount back
   as padding-right makes every box advance exactly 1em from the note's left
   edge whatever its ink offset, so with one shared gap the "=" align. Both must
   stay the same font-size for the em maths to hold. */
.contra-legend, .cond-legend { gap: 3px; }
.contra-legend .pm-bolt { font-size: 13px; margin-left: -.1875em; padding-right: .1875em; }
.cond-legend .pm-cond-icon { font-size: 13px; margin-left: -.125em; padding-right: .125em; }
/* The branch that did not happen: kept for the record, struck, never tallied. */
.pm-void .pm-side, .pm-void .pct, .pm-void .pct small { color: var(--faint); }
.pm-void .pm-side { text-decoration: line-through; }

/* Matchup matrix (pending cards): P(row beats column) heat grid. Sticky
   row-header chips + the board's scrolling shadow for narrow viewports;
   .gb/.gt draw the heavier rule at group boundaries so the diagonal blocks
   read as the guaranteed group-stage matches. */
.mx-scroll {
  overflow-x: auto;
  background:
    linear-gradient(270deg, var(--card) 40%, rgba(23, 26, 31, 0)) 100% 0 / 36px 100%,
    linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)) 100% 0 / 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, scroll;
}
.mx { display: grid; }
.mx-corner, .mx-head.mx-row { position: sticky; left: 0; background: var(--card); z-index: 1; }
.mx-corner { border-bottom: 2px solid var(--rule); }
.mx-head { display: flex; align-items: center; justify-content: center; padding: 2px 2px 7px; border-bottom: 2px solid var(--rule); }
.mx-head.mx-row { justify-content: flex-start; padding: 0 6px 0 0; border-bottom: 1px solid var(--hairline); }
.mx-cell { display: flex; align-items: center; justify-content: center; min-height: 31px; border-bottom: 1px solid var(--hairline); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-row); cursor: help; }
.mx-cell small { font-size: 7.5px; color: var(--muted); font-weight: 600; margin-left: 1px; }
/* Self-pairing cells: crosstable-style diagonal slash — empty read as
   "missing data", the slash reads "void by construction" (operator, 07-18). */
.mx-cell.diag { cursor: default; background:
  linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(229, 232, 236, .18) calc(50% - 0.5px), rgba(229, 232, 236, .18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
  rgba(229, 232, 236, .03); }
.mx .gb { border-left: 2px solid rgba(229, 232, 236, .14); }
.mx .gt { border-top: 2px solid rgba(229, 232, 236, .14); }
/* Cross-group pairings (possible only as Super Sunday deciders) run dim; the
   bright on-diagonal blocks are the guaranteed group-stage schedule. */
.mx-cell.xg, .mx-cell.xg small { color: var(--faint); }
/* Pending cards: the matrix expander gets the same hairline separation the
   graded card's stat-head provides. */
.mlog-sep { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.mlog-head { padding-bottom: 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.mlog-head span[title] { cursor: help; }
.mlog-row { padding: 6px 0; border-bottom: 1px solid var(--hairline); }
/* Second and later group headers inside one drawer (knockout pairing list):
   without this the header sits flush against the previous group's last row and
   reads as another row rather than a new section (operator, 2026-08-17). */
.mlog-head.mlog-group { margin-top: 18px; }
.mlog-row:last-of-type { border-bottom: 0; }
/* Chips only (the monogram already carries the code); slightly larger than the
   placement rows' chips since they are the row's sole identifier. */
.mlog-call { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mlog-call .tchip { width: 23px; height: 23px; font-size: 9px; }
.mlog-call .tchip.long { font-size: 6.5px; }
.mlog-vs { font-size: 9px; font-weight: 600; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; margin: 0 2px; }
.mlog-flag { color: var(--faint); font-size: 12px; margin-left: 3px; }
.mlog-row[title] { cursor: help; }
.mlog-res { font-size: 13px; font-weight: 700; text-align: right; cursor: help; }
/* Compound selector, AFTER the base rule: .mlog-res sets 700/13px (and the
   >=860 layer re-sets its size), so a lone .pm-na class placed earlier in
   the file silently loses — the third cascade-order bite of 2026-09-01. */
.mlog-res.pm-na { font-size: 10.5px; font-weight: 300; letter-spacing: .05em; opacity: .8; }
.mlog-res svg { vertical-align: -2px; }
.mlog-res.hit { color: var(--up); }
.mlog-res.miss { color: var(--down); }
.mlog-res.dim { color: var(--faint); }
.mlog-note { padding: 10px 0 4px; font-size: 10.5px; color: var(--muted); }

.stat-head { margin: 14px 18px 10px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.stat-row { display: flex; gap: 38px; padding: 2px 18px 14px; }
.stat { position: relative; }
.stat-num { font-family: var(--cond); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-num small { font-size: 15px; color: var(--faint); font-weight: 600; }
.stat-lab { display: flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; margin-top: 5px; }
.info-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; padding: 0; border: 1px solid var(--faint); border-radius: 50%; background: none; color: var(--faint); font-family: var(--serif); font-style: italic; font-size: 9px; line-height: 1; cursor: pointer; }
.stat-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; width: min(232px, calc(100vw - 64px)); background: var(--chip-bg); border: 1px solid var(--card-border); border-radius: 6px; padding: 9px 11px; font-size: 11px; line-height: 1.55; color: var(--ink-row); text-transform: none; letter-spacing: normal; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.stat-tip.open { display: block; }
/* Stat rows at the TOP of a card open tooltips downward (overflow:hidden on
   .card clips an upward tip that extends past the card's top edge). */
.tips-down .stat-tip { bottom: auto; top: calc(100% + 8px); }
/* A third tile (Brier, calibration card) sits far enough right that a
   left-aligned tip clips on the card's right edge at phone widths. */
.stat:nth-child(3) .stat-tip { left: auto; right: 0; }
.cal-head span[title] { cursor: help; }

/* Calibration band (site-plan item 16): a <details> card whose collapsed
   state is a one-line stat summary leading the events tab — cutline language
   (faint lowercase labels, bold optic numbers; color on data, not containers). */
.cal-sum { list-style: none; cursor: pointer; padding: 11px 18px 12px; }
.cal-sum::-webkit-details-marker { display: none; }
/* The expanded card's title, band-sized: same condensed uppercase voice.
   Always its own line — the stats line sits beneath it at every width. The
   +/− marker rides the title row (flex end), centered on the title rather
   than the whole band, so it never crowds the stats line on phones. */
.cal-lab { position: relative; display: flex; align-items: center; font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-row); padding-bottom: 7px; }
.cal-title { flex: 1; }
.cal-lab::after { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: normal; color: var(--faint); margin-left: 12px; }
.cal-band[open] .cal-lab::after { content: "\2212"; }
/* Open = the summary IS the card head: the stats line hides (the tiles below
   carry the numbers), the share chip appears on the title row, and the body's
   chip row follows with no second title. */
.cal-band[open] .cal-stats { display: none; }
.cal-band[open] > .cal-sum { padding-bottom: 0; }
.cal-band[open] .cal-lab { padding-bottom: 0; }
/* Absolutely positioned so the 27px button never grows the 18px title row —
   inline, its appearance re-centered the title a few pixels on every toggle.
   right: 20px clears the ~8px +/− marker at the row's flex end by 12px. */
.cal-sum .share-btn { display: none; }
.cal-band[open] .cal-sum .share-btn { display: inline-flex; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
/* Scoped to .cal-chips, NOT .title-chips: that class also sits in card heads
   where the chips butt against the title by design. Here the chip leads a
   stat row whose own padding-top is 2px, so without this the pill sits on
   top of the numbers (operator, 2026-09-06). */
.cal-chips { padding: 0 18px; margin-bottom: 10px; }
.cal-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.cal-seg { display: inline-flex; align-items: baseline; gap: 5px; }
.cal-seg span { font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.cal-seg b { font-weight: 700; font-size: 14px; color: var(--optic); font-variant-numeric: tabular-nums; }

/* Archive ledger (site-plan item 16): older graded events as <details> rows
   whose summaries share one grid template — board-head/board-row technique —
   expanding inline to the frameless full event card. */
.arch-head, .arch-sum { display: grid; grid-template-columns: 92px minmax(0, 1fr) 42px 52px 12px; gap: 7px; align-items: baseline; margin: 0 18px; }
.arch-head { padding: 8px 0 6px; border-bottom: 2px solid var(--rule); font-size: 8.5px; font-weight: 600; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; }
.arch-head span:nth-child(n+3) { text-align: right; }
.arch-head span[title] { cursor: help; }
.arch-row { border-bottom: 1px solid var(--hairline); margin: 0 18px; }
.arch-row:last-of-type { border-bottom: 0; }
.arch-sum { list-style: none; cursor: pointer; padding: 9px 0; margin: 0; }
.arch-sum::-webkit-details-marker { display: none; }
.arch-sum::after { content: "+"; font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; position: relative; top: -1px; }
.arch-row[open] > .arch-sum::after { content: "\2212"; }
@media (hover: hover) { .arch-sum:hover .arch-name { color: var(--ink); } }
.arch-date { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arch-name { font-family: var(--cond); font-weight: 600; font-size: 14.5px; letter-spacing: .03em; color: var(--ink-row); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-fav { font-weight: 700; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.arch-fav small { font-size: 9px; color: var(--muted); font-weight: 600; }
.arch-ll { font-weight: 500; font-size: 12px; text-align: center; color: var(--faint); font-variant-numeric: tabular-nums; }
/* Expanded row body: the full event card, frameless — the outer chrome would
   double-border inside the archive card. Bleeds to the card edge (the inner
   card layout carries its own 18px gutters) over a faint drawer tint. */
.arch-body { margin: 0 -18px; border-top: 1px solid var(--hairline); background: rgba(229, 232, 236, .02); }

.stub-line { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 18px; padding: 22px 20px 4px; }
.stub-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; padding: 0 20px 22px; line-height: 1.9; }

/* ---------- page footer ---------- */
footer.site { margin-top: 22px; text-align: center; font-size: 8.5px; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; line-height: 2; }
/* version tokens keep their small v under the all-caps footer (operator 2026-07-26) */
.vcase { text-transform: none; }

.hidden { display: none; }
/* Visually hidden, still read by screen readers (chip-only rows carry their
   accessible name here — the .tchip monograms are aria-hidden). */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 430px) {
  .wrap { padding: 10px 8px 30px; }
  /* Band stats: the three segments fit a phone width but the desktop gaps
     don't — distribute across the line instead. */
  .cal-stats { justify-content: space-between; column-gap: 6px; }
  /* "Current Event" plus the other three labels overflow a 375px phone by
     12px at the desktop .07em tracking (measured 2026-09-01); .05em brings
     the row back inside the viewport and the gap trim buys Safari slack. */
  nav.tabs { gap: 11px; font-size: 14px; letter-spacing: .05em; }
  .wordmark { font-size: 22px; }
  .wordmark .lg { font-size: 26px; }
  .mast-brand svg { height: 44px; margin-top: 1px; }
}

/* ---------- wide screens (iPad / desktop): use the room ---------- */
@media (min-width: 860px) {
  .wrap { max-width: 840px; padding: 28px 20px 60px; }
  .mast-top { padding: 18px 24px 14px; }
  .wordmark { font-size: 33px; }
  .wordmark .lg { font-size: 40px; }
  .mast-brand svg { height: 63px; margin-top: 1px; }
  .tagline { font-size: 10px; margin-top: 7px; }
  .mast-updated { font-size: 10px; }
  nav.tabs { font-size: 17px; gap: 26px; padding: 12px 24px; }
  .kicker { font-size: 10px; padding: 8px 24px 10px; }
  .card-head { padding: 18px 24px 6px; }
  .card-title { font-size: 25px; }
  .card-chip { font-size: 10px; }
  .card-sub { font-size: 12px; padding: 0 24px 14px; }
  .pick-note { font-size: 10.5px; padding: 16px 24px 2px; }
  .cutline { margin: 14px 24px 2px; }
  .cut-lab { font-size: 10px; }
  .cut-stat { font-size: 12.5px; }
  .cut-stat b { font-size: 15.5px; }
  .card-foot { font-size: 10px; padding: 12px 24px 18px; }
  .pills { padding: 7px 24px 14px; }
  .pill { font-size: 14px; }
  .lookup { margin: 16px 24px 12px; }
  #lookup-card { margin: 0 24px 14px; }
  .lk-lab { font-size: 9.5px; }
  .lk-num { font-size: 14px; }
  .board-inner { min-width: 0; padding-right: 24px; }
  .board-head, .board-row { grid-template-columns: 58px minmax(200px, 1fr) 56px 56px repeat(5, 58px) 70px; }
  /* after the base desktop rule so it wins on equal specificity */
  .board-head.settled, .board-row.settled { grid-template-columns: 58px minmax(200px, 1fr) 56px repeat(5, 58px) 70px; }
  .champ-tag { font-size: 10px; margin-left: 10px; }
  .board-head span:nth-child(1), .board-row .rk { padding-left: 24px; }
  .board-head span:nth-child(2), .board-row .bteam { left: 58px; }
  .board-head { font-size: 10px; }
  .rk { font-size: 20px; }
  .bteam { gap: 10px; padding: 7px 10px 7px 0; }
  .tchip { width: 26px; height: 26px; border-radius: 5px; font-size: 10.5px; }
  .tchip.long { font-size: 7.5px; }
  .team-name { font-size: 18px; }
  .bnum { font-size: 12.5px; }
  .pc { font-size: 13px; }
  .pc small { font-size: 9.5px; }
  .pc.champ { font-size: 14.5px; }
  .pct { font-size: 16px; }
  .delta { font-size: 12.5px; }
  .rate-head, .rate-row { grid-template-columns: 32px 30px 1fr 66px; gap: 12px; margin: 0 24px; }
  #delta-head { padding-left: 5px; }
  .rate-head.no-delta, .rate-row.no-delta { grid-template-columns: 32px 1fr 66px; }
  #rating-rows.has-surge .rtg { padding-right: 21px; }
  .rate-row { padding: 8.5px 0; }
  .rk-sm { font-size: 18px; }
  .player { font-size: 18px; }
  .rtg { font-size: 15px; }
  .surge { font-size: 13px; }
  .tr-head, .tr-row { grid-template-columns: 1fr 62px 62px 62px 62px; gap: 12px; margin: 0 24px; }
  .tr-head.tr-4, .tr-row.tr-4 { grid-template-columns: 1fr 62px 62px 62px; }
  .podium-board .tr-head, .podium-board .tr-row { grid-template-columns: 1fr 62px 62px; }
  .podium-board.live .tr-head, .podium-board.live .tr-row { grid-template-columns: 1fr 62px 62px 62px; }
  .sr-head, .sr-row { grid-template-columns: 1fr 30px 40px; gap: 12px; margin: 0 24px; }
  .sr-head { font-size: 10px; }
  .sr-graded .sr-head, .sr-graded .sr-row { grid-template-columns: 1fr 30px 40px 52px; }
  .sr-side .tchip, .sr-call .tchip, .sr-adv .tchip { width: 25px; height: 25px; font-size: 10px; }
  .sr-side .tchip.long, .sr-call .tchip.long, .sr-adv .tchip.long { font-size: 7px; }
  .sr-mark { font-size: 13px; }
  .sr-name { font-size: 16px; }
  .sr-verb { font-size: 10px; }
  .sr-row .pct { font-size: 16px; }
  .tr-row .bteam { gap: 8px; }
  .tr-row .tchip { width: 22px; height: 22px; font-size: 9px; }
  .tr-row .tchip.long { font-size: 6.5px; }
  .tr-row .team-name { font-size: 18px; }
  .cal-head, .cal-row { grid-template-columns: 1fr 72px 80px 80px; gap: 12px; margin: 0 24px; }
  .stat-head { margin: 14px 24px 10px; }
  .stat-row { padding: 2px 24px 14px; }
  .mlog { margin: 0 24px; }
  /* .pill-tabs keeps its 18px at this width while .mlog moves to 24px, so a
     pill row inside the rounds drawer hangs back the difference to sit at
     18px like the division pills above the board. */
  .past-rounds .pill-tabs { margin-left: -6px; margin-right: -6px; }
  .pdiv { margin: 0 24px; }
  .pdiv .mlog { margin: 0 0 10px; }
  .mlog summary { font-size: 10px; }
  .mlog-head, .mlog-row { grid-template-columns: 1fr 72px 64px; gap: 12px; }
  .mlog-head.cols2, .mlog-row.cols2 { grid-template-columns: 1fr 72px; }
  .mx-cell { font-size: 12px; min-height: 35px; }
  .mx-cell small { font-size: 9px; }
  .mlog-sep { margin-top: 16px; }
  .mlog-head { font-size: 10px; }
  .mlog-call .tchip { width: 27px; height: 27px; font-size: 11px; border-radius: 5px; }
  .mlog-call .tchip.long { font-size: 7.5px; }
  .mlog-res { font-size: 14.5px; }
  .mlog-note { font-size: 12px; }
  .verdict { font-size: 15px; padding: 9px 24px 12px; }
  .fin { font-size: 13px; }
  .cal-sum { padding: 13px 24px 14px; }
  .cal-stats { gap: 4px 22px; }
  .cal-lab { font-size: 17px; }
  .cal-seg span { font-size: 10px; }
  .cal-seg b { font-size: 15.5px; }
  .cal-chips { padding: 0 24px; }
  /* Margin stays on .arch-head/.arch-row only: .arch-sum keeps its base
     margin:0 (the row provides the gutter) — a margin here double-indents
     the summaries 24px past the header. */
  .arch-head, .arch-sum { grid-template-columns: 108px minmax(0, 1fr) 48px 64px 14px; gap: 12px; }
  .arch-head { margin: 0 24px; }
  .arch-head { font-size: 10px; }
  .arch-row { margin: 0 24px; }
  .arch-date { font-size: 12px; }
  .arch-name { font-size: 17px; }
  .arch-fav { font-size: 13px; }
  .arch-fav small { font-size: 10px; }
  .arch-ll { font-size: 13px; }
  .arch-body { margin: 0 -24px; }
  .prose { font-size: 16.5px; padding: 8px 28px 22px; }
  .faq summary { font-size: 17px; padding: 14px 24px; }
  .faq-sec { padding: 20px 24px 3px; font-size: 10px; }
  .faq-a { font-size: 16px; padding: 0 24px 16px; }
  .stub-line { font-size: 21px; padding: 26px 28px 6px; }
  .stub-sub { font-size: 10px; padding: 0 28px 26px; }
}