/* ═══════════════════════════════════════════════════════════════════════════
   THE MATCH CARD — the only rules the two tennis match pages need on top of
   player-card.css. Everything else on those pages is the house card sheet.

   Loaded by usopen-match.html AND wimbledon-match.html, which are otherwise a
   config block each. ⛔ Those two pages used to be a 500-line copy of one
   another (see AGENTS.md on `wimbledon.html` / `usopen.html`, which still are);
   the whole point of this file and of tennis-match.js is that there is now ONE
   copy of the card and a patch cannot land on one major and miss the other.

   What is deliberately NOT here, because the card sheet forbids it and the old
   pages were built out of it:
     - tier chips (ELITE / STRONG / AVG / WEAK on a filled pill)
     - gauge tracks behind every number
     - Didot at weight 600
   A charted stroke is drawn on `.sg-track`, the center-zero scale in
   player-card.css, with BOTH players marked on the SAME axis — one scale, two
   ticks, rather than two bars sitting apart for the eye to reconcile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── masthead: two names instead of one ─────────────────────────────────── */
.mc .pc-name { font-size: clamp(26px, 3.6vw, 40px); }
.mc-vs {
  font-family: var(--font-display); font-style: italic;
  color: var(--text-tertiary); font-size: .58em; padding: 0 .2em;
}
.mc-seed {
  font-size: .48em; color: var(--text-tertiary);
  vertical-align: .42em; padding-left: .14em; letter-spacing: .02em;
}

/* ── measure rows: two PLAYERS, not a past and a forecast ───────────────── */
/* The base sheet sizes its two value columns unequally on purpose — last season
   is quiet, the projection is loud. A match has no such asymmetry: the columns
   are two people, and making one of them small would be an argument the model
   has not made. Equal weight, and the ACCENT moves to the column head, where it
   marks which of them we are picking. */
.mc .pc-ch, .mc .pc-row { grid-template-columns: minmax(0, 1fr) 104px 104px; }
.mc .pc-row .was {
  font-family: var(--font-display); font-weight: 400; font-size: 1.56rem;
  color: var(--text-primary);
}
.mc .pc-ch .win { color: var(--gold); }
.mc .pc-fig2 .pc-ch, .mc .pc-fig2 .pc-row {
  grid-template-columns: minmax(0, 1fr) 78px 92px;
}
/* the caption under a value cell moved to player-card.css on 2026-08-31, when
   the tennis player card needed the same thing. Do not re-add it here. */

/* ── the underdog's half of a split ─────────────────────────────────────── */
/* `.pc-gl.w` is the card sheet's warning tone, and the player it would land on
   here has done nothing wrong — he is simply the other man. Quiet, not amber. */
.mc .pc-gl.q { color: var(--text-tertiary); }

/* ── the split: a little more room for the probability column ──────────────────── */
.mc .pc-srckey, .mc .pc-srctot { grid-template-columns: minmax(0, 1fr) 84px 58px; }
.mc .pc-srckey .pc { white-space: nowrap; }

/* ── head-to-head ───────────────────────────────────────────────────────── */
.mc-h2h { font-family: var(--font-display); font-weight: 400; font-size: 3.2rem;
          line-height: .95; font-variant-numeric: lining-nums tabular-nums; }
.mc-h2h .d { color: var(--text-tertiary); padding: 0 .06em; }

/* ── the rail's category comparison ─────────────────────────────────────── */
/* Two players, one column of categories, and the accent on whichever of them
   leads each. ⛔ NO TUG BARS. A gauge track behind every row is the exact thing
   the card sheet rejects, and it would be worse here than usual: a bar has to be
   drawn against a scale, and there is no honest shared scale between a rating
   gap of 205 points and a forehand gap of 1.1 standard deviations. The accent
   says who leads; the two figures say by how much; nothing is invented to fill
   the space between them. */
.mc-cmph, .mc-cmp {
  display: grid; grid-template-columns: minmax(0, 1fr) 54px 54px; gap: 7px;
}
.mc-cmph {
  font-size: .55rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary); padding: 0 0 6px;
  border-bottom: 1px solid var(--border);
}
.mc-cmph span + span { text-align: right; }
.mc-cmp {
  align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.mc-cmp:last-of-type { border-bottom: 0; }
.mc-cmp .n { font-size: .74rem; }
.mc-cmp .n em {
  font-style: normal; display: block; font-size: .63rem;
  color: var(--text-tertiary); margin-top: 2px;
}
.mc-cmp .v {
  font-family: var(--font-display); font-weight: 400; font-size: 1rem;
  font-variant-numeric: lining-nums tabular-nums; text-align: right;
  color: var(--text-tertiary);
}
/* ⛔ COLOUR ALONE WAS NOT ENOUGH TO SAY WHICH ONE LEADS. In light mode the
   accent is pine (#28593F) and the quiet gray beside it is #4D5952 — two dark
   greens a shade apart, so the whole device was invisible at a glance, and in
   dark mode sage against a desaturated gray-green is barely better. The leader
   now also carries a hairline under the digits: a rule, which is the sheet's own
   vocabulary, sized to the number rather than to the column. Nobody has to
   compare two greens to see who is in front. */
/* the rating that produced the rank, kept under it so the rank can be checked */
.mc-cmp .v em {
  font-style: normal; display: block; font-family: var(--font-sans);
  font-size: .6rem; color: var(--text-tertiary); margin-top: 4px;
}
.mc-cmp .v.lead { color: var(--gold); }
.mc-cmp .v.lead i {
  font-style: normal; border-bottom: 2px solid var(--gold); padding-bottom: 2px;
}
.mc-cmp.off .v { color: var(--text-faint); }
.mc-cmpg {
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); margin: 16px 0 2px;
}
.mc-cmpg.q { color: var(--text-tertiary); }
/* a word, not a figure: Didot at figure size overran the rail's value column */
.mc-cmp .v.mc-word, .pc-prow .pv.mc-word {
  font-family: var(--font-sans); font-size: .74rem;
}
.mc-cmpn { font-size: .63rem; color: var(--text-tertiary); margin: 0 0 6px; }

/* ── the rail: one block per player, each pointing at his own card ──────── */
.mc-plink { font-size: .72rem; margin: 9px 0 0; }
.mc-plink a { color: var(--text-secondary); text-decoration: none; }
.mc-plink a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .mc .pc-ch, .mc .pc-row { grid-template-columns: minmax(0, 1fr) 74px 74px; gap: 10px; }
  .mc .pc-fig2 .pc-ch, .mc .pc-fig2 .pc-row {
    grid-template-columns: minmax(0, 1fr) 66px 84px;
  }
  .mc .pc-row .was, .mc .pc-row .now { font-size: 1.24rem; }
  .mc-h2h { font-size: 2.6rem; }
}

/* The last meetings (2026-09-23): the winner's name carries his colour — green
   is our favourite for THIS match, amber the underdog, as everywhere on the card. */
.pc-row.mc-meet { grid-template-columns: minmax(0, 1fr) 72px auto; }
.pc-row.mc-meet .was { font-family: inherit; font-size: 13px; }
.pc-row.mc-meet .was.mc-w { color: var(--gold); }
.pc-row.mc-meet .was.mc-l { color: var(--warning-text); }
.pc-row.mc-meet .now { font-family: var(--font-display); font-size: 14px; white-space: nowrap; }

/* ── 2026-09-25: the surface switch, and the cuts ──────────────────────────
   Green is our pick on the court they really play and amber the other man, on
   every number that names them — including when another court flips the chances. */
.mc-w { color: var(--gold); }
.mc-l { color: var(--warning-text); }
.mc-dot { color: var(--text-tertiary); }
.pc-figs .f.dog .v { color: var(--warning-text); }
.pc-row.ts-on {
  background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold);
  margin: 0 -12px; padding-left: 12px; padding-right: 12px;
}

/* what moves the number — three parts that add to the headline */
.mc-drv {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 18px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.mc-drv .n { font-size: .84rem; }
.mc-drv .v {
  font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.mc-drvsum { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 12px 0 0; font-size: .84rem; }
.mc-drvsum .big {
  font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}

/* the last meetings, as scoreboards */
.mc-meet2 {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.mc-meet2:last-child { border-bottom: 0; }
.mc-meet2 .ev { font-size: .8rem; }
.mc-meet2 .ev em { font-style: normal; display: block; font-size: .68rem; color: var(--text-tertiary); }
.mc-foot a { color: inherit; text-decoration: underline; }
@media (max-width: 900px) {
  .mc-meet2 { grid-template-columns: 1fr; gap: 6px; }
}