/* ════════════════════════════════════════════════════════════════════════════
   Stage events (putting league) — hand-written, NOT generated.

   This file exists because wwwroot/css/views.css is regenerated from scratch by
   tools/extract-styles-to-css.ps1 ("Re-runnable: regenerates views.css from
   scratch each time"), so anything hand-added there is one tool run away from
   being deleted. Everything for this feature lives here instead.

   Tokens only, per DESIGN.md. Dark mode is force-disabled site-wide, so there
   are deliberately no html.dark rules — see project_dark_mode_disabled.
   Linked from Views/Shared/_Layout.cshtml after views.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   Putting League formats (P2) — Views/StageEventFormats/*.cshtml
   Tokens only, per DESIGN.md. Dark mode is force-disabled site-wide, so there
   are deliberately no html.dark rules here.
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventformats-puttingformats"] .sef-lede,
[data-view="stageeventformats-editputtingformat"] .sef-lede {
  max-width: 68ch;
  color: var(--text-muted);
  margin: 0 0 var(--s-5);
}

[data-view="stageeventformats-puttingformats"] .sef-section,
[data-view="stageeventformats-editputtingformat"] .sef-section {
  margin-bottom: var(--s-5);
}

[data-view="stageeventformats-puttingformats"] .sef-note,
[data-view="stageeventformats-editputtingformat"] .sef-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 68ch;
  margin: var(--s-4) 0 0;
}

[data-view="stageeventformats-puttingformats"] .sef-empty {
  color: var(--text-muted);
  margin: var(--s-3) 0 0;
}

/* ── The formats table ───────────────────────────────────────────────────── */

[data-view="stageeventformats-puttingformats"] .sef-table { width: 100%; }

[data-view="stageeventformats-puttingformats"] .sef-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Perfect night is the number a TD checks against the wall chart, so it reads
   as data rather than prose. Not tan — tan is reserved for winners. */
[data-view="stageeventformats-puttingformats"] .sef-perfect,
[data-view="stageeventformats-editputtingformat"] .sef-perfect {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

[data-view="stageeventformats-puttingformats"] .sef-actions-head { width: 1%; }

[data-view="stageeventformats-puttingformats"] .sef-actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  white-space: nowrap;
}

[data-view="stageeventformats-puttingformats"] .sef-inline-form,
[data-view="stageeventformats-editputtingformat"] .sef-inline-form {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  margin: 0;
}

[data-view="stageeventformats-editputtingformat"] .sef-fork { margin-top: var(--s-3); }
[data-view="stageeventformats-editputtingformat"] .sef-fork-name { max-width: 22rem; }

[data-view="stageeventformats-puttingformats"] .sef-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  border: 1px solid var(--success-border);
  background: var(--success-bg);
  color: var(--success);
  margin-left: var(--s-2);
}

[data-view="stageeventformats-puttingformats"] .sef-chip-locked {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}

[data-view="stageeventformats-puttingformats"] .sef-chip-muted {
  border-color: var(--border);
  background: var(--bg-elevated);
  color: var(--text-subtle);
}

/* ── Starter library ─────────────────────────────────────────────────────── */

[data-view="stageeventformats-puttingformats"] .sef-starters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}

[data-view="stageeventformats-puttingformats"] .sef-starter {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}

[data-view="stageeventformats-puttingformats"] .sef-starter:hover,
[data-view="stageeventformats-puttingformats"] .sef-starter:focus-visible {
  border-color: var(--brand-primary);
  background: var(--bg-elevated);
  text-decoration: none;
}

[data-view="stageeventformats-puttingformats"] .sef-starter-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

[data-view="stageeventformats-puttingformats"] .sef-starter-summary {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

[data-view="stageeventformats-puttingformats"] .sef-starter-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-1);
}

[data-view="stageeventformats-puttingformats"] .sef-back { margin-top: var(--s-5); }

/* ── The editor ──────────────────────────────────────────────────────────── */

[data-view="stageeventformats-editputtingformat"] .sef-grow { flex: 1 1 16rem; }

[data-view="stageeventformats-editputtingformat"] .sef-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

[data-view="stageeventformats-editputtingformat"] .sef-live-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--warning);
}

[data-view="stageeventformats-editputtingformat"] .sef-round { margin-bottom: var(--s-4); }

[data-view="stageeventformats-editputtingformat"] .sef-round-head {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

/* One grid definition drives the header row and every stage row, so the
   columns line up without either side knowing the other's widths. */
[data-view="stageeventformats-editputtingformat"] .sef-stage-head,
[data-view="stageeventformats-editputtingformat"] .sef-stage {
  display: grid;
  grid-template-columns:
    minmax(6rem, 1.4fr)   /* stage name   */
    4.5rem                /* putts        */
    5.5rem                /* pts per make */
    5rem                  /* bonus toggle */
    5.5rem                /* bonus pts    */
    4.5rem                /* feet         */
    minmax(5rem, 1fr)     /* stance       */
    minmax(5rem, 1fr)     /* basket       */
    2rem;                 /* remove       */
  gap: var(--s-2);
  align-items: center;
}

[data-view="stageeventformats-editputtingformat"] .sef-stage-head {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-2);
}

[data-view="stageeventformats-editputtingformat"] .sef-stage { padding: var(--s-1) 0; }

[data-view="stageeventformats-editputtingformat"] .sef-stage .input { width: 100%; }

[data-view="stageeventformats-editputtingformat"] .sef-check {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;   /* touch target — the TD does this on a laptop, the club admin might not */
}

[data-view="stageeventformats-editputtingformat"] .sef-add-stage { margin-top: var(--s-3); }

[data-view="stageeventformats-editputtingformat"] .sef-danger { color: var(--error); }

[data-view="stageeventformats-editputtingformat"] .sef-toolbar {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin: var(--s-5) 0;
}

[data-view="stageeventformats-editputtingformat"] .sef-delete {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* Below the grid's natural width the eight columns stop being scannable, so
   each stage becomes a labelled stack instead of a squeezed row. */
@media (max-width: 900px) {
  [data-view="stageeventformats-editputtingformat"] .sef-stage-head { display: none; }

  [data-view="stageeventformats-editputtingformat"] .sef-stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
  }

  [data-view="stageeventformats-editputtingformat"] .sef-stage > :first-child {
    grid-column: 1 / -1;
  }
}

/* Event format picker (P3) — Views/AdminEvents/ConfigureSignIn.cshtml.
   Reuses the existing v-csi-* scoring-mode vocabulary for the radio rows so the
   two blocks read as one control; only the template dropdown is new. */
[data-view="adminevents-configuresignin"] .cfg-format { margin: var(--s-5) 0; }

[data-view="adminevents-configuresignin"] .cfg-format-template {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  max-width: 34rem;
}

[data-view="adminevents-configuresignin"] .cfg-format-template .input { width: 100%; }

[data-view="adminevents-configuresignin"] .cfg-format-note {
  margin: var(--s-2) 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════════════════════
   Putting grid (P3) — Views/StageEventScoring/PuttingGrid.cshtml
   The TD's entry surface. Density matters more here than anywhere except the
   check-in sheet: 12 stages x 20 players has to be scannable at a glance.
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventscoring-puttinggrid"] .pg-crumbs {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

[data-view="stageeventscoring-puttinggrid"] .pg-subhead {
  color: var(--text-muted);
  font-size: 0.9rem;
}

[data-view="stageeventscoring-puttinggrid"] .pg-perfect {
  font-family: var(--font-display);
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}

[data-view="stageeventscoring-puttinggrid"] .pg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}

[data-view="stageeventscoring-puttinggrid"] .pg-inline-form { margin: 0; }
[data-view="stageeventscoring-puttinggrid"] .pg-rollup { margin-left: auto; }

[data-view="stageeventscoring-puttinggrid"] .pg-status {
  font-size: 0.82rem;
  color: var(--text-subtle);
}
[data-view="stageeventscoring-puttinggrid"] .pg-status-busy  { color: var(--text-muted); }
[data-view="stageeventscoring-puttinggrid"] .pg-status-error { color: var(--error); font-weight: 600; }

/* Horizontal scroll lives on this wrapper, never on the page body — a 50-stage
   format must not make the whole document scroll sideways. */
[data-view="stageeventscoring-puttinggrid"] .pg-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

[data-view="stageeventscoring-puttinggrid"] .pg-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* The player column stays put while the stages scroll. It is the only thing on
   the row that tells you whose number you are typing. */
[data-view="stageeventscoring-puttinggrid"] .pg-player,
[data-view="stageeventscoring-puttinggrid"] .pg-player-head {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  text-align: left;
  white-space: nowrap;
  padding: var(--s-2) var(--s-3);
  border-right: 1px solid var(--border-strong);
  font-weight: 500;
}

/* .pg-player is a <th scope="row"> for screen readers, so it inherits the
   .data-table header treatment. A person's name is not a column heading —
   SHOUTING it is wrong, and it costs the sticky column real width. */
[data-view="stageeventscoring-puttinggrid"] .pg-player {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: var(--text);
}

[data-view="stageeventscoring-puttinggrid"] .pg-player-head,
[data-view="stageeventscoring-puttinggrid"] .pg-round-head,
[data-view="stageeventscoring-puttinggrid"] .pg-stage-head,
[data-view="stageeventscoring-puttinggrid"] .pg-total-head {
  background: var(--bg-elevated);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
}

[data-view="stageeventscoring-puttinggrid"] .pg-round-head {
  text-align: center;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
}

[data-view="stageeventscoring-puttinggrid"] .pg-stage-head {
  text-align: center;
  min-width: 3.5rem;
}

[data-view="stageeventscoring-puttinggrid"] .pg-stage-label { display: block; }

[data-view="stageeventscoring-puttinggrid"] .pg-stage-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-subtle);
}

/* Round boundaries are a gap in the design spec's strip; here they are a rule,
   because a table cannot afford the horizontal space at 50 stages. */
[data-view="stageeventscoring-puttinggrid"] .pg-round-end {
  border-right: 2px solid var(--border-strong);
}

[data-view="stageeventscoring-puttinggrid"] .pg-division-row td {
  background: var(--bg-elevated);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

[data-view="stageeventscoring-puttinggrid"] .pg-cell {
  padding: 2px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

[data-view="stageeventscoring-puttinggrid"] .pg-input {
  width: 3rem;
  min-height: 44px;          /* touch target — a TD does this standing at a basket */
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

[data-view="stageeventscoring-puttinggrid"] .pg-input:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
}

/* Hide the spinners — they steal width and a TD types digits. */
[data-view="stageeventscoring-puttinggrid"] .pg-input::-webkit-outer-spin-button,
[data-view="stageeventscoring-puttinggrid"] .pg-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
[data-view="stageeventscoring-puttinggrid"] .pg-input { -moz-appearance: textfield; }

[data-view="stageeventscoring-puttinggrid"] .pg-cell-saving .pg-input { opacity: 0.55; }

[data-view="stageeventscoring-puttinggrid"] .pg-cell-saved .pg-input {
  background: var(--success-bg);
  border-color: var(--success-border);
}

[data-view="stageeventscoring-puttinggrid"] .pg-cell-failed .pg-input {
  background: var(--error-bg);
  border-color: var(--error);
}

/* Perfect stage. Tan is reserved for winners and 1st place, and running a stage
   is exactly that kind of moment — this is the one place the grid earns it. */
[data-view="stageeventscoring-puttinggrid"] .pg-cell-perfect .pg-input {
  background: color-mix(in srgb, var(--accent-tan) 22%, transparent);
  border-color: var(--accent-tan-dark);
  color: var(--accent-tan-dark);
  font-weight: 700;
}

[data-view="stageeventscoring-puttinggrid"] .pg-thru {
  text-align: right;
  padding: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

[data-view="stageeventscoring-puttinggrid"] .pg-points {
  text-align: right;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-primary);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border-strong);
}

[data-view="stageeventscoring-puttinggrid"] .pg-note {
  margin-top: var(--s-4);
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 68ch;
}

[data-view="stageeventscoring-puttinggrid"] .pg-empty { max-width: 46rem; }

/* TODO 2 — the PTR guard. Applied by puttinggrid.js ONLY while something is
   unsaved, so a TD reading the grid keeps normal pull-to-refresh. */
html.pg-no-ptr, body.pg-no-ptr {
  overscroll-behavior-y: contain;
}

/* ════════════════════════════════════════════════════════════════════════════
   TV board (P6) — Views/StageEventScoring/PuttingBoard.cshtml

   Room scale: a three-second scan from fifteen feet. Everything here is sized
   off --tvb-scale, which puttingboard.js sets to fit the field on screen with a
   hard floor (D4's arithmetic constraint: 31 players across 5 divisions at a
   legible row height is ~1400px and 1080p is 1080).
   ══════════════════════════════════════════════════════════════════════════ */

.board-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;          /* a wall screen never scrolls */
}

[data-view="stageeventscoring-puttingboard"] {
  --tvb-scale: 1;
  --tvb-row: calc(40px * var(--tvb-scale));
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: var(--s-4) var(--s-5);
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Header: identity + liveness ─────────────────────────────────────────── */

[data-view="stageeventscoring-puttingboard"] .tvb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--brand-primary);
  margin-bottom: var(--s-4);
}

[data-view="stageeventscoring-puttingboard"] .tvb-club {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  letter-spacing: -0.02em;
  color: var(--brand-primary);
  line-height: 1.05;
}

[data-view="stageeventscoring-puttingboard"] .tvb-meta {
  color: var(--text-muted);
  font-size: clamp(0.85rem, 1.1vw, 1.1rem);
}

[data-view="stageeventscoring-puttingboard"] .tvb-live {
  text-align: right;
  flex: 0 0 auto;
}

[data-view="stageeventscoring-puttingboard"] .tvb-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  font-size: clamp(0.75rem, 0.9vw, 0.95rem);
  font-weight: 600;
  border: 1px solid var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}

/* The ONLY thing that changes when the connection degrades. The rows keep their
   last good data — a TV that blanks mid-night is worse than a stale one. */
[data-view="stageeventscoring-puttingboard"] .tvb-pill[data-state="stale"] {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning);
}

[data-view="stageeventscoring-puttingboard"] .tvb-dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: var(--r-full);
  background: currentColor;
}

[data-view="stageeventscoring-puttingboard"] .tvb-perfect {
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 0.85vw, 0.9rem);
  color: var(--text-subtle);
}

/* ── Divisions, stacked (D4 — no tabs) ───────────────────────────────────── */

[data-view="stageeventscoring-puttingboard"] .tvb-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

[data-view="stageeventscoring-puttingboard"] .tvb-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
}

[data-view="stageeventscoring-puttingboard"] .tvb-division { margin-bottom: var(--s-4); }

[data-view="stageeventscoring-puttingboard"] .tvb-division-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-1);
  padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--border);
}

[data-view="stageeventscoring-puttingboard"] .tvb-division-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.3rem);
  color: var(--text);
}

[data-view="stageeventscoring-puttingboard"] .tvb-division-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-puttingboard"] .tvb-division-perfect { color: var(--accent-tan-dark); }

/* ── Rows ────────────────────────────────────────────────────────────────── */

/* ── The board table (P6, rebuilt) ────────────────────────────────────────────
   Was: one CSS grid per row with a fixed column template, and a strip of bar
   FILLS for the stages. On a 65" screen that spent the entire middle of the board
   on a graph nobody reads from fifteen feet and left the numbers people came for
   crammed at the right edge.
   Now: a real table. Numbers in the middle, one digit per stage; points and the
   gap to the player above sit immediately after the name, because a player should
   never track a row to its far end to find their own total. A table also sizes
   its own columns, which is the only way the header can stay aligned with the
   rows when the stage count is a club setting (12 here, up to 50) and strict CSP
   forbids interpolating a grid template into a style attribute.
   ───────────────────────────────────────────────────────────────────────── */

[data-view="stageeventscoring-puttingboard"] .tvb-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventscoring-puttingboard"] .tvb-headrow > th {
  padding: 0 var(--s-2) calc(2px * var(--tvb-scale));
  font-family: var(--font-body);
  font-size: calc(0.6rem * var(--tvb-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

[data-view="stageeventscoring-puttingboard"] .tvb-rows { list-style: none; margin: 0; padding: 0; }

[data-view="stageeventscoring-puttingboard"] .tvb-row {
  height: var(--tvb-row);
  border-bottom: 1px solid var(--border);
  /* Position change: no fade, no scale, no stagger. A player tracking their own
     row must not lose it. */
  transition: background var(--dur-med) var(--ease-in-out);
}

[data-view="stageeventscoring-puttingboard"] .tvb-row > td {
  padding: 0 var(--s-2);
  white-space: nowrap;
}

/* Banding, because a row now runs 17 columns wide across a 65" screen and the eye
   drops off it somewhere in the middle. Subtle enough not to compete with the tan
   leader row, strong enough to follow from a distance. */
[data-view="stageeventscoring-puttingboard"] .tvb-row:nth-child(even) {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

/* Tan is reserved for winner highlights and 1st place. This is that. */
[data-view="stageeventscoring-puttingboard"] .tvb-row-lead {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
}
[data-view="stageeventscoring-puttingboard"] .tvb-row-lead .tvb-name { color: var(--accent-tan-dark); }

[data-view="stageeventscoring-puttingboard"] .tvb-h-place,
[data-view="stageeventscoring-puttingboard"] .tvb-place {
  width: 2.5em;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(1.15rem * var(--tvb-scale));
  color: var(--text-subtle);
}

[data-view="stageeventscoring-puttingboard"] .tvb-h-name { text-align: left; }
[data-view="stageeventscoring-puttingboard"] .tvb-name {
  font-size: calc(1.25rem * var(--tvb-scale));
  font-weight: 500;
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* THE NUMBER THEY CAME FOR, and it is the biggest thing on the row. */
[data-view="stageeventscoring-puttingboard"] .tvb-h-points,
[data-view="stageeventscoring-puttingboard"] .tvb-points {
  width: 3.4em;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(1.6rem * var(--tvb-scale));
  color: var(--brand-primary);
}

/* What it takes to pass the player above — the other thing anybody on a wall
   screen is working out in their head. */
[data-view="stageeventscoring-puttingboard"] .tvb-h-gap,
[data-view="stageeventscoring-puttingboard"] .tvb-gap {
  width: 3.6em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: calc(0.9rem * var(--tvb-scale));
  color: var(--error);
  border-right: 1px solid var(--border);
}
/* Sub-label under a column head, so "Back" cannot be read as back-from-the-row-above. */
[data-view="stageeventscoring-puttingboard"] .tvb-h-unit {
  display: block;
  font-size: calc(0.5rem * var(--tvb-scale));
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-puttingboard"] .tvb-gap-lead {
  color: var(--accent-tan-dark);
  font-weight: 700;
}

/* One digit per stage. Room-scale means big and evenly spaced; the round
   boundary is a rule rather than a gap so the columns stay on a single pitch. */
[data-view="stageeventscoring-puttingboard"] .tvb-h-stage,
[data-view="stageeventscoring-puttingboard"] .tvb-mk {
  text-align: center;
  font-family: var(--font-mono);
  font-size: calc(1.3rem * var(--tvb-scale));
  color: var(--text);
}
[data-view="stageeventscoring-puttingboard"] .tvb-h-stage { font-family: var(--font-mono); }

[data-view="stageeventscoring-puttingboard"] .tvb-mk.is-unplayed { color: transparent; }
[data-view="stageeventscoring-puttingboard"] .tvb-mk.is-perfect {
  color: var(--accent-tan-dark);
  font-weight: 700;
}

[data-view="stageeventscoring-puttingboard"] .is-round-start { border-left: 1px solid var(--border); }

/* The round's points. Heavier than the makes beside it, because it is a
   different unit and the difference has to be visible at fifteen feet. */
[data-view="stageeventscoring-puttingboard"] .tvb-h-sub,
[data-view="stageeventscoring-puttingboard"] .tvb-sub {
  width: 3em;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(1.3rem * var(--tvb-scale));
  color: var(--text);
  background: var(--row-alt);
}

[data-view="stageeventscoring-puttingboard"] .tvb-h-thru,
[data-view="stageeventscoring-puttingboard"] .tvb-thru {
  width: 3.6em;
  text-align: right;
  font-family: var(--font-mono);
  font-size: calc(0.82rem * var(--tvb-scale));
  color: var(--text-muted);
  border-left: 1px solid var(--border);
}

/* ── Truncation, only when it cannot fit at the row-height floor ─────────── */

[data-view="stageeventscoring-puttingboard"].is-truncated .tvb-rows > tr:nth-child(n+6) {
  display: none;
}

/* The count comes from JS (noteOverflow) because CSS cannot count elements.
   "+ 11 more" is information; "+ more" is a shrug, and nobody can tap a TV to
   find out which eleven. */
[data-view="stageeventscoring-puttingboard"] .tvb-overflow {
  padding: var(--s-2);
  font-size: calc(0.8rem * var(--tvb-scale));
  color: var(--text-subtle);
}

/* ── E4: the perfect-stage moment ────────────────────────────────────────── */

[data-view="stageeventscoring-puttingboard"] .tvb-toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full);
  background: var(--accent-tan);
  color: var(--brand-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.18));
  animation: tvb-toast-in var(--dur-med) var(--ease-out);
}

[data-view="stageeventscoring-puttingboard"] .tvb-toast.is-night {
  background: var(--accent-tan-dark);
  color: #fff;
  font-size: clamp(1.3rem, 2.6vw, 2.4rem);
}

@keyframes tvb-toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-view="stageeventscoring-puttingboard"] .tvb-toast { animation: none; }
  [data-view="stageeventscoring-puttingboard"] .tvb-row   { transition: none; }
}

/* Not the target viewport, but somebody will open it on a phone. Drop the
   strip, keep place/player/total — the design spec's own fallback. */
@media (max-width: 600px) {
  /* Per-stage digits do not fit a phone. Place, name, points, gap and thru do,
     and those are the columns the design spec kept in its own fallback. */
  [data-view="stageeventscoring-puttingboard"] .tvb-mk,
  [data-view="stageeventscoring-puttingboard"] .tvb-sub,
  [data-view="stageeventscoring-puttingboard"] .tvb-h-stage,
  [data-view="stageeventscoring-puttingboard"] .tvb-h-sub { display: none; }
  [data-view="stageeventscoring-puttingboard"] { height: auto; overflow: visible; }
  .board-body { overflow: auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Phone card (P7) — Views/StageEventScoring/MyPuttingCard.cshtml

   The inverted hierarchy: my number is the entire point, so it is the biggest
   thing on the screen and the standings are a subtitle. Single column always —
   this surface has no desktop ambition, and 600-1024px just gets a wider card.
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventscoring-myputtingcard"] .mpc {
  max-width: 34rem;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventscoring-myputtingcard"] .mpc-stale { margin-bottom: var(--s-4); }

[data-view="stageeventscoring-myputtingcard"] .mpc-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: var(--s-1) 0 var(--s-4);
}

/* ── ① Where I stand ─────────────────────────────────────────────────────── */

[data-view="stageeventscoring-myputtingcard"] .mpc-hero {
  text-align: center;
  margin-bottom: var(--s-3);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-2);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-points {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.25rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--brand-primary);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-of {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-standing { margin-top: var(--s-2); }

[data-view="stageeventscoring-myputtingcard"] .mpc-place {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-place-meta,
[data-view="stageeventscoring-myputtingcard"] .mpc-place-none {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--s-1);
}

/* ── ② What I need (E2) ──────────────────────────────────────────────────── */

[data-view="stageeventscoring-myputtingcard"] .mpc-gap {
  margin-bottom: var(--s-3);
  background: var(--bg-elevated);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-gap-line {
  margin: 0;
  padding: var(--s-1) 0;
  font-size: 1rem;
  line-height: 1.4;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-gap-need {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--brand-primary);
  margin-right: var(--s-1);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-gap-muted {
  color: var(--text-muted);
  font-size: 0.85rem;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-gap-lead {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent-tan-dark);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-gap-money { border-top: 1px solid var(--border); margin-top: var(--s-2); padding-top: var(--s-2); }

/* ── ③ What I did ────────────────────────────────────────────────────────── */

[data-view="stageeventscoring-myputtingcard"] .mpc-round {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: var(--s-2);
  overflow: hidden;
}

/* Rounds the player hasn't reached yet are dimmed, not hidden — the shape of
   the night is information even before it is played. */
[data-view="stageeventscoring-myputtingcard"] .mpc-round.is-later { opacity: 0.55; }

[data-view="stageeventscoring-myputtingcard"] .mpc-round-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-height: 44px;             /* touch target */
  cursor: pointer;
  list-style: none;
}
[data-view="stageeventscoring-myputtingcard"] .mpc-round-head::-webkit-details-marker { display: none; }

[data-view="stageeventscoring-myputtingcard"] .mpc-round-name {
  font-family: var(--font-display);
  font-weight: 600;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-round-total {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}
[data-view="stageeventscoring-myputtingcard"] .mpc-round-of {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-stages {
  list-style: none;
  margin: 0;
  padding: 0 var(--s-4) var(--s-3);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-stage {
  display: grid;
  grid-template-columns: 1fr auto 3em;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-1) 0;
  border-top: 1px solid var(--border);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-stage.is-todo { color: var(--text-subtle); }

[data-view="stageeventscoring-myputtingcard"] .mpc-stage-makes {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-muted);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-stage-points {
  font-family: var(--font-display);
  font-weight: 600;
  text-align: right;
  color: var(--brand-primary);
}

/* Running a stage. Tan, reserved for exactly this kind of moment. */
[data-view="stageeventscoring-myputtingcard"] .mpc-stage.is-perfect {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
}
[data-view="stageeventscoring-myputtingcard"] .mpc-stage.is-perfect .mpc-stage-points,
[data-view="stageeventscoring-myputtingcard"] .mpc-stage.is-perfect .mpc-stage-label {
  color: var(--accent-tan-dark);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-empty { text-align: center; }
[data-view="stageeventscoring-myputtingcard"] .mpc-foot { margin-top: var(--s-4); text-align: center; }

@media (min-width: 600px) {
  [data-view="stageeventscoring-myputtingcard"] .mpc { max-width: 40rem; }
  [data-view="stageeventscoring-myputtingcard"] .mpc-points { font-size: 3.75rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Past putting night (P8) — Views/StageEventScoring/PuttingEventDetail.cshtml
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventscoring-puttingeventdetail"] .ped-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-live-link { margin: var(--s-3) 0 var(--s-5); }

[data-view="stageeventscoring-puttingeventdetail"] .ped-division { margin-bottom: var(--s-5); }

[data-view="stageeventscoring-puttingeventdetail"] .ped-division-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-division-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Wide tables scroll inside their own container — the page body never scrolls
   sideways, at 12 stages or at 50. */
[data-view="stageeventscoring-puttingeventdetail"] .ped-scroll { overflow-x: auto; }

[data-view="stageeventscoring-puttingeventdetail"] .ped-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-num       { text-align: right; white-space: nowrap; }
[data-view="stageeventscoring-puttingeventdetail"] .ped-place     { text-align: right; color: var(--text-subtle); }
[data-view="stageeventscoring-puttingeventdetail"] .ped-place-head{ text-align: right; width: 3em; }
[data-view="stageeventscoring-puttingeventdetail"] .ped-round-head{ text-align: right; }
[data-view="stageeventscoring-puttingeventdetail"] .ped-stage-head{ font-family: var(--font-mono); font-size: 0.7rem; }
[data-view="stageeventscoring-puttingeventdetail"] .ped-muted     { color: var(--text-muted); }

[data-view="stageeventscoring-puttingeventdetail"] .ped-player    { white-space: nowrap; }
[data-view="stageeventscoring-puttingeventdetail"] .ped-player-head{ text-align: left; }

[data-view="stageeventscoring-puttingeventdetail"] .ped-points {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

/* Tan for 1st place — the reserved use. .is-winner is the existing data-table
   modifier, so this only adds the stage-specific bits. */
[data-view="stageeventscoring-puttingeventdetail"] tr.is-winner {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
}
[data-view="stageeventscoring-puttingeventdetail"] tr.is-winner .ped-player { color: var(--accent-tan-dark); }

[data-view="stageeventscoring-puttingeventdetail"] .ped-perfect {
  color: var(--accent-tan-dark);
  font-weight: 700;
}

/* ── Units, said out loud ──────────────────────────────────────────────────
   Every column on this page used to be a bare number, and the round columns are
   points while the Made column is putts — same grid, two units, nothing saying
   which. .ped-unit is the sub-label that fixes it. */
[data-view="stageeventscoring-puttingeventdetail"] .ped-unit {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text-subtle);
}

/* The per-make rate under a stage label. Quiet — the label is what you scan by,
   the rate is what you check when a cell surprises you. */
[data-view="stageeventscoring-puttingeventdetail"] .ped-rate {
  font-size: 0.58rem;
  letter-spacing: 0;
  white-space: nowrap;
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-legend {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 var(--s-3);
  max-width: 62ch;
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-legend-eg {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.05rem 0.3rem;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Two rows per player, every cell "X of Y". The value carries the weight and the
   "of Y" sits quietly beside it, so a column scans as a column of values while the
   denominator stays available without being read every time. */
[data-view="stageeventscoring-puttingeventdetail"] .ped-cell    { white-space: nowrap; }
[data-view="stageeventscoring-puttingeventdetail"] .ped-made    { font-weight: 600; color: var(--text); }
[data-view="stageeventscoring-puttingeventdetail"] .ped-pts-big { font-weight: 600; color: var(--brand-primary); }

[data-view="stageeventscoring-puttingeventdetail"] .ped-of {
  margin-left: 0.25rem;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-perfect .ped-made,
[data-view="stageeventscoring-puttingeventdetail"] .ped-perfect .ped-pts-big { color: var(--accent-tan-dark); }

/* The row label — "putts" / "points" — is the thing that makes two rows legible
   rather than confusing, so it is always present, never inferred from position. */
[data-view="stageeventscoring-puttingeventdetail"] .ped-rowlabel {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
  padding-right: var(--s-3);
}

/* The pair reads as one record: a rule above the first row, none between the two. */
[data-view="stageeventscoring-puttingeventdetail"] tr.ped-pair-top > td {
  border-top: 1px solid var(--border);
}
[data-view="stageeventscoring-puttingeventdetail"] tr.ped-pair-bottom > td {
  border-top: 0;
  padding-top: 0;
}
[data-view="stageeventscoring-puttingeventdetail"] tr.ped-pair-top > td { padding-bottom: 0.1rem; }

/* Round subtotal and the night total: the arithmetic, shown rather than asserted. */
[data-view="stageeventscoring-puttingeventdetail"] .ped-subtotal {
  font-weight: 700;
  color: var(--text);
  background: var(--row-alt);
  border-left: 1px solid var(--border);
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-rowtotal {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand-primary);
  background: var(--bg-elevated);
  border-left: 2px solid var(--border-strong);
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-sub-head  { color: var(--text-subtle); }
[data-view="stageeventscoring-puttingeventdetail"] .ped-total-head{ border-left: 2px solid var(--border-strong); }

[data-view="stageeventscoring-puttingeventdetail"] .ped-stages {
  margin-top: var(--s-4);
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-stages > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

[data-view="stageeventscoring-puttingeventdetail"] .ped-stage-table { font-size: 0.85rem; }

[data-view="stageeventscoring-puttingeventdetail"] .ped-private { max-width: 40rem; }

/* ════════════════════════════════════════════════════════════════════════════
   Season standings (P11) — Views/StageEventScoring/PuttingStandings.cshtml
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventscoring-puttingstandings"] .pst-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-puttingstandings"] .pst-block { margin-bottom: var(--s-5); }

[data-view="stageeventscoring-puttingstandings"] .pst-block h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
}

[data-view="stageeventscoring-puttingstandings"] .pst-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* The championship block. Deliberately the loudest thing on the page — it answers
   "who won the league", which the season table below it does not. */
[data-view="stageeventscoring-puttingstandings"] .pst-champ {
  border-color: var(--accent-tan);
}

[data-view="stageeventscoring-puttingstandings"] .pst-champ-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--s-4);
}

[data-view="stageeventscoring-puttingstandings"] .pst-champ-trophy { font-size: 1.3rem; }

[data-view="stageeventscoring-puttingstandings"] .pst-champ-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Sub-caption under a section heading, e.g. "How the regular season finished." */
[data-view="stageeventscoring-puttingstandings"] .pst-sub {
  margin-top: calc(var(--s-2) * -1);
  margin-bottom: var(--s-3);
}

[data-view="stageeventscoring-puttingstandings"] .pst-table {
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventscoring-puttingstandings"] .pst-num    { text-align: right; white-space: nowrap; }
[data-view="stageeventscoring-puttingstandings"] .pst-unit {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-subtle);
}
[data-view="stageeventscoring-puttingstandings"] .pst-counted { font-weight: 600; color: var(--text); }
[data-view="stageeventscoring-puttingstandings"] .pst-slash   { color: var(--border-strong); margin: 0 0.05rem; }
[data-view="stageeventscoring-puttingstandings"] .pst-played  { color: var(--text-muted); }
[data-view="stageeventscoring-puttingstandings"] .pst-dropped {
  margin-left: 0.35rem;
  font-size: 0.72rem;
  color: var(--text-subtle);
}
[data-view="stageeventscoring-puttingstandings"] .pst-nights { color: var(--text-muted); font-size: 0.85rem; }
[data-view="stageeventscoring-puttingstandings"] .pst-via    { color: var(--text-muted); font-size: 0.85rem; }

[data-view="stageeventscoring-puttingstandings"] .pst-points {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

[data-view="stageeventscoring-puttingstandings"] tr.is-winner {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
}

[data-view="stageeventscoring-puttingstandings"] .pst-note {
  margin: var(--s-3) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 68ch;
}

/* ════════════════════════════════════════════════════════════════════════════
   My Putting Stats (E3) — Views/StageEventScoring/MyPuttingStats.cshtml
   The stage heat map uses --scale-1..5 (DESIGN.md, 2026-08-05): five tints of
   --brand-primary, pale to full, so LIGHTNESS carries the whole signal and the
   ramp survives greyscale and every form of colour blindness. The percentage is
   always printed in the cell, because five tints of one green are hard to
   separate by eye. --scale-N-ink is the AA-passing text colour for tint N; do
   not substitute --text, which fails at 3.0:1 on --scale-4.
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventscoring-myputtingstats"] .mps-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-myputtingstats"] .mps-block { margin-bottom: var(--s-5); }

[data-view="stageeventscoring-myputtingstats"] .mps-h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
}

[data-view="stageeventscoring-myputtingstats"] .mps-caveat {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* ── Scope picker ────────────────────────────────────────────────────────── */

[data-view="stageeventscoring-myputtingstats"] .mps-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

[data-view="stageeventscoring-myputtingstats"] .mps-scope {
  /* 44px minimum target — this is a phone-first page. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

[data-view="stageeventscoring-myputtingstats"] .mps-scope.is-current {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  font-weight: 600;
}

/* ── Records ─────────────────────────────────────────────────────────────── */

[data-view="stageeventscoring-myputtingstats"] .mps-records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

[data-view="stageeventscoring-myputtingstats"] .mps-record {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

/* Best night is the one number a player says out loud, so it gets the tan
   treatment reserved for winner highlights. */
[data-view="stageeventscoring-myputtingstats"] .mps-record.is-headline {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-tan) 45%, transparent);
}

[data-view="stageeventscoring-myputtingstats"] .mps-record.is-headline .mps-record-value {
  color: var(--accent-tan-dark);
}

[data-view="stageeventscoring-myputtingstats"] .mps-record-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-myputtingstats"] .mps-record-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventscoring-myputtingstats"] .mps-record-of {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-muted);
}

[data-view="stageeventscoring-myputtingstats"] .mps-record-meta {
  margin-top: var(--s-1);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

[data-view="stageeventscoring-myputtingstats"] .mps-table { width: 100%; }

[data-view="stageeventscoring-myputtingstats"] .mps-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventscoring-myputtingstats"] .mps-dim {
  color: var(--text-muted);
  font-weight: 400;
}

[data-view="stageeventscoring-myputtingstats"] .mps-perfect {
  color: var(--accent-tan-dark);
  font-weight: 600;
}

[data-view="stageeventscoring-myputtingstats"] .mps-points {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

[data-view="stageeventscoring-myputtingstats"] .mps-round-row td {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  background: var(--bg-elevated);
}

[data-view="stageeventscoring-myputtingstats"] .mps-stage { text-align: left; }

[data-view="stageeventscoring-myputtingstats"] .mps-stage-label { display: block; }

[data-view="stageeventscoring-myputtingstats"] .mps-stage-desc {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-muted);
}

[data-view="stageeventscoring-myputtingstats"] tr.is-winner {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
}

/* ── The heat cells ──────────────────────────────────────────────────────── */

[data-view="stageeventscoring-myputtingstats"] .mps-heat {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--r-sm);
}

[data-view="stageeventscoring-myputtingstats"] .mps-heat-1 { background: var(--scale-1); color: var(--scale-1-ink); }
[data-view="stageeventscoring-myputtingstats"] .mps-heat-2 { background: var(--scale-2); color: var(--scale-2-ink); }
[data-view="stageeventscoring-myputtingstats"] .mps-heat-3 { background: var(--scale-3); color: var(--scale-3-ink); }
[data-view="stageeventscoring-myputtingstats"] .mps-heat-4 { background: var(--scale-4); color: var(--scale-4-ink); }
[data-view="stageeventscoring-myputtingstats"] .mps-heat-5 { background: var(--scale-5); color: var(--scale-5-ink); }

[data-view="stageeventscoring-myputtingstats"] .mps-note {
  margin: var(--s-3) 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 68ch;
}

[data-view="stageeventscoring-myputtingstats"] .mps-empty { max-width: 60ch; }

[data-view="stageeventscoring-myputtingstats"] .mps-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

/* Phone: the two trailing "of N" columns are the first to go — the percentage
   and the makes are what a player came for. */
@media (max-width: 600px) {
  [data-view="stageeventscoring-myputtingstats"] .mps-table th:nth-child(6),
  [data-view="stageeventscoring-myputtingstats"] .mps-table td:nth-child(6) { display: none; }
}

/* ── Putting block on the club history page (E3) ──────────────────────────── */
/* Lives here rather than in views.css: views.css is regenerated from scratch by
   tools/extract-styles-to-css.ps1, so a hand-added rule there is one tool run
   from deletion. */

[data-view="profile-clubseasons"] .cs-putting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

[data-view="profile-clubseasons"] .cs-putting-line {
  flex: 1 1 22rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   Putting import (P9) — Views/StageEventImport/*.cshtml
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventimport-importputtingnights"] .sei-crumbs,
[data-view="stageeventimport-previewputtingimport"] .sei-crumbs {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

[data-view="stageeventimport-importputtingnights"] .sei-lede,
[data-view="stageeventimport-previewputtingimport"] .sei-subhead {
  color: var(--text-muted);
  max-width: 68ch;
  margin: var(--s-2) 0 0;
}

[data-view="stageeventimport-importputtingnights"] .sei-hint,
[data-view="stageeventimport-previewputtingimport"] .sei-hint {
  margin: var(--s-1) 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 68ch;
}

[data-view="stageeventimport-importputtingnights"] .sei-field { margin-bottom: var(--s-4); }
[data-view="stageeventimport-importputtingnights"] .sei-narrow { max-width: 12rem; }
[data-view="stageeventimport-importputtingnights"] .sei-grow   { flex: 1 1 20rem; }

[data-view="stageeventimport-importputtingnights"] .sei-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

[data-view="stageeventimport-importputtingnights"] .sei-csv {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: pre;
  overflow-x: auto;
}

[data-view="stageeventimport-importputtingnights"] .sei-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  cursor: pointer;
}

[data-view="stageeventimport-importputtingnights"] .sei-actions,
[data-view="stageeventimport-previewputtingimport"] .sei-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

[data-view="stageeventimport-importputtingnights"] .sei-empty { max-width: 60ch; }

/* ── Preview ─────────────────────────────────────────────────────────────── */

[data-view="stageeventimport-previewputtingimport"] .sei-block { margin-bottom: var(--s-5); }
[data-view="stageeventimport-previewputtingimport"] .sei-verdict { max-width: 88ch; }
[data-view="stageeventimport-previewputtingimport"] .sei-table { width: 100%; }

[data-view="stageeventimport-previewputtingimport"] .sei-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* The stage headings in the sample table carry 12+ columns on a 1160px page, so
   they have to be allowed to be small and tight. */
[data-view="stageeventimport-previewputtingimport"] .sei-stagehead {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
}

[data-view="stageeventimport-previewputtingimport"] .sei-select { min-width: 16rem; }
[data-view="stageeventimport-previewputtingimport"] .sei-date   { max-width: 11rem; }
[data-view="stageeventimport-previewputtingimport"] .sei-dim    { color: var(--text-muted); }

[data-view="stageeventimport-previewputtingimport"] .sei-diff {
  color: var(--error);
  font-weight: 600;
}

[data-view="stageeventimport-previewputtingimport"] .sei-points {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

/* An undated sheet will be SKIPPED, so it has to look different from one that
   is about to be written. */
[data-view="stageeventimport-previewputtingimport"] tr.sei-undated {
  background: var(--warning-bg);
}

[data-view="stageeventimport-previewputtingimport"] .sei-final { margin-bottom: var(--s-7); }

/* ════════════════════════════════════════════════════════════════════════════
   Putting season setup (P11 write path) — Views/StageEventSeason/*.cshtml
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventseason-puttingseason"] .ses-crumbs {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

[data-view="stageeventseason-puttingseason"] .ses-lede,
[data-view="stageeventseason-puttingseason"] .ses-note {
  color: var(--text-muted);
  max-width: 72ch;
}

[data-view="stageeventseason-puttingseason"] .ses-note { margin: 0 0 var(--s-4); font-size: 0.9rem; }

[data-view="stageeventseason-puttingseason"] .ses-hint {
  margin: var(--s-1) 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 72ch;
}

[data-view="stageeventseason-puttingseason"] .ses-section { margin-bottom: var(--s-5); }

/* ── Season picker ───────────────────────────────────────────────────────── */

[data-view="stageeventseason-puttingseason"] .ses-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

[data-view="stageeventseason-puttingseason"] .ses-season {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

[data-view="stageeventseason-puttingseason"] .ses-season.is-current {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  font-weight: 600;
}

/* ── Standings modes ─────────────────────────────────────────────────────── */

[data-view="stageeventseason-puttingseason"] .ses-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-3);
}

[data-view="stageeventseason-puttingseason"] .ses-mode {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
}

[data-view="stageeventseason-puttingseason"] .ses-mode.is-current {
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}

[data-view="stageeventseason-puttingseason"] .ses-mode-body { display: block; }

[data-view="stageeventseason-puttingseason"] .ses-mode-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
}

[data-view="stageeventseason-puttingseason"] .ses-mode-blurb {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ── Segments ────────────────────────────────────────────────────────────── */

[data-view="stageeventseason-puttingseason"] .ses-segment {
  margin: 0 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
}

[data-view="stageeventseason-puttingseason"] .ses-segment-legend {
  padding: 0 var(--s-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventseason-puttingseason"] .ses-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}

[data-view="stageeventseason-puttingseason"] .ses-grow   { flex: 1 1 14rem; }
[data-view="stageeventseason-puttingseason"] .ses-narrow { max-width: 7rem; }
[data-view="stageeventseason-puttingseason"] .ses-actions-inline { margin-left: auto; }

[data-view="stageeventseason-puttingseason"] .ses-nights { margin-top: var(--s-4); }

[data-view="stageeventseason-puttingseason"] .ses-nights-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

[data-view="stageeventseason-puttingseason"] .ses-nights-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* A 16-week season is 16 checkboxes per segment, so they have to tile rather
   than stack — stacked, one segment is a full screen of scrolling. */
[data-view="stageeventseason-puttingseason"] .ses-night-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--s-2);
}

[data-view="stageeventseason-puttingseason"] .ses-night {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  /* 44px minimum target. */
  min-height: 44px;
}

[data-view="stageeventseason-puttingseason"] .ses-night-body { display: block; }

[data-view="stageeventseason-puttingseason"] .ses-night-date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

[data-view="stageeventseason-puttingseason"] .ses-night-label {
  display: block;
  font-size: 0.85rem;
}

[data-view="stageeventseason-puttingseason"] .ses-night-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Finale ──────────────────────────────────────────────────────────────── */

[data-view="stageeventseason-puttingseason"] .ses-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  cursor: pointer;
  margin-bottom: var(--s-4);
}

[data-view="stageeventseason-puttingseason"] .ses-field { margin-bottom: var(--s-3); }

[data-view="stageeventseason-puttingseason"] .ses-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
}

/* ── Preview ─────────────────────────────────────────────────────────────── */

[data-view="stageeventseason-puttingseason"] .ses-preview-h3 {
  margin: var(--s-4) 0 var(--s-2);
  font-size: 0.95rem;
}

[data-view="stageeventseason-puttingseason"] .ses-table { width: 100%; }

[data-view="stageeventseason-puttingseason"] .ses-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventseason-puttingseason"] .ses-dim { color: var(--text-muted); font-size: 0.85rem; }

[data-view="stageeventseason-puttingseason"] .ses-points {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   The finale (P12) — Views/StageEventFinale/*.cshtml
   ══════════════════════════════════════════════════════════════════════════ */

[data-view="stageeventfinale-puttingfinale"] .sfn-crumbs,
[data-view="stageeventfinale-puttingmatch"]  .sfn-crumbs {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-section { margin-bottom: var(--s-5); }
[data-view="stageeventfinale-puttingfinale"] .sfn-empty   { max-width: 64ch; }

[data-view="stageeventfinale-puttingfinale"] .sfn-note,
[data-view="stageeventfinale-puttingfinale"] .sfn-hint {
  color: var(--text-muted);
  max-width: 72ch;
  font-size: 0.88rem;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: var(--s-2);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-season {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-season.is-current {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  font-weight: 600;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-table { width: 100%; }

[data-view="stageeventfinale-puttingfinale"] .sfn-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventfinale-puttingfinale"] .sfn-dim { color: var(--text-muted); font-size: 0.85rem; }

[data-view="stageeventfinale-puttingfinale"] .sfn-points {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

[data-view="stageeventfinale-puttingfinale"] tr.is-winner {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-inline-form,
[data-view="stageeventfinale-puttingmatch"]  .sfn-inline-form {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-select { min-width: 20rem; }

/* ── The bracket columns ─────────────────────────────────────────────────── */

[data-view="stageeventfinale-puttingfinale"] .sfn-side {
  margin: var(--s-5) 0 var(--s-2);
  font-size: 0.95rem;
}

/* A bracket is inherently wide. It scrolls inside its own container so the PAGE
   never scrolls sideways. */
[data-view="stageeventfinale-puttingfinale"] .sfn-rounds,
[data-view="stageeventfinale-puttingbracket"] .pbk-rounds {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  padding-bottom: var(--s-2);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-round,
[data-view="stageeventfinale-puttingbracket"] .pbk-round {
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-round-label,
[data-view="stageeventfinale-puttingbracket"] .pbk-round-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-match,
[data-view="stageeventfinale-puttingbracket"] .pbk-match {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-match.is-decided,
[data-view="stageeventfinale-puttingbracket"] .pbk-match.is-decided {
  border-color: var(--border-strong);
}

/* A bye needs nobody; a wait needs a result upstream. They must not look alike. */
[data-view="stageeventfinale-puttingfinale"] .sfn-match.is-bye { opacity: 0.72; }

[data-view="stageeventfinale-puttingfinale"] .sfn-slot,
[data-view="stageeventfinale-puttingbracket"] .pbk-slot {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2);
  font-size: 0.9rem;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-slot + .sfn-slot,
[data-view="stageeventfinale-puttingbracket"] .pbk-slot + .pbk-slot {
  border-top: 1px solid var(--border);
}

/* The winner gets the tan treatment reserved for winners. */
[data-view="stageeventfinale-puttingfinale"] .sfn-slot.is-winner,
[data-view="stageeventfinale-puttingbracket"] .pbk-slot.is-winner {
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-slot.is-winner .sfn-name,
[data-view="stageeventfinale-puttingbracket"] .pbk-slot.is-winner .pbk-name {
  color: var(--accent-tan-dark);
  font-weight: 600;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-seed,
[data-view="stageeventfinale-puttingbracket"] .pbk-seed {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-subtle);
  text-align: right;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-slot.is-empty .sfn-name,
[data-view="stageeventfinale-puttingbracket"] .pbk-name.is-empty {
  color: var(--text-subtle);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-score,
[data-view="stageeventfinale-puttingbracket"] .pbk-score {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventfinale-puttingfinale"] .sfn-match-foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-1) var(--s-2) var(--s-2);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-done {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventfinale-puttingfinale"] .sfn-champion { max-width: 60ch; }
[data-view="stageeventfinale-puttingfinale"] .sfn-danger   { border-color: var(--error-border); }

/* ── One match ───────────────────────────────────────────────────────────── */

[data-view="stageeventfinale-puttingmatch"] .sfm-v { color: var(--text-subtle); font-weight: 400; }

[data-view="stageeventfinale-puttingmatch"] .sfm-subhead,
[data-view="stageeventfinale-puttingmatch"] .sfm-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  max-width: 72ch;
}

[data-view="stageeventfinale-puttingmatch"] .sfm-grid { overflow-x: auto; }
[data-view="stageeventfinale-puttingmatch"] .sfm-table { width: 100%; min-width: 44rem; }

[data-view="stageeventfinale-puttingmatch"] .sfm-round-head {
  text-align: center;
  border-left: 2px solid var(--border-strong);
  font-size: 0.8rem;
}

[data-view="stageeventfinale-puttingmatch"] .sfm-stage-head {
  text-align: center;
  font-weight: 400;
  padding: var(--s-1);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-stage-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
}

[data-view="stageeventfinale-puttingmatch"] .sfm-stage-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-round-end { border-right: 2px solid var(--border-strong); }

[data-view="stageeventfinale-puttingmatch"] .sfm-player { text-align: left; white-space: nowrap; }

[data-view="stageeventfinale-puttingmatch"] .sfm-seed {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-subtle);
  margin-right: var(--s-1);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-cell { padding: var(--s-1); text-align: center; }

[data-view="stageeventfinale-puttingmatch"] .sfm-input {
  width: 3rem;
  min-height: 44px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-cell-saving .sfm-input { border-color: var(--info); }
[data-view="stageeventfinale-puttingmatch"] .sfm-cell-saved  .sfm-input { border-color: var(--success); }
[data-view="stageeventfinale-puttingmatch"] .sfm-cell-failed .sfm-input {
  border-color: var(--error);
  background: var(--error-bg);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-cell-perfect .sfm-input {
  background: color-mix(in srgb, var(--accent-tan) 22%, transparent);
  border-color: var(--accent-tan-dark);
  border-top-width: 2px;
}

[data-view="stageeventfinale-puttingmatch"] .sfm-thru,
[data-view="stageeventfinale-puttingmatch"] .sfm-points {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventfinale-puttingmatch"] .sfm-points {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-status {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: 0.82rem;
  color: var(--text-muted);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-status-busy  { color: var(--info); }
[data-view="stageeventfinale-puttingmatch"] .sfm-status-error { color: var(--error); font-weight: 600; }

[data-view="stageeventfinale-puttingmatch"] .sfm-decide { margin-top: var(--s-5); }

[data-view="stageeventfinale-puttingmatch"] .sfm-countback {
  width: auto;
  margin: var(--s-3) 0;
}

[data-view="stageeventfinale-puttingmatch"] .sfm-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventfinale-puttingmatch"] .sfm-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

[data-view="stageeventfinale-puttingmatch"] .sfm-walkover { margin-top: var(--s-4); }

[data-view="stageeventfinale-puttingmatch"] .sfm-decided {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* ── The public bracket ──────────────────────────────────────────────────── */

[data-view="stageeventfinale-puttingbracket"] .pbk-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventfinale-puttingbracket"] .pbk-subhead {
  color: var(--text-muted);
  font-size: 0.9rem;
}

[data-view="stageeventfinale-puttingbracket"] .pbk-champion {
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent-tan) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-tan) 45%, transparent);
}

[data-view="stageeventfinale-puttingbracket"] .pbk-champion-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventfinale-puttingbracket"] .pbk-champion-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--accent-tan-dark);
}

[data-view="stageeventfinale-puttingbracket"] .pbk-side { margin-bottom: var(--s-5); }

[data-view="stageeventfinale-puttingbracket"] .pbk-side-title {
  font-size: 0.95rem;
  margin: 0 0 var(--s-2);
}

[data-view="stageeventfinale-puttingbracket"] .pbk-foot { margin-top: var(--s-5); }

/* ── P10: self-entry on the phone card ────────────────────────────────────── */
/* Phone-first. Every target is at least 44px, and the keypad is built by the
   script because its size is a property of the SELECTED stage — putts-per-stage
   lives on the stage, so a club running 3 at distance and 5 up close needs a
   different pad per stage. */

[data-view="stageeventscoring-myputtingcard"] .mpc-self { margin-bottom: var(--s-4); }

[data-view="stageeventscoring-myputtingcard"] .mpc-self-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-status {
  font-size: 0.8rem;
  color: var(--text-muted);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-status.is-busy  { color: var(--info); }
[data-view="stageeventscoring-myputtingcard"] .mpc-self-status.is-ok    { color: var(--success); font-weight: 600; }
[data-view="stageeventscoring-myputtingcard"] .mpc-self-status.is-error { color: var(--error); font-weight: 600; }

[data-view="stageeventscoring-myputtingcard"] .mpc-self-done {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-primary);
}

/* Every stage is tappable, not just the next one — a player goes where the queue
   is short, which is the entire point of showing it. */
[data-view="stageeventscoring-myputtingcard"] .mpc-self-stages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--s-2);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-stage {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-stage.is-done {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-stage.is-selected {
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-stage-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-stage-made {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-stage-queue {
  font-size: 0.65rem;
  color: var(--text-subtle);
}

/* "free" is the actionable one, so it is the one that gets colour. */
[data-view="stageeventscoring-myputtingcard"] .mpc-self-stage-queue.is-clear {
  color: var(--success);
  font-weight: 600;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-pad { margin-top: var(--s-4); }

[data-view="stageeventscoring-myputtingcard"] .mpc-self-pad-label {
  margin-bottom: var(--s-2);
  font-size: 0.9rem;
  color: var(--text-muted);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-key {
  min-width: 56px;
  min-height: 56px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-key:active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

/* Clearing is NOT entering a zero, so it does not look like another digit. */
[data-view="stageeventscoring-myputtingcard"] .mpc-self-key.is-clear {
  min-width: auto;
  padding: 0 var(--s-4);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  border-style: dashed;
}

[data-view="stageeventscoring-myputtingcard"] .mpc-self-note {
  margin: var(--s-3) 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── The self-entry toggle on Configure Pre-Registration ──────────────────── */

[data-view="adminevents-configuresignin"] .cfg-self-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  cursor: pointer;
}

[data-view="stageeventscoring-puttingstandings"] .pst-foot { margin-top: var(--s-5); }

/* ── Unassigned-night warnings (segment auto-assign) ─────────────────────────── */

[data-view="stageeventseason-puttingseason"] .ses-unassigned { max-width: 80ch; }

[data-view="stageeventseason-puttingseason"] .ses-unassigned-list {
  margin: var(--s-2) 0;
  padding-left: var(--s-5);
  font-size: 0.9rem;
}

[data-view="stageeventscoring-puttinggrid"] .pg-nosegment { max-width: 80ch; }

[data-view="stageeventfinale-puttingbracket"] .pbk-note {
  margin: 0 0 var(--s-2);
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 72ch;
}

/* ── Finale substitutions ─────────────────────────────────────────────────── */

[data-view="stageeventfinale-puttingfinale"] .sfn-actions-head { width: 1%; }

[data-view="stageeventfinale-puttingfinale"] .sfn-actions {
  white-space: nowrap;
  text-align: right;
}

[data-view="stageeventfinale-puttingfinale"] .sfn-note {
  width: 11rem;
  font-size: 0.82rem;
  padding: var(--s-1) var(--s-2);
}

/* Typing a match result in, for a match scored on paper or a historical one with no
   stage record. Deliberately behind a <details> — it is the exception, and putting
   it beside the normal flow would invite it. */
[data-view="stageeventfinale-puttingmatch"] .sfm-bypaper { margin-top: var(--s-4); }
[data-view="stageeventfinale-puttingmatch"] .sfm-bypaper > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
[data-view="stageeventfinale-puttingmatch"] .sfm-paper-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
[data-view="stageeventfinale-puttingmatch"] .sfm-paper-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
[data-view="stageeventfinale-puttingmatch"] .sfm-paper-field .input { width: 6rem; }
[data-view="stageeventfinale-puttingmatch"] .sfm-paper-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Season pickers on the standings and bracket pages. Same shape as the stage map's,
   because they are the same choice — a club with five years of putting had no way to
   reach any of it but the newest, short of editing the URL. */
[data-view="stageeventscoring-puttingstandings"] .pst-scopes,
[data-view="stageeventfinale-puttingbracket"] .pbk-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

[data-view="stageeventscoring-puttingstandings"] .pst-scope,
[data-view="stageeventfinale-puttingbracket"] .pbk-scope {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-decoration: none;
}

[data-view="stageeventscoring-puttingstandings"] .pst-scope.is-current,
[data-view="stageeventfinale-puttingbracket"] .pbk-scope.is-current {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  font-weight: 600;
}