/* ═══════════════════════════════════════════════════════════════════════════
   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.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 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: .66rem; 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: .6rem; 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(--font-display); font-weight: 400; font-size: 1.06rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-tertiary); text-align: right;
}
.pc-row .now {
  font-family: var(--font-display); font-weight: 400; font-size: 1.56rem;
  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: .64rem; 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(--font-display); font-weight: 400; font-size: 1.25rem;
  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: .68rem; 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: .6rem; 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: .68rem; 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;
}

/* ── 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(--font-display); font-weight: 400; font-size: 1.06rem; text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-srckey .pc {
  font-family: var(--font-display); font-weight: 400; font-size: .95rem;
  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: .68rem; 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: .68rem;
  color: var(--text-tertiary); margin-top: 2px;
}
.pc-prow .pv {
  font-family: var(--font-display); font-weight: 400; font-size: 1.06rem;
  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: .6rem; 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: .68rem; font-weight: 400;
  color: var(--text-tertiary); margin-top: 4px;
}
.pc-prow .pv .u { font-size: .58rem; 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(--font-display); font-weight: 400; font-size: 1rem;
  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;
}
.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: .6rem; 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(--font-display); font-weight: 400; font-size: .95rem;
  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: .6rem; 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; }
  .pc-fig2 { grid-template-columns: 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: 1.24rem; }
  .pc-name { font-variation-settings: 'opsz' 44; }
}

/* a playoff game, named rather than colored — readable regardless of color vision */
.pc-po { font-size: .62rem; 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: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.rg-h .st {
  font-size: .62rem; 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: .6rem; 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: .68rem; 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: .66rem; margin-top: 3px;
}
.rg-r .v {
  font-family: var(--font-display); font-weight: 400; font-size: 1.12rem;
  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: .68rem; 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: .6rem; 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: .68rem; margin-left: 6px;
}
.rg-mr.lead > span:first-child { color: var(--text-primary); }
.rg-mr .v {
  font-family: var(--font-display); font-weight: 400; font-size: 1.02rem;
  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: .62rem; 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; }
}