/*
 * golf-masters.css
 *
 * Portable component layer for the Masters direction. It depends on:
 * - varko.css for spacing, type aliases, touch and motion primitives
 * - tokens.css for --masters-* semantic tokens
 *
 * This file is intentionally prefixed with .gds-* so it can be imported into
 * preview pages now and production screens later without colliding with the
 * legacy app classes during migration.
 */

/* Kill Safari's double-tap-to-zoom app-wide (a missed tap near +/− read as a double-tap and
 * zoomed the live-scoring screen). `manipulation` keeps pan + pinch-zoom — only the double-tap
 * gesture (and its tap delay) goes. Same fix as the casual prototype (76ee6ef); the gds rebuild
 * lost it. */
* {
  touch-action: manipulation;
}

.gds-caps {
  color: var(--masters-ink-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
}

.gds-screen-title,
.gds-board__total,
.gds-ledger__value {
  font-family: var(--font-display-masters);
  font-optical-sizing: auto;
}

.gds-button:focus-visible,
.gds-icon-button:focus-visible,
.gds-chip:focus-visible,
.gds-round-row:focus-visible,
.gds-bottom-nav__item:focus-visible,
.gds-play__hole-btn:focus-visible,
.gds-holechip:focus-visible,
.gds-sheet__finish:focus-visible {
  outline: 3px solid var(--masters-positive);
  outline-offset: 3px;
}

.gds-screen {
  display: flex;
  flex-direction: column;
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-xl);
  background: var(--masters-bg);
  color: var(--masters-ink);
  box-shadow: var(--masters-shadow-md);
}

.gds-screen--compact {
  min-height: 420px;
}

.gds-screen-header {
  position: relative;
  overflow: hidden;
  padding: 1rem 1rem 0.95rem;
  background: linear-gradient(168deg, var(--masters-header-from), var(--masters-header-to));
  color: var(--masters-on-green);
}

.gds-screen-header::before,
.gds-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--masters-contours) right -12px top -24px / 200% auto no-repeat;
  opacity: 0.1;
  mask-image: radial-gradient(130% 150% at 100% 0%, #000 0 30%, transparent 80%);
}

.gds-screen-header::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--masters-butter) 60%, transparent),
    transparent
  );
}

.gds-screen-header > * {
  position: relative;
  z-index: 1;
}

.gds-screen-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Title + subtitle share one column (mirrors the comp's .detail-hdr > div) so the subtitle aligns
   under the course name automatically — no magic padding. Back button + actions sit either side. */
.gds-screen-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gds-screen-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--masters-on-green);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold); /* comp .hdr__title / .detail-hdr h1: 600, not the h1-default 700 */
  line-height: 1.2;
}

.gds-screen-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Serif descenders (g, p, y) were clipped by overflow:hidden at the tight line box —
     give them room below the baseline without changing the laid-out height. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.gds-screen-subtitle {
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--masters-on-green-soft);
  /* The header sits outside the Masters opt-in cascade — without this the subtitle fell back to
     the system --font-sans while everything around it is Instrument Sans (comp .detail-hdr__sub). */
  font-family: var(--font-sans-masters);
  font-size: var(--fs-xs);
}

.gds-flag {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--masters-butter);
}

/* Detail-mode header (the scorecard): a back arrow pulled to the edge, the home actions hidden, the
   flag moved to sit just after the course name (the comp's .detail-hdr), and the subtitle shown — the
   `.gds-screen-header--detail` modifier owns this mode-only visibility, so the JS just sets the class
   + the data-dependent bits (back-arrow presence, subtitle text). The Resync/Share actions live in
   the body (.gds-round-actions), not the header. */
.gds-back-button {
  margin-left: -0.4rem;
}

.gds-screen-header--detail .gds-screen-actions {
  display: none;
}

/* Detail keeps the flag — order puts it just after the course name, not before it. */
.gds-screen-header--detail .gds-flag {
  order: 1;
}

/* HI onboarding gate (#299, comp SCREEN 3c): no brand flag — "Welcome" stands alone. */
.gds-screen-header--gate .gds-flag {
  display: none;
}

.gds-screen-subtitle:empty {
  display: none;
}

.gds-screen-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Per-screen actions on a DETAIL header (#434: Play's edit/share icons) — same slot language
   as the home actions; empty (zero-width) unless the owning screen populates it. */
.gds-screen-detail-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.gds-icon-button {
  width: var(--touch-min);
  height: var(--touch-min);
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.gds-icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  fill: none;
}

.gds-button,
.gds-chip {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.gds-button {
  gap: 0.45rem;
  padding: 0 1rem;
  border: 1px solid var(--masters-line-strong);
  background: transparent;
  color: var(--masters-positive-ink);
}

.gds-button--primary {
  border-color: transparent;
  /* The deep brand green directly (not --masters-positive-ink, which is a light mint in dark —
     tuned for text, too pale as a button fill). Identical in light; on-palette Augusta in dark. */
  background: var(--masters-green-700);
  color: var(--masters-on-green);
}

.gds-chip {
  gap: 0.3rem;
  padding: 0 0.65rem;
  border: 1px solid var(--masters-line);
  background: var(--masters-surface);
  color: var(--masters-ink-soft);
  font-size: 0.72rem;
}

.gds-board {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.65rem;
  padding: 1.05rem;
  border: 1px solid oklch(50% 0.05 150 / 0.25);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 80% at 24% -8%, oklch(60% 0.07 150 / 0.12), transparent 60%),
    linear-gradient(165deg, var(--masters-board), var(--masters-board-edge));
  color: var(--masters-on-green);
  box-shadow: var(--masters-shadow-board);
}

.gds-board::before {
  opacity: 0.13;
  background-position: right -20px top -36px;
  background-size: 170% auto;
}

.gds-board > * {
  position: relative;
  z-index: 1;
}

.gds-board__top,
.gds-board__hero,
.gds-board__split,
.gds-round-row,
.gds-ledger__row,
.gds-connection__head {
  display: flex;
  align-items: center;
}

.gds-board__top {
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--masters-on-green-soft);
}
/* Deliberate override of the shared group's align-items: center — the caps label and the Thru
   counter sit on a shared text baseline, matching comp .board__top (#502 design pass). */
.gds-board__top {
  display: flex;
  align-items: baseline;
}

.gds-board__hero {
  align-items: flex-end;
  gap: 0.75rem;
}

.gds-board__total {
  color: var(--masters-on-green);
  font-size: clamp(3.3rem, 14vw, 4.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 0.8;
}

.gds-board__label strong {
  display: block;
  color: var(--masters-on-green);
  font-size: var(--fs-md);
}

.gds-board__label span,
.gds-board__split-label {
  color: var(--masters-on-green-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
}

.gds-board__split {
  justify-content: space-around;
  gap: 0;
  padding-top: 0.75rem;
  border-top: 1px solid oklch(70% 0.06 150 / 0.2);
}

.gds-board__split-cell {
  flex: 1;
  position: relative;
  text-align: center;
}

/* Hairline between slots (engraved, like the comp) — never before the first. */
.gds-board__split-cell + .gds-board__split-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: oklch(70% 0.06 150 / 0.2);
}

.gds-board__split-value {
  display: block;
  color: var(--masters-on-green);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.gds-board__split-cell--total .gds-board__split-value,
.gds-board__mark {
  color: var(--masters-butter);
}

/* Course Handicap — a quiet gold stat in the board header. A golfer reads CH against the SI
   column, so it needs no explainer; the gold value is the accent. */
.gds-board__chcp {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  color: var(--masters-on-green-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
}

.gds-board__chcp b {
  font-family: var(--font-sans-masters);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--masters-butter);
  font-variant-numeric: tabular-nums;
}

.gds-round-row {
  gap: 0.75rem;
  width: 100%;
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid var(--masters-line);
  background: transparent;
  color: var(--masters-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gds-round-row__body {
  min-width: 0;
  flex: 1;
}

.gds-round-row__course {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--masters-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
}

.gds-round-row__meta {
  margin-top: 0.15rem;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

.gds-round-row__score {
  min-width: 4.8rem;
  color: var(--masters-positive-ink);
  font-size: clamp(2rem, 9vw, 2.5rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  text-align: right;
}

.gds-round-row__score small {
  display: block;
  color: var(--masters-ink-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}

.gds-tee-dot {
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  border: 1px solid color-mix(in oklch, var(--masters-ink) 25%, transparent);
  border-radius: 50%;
}

.gds-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--masters-best-fill);
  color: var(--masters-best);
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
}

.gds-score-token {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--masters-score-token-size);
  height: var(--masters-score-token-size);
  border: var(--masters-score-token-stroke) solid transparent;
  color: var(--masters-ink);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.gds-score-token--birdie,
.gds-score-token--eagle {
  border-color: var(--masters-under);
  border-radius: 50%;
  color: var(--masters-under);
}

.gds-score-token--eagle::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
}

.gds-score-token--bogey,
.gds-score-token--double {
  border-color: color-mix(in oklch, var(--masters-ink) 55%, transparent);
  border-radius: 4px;
}

.gds-score-token--double {
  box-shadow:
    inset 0 0 0 2px var(--masters-surface),
    inset 0 0 0 3.5px color-mix(in oklch, var(--masters-ink) 55%, transparent);
}

.gds-score-token--empty {
  color: var(--masters-ink-faint);
}

/* Picked up (#413/#414, the comp's ratified mark): a dotted ring around a dash — an
   affirmative state (started, not holed out), firmer than the bare not-played dash. No
   score-to-par tone to carry. */
.gds-score-token--pickup {
  color: var(--masters-ink-faint);
  border-color: color-mix(in oklch, var(--masters-ink) 32%, transparent);
  border-radius: 50%;
  border-style: dotted;
}

/* Blank cell in the group scorecard: truly empty (the comp's .tok--blank) — distinct from
   the round-detail "–" not-played token; the gcard reserves the cell so columns never shift. */
.gds-score-token--blank {
  color: transparent;
  border-color: transparent;
}

/* Hole-by-hole strip — the round at a glance, reusing the .gds-score-token language (same
   shapes + gross as the scorecard's Gross column and the share card). Front + back nine each
   on their own row (18-hole); a 9-hole course renders the single nine, so it stays one row.
   Decorative — the scorecard table carries the data, so the strip is aria-hidden.

   #377 rework (option 2, "scorecard row"): no card — the strip runs edge-to-edge between two
   hairlines like the scorecard table below it, so the screen reads as one continuous document.
   Each nine is a grid row: [Out/In · nine shaped tokens · total]. Front and back align by
   column, and the Out/In label at the row start names the total that closes it (so the total
   is never a floating orphan). Shaped tokens are kept — the strip still speaks the token
   language; only its container changed. */
.gds-hole-strip {
  margin-bottom: 1.25rem;
  padding: 0.35rem 0; /* no side padding → true full width, like the <table> */
  border-top: 1px solid var(--masters-line-strong);
  border-bottom: 1px solid var(--masters-line-strong);
}

.gds-hole-strip__label {
  display: block;
  margin: 0.4rem 0 0.1rem;
}

.gds-hole-strip__nines {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* One full-width row per nine: label column, nine equal token columns, total column. */
.gds-hole-strip__nine {
  display: grid;
  grid-template-columns: 1.7rem repeat(9, minmax(0, 1fr)) 3.9rem; /* total col fits "60 · +24" */
  align-items: center;
  padding: 0.5rem 0;
}
.gds-hole-strip__nine + .gds-hole-strip__nine {
  border-top: 1px solid var(--masters-line);
}

/* Out / In — the scorecard idiom; names each nine and the total that closes its row. */
.gds-hole-strip__side {
  grid-column: 1;
  font-size: 0.58rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
  color: var(--masters-ink-faint);
}

/* One shaped token per column — centred + square, shrinks with the column on narrow phones. */
.gds-hole-strip .gds-score-token {
  justify-self: center;
  width: 100%;
  height: auto;
  min-width: 0; /* shrink below min-content on the narrowest phones — never overflow */
  max-width: 1.55rem;
  aspect-ratio: 1;
  font-size: 0.82rem;
}

/* The double-square cuts its inner gap with the token's background colour. The strip is now
   transparent over --masters-bg (card removed), so cut the gap with --bg — NOT --surface,
   which would leave a lighter halo in dark, glowing on the worst scores. (share.html does the
   same trick against its green background.) Scoped to the strip; the table/share stay untouched. */
.gds-hole-strip .gds-score-token--double {
  box-shadow:
    inset 0 0 0 2px var(--masters-bg),
    inset 0 0 0 3.5px color-mix(in oklch, var(--masters-ink) 55%, transparent);
}

/* #377: the nine's gross total + signed diff vs the played holes' par — quiet ink (routine
   numbers), so the birdie marks keep popping. Pinned to the last column; Out/In names it. */
.gds-hole-strip__sum {
  grid-column: -2 / -1;
  justify-self: end;
  text-align: right;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--masters-ink-faint);
}

/* Sans, not the display serif — Fraunces is reserved for hero numbers (DESIGN.md); a per-nine
   subtotal on a decorative strip is not one, and the table's own Out/In subtotals below are sans. */
.gds-hole-strip__sum b {
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}

/* Narrowest phones — tighten the label + total gutters so the last token never crowds the total. */
@media (max-width: 360px) {
  .gds-hole-strip__nine {
    grid-template-columns: 1.4rem repeat(9, minmax(0, 1fr)) 3.5rem;
  }
  .gds-hole-strip .gds-score-token {
    max-width: 1.4rem;
    font-size: 0.76rem;
  }
}

.gds-ledger {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface);
  list-style: none;
}

.gds-ledger__row {
  display: grid;
  grid-template-columns: 3.4rem 1rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.72rem 0.85rem;
}

.gds-ledger__row > * {
  min-width: 0;
}

.gds-ledger__row + .gds-ledger__row {
  border-top: 1px solid var(--masters-line);
}

.gds-ledger__date,
.gds-ledger__meta {
  color: var(--masters-ink-soft);
  font-size: var(--fs-xs);
}

.gds-ledger__track {
  position: relative;
  align-self: stretch;
}

.gds-ledger__track::before {
  content: "";
  position: absolute;
  top: -0.72rem;
  bottom: -0.72rem;
  left: 50%;
  width: 1px;
  background: var(--masters-line);
  transform: translateX(-50%);
}

.gds-ledger__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid var(--masters-surface);
  border-radius: 50%;
  background: var(--masters-ink-faint);
  box-shadow: 0 0 0 1px var(--masters-line);
  transform: translate(-50%, -50%);
}

/* Dot fill encodes the movement: a cut (index down = progress) reads positive, a rise reads in
   the amber accent. (The gold "counting" ring is drawn in the comp only — unbuilt; its gds- rule
   left with the workbench, #491 simplify.) */
.gds-ledger__row--cut .gds-ledger__dot {
  background: var(--masters-positive);
}

.gds-ledger__row--rise .gds-ledger__dot {
  background: var(--masters-accent-fill);
}

/* ==========================================================================
 * MORE — a list of low-frequency destinations on one surface card, plus the appearance
 * (Light/Dark) segmented control. (#74)
 * ========================================================================== */

.gds-menu {
  overflow: hidden;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-lg);
  background: var(--masters-surface);
  box-shadow: var(--masters-shadow-sm);
}

.gds-menu__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 4.6rem;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  color: var(--masters-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.gds-menu__item + .gds-menu__item {
  border-top: 1px solid var(--masters-line);
}

.gds-menu__item:active {
  background: var(--masters-surface-sunken);
}

.gds-menu__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: color-mix(in oklch, var(--masters-positive) 16%, var(--masters-surface));
  color: var(--masters-positive-ink);
}

.gds-menu__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gds-menu__copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.gds-menu__copy strong {
  font-family: var(--font-display-masters);
  font-weight: var(--fw-semibold);
}

.gds-menu__copy span {
  overflow: hidden;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gds-menu__meta {
  color: var(--masters-positive-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gds-menu__chevron {
  color: var(--masters-ink-faint);
  font-family: var(--font-display-masters);
  font-size: var(--fs-xl);
  line-height: 1;
}

/* Appearance toggle — a labelled surface row carrying the segmented control. */
.gds-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-lg);
  background: var(--masters-surface);
  box-shadow: var(--masters-shadow-sm);
}

.gds-theme-toggle__label {
  font-weight: var(--fw-semibold);
}

/* Segmented control (comp .seg) — the active option fills with the board green. */
.gds-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--masters-line-strong);
  border-radius: var(--radius-pill);
  background: var(--masters-surface);
}

.gds-seg button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  min-height: var(--touch-min);
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--masters-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition:
    background var(--dur-med) var(--ease-masters),
    color var(--dur-med) var(--ease-masters);
}

.gds-seg button[aria-pressed="true"] {
  background: var(--masters-board);
  color: var(--masters-on-green);
}

.gds-ledger__title {
  display: block;
  overflow: hidden;
  color: var(--masters-ink);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gds-ledger__value {
  color: var(--masters-ink);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.gds-connection {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-lg);
  background: var(--masters-surface);
  box-shadow: var(--masters-shadow-sm);
}

.gds-connection__head {
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.gds-connection__name {
  color: var(--masters-ink);
  font-weight: var(--fw-semibold);
}

.gds-connection__purpose {
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

.gds-status {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.55rem;
  border: 1px solid var(--masters-line-strong);
  border-radius: var(--radius-pill);
  background: var(--masters-surface-sunken);
  color: var(--masters-ink-soft);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.gds-bottom-nav {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  margin-top: auto;
  border-top: 1px solid var(--masters-line);
  background: var(--masters-surface);
}

.gds-bottom-nav__item {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  border: 0;
  background: transparent;
  color: var(--masters-ink-faint);
  font: inherit;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
}

.gds-bottom-nav__item[aria-current="page"] {
  color: var(--masters-positive-ink);
}

.gds-bottom-nav__pill {
  width: 2.5rem;
  height: 1.65rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
}

.gds-bottom-nav__item[aria-current="page"] .gds-bottom-nav__pill {
  background: color-mix(in oklch, var(--masters-positive) 18%, transparent);
}

.gds-bottom-nav svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  fill: none;
}

.gds-bottom-nav .gds-bottom-nav__icon--more {
  fill: currentColor;
  stroke: none;
}

/* ==========================================================================
 * APP SHELL (live) — the Masters header + bottom nav mounted on the real PWA (#69).
 * The component *looks* come from .gds-screen-header / .gds-bottom-nav above; these rules add the
 * live-app *placement* (sticky safe-area header, fixed safe-area nav, the HI chip) scoped to the
 * `.app` root so preview comps — which frame the same components inside .gds-screen — are
 * untouched.
 * ========================================================================== */

.gds-app >.gds-screen-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: calc(env(safe-area-inset-top) + 0.5rem) 1.25rem 1rem;
}

.gds-account-context {
  font-family: var(--font-sans-masters);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--masters-surface);
  color: var(--masters-ink);
  padding: .65rem .85rem;
  margin-bottom: .75rem;
  font-size: .875rem;
  line-height: 1.4;
  text-align: left;
}
.gds-account-context__note { font-size: .75rem; opacity: .85; }
.gds-account-context__exit {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.gds-account-list { margin-top: 1.5rem; }
.gds-account-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 72px;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--masters-line);
  background: transparent;
  color: var(--masters-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.gds-account-choice__email { display: block; font-size: .875rem; opacity: .75; overflow-wrap: anywhere; }
.gds-account-choice:focus-visible, .gds-account-context__exit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.gds-app >.gds-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px oklch(30% 0.04 158 / 0.06);
}

.gds-bottom-nav__item {
  cursor: pointer;
  text-decoration: none;
}

/* HI chip — translucent pill on the green header (replaces the legacy .hi-chip). */
.gds-hi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--touch-min);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--masters-on-green) 28%, transparent);
  background: color-mix(in oklch, var(--masters-on-green) 12%, transparent);
  color: var(--masters-on-green);
  font: inherit;
  cursor: pointer;
}

.gds-hi-chip__label {
  color: var(--masters-on-green-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
}

.gds-hi-chip__value {
  font-family: var(--font-display-masters);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

/* Desktop: centre the shell to the 760px content column (matches .app__main). */
@media (min-width: 900px) {
  .gds-app >.gds-screen-header {
    padding-inline: max(1.25rem, calc((100vw - 760px) / 2));
  }

  .gds-app >.gds-bottom-nav {
    left: 50%;
    right: auto;
    width: 760px;
    transform: translateX(-50%);
    border-inline: 1px solid var(--masters-line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
  }
}

/* Very narrow phones: the manual refresh action is non-essential — reclaim the space. */
@media (max-width: 360px) {
  #refresh-btn {
    display: none;
  }
}

.gds-state {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-lg);
  background: var(--masters-surface);
}

.gds-state strong {
  color: var(--masters-ink);
}

.gds-state p {
  margin: 0;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

.gds-state--warn {
  border-color: color-mix(in oklch, var(--masters-accent-fill) 45%, var(--masters-line));
  background: color-mix(in oklch, var(--masters-accent-fill) 11%, var(--masters-surface));
}
/* Dark: 11% gold over near-black is nearly invisible, so the "attention" signal is lost —
   raise the fill + border so warn cards still read as amber in dark. */
[data-theme="dark"] .gds-state--warn {
  border-color: color-mix(in oklch, var(--masters-accent-fill) 62%, var(--masters-line));
  background: color-mix(in oklch, var(--masters-accent-fill) 22%, var(--masters-surface));
}


/* ==========================================================================
 * Production screen: Rounds (home) — issue #28
 * The first real screen migrated onto the .gds-* layer. The canvas class is
 * toggled on <main> (app.js) so only this screen carries the Masters surface;
 * the un-migrated screens keep the legacy shell until their own migration.
 * ========================================================================== */

.gds-canvas {
  background: var(--masters-bg);
  color: var(--masters-ink);
  font-family: var(--font-sans-masters);
}

.gds-rounds {
  display: flex;
  flex-direction: column;
}

.gds-rounds .gds-season {
  margin-top: 1.25rem;
}

/* #558: the sync strip is gone (the Rounds header refresh icon is the sync affordance); the
   status container keeps the strip's old slot and only takes space when a sync has something
   to say (needs-course pointer, retry, auth). */
.gds-sync-status:empty {
  display: none;
}

/* Season summary card — a calendar year at a glance: a four-stat row (rounds · avg · best ·
   index) with the handicap index set off and enlarged so the card keeps a focal point. The
   current year reads "fresh" with a positive tint; gold stays reserved for the result. */
.gds-season {
  margin: 1.5rem 0 0.5rem;
  padding: 0.95rem 1.1rem 1.05rem;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface-sunken);
}

.gds-season--current {
  background: color-mix(in oklch, var(--masters-positive) 9%, var(--masters-surface));
  border-color: color-mix(in oklch, var(--masters-positive) 32%, var(--masters-line));
}

.gds-season__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.gds-season__year {
  font-family: var(--font-sans-masters);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--masters-positive-ink);
}

.gds-season__tag {
  color: var(--masters-ink-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
}

/* Full-width stat row — robust by construction (no side-by-side squeeze). */
.gds-season__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 0.55rem;
  margin-top: 0.75rem;
  align-items: end;
}

.gds-sstat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.gds-sstat__label {
  font-size: 0.58rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--masters-ink-faint);
}

.gds-sstat__val {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.05;
  color: var(--masters-ink);
  font-variant-numeric: tabular-nums;
}

/* The index is the card's focal point — set off by a hairline and enlarged. */
.gds-sstat--index {
  padding-left: 0.7rem;
  border-left: 1px solid color-mix(in oklch, var(--masters-positive) 24%, var(--masters-line));
}

/* Rising HI is not progress; keep the entire trend block neutral, including the divider. */
.gds-sstat--index-up {
  border-left-color: var(--masters-line);
}

.gds-sstat--index .gds-sstat__val {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* The season "Handicap" stat shows a start → now change (two figures), so it needs a smaller,
   non-oversized value than the single-figure index — keeps "19.7 → 21.7" on one line. */
.gds-sstat--hi .gds-sstat__val {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  white-space: nowrap;
}

.gds-sstat__trend {
  margin-top: 0.16rem;
  font-size: 0.66rem;
  font-weight: var(--fw-bold);
  color: var(--masters-positive-ink);
  font-variant-numeric: tabular-nums;
}

/* A rising index isn't an improvement — don't dress it in the positive green. */
.gds-sstat__trend--up {
  color: var(--masters-ink-soft);
}

/* #554: gross ledger row — the Avg/Best column headers govern both rows; the gross values sit
   in soft ink so the points row stays primary. The modifier is only present when the season has
   a full 18-hole round with a gross (the row is omitted, not dashed, otherwise). The handicap
   block keeps the fourth column across both rows (content-sized: the hairline hugs the block,
   as in the comp). */
.gds-season__row--gross {
  grid-template-rows: auto auto;
  row-gap: 0.6rem;
}

.gds-season__row--gross .gds-sstat--index {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: start;
}

.gds-sstat--gross-label {
  grid-column: 1;
  grid-row: 2;
}

.gds-sstat--gross-avg {
  grid-column: 2;
  grid-row: 2;
}

.gds-sstat--gross-best {
  grid-column: 3;
  grid-row: 2;
}

.gds-sstat--gross-avg .gds-sstat__val,
.gds-sstat--gross-best .gds-sstat__val {
  color: var(--masters-ink-soft);
}

/* Front-nine / back-nine Stableford split — two real segments (front darker, back lighter),
   flex-weighted by the actual points. Only shown for a full round where both nines scored. */
.gds-split {
  display: flex;
  gap: 3px;
  width: 120px;
  max-width: 55%;
  height: 5px;
  margin-top: 0.6rem;
}

.gds-split i {
  display: block;
  border-radius: var(--radius-pill);
}

.gds-split i:first-child {
  background: var(--masters-green-700);
}

.gds-split i:last-child {
  background: var(--masters-green-300);
}

/* Honest status tags on a round row. Base .gds-pill is gold (best/result); these variants carry
   amber (provisional/conflict/needs-setup), positive (played to handicap) and muted (source). */
.gds-round-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.gds-round-row__tags .gds-pill {
  margin-top: 0;
}

.gds-pill--warn {
  background: color-mix(in oklch, var(--masters-accent-fill) 22%, var(--masters-surface));
  color: var(--masters-accent);
}

.gds-pill--good {
  background: color-mix(in oklch, var(--masters-positive) 16%, var(--masters-surface));
  color: var(--masters-positive-ink);
}

.gds-pill--muted {
  background: color-mix(in oklch, var(--masters-ink) 7%, var(--masters-surface));
  color: var(--masters-ink-soft);
}

/* A partial round's total isn't comparable to 18 holes — mute it and label by hole count. */
.gds-round-row__score--partial {
  color: var(--masters-ink-soft);
  font-weight: var(--fw-semibold);
}

/* Pending (captured-but-unscored) round — amber-edged, no score (blank beats a guess), a
   "Set up" affordance stands in and the whole row taps through to course setup. */
.gds-round-row--pending {
  align-items: center;
  padding-left: 0.75rem;
  border-left: 3px solid color-mix(in oklch, var(--masters-accent-fill) 60%, transparent);
}

.gds-round-row__note {
  margin-top: 0.3rem;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

.gds-round-row__setup {
  flex: none;
  color: var(--masters-accent);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* A state block can carry one or two next-step actions. */
.gds-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.gds-state__actions .gds-button {
  flex: 1;
  min-width: 9rem;
}

/* "Needs setup" group heading above the pending rows. */
.gds-rounds__group {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.25rem;
}

.gds-rounds__group-count {
  color: var(--masters-ink-faint);
}

.gds-rounds__group-note {
  margin: 0;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

/* Gentle staggered entrance + a one-shot "just became Trusted" ring. */
@keyframes gdsRowIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gds-round-row--enter {
  animation: gdsRowIn 0.42s ease both;
}



@media (prefers-reduced-motion: reduce) {
  .gds-round-row--enter {
    animation: none;
  }
}

/* ==========================================================================
 * Production screen: Round detail / scorecard — issue #29
 * The board signature (answer-first) + hole-by-hole table with shape-coded
 * gross-in-token. Reuses .gds-canvas (toggled on <main>), .gds-board and
 * .gds-score-token. Light + dark via the --masters-* tokens.
 * ========================================================================== */

.gds-detail {
  display: grid;
  gap: 1rem;
}

.gds-detail__group {
  display: grid;
  gap: 0.75rem;
}

.gds-detail__shared {
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

/* Round-detail actions (Resync + Share) — a tidy right-aligned pair at the top of the body, so the
   header stays comp-clean (back · course · meta) and the subtitle lines up under the name. Subtle
   surface pills on the cream canvas. */
.gds-round-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.gds-round-actions .gds-icon-button {
  border: 1px solid var(--masters-line);
  background: var(--masters-surface);
  color: var(--masters-ink-soft);
}

/* Async feedback for icon buttons (Resync / Share) — spin the glyph in place rather than swapping
   it for text, so the icon never disappears mid-action. */
.gds-icon-button.is-busy {
  pointer-events: none;
}

.gds-icon-button.is-busy svg {
  transform-origin: center;
  transform-box: fill-box;
  animation: gdsSpin 0.8s linear infinite;
}

@keyframes gdsSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gds-icon-button.is-busy svg {
    animation: none;
    opacity: 0.5;
  }
}

.gds-button--block {
  width: 100%;
}

/* Detail header — course (serif), the rating/tee meta, then honest status tags. */
.gds-detail-head {
  display: grid;
  gap: 0.2rem;
}

.gds-detail-head__course {
  margin: 0;
  font-family: var(--font-display-masters);
  font-optical-sizing: auto;
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--masters-ink);
}

.gds-detail-head__meta {
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* A verified-source confirmation reads positive (asymmetric with the amber provisional state). */
.gds-state--ok {
  border-color: color-mix(in oklch, var(--masters-positive) 35%, var(--masters-line));
  background: color-mix(in oklch, var(--masters-positive) 10%, var(--masters-surface));
}

.gds-state--ok p {
  color: var(--masters-positive-ink);
}

.gds-detail__src {
  font-style: italic;
}

/* Hole-by-hole table. The gross token carries the score-to-par meaning; the table stays calm. */
.gds-scorecard-section {
  display: grid;
  gap: 0.5rem;
}

.gds-scorecard__heading {
  margin-top: 0.25rem;
}

.gds-scorecard {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}

.gds-scorecard th,
.gds-scorecard td {
  padding: 0.35rem 0.3rem;
  text-align: center;
}

.gds-scorecard thead th {
  color: var(--masters-ink-faint);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
  border-bottom: 1px solid var(--masters-line);
}

.gds-scorecard th:first-child,
.gds-scorecard td:first-child {
  text-align: left;
  color: var(--masters-ink-soft);
}

.gds-scorecard tbody td {
  border-bottom: 1px solid color-mix(in oklch, var(--masters-line) 60%, transparent);
}

.gds-scorecard__gross {
  width: 2.6rem;
}

.gds-scorecard__gross .gds-score-token {
  margin: 0 auto;
}

.gds-scorecard__pts {
  font-weight: var(--fw-bold);
  color: var(--masters-positive-ink);
}

.gds-scorecard tfoot td {
  padding-top: 0.5rem;
  border-top: 1.5px solid var(--masters-line);
  font-weight: var(--fw-bold);
  color: var(--masters-ink);
}

.gds-scorecard tfoot td:first-child {
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

.gds-scorecard tfoot tr.gds-scorecard__grand td {
  border-top: 2px solid var(--masters-positive);
}

.gds-detail__foot {
  margin: 0.5rem 0 0;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
 * Production screen: Handicap (HI progression) — issue #30
 * Current index on the board (honest source/exact caps), a movement pill, the
 * manual-HI form on a gds card, and the history on the .gds-ledger component.
 * Trust: the section heading is neutral and provenance is per-row, so a manual
 * index never reads as official. Light + dark via the --masters-* tokens.
 * ========================================================================== */

.gds-page {
  display: grid;
  gap: 1rem;
}

/* A plain content surface (used for the manual-HI entry form). */
.gds-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-lg);
  background: var(--masters-surface);
  box-shadow: var(--masters-shadow-sm);
}

.gds-card__title {
  margin: 0;
  font-family: var(--font-display-masters);
  font-optical-sizing: auto;
  font-size: var(--fs-lg);
  color: var(--masters-ink);
}

.gds-card__note {
  margin: 0;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

/* The form fields inside a gds card pick up the Masters ink/line tokens (dark-aware). */
.gds-card .gds-setup-field label {
  color: var(--masters-ink);
}

.gds-card .gds-setup-field input {
  color: var(--masters-ink);
  background: var(--masters-bg);
  border-color: var(--masters-line-strong);
}

.gds-card .gds-note {
  color: var(--masters-ink-soft);
}

/* Ledger value cell: the index value with its movement delta beneath. */
.gds-ledger__numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
}

.gds-ledger__delta {
  min-width: 2.8rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--masters-surface-sunken);
  color: var(--masters-ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.gds-ledger__delta--cut {
  background: color-mix(in oklch, var(--masters-positive) 16%, var(--masters-surface));
  color: var(--masters-positive-ink);
}

.gds-ledger__delta--rise {
  background: color-mix(in oklch, var(--masters-accent-fill) 18%, var(--masters-surface));
  color: var(--masters-accent);
}

/* ==========================================================================
 * Production screen: Connections (redesign) — issue #32
 * Honest provider state on the .gds-connection card + .gds-status pill: "Saved"
 * is neutral (not verified), only a running sync reads positive, problems read
 * amber. The add-<provider> button is the primary connect entry point.
 * ========================================================================== */

/* Status tone variants — default .gds-status is neutral ("Saved" ≠ connected). */
.gds-status--ok {
  border-color: color-mix(in oklch, var(--masters-positive) 40%, var(--masters-line-strong));
  background: color-mix(in oklch, var(--masters-positive) 14%, var(--masters-surface));
  color: var(--masters-positive-ink);
}

.gds-status--warn {
  border-color: color-mix(in oklch, var(--masters-accent-fill) 45%, var(--masters-line-strong));
  background: color-mix(in oklch, var(--masters-accent-fill) 16%, var(--masters-surface));
  color: var(--masters-accent);
}

.gds-connection__summary {
  margin: 0;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}

.gds-connection__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* The turn-off control sits inline until its confirm expands to full width. */
.gds-connection__turnoff:has(.gds-state) {
  flex-basis: 100%;
}

.gds-connection__form {
  margin-top: 0.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--masters-line);
  display: grid;
  gap: 0.7rem;
}

.gds-connection__form-title {
  font-family: var(--font-display-masters);
  font-optical-sizing: auto;
  font-size: var(--fs-md);
  color: var(--masters-ink);
}

/* Form fields inside a connection card pick up the dark-aware Masters tokens. */
.gds-connection__form .field label {
  color: var(--masters-ink);
}

.gds-connection__form .field input {
  color: var(--masters-ink);
  background: var(--masters-bg);
  border-color: var(--masters-line-strong);
}

.gds-connection__form .note {
  color: var(--masters-ink-soft);
}

/* ---- Play: start a group outing (#42) -------------------------------------- */
/* Form controls on the Masters layer (selects + the guest free-entry inputs). Mirrors the
   .field input treatment so the Play picker reads as the same family as course setup. */
.gds-select,
.gds-input,
.gds-card .gds-setup-field select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--masters-line-strong);
  border-radius: var(--radius-md);
  background: var(--masters-bg);
  color: var(--masters-ink);
  font: inherit;
}

/* ============================================================
 * Form controls — set-up surfaces (#180), mirrors masters.html SCREEN 4.
 * Controls sit directly on the surface, full-width, ONE border; no
 * card-per-field nesting, no native <select> chrome. Light + dark via tokens.
 * ============================================================ */
.gds-setup-head {
  margin: 0 0 1.4rem;
}
.gds-setup-head__title {
  margin: 0;
  font-family: var(--font-display-masters);
  font-optical-sizing: auto;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xxl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--masters-ink);
}
.gds-setup-head__intro {
  margin: 0.45rem 0 0;
  color: var(--masters-ink-faint);
  font-size: var(--fs-sm);
}
.gds-field {
  margin-bottom: 1.15rem;
}
.gds-field__label {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  margin-bottom: 0.4rem;
}
.gds-field__hint {
  margin-top: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
/* One control chrome shared by select + input — full width, single border. */
.gds-control {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  font-family: var(--font-sans-masters);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--masters-ink);
  background: var(--masters-surface);
  border: 1px solid var(--masters-line-strong);
  border-radius: var(--radius-md);
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.15s var(--ease-masters),
    box-shadow 0.15s var(--ease-masters);
}
.gds-control:focus-visible {
  outline: none;
  border-color: var(--masters-positive);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--masters-positive) 22%, transparent);
}
.gds-control::-webkit-outer-spin-button,
.gds-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Custom caret (themed, no native chrome) on a wrapper so the select stays appearance:none. */
.gds-select-wrap {
  position: relative;
}
.gds-select-wrap > .gds-control {
  padding-right: 2.75rem;
  cursor: pointer;
}
.gds-select-wrap::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid var(--masters-ink-faint);
  border-bottom: 2px solid var(--masters-ink-faint);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
/* Native date field — theme its picker indicator; color-scheme (set per theme in tokens.css)
   keeps the popup calendar dark-correct. */
.gds-control[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
/* Dark: force the input's color-scheme so the native calendar glyph renders light (was a dark
   glyph on the dark field, near-invisible). */
[data-theme="dark"] .gds-control[type="date"] {
  color-scheme: dark;
}
[data-theme="dark"] .gds-control[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.75;
}
/* Manual-HI "update your handicap" form — same layer, sits on the surface (no card-in-card). */
.gds-hi-update {
  margin: 1.6rem 0 1.4rem;
}
.gds-hi-update__trust {
  margin: 0.2rem 0 1rem;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-hi-update__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

/* ============================================================
   First-login HI onboarding gate (#299, comp SCREEN 3c) — the same entry form,
   retuned to the comp's tighter rhythm: no grid gap between the blocks, the
   "Signed in as" line centered hard against the save button, sign-out link at
   the padding edge. Scoped to the gate so the 3b Update screen keeps its layout.
   ============================================================ */
.gds-hi-gate {
  gap: 0;
}
.gds-hi-gate .gds-hi-update {
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.gds-hi-gate .gds-hi-update__actions {
  margin-top: 1.6rem; /* comp .form-actions */
}
.gds-hi-gate .gds-button--block {
  min-height: 52px; /* comp .btn--block */
}
.gds-hi-gate .gds-button--primary {
  box-shadow: var(--shadow-sm); /* comp .btn--green */
}
.gds-hi-gate .gds-hi-provenance {
  margin-top: 0;
  text-align: center; /* comp .provenance */
}
.gds-hi-gate .gds-hi-history-link {
  padding: 0; /* kill the UA button indent — comp link sits at the padding edge */
  /* The 44px touch target is taller than the comp's bare link — pull the box up so the
     TEXT lands where the comp puts it, without shrinking the tap area. */
  margin-top: -0.55rem;
}

/* ============================================================
   HANDICAP — "Quiet Scorebook" hero + 12-month trend chart (#213, comp SCREEN 3)
   ============================================================ */
.gds-hi-hero {
  margin: 0.1rem 0 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--masters-line);
}
.gds-hi-hero__kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.gds-hi-hero__source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
  color: var(--masters-ink-faint);
}
/* Live official source gets the green dot; a manual value must NOT (never dressed as official). */
.gds-hi-hero__source--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--masters-positive);
}
.gds-hi-hero__figure {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.gds-hi-hero__number {
  font-family: var(--font-display-masters);
  font-optical-sizing: auto;
  font-size: 4.85rem;
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--masters-ink);
  font-variant-numeric: tabular-nums;
}
.gds-hi-hero__change {
  padding-bottom: 0.3rem;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.gds-hi-hero__change b {
  display: block;
  color: var(--masters-positive-ink);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* A rise is a normal movement, not a gain — shown neutrally, never green. */
.gds-hi-hero__change--rise b {
  color: var(--masters-ink-soft);
}
.gds-hi-hero__caption {
  margin-top: 0.25rem;
  color: var(--masters-ink-faint);
  font-size: var(--fs-xs);
}
.gds-hi-hero__caption b {
  color: var(--masters-ink-soft);
  font-weight: 700;
}
/* Sparse (0–1 points): no chart — an honest placeholder. */
.gds-hi-hero__empty {
  margin-top: 0.7rem;
  padding: 1.3rem 1rem;
  border: 1px dashed var(--masters-line-strong);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--masters-surface-sunken) 45%, transparent);
  text-align: center;
}
.gds-hi-hero__empty strong {
  display: block;
  color: var(--masters-ink-soft);
  font-size: var(--fs-sm);
}
.gds-hi-hero__empty p {
  margin: 0.3rem 0 0;
  color: var(--masters-ink-faint);
  font-size: var(--fs-xs);
}

/* The trend chart: y-axis auto-zoomed to the actual swing (never 0-anchored); theme-aware strokes. */
.gds-hi-trend {
  position: relative;
  margin-top: 0.7rem;
}
.gds-hi-trend svg {
  display: block;
  width: 100%;
  height: 128px;
  overflow: visible;
}
.gds-hi-trend__grid {
  stroke: var(--masters-line-strong);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.gds-hi-trend__ylabel {
  font-family: var(--font-sans-masters);
  font-size: 8.5px;
  font-weight: 700;
  fill: var(--masters-ink-faint);
  font-variant-numeric: tabular-nums;
}
.gds-hi-trend__area {
  fill: url(#gdsHiArea);
}
.gds-hi-trend__line {
  fill: none;
  stroke: var(--masters-positive-ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gds-hi-trend__dot {
  fill: var(--masters-accent-fill);
  stroke: var(--masters-surface);
  stroke-width: 3;
}
.gds-hi-trend__xlabel {
  font-family: var(--font-sans-masters);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  fill: var(--masters-ink-faint);
}
/* Index window (#605): the 20-round chart is taller than the 12-month trend — it carries a
   dot per round as well as the line. */
.gds-hi-window svg {
  height: 196px;
}
/* Band caption for the differentials strip — the index band needs no label, it is the subject. */
.gds-hi-window__band {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--masters-ink-faint);
}
/* A round in the index window. With GI's flags, fill vs ring — never hue alone — carries
   counting vs another window score. The legacy unflagged projection still uses --moved. Ink,
   not alarm-red: a score differential is neither good nor bad. */
.gds-hi-window__round {
  fill: var(--masters-surface);
  stroke: var(--masters-ink-faint);
  stroke-width: 1.5;
}
.gds-hi-window__round--moved {
  fill: var(--masters-ink-soft);
  stroke: var(--masters-surface);
  stroke-width: 1.75;
}
.gds-hi-window__round--counting {
  fill: var(--masters-ink-soft);
  stroke: var(--masters-ink-soft);
  stroke-width: 1.5;
}
/* Chart footnote, comp .quiet-hero__caption: where the window opened → where it stands. */
.gds-hi-window__caption {
  margin: 0.35rem 0 0;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-hi-window__caption b {
  color: var(--masters-ink-soft);
  font-weight: 700;
}
/* #617: the span the chart covers. Quieter than the caption above it — it qualifies the chart
   rather than reporting a number, and a multi-year run must be legible without shouting. */
.gds-hi-window__span {
  margin: 0.15rem 0 0;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-hi-window__note {
  margin: 0.25rem 0 0;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-hi-window__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.9rem;
  margin: 0.45rem 0 0;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-hi-window__key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.gds-hi-window__key-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--masters-ink-soft);
  flex: none;
}
.gds-hi-window__key-item--ring::before {
  background: var(--masters-surface);
  border: 1.5px solid var(--masters-ink-faint);
}
/* Ledger heading: quiet caps label + count on the right (comp .ledger-head). */
.gds-ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 0.75rem;
}
.gds-ledger-head__count {
  font-size: var(--fs-sm);
  color: var(--masters-ink-faint);
  font-variant-numeric: tabular-nums;
}
.gds-hi-history-link {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  margin: 0.1rem 0 0.6rem;
  color: var(--masters-positive-ink);
  font-family: var(--font-sans-masters);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.gds-hi-provenance {
  margin: 0.4rem 0 0.5rem;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}

/* Update-handicap screen (#213, comp SCREEN 3b): auto-sync note + current value, above the form. */
.gds-sync-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0.1rem 0 1.4rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--masters-positive) 8%, var(--masters-surface));
  border: 1px solid color-mix(in oklch, var(--masters-positive) 26%, var(--masters-line));
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  line-height: 1.4;
}
.gds-sync-note__icon {
  flex: none;
  display: inline-flex;
}
.gds-sync-note__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--masters-positive-ink);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gds-sync-note b {
  color: var(--masters-ink);
  font-weight: 700;
}
.gds-src-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--masters-surface-sunken);
  border: 1px solid var(--masters-line);
}
.gds-src-now__k {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
  color: var(--masters-ink-faint);
}
.gds-src-now__src {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.28rem;
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  font-variant-numeric: tabular-nums;
}
.gds-src-now__src--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--masters-positive);
}
.gds-src-now__num {
  font-family: var(--font-display-masters);
  font-weight: 700;
  font-size: var(--fs-xxl);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--masters-ink);
  font-variant-numeric: tabular-nums;
}
.gds-setup-section {
  margin: 1.5rem 0 0.5rem;
  color: var(--masters-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-masters);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
/* Day boards (#502 §11): hairline list rows + an on-page create form — the setup screen's
   own idiom (forms live directly on the page; a boxed card-in-card is the retired #180
   offender, re-flagged 23 Jul). */
.gds-dayboard {
  padding: 0.8rem 0;
  border-top: 1px solid var(--masters-line);
}
.gds-dayboard:first-child {
  border-top: 0;
}
.gds-dayboard__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 0.1rem;
}
.gds-dayboard__meta {
  color: var(--masters-ink-faint);
  font-size: var(--fs-sm);
  margin: 0 0 0.55rem;
}
.gds-dayboard__actions {
  display: flex;
  gap: 10px;
}
.gds-dayboard-form {
  margin-top: 0.75rem;
}
/* Mid-round day-board card (§11): the livecard idiom under the live board — opens the
   cross-group standings as an IN-APP overlay (a new tab strands an installed PWA). */
.gds-livecard--board {
  margin-top: 0.9rem;
  margin-bottom: 0;
}
.gds-dayboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--masters-bg);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 0.9rem) 1rem 1rem;
  overflow-y: auto;
}
.gds-dayboard-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.gds-dayboard-overlay__body {
  flex: 1;
}
/* Owner usage dashboard (#540): plain hairline tables, horizontally scrollable when wide. */
.gds-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.gds-admin-table th {
  text-align: left;
  color: var(--masters-ink-faint);
  font-weight: var(--fw-semibold);
}
.gds-admin-table th,
.gds-admin-table td {
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid var(--masters-line);
  white-space: nowrap;
}
.gds-admin-scroll {
  overflow-x: auto;
}
.gds-dayboard-overlay__close {
  flex: none;
  min-height: var(--touch-min);
  width: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--masters-ink);
  font-size: 1rem;
  cursor: pointer;
}
/* appIcon svgs carry NO intrinsic size — every consumer must size them (the invisible-X
   strand, Derek 23 Jul: an unsized close icon rendered 0×0 and trapped the overlay). */
.gds-dayboard-overlay__close svg {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: middle;
  stroke: currentColor;
  stroke-width: 2;
}
/* Players sit on the surface as a separated list — rows divided by a hairline, not boxed. */
.gds-players {
  display: flex;
  flex-direction: column;
}
.gds-players__guests {
  display: contents;
}
.gds-player {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--masters-line);
}
.gds-player:first-child {
  border-top: 0;
}
/* A rated card belongs to a golfer: identity and HI above, a full-width card below. */
.gds-players--rated .gds-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px 44px;
  gap: 0.6rem;
}
.gds-players--rated .gds-player__id { grid-column: 1; grid-row: 1; }
.gds-players--rated .gds-hcap-input { grid-column: 2; grid-row: 1; }
.gds-players--rated .gds-player__remove { grid-column: 3; grid-row: 1; width: 44px; }
.gds-players--rated .gds-player__card { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.gds-player__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--masters-positive-ink);
  background: color-mix(in oklch, var(--masters-positive) 14%, var(--masters-surface));
}
.gds-player__id {
  flex: 1;
  min-width: 0;
}
.gds-player__name {
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
  overflow-wrap: anywhere;
}
.gds-player__name small {
  margin-left: 0.35rem;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
/* Guest name is editable inline — light, not a heavy boxed control. */
.gds-player__name-input {
  width: 100%;
  min-height: var(--touch-min, 44px);
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-sans-masters);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--masters-ink);
}
.gds-player__name-input::placeholder {
  color: var(--masters-ink-faint);
  font-weight: var(--fw-regular);
}
.gds-player__name-input:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--masters-positive);
}
.gds-player__role {
  margin-top: 0.1rem;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-hcap-input {
  flex: none;
  width: 86px;
  text-align: center;
}
.gds-player__remove {
  flex: none;
  min-height: var(--touch-min);
  width: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--masters-ink-faint);
  font-size: 1rem;
  cursor: pointer;
}
.gds-setup-add {
  margin-top: 0.5rem;
}
.gds-setup-start {
  margin-top: 1.5rem;
}
.gds-setup-start:disabled,
.gds-finish-new:disabled {
  background: var(--masters-surface-sunken);
  border-color: var(--masters-line);
  color: var(--masters-ink-faint);
  cursor: not-allowed;
}

.gds-play__lower {
  display: flex;
  flex-direction: column;
}

.gds-play__gate-head,
.gds-play__ready-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}
/* The pill sits inline in these heads (its default margin-top is for a stacked context). */
.gds-play__gate-head .gds-pill,
.gds-play__ready-head .gds-pill {
  margin-top: 0;
}

/* (The pre-#314 setup-roster family — .gds-play__roster/.gds-play__player* — was dead across
   every render path and is removed; the pad's player-line styles live in the on-course loop
   section below.) */

.gds-play__guests {
  display: contents;
}

.gds-play__player--guest {
  align-items: flex-start;
}

.gds-play__guest-fields {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.gds-play__guest-hi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.gds-play__guest-hi .gds-input {
  width: 7rem;
}

.gds-play__remove {
  flex: 0 0 auto;
  min-height: var(--touch-min);
  width: 2.5rem;
  border: 0;
  background: transparent;
  color: var(--masters-ink-soft);
  font-size: 1rem;
  cursor: pointer;
}

/* Ready confirmation — the locked allocation, one row per player. */
.gds-play__alloc-list {
  display: flex;
  flex-direction: column;
  margin: 0.75rem 0;
}

.gds-play__alloc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--masters-line);
}
.gds-play__alloc:first-child {
  border-top: 0;
}

.gds-play__alloc-ch {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}

.gds-play__alloc-num {
  font-family: var(--font-display-masters);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--masters-positive-ink);
  font-variant-numeric: tabular-nums;
}

.gds-play__alloc-lbl {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--masters-ink-soft);
}

/* ---- on-course loop (#43): per-hole gross entry + live leaderboard.
   Field polish (21 Jul): no bordered card — the pad spans the full view width like the
   boards below; each player is TWO tight lines (name line, controls line) so a five-ball
   fits one phone screen. ---- */
.gds-play__pad {
  margin-top: 0.25rem;
}
.gds-play__hole-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.gds-play__hole-no {
  font-family: var(--font-display-masters);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--masters-ink);
}
/* Par · SI reads clearly beside the hole number (Derek, 21 Jul) — full ink, semibold. */
.gds-play__hole-meta {
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.gds-play__scores {
  display: flex;
  flex-direction: column;
}
/* The kept row design (comp, 21 Jul): identity stack | − gross + | pts. */
.gds-play__score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  /* 0.4rem (#465 review, Derek 22 Jul): scoring block sits right — slack goes to the name. */
  gap: 0.4rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--masters-line);
}
.gds-play__score:first-child {
  border-top: 0;
}
.gds-play__player-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.gds-play__player-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}
.gds-play__player-tag {
  font-size: 0.68rem;
  color: var(--masters-ink-faint);
  white-space: nowrap;
}
/* The pickup whisper (#443) — a faint third line in the identity stack. Padding (not
   height) buys the tap area so the text stays small while the target stays honest. */
.gds-play__pickup {
  display: inline-flex;
  align-items: center;
  margin: 0.05rem 0 -0.35rem;
  padding: 0.3rem 0.5rem 0.45rem 0;
  border: 0;
  background: transparent;
  color: var(--masters-ink-faint);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gds-play__pickup--on {
  color: var(--masters-positive-ink);
  font-weight: var(--fw-bold);
}
.gds-play__stepper {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.gds-play__step {
  /* 52px (Derek, 21 Jul): a fatter on-course press surface — well past the 44px floor.
     Narrow screens (<360px) drop back to 46px so the name column keeps readable width. */
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--masters-line-strong);
  border-radius: var(--radius-sm);
  background: var(--masters-surface);
  color: var(--masters-ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gds-play__step:active {
  background: var(--masters-surface-sunken);
  transform: scale(0.96);
}
.gds-play__step:disabled,
.gds-play__pickup:disabled,
.gds-play__option:disabled,
.gds-sheet__finish:disabled,
.gds-play__finish-quiet .gds-button:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (max-width: 359px) {
  .gds-play__step {
    width: 46px;
    height: 46px;
  }
}
/* The gross is the value being edited — the focal control, not a number trapped between
   two buttons (comp). */
.gds-play__gross {
  min-width: 2.1rem;
  padding-bottom: 0.1rem;
  text-align: center;
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--masters-ink);
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid color-mix(in oklch, var(--masters-positive) 42%, var(--masters-line));
}
/* Picked: the dotted-ring dash mark replaces the numeral — no underline (nothing is being
   edited); the mark IS the state. */
.gds-play__gross-mark {
  min-width: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gds-play__gross-mark i {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  border: 2px dotted color-mix(in oklch, var(--masters-ink) 32%, transparent);
  border-radius: 50%;
  color: var(--masters-ink-faint);
  font-style: normal;
  font-weight: var(--fw-bold);
  font-size: 0.85rem;
  line-height: 1;
}
.gds-play__pts {
  min-width: 1.6rem;
  text-align: right;
}
.gds-play__pts b {
  font-weight: var(--fw-bold);
  font-size: 1rem;
  color: var(--masters-positive-ink);
  font-variant-numeric: tabular-nums;
}
.gds-play__pts small {
  font-weight: var(--fw-semibold);
  color: var(--masters-ink-faint);
  font-size: 0.6rem;
}
.gds-play__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.7rem 0 1rem;
}

/* ---- Free entry (#467, comp: masters.html Play live + SCREEN 4b) ---- */
/* The hole heading is the picker trigger (direction C): a quiet chevron, no button chrome —
   the heading itself is the affordance. Type rides .gds-play__hole-no on the same element
   (author rules beat the UA button font), so nothing is restated here. */
.gds-play__hole-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.2rem 0.4rem 0.3rem 0;
  margin: -0.2rem 0 -0.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  -webkit-tap-highlight-color: transparent;
}
.gds-play__hole-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--masters-ink-faint);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Blank state — free entry's one new pad state: no number exists, so none is shown (faint
   dash on the live underline; the first +/− seeds par, tap-only). Distinct from the
   picked-up ring-dash mark. Never a fabricated par. */
.gds-play__gross--blank,
.gds-play__pts--blank b {
  color: var(--masters-ink-faint);
  font-weight: var(--fw-semibold);
}
.gds-play__pts--blank small {
  display: none; /* the comp's blank pts cell is a bare dash — no " pts" suffix */
}
/* Hole grid — the picker sheet's 6×3 round map (comp .hole-grid/.hole-chip). States: now
   (selected fill) · entered (everyone's in: solid dot) · part (some of the group: hollow
   dot) · blank. */
.gds-holegrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
}
/* The comp's narrow-container rule (fresh-eyes #467): the picker grid tightens with the
   frame. After the base rule — equal specificity, source order carries the override. */
@media (max-width: 359px) {
  .gds-holegrid {
    gap: 0.3rem;
  }
}
.gds-holechip {
  appearance: none;
  height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--masters-line);
  background: transparent;
  color: var(--masters-ink-faint);
  font-family: inherit;
  font-size: 0.875rem; /* comp --fs-sm (fresh-eyes #467) */
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: 0.25rem 0 0.35rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gds-holechip i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  visibility: hidden;
}
.gds-holechip--entered {
  background: var(--masters-surface-sunken);
  color: var(--masters-ink);
}
.gds-holechip--entered i {
  visibility: visible;
  background: var(--masters-positive);
}
.gds-holechip--part i {
  visibility: visible;
  background: transparent;
  border: 1.5px solid var(--masters-positive);
  box-sizing: border-box;
}
/* selected fill = the primary-button convention: green-700 + on-green reads in both themes
   with no dark override. */
.gds-holechip--now {
  background: var(--masters-green-700);
  border-color: var(--masters-green-700);
  color: var(--masters-on-green);
  font-weight: var(--fw-bold);
}
/* Finish inside the picker sheet (comp .sheet__action; renamed — gdsSheet's stacked action
   buttons already own .gds-sheet__action) — reachable from the top of the screen in two
   taps; quiet, separated, never styled like a primary. */
.gds-sheet__finish {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  margin-top: 0.85rem;
  padding: 0.6rem 0.25rem 0.1rem;
  border: 0;
  border-top: 1px solid var(--masters-line);
  background: transparent;
  color: var(--masters-ink-soft);
  font-family: inherit;
  font-size: 0.875rem; /* comp --fs-sm (fresh-eyes #467) */
  font-weight: var(--fw-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gds-sheet__finish .gds-play__flag {
  width: 18px;
  height: 18px;
  color: var(--masters-positive-ink);
}
/* The always-available finish under the card — kept for the reading-the-card moment;
   silent, enabled from the first entered hole. */
.gds-play__finish-quiet {
  display: flex;
  justify-content: center;
  margin: 0.25rem 0 0.5rem;
}
.gds-play__finish-quiet .gds-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--masters-ink-soft);
}
.gds-play__finish-quiet .gds-play__flag {
  width: 16px;
  height: 16px;
}
.gds-play__flag {
  flex: none;
}
/* Card rows as navigation (direction A, Play live only). */
.gds-gcard__row--tap {
  cursor: pointer;
}
.gds-gcard__row--tap:focus-visible {
  /* inset — a positive offset would clip inside the card's scroll wrapper */
  outline: 3px solid var(--masters-positive);
  outline-offset: -3px;
}

/* ---- Group scorecard (#414) — the card under the live leaderboard: holes down, players
   across. Composed from the masters.html `.gcard` comp verbatim (tokens translated). ---- */
.gds-gcard {
  margin: 0.25rem 0 1.25rem;
}
.gds-gcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.5rem;
}
.gds-gcard__head .gds-caps {
  color: var(--masters-ink-faint);
}
.gds-gcard__key {
  font-size: 0.62rem;
  color: var(--masters-ink-faint);
  font-weight: 500;
}
/* >4 players (rare): the card scrolls horizontally INSIDE itself; Hole/Par stay frozen.
   At 320px a fourball fits with no scroll — the on-course max the layout is tuned for. */
.gds-gcard__scroll {
  overflow-x: auto;
}
.gds-gcard__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}
.gds-gcard__table th,
.gds-gcard__table td {
  padding: 0.26rem 0.15rem;
  text-align: center;
}
.gds-gcard__table thead th {
  color: var(--masters-ink-faint);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--masters-line-strong);
  padding-bottom: 0.4rem;
}
.gds-gcard__table thead th.gds-gcard__pl {
  color: var(--masters-ink);
  font-size: 0.68rem;
  max-width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Tapped-open header: the whole point is showing the FULL name — lift the cap while open. */
.gds-gcard__table thead th.gds-gcard__pl.gds-gcard__pl--full {
  max-width: none;
}
/* The header's real <button> (keyboard/AT operable) — visually identical to plain th text. */
.gds-gcard__plbtn {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gds-gcard__tee {
  display: block;
  margin-top: 0.2rem;
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: normal;
  color: var(--masters-ink-soft);
}
.gds-gcard__fact {
  font-size: 0.65rem;
  line-height: 1.35;
  color: var(--masters-ink-soft);
}
.gds-gcard__h {
  width: 2.3rem;
  text-align: left;
  font-weight: 600;
  color: var(--masters-ink-soft);
}
.gds-gcard__par {
  width: 2rem;
  color: var(--masters-ink-faint);
}
.gds-gcard__pl {
  min-width: 0;
}
/* Frozen left columns when the card scrolls (>4 players). Backgrounds live in the override
   block BELOW the row washes — they must out-specify the zebra/current/Tot color-mixes or
   tokens slide visibly through the frozen rail. */
.gds-gcard--scrolls .gds-gcard__h,
.gds-gcard--scrolls .gds-gcard__par {
  position: sticky;
  z-index: 1;
}
.gds-gcard--scrolls .gds-gcard__h {
  left: 0;
  /* Auto table layout renders this column narrower than its 2.3rem suggestion (a ~3.5px
     sliver of moving tokens leaked between the frozen columns). min-width is BINDING in
     table layout: with border-box it pins the rendered width to exactly the 2.3rem the
     Par offset below assumes — the rail sits flush. */
  box-sizing: border-box;
  min-width: 2.3rem;
}
.gds-gcard--scrolls .gds-gcard__par {
  /* Border-box: the 2.3rem Hole column already contains its padding — 2.6rem left a gap. */
  left: 2.3rem;
}
.gds-gcard__table tbody tr:nth-child(even) td {
  background: color-mix(in oklch, var(--masters-surface-sunken) 55%, transparent);
}
/* Full selector (not bare `.gds-gcard__row--now td`) so the tint outranks the zebra rule
   above — otherwise the current-hole wash vanishes on every even hole. */
.gds-gcard__table tbody tr.gds-gcard__row--now td {
  background: color-mix(in oklch, var(--masters-accent-fill) 12%, transparent);
}
.gds-gcard__sub td {
  border-top: 1px solid var(--masters-line-strong);
  font-weight: 700;
  color: var(--masters-ink);
  padding-top: 0.4rem;
}
.gds-gcard__sub td:first-child {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.64rem;
  color: var(--masters-ink-soft);
}
.gds-gcard__tot td {
  border-top: 2px solid var(--masters-positive);
  background: color-mix(in oklch, var(--masters-positive) 8%, transparent);
  font-size: 1rem;
}
/* F/B Stableford rows (#468, footer F1) — quiet siblings between Tot and Pts. Full-nine
   rule (enforced in groupScorecard): a nine shows its Stableford ONLY when all 9 holes are
   scored or picked up; otherwise the em-dash — blank beats a partial-nine guess. */
.gds-gcard__ptsnine td {
  font-weight: var(--fw-semibold);
  color: var(--masters-positive-ink);
  font-size: 0.875rem;
}
/* The F/B pair must match — don't let tbody zebra parity wash one and not the other
   (full selector out-specifies the nth-child rule; comp-mirrored from the #465 pass). */
.gds-gcard__table tbody tr.gds-gcard__ptsnine td {
  background: transparent;
}
.gds-gcard__ptsnine td.gds-gcard__off {
  color: var(--masters-ink-faint);
  font-weight: 500;
}
/* Frozen-rail backgrounds — AFTER every row wash above, and specific enough (0,3,3+) to beat
   the zebra, current-hole and Tot color-mixes: the rail must be opaque while tokens slide
   underneath it. */
.gds-gcard--scrolls .gds-gcard__table thead tr th.gds-gcard__h,
.gds-gcard--scrolls .gds-gcard__table thead tr th.gds-gcard__par,
.gds-gcard--scrolls .gds-gcard__table tbody tr td.gds-gcard__h,
.gds-gcard--scrolls .gds-gcard__table tbody tr td.gds-gcard__par {
  background: var(--masters-surface);
}
.gds-gcard__pts td {
  font-weight: 800;
  color: var(--masters-positive-ink);
  font-size: 1rem;
}
/* One label treatment for the points rows (Pts + F/B) — compose, never restyle. */
.gds-gcard__pts td:first-child,
.gds-gcard__ptsnine td:first-child {
  color: var(--masters-ink-soft);
  font-weight: 700;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Score-token sizing in the card + stroke-received pips centred under the number, below the
   shape — never overlapping the ring/square. */
.gds-gcard .gds-score-token {
  width: 1.65rem;
  height: 1.65rem;
  font-size: 0.82rem;
}
.gds-tokcell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5px;
  min-width: 0;
}
.gds-tok-dots {
  display: flex;
  gap: 2px;
  height: 4px;
  align-items: center;
  justify-content: center;
}
.gds-tok-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--masters-ink-soft);
}

/* The live leaderboard is the ONE contoured `.gds-board--compact` + `.gds-lb` component
   (field feedback 21 Jul) — the old bespoke `.gds-play__lb` family is retired; see
   `liveLeaderboard` in app.js. */

/* ---- Group round badge + outing detail (#46) ---------------------------------- */
.gds-pill--group {
  background: color-mix(in oklch, var(--masters-green-500) 16%, var(--masters-surface));
  color: var(--masters-positive-ink);
}

/* The outing leaderboard board — always the Augusta dark green (like the live board + share card),
   gold winner. The richer history view: rank · name + handicap/gross · total + front/back splits. */
.gds-outing__board {
  margin-top: 0.5rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: var(--radius-lg, 14px);
  color: var(--masters-on-green);
  background: linear-gradient(165deg, var(--masters-board), var(--masters-board-edge));
  border: 1px solid color-mix(in oklch, var(--masters-green-500) 25%, transparent);
  box-shadow: 0 12px 34px oklch(8% 0.02 158 / 0.42);
}
.gds-outing__board-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.4rem;
}
.gds-outing__board-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--masters-on-green-soft);
}
.gds-outing__board-thru {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--masters-on-green-soft);
}
.gds-outing__rows {
  display: flex;
  flex-direction: column;
}
.gds-outing__row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.3rem;
  border-top: 1px solid oklch(72% 0.06 150 / 0.2);
}
.gds-outing__row:first-child {
  border-top: 0;
}
.gds-outing__row--winner {
  /* #357: gold font only — no background highlight on any board. */
}
.gds-outing__pos {
  font-family: var(--font-display-masters);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  color: var(--masters-on-green-soft);
  font-variant-numeric: tabular-nums;
}
.gds-outing__row--winner .gds-outing__pos {
  font-size: 1.25rem;
}
.gds-outing__id {
  min-width: 0;
}
.gds-outing__name {
  font-family: var(--font-display-masters);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--masters-on-green);
  overflow-wrap: anywhere;
}
.gds-outing__row--winner .gds-outing__name {
  color: var(--masters-butter);
}
.gds-outing__meta {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--masters-on-green-soft);
  font-variant-numeric: tabular-nums;
}
.gds-outing__splits {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--masters-on-green-soft);
  font-variant-numeric: tabular-nums;
}
.gds-outing__split {
  color: var(--masters-on-green);
  font-weight: 600;
}
.gds-outing__split--gold {
  color: var(--masters-butter);
}
.gds-outing__total {
  text-align: right;
  flex-shrink: 0;
}
.gds-outing__total b {
  font-family: var(--font-display-masters);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--masters-on-green);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gds-outing__row--winner .gds-outing__total b {
  color: var(--masters-butter);
}
.gds-outing__total small {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--masters-on-green-soft);
}

/* ---- In-app confirm/choice sheet (#131) + outing lifecycle controls ----------- */
.gds-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: oklch(8% 0.02 158 / 0.45);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.18s ease;
  /* The scrim owns its touches — never pans the page behind (#365). */
  touch-action: none;
}
.gds-sheet-backdrop.is-open {
  opacity: 1;
}
.gds-sheet {
  width: min(100%, 520px);
  box-sizing: border-box;
  padding: 0.6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
  background: var(--masters-surface);
  border: 1px solid var(--masters-line);
  border-bottom: 0;
  box-shadow: 0 -18px 50px oklch(8% 0.02 158 / 0.4);
  transform: translateY(16px);
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gds-sheet-backdrop.is-open .gds-sheet {
  transform: translateY(0);
}
.gds-sheet__grip {
  width: 2.4rem;
  height: 0.28rem;
  margin: 0.2rem auto 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--masters-line-strong);
}
.gds-sheet__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display-masters);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--masters-ink);
}
.gds-sheet__body {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--masters-ink-soft);
}
.gds-sheet__action {
  margin-bottom: 0.6rem;
}
/* A destructive choice — readable red, filled enough to read as "this is the irreversible one". */
.gds-sheet__action--destructive {
  border-color: transparent;
  background: color-mix(in oklch, var(--masters-under) 16%, var(--masters-surface));
  color: var(--masters-under);
}
.gds-sheet__cancel {
  margin-top: 0.1rem;
  border-color: transparent;
  color: var(--masters-ink-soft);
}

/* Lifecycle controls under the live leaderboard — quiet text buttons, the discard one in red. */
.gds-play__options {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-bottom: 0.5rem;
}
.gds-play__option {
  min-height: var(--touch-min);
  padding: 0 0.4rem;
  border: 0;
  background: transparent;
  color: var(--masters-ink-soft);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gds-play__option--danger {
  color: var(--masters-under);
}

/* ============================================================
   TOAST — transient status/error pill (migrated from legacy .toast, #222).
   Dark board-green pill by default (stable in light+dark); error → theme-aware red.
   ============================================================ */
.gds-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--space-4));
  z-index: 60; /* above the sheet (50) — the copy-link toast must be seen (#349) */
  max-width: calc(100vw - var(--space-6));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  background: var(--masters-board);
  color: var(--masters-on-green);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.gds-toast--success {
  background: var(--masters-board);
  color: var(--masters-on-green);
}
.gds-toast--error {
  background: var(--masters-under);
  color: var(--masters-on-green);
}

/* Empty / loading / error / auth full-state block — migrated from .empty/.auth-state (#223).
   Centered art + display-serif line; --auth caps width and --action lays out the CTA. */
.gds-empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--masters-ink-soft);
}
.gds-empty__art {
  font-size: 3rem;
  margin-bottom: var(--space-4);
}
.gds-empty__line {
  font-family: var(--font-display-masters);
  font-size: var(--fs-lg);
  color: var(--masters-ink);
}
.gds-empty--auth {
  max-width: 28rem;
  margin: 0 auto;
}
.gds-empty__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  margin-top: var(--space-4);
  text-decoration: none;
}

/* Inline note (hint) + notice banner — migrated from theme-golf.css (#224). */
.gds-note {
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
}
.gds-notice {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface);
}
.gds-notice--warn {
  border-color: color-mix(in oklch, var(--masters-accent-fill) 45%, var(--masters-line));
  background: color-mix(in oklch, var(--masters-accent-fill) 11%, var(--masters-surface));
}
[data-theme="dark"] .gds-notice--warn {
  border-color: color-mix(in oklch, var(--masters-accent-fill) 62%, var(--masters-line));
  background: color-mix(in oklch, var(--masters-accent-fill) 22%, var(--masters-surface));
}
.gds-notice--ok {
  border-color: color-mix(in oklch, var(--masters-positive) 40%, var(--masters-line));
  background: color-mix(in oklch, var(--masters-positive) 10%, var(--masters-surface));
}
.gds-notice__title {
  font-family: var(--font-display-masters);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--masters-ink);
  margin-bottom: var(--space-1);
}
.gds-notice__actions {
  margin-top: var(--space-3);
}
.gds-notice--claim {
  margin-bottom: var(--space-5);
}

/* ============================================================
   COURSE SETUP / ADD-COURSE (#235) — migrated from theme-golf.css.
   tee-table, setup-holes, SI candidates/summary + grid states,
   link-card, photo-btn, form-context, ch-card, hole-shots;
   9/18 selector reuses the seg pattern as .gds-course-seg.
   Tokens remapped to --masters-*. (.ch-readout stays legacy → #226.)
   ============================================================ */
.gds-setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}

.gds-setup-holes {
  display: grid;
  grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
}

/* 9 / 18 hole-count selector above the SI grid. */
.gds-course-seg {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.gds-course-seg__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--masters-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-right: var(--space-1);
}

.gds-course-seg__btn {
  min-width: 48px;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--masters-ink-soft);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.gds-course-seg__btn--on {
  /* Selected hole-count = Augusta green (matches .gds-seg + the primary controls), not gold.
     Gold is reserved for best/winner/brand (gold-discipline rule); a routine toggle is green.
     --masters-board + --masters-on-green are theme-correct (deep green + cream) in light AND dark. */
  background: var(--masters-board);
  color: var(--masters-on-green);
  border-color: var(--masters-board);
}

.gds-setup-holes__head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--masters-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.gds-setup-holes__hole {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}

.gds-setup-holes input {
  width: 100%;
  font-family: var(--font-sans-masters);
  font-size: var(--fs-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface);
  color: var(--masters-ink);
  min-height: var(--touch-min);
}

.gds-setup-holes input:focus {
  outline: 2px solid var(--masters-positive);
  outline-offset: 1px;
}

/* Scorecard photo preview — kept on screen beside the grid so SI can be verified by eye. */
.gds-scorecard-photo {
  display: block;
  width: 100%;
  max-height: 40vh;
  object-fit: contain;
  margin: var(--space-2) 0 var(--space-3);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface);
}

@media (max-width: 420px) {
  .gds-setup-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.gds-section-title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--masters-ink-faint);
  margin: var(--space-5) 0 var(--space-3);
}

/* ---- Course-setup form ---- */

/* Context header (course + date) — replaces the old amber "warning" notice */
.gds-form-context {
  margin: var(--space-3) 0 var(--space-4);
}

.gds-form-context__title {
  font-family: var(--font-display-masters);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}

/* Scan-the-scorecard — the primary affordance of the form (auto-fills par + SI) */
.gds-photo-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: 1.5px solid color-mix(in srgb, var(--masters-positive-ink) 45%, var(--masters-line));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--masters-positive) 8%, var(--masters-surface));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 80ms ease;
}

.gds-photo-btn:active {
  transform: scale(0.99);
}

.gds-photo-btn:focus-within {
  outline: 2px solid var(--masters-positive);
  outline-offset: 2px;
}

.gds-photo-btn--busy {
  opacity: 0.7;
  pointer-events: none;
}

/* Visually hidden but still focusable for keyboard/AT. */
.gds-photo-btn__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gds-photo-btn__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--masters-positive-ink);
  color: var(--masters-on-green);
  font-size: 1.5rem;
}

.gds-photo-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gds-photo-btn__title {
  font-family: var(--font-display-masters);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}

.gds-photo-btn__sub {
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
}

/* Stroke-index candidate picker — shown after a scan when the card carries more than one INDEX
   row (men's + ladies' tables). Each row is a tappable option showing its par total and the 18
   SI values, so the user matches their card by the numbers. Active option is highlighted. */
.gds-si-candidates {
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: color-mix(in srgb, var(--masters-positive) 8%, var(--masters-surface));
  border: 1px solid color-mix(in srgb, var(--masters-positive) 24%, var(--masters-line));
  border-radius: var(--radius-md);
}

.gds-si-candidates[hidden] {
  display: none;
}

.gds-si-candidates__note {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft, var(--masters-ink));
}

.gds-si-candidates__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  background: var(--masters-surface);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.gds-si-candidates__opt--active {
  border-color: color-mix(in srgb, var(--masters-positive-ink) 55%, var(--masters-line));
  background: color-mix(in srgb, var(--masters-positive) 12%, var(--masters-surface));
}

.gds-si-candidates__meta {
  font-family: var(--font-display-masters);
  font-size: var(--fs-sm);
  color: var(--masters-ink);
}

.gds-si-candidates__seq {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs, var(--fs-sm));
  letter-spacing: 0.04em;
  color: var(--ink-soft, var(--masters-ink));
  word-spacing: 0.15em;
}

/* Tee picker — choose the played tee by yardage + rating/slope (names don't align across sources). */
.gds-tee-picker {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.gds-tee-picker__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--masters-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.gds-tee-chip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface);
  text-align: left;
  font-family: var(--font-sans-masters);
  -webkit-tap-highlight-color: transparent;
  transition:
    background 100ms ease,
    border-color 100ms ease;
}

.gds-tee-chip:active {
  background: var(--masters-surface-sunken);
}

.gds-tee-chip--on {
  border-color: var(--masters-positive-ink);
  background: color-mix(in srgb, var(--masters-positive) 10%, var(--masters-surface));
}

.gds-tee-chip__name {
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}

.gds-tee-chip__meta {
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- Editable per-tee rating/slope table (course rating + slope differ by tee) ---- */
.gds-tee-table {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.gds-tee-table__head,
.gds-tee-table__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: center;
}

.gds-tee-table__h {
  /* Clamp: ≥375px viewports get fs-xs unchanged; below that the uppercase labels shrink just
     enough that METRES/RATING don't run into their neighbours at 320 (the columns are ~42px). */
  font-size: clamp(0.625rem, 3.2vw, var(--fs-xs));
  font-weight: var(--fw-semibold);
  color: var(--masters-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.gds-tee-table__h--played {
  text-align: center;
}

.gds-tee-table__name,
.gds-tee-table__num {
  width: 100%;
  font-family: var(--font-sans-masters);
  font-size: var(--fs-md);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface);
  color: var(--masters-ink);
  min-height: var(--touch-min);
}

.gds-tee-table__num {
  font-variant-numeric: tabular-nums;
}

/* No native spinners in the narrow tee columns (same normalization as .gds-control) — desktop
   Chrome's spin buttons ate ~8px and clipped a 3-digit yardage to "37", hiding the very value
   the scanned highlight asks you to verify (#390). */
.gds-tee-table__num::-webkit-outer-spin-button,
.gds-tee-table__num::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gds-tee-table__name:focus,
.gds-tee-table__num:focus {
  outline: 2px solid var(--masters-positive);
  outline-offset: 1px;
}

/* Tee value a machine filled (scan / GolfCourseAPI lookup) — verify against the card; editing
   clears it (#390). Same treatment as the SI grid's scanned cells. */
.gds-tee-table input.gds-input--scanned {
  border-color: var(--masters-positive);
  background: color-mix(in srgb, var(--masters-positive) 12%, var(--masters-surface));
}

/* "Card distances in" unit toggle row (#390) — values are entered as printed on the card;
   metres convert to yards at save. */
.gds-unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.gds-unit-row__label {
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  font-weight: var(--fw-semibold);
}

.gds-tee-table__radio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

.gds-tee-table__radio-input {
  width: 20px;
  height: 20px;
  accent-color: var(--masters-positive-ink);
}

/* The played tee — the one this round is scored off — reads as selected. */
.gds-tee-table__row--played .gds-tee-table__name {
  border-color: var(--masters-positive-ink);
  background: color-mix(in srgb, var(--masters-positive) 9%, var(--masters-surface));
  font-weight: var(--fw-semibold);
}

.gds-tee-table__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: 32px;
  border: none;
  background: transparent;
  color: var(--masters-ink-faint);
  font-size: var(--fs-md);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.gds-tee-table__remove:active {
  color: var(--masters-under);
}

.gds-tee-table__add {
  justify-self: start;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed color-mix(in srgb, var(--masters-positive-ink) 45%, var(--masters-line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--masters-positive) 6%, var(--masters-surface));
  color: var(--masters-positive-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

@media (max-width: 420px) {
  .gds-tee-table__head,
  .gds-tee-table__row {
    gap: var(--space-1);
  }

  .gds-tee-table__name,
  .gds-tee-table__num {
    padding: var(--space-2);
  }
}

/* Collapsed "stroke index already set" summary — shown when adding a tee to a known course. */
/* The `hidden` attr only sets display:none in the UA sheet; this author rule's
   explicit display would otherwise win and leak the summary. Override it. */
.gds-si-summary[hidden] {
  display: none;
}

.gds-si-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--masters-positive-ink) 40%, var(--masters-line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--masters-positive) 8%, var(--masters-surface));
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.gds-si-summary__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--masters-positive-ink);
  color: var(--masters-on-green);
  font-weight: var(--fw-bold);
}

/* #399: house-stroke icons replace raw glyphs (no-emoji rule) — sized per slot,
   stroked in the slot's own ink via currentColor. */
.gds-photo-btn__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.gds-si-summary__check svg,
.gds-seg button svg {
  width: 1rem;
  height: 1rem;
}
.gds-tee-table__remove svg,
.gds-player__remove svg {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
.gds-golfer__act svg {
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: -0.12em;
  margin-right: 0.25rem;
}
.gds-photo-btn__icon svg,
.gds-si-summary__check svg,
.gds-seg button svg,
.gds-tee-table__remove svg,
.gds-player__remove svg,
.gds-golfer__act svg {
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gds-si-summary__title {
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}

.gds-field-help {
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}

/* Inline form error — lightweight, not the page-level rain-cloud block */
.gds-form-error {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--masters-under) 12%, var(--masters-surface));
  border: 1px solid color-mix(in srgb, var(--masters-under) 40%, var(--masters-line));
  color: var(--masters-under);
  font-size: var(--fs-sm);
}

/* Stroke-index cell changed by a scan/finder draft — verify against the photo */
.gds-setup-holes input.gds-input--scanned {
  border-color: var(--masters-positive);
  background: color-mix(in srgb, var(--masters-positive) 12%, var(--masters-surface));
}

/* Stroke-index cell the scan couldn't read — existing value kept, needs a check */
.gds-setup-holes input.gds-input--scan-kept {
  border-color: color-mix(in srgb, var(--masters-accent-fill) 60%, var(--masters-line));
  background: color-mix(in srgb, var(--masters-accent-fill) 14%, var(--masters-surface));
}

/* Invalid stroke-index cell (out of range / duplicate) — defined last so red wins over the
   scan highlights when a changed/kept cell is also an invalid permutation entry. */
.gds-setup-holes input.gds-input--bad {
  border-color: var(--masters-under);
  background: color-mix(in srgb, var(--masters-under) 8%, var(--masters-surface));
}

/* "Already in your courses" link offer */
.gds-link-card {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--masters-positive) 10%, var(--masters-surface));
  border: 1px solid color-mix(in srgb, var(--masters-positive-ink) 35%, var(--masters-line));
}

.gds-link-card__title {
  font-family: var(--font-display-masters);
  font-weight: var(--fw-semibold);
  color: var(--masters-positive-ink);
  margin-bottom: var(--space-1);
}

/* A tappable course row (suggestion / picker) that links the round to that course (#168). */
.gds-course-link-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  text-align: left;
}

.gds-course-link-row__hint {
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
  white-space: nowrap;
}

.gds-browse-all {
  margin-top: var(--space-3);
}

.gds-browse-all__list {
  margin-top: var(--space-2);
  max-height: 16rem;
  overflow-y: auto;
}

/* Course-handicap reference card — CH + which holes get strokes (for the physical card) */
.gds-ch-card {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--masters-accent-fill) 10%, var(--masters-surface));
  border: 1px solid color-mix(in srgb, var(--masters-accent-fill) 30%, var(--masters-line));
}

.gds-ch-card .ch-readout {
  margin-top: 0;
}

.gds-ch-shots {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--masters-ink);
}

/* Per-hole "Shots" column in the stroke-index grid */
.gds-setup-holes--shots {
  grid-template-columns: minmax(34px, auto) minmax(0, 1fr) minmax(0, 1fr) minmax(40px, auto);
}

.gds-hole-shots {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: var(--masters-ink-faint);
}

.gds-hole-shots--two {
  color: var(--masters-accent);
  font-size: 0.8rem;
}

/* ============================================================
   #226 (retire legacy, part of #33) — last component families + app shell
   ported off theme-golf.css to .gds-*, colours remapped to --masters-*.
   ============================================================ */
.gds-button--ghost {
  background: transparent;
  color: var(--masters-positive-ink);
  border: 1px solid var(--masters-line);
}
.gds-nav-actions { /* back-row layout (was .round-actions) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.gds-round-card__course {
  font-family: var(--font-display-masters);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--masters-ink);
}
.gds-round-card__meta {
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  margin-top: 2px;
}
.gds-ch-readout {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.gds-ch-readout__label {
  font-size: var(--fs-xs);
  color: var(--masters-ink-soft);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.gds-ch-readout__value {
  font-family: var(--font-display-masters);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--masters-accent);
}
.gds-app { /* app frame (was .app) */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.gds-app__main { /* scrolling content region (was .app__main) */
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5) var(--space-5)
    calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--space-6));
}
.gds-setup-field { /* pre-#180 bare label+input field (was .field) */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.gds-setup-field label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
}
.gds-setup-field input {
  font-family: var(--font-sans-masters);
  font-size: var(--fs-md);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--masters-line);
  border-radius: var(--radius-md);
  background: var(--masters-surface);
  color: var(--masters-ink);
  min-height: var(--touch-min);
}
.gds-setup-field input:focus-visible {
  outline: 2px solid var(--masters-positive);
  outline-offset: 1px;
}

/* ============================================================
   Saved playing partners (#313) — chooser rows, identity tags,
   search, match offer. Comp: masters.html 6a/6b/6c.
   ============================================================ */

/* Identity tag — quiet and wordy; registered = green-tinted, guest = neutral. Never gold. */
.gds-who {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}
.gds-who--reg {
  background: color-mix(in oklch, var(--masters-positive) 12%, var(--masters-surface));
  color: var(--masters-positive-ink);
  border: 1px solid color-mix(in oklch, var(--masters-positive) 28%, var(--masters-line));
}
.gds-who--guest {
  background: var(--masters-surface-sunken);
  color: var(--masters-ink-soft);
  border: 1px solid var(--masters-line-strong);
}

/* Search field (chooser) */
.gds-search {
  position: relative;
  margin-bottom: 0.3rem;
}
.gds-search > svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  translate: 0 -50%;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--masters-ink-faint);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.gds-search > .gds-control {
  padding-left: 2.4rem;
}

/* Roster chooser rows — the .gds-player anatomy plus a trailing add/added affordance */
.gds-golfer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.8rem 0;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--masters-line);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}
.gds-roster > .gds-golfer:first-child {
  border-top: 0;
}
.gds-golfer__id {
  flex: 1;
  min-width: 0;
}
.gds-golfer__name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.gds-golfer__meta {
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
  margin-top: 2px;
}
.gds-golfer__meta b {
  color: var(--masters-ink-soft);
}
.gds-golfer__meta--warn {
  color: var(--masters-accent);
  font-weight: 600;
}
.gds-golfer__act {
  flex: none;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--masters-positive-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.gds-golfer--held {
  cursor: default;
}
.gds-golfer--held .gds-golfer__act {
  color: var(--masters-ink-faint);
  font-weight: 600;
}
.gds-player__avatar--guest {
  color: var(--masters-ink-soft);
  background: var(--masters-surface-sunken);
}

/* "This email belongs to a registered golfer" offer (6b) */
.gds-match-offer {
  margin-top: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--masters-r-md);
  background: color-mix(in oklch, var(--masters-positive) 8%, var(--masters-surface));
  border: 1px solid color-mix(in oklch, var(--masters-positive) 26%, var(--masters-line));
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  line-height: 1.5;
}
.gds-match-offer b {
  color: var(--masters-ink);
}
.gds-match-offer__act {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

/* #314 (6d) — the playing screen's sync-status pills row + the Players & fixes sheet.
   (The players chip is gone — its jobs live in the green header's action slot, #434.) */
.gds-play__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.gds-sheet__roster {
  margin: 0.4rem 0 0;
  text-align: left;
}
.gds-sheet__roster .gds-golfer {
  cursor: default;
}
.gds-golfer__act--btn {
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  min-height: 44px;
}
.gds-sheet__foot {
  margin: 0.9rem 0 0.3rem;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
  line-height: 1.55;
  text-align: left;
}

/* #314 §9b review — sheet head meta ("Thru N") + registered padlock */
.gds-sheet__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.gds-sheet__head .gds-sheet__title {
  margin: 0;
}
.gds-sheet__meta {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--masters-ink-faint);
}
.gds-golfer__act--lock {
  color: var(--masters-ink-faint);
  cursor: default;
}

/* ============================================================
   #315 Live follow (§7, comps 6e/6f): the Live-now doorway on Rounds, the read-only
   follower leaderboard, worded freshness (stale is derived by the reader, never stored),
   the You chip and the corrected fact-line.
   ============================================================ */

/* 6e — Live-now card on Rounds: a round happening right now, one tap to follow. */
.gds-livecard {
  appearance: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  width: 100%;
  padding: 1rem;
  margin-bottom: 1.2rem;
  border: 1px solid color-mix(in oklch, var(--masters-positive) 30%, var(--masters-line));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--masters-positive) 9%, var(--masters-surface));
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
}
.gds-livecard__course {
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--masters-ink);
}
.gds-livecard__meta {
  font-size: var(--fs-sm);
  color: var(--masters-ink-soft);
  margin-top: 2px;
}
.gds-livecard__cta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--masters-positive-ink);
  font-weight: 700;
  font-size: var(--fs-sm);
}
/* appIcon() svgs carry no size/stroke of their own (menus size them) — without this the
   Follow chevron renders 0×0/unstroked, i.e. invisible (§9b review). Comp: 16px, 2.2 stroke. */
.gds-livecard__cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gds-who--live {
  background: color-mix(in oklch, var(--masters-positive) 15%, var(--masters-surface));
  color: var(--masters-positive-ink);
  border: 1px solid color-mix(in oklch, var(--masters-positive) 32%, var(--masters-line));
}
.gds-who__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--masters-positive);
}

/* 6f — worded freshness. Stale (≥120s) recolors to amber; shape (the dot) never carries
   the meaning alone — the words do. The freshness line and the corrected fact are ONE status
   cluster: grouped tight (0.35rem), with the page grid's 1rem gap around the cluster — the
   comp's flow margins would double up with the grid gap (§9b review). */
.gds-follow-status {
  display: grid;
  gap: 0.35rem;
}
.gds-fresh {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-fresh__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--masters-positive);
}
.gds-fresh--stale {
  color: var(--masters-accent);
  font-weight: 600;
}
.gds-fresh--stale .gds-fresh__dot {
  background: var(--masters-accent);
}
/* #616: what a manual check found. It sits inside the status cluster so it reads as a footnote
   to the freshness line above it, not as a new claim about the scores. */
.gds-fresh-check {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}

/* The live board (Play/follow/public). More air inside AND around it (Derek, 21 Jul):
   balanced top/bottom padding — the last row no longer sits on the edge — plus real
   section gaps to the pad above and the scorecard below. */
.gds-board--compact {
  padding: 1.15rem 1.1rem 1.2rem;
  margin: 1.4rem 0 1.35rem;
}
.gds-lb {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}
.gds-lb__row {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.42rem 0;
  border-top: 1px solid oklch(70% 0.06 150 / 0.16);
}
[data-theme="dark"] .gds-lb__row {
  border-top-color: oklch(72% 0.06 150 / 0.24);
}
.gds-lb__row:first-child {
  border-top: 0;
}
.gds-lb__pos {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--masters-on-green-soft);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.gds-lb__name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--masters-on-green);
  font-weight: 600;
}
.gds-lb__name-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gds-lb__name small {
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--masters-on-green-soft);
  margin-left: 0.3rem;
}
/* Per-row nine splits — shown only once that nine is COMPLETE for the row (never mid-nine).
   A caller may gold each nine's field-best value (the day board; 6h idiom). */
.gds-lb__split--gold {
  color: var(--masters-butter);
  font-weight: var(--fw-semibold);
}
.gds-lb__splits {
  margin-top: 0.1rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--masters-on-green-soft);
  font-variant-numeric: tabular-nums;
}
.gds-lb__pts {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--masters-on-green);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.gds-lb__pts small {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--masters-on-green-soft);
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
  margin-left: 0.1rem;
}
.gds-lb__row--leader {
  /* #357: the gold font carries first place — no background highlight (a tied pair read as
     one highlighted + one not, depending on the renderer). */
}
.gds-lb__row--leader .gds-lb__pos,
.gds-lb__row--leader .gds-lb__name,
.gds-lb__row--leader .gds-lb__name small,
.gds-lb__row--leader .gds-lb__splits,
.gds-lb__row--leader .gds-lb__pts,
.gds-lb__row--leader .gds-lb__pts small {
  color: var(--masters-butter);
}
.gds-lb-thru {
  color: var(--masters-on-green-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
}
.gds-lb-thru b {
  margin-left: 0.2rem;
  color: var(--masters-on-green);
  font-weight: 800;
  font-size: 0.95rem;
}

/* "you" marker on the follower board — on-green, quiet. */
.gds-you-chip {
  flex: none;
  margin-left: 0.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps-masters);
  text-transform: uppercase;
  color: var(--masters-on-green);
  border: 1px solid oklch(70% 0.06 150 / 0.4);
}

/* Corrected — a fix is a fact, said plainly wherever the score appears. */
.gds-corrected {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--masters-ink-faint);
}
.gds-corrected svg {
  width: 12px;
  height: 12px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   #316 Public outing link (§7, comp 6g) — the anonymous live scorecard. No app chrome,
   nothing personal: reduced names, points, thru, worded freshness. The comp's pub header IS
   the app's green header band, quieter: comp .pub-hdr__title is 1.15rem (not the app's
   --fs-xl) and the Live/Final tag rides the band's flex row.
   ============================================================ */
.gds-screen-header--pub .gds-screen-title {
  font-size: 1.15rem; /* comp .pub-hdr__title */
}

/* The players-sheet share block (#316): the host's copy/turn-off actions, quiet, below the roster. */
.gds-sheet__share {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--masters-line);
}
.gds-sheet__share .gds-button {
  min-height: 52px; /* comp .btn--block */
}

/* The corrected chip ON the green board (comp 6h .board .corrected) reads on-green, not ink. */
.gds-outing__board .gds-corrected {
  color: var(--masters-on-green-soft);
}

/* No emoji ever (Derek, #362) — the trophy and empty-state art come from the appIcon set. */
.gds-pos--champ svg {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}
.gds-empty__art--icon svg {
  width: 2.5rem;
  height: 2.5rem;
  stroke: var(--masters-positive-ink);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}