/* Grassroots Classic 2026 — the public standings board.
   A SEPARATE STYLESHEET, on purpose. styles.css is the sale: the hero, the
   division cards, the form and the Stripe return all render from it during a
   live sale, and the smallest safe change is a new file rather than 400 lines
   appended to that one. It loads after styles.css AND after classic.css, and
   reuses their tokens, .wrap, .banner, .btn, .tnum and .u-sr-only.

   ── WHAT IS AND IS NOT IN THIS FILE ────────────────────────────────────────
   The Broadsheet itself (.sheet, table.bs, the sticky pair, .win, .swipe, the
   podium tint) lives in classic.css, because the Schedule and Workouts pages
   are printed on the same sheet and one copy of that vocabulary is the whole
   point of having a shell stylesheet. What is left here is the handful of
   things only the board has: the row this page's search has found, the second
   line of a cell, the "new results" button, the skeleton, and the kiosk. */

.lb-body { background: var(--paper); }

/* ---------- the sticky pair's one number ---------- */
/* ★ ONE NUMBER, TWO RULES THAT MUST AGREE. The rank column's width and the team
   column's sticky `left` offset are the same measurement seen twice, and when
   they disagree the team column slides UNDER the rank column the moment anybody
   scrolls sideways. classic.css sets them as two literals, which is right for
   the mockup and wrong here for one reason: this board draws WD in a rank cell
   and the mockup never did. Measured against the real markup, the cell GREW past
   its declared width to 55.97px at 1280 (declared 54) and 45.42px at 375
   (declared 44), which is a 2px overlap on every row of a scrolled table.
   ★ SO IT IS SET WITH SLACK, ON PURPOSE. A value one pixel too small is an
   overlap on every row; a value two pixels too large is invisible. Re-measure
   the widest rank cell whenever this page's type scale moves. */
.lb-body { --lb-rank-w: 58px; }
.lb-body table.bs th.stick-1, .lb-body table.bs td.stick-1 {
  width: var(--lb-rank-w); min-width: var(--lb-rank-w);
}
.lb-body table.bs th.stick-2, .lb-body table.bs td.stick-2 { left: var(--lb-rank-w); }
@media (max-width: 480px) { .lb-body { --lb-rank-w: 44px; } }

/* ---------- what only the board draws ---------- */

/* ★ THE TEAM CELL IS A <th scope="row"> HERE, AND classic.css STYLES A <td>.
   The mockup drew the team name as an ordinary cell; this page keeps a real row
   header, because a row header is what a screen reader announces before every
   cell in the row and losing it to save three selectors is not a trade worth
   making. So the sheet's team-cell rules are restated for the header element.
   Widths are NOT restated: classic.css already pairs `td.c-team` with
   `th.stick-2`, which is this same cell. */
table.bs th.c-team {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 500; font-size: 15px;
}
table.bs tr.podium th.stick-2 { background: var(--d-sheet); }
table.bs tr.wd th.c-team { color: var(--d-dim); }
body.lb-kiosk table.bs th.c-team { font-size: 25px; }

/* The second line of a two-line cell: first names under a team, the tiebreak
   under a result. Small, muted, and it never wraps into the row above it. */
.c-team small {
  display: block; font-family: var(--serif); text-transform: none; letter-spacing: 0;
  font-size: 12px; color: var(--ink-muted); font-weight: 400; margin-top: 2px;
}
.c-score small { display: block; font-size: 12px; color: var(--ink-muted); }

/* Find-my-team HIGHLIGHTS and never reorders (§13.4), so the marker has to be
   visible on the sticky pair too: those cells paint their own background.
   ★ ONE mark per row, not one box per cell (Morgan 16/09): the cells stay plain
   one moss bar sits on the rank cell and the rank and team name turn moss. A
   found FIRST-place row keeps its tint under the mark (Morgan 16/09). A per-cell
   inset outline drew a grid of squares. */
.bs tr.is-found td, .bs tr.is-found th { background: var(--d-sheet); }
.bs tr.podium.is-found td { background: transparent; }
.bs tr.podium.is-found td.stick-1, .bs tr.podium.is-found td.stick-2, .bs tr.podium.is-found th.stick-2 { background: var(--d-sheet); }
.bs tr.is-found td.stick-1 { box-shadow: inset 3px 0 0 var(--moss); }
.bs tr.is-found th.c-team { color: var(--moss); }
.bs tr.is-found td.c-rank { color: var(--moss); }

/* ---------- the "new results" chip ---------- */
.lb-new {
  display: block; width: 100%; min-height: 44px; margin: 14px 0 0;
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--leaf-soft); color: var(--moss);
  border: 1px solid var(--moss); border-radius: var(--radius-pill);
  cursor: pointer;
}

/* ---------- stamp ---------- */
/* classic.css draws .stamp; this is the amber half. Past five minutes (§13.2)
   the stamp says so in colour AND in a mark, so it reads the same in monochrome
   and to a colour-blind reader. */
.stamp.is-stale { color: #8A5A12; font-weight: 600; }
.stamp.is-stale i { background: #8A5A12; }
.stamp.is-stale::before { content: "! "; }

/* The not-released card breathes inside its sheet, as the mockup's does: a dashed
   box flush against the sheet's own border reads as a rendering fault. */
.sheet .locked { margin: 22px; }

.lb-note--demo { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 600; color: var(--amber); margin: 0 0 12px; padding: 0; text-align: left; }
.lb-note {
  margin: var(--space-sm) 0 0; color: var(--ink-muted);
  font-family: var(--serif); font-style: italic;
}

/* ---------- skeleton ---------- */
.lb-skeleton { background: var(--cream); border-radius: var(--radius-panel); padding: 12px; }
.lb-skeleton span {
  display: block; height: 16px; margin: 0 0 10px;
  background: var(--paper-2); border-radius: 4px;
}
.lb-skeleton span:last-child { margin-bottom: 0; width: 62%; }

/* ---------- kiosk (the venue screen) ---------- */
/* One locked pool, FIXED CHROME, no rotation (§13.7). This IS the venue face:
   the TV opens this URL full screen and is never touched again, so there are no
   controls on it at all. Which board it shows is decided by the URL's `board`
   param, because a kiosk with a control strip is a kiosk somebody walks past
   and pokes. The kiosk line under the masthead is what names the board instead. */
.lb-kiosk .topbar, .lb-kiosk .controls, .lb-kiosk .lb-new { display: none; }
.lb-kiosk .wrap { max-width: 1200px; }
.lb-kiosk .bs { font-size: clamp(16px, 1.6vw, 24px); }
.lb-kiosk .c-rank { font-size: clamp(22px, 2.2vw, 34px); }
.lb-kiosk .kiosk-title { display: block; }
/* ★ THE WHOLE ROW SCALES, NOT ONLY THE RANK. Every cell in classic.css carries an
   explicit px size, so a font-size on the table alone leaves the totals, places
   and scores at phone size on a screen read from ten metres away. Each clamp
   tops out at the mockup's own kiosk measurement. */
.lb-kiosk .c-total { font-size: clamp(19px, 2vw, 27px); }
.lb-kiosk .c-place, .lb-kiosk .c-score { font-size: clamp(15px, 1.5vw, 20px); }
.lb-kiosk table.bs thead th { font-size: clamp(11px, 1.1vw, 14px); }
.lb-kiosk table.bs th, .lb-kiosk table.bs td {
  padding: clamp(11px, 1.2vw, 15px) clamp(14px, 1.4vw, 18px);
}
.lb-kiosk .win {
  width: clamp(22px, 2.3vw, 30px); height: clamp(22px, 2.3vw, 30px);
  font-size: clamp(14px, 1.5vw, 19px);
}
/* A venue TV has the room classic.css only gives its own `body.kiosk`. */
.lb-kiosk table.bs th.stick-2 { max-width: 260px; min-width: 190px; }
.lb-kiosk { --lb-rank-w: 78px; }