/* ═══════════════════════════════════════════════════════════════════════════
   THE PLAYER CARD — shared by the NFL and NBA detail pages.

   One shape, two sports. A masthead, then the argument in a wide column with
   the profile beside it on a different STOCK (--bg-card) that runs the full
   height of the card and closes with a note. No boxes: rules, space and type.

   Two rules this sheet exists to enforce, both of which the old cards broke:

   1. EVERY NUMBER SAYS WHICH SEASON IT IS. A measure row carries last season
      and the projection side by side, under headings that name the year. In
      season a third column appears for the season so far. The football card
      used to print last season under a projected headline; the basketball card
      printed projections captioned like history. The same-looking row meant
      opposite things on the two pages.
   2. WHERE THERE IS NO FORECAST, A DASH. `.pc-row .v:empty` never happens —
      the renderers print an em dash — but nothing here invents a value to fill
      a cell.

   Color appears typographically and about six times a page: the two group
   headings, the kicker's emphasis, and (in season only) the rest-of-season
   column. No filled chips, no gauge tracks, no colored spines — those read as
   a video game and were rejected twice.
   ONE EXCEPTION, Billy's own choice (2026-10-30, "let's put it above games in
   app, web and mobile on player cards"): the "Will his average hold?" dial
   (hold-dial.css / hold-dial.js), where the arc IS the number — how much of
   his average is him — rather than decoration on a number already written.
   It names what its trust is measured on, under its table. No other gauge.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The face of the numbers in the cards' tables: box scores, games, weeks, the
   rail's rows, the readouts under the shapes. Didot, as the masthead's, for
   now. Billy, 2026-10-31, on the basketball game card: "the font for the
   numbers in box scores should be changed to one of the more readable fonts.
   this needs to be approved by me and change site and app wide." He picked B
   from the mock-up: Avenir Next Regular, tabular figures, 16px where Didot
   was 18 (--pc-table-size). The masthead's and the headline figures stay
   Didot. These two lines are the switch (the app's fonts.figure). */
:root { --pc-table-face: var(--font-sans); --pc-table-size: .89; }

/* ── shell ──────────────────────────────────────────────────────────────── */
.pc-back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text-secondary); text-decoration: none;
  font-size: .82rem; margin: 0 0 14px;
}
.pc-back:hover { color: var(--gold); }
.state-msg { color: var(--text-tertiary); font-size: .86rem; padding: 22px 0; }
.state-msg.error { color: var(--danger-text); }

.pd-hero {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  overflow: hidden; background: var(--bg-page);
}

/* ── masthead ───────────────────────────────────────────────────────────── */
.pc-mast { padding: 30px 34px 20px; }
.pc-name {
  font-family: var(--font-display); font-weight: 400;
  /* Didot at display size: let the optical-size axis thin the hairlines. Only
     applies to the variable Bodoni Moda fallback; a static Didot ignores it. */
  font-variation-settings: 'opsz' 72;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1;
  letter-spacing: -.022em; margin: 0;
}
.pc-meta { font-size: .8rem; color: var(--text-secondary); margin-top: 9px; }
.pc-inj { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; font-size: .8rem; }
.pc-inj-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.pc-inj-out .pc-inj-dot { background: #e0483d; }
.pc-inj-doubt .pc-inj-dot { background: #d9762e; }
.pc-inj-q .pc-inj-dot { background: #e8a33d; }
.pc-inj-head { font-weight: 600; color: var(--text-primary, inherit); }
.pc-inj-detail { flex-basis: 100%; color: var(--text-secondary); line-height: 1.4; }
.pc-figs {
  display: flex; flex-wrap: wrap; gap: 14px 38px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.pc-figs .f { min-width: 0; }
.pc-figs .v {
  font-family: var(--font-display); font-weight: 400; font-size: 1.85rem;
  line-height: 1; font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-primary);
}
.pc-figs .f.ahead .v { color: var(--gold); }
.pc-figs .l { font-size: .6875rem; color: var(--text-tertiary); margin-top: 6px; }

/* ── the split: argument ‖ profile, divided by a change of paper ─────────── */
.pc-split { display: grid; grid-template-columns: minmax(0, 1fr) 302px; gap: 0; }
.pc-col { padding: 2px 40px 32px 34px; min-width: 0; }
.pc-rail {
  background: var(--bg-card); padding: 30px 30px 32px;
  display: flex; flex-direction: column; min-width: 0;
}

.pc-kick {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 1.65rem; line-height: 1.28; max-width: 23ch; margin: 18px 0 8px;
}
.pc-kick em { font-style: italic; color: var(--gold); }
.pc-lede {
  font-size: .84rem; color: var(--text-secondary); line-height: 1.68;
  max-width: 58ch; margin: 0;
}
.pc-h {
  font-family: var(--font-display); font-weight: 400; font-size: 1.32rem;
  margin: 30px 0 0;
}
.pc-sd {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: .9rem; color: var(--text-tertiary);
  margin: 4px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--text-primary);
}

/* ── measure rows: last season | (so far) | projected ────────────────────── */
.pc-ch, .pc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 94px 124px; gap: 20px;
}
.pc-ch {
  font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 14px 0 5px;
  border-bottom: 1px solid var(--border);
}
.pc-ch span + span { text-align: right; }
.pc-ch .now { color: var(--text-secondary); }
.pc-row {
  align-items: baseline; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pc-row:last-child { border-bottom: 0; }
.pc-row .n { font-size: .84rem; }
.pc-row .n em {
  font-style: normal; display: block; font-size: .7rem;
  color: var(--text-tertiary); margin-top: 2px;
}
.pc-row .was {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1.06rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-tertiary); text-align: right;
}
.pc-row .now {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1.56rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums; text-align: right;
}
/* A caption under a figure — the exact number behind a place, the sample behind
   a rating. Both tennis cards lead with the legible unit and keep the measured
   one beneath it, so this lives on the shared sheet rather than in each of them.
   No other card puts an <em> inside a value cell, so this is inert elsewhere. */
.pc-row .was em, .pc-row .now em {
  font-style: normal; display: block; font-family: var(--font-sans);
  font-size: .6875rem; color: var(--text-tertiary); margin-top: 4px;
}
/* in season a middle column appears and the forecast takes the accent */
.pc.season .pc-ch, .pc.season .pc-row {
  grid-template-columns: minmax(0, 1fr) 76px 92px 104px;
}
.pc.season .pc-row .sofar {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1.25rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums; text-align: right;
}
.pc.season .pc-row .now, .pc.season .pc-ch .now { color: var(--gold); }

.pc-grp { margin-top: 15px; }
.pc-gl {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 2px;
}
.pc-gl.w { color: var(--warning-text); }
.pc-gn { font-size: .7rem; color: var(--text-tertiary); margin: 0 0 10px; }

/* A measurement, not an underline: a hairline the full width of the label with
   the value filled along it. Drawn on the baseline so it reads as a scale. */
.pc-bar {
  display: block; position: relative; width: 100%; height: 1px;
  background: var(--border); margin-top: 6px;
}
.pc-bar::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 3px;
  width: var(--m, 0%); background: var(--gold);
}
.pc-bar.w::before { background: var(--warning-text); }
.pc-bar.faint::before { opacity: .45; }

/* The signed sibling of `.pc-bar`, for a score whose reference is the MIDDLE
   rather than zero-on-the-left: a charted tennis stroke is a z-score against the
   tour, so the tick in the center IS the average professional and the bar runs
   out either side of it.

   It lives on the shared sheet because both tennis pages draw it and a second
   copy is a second chance for the two to disagree about where the middle is.
   `i` is one player's bar; `b` is a second player's mark on the same axis, which
   is what lets a match card put both men on ONE scale instead of asking the eye
   to compare two bars sitting apart. */
.sg-track {
  display: block; position: relative; width: 100%; height: 1px;
  background: var(--border); margin-top: 7px;
}
.sg-track::after {
  content: ""; position: absolute; left: 50%; top: -4px; height: 9px;
  width: 1px; background: var(--text-tertiary);
}
.sg-track i { position: absolute; top: -1px; height: 3px; background: var(--gold); }
.sg-track b {
  position: absolute; top: -4px; width: 3px; height: 9px; margin-left: -1.5px;
  background: var(--gold); border-radius: 1px;
}
.sg-track b.q { background: var(--text-tertiary); }
.sg-zero {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-faint); text-align: center; margin: 6px 0 0;
}

/* ── the figure panel (touchdowns vs chances / where the points come from) ── */
.pc-fig2 {
  display: grid; grid-template-columns: 174px minmax(0, 1fr); gap: 28px;
  align-items: start; margin-top: 16px;
}
.pc-fig2 .big {
  font-family: var(--font-display); font-weight: 400; font-size: 3.2rem;
  line-height: .95; font-variant-numeric: lining-nums tabular-nums;
}
.pc-fig2 .bigl { font-size: .6875rem; color: var(--text-tertiary); margin-top: 7px; }
.pc-verdict { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; margin-top: 14px; }
.pc-verdict em { font-style: italic; color: var(--gold); }
.pc-fig2 .pc-ch, .pc-fig2 .pc-row { grid-template-columns: minmax(0, 1fr) 78px 92px; }
.pc.season .pc-fig2 .pc-ch, .pc.season .pc-fig2 .pc-row {
  grid-template-columns: minmax(0, 1fr) 70px 84px 92px;
}
/* the panel reads its SECTION's width, not the screen's (2026-10-31): a computer can pair the
   section with another under one pill, which halves it, and the figure beside an in-season table
   of four columns left the names ~20px ("The / arm" on the QB card). Narrow, it stacks as a phone's. */
.pc-col > [data-tab]:has(.pc-fig2) { container: pcsec / inline-size; }
@container pcsec (max-width: 620px) {
  .pc-fig2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ── a quantity split into its parts ─────────────────────────────────────── */
/* The one place this sheet draws a filled shape. It is allowed here and nowhere
   else because the bar IS the number: a whole divided up, where the parts add
   back to the total printed under them and the widths ARE the shares. A gauge
   track or a colored chip decorates a number that is already written down;
   this one carries information the digits cannot.
   Used by the baseball card for one plate appearance, and by the Leagues card
   (web/src/player-card.css and its two static_nfl / static_nba copies, on the
   same class names) for where a projection's points come from.

   ⛔ NO `star-slash` INSIDE A CSS COMMENT. The path above was first written
   with a wildcard directory — `static_*` followed by a slash — which closed
   this comment eight lines early. Everything after it became garbage the
   parser discarded until it could resync, and the casualty was the ONE rule
   below: the bar lost `display: flex` and `height: 26px`, so its segments kept
   their correct widths and rendered 0 pixels tall. Nothing errored; the bar was
   simply not there. */
.pc-srcbar {
  display: flex; height: 26px; border-radius: 3px; overflow: hidden; margin: 12px 0 0;
}
.pc-srcbar > span { display: block; height: 100%; min-width: 1px; }
.pc-srckey {
  display: grid; grid-template-columns: minmax(0, 1fr) 78px 56px; gap: 12px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: .84rem;
}
.pc-srckey:last-of-type { border-bottom: 0; }
.pc-srckey .sw {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 9px; vertical-align: baseline;
}
.pc-srckey em {
  font-style: normal; display: block; font-size: .7rem;
  color: var(--text-tertiary); margin: 2px 0 0 18px;
}
.pc-srckey .p, .pc-srctot .p {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1.06rem * var(--pc-table-size, 1)); text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-srckey .pc {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(.95rem * var(--pc-table-size, 1));
  color: var(--text-tertiary); text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-srctot {
  display: grid; grid-template-columns: minmax(0, 1fr) 78px 56px; gap: 12px;
  padding: 10px 0 0; border-top: 1px solid var(--text-primary); font-size: .84rem; margin-top: 2px;
}
.pc-srctot .p { font-size: 1.18rem; }

/* ── caveats: a sentence that explains a dash, never a number ────────────── */
.pc-cav { font-size: .72rem; line-height: 1.72; color: var(--text-tertiary); margin: 14px 0 0; }
.pc-cav i {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: .78rem; color: var(--text-secondary);
}

/* ── the rail ───────────────────────────────────────────────────────────── */
.pc-rl {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 12px;
}
.pc-rl + .pc-rl, .pc-rail .pc-rl.gap { margin-top: 28px; }
.pc-prow {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px;
  align-items: baseline; padding: 7px 0;
}
.pc-prow .n { font-size: .78rem; }
.pc-prow .n em {
  font-style: normal; display: block; font-size: .6875rem;
  color: var(--text-tertiary); margin-top: 2px;
}
.pc-prow .pv {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1.06rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums; text-align: right;
}
/* ⛔ THE RAIL HAS TO SAY WHICH COLUMN IS A PERCENTILE. Billy, 2026-09-11: a
   stack of ordinals down the right edge with no header is a guess. One of these
   sits over every group — with the `figure` variant where there is no
   percentile to show, so a plain count is never mistaken for a place. */
.pc-nh {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  padding: 0 0 6px; margin: 0 0 4px; border-bottom: 1px solid var(--border);
  font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.pc-nh .pv { text-align: right; }
.pc-nh .pv b { display: block; font-weight: 700; color: var(--gold); }
.pc-nh .pv em { display: block; font-style: normal; font-weight: 700; margin-top: 4px; }
/* the figure the percentile was read off, under it rather than beside it */
.pc-prow .pv small {
  display: block; font-family: var(--font-sans); font-size: .6875rem; font-weight: 400;
  color: var(--text-tertiary); margin-top: 4px;
}
.pc-prow .pv .u { font-size: .6875rem; color: var(--text-faint); margin-left: 2px; }

/* the run to the title — round by round, the figure that used to read "—" */
.pc-run {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 52px; gap: 14px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.pc-run:last-of-type { border-bottom: 0; }
.pc-run .t { height: 8px; border-radius: 2px; background: var(--border); overflow: hidden; }
.pc-run .t i { display: block; height: 100%; background: var(--gold); }
.pc-run .p {
  text-align: right; font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums;
}

.pc-tiny { font-size: .7rem; color: var(--text-tertiary); margin: 8px 0 0; line-height: 1.55; }

/* week-to-week / game-to-game: the one chart on the card */
.pc-log { display: flex; gap: 3px; align-items: flex-end; height: 38px; margin: 4px 0 0; }
.pc-log i { flex: 1; min-width: 1px; background: var(--gold); border-radius: 2px 2px 0 0; display: block; }
.pc-log i.hot { background: var(--warning-text); }

/* the note that closes the rail, pinned to its foot so the stock never ends
   in a slab of empty color */
.pc-note {
  margin: auto 0 0; padding: 16px 0 0; border-top: 1px solid var(--border);
  font-size: .72rem; line-height: 1.75; color: var(--text-tertiary);
}
.pc-note i {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: .78rem; color: var(--text-secondary);
}

/* ── the schedule, inside the argument column ───────────────────────────── */
/* The site's table wrapper is a card — background, border, 16px radius. Inside
   this column that reads as a box, and the card is built out of rules and space
   rather than boxes. Neutralised here rather than by dropping the class, because
   `overflow-x: auto` on it is what stops one wide table taking the whole page
   sideways on a phone. */
.pc-col .proj-table-wrap {
  margin-top: 14px; overflow-x: auto;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  /* a card's table shows every row: the site's 78vh cap cut golf's every start mid-row */
  max-height: none;
}
.pc-table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.pc-table caption { caption-side: top; text-align: left; font-size: .72rem;
  color: var(--text-tertiary); padding: 0 0 8px; }
.pc-table th {
  text-align: right; font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 400; padding: 0 8px 6px;
  border-bottom: 1px solid var(--text-primary); white-space: nowrap;
}
.pc-table th.left, .pc-table th:first-child { text-align: left; }
.pc-table th:first-child { padding-left: 0; }
.pc-table td {
  padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--border);
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(.95rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums; color: var(--text-tertiary);
}
.pc-table td:first-child { padding-left: 0; text-align: left; }
.pc-table td.left {
  font-family: var(--font-sans); font-size: .78rem;
  color: var(--text-secondary); text-align: left;
}
.pc-table td.kind {
  font-family: var(--font-sans); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; text-align: left; color: var(--text-tertiary);
}
/* A PLAYED week is a result, not a forecast, and has to look it — the word
   alone is not enough at a glance. */
.pc-table tr.played td { color: var(--text-primary); }
.pc-table tr.played td.left { color: var(--text-secondary); }
.pc-table tr.played td.kind { color: var(--text-secondary); }
.pc-table tr.bye td { color: var(--text-faint); }
.pc-table tr:last-child td { border-bottom: 0; }

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pc-split { grid-template-columns: 1fr; }
  .pc-col { padding: 2px 20px 26px; }
  .pc-rail { padding: 24px 20px 26px; }
  .pc-mast { padding: 24px 20px 18px; }
  /* A grid item defaults to min-width:auto, so one wide table takes the whole
     page sideways on a phone. Both tracks are pinned to 0 above; this is the
     table's own scroller. */
  .pc-ch, .pc-row { grid-template-columns: minmax(0, 1fr) 66px 84px; gap: 12px; }
  .pc.season .pc-ch, .pc.season .pc-row {
    grid-template-columns: minmax(0, 1fr) 56px 62px 72px; gap: 10px;
  }
  .pc-srckey, .pc-srctot { grid-template-columns: minmax(0, 1fr) 64px 48px; gap: 10px; }
  /* minmax: a wide table slides inside its column rather than widening it past the card (golf's note
     under "did he finish where we said" ran off the edge) */
  .pc-fig2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pc-fig2 .pc-ch, .pc-fig2 .pc-row { grid-template-columns: minmax(0, 1fr) 66px 84px; }
  .pc.season .pc-fig2 .pc-ch, .pc.season .pc-fig2 .pc-row {
    grid-template-columns: minmax(0, 1fr) 56px 62px 72px;
  }
  .pc-row .now { font-size: calc(1.24rem * var(--pc-table-size, 1)); }
  .pc-name { font-variation-settings: 'opsz' 44; }
}

/* a playoff game, named rather than colored — readable regardless of color vision */
.pc-po { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary); font-family: var(--font-sans); }
.pd-legend { font-size: .72rem; color: var(--text-tertiary); margin-top: 10px; line-height: 1.7; }
.pd-legend b { color: var(--text-secondary); font-weight: 600; }

/* ── the rings ───────────────────────────────────────────────────────────── */
/* The shape agreed 2026-09-18 and drawn by `card-rings.js`. Two rings side by
   side, each with its readout underneath.

   ⛔ THE TWO READOUTS HAVE TO AGREE WITH EACH OTHER. The place leads and the
   figure sits UNDER it, not beside it — beside it, a wide figure shoves the
   ordinal sideways and the column stops being a column. Both tracks are the
   same width in both rings, so the two lists line up across the pair as well
   as down. Billy, 2026-09-18. */
/* ⛔ AND THEY HAVE TO AGREE ACROSS THE PAIR, NOT ONLY DOWN IT. A pair where
   one ring is a shape and the other is not yet — which is exactly the state
   tennis is in until the charting file widens — put one list beside a drawing
   and the other list 300px above it, and the two players' places stopped being
   readable as one table. So the pair is three shared rows (heading · drawing ·
   list) that both sides sit in, and a side with no drawing holds the row open
   rather than closing up and dragging its list to the top. */
.rg-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 12px 30px; margin-top: 18px;
}
.rg-shp {
  min-width: 0; display: grid; grid-row: span 3;
  grid-template-rows: subgrid; gap: 12px;
}
.rg-void { min-width: 0; }
/* Older engines ignore `subgrid` and each side keeps its own rows — the layout
   this replaces, which is worse but never broken. */
@supports not (grid-template-rows: subgrid) {
  .rg-shp { display: flex; flex-direction: column; }
  .rg-void { display: none; }
}
.rg-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.rg-h b {
  font-size: .6875rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.rg-h .st {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
/* the drawing scales into its column; the viewBox carries the label margin */
.rg-svg { width: 100%; height: auto; display: block; max-width: 100%; }

.rg-rd { display: flex; flex-direction: column; }
.rg-rdh, .rg-r {
  display: grid; grid-template-columns: minmax(0, 1fr) 78px; gap: 12px;
}
.rg-rdh {
  font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-tertiary); padding-bottom: 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.rg-rdh .pv { text-align: right; }
.rg-rdh .pv b { display: block; font-weight: 700; color: var(--gold); }
.rg-rdh .pv em { display: block; font-style: normal; font-weight: 700; margin-top: 4px; }
.rg-r {
  align-items: baseline; padding: 9px 0; font-size: .8rem;
  border-bottom: 1px solid var(--border);
}
.rg-r:last-child { border-bottom: 0; }
.rg-r > span:first-child { color: var(--text-secondary); }
/* the direction a measure runs, declared on the row it applies to */
.rg-r > span:first-child em {
  font-style: normal; color: var(--warning-text); font-size: .6875rem; margin-left: 6px;
}
/* a row whose own pool is smaller than the ring's — see card-rings.js */
.rg-r > span:first-child i {
  font-style: normal; display: block; color: var(--text-faint);
  font-size: .6875rem; margin-top: 3px;
}
.rg-r .v {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1.12rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums; text-align: right;
  white-space: nowrap; color: var(--text-primary);
}
.rg-r .v small {
  display: block; font-family: var(--font-sans); font-size: .6875rem; font-weight: 400;
  color: var(--text-tertiary); margin-top: 4px;
}
/* a figure that is standing in until its column ships */
.rg-r.soft > span:first-child, .rg-r.soft .v { color: var(--text-faint); }

/* two players: the favorite's column first, because the favorite owns the core */
.rg-mrdh, .rg-mr {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px; gap: 10px;
  align-items: baseline;
}
.rg-mrdh {
  font-size: .6875rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-tertiary); padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.rg-mrdh span:not(:first-child) { text-align: right; }
.rg-mr { padding: 8px 0; font-size: .8rem; border-bottom: 1px solid var(--border); }
.rg-mr:last-child { border-bottom: 0; }
.rg-mr > span:first-child { color: var(--text-secondary); }
.rg-mr > span:first-child i {
  font-style: normal; color: var(--text-faint); font-size: .6875rem; margin-left: 6px;
}
.rg-mr.lead > span:first-child { color: var(--text-primary); }
.rg-mr .v {
  font-family: var(--pc-table-face); font-weight: 400; font-size: calc(1.02rem * var(--pc-table-size, 1));
  font-variant-numeric: lining-nums tabular-nums; text-align: right;
}
.rg-mr .v.a { color: var(--gold); }
.rg-mr .v.b { color: var(--warning-text); }
/* the figure sits UNDER the place, never beside it — a wide figure alongside a
   narrow ordinal pushes the ordinal sideways and the two players' columns stop
   lining up with each other, which is how a matchup is read. */
.rg-mr .v small {
  display: block; font-family: var(--font-sans); font-size: .6875rem; font-weight: 600;
  letter-spacing: .04em; color: var(--text-tertiary); margin-top: 3px;
}
/* one half missing is not a weak row, it is a row that is not in the drawing:
   the label dims, the place we DO hold keeps its player's colour. */
.rg-mr.soft > span:first-child { color: var(--text-faint); }

@media (max-width: 900px) {
  /* Two rings side by side at phone width would be 150px each — the labels
     collide long before the shape stops being readable. One per row, and with
     nothing beside it there is no row left to hold open. */
  .rg-pair { grid-template-columns: 1fr; grid-template-rows: none; gap: 26px; }
  .rg-shp { display: flex; flex-direction: column; grid-row: auto; }
  .rg-void { display: none; }
}

/* ── lit like objects (2026-10-30) ──────────────────────────────────────────
   The light on the cards' shapes and the band over the masthead, drawn by
   `ResolveLight` in player-card.js (the app's ui/shapeLight, Billy 2026-10-30).
   The SVG it writes carries the dark theme's values as each property's
   fallback; the light page is lighter throughout, as the app's is: a much
   lighter gloss so the scale still shows through it, softer shadows under the
   shapes and the pearls, a stronger line of light on the edge and under each
   engraved scale line, a softer middle line cut through the fill. */
html[data-theme="light"] {
  --lt-ps1: 0.06; --lt-ps2: 0.12;
  --lt-lift: 40%; --lt-g0: 0.248; --lt-g1: 0.192; --lt-g2: 0.28;
  --lt-sh1: 0.033; --lt-sh2: 0.044; --lt-sh3: 0.055;
  --lt-glint: 0.5; --lt-mid: 0.22; --lt-eng: 0.55;
  --lt-sweep: 0.26;
}
.lt-key { display: inline-block; vertical-align: middle; margin-right: 6px; overflow: visible; }

/* the band of light: once, on the first card of a visit (ResolveLight.sweep
   adds the class and takes it off when the band has crossed). Laid over the
   masthead and running a little past it, the card's own edge clips it. */
.pc-mast { position: relative; }
.pc-mast.pc-sweep::after {
  content: ""; position: absolute; top: -45%; bottom: -45%; left: -210px; width: 150px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0),
    rgba(255, 255, 255, var(--lt-sweep, 0.13)), rgba(255, 255, 255, 0));
  transform: rotate(16deg);
  animation: pc-sweep 1000ms cubic-bezier(.45, .05, .3, 1) 250ms both;
}
@keyframes pc-sweep {
  from { left: -210px; }
  to { left: calc(100% + 90px); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-mast.pc-sweep::after { display: none; animation: none; }
}

/* ── the sections as pill tabs (2026-10-31) ──────────────────────────────────
   ResolveTabs in player-card.js, the app's CardTabs (ui/cardKit.tsx): 44px
   pills that wrap rather than hide one off the edge, the open one on the inset
   ground in the accent. One section shows at a time. */
.pc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.pc-tab {
  flex: 1 1 auto; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: var(--text-secondary); white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pc-tab:hover { border-color: var(--border-dashed); color: var(--text-primary); }
.pc-tab[aria-selected="true"] { border-color: var(--gold); background: var(--bg-inset); color: var(--gold); }
.pc-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pc-off { display: none !important; }
/* the first heading sits closer under the pills than under a section before it */
.pc-tabbed .pc-tabs + * > .pc-h:first-child,
.pc-tabbed .pc-col > [data-tab] > .pc-h:first-child,
.pc-tabbed .pc-col > section.hd > .pc-h:first-child { margin-top: 22px; }

/* the side column: one last tab on a phone, beside the tabs on a computer */
@media (min-width: 901px) {
  .pc-tab-rail, .pc-tabs.pc-tabs-phone { display: none; }
  /* it follows the reader down and ends under its last block, the closing
     note right there (ResolveTabs sets the top: a tall one scrolls until its
     foot shows, then holds) */
  .pc-tabbed .pc-rail { align-self: start; position: sticky; top: var(--pc-rail-top, 16px); }
  .pc-tabbed .pc-rail .pc-note { margin-top: 26px; }
  .pc-tabbed .pc-split { align-items: start; }
}
@media (max-width: 900px) {
  .pc-tabbed:not([data-tab-open="numbers"]) .pc-rail { display: none; }
  .pc-tabbed[data-tab-open="numbers"] .pc-col > [data-tab] { display: none !important; }
  .pc-tabbed[data-tab-open="numbers"] .pc-col { padding-bottom: 0; }
  .pc-tabbed[data-tab-open="numbers"] .pc-rail { margin-top: 18px; }
  /* on a phone "the numbers" is a tab like the others, on the same ground (Billy 2026-10-31:
     "background color doesn't have to be different on app and mobile for 'the numbers'") */
  .pc-tabbed .pc-rail { background: var(--bg-page); padding-top: 4px; }
  .pc-tabbed .pc-rail .pc-note { margin-top: 26px; }
}

/* the masthead's figures three to a row in a clean grid (2026-10-31), and on a
   computer the lead line beside them rather than over an empty half */
@media (max-width: 900px) {
  .pc-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
  /* one figure (a game's score) takes the row, two take half each, as the app's */
  .pc-figs > .f:only-child { grid-column: 1 / -1; }
  .pc-figs:has(> .f:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-figs .v { white-space: nowrap; }
}
.pc-mrow .pc-mlead { margin: 22px 0 0; }
@media (min-width: 901px) {
  .pc-mrow { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0 48px; align-items: start;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
  .pc-mrow .pc-figs { margin-top: 0; padding-top: 0; border-top: 0; display: grid;
    grid-template-columns: repeat(3, max-content); gap: 16px 34px; }
  .pc-mrow .pc-mlead { margin: 0; max-width: 46ch; }
}

/* ── the bars a game (ResolveLog.bars): a number under each, two lines across ── */
.pc-logbox { margin: 6px 0 0; }
.pc-logpic { position: relative; height: 92px; }
.pc-logsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-logsvg rect { fill: var(--gold); }
.pc-logsvg rect.hot { fill: var(--warning-text); }
.pc-logsvg line.halo { stroke: var(--bg-card); stroke-width: 4.5; stroke-opacity: .8; }
.pc-logsvg line.me { stroke: var(--text-primary); stroke-width: 1.8; }
.pc-logsvg line.lg { stroke: var(--text-secondary); stroke-width: 1.4; stroke-dasharray: 5 4; }
.pc-lognums { display: flex; gap: 6px; margin-top: 5px; }
.pc-lognums span {
  flex: 1; text-align: center; line-height: 1.2;
  font-family: var(--pc-table-face); font-size: 12.5px; color: var(--text-primary);
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-logkey { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 11px; color: var(--text-secondary); }
.pc-logkey span { display: inline-flex; align-items: center; gap: 7px; }
.pc-logkey b { font-weight: 600; color: var(--text-primary); }
.pc-logkey i { display: inline-block; width: 18px; height: 0; border-top: 1.6px solid var(--text-primary); }
.pc-logkey i.lg { border-top: 1.2px dashed var(--text-tertiary); }

/* a wide table shows that it slides (ResolveTabs.slide): the first column
   stays put, the right edge fades while there is more to the right */
.pc-slide th:first-child, .pc-slide td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--pc-slide-ground, var(--bg-page));
}
.pc-slide.moved th:first-child, .pc-slide.moved td:first-child { box-shadow: 1px 0 0 var(--border); }
/* only a hint of the column past the edge fades, never to nothing, so the last whole column (a 3PT, a
   ✓ or ✗) is never washed out (the review of 2026-10-31) */
.pc-slide.more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), rgba(0, 0, 0, .3));
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), rgba(0, 0, 0, .3));
}
/* on a computer an outcome's name stays near its numbers: the rows of a plate appearance or of how a
   match ends keep to a reading width (the review of 2026-10-31: a 1000px gap lost the row) */
@media (min-width: 901px) {
  .pc-col .pc-srcbar, .pc-col .pc-srckey, .pc-col .pc-srctot { max-width: 640px; }
}
.pc-rail .pc-slide { --pc-slide-ground: var(--bg-card); }

/* a ring drawn for a phone (card-rings.js, its labels on two lines) carries
   only the margin it needs: no page trims it, and it takes the column's width */
.rg-svg.rg-wrap { margin: 0 auto !important; max-width: 100% !important; width: 100%; }

/* a measure block with one column (the football card's touchdowns against his
   chances, last season only since 2026-10-31: the forecast columns were dashes) */
.pc-ch.pc-ch1, .pc-row.pc-row1 { grid-template-columns: minmax(0, 1fr) 124px; }
.pc-fig2 .pc-ch.pc-ch1, .pc-fig2 .pc-row.pc-row1,
.pc.season .pc-fig2 .pc-ch.pc-ch1, .pc.season .pc-fig2 .pc-row.pc-row1 { grid-template-columns: minmax(0, 1fr) 92px; }
/* the weeks' "vs" or "@" beside the opponent, in the reading face, quiet */
.pc-table td.vs, .pc-table th.vs { font-family: var(--font-sans); font-size: .78rem; color: var(--text-tertiary); padding-right: 0; width: 1px; }
/* a tabbed card's table has its heading over it, so its caption is for screen readers */
.pc-tabbed .pc-table caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.pc-mlead > :first-child { margin-top: 0; }
/* a card with no side column (a team card, the game pages) takes the whole width for its column */
.pc-split:not(:has(> .pc-rail)) { grid-template-columns: minmax(0, 1fr); }

/* the side column's notes, at the foot of the card under the tabs (ResolveTabs) */
.pc-foot { margin-top: 30px; }
.pc-foot .pc-note { margin: 0; padding: 16px 0 0; max-width: 72ch; }
.pc-foot .pc-note + .pc-note { margin-top: 16px; }
/* a card opened on a tab (#trust) never puts its name under the sticky bar */
.pd-hero, .pc-tabs { scroll-margin-top: 84px; }
/* a date in a card's table stays on one line ("10-09", never "10-" over "09") */
.pc-table td:first-child { white-space: nowrap; }
/* a forecast row reads plainly lighter than a played one, in the games and the weeks (2026-10-31:
   the two grays were too close to tell apart) */
.pc-col [data-tab="games"] .pc-table tbody tr:not(.played):not(.bye) td,
.pc-col [data-tab="weeks"] .pc-table tbody tr:not(.played):not(.bye) td {
  color: color-mix(in srgb, var(--text-tertiary) 72%, var(--bg-page));
}
.pc-col [data-tab="games"] .pc-table tbody tr:not(.played):not(.bye) td.left,
.pc-col [data-tab="weeks"] .pc-table tbody tr:not(.played):not(.bye) td.left { color: var(--text-tertiary); }

/* a pair of sections under one pill on a computer (ResolveTabs opts.pairs): side by side when the
   column has room for both, else one above the other */
@media (min-width: 901px) {
  .pc-col.pc-side2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; align-items: start; }
  .pc-col.pc-side2 > * { grid-column: 1 / -1; min-width: 0; }
  .pc-col.pc-side2 > [data-tab]:not(.pc-off) { grid-column: auto; }
}

/* a quantity split into its parts, with a head over its two number columns (the hitter's plate
   appearance: share, per 600) */
.pc-srckey.pc-srchead { padding: 12px 0 4px; font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-tertiary); }
.pc-srckey.pc-srchead .p, .pc-srckey.pc-srchead .pc { font-family: var(--font-sans); font-size: .6875rem; color: var(--text-tertiary); }

/* the "so far this season" switch under a card's shapes (ResolveCard.soFarSwitch): a pill of two,
   the one on show in ink, as the maps' switch */
.pc-sofar { display: inline-flex; gap: 3px; margin: 16px 0 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; max-width: 100%; }
.pc-sofar button {
  appearance: none; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  min-height: 40px; padding: 0 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--text-tertiary); white-space: nowrap;
}
.pc-sofar button:hover { background: var(--bg-inset); }
.pc-sofar button[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-page); }
.pc-sofar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }