/* The four diamonds — see tennis-diamonds.js for the decisions.
   Every colour is a page token, so the diamonds follow light and dark mode.
   Green (--gold) is the subject on a player card and OUR favourite on a
   matchup; amber (--warning-text) is the underdog. */
.dm { margin: 18px 0 8px; }
.dm-grid4 {
  display: grid;
  /* exactly two by two — three across leaves the fourth on a row of its own */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.dm-grid4 > * { min-width: 0; }
@media (max-width: 640px) {
  .dm-grid4 { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .dm-svg { max-width: 100%; }
}
.dm-block { display: flex; flex-direction: column; align-items: center; }
.dm-head { text-align: center; min-height: 36px; }
.dm-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text-primary); }
.dm-sub { font-size: 11px; color: var(--text-tertiary); font-style: italic; margin-top: 1px; }
.dm-svg { width: 100%; max-width: 330px; height: auto; overflow: visible; }
@media (max-width: 640px) { .dm-svg { max-width: 380px; } }
.dm-grid { fill: none; stroke: var(--border); stroke-width: 1; opacity: .4; }
.dm-grid.dm-mid { opacity: .75; }
.dm-shape { stroke-width: 1.7; }
.dm-shape.dm-solo, .dm-shape.dm-fav { fill: var(--gold); fill-opacity: .2; stroke: var(--gold); }
.dm-shape.dm-dog { fill: var(--warning-text); fill-opacity: .16; stroke: var(--warning-text); }
.dm-dot.dm-solo, .dm-dot.dm-fav { fill: var(--gold); }
.dm-dot.dm-dog { fill: var(--warning-text); }
.dm-name { font-size: 11px; fill: var(--text-tertiary); }
@media (max-width: 640px) { .dm-name { font-size: 12px; } }
.dm-val { font-family: var(--font-display); font-size: 14px; }
.dm-solo-t, .dm-fav-t { fill: var(--text-primary); color: var(--text-primary); }
.dm-fav-t { fill: var(--gold); color: var(--gold); }
.dm-dog-t { fill: var(--warning-text); color: var(--warning-text); }
.dm-sep { fill: var(--text-tertiary); color: var(--text-tertiary); }
.dm-point { cursor: help; }
.dm-hit { fill: transparent; }
.dm-none { font-size: 13px; color: var(--text-tertiary); font-style: italic; text-align: center; margin: 40px 12px; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--text-primary); margin-bottom: 6px; }
.dm-legend .dm-lg-note { color: var(--text-tertiary); }
.dm-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.dm-key.dm-fav { background: var(--gold); }
.dm-key.dm-dog { background: var(--warning-text); }

/* ── the serve, in the rail (2026-09-25) ─────────────────────────────────── */
.dm-rl { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dm-unit {
  min-height: 30px; padding: 0 12px; background: transparent; color: var(--gold);
  border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-button, inherit);
  font-size: 11px; letter-spacing: .02em; text-transform: none; cursor: pointer;
}
.dm-unit:hover { border-color: var(--gold); }
.dm-speed .u { font-family: var(--font-sans); font-size: .6875rem; color: var(--text-faint); margin-left: 3px; }
.mc-cmp .v .dm-speed { color: inherit; }
@media (max-width: 900px) { .dm-unit { min-height: 44px; padding: 0 16px; } }

/* ── the surface switch (2026-09-25) ─────────────────────────────────────────
   Billy: "toggle between surfaces on player and matchup cards to see how the
   ratings change, with the combination of all being the default view for
   player cards and the surface the matchup is being played on for matchup
   cards." Both tennis cards draw it; one set of rules. Controls take the body
   face (`--font-button`) — never a typewriter face on a control. */
/* the court on show is its own pill inside the outer one (Billy, 2026-10-30:
   every button is a pill; the app's switch is drawn the same way). The
   dividers are short lines that stop clear of it rather than full-height rules. */
.ts-switch {
  display: inline-flex; flex-wrap: wrap; margin-top: 16px; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px;
}
.ts-switch button {
  appearance: none; border: 0; background: transparent; color: var(--text-secondary);
  font-family: var(--font-button, inherit); font-size: 13px; font-weight: 500;
  padding: 0 18px; min-height: 44px; cursor: pointer; white-space: nowrap;
  border-radius: 999px; position: relative;
}
.ts-switch button + button::before {
  content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: var(--border);
}
.ts-switch button[aria-pressed="true"]::before,
.ts-switch button[aria-pressed="true"] + button::before { display: none; }
.ts-switch button:hover { color: var(--text-primary); }
.ts-switch button[aria-pressed="true"] { background: var(--gold-tint-strong); color: var(--gold); }
.ts-switch button small { font-size: 11px; color: var(--text-tertiary); margin-left: 5px; font-weight: 400; }
.ts-switch button[aria-pressed="true"] small { color: var(--gold); }
.ts-note { font-size: .74rem; color: var(--warning-text); margin: 12px 0 0; }
@media (max-width: 520px) { .ts-switch button { padding: 0 12px; font-size: 12.5px; } }

/* the rail row for the court on show */
.pc-prow.ts-on, .mc-cmp.ts-on {
  background: var(--gold-tint); box-shadow: inset 2px 0 0 var(--gold);
  margin: 0 -12px; padding-left: 12px; padding-right: 12px;
}

/* ── scores, read like a scoreboard (2026-09-25) ─────────────────────────────
   Billy: "fix the scoring displays ... so that the scores read more like this
   espn.com screenshot in terms of their orientation." One player per line, one
   set per column, the games that won each set lit, tie-break points small
   beside the games. The winner's line carries a small marker. */
.sb { display: grid; grid-template-columns: 170px auto; column-gap: 14px; justify-content: start; }
.sb .nm {
  font-size: .8rem; color: var(--text-tertiary); line-height: 24px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb .nm a { color: inherit; text-decoration: none; }
.sb .nm a:hover { color: var(--gold); }
.sb .nm.w { color: var(--text-primary); font-weight: 600; }
.sb .nm.w::after {
  content: ""; display: inline-block; width: 0; height: 0; margin-left: 7px; vertical-align: 1px;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 6px solid var(--gold);
}
.sb .sets { display: flex; gap: 6px; }
.sb .sets span {
  width: 30px; font-family: var(--pc-table-face, var(--font-display)); font-weight: 400; font-size: calc(1rem * var(--pc-table-size, 1)); line-height: 24px;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text-tertiary); white-space: nowrap;
}
.sb .sets span.w { color: var(--text-primary); }
.sb .sets sup { font-family: var(--font-sans); font-size: .6875rem; vertical-align: 6px; line-height: 0; margin-left: 1px; }

.ev-head, .ev-row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 82px 58px; gap: 18px; align-items: center;
}
.ev-head {
  padding: 14px 0 6px; border-bottom: 1px solid var(--text-primary);
  font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary);
}
.ev-head span:nth-child(3) { text-align: right; }
.ev-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.ev-row:last-child { border-bottom: 0; }
.ev-row .d { font-size: .78rem; color: var(--text-secondary); }
.ev-row .p {
  font-family: var(--pc-table-face, var(--font-display)); font-weight: 400; font-size: calc(1.06rem * var(--pc-table-size, 1)); text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.ev-row .r { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.ev-row .r.l { color: var(--text-tertiary); }
@media (max-width: 900px) {
  .ev-head { display: none; }
  .ev-row { grid-template-columns: minmax(0, 1fr) 46px 40px; gap: 10px; }
  .ev-row .d { grid-column: 1 / -1; font-size: .7rem; color: var(--text-tertiary); margin-bottom: -6px; }
  .sb { grid-template-columns: 96px auto; column-gap: 10px; }
  .sb .sets { gap: 3px; }
  .sb .sets span { width: 26px; }
}

/* ── the one-line read (2026-09-25) ──────────────────────────────────────────
   Billy: "a more matter of fact summary of a player's game" in place of the
   italic slogan. Didot upright, weight 400, no accent colour — it describes,
   it does not sell. */
.pc-sum {
  font-family: var(--font-display); font-weight: 400; font-size: 1.42rem; line-height: 1.34;
  max-width: 36ch; margin: 20px 0 6px; color: var(--text-primary); text-wrap: pretty;
}
@media (max-width: 900px) { .pc-sum { font-size: 1.24rem; } }