/* Scotland Golf Tracker — modern, mobile-first, no shared chrome.
   Lives alongside cash-proof's own stylesheet but does not depend on
   it. Most users will be on phones during the trip, so layouts default
   to single-column with horizontal scroll on the scorecard tables. */

:root {
  --golf-bg: #f4f2ec;
  --golf-paper: #ffffff;
  --golf-ink: #1f2a1d;
  --golf-ink-soft: #4a5a47;
  --golf-mute: #8c8a82;
  --golf-line: #d8d3c6;
  --golf-line-soft: #ebe7da;
  --golf-accent: #2f6b2f;       /* fairway green */
  --golf-accent-soft: #b6d2a4;
  --golf-gold: #b08d2b;
  --golf-bronze: #8a4a1e;
  --golf-red: #b73a3a;
  --golf-blue: #2554a7;
  --golf-warn: #c46a14;
  /* Per-round trend colors (0.11.2) — one stable swatch per round so the
     same player's RD2 line on /golf/player/3 looks identical to RD2 on
     /golf/player/7. Override on the chart container if needed. */
  --golf-rd-1: #1f6feb;  /* blue */
  --golf-rd-2: #2f6b2f;  /* fairway green */
  --golf-rd-3: #b08d2b;  /* gold */
  --golf-rd-4: #a63a3a;  /* rust red */
  --golf-rd-5: #6f42c1;  /* purple */
  --golf-rd-6: #0f7b8a;  /* teal */
  /* Per-player trend colors (0.11.11) — one stable swatch per player so
     the same player's polyline reads the same on every round page. The
     palette is intentionally distinct from the per-round palette above
     and avoids landing too close to the group-chip green/gold tints
     (--golf-accent / --golf-gold) so the line color stays the dominant
     signal while the group identity travels via the legend chip border.
     Tuned for 8 simultaneous lines: well-spaced hues, similar luminance
     so no single line visually dominates. Map: PLAYERS[].display_order
     -> --golf-pl-{N}. */
  --golf-pl-1: #1f6feb;  /* royal blue   — display_order 1 (King) */
  --golf-pl-2: #c0392b;  /* coral red    — 2 (Memenas) */
  --golf-pl-3: #6f42c1;  /* purple       — 3 (Haskins) */
  --golf-pl-4: #d97706;  /* amber        — 4 (Mattox) */
  --golf-pl-5: #0f7b8a;  /* teal         — 5 (McGovern) */
  --golf-pl-6: #be185d;  /* magenta      — 6 (Amaral) */
  --golf-pl-7: #4d7c0f;  /* olive        — 7 (Zellner) */
  --golf-pl-8: #475569;  /* slate        — 8 (Hathaway) */
  --golf-radius: 10px;
  --golf-radius-sm: 6px;
  --golf-shadow: 0 1px 2px rgba(20, 30, 20, 0.04),
                 0 6px 18px rgba(20, 30, 20, 0.06);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--golf-bg);
  color: var(--golf-ink);
  font-family: inherit;
}

body.golf {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.golf__container {
  width: min(1200px, 100% - 24px);
  margin: 0 auto;
  padding: 16px 0 48px;
  flex: 1 0 auto;
}

/* ------- Topbar ------- */
.golf__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--golf-paper);
  border-radius: var(--golf-radius);
  box-shadow: var(--golf-shadow);
  margin-bottom: 18px;
}

.golf__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--golf-ink);
  font-weight: 700;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
}

.golf__brand-mark { font-size: 22px; }
.golf__brand-text { letter-spacing: 0.01em; }

.golf__topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.golf__topnav-link {
  text-decoration: none;
  color: var(--golf-ink-soft);
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.12s ease, color 0.12s ease;
}

.golf__topnav-link:hover {
  background: var(--golf-line-soft);
  color: var(--golf-ink);
}

/* ------- Hero ------- */
.golf__hero {
  padding: 8px 6px 18px;
}

.golf__hero-title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.golf__hero-sub {
  margin: 8px 0 0;
  color: var(--golf-ink-soft);
  font-size: 16px;
}

/* ------- Round hero ------- */
.golf__round-hero {
  padding: 8px 6px 14px;
}

.golf__back-link {
  display: inline-block;
  color: var(--golf-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 8px;
}

.golf__round-hero-title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 3.6vw, 30px);
  font-weight: 600;
}

.golf__round-hero-meta {
  margin: 6px 0 0;
  color: var(--golf-ink-soft);
  font-size: 14px;
}

/* ------- Panel ------- */
.golf__panel {
  background: var(--golf-paper);
  border-radius: var(--golf-radius);
  box-shadow: var(--golf-shadow);
  padding: 16px 16px 18px;
  margin-bottom: 18px;
}

.golf__panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.golf__panel-title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
}

.golf__panel-meta {
  color: var(--golf-mute);
  font-size: 13px;
}

/* ------- Tables (leaderboard / daily / scorecard) ------- */
.golf__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.golf__leaderboard,
.golf__daily,
.golf__scorecard {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}

.golf__leaderboard th,
.golf__daily th,
.golf__scorecard th {
  text-align: left;
  font-weight: 600;
  color: var(--golf-ink-soft);
  padding: 8px 10px;
  border-bottom: 1px solid var(--golf-line);
  background: #fafaf6;
  position: sticky;
  top: 0;
}

.golf__leaderboard td,
.golf__daily td,
.golf__scorecard td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--golf-line-soft);
}

.golf__num { text-align: right; font-variant-numeric: tabular-nums; }
/* Bump specificity so `.golf__num` wins against the base
   `.golf__leaderboard th { text-align: left; }` rule — the header
   cells get added `.golf__num` in summary.html but otherwise inherit
   the left-align default from the broader `th` selector. */
.golf__leaderboard th.golf__num,
.golf__daily th.golf__num,
.golf__scorecard th.golf__num { text-align: right; }
.golf__net { font-weight: 600; color: var(--golf-accent); }

.golf__row-first { background: rgba(176, 141, 43, 0.08); }
.golf__row-second { background: rgba(99, 99, 99, 0.05); }
.golf__row-third { background: rgba(138, 74, 30, 0.06); }

.golf__leaderboard-rank {
  width: 36px;
  text-align: center;
  font-weight: 600;
}

/* Overall leaderboard column sizing — let the table shrink to its content
   so the numeric columns hug the player names instead of being shoved to
   the far right by `width: 100%`. Numeric cells `width: 1%; white-space:
   nowrap` is the standard CSS trick to make each column shrink to its
   content while the named column (Player) takes whatever's left. */
.golf__leaderboard {
  width: auto;
  min-width: 0;
}
.golf__leaderboard th.golf__num,
.golf__leaderboard td.golf__num {
  width: 1%;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 10px;
}

/* Money column (0.11.3) — visually separate the "$ winnings" column
   from the play-stats columns to its left. The subtle 1px rule on the
   left edge cues "this is money, not strokes" without shouting; the
   tabular-figures comes free from `.golf__num`. */
.golf__leaderboard th.golf__money,
.golf__leaderboard td.golf__money {
  border-left: 1px solid var(--golf-line);
  padding-left: 14px;
}
.golf__leaderboard td.golf__money {
  font-weight: 600;
  color: var(--golf-ink);
}

.golf__empty {
  padding: 18px;
  text-align: center;
  color: var(--golf-mute);
}

/* ------- Round links / chips ------- */
.golf__round-link {
  font-weight: 600;
  color: var(--golf-accent);
  text-decoration: none;
}

.golf__chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--golf-line-soft);
  color: var(--golf-ink-soft);
  margin: 2px 4px 2px 0;
}

.golf__chip--first { background: rgba(176, 141, 43, 0.18); color: #6a541a; }
.golf__chip--second { background: rgba(99, 99, 99, 0.16); color: #3a3a3a; }
.golf__chip--tbd { font-style: italic; color: var(--golf-mute); }

/* ------- Inline handicap-index editing (Overall leaderboard) -------
   The standalone "Handicap indexes" panel was retired in 0.10.4 — the
   Index column on the leaderboard is now click-to-edit. Default state
   shows `.golf__leaderboard-edit-static` (plain text); when the panel
   carries `.is-editing`, the `.golf__leaderboard-edit-input` swaps in
   and Save/Cancel buttons appear in the head. */
.golf__enter-input {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--golf-line);
  border-radius: var(--golf-radius-sm);
  background: var(--golf-paper);
  color: var(--golf-ink);
}

.golf__leaderboard-edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.golf__leaderboard-edit-input {
  display: none;
  width: 70px;
  text-align: right;
  font-family: inherit;
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid var(--golf-line);
  border-radius: var(--golf-radius-sm);
  background: var(--golf-paper);
  color: var(--golf-ink);
  font-variant-numeric: tabular-nums;
}

.golf__leaderboard-edit-by {
  display: none;
  font-family: inherit;
  font-size: 13px;
  padding: 6px 10px;
  width: 180px;
  border: 1px solid var(--golf-line);
  border-radius: var(--golf-radius-sm);
  background: var(--golf-paper);
  color: var(--golf-ink);
}

/* Swap toggles: hidden vs visible per editing mode. The selectors are
   `.golf__panel.is-editing`-scoped so other panels on the page that
   may use `.golf__panel-meta` aren't affected. */
.golf__panel.is-editing .golf__leaderboard-edit-input { display: inline-block; }
.golf__panel.is-editing .golf__leaderboard-edit-by { display: inline-block; }
.golf__panel.is-editing .golf__leaderboard-edit-static { display: none; }
.golf__panel.is-editing .golf__edit-toggle--edit { display: none; }

/* 0.11.19: scope the default-hide selectors under `.golf__panel` so the
   compound-class specificity (0,0,2,0) beats `.golf__btn` (0,0,1,0,
   defined further down the file at ~L690 with `display: inline-block`).
   Without this scope the Save/Cancel buttons inherited `.golf__btn`'s
   inline-block via source order and stayed visible even when the panel
   wasn't in edit mode — fixed by raising specificity, NOT by adding
   `!important`. Applies to both the cumulative-leaderboard "Edit
   indexes" panel and the daily-winners "Edit course rating" panel,
   since both share the same `.golf__edit-toggle--{save,cancel}`
   classes on top of `.golf__btn`. */
.golf__panel .golf__edit-toggle--save,
.golf__panel .golf__edit-toggle--cancel { display: none; }
.golf__panel.is-editing .golf__edit-toggle--save,
.golf__panel.is-editing .golf__edit-toggle--cancel { display: inline-block; }

/* ------- 0.11.12: course meta inline-edit (rating/slope per round) ----
   Same is-editing-flip mechanic as the cumulative leaderboard's Index
   column. Re-uses .golf__leaderboard-edit-input for the input styling
   so the visual feel is identical; the only extra hookup is the
   static-cell selector so the read-only text hides during edits. */
.golf__courses-meta-edit-input { display: none; }
.golf__panel.is-editing .golf__courses-meta-edit-input { display: inline-block; }
.golf__panel.is-editing .golf__courses-meta-edit-static { display: none; }

/* ------- 0.11.14: Rating + Slope sub-block on the daily-winners table -
   The two columns hold short numeric values (XX.X and NNN) plus, in
   edit mode, a small `.golf__leaderboard-edit-input`. Pinned narrow so
   they don't push the wider Course / winner-chip columns around, and
   bracketed with hairline rules so the pair reads as a single
   grouped sub-block between Round and Course. Right-align inherits
   from `.golf__num`; tabular figures inherit from the same class. */
.golf__daily th.golf__daily-rating,
.golf__daily td.golf__daily-rating {
  width: 62px;
  white-space: nowrap;
  border-left: 1px solid var(--golf-line, rgba(0,0,0,0.12));
}
.golf__daily th.golf__daily-slope,
.golf__daily td.golf__daily-slope {
  width: 46px;
  white-space: nowrap;
  border-right: 1px solid var(--golf-line, rgba(0,0,0,0.12));
}
/* Shrink the inline-edit input to fit the tightened cell, otherwise the
   default `.golf__leaderboard-edit-input` (sized for the wider Index
   column) would force the column wider in edit mode. */
.golf__daily td.golf__daily-rating .golf__courses-meta-edit-input { width: 52px; }
.golf__daily td.golf__daily-slope  .golf__courses-meta-edit-input { width: 40px; }

@media (max-width: 560px) {
  /* Even tighter on phones — same content, but the table is squeezed
     by the surrounding card padding. */
  .golf__daily th.golf__daily-rating,
  .golf__daily td.golf__daily-rating { width: 52px; }
  .golf__daily th.golf__daily-slope,
  .golf__daily td.golf__daily-slope  { width: 40px; }
  .golf__daily td.golf__daily-rating .golf__courses-meta-edit-input { width: 44px; }
  .golf__daily td.golf__daily-slope  .golf__courses-meta-edit-input { width: 34px; }
}

/* ------- 0.11.17: widen Slope <input> only in edit mode ---------------
   0.11.14 tightened the Slope cell to ~46px (~40px on mobile) so the
   3-digit display value (e.g. 136) reads cleanly without pushing the
   wider Course / winner-chip columns around. Display mode still fits
   fine because plain text doesn't need spinner controls. The
   `<input type="number">` does — Chromium reserves room for the up/down
   spinner arrows and inner padding, so a 40px input clipped 3-digit
   slope values to a single visible digit until the user scrolled the
   input horizontally.
   Fix: only when the panel is in edit mode, grow the slope <input> to
   fill the cell and give the cell itself a min-width large enough to
   show all three digits + the spinner controls. Display-mode columns
   stay at their 0.11.14 widths because `.is-editing` is only on the
   panel while the user is actively editing. Rating uses
   type="text"+inputmode="decimal" (0.11.16), has no spinner overhead,
   and fits 4 chars in its existing input — left alone. */
.golf__panel.is-editing .golf__daily td.golf__daily-slope,
.golf__panel.is-editing .golf__daily th.golf__daily-slope {
  min-width: 72px;
}
.golf__panel.is-editing
  .golf__daily td.golf__daily-slope .golf__courses-meta-edit-input {
  width: 100%;
  min-width: 64px;
}

@media (max-width: 560px) {
  .golf__panel.is-editing .golf__daily td.golf__daily-slope,
  .golf__panel.is-editing .golf__daily th.golf__daily-slope {
    min-width: 64px;
  }
  .golf__panel.is-editing
    .golf__daily td.golf__daily-slope .golf__courses-meta-edit-input {
    min-width: 56px;
  }
}

/* ------- 0.11.12: live-scorecard HDCP override surface --------------
   - .golf__sc-override-flag: tiny ink-on-cream ▲ next to the player's
     name when GolfPlayerRound.handicap_override is set. Deliberately
     muted (no red) so the live scorecard stays restful.
   - .golf__sc-hdcp-edit: muted pencil button in the HDCP cell; opens
     the inline override dialog. Visible but unobtrusive — the auto-
     computed handicap is the happy path.

   0.11.25: the flag is now wrapped in `.golf__sc-player-marks` on the
   scorecard (and `.golf__lbs-marks` in the leaderboard strip) so the
   marker sits on the right side of the player name rather than
   pushing it left. */
.golf__sc-override-flag {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
  color: var(--golf-ink-soft, #756a52);
  vertical-align: 1px;
  cursor: help;
}
.golf__sc-player-marks {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  vertical-align: 1px;
  line-height: 1;
}

.golf__sc-hdcp-value { display: inline-block; }
.golf__sc-hdcp-edit {
  display: inline-block;
  margin-left: 4px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  color: var(--golf-ink-soft, #756a52);
  font-size: 11px;
  cursor: pointer;
  opacity: 0.55;
  vertical-align: 1px;
}
.golf__sc-hdcp-edit:hover { opacity: 1; }

/* The inline override dialog itself: fixed-position floating card. */
.golf__hdcp-override-dialog {
  position: fixed;
  z-index: 50;
  background: var(--golf-paper, #faf6ea);
  border: 1px solid var(--golf-line, rgba(0,0,0,0.18));
  border-radius: var(--golf-radius, 8px);
  padding: 10px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  max-width: 360px;
}
.golf__hdcp-override-head {
  font-size: 13px;
  color: var(--golf-ink, #2a2412);
  margin-bottom: 8px;
}
.golf__hdcp-override-body {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.golf__hdcp-override-body input[type="number"] {
  width: 70px;
  text-align: right;
  font-family: inherit;
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid var(--golf-line, rgba(0,0,0,0.18));
  border-radius: var(--golf-radius-sm, 4px);
  background: var(--golf-paper, #faf6ea);
  color: var(--golf-ink, #2a2412);
  font-variant-numeric: tabular-nums;
}

/* Score-entry form: handicap is now read-only (computed automatically). */
.golf__enter-hdcp-readonly {
  display: inline-block;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--golf-ink, #2a2412);
  padding: 6px 10px;
  border: 1px dashed var(--golf-line, rgba(0,0,0,0.18));
  border-radius: var(--golf-radius-sm, 4px);
  background: transparent;
}

/* ------- 0.11.15: Enter-scores page handicap-override editor --------
   The pencil + dialog left the live scorecard; the override edit
   affordance now lives on each player's Enter scores page. Closed
   state: a small ink-on-cream `Override handicap` button + a muted
   `Calculated: N` hint next to the displayed value. Open state: the
   `.golf__enter-meta-editor` form below the meta line with Save /
   Clear override / Cancel buttons. Tone matches the existing dashed
   read-only handicap chip — unobtrusive, not alarming. */
.golf__enter-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.golf__enter-meta .golf__enter-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.golf__enter-meta-hint {
  font-size: 12px;
  color: var(--golf-ink-soft, #756a52);
  font-variant-numeric: tabular-nums;
}
.golf__enter-meta-override-btn { font-size: 12px; }
.golf__enter-meta-saved {
  display: inline-block;
  font-size: 12px;
  color: var(--golf-ink-soft, #756a52);
  background: rgba(176, 141, 43, 0.10);
  border-radius: var(--golf-radius-sm, 4px);
  padding: 2px 6px;
  animation: golf-enter-meta-saved-fade 2.4s ease-out forwards;
}
@keyframes golf-enter-meta-saved-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
.golf__enter-meta-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--golf-line, rgba(0,0,0,0.18));
  border-radius: var(--golf-radius, 8px);
  background: rgba(176, 141, 43, 0.06);
}
.golf__enter-meta-editor-hint {
  font-size: 12px;
  color: var(--golf-ink-soft, #756a52);
  font-variant-numeric: tabular-nums;
}
.golf__enter-meta-editor-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.golf__enter-meta-editor-label {
  font-size: 12px;
  color: var(--golf-ink-soft, #756a52);
}
.golf__enter-meta-editor-input {
  width: 70px;
  text-align: right;
  font-family: inherit;
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid var(--golf-line, rgba(0,0,0,0.18));
  border-radius: var(--golf-radius-sm, 4px);
  background: var(--golf-paper, #faf6ea);
  color: var(--golf-ink, #2a2412);
  font-variant-numeric: tabular-nums;
}

/* ------- Daily / overall purse ------- */
.golf__purse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.golf__purse-cell {
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 14px 16px;
  text-align: center;
}

.golf__purse-cell.is-set { background: rgba(176, 141, 43, 0.10); }

.golf__purse-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--golf-mute);
}

.golf__purse-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  margin: 4px 0;
  color: var(--golf-gold);
}

.golf__purse-name { font-size: 14px; color: var(--golf-ink); }
.golf__purse-net { font-size: 11px; color: var(--golf-mute); }

/* ------- Round grid (summary) ------- */
.golf__round-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.golf__round-card {
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 14px 16px;
}

.golf__round-card-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--golf-accent);
}

.golf__round-card-course {
  font-weight: 500;
  margin-top: 2px;
}

.golf__round-card-meta {
  font-size: 12px;
  color: var(--golf-mute);
  margin-top: 2px;
}

.golf__round-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.golf__btn {
  display: inline-block;
  padding: 8px 14px;
  background: var(--golf-accent);
  color: white;
  text-decoration: none;
  border-radius: var(--golf-radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.golf__btn:hover { background: #244f24; }

.golf__btn--ghost {
  background: transparent;
  color: var(--golf-accent);
  border: 1px solid var(--golf-accent);
}

.golf__btn--ghost:hover { background: rgba(47, 107, 47, 0.08); }
.golf__btn--big { padding: 12px 20px; font-size: 15px; }
.golf__btn--inline { padding: 4px 10px; font-size: 12px; }
.golf__inline-link { color: var(--golf-accent); text-decoration: none; }

/* ------- Segmented toggle (Gross / Net) -------
   iOS-style pill control where both options are always visible and the
   active option is filled with the accent color. Inactive option is a
   plain link that navigates to the toggled URL. */
.golf__seg {
  display: inline-flex;
  background: var(--golf-line-soft);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
  vertical-align: middle;
}

.golf__seg-opt {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--golf-ink-soft);
  text-decoration: none;
  line-height: 1.5;
  transition: background 0.12s ease, color 0.12s ease;
}

.golf__seg-opt:hover {
  color: var(--golf-ink);
  background: rgba(20, 30, 20, 0.04);
}

.golf__seg-opt.is-active,
.golf__seg-opt.is-active:hover {
  background: var(--golf-accent);
  color: #fff;
  cursor: default;
  box-shadow: 0 1px 2px rgba(20, 30, 20, 0.12);
}

/* ------- Foursomes ------- */
.golf__foursomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.golf__foursome {
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 12px 14px;
}

.golf__foursome-label {
  font-weight: 600;
  color: var(--golf-accent);
  font-size: 13px;
  margin-bottom: 4px;
}

.golf__foursome-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.golf__foursome-list li { padding: 2px 0; }

/* ------- Scorecard -------
   The scorecard is laid out with `table-layout: fixed` so that empty hole
   cells reserve a column width even when no score is entered. Without
   `fixed`, browsers can collapse `<td>` cells whose content is purely
   whitespace down to nearly 0px, which lets adjacent filled cells visually
   "spill" into them. */
.golf__scorecard {
  font-size: 13px;
  min-width: 900px;
  table-layout: fixed;
}

.golf__sc-player {
  text-align: left !important;
  white-space: nowrap;
  font-weight: 600;
  background: #fafaf6;
  position: sticky;
  left: 0;
  z-index: 1;
  width: 140px;
  border-right: 1px solid var(--golf-line);
}

.golf__sc-hdcp {
  text-align: center;
  width: 36px;
  border-right: 1px solid var(--golf-line);
}
.golf__sc-hole {
  position: relative;
  text-align: center;
  width: 32px;
  min-width: 32px;
  font-variant-numeric: tabular-nums;
  padding: 6px 4px;
  overflow: visible;
  border-right: 1px solid var(--golf-line-soft);
}

.golf__scorecard th.golf__sc-hole,
.golf__scorecard th.golf__sc-hdcp { text-align: center; }

.golf__sc-par {
  font-weight: 500;
  color: var(--golf-ink-soft);
}

.golf__sc-si {
  font-size: 11px;
  color: var(--golf-mute);
  font-weight: 400;
}

.golf__sc-par-row th { background: #f1efe6; }
.golf__sc-si-row th { background: #f1efe6; color: var(--golf-mute); }

.golf__sc-sub {
  text-align: center;
  font-weight: 600;
  background: #f1efe6 !important;
  width: 44px;
  border-left: 1px solid var(--golf-line);
  border-right: 1px solid var(--golf-line);
}

.golf__sc-tot {
  text-align: center;
  font-weight: 700;
  background: rgba(47, 107, 47, 0.07) !important;
  width: 56px;
  border-left: 1px solid var(--golf-line);
  border-right: 1px solid var(--golf-line);
}

.golf__sc-rank {
  text-align: center;
  width: 36px;
  font-weight: 600;
  color: var(--golf-accent);
}

/* Stroke earmark — small dark dot pinned to the top-right of any hole
   cell where the player receives a handicap stroke. `data-n="2"` adds a
   second dot to the left (rare; only happens for course handicaps ≥ 19
   on the lowest stroke-index holes). The `<td>` is already
   `position: relative` for the birdie/bogey markers. */
.golf__sc-stroke-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  background: var(--golf-ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

.golf__sc-stroke-dot[data-n="2"]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 6px;
  width: 4px;
  height: 4px;
  background: var(--golf-ink);
  border-radius: 50%;
}

/* ===== Score cell styling: birdie circle, eagle double-circle,
   bogey square, double-bogey-plus double-square.

   IMPORTANT: the marker geometry lives on `.golf__sc-cell-inner` (a
   `<span>`), NEVER on the `<td>` itself. Applying `display: inline-block`
   to a `<td>` removes it from the table flow, which causes scored cells to
   "pile up" out of their columns and stack next to each other rather than
   appearing in the right hole columns. `.golf__sc-cell` is therefore only
   for the standalone legend swatches at the bottom of the table. */
.golf__sc-cell {
  position: relative;
  display: inline-block;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.golf__sc-cell-inner {
  position: relative;
  display: inline-block;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}

/* Plain par cell — no decoration, but keep the same vertical rhythm. */
.golf__sc--par {}

/* Birdie: single circle. */
.golf__sc--birdie .golf__sc-cell-inner::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border: 1.5px solid var(--golf-red);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

/* Eagle: double circle. */
.golf__sc--eagle .golf__sc-cell-inner::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border: 1.5px solid var(--golf-red);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.golf__sc--eagle .golf__sc-cell-inner::after {
  content: "";
  position: absolute;
  inset: -5px -7px;
  border: 1.5px solid var(--golf-red);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.golf__sc--eagle .golf__sc-cell-inner,
.golf__sc--birdie .golf__sc-cell-inner {
  color: var(--golf-red);
  font-weight: 600;
}

/* Bogey: single square. */
.golf__sc--bogey .golf__sc-cell-inner::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border: 1.5px solid var(--golf-blue);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

/* Double-bogey-or-worse: double square. */
.golf__sc--double_bogey_plus .golf__sc-cell-inner::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  border: 1.5px solid var(--golf-blue);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

.golf__sc--double_bogey_plus .golf__sc-cell-inner::after {
  content: "";
  position: absolute;
  inset: -5px -7px;
  border: 1.5px solid var(--golf-blue);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}

.golf__sc--bogey .golf__sc-cell-inner,
.golf__sc--double_bogey_plus .golf__sc-cell-inner {
  color: var(--golf-blue);
  font-weight: 500;
}

/* Synthesized "group min/max per hole" rows at the bottom of the
   scorecard. The first row gets a thick top border to separate the
   composite stats from the real player rows. The Total Min/Max rows
   are tinted fairway-green to anchor the eye. */
.golf__sc-statrow td,
.golf__sc-statrow th {
  background: #faf8f1;
  color: var(--golf-ink-soft);
  font-weight: 500;
  font-style: italic;
}

/* Dedicated divider row that sits between the last real player and the
   synthesized stat block. A solid colored TR paints reliably; using a
   `border-top` on the next row got eaten by the sticky `.golf__sc-player`
   column's z-index and the OUT/IN cells' !important backgrounds. */
.golf__sc-divider td {
  height: 4px !important;
  padding: 0 !important;
  background: var(--golf-ink) !important;
  border: none !important;
}

.golf__sc-statrow--total td,
.golf__sc-statrow--total th {
  background: rgba(47, 107, 47, 0.08);
  color: var(--golf-accent);
  font-weight: 700;
  font-style: normal;
}

.golf__sc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  color: var(--golf-mute);
  font-size: 12px;
  margin-top: 14px;
  padding: 6px 4px;
}

.golf__sc-legend .golf__sc-cell {
  display: inline-block;
  margin-right: 4px;
}

/* ------- Picker grid (Who are you?) ------- */
.golf__picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.golf__picker-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #faf8f1;
  color: var(--golf-ink);
  border-radius: var(--golf-radius);
  padding: 16px 18px;
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}

.golf__picker-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--golf-shadow);
  background: rgba(47, 107, 47, 0.08);
}

.golf__picker-name {
  font-weight: 600;
  font-size: 16px;
}

.golf__picker-idx {
  font-size: 12px;
  color: var(--golf-mute);
  margin-top: 4px;
}

/* ------- Enter scorecard ------- */
.golf__enter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}

.golf__enter-field {
  display: flex;
  flex-direction: column;
}

.golf__enter-field-label {
  font-size: 12px;
  color: var(--golf-mute);
  margin-bottom: 4px;
}

.golf__enter-input--hdcp { width: 80px; text-align: right; }

/* 0.13.6: stack hole cards vertically at every width. The previous
   `repeat(auto-fit, minmax(86px, 1fr))` packed the front 9 + back 9
   into two narrow horizontal rows on desktop, which cluttered the
   page and shrank each input to ~70px wide. The mobile media block
   below already used `1fr` + `gap: 12px`; that becomes the default
   now so desktop matches the phone "one hole per row" rhythm. */
.golf__enter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.golf__enter-hole {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #faf8f1;
  border-radius: var(--golf-radius-sm);
  padding: 8px 6px;
  text-align: center;
}

.golf__enter-hole-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--golf-accent);
}

.golf__enter-hole-par {
  font-size: 11px;
  color: var(--golf-mute);
  margin-bottom: 4px;
}

.golf__enter-input--score {
  width: 100%;
  font-size: 18px;
  text-align: center;
  padding: 8px 4px;
}

.golf__enter-divider {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: var(--golf-mute);
  letter-spacing: 0.06em;
  padding: 4px 0;
}

.golf__enter-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* 0.12.1 — per-hole Save button + row layout.
   Each hole card now carries its own <form> with a dedicated Save
   button next to the input, so a golfer can't accidentally drop
   strokes by walking away from a single bottom-of-page Save. The
   `.golf__enter-row` class is added ALONGSIDE the existing
   `.golf__enter-hole` / `.golf__enter-card` classes, so the
   vertical card layout, quick-add row, and note <details> all
   keep working unchanged.

   Layout per card: top "main row" is grid [Hole# Par] [Input]
   [Save], then the existing quick-add flex row, then the note
   <details>. The saved-pill drops back into the grid at the end
   of the main row when present. */
.golf__enter-row-main {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) 56px auto;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.golf__enter-row-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 0;
}

.golf__enter-row .golf__enter-hole-num { text-align: left; }
.golf__enter-row .golf__enter-hole-par { text-align: left; margin-bottom: 0; }

/* Override the column-stretch the score input inherits from the
   legacy .golf__enter-input--score rule (width: 100%) so the new
   row-grid keeps the input compact next to a dedicated Save
   button. The width here is overridden again in the ≤640px media
   block below to keep the row from forcing horizontal scroll. */
.golf__enter-row .golf__enter-input--score {
  width: 56px;
  min-width: 56px;
  height: 44px;
  padding: 6px 4px;
  font-size: 17px;
  justify-self: center;
}

.golf__enter-save {
  min-width: 64px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--golf-radius-sm);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  background: var(--golf-line-soft);
  color: var(--golf-ink-soft);
  border: 1px solid var(--golf-line);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(47, 107, 47, 0.18);
  transition: background 120ms ease, color 120ms ease,
              border-color 120ms ease, transform 120ms ease;
}

.golf__enter-save:active { transform: scale(0.97); }

/* Dirty: value differs from the last server-rendered value; the
   button calls out for a tap. */
.golf__enter-save[data-state="dirty"] {
  background: var(--golf-accent);
  color: #fff;
  border-color: var(--golf-accent);
}

/* Saving: HTMX request in flight. */
.golf__enter-save[data-state="saving"] {
  opacity: 0.6;
  cursor: progress;
}
.golf__enter-save[data-state="saving"]::after {
  content: "…";
  margin-left: 2px;
}

/* Saved: brief green pulse after a successful save. */
.golf__enter-save[data-state="saved"] {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
  animation: encc-save-pulse 700ms ease-out;
}

@keyframes encc-save-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* "Saved" pill drops into the right side of the main row after
   the Save button when the server-rendered partial carries
   `saved_just_now=True`. Pure CSS fade — no JS timer. */
.golf__enter-saved-pill {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
  background: rgba(22, 163, 74, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
  animation: encc-saved-fade 1400ms forwards;
}

@keyframes encc-saved-fade {
  0%   { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

.golf__enter-saveform {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 640px) {
  .golf__enter-row-main {
    grid-template-columns: minmax(64px, 1fr) 52px 56px;
    gap: 8px;
  }
  .golf__enter-row .golf__enter-input--score {
    width: 52px;
    min-width: 52px;
    height: 44px;
    font-size: 16px;
  }
  .golf__enter-save {
    min-width: 56px;
    font-size: 12px;
    padding: 0 10px;
  }
}

.golf__live-mini {
  margin-top: 16px;
  overflow-x: auto;
}

/* ------- Live leaderboard strip ------- */
.golf__leaderboard-strip {
  /* Slight visual lift from the other panels so the eye lands on it
     first — it's the "score the trip in two seconds" surface. */
  border-top: 3px solid var(--golf-accent);
  padding-top: 14px;
}

.golf__lbs-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.golf__lbs-group {
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 12px 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.golf__lbs-group::before {
  /* Color bar runs down the left edge of the group card, tinted to
     the group's net-to-par tone. The width is intentionally subtle. */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--lbs-bar, var(--golf-line));
}

.golf__lbs-group.golf__lbs-tone--under { --lbs-bar: var(--golf-red); }
.golf__lbs-group.golf__lbs-tone--over  { --lbs-bar: var(--golf-blue); }
.golf__lbs-group.golf__lbs-tone--even  { --lbs-bar: var(--golf-accent); }
.golf__lbs-group.golf__lbs-tone--idle  { --lbs-bar: var(--golf-line); opacity: 0.85; }

.golf__lbs-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--golf-mute);
  font-weight: 600;
}

.golf__lbs-group-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  margin: 4px 0 2px;
  font-variant-numeric: tabular-nums;
}

.golf__lbs-group-thru {
  font-size: 12px;
  color: var(--golf-ink-soft);
}

.golf__lbs-group-thru--idle { color: var(--golf-mute); font-style: italic; }

.golf__lbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.golf__lbs-row {
  display: grid;
  /* 0.13.1: first track was 28px, sized for `[rank][group-chip]`. The
     0.13.0 team chip added a 3rd inline-flex child to .golf__lbs-rankcell
     (rank + group chip + team chip ≈ 60-64px intrinsic), and because
     the cell is `justify-content: flex-end` the surplus overflowed
     LEFT past the panel's 16px inner-edge padding, clipping the rank
     pill on /golf/round/{n}. Bumping to 72px gives the 3-piece cluster
     ≈8px of slack inside the cell, so even the leftmost chip lands
     ≥12px inside the panel's inner edge. The other tracks
     (1fr name / 64px score / auto thru) are unchanged. */
  grid-template-columns: 72px 1fr 64px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-top: 1px solid var(--golf-line-soft);
  font-size: 14px;
}

.golf__lbs-row:first-child { border-top: none; }

.golf__lbs-rank {
  font-weight: 600;
  color: var(--golf-mute);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 0.11.6: shared grid cell that holds the rank numeral and (optionally)
   the tiny group-chip. Before 0.11.6 the chip was a separate child of
   .golf__lbs-row's 4-col grid and got stretched into the `1fr` name
   track. Wrapping them in one inline-flex keeps the chip a tight
   companion to the rank without touching the grid template. */
.golf__lbs-rankcell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  /* min-width: 0 lets the cell shrink inside the 28px track on the
     rare 2-digit-rank case without forcing a layout shift. */
  min-width: 0;
}

/* 0.11.25: shared `1fr` grid cell that holds the player name + the
   small `.golf__lbs-marks` wrapper (flame 🔥, override flag ▲). Same
   guard pattern as `.golf__lbs-rankcell` above — wrapping prevents
   the marks from becoming a 5th child of .golf__lbs-row's 4-col grid
   (which would push them onto a new row). The name keeps its left
   edge locked at the start of the `1fr` track regardless of how many
   marks are present, and the marks wrapper itself is capped at 36px
   so it never stretches across the row even on a sparse roster. */
.golf__lbs-namecell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.golf__lbs-marks {
  flex: 0 0 auto;
  max-width: 36px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.golf__lbs-name {
  font-weight: 500;
  color: var(--golf-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  /* 0.11.25: shares the namecell flex line — let the name take the
     leftover space and ellipsis if a long name + marks combo would
     overflow. */
  flex: 1 1 auto;
}

.golf__lbs-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.golf__lbs-thru {
  font-size: 12px;
  color: var(--golf-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Tone tinting for the per-player numeric score. Group cards use the
   left-edge bar above; the inline player rows just tint the number. */
.golf__lbs-row.golf__lbs-tone--under .golf__lbs-score { color: var(--golf-red); }
.golf__lbs-row.golf__lbs-tone--over  .golf__lbs-score { color: var(--golf-blue); }
.golf__lbs-row.golf__lbs-tone--even  .golf__lbs-score { color: var(--golf-ink); }
.golf__lbs-row.golf__lbs-tone--idle {
  opacity: 0.55;
}
.golf__lbs-row.golf__lbs-tone--idle .golf__lbs-score,
.golf__lbs-row.golf__lbs-tone--idle .golf__lbs-thru {
  color: var(--golf-mute);
  font-style: italic;
}

/* ------- Live leaderboard 4-tile group strip (0.13.3) -------
   Sits BELOW the per-player rows inside the same `.golf__leaderboard
   -strip` panel. Four tiles in one row across:
       Group A · Group B · Early · Late
   …summarising cumulative net-to-par + 'Thru N' for each group. A
   left-edge accent stripe encodes the group identity (matches the
   chip palette already used in the rank cell so the eye reads the
   tile and the chip as the same thing). The cum number itself flips
   green/red/grey on under-/over-/even-par; the accent stripe stays
   constant per group so the identity isn't lost when a group is at
   even par. Mobile breakpoint collapses to 2x2 to keep each tile
   wide enough to read on a phone. */
.golf__lbs-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.golf__lbs-tile {
  border: 1px solid var(--golf-line);
  border-left-width: 4px;
  border-radius: var(--golf-radius);
  padding: 10px 12px;
  background: var(--golf-paper);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.golf__lbs-tile--team-a { border-left-color: #16a34a; }   /* matches .golf__team-chip--A */
.golf__lbs-tile--team-b { border-left-color: #7c3aed; }   /* matches .golf__team-chip--B */
.golf__lbs-tile--early  { border-left-color: var(--golf-accent); }  /* fairway green — matches .golf__group-chip--g1 */
.golf__lbs-tile--late   { border-left-color: var(--golf-gold); }    /* goldenrod — matches .golf__group-chip--g2 */

.golf__lbs-tile-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  color: var(--golf-mute);
}

.golf__lbs-tile-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* The cum number flips on the group's collective to-par. Negative =
   under par (good) = green; positive = over par = red; zero (or no
   data yet) = the muted ink so the tile still looks "settled" rather
   than emphasised when the round is even or hasn't started. */
.golf__lbs-tile-score--under { color: #16a34a; }
.golf__lbs-tile-score--over  { color: #b91c1c; }
.golf__lbs-tile-score--even  { color: var(--golf-ink-soft); }

.golf__lbs-tile-thru {
  font-size: 12px;
  color: var(--golf-ink-soft);
  font-variant-numeric: tabular-nums;
}

.golf__lbs-tile-thru--idle {
  color: var(--golf-mute);
  font-style: italic;
}

@media (max-width: 560px) {
  .golf__lbs-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .golf__lbs-tile {
    padding: 8px 10px;
  }
  .golf__lbs-tile-score {
    font-size: 20px;
  }
}

/* ------- Player profile -------
   Public stats page at /golf/player/{id}, linked from every player name
   on the summary leaderboard and the live scorecard. Six sections:
   hero + stat tiles, round-by-round table, scoring distribution chips +
   stacked bar, par-type averages, cumulative net-to-par sparkline,
   and a small "fun extras" pane (streak / toughest hole / birdies+). */

.golf__player-link {
  color: var(--golf-ink);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.golf__player-link:hover,
.golf__player-link:focus {
  color: var(--golf-accent);
  border-bottom-color: var(--golf-accent-soft);
}

.golf__pp-hero-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 5vw, 44px);
  margin: 0;
}

.golf__pp-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.golf__pp-flag--done {
  background: rgba(47, 107, 47, 0.12);
  color: var(--golf-accent);
}

.golf__pp-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.golf__pp-tile {
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 14px 16px;
  position: relative;
}
.golf__pp-tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--golf-mute);
  font-weight: 600;
}
.golf__pp-tile-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.2;
}
.golf__pp-tile-value--bignum { font-size: 32px; font-variant-numeric: tabular-nums; }
.golf__pp-tile-value--money { color: var(--golf-gold); }
.golf__pp-tile-sub {
  font-size: 12px;
  color: var(--golf-ink-soft);
  margin-top: 4px;
}

/* Round-by-round table: best/worst row tinting. Best is a soft fairway
   green that signals "your best card"; worst is a faint warm beige so
   the eye registers it without screaming. */
.golf__pp-rounds td a.golf__player-link { font-weight: 600; }
.golf__pp-row--best { background: rgba(47, 107, 47, 0.08); }
.golf__pp-row--worst { background: rgba(196, 106, 20, 0.07); }
.golf__pp-muted { color: var(--golf-mute); font-style: italic; }

/* 0.11.9: trip-total row in the round-by-round table's <tfoot>. Visual
   separation from the per-round rows uses the same panel-summary
   chrome the rest of the profile leans on: a tinted background, a
   slightly heavier top border, and a touch of font weight. The two
   new "Gross to par" / "Net to par" columns inherit `.golf__num` so
   their digits line up with the per-round rows above. */
.golf__pp-rounds tfoot td { border-top: 2px solid var(--golf-line); }
.golf__pp-rbr-total td {
  background: #f3efe2;
  font-weight: 600;
  color: var(--golf-ink);
}
.golf__pp-rbr-total td.golf__num { font-variant-numeric: tabular-nums; }
.golf__pp-thru {
  font-size: 11px;
  color: var(--golf-mute);
  margin-left: 4px;
}

/* Scoring distribution chips reuse the existing eagle/birdie/par/bogey
   markers so the visual vocabulary is consistent with the scorecard. */
.golf__pp-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.golf__pp-chip {
  background: #faf8f1;
  border-radius: var(--golf-radius-sm);
  padding: 10px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.golf__pp-chip-label {
  font-size: 11px;
  color: var(--golf-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.golf__pp-chip-pct {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  color: var(--golf-ink-soft);
}

.golf__pp-bar {
  display: flex;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--golf-line-soft);
}
.golf__pp-bar-seg { display: block; height: 100%; }
.golf__pp-bar--eagle  { background: #8a1d1d; }
.golf__pp-bar--birdie { background: var(--golf-red); }
.golf__pp-bar--par    { background: var(--golf-accent); }
.golf__pp-bar--bogey  { background: var(--golf-blue); }
.golf__pp-bar--double_bogey_plus { background: #1a3973; }

/* Par-type averages: 3-col card grid with mini horizontal bars. The
   notch sits at par/(2*par) = 50% so it visually centers regardless
   of par class. */
.golf__pp-partypes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.golf__pp-partype {
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 12px 14px;
}
.golf__pp-partype-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.golf__pp-partype-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--golf-accent);
}
.golf__pp-partype-count { font-size: 11px; color: var(--golf-mute); }
.golf__pp-partype-row {
  display: grid;
  grid-template-columns: 44px 1fr 60px;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.golf__pp-partype-key {
  font-size: 11px;
  color: var(--golf-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.golf__pp-partype-val {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.golf__pp-partype-delta {
  text-align: right;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.golf__pp-partype-delta.golf__lbs-tone--under { color: var(--golf-red); }
.golf__pp-partype-delta.golf__lbs-tone--over  { color: var(--golf-blue); }
.golf__pp-partype-delta.golf__lbs-tone--even  { color: var(--golf-ink); }

.golf__pp-partype-bar {
  position: relative;
  height: 8px;
  background: var(--golf-line-soft);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.golf__pp-partype-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--golf-accent-soft), var(--golf-accent));
}
.golf__pp-partype-bar-notch {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--golf-ink-soft);
}

/* Sparkline: pure inline SVG, scales to 100% of its container up to a
   ~560px cap so it doesn't dominate wide desktop columns (the chart
   only carries 2–6 data points and shouldn't out-loom the per-hole
   multi-line chart above it). The line is the accent green; markers
   tint to under/even/over to make trend reading obvious at a glance.
   0.14.11: added max-width cap; pairs with the 3.56:1 viewBox in
   routes._player_profile_view_payload to keep the rendered height
   roughly proportional to the per-hole chart's footprint. */
.golf__pp-sparkline {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin-top: 4px;
}
.golf__pp-sparkline-zero {
  stroke: var(--golf-line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.golf__pp-sparkline-line {
  stroke: var(--golf-accent);
  stroke-width: 2;
  fill: none;
}
.golf__pp-sparkline-pt { stroke: var(--golf-paper); stroke-width: 1.5; }
.golf__pp-sparkline-pt--under { fill: var(--golf-red); }
.golf__pp-sparkline-pt--over  { fill: var(--golf-blue); }
.golf__pp-sparkline-pt--even  { fill: var(--golf-ink); }
.golf__pp-sparkline-label {
  font-size: 10px;
  font-family: inherit;
  fill: var(--golf-ink-soft);
  font-weight: 600;
}
.golf__pp-sparkline-xlabel {
  font-size: 9px;
  font-family: inherit;
  fill: var(--golf-mute);
}

/* Player profile — per-hole net-to-par trend
   ----------------------------------------------------------
   One polyline per round the player has played (colored from
   --golf-rd-1 … --golf-rd-6). Inline SVG, no JS, scales to 100%
   width on phones while keeping its viewBox so axis labels remain
   legible. */
.golf__hole-trend {
  margin-top: 4px;
}
.golf__hole-trend-svg {
  width: 100%;
  height: auto;
  display: block;
  min-height: 180px;
  max-height: 320px;
}
.golf__hole-trend-gridline {
  stroke: var(--golf-line-soft);
  stroke-width: 1;
}
.golf__hole-trend-gridline--zero {
  stroke: var(--golf-line);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.golf__hole-trend-midline {
  stroke: var(--golf-line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.golf__hole-trend-line {
  stroke-width: 2;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.golf__hole-trend-pt {
  stroke: var(--golf-paper);
  stroke-width: 1;
}
.golf__hole-trend-ylabel {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;
  font-size: 10px;
  fill: var(--golf-ink-soft);
}
.golf__hole-trend-xlabel {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;
  font-size: 10px;
  fill: var(--golf-mute);
}
.golf__hole-trend-legend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.golf__hole-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--golf-line);
  border-radius: 999px;
  background: var(--golf-paper);
  font-size: 12px;
  color: var(--golf-ink-soft);
  line-height: 1.2;
}
.golf__hole-trend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.golf__hole-trend-legend-text { color: var(--golf-ink); }
.golf__hole-trend-legend-meta {
  color: var(--golf-mute);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;
  font-size: 11px;
}
.golf__hole-trend--empty {
  padding: 16px;
  background: #faf8f1;
  border-radius: var(--golf-radius);
}
.golf__hole-trend-empty-text {
  margin: 0;
  color: var(--golf-ink-soft);
  font-size: 13px;
}

/* Wide screens: park the legend to the right of the chart so the SVG
   can use full width. Below 760px we fall back to stacked layout. */
@media (min-width: 760px) {
  .golf__hole-trend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    gap: 16px;
    align-items: start;
  }
  .golf__hole-trend-legend {
    margin-top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .golf__hole-trend-legend-item { width: 100%; }
}

/* Fun extras: 3-col grid; on mobile collapses to single column. */
.golf__pp-extras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.golf__pp-extra {
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 12px 14px;
}
.golf__pp-extra-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--golf-mute);
  font-weight: 600;
}
.golf__pp-extra-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.golf__pp-extra-sub {
  font-size: 12px;
  color: var(--golf-ink-soft);
  margin-top: 4px;
}
.golf__pp-extra-birdies {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  font-size: 12px;
}
.golf__pp-birdie-label { color: var(--golf-ink-soft); }

/* ------- Footer ------- */
.golf__footer {
  text-align: center;
  padding: 14px 16px 24px;
  color: var(--golf-mute);
  font-size: 12px;
}

/* ------- Phone tweaks ------- */
@media (max-width: 560px) {
  /* Live leaderboard strip — stack group cards and tighten rows. */
  .golf__lbs-groups {
    grid-template-columns: 1fr;
  }
  .golf__lbs-row {
    /* 0.13.1: same fix as the desktop grid above — the 22px first track
       was sized for `[rank][group-chip]` and the 0.13.0 team chip
       overflowed the cell leftward past the panel's inner edge on
       phones. The mobile 3-piece cluster is ≈58-60px (smaller chip
       max-widths + tighter chip margins below), so 64px gives a few
       px of slack inside the cell with `justify-content: flex-end`
       still anchoring the cluster against the name column. */
    grid-template-columns: 64px 1fr 52px auto;
    gap: 8px;
    font-size: 13px;
    padding: 7px 4px;
  }
  .golf__lbs-score { font-size: 16px; }
  .golf__lbs-thru { font-size: 11px; }
  .golf__lbs-group-num { font-size: 24px; }

  /* Entry-form compaction (Fix 2, 0.10.4) — primary touch surface for
     the trip. Critical: the score input must stay font-size: 16px or
     iOS Safari triggers auto-zoom on focus, which then strands the
     viewport off-center after the keyboard dismisses. */
  .golf__round-hero-title { font-size: 22px; }
  .golf__round-hero-meta { font-size: 12px; }

  .golf__enter-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* 0.13.6: the `grid-template-columns: 1fr` + `gap: 12px` mobile
     overrides were lifted to the default `.golf__enter-grid` rule so
     desktop matches the same vertical rhythm. Only the mobile-only
     deltas remain in this block (full-width card, tighter
     padding/font-size for the inputs and divider). */

  .golf__enter-hole {
    width: 100%;
    max-width: none;
    padding: 10px 12px;
  }
  .golf__enter-hole-num { font-size: 16px; }
  .golf__enter-hole-par { font-size: 11px; margin-bottom: 4px; }

  .golf__enter-input--score {
    min-height: 44px;     /* Apple HIG minimum tap target */
    font-size: 16px;      /* keep ≥16px to prevent iOS auto-zoom */
    padding: 10px 4px;
  }

  .golf__enter-divider { padding: 2px 0; font-size: 11px; }

  .golf__enter-actions {
    flex-direction: column;
    gap: 8px;
  }
  .golf__enter-actions .golf__btn {
    width: 100%;
    text-align: center;
  }

  /* Leaderboard edit actions wrap to keep the button row scannable. */
  .golf__leaderboard-edit-by { width: 100%; }

  /* Live scorecard — markers extend outside cell bounds via negative insets
     (eagle outer ring reaches -7px each side beyond a 22px inner cell), so on
     mobile where neighboring holes are filled the rings collide. Shrink the
     inner cell + tighten insets to keep markers inside their column. */
  .golf__scorecard { font-size: 12px; }
  .golf__sc-cell-inner {
    min-width: 18px;
    height: 18px;
    line-height: 18px;
  }
  .golf__sc--birdie .golf__sc-cell-inner::before,
  .golf__sc--eagle .golf__sc-cell-inner::before,
  .golf__sc--bogey .golf__sc-cell-inner::before,
  .golf__sc--double_bogey_plus .golf__sc-cell-inner::before {
    inset: -1px -2px;
  }
  .golf__sc--eagle .golf__sc-cell-inner::after,
  .golf__sc--double_bogey_plus .golf__sc-cell-inner::after {
    inset: -3px -4px;
  }

  /* Player profile — collapse the 3-col grids to 1-col so the hero
     tiles, chips, par-type cards, and fun-extras read top-to-bottom
     on a phone instead of squeezing into invisibly thin columns. */
  .golf__pp-tiles,
  .golf__pp-partypes,
  .golf__pp-extras {
    grid-template-columns: 1fr;
  }
  .golf__pp-chips {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }
  .golf__pp-chip { padding: 6px 4px; }
  .golf__pp-chip-pct { font-size: 12px; }
  .golf__pp-tile-value--bignum { font-size: 28px; }

  /* Per-hole trend: tighter axis labels + shorter chart on phones. */
  .golf__hole-trend-svg {
    min-height: 180px;
    max-height: 220px;
  }
  .golf__hole-trend-xlabel,
  .golf__hole-trend-ylabel { font-size: 9px; }
  .golf__hole-trend-legend { gap: 6px; }
  .golf__hole-trend-legend-item { font-size: 11px; padding: 3px 8px; }
}

/* Group number chip (1 / 2) shown beside player names on the live
   scorecard + leaderboard strip so users can tell at a glance which
   foursome each player is in. Soft, monochrome-with-accent palette so
   it doesn't compete with the score markers. */
.golf__group-chip {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  margin-right: 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  border: 1px solid transparent;
  vertical-align: middle;
  /* 0.11.6 hard guard: never grow inside a flex/grid parent and never
     accept an inherited width: 100%. The scorecard chip needs more
     room and overrides max-width below; the strip chip stays a tiny
     dot bounded by this 14px ceiling regardless of the layout it
     lands in. */
  flex: 0 0 auto;
  width: auto;
  max-width: 14px;
}

.golf__sc-player .golf__group-chip {
  /* Scorecard chip lives in a wider sticky <td> and keeps the
     pre-0.11.6 sizing freedom. */
  max-width: none;
}

.golf__group-chip--g1 {
  background: rgba(47, 107, 47, 0.12);
  color: var(--golf-accent-dark, #244f24);
  border-color: rgba(47, 107, 47, 0.35);
}

.golf__group-chip--g2 {
  background: rgba(176, 141, 43, 0.14);
  color: #6a541a;
  border-color: rgba(176, 141, 43, 0.4);
}

/* Strip-only override: the live leaderboard strip rows are compact and
   the group chip was visually dominating the [rank] [chip] [name] line.
   Keep the scorecard chip at its normal size (where it reads fine in
   larger cells) and shrink only the chip that appears inside
   .golf__lbs-row so it sits tight against the rank pill.
   0.11.5 pushed it smaller; 0.11.6 fixed the chip stretching across
   the row grid; 0.11.7 bumps the font back to 10px/9px so the 1/2
   digit is clearly readable while the chip stays compact. The
   .golf__lbs-rankcell wrapper added in 0.11.6 has room for an 18px
   chip alongside the rank, so we lift `max-width` to 18px here too
   (overriding the 14px base guard) to prevent the slightly larger
   pill from being clipped. */
.golf__lbs-row .golf__group-chip {
  min-width: 14px;
  height: 14px;
  line-height: 13px;
  padding: 0 3px;
  margin-right: 3px;
  font-size: 10px;
  font-weight: 700;
  border-width: 0;
  opacity: 1;
  max-width: 18px;
}

@media (max-width: 560px) {
  .golf__lbs-row .golf__group-chip {
    min-width: 13px;
    height: 13px;
    line-height: 12px;
    padding: 0 2px;
    margin-right: 2px;
    font-size: 9px;
    font-weight: 700;
    border-width: 0;
    opacity: 1;
  }
}

/* Cumulative net-to-par single-round tile (0.11.5)
   --------------------------------------------------
   One round of data isn't a trend, so the sparkline SVG is suppressed
   in favor of a big-number summary tile that mirrors the hero stat
   tiles' visual rhythm but is laid out inline (value + "· after RD N"
   suffix). The SVG returns once a second round lands. */
.golf__pp-cum-tile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  background: #faf8f1;
  border-radius: var(--golf-radius);
  padding: 16px 20px;
  margin-top: 4px;
}
.golf__pp-cum-tile-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.golf__pp-cum-tile-value.golf__lbs-tone--under { color: var(--golf-red); }
.golf__pp-cum-tile-value.golf__lbs-tone--over  { color: var(--golf-blue); }
.golf__pp-cum-tile-value.golf__lbs-tone--even  { color: var(--golf-ink); }
.golf__pp-cum-tile-sub {
  color: var(--golf-ink-soft);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 500;
}

/* Player-profile view-pane head (0.11.8)
   --------------------------------------------------
   The Scoring distribution card hosts the Gross/Net segmented toggle
   in its head row. The base `.golf__panel-head` is already a wrapping
   flex row, so the pill just needs to be pushed to the far right
   (mirrors how the round-page `.golf__seg` sits at the right of the
   Live scorecard head). On narrow screens the pill drops to its own
   row inside the card head so it stays full-width and the title +
   meta aren't crowded against the chrome. */
.golf__pp-pane-head .golf__pp-view-seg {
  margin-left: auto;
}

@media (max-width: 560px) {
  .golf__pp-pane-head .golf__pp-view-seg {
    margin-left: 0;
    flex-basis: 100%;
    justify-content: stretch;
    width: 100%;
  }
  .golf__pp-pane-head .golf__pp-view-seg .golf__seg-opt {
    flex: 1 1 0;
    text-align: center;
  }
}

/* Round page — per-player to-par-by-hole trend (0.11.11)
   ----------------------------------------------------------
   One smoothed polyline per player who has scored at least one hole
   in the current round, colored from --golf-pl-1 … --golf-pl-8.
   Re-uses the SVG chrome conventions from the player-profile trend:
   soft gridlines, dashed zero line, dashed front/back-nine divider,
   per-point circle markers. Legend chips carry the line's color in
   the swatch + the player's foursome group identity as the chip
   border tint. Inline SVG; no JS, no chart library. */
.golf__rp-trend-body {
  margin-top: 4px;
}
.golf__rp-trend-svg {
  width: 100%;
  height: auto;
  display: block;
  min-height: 180px;
  max-height: 320px;
}
.golf__rp-trend-gridline {
  stroke: var(--golf-line-soft);
  stroke-width: 1;
}
.golf__rp-trend-gridline--zero {
  stroke: var(--golf-line);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.golf__rp-trend-midline {
  stroke: var(--golf-line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.golf__rp-trend-line {
  stroke-width: 2;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.golf__rp-trend-pt {
  stroke: var(--golf-paper);
  stroke-width: 1;
}
.golf__rp-trend-ylabel {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;
  font-size: 10px;
  fill: var(--golf-ink-soft);
}
.golf__rp-trend-xlabel {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;
  font-size: 10px;
  fill: var(--golf-mute);
}
.golf__rp-trend-legend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.golf__rp-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--golf-line);
  border-radius: 999px;
  background: var(--golf-paper);
  font-size: 12px;
  color: var(--golf-ink-soft);
  line-height: 1.2;
}
/* Group identity travels via the legend chip border tint so the line
   color stays the dominant signal. Matches the foursome chip palette
   (early = soft fairway green; late = soft gold). */
.golf__rp-trend-legend-item--g1 {
  border-color: rgba(47, 107, 47, 0.55);
  box-shadow: inset 0 0 0 1px rgba(47, 107, 47, 0.08);
}
.golf__rp-trend-legend-item--g2 {
  border-color: rgba(176, 141, 43, 0.6);
  box-shadow: inset 0 0 0 1px rgba(176, 141, 43, 0.08);
}
.golf__rp-trend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.golf__rp-trend-legend-text {
  color: var(--golf-ink);
  font-weight: 600;
}
.golf__rp-trend-legend-meta {
  color: var(--golf-mute);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular,
               Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap;
}
.golf__rp-trend-empty {
  padding: 16px;
  background: #faf8f1;
  border-radius: var(--golf-radius);
}
.golf__rp-trend-empty-text {
  margin: 0;
  color: var(--golf-ink-soft);
  font-size: 13px;
}

/* Wide screens: park legend chips to the right of the SVG so the
   chart can use full width. Below 760px the legend wraps into a row
   below the chart. */
@media (min-width: 760px) {
  .golf__rp-trend-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    gap: 16px;
    align-items: start;
  }
  .golf__rp-trend-legend {
    margin-top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .golf__rp-trend-legend-item {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .golf__rp-trend-svg {
    min-height: 160px;
  }
  .golf__rp-trend-xlabel,
  .golf__rp-trend-ylabel { font-size: 9px; }
  .golf__rp-trend-legend { gap: 6px; }
  .golf__rp-trend-legend-item {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* ------- 0.11.21: iPhone touch targets -----------------------------
   Quick-add value buttons under each hole input, swipe-friendly hole
   cards, long-press undo pill. Every interactive surface here meets
   the Apple HIG 44×44px minimum tap target on mobile so a finger
   moving fast through 18 holes doesn't mis-tap a neighbour. The
   quick-add buttons are a five-across compact flex row keyed to the
   hole's par (par-1 .. par+3); the numeric label is the absolute
   stroke count (the actual score that gets written into the <input>),
   the muted sub-label is the relative descriptor (Birdie / Par / etc)
   so the user can read either signal at a glance. */
.golf__quick-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  flex-wrap: nowrap;
}

.golf__quick-add-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 2px;
  background: var(--golf-paper);
  border: 1px solid var(--golf-line);
  border-radius: var(--golf-radius-sm);
  color: var(--golf-ink);
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(47, 107, 47, 0.18);
  transition: background 0.08s ease, border-color 0.08s ease,
              transform 0.08s ease;
}

.golf__quick-add-btn:active {
  background: var(--golf-accent-soft);
  border-color: var(--golf-accent);
  transform: scale(0.97);
}

.golf__quick-add-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.golf__quick-add-sub {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--golf-mute);
  text-transform: uppercase;
  font-weight: 500;
}

/* The undo pill is positioned absolutely over the document (the JS
   sets `left` / `top` based on the cell's bounding rect). Lives at a
   high z-index so it stays above the sticky scorecard chrome. */
.golf__undo-pill {
  position: absolute;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--golf-paper);
  border: 1px solid var(--golf-line);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(20, 30, 20, 0.18);
  font-size: 13px;
  color: var(--golf-ink);
  white-space: nowrap;
  animation: golf-undo-pop 0.15s ease-out;
}

@keyframes golf-undo-pop {
  0%   { opacity: 0; transform: translateY(4px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.golf__undo-pill-label {
  color: var(--golf-ink-soft);
  font-weight: 500;
}

.golf__undo-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(47, 107, 47, 0.18);
}

.golf__undo-pill-btn--confirm {
  background: var(--golf-red);
  color: #fff;
}

.golf__undo-pill-btn--confirm:active { background: #8a1d1d; }

.golf__undo-pill-btn--cancel {
  background: transparent;
  color: var(--golf-ink-soft);
  border: 1px solid var(--golf-line);
}

.golf__undo-pill-btn--cancel:active { background: var(--golf-line-soft); }

/* Save scores / picker / quick-add buttons all share the 44×44px
   floor on touch surfaces (Apple HIG). The existing `.golf__btn--big`
   is already comfortably above; the smaller `.golf__btn` and ghost
   variants need the floor explicitly so they don't fall short on
   phones. */
@media (max-width: 560px) {
  .golf__enter-actions .golf__btn,
  .golf__btn--big {
    min-height: 44px;
  }
  .golf__quick-add { gap: 4px; }
  .golf__quick-add-btn {
    min-width: 44px;
    padding: 4px 0;
  }
  .golf__quick-add-num { font-size: 16px; }
  .golf__quick-add-sub { font-size: 9px; }
}

/* iPhone-mini (≤390px) — tighten the quick-add row only. Single-column
   stacking is already in force from the ≤560px block above (0.11.26),
   so the grid/gap declarations that used to live here are redundant
   and were removed. Padding stays slightly tighter at this width so
   the five quick-add buttons + the score input still fit comfortably
   without horizontal scroll. */
@media (max-width: 390px) {
  .golf__enter-hole {
    padding: 8px 10px;
  }
  .golf__quick-add {
    gap: 3px;
  }
  .golf__quick-add-btn {
    min-height: 44px;
    min-width: 40px;
  }
  .golf__quick-add-num { font-size: 18px; }
  .golf__quick-add-sub { font-size: 10px; }
}

/* Round page — trend chart legend isolation (0.11.13).
   Clicking a legend chip drops every other player's path + markers to
   low opacity so the isolated player's line pops. The chip itself
   carries the "active" treatment (ink ring + bold). State persists
   across the 5s HTMX poll via a stable data-trend-key surrogate +
   window-scoped store in base.html. CSS transitions keep the toggle
   smooth (no harsh flips). Dashed zero line, gridlines, x/y labels,
   and the front/back-nine divider stay at full strength regardless,
   because the dim rules only target line / marker / chip. */
.golf__rp-trend-line {
  transition: opacity 120ms ease;
}
.golf__rp-trend-pt {
  transition: opacity 120ms ease;
}
.golf__rp-trend-legend-item {
  cursor: pointer;
  transition: opacity 120ms ease, outline-color 120ms ease;
}
.golf__rp-trend-legend-item:focus-visible {
  outline: 2px solid var(--golf-ink);
  outline-offset: 2px;
}

.golf__rp-trend.is-isolated .golf__rp-trend-line { opacity: 0.15; }
.golf__rp-trend.is-isolated .golf__rp-trend-pt { opacity: 0.15; }
.golf__rp-trend.is-isolated .golf__rp-trend-legend-item { opacity: 0.45; }

/* The active path / marker / chip wins the cascade even while the
   container carries .is-isolated — full opacity on the chosen player. */
.golf__rp-trend.is-isolated .golf__rp-trend-line[data-active="true"],
.golf__rp-trend.is-isolated .golf__rp-trend-pt[data-active="true"],
.golf__rp-trend.is-isolated .golf__rp-trend-legend-item[data-active="true"] {
  opacity: 1;
}

.golf__rp-trend-legend-item[data-active="true"] {
  outline: 1px solid var(--golf-ink);
  outline-offset: 1px;
  border-radius: 999px;
}
.golf__rp-trend-legend-item[data-active="true"] .golf__rp-trend-legend-text {
  font-weight: 700;
}

/* Phase 3 — trip context: weather, notes */

/* Round-page hero strip — 0.11.25 clean text-only header.
   The banner photo background and dark gradient overlay were dropped
   because the course-name text repeated over the photo and read clunky.
   The hero now sits on the same cream/ink palette as the rest of the
   page chrome with a subtle accent left-border so the eye still has an
   anchor at the top of the round page. The `banner_image` field stays
   in constants for future surfaces; the asset files in static/photos/
   stay on disk. */
.golf__round-hero {
  position: relative;
  background: var(--golf-paper);
  color: var(--golf-ink);
  border-left: 3px solid var(--golf-accent);
  border-radius: var(--golf-radius);
  padding: 14px 16px 16px;
  margin-bottom: 18px;
  box-shadow: var(--golf-shadow);
}
.golf__round-hero-back {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 0;
  color: var(--golf-accent);
}
.golf__round-hero-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.golf__round-hero-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Weather chip — one-line forecast pill anchored right of the hero
   text. Frosted-glass white so it reads against either the banner
   photo or the fallback gradient. The chip is purely informational
   (no click target); the `title=` on the wrapper carries the °F
   conversion + wind-mph for users who long-press to inspect. */
.golf__weather-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--golf-ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
  max-width: 100%;
}
.golf__weather-chip-main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.golf__weather-chip-emoji {
  font-size: 16px;
  line-height: 1;
}
.golf__weather-chip-temps {
  font-weight: 600;
}
.golf__weather-chip-sep {
  color: var(--golf-mute);
}
.golf__weather-chip-wind {
  color: var(--golf-ink-soft);
}
.golf__weather-chip-sun {
  color: var(--golf-ink-soft);
}

/* Per-cell note indicator dot — pinned to the top-LEFT corner so it
   never collides with the existing stroke-receive dot in the top-
   RIGHT corner. 6px filled circle in the accent / ink tone with a
   thin white halo so it pops against any cell-style background
   (par / birdie circle / bogey square). The `title=` carries the
   note text so hover (desktop) / long-press (touch) surfaces it. */
.golf__sc-note-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--golf-accent);
  border-radius: 50%;
  pointer-events: auto;
  z-index: 3;
  box-shadow: 0 0 0 1px var(--golf-paper);
  cursor: help;
}

/* Per-hole note expander on the entry form — sits below the
   quick-add row inside each .golf__enter-card. Plain <details> with
   a small toggle so the chrome adds no JS dependency. Open state
   reveals a full-width 140-char text input. Pre-populated when the
   hole already carries a note (the template renders <details open>),
   so the player sees their old note without expanding. */
.golf__enter-note {
  width: 100%;
  margin-top: 8px;
}
.golf__enter-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--golf-accent);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 2px 6px;
  border-radius: var(--golf-radius-sm);
}
.golf__enter-note-toggle::-webkit-details-marker {
  display: none;
}
.golf__enter-note-toggle:hover {
  background: rgba(47, 107, 47, 0.08);
}
.golf__enter-note[open] .golf__enter-note-toggle {
  color: var(--golf-ink-soft);
}
.golf__enter-note-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  border: 1px solid var(--golf-line);
  border-radius: var(--golf-radius-sm);
  background: var(--golf-paper);
  color: var(--golf-ink);
}

/* 0.11.25: the Phase-3 GBP/USD `.golf__currency-seg` segmented pill was
   removed (the trip is locked to USD via the server-side `dollars`
   Jinja filter). The `.golf__money` class + `data-usd` attribute are
   intentionally kept on each money cell as a stable hook. */

/* Phone tweaks for the Phase-3 strip — tighten the hero padding,
   drop the weather chip onto its own row underneath the title so
   it doesn't wrap mid-temperature, and shrink the note dot a hair
   so the cell-corner pin stays visible at the 18px-cell mobile size. */
@media (max-width: 560px) {
  .golf__round-hero {
    padding: 12px 14px 14px;
  }
  .golf__round-hero-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .golf__weather-chip {
    font-size: 12px;
    padding: 5px 10px;
  }
  .golf__weather-chip-emoji { font-size: 14px; }
  .golf__sc-note-dot {
    width: 5px;
    height: 5px;
    top: 1px;
    left: 1px;
  }
}


/* Phase 4 — fun engagement: badges, flame, recap card, skins */

/* Badge accent tokens — pinned to the existing brand palette so the
   chip borders + emoji backgrounds read as a deliberate spectrum, not
   a random pile of colors. Each accent is a CSS custom property; the
   `.golf__pp-badge--<accent>` variant below picks it up via `var()`. */
.golf {
  --golf-accent-green:    #2f6b2f;
  --golf-accent-rose:     #b3344c;
  --golf-accent-sky:      #2a6da4;
  --golf-accent-amber:    #b5811f;
  --golf-accent-emerald:  #1f7a55;
  --golf-accent-orange:   #c45412;
  --golf-accent-indigo:   #4a3a87;
}

/* Player-profile badge ribbon (lives between the tile row and the
   round-by-round table). Flex-wrap so the chips reflow comfortably
   from 4-across desktop to 1-per-row iPhone-portrait without
   overflow. The `is-flame` modifier (used on the HOT_HAND chip on
   the player profile) reuses the same pulse animation as the
   leaderboard-strip flame for visual consistency. */
.golf__pp-badges-panel {
  /* Tighter top margin so the ribbon hugs the tile row above it. */
  margin-top: -8px;
}
.golf__pp-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.golf__pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--golf-paper);
  border: 1.5px solid var(--golf-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--golf-ink);
  line-height: 1.1;
}
.golf__pp-badge-emoji {
  font-size: 16px;
  line-height: 1;
}
.golf__pp-badge-label { white-space: nowrap; }
.golf__pp-badge-meta {
  font-size: 11px;
  color: var(--golf-ink-soft);
  font-weight: 500;
  white-space: nowrap;
}
.golf__pp-badge--accent-green {
  border-color: var(--golf-accent-green);
  color: var(--golf-accent-green);
}
.golf__pp-badge--accent-rose {
  border-color: var(--golf-accent-rose);
  color: var(--golf-accent-rose);
}
.golf__pp-badge--accent-sky {
  border-color: var(--golf-accent-sky);
  color: var(--golf-accent-sky);
}
.golf__pp-badge--accent-amber {
  border-color: var(--golf-accent-amber);
  color: var(--golf-accent-amber);
}
.golf__pp-badge--accent-emerald {
  border-color: var(--golf-accent-emerald);
  color: var(--golf-accent-emerald);
}
.golf__pp-badge--accent-orange {
  border-color: var(--golf-accent-orange);
  color: var(--golf-accent-orange);
}
.golf__pp-badge--accent-indigo {
  border-color: var(--golf-accent-indigo);
  color: var(--golf-accent-indigo);
}
.golf__pp-badges-empty {
  margin: 0;
  font-size: 13px;
  color: var(--golf-ink-soft);
  font-style: italic;
}

/* Leaderboard-strip flame (HOT_HAND). Sits inside the .golf__lbs-rankcell
   wrapper so it shares the same grid cell as the rank + group chip
   without breaking the row's 4-column grid layout. The gentle pulse
   uses transform + opacity (cheap), and respects
   `prefers-reduced-motion: reduce` for users who have asked for
   stillness. */
.golf__lbs-flame {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
  animation: golf-flame-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes golf-flame-pulse {
  0%, 100% { transform: scale(1);     opacity: 0.9; }
  50%      { transform: scale(1.16);  opacity: 1.0; }
}
@media (prefers-reduced-motion: reduce) {
  .golf__lbs-flame {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* Recap card — square frame with a big hero number, 2x2 tile grid,
   and a Share button up top. `max-width: 1080px; aspect-ratio: 1/1`
   keeps the screenshot crop clean on iPhone-portrait Safari (long-
   press inside the card -> Copy -> paste into iMessage). The frame
   sits in a centered column so the rest of the page chrome doesn't
   leak into the screenshot. */
.golf__recap-frame {
  max-width: 1080px;
  margin: 16px auto;
  padding: 0 12px;
}
.golf__recap-card {
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 32px 36px;
  background:
    linear-gradient(160deg,
      var(--golf-cream) 0%,
      #fdfaf0 60%,
      var(--golf-cream) 100%);
  border: 2px solid var(--golf-line);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.golf__recap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.golf__recap-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.golf__recap-monogram {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--golf-accent-green);
  border: 2px solid var(--golf-accent-green);
  border-radius: 10px;
  padding: 4px 8px;
  line-height: 1;
}
.golf__recap-title {
  font-family: "Fraunces", serif;
  font-size: clamp(20px, 3vw, 28px);
  margin: 0;
  color: var(--golf-ink);
  font-weight: 600;
}
.golf__recap-date {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--golf-ink-soft);
  font-variant-numeric: tabular-nums;
}
.golf__recap-share {
  align-self: flex-start;
}
.golf__recap-hero {
  text-align: center;
  padding: 18px 0 14px;
  border-top: 1px dashed var(--golf-line);
  border-bottom: 1px dashed var(--golf-line);
  background: rgba(245, 200, 60, 0.07);
}
.golf__recap-hero--empty { color: var(--golf-ink-soft); }
.golf__recap-hero-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--golf-ink-soft);
}
.golf__recap-hero-number {
  font-family: "Fraunces", serif;
  font-size: clamp(64px, 12vw, 112px);
  line-height: 1;
  color: var(--golf-accent-green);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 6px 0 8px;
}
.golf__recap-hero-name {
  font-size: clamp(20px, 3vw, 28px);
  color: var(--golf-gold, var(--golf-accent-amber));
  font-weight: 600;
}
.golf__recap-hero-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--golf-ink-soft);
}
.golf__recap-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1 1 auto;
}
.golf__recap-tile {
  background: var(--golf-paper);
  border: 1px solid var(--golf-line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.golf__recap-tile-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--golf-ink-soft);
}
.golf__recap-tile-value {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--golf-ink);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.golf__recap-tile-value--small {
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.25;
  font-weight: 500;
}
.golf__recap-tile-sub {
  font-size: 12px;
  color: var(--golf-ink-soft);
}
.golf__recap-tile--fun {
  grid-column: 1 / span 2;
  background: rgba(47, 107, 47, 0.06);
  border-color: rgba(47, 107, 47, 0.30);
}
.golf__recap-weather {
  font-size: 12px;
  color: var(--golf-ink-soft);
  text-align: center;
}
.golf__recap-footer {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--golf-ink-soft);
  text-align: center;
  padding-top: 6px;
  border-top: 1px solid var(--golf-line);
}
.golf__recap-back-row {
  margin: 16px 0 24px;
  text-align: center;
}
.golf__recap-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: var(--golf-ink);
  color: var(--golf-cream);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 9999;
}
.golf__recap-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 560px) {
  .golf__recap-card {
    padding: 20px 18px;
    border-radius: 16px;
    aspect-ratio: auto;
    min-height: 95vw;
  }
  .golf__recap-tile { padding: 10px 12px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .golf__recap-toast { transition: none; }
}

/* Skins page — clean tabular layout, with a soft highlight on the
   winning row + a subtle muted background on carryover rows so the
   eye lands on the action. The explainer chip up top mirrors the
   `.golf__weather-chip` chrome from Phase 3 for visual consistency. */
.golf__skins-chip {
  display: inline-block;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(47, 107, 47, 0.08);
  border: 1px solid rgba(47, 107, 47, 0.30);
  font-size: 13px;
  color: var(--golf-ink);
}
.golf__skins-table tbody tr.golf__skins-row--won {
  background: rgba(245, 200, 60, 0.12);
}
.golf__skins-table tbody tr.golf__skins-row--carry {
  background: rgba(0, 0, 0, 0.025);
  color: var(--golf-ink-soft);
}
.golf__skins-winner {
  font-weight: 600;
}
.golf__skins-carry-label {
  font-style: italic;
  font-size: 12px;
  color: var(--golf-ink-soft);
}
.golf__skins-pp-table tbody tr td:first-child {
  font-weight: 500;
}

/* Summary page Latest-recap line + Skins nav button. */
.golf__hero-nav {
  margin: 8px 0 0;
}
.golf__summary-recap-panel .golf__panel-head .golf__btn--inline {
  margin-left: auto;
}
.golf__summary-recap-line {
  margin: 0;
  font-size: 14px;
  color: var(--golf-ink);
}

/* Phase 5 — sticky you strip, share toast, caddie tip, next-round link */

/* Sticky strip pinned to the top of the viewport on every full-page
   golf render. Server-side rendered from base.html (gated on the
   encc_player_id cookie); base.html's inline JS toggles
   .is-collapsed on scroll-down/up. Transitions are skipped entirely
   when the user has prefers-reduced-motion: reduce. */
.golf__strip-you {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--golf-paper);
  color: var(--golf-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border-bottom: 1px solid var(--golf-line);
  box-shadow: 0 1px 3px rgba(20, 30, 20, 0.08);
  width: 100%;
  transition: max-height 200ms ease, padding 200ms ease,
              opacity 200ms ease;
  max-height: 60px;
  overflow: hidden;
}
.golf__strip-you.is-collapsed {
  max-height: 6px;
  padding-top: 0;
  padding-bottom: 0;
}
.golf__strip-you.is-collapsed > :not(.golf__strip-you-dot) {
  opacity: 0;
  pointer-events: none;
}
.golf__strip-you-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--golf-strip-color, var(--golf-accent));
  flex-shrink: 0;
}
.golf__strip-you-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
}
.golf__strip-you-sep {
  color: var(--golf-mute);
  font-weight: 400;
}
.golf__strip-you-net,
.golf__strip-you-rank {
  font-variant-numeric: tabular-nums;
}
.golf__strip-you-share {
  margin-left: auto;
  text-decoration: none;
  background: var(--golf-accent);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.golf__strip-you-share:hover {
  background: #275a26;
}

@media (prefers-reduced-motion: reduce) {
  .golf__strip-you {
    transition: none;
  }
}

/* Toast (golfToast) — centered near the bottom of the viewport
   above the safe area. Used by the clipboard fallback in golfShare
   and any future short status messages. */
.golf__toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translate(-50%, 8px);
  z-index: 200;
  background: rgba(20, 30, 20, 0.92);
  color: #fff;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 30, 20, 0.30);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  max-width: calc(100% - 32px);
  text-align: center;
}
.golf__toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .golf__toast {
    transition: none;
  }
}

/* Generic share button styling — used on the player profile hero and
   any future "Share my round" surface. The recap-card share button
   keeps its own .golf__recap-share styling (Phase 4) so the card's
   chrome stays self-contained. */
.golf__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--golf-accent);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.golf__share-btn:hover {
  background: #275a26;
}
.golf__pp-share-btn {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* 0.11.25: the .golf__tip-widget* (caddie tip calculator) and
   .golf__next-round* (next-round driving-directions card) rule
   blocks were removed. Both UI surfaces were dropped from
   round.html in 0.11.25. */

/* Phone-size tweaks under 560px so the sticky strip stays unobtrusive
   on iPhone-portrait. */
@media (max-width: 560px) {
  .golf__strip-you {
    font-size: 12px;
    padding: 6px 10px;
    gap: 8px;
  }
  .golf__strip-you-share {
    padding: 3px 8px;
    font-size: 11px;
  }
  .golf__pp-share-btn {
    top: 10px;
    right: 10px;
    font-size: 12px;
    padding: 4px 10px;
  }
}

/* 0.11.25: inline daily recap card on /golf/round/{n}. Same data as
   the standalone shareable 1080x1080 card at /golf/recap/{n} (which
   stays live), but laid out as a normal-width `.golf__panel`-style
   tile grid that fits inline at the bottom of the round page. The
   tiles wrap to a single column on phones; the panel reuses the
   shared panel-head + .golf__share-btn chrome so the share button
   delegates to the global `golfShare(...)` helper in base.html. */
.golf__recap-inline {
  margin-top: 18px;
}
.golf__recap-inline-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.golf__recap-inline-tile {
  background: rgba(47, 107, 47, 0.06);
  border-radius: var(--golf-radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.golf__recap-inline-tile-label {
  font-size: 11px;
  color: var(--golf-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.golf__recap-inline-tile-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.golf__recap-inline-tile-value--small {
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.3;
}
.golf__recap-inline-tile-sub {
  font-size: 12px;
  color: var(--golf-ink-soft);
}
.golf__recap-inline-tile--fun {
  grid-column: span 3;
}
@media (max-width: 560px) {
  .golf__recap-inline-tiles {
    grid-template-columns: 1fr 1fr;
  }
  .golf__recap-inline-tile--fun {
    grid-column: span 2;
  }
}

/* === 0.13.0: Team A / Team B overlay ================================== */

/* Round letter-only badge. Mirrors `.golf__group-chip` sizing so the
   two chips can sit side-by-side without one dominating the row, but
   the team chip uses a saturated solid-color fill so the eye reads
   the constant team membership apart from the rotating Early/Late
   group foursome chip at a glance. The chip itself is the same 16×16 round
   pill the foursome chip uses; A/B coloring is a fairway-green /
   heather-purple split — distinct from the existing G1 = green soft
   and G2 = goldenrod soft palette. */
.golf__team-chip {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 999px;
  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0;
  border: 1px solid transparent;
  vertical-align: middle;
  color: #fff;
  flex: 0 0 auto;
  width: auto;
  max-width: 22px;
}

.golf__team-chip--A {
  /* Fairway green - saturated, distinct from the soft G1 sage. */
  background: #16a34a;
  border-color: #14823b;
}

.golf__team-chip--B {
  /* Heather purple - sits cleanly against the cream + goldenrod
     palette without clashing with the existing under/over tones. */
  background: #7c3aed;
  border-color: #5b21b6;
}

/* When the team chip lives in a leaderboard strip row it shares the
   .golf__lbs-rankcell wrapper with the group chip. Tighten the
   sizing so two chips + the rank don't overflow the rank cell. */
.golf__lbs-row .golf__team-chip {
  min-width: 14px;
  height: 14px;
  line-height: 13px;
  padding: 0 3px;
  margin-left: 3px;
  font-size: 9px;
  max-width: 18px;
}

@media (max-width: 560px) {
  .golf__lbs-row .golf__team-chip {
    min-width: 13px;
    height: 13px;
    line-height: 12px;
    padding: 0 2px;
    margin-left: 2px;
    font-size: 9px;
  }
}

/* Sticky scorecard player cell — the existing .golf__sc-player gets a
   pair of chips (group + team). Drop the max-width cap so the chips
   render at full size, matching the per-row group chip already
   bumped in 0.11.6.

   0.13.3: the base `.golf__team-chip` rule only sets `margin-left`,
   which left the A/B chip glued to the first letter of the player
   name on the live scorecard rows ("AJohnson"). The leaderboard
   strip (`.golf__lbs-row`) and the summary/round leaderboards have
   their own wrappers and didn't suffer from this. Override both
   margins inside `.golf__sc-player` so the chip lands roughly
   centered between the group chip / cell edge and the player name
   with ~8px breathing room on each side (5px on narrow screens). */
.golf__sc-player .golf__team-chip {
  max-width: none;
  margin-left: 8px;
  margin-right: 8px;
}

@media (max-width: 560px) {
  .golf__sc-player .golf__team-chip {
    margin-left: 5px;
    margin-right: 5px;
  }
}

/* Team leaderboard panel ---------------------------------------------- */
.golf__team-leaderboard-panel .golf__panel-meta {
  color: var(--golf-ink-soft);
}

.golf__team-leaderboard th,
.golf__team-leaderboard td {
  vertical-align: middle;
}

.golf__team-row-members {
  margin-left: 8px;
  color: var(--golf-ink-soft);
  font-size: 13px;
  font-weight: 500;
}

.golf__team-row--leader .golf__team-total {
  background: rgba(22, 163, 74, 0.10);
  border-radius: 6px;
}

.golf__team-total--leader strong {
  color: #166534;
}

.golf__team-lead {
  font-size: 13px;
  color: var(--golf-ink-soft);
  font-style: italic;
}

.golf__team-row--leader .golf__team-lead {
  color: #166534;
  font-style: normal;
  font-weight: 600;
}

.golf__team-cell--partial {
  font-style: italic;
  color: var(--golf-ink-soft);
}
.golf__team-cell--partial .golf__pp-thru {
  display: block;
  font-size: 10px;
  color: var(--golf-ink-soft);
  font-style: italic;
}

.golf__team-strapline {
  margin: 14px 4px 4px;
  color: var(--golf-ink-soft);
  font-size: 13px;
  line-height: 1.5;
}
.golf__team-strapline-projection {
  color: var(--golf-ink);
  font-weight: 600;
}

/* Player-profile "Holes owned" extremes strip --------------------------- */
.golf__pp-extremes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.golf__pp-extreme {
  appearance: none;
  background: #faf8f1;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--golf-radius);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.05s ease;
}
.golf__pp-extreme:hover {
  background: #f3efe2;
  border-color: rgba(0, 0, 0, 0.12);
}
.golf__pp-extreme:active { transform: translateY(1px); }

.golf__pp-extreme-label {
  font-size: 12px;
  color: var(--golf-ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.golf__pp-extreme-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.golf__pp-extreme--best .golf__pp-extreme-value,
.golf__pp-extreme--best_tied .golf__pp-extreme-value {
  color: #166534;
}
.golf__pp-extreme--worst .golf__pp-extreme-value,
.golf__pp-extreme--worst_tied .golf__pp-extreme-value {
  color: #991b1b;
}

@media (max-width: 560px) {
  .golf__pp-extremes {
    grid-template-columns: 1fr 1fr;
  }
}

.golf__pp-extremes-drill {
  margin-top: 14px;
}

.golf__pp-extremes-hint {
  color: var(--golf-ink-soft);
  font-size: 13px;
  font-style: italic;
  margin: 0;
}

.golf__pp-extremes-drill-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  margin: 8px 0 12px;
}
.golf__pp-extremes-drill-count {
  font-size: 13px;
  color: var(--golf-ink-soft);
  font-weight: 400;
}

.golf__pp-extremes-empty {
  color: var(--golf-ink-soft);
  font-style: italic;
  margin: 6px 0 0;
}

.golf__pp-extremes-group {
  margin-top: 12px;
}
.golf__pp-extremes-group-head {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.golf__pp-extremes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.golf__pp-extremes-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(110px, auto) auto;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.golf__pp-extremes-row:last-child { border-bottom: 0; }

.golf__pp-extremes-hole { color: var(--golf-ink); }
.golf__pp-extremes-par { color: var(--golf-ink-soft); font-size: 12px; }

.golf__pp-extremes-score {
  font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
  font-weight: 600;
}
.golf__pp-extremes-net {
  color: var(--golf-ink-soft);
  font-weight: 400;
  font-size: 12px;
}

.golf__pp-extremes-tied {
  grid-column: 1 / -1;
  color: var(--golf-ink-soft);
  font-size: 12px;
  font-style: italic;
  padding-left: 8px;
}

@media (max-width: 560px) {
  .golf__pp-extremes-row {
    grid-template-columns: 1fr auto;
  }
}

/* ---------- 0.14.0: Lost balls (entry card + summary panel + player one-liner) -------- */

/* Entry-form card. Stacks below the per-hole grid with a thin top
   rule so a glance separates "score the hole" from "report a lost
   ball". Reuses the per-hole `.golf__enter-saveform` lifecycle so
   the dirty / saving / saved button state mirrors the hole rows. */
.golf__enter-lostballs {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--golf-line);
  background: #faf8f1;
  border-radius: var(--golf-radius-sm);
  padding: 14px 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.golf__enter-lostballs-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.golf__enter-lostballs-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--golf-accent);
}

.golf__enter-lostballs-sub {
  font-size: 12px;
  color: var(--golf-mute);
}

.golf__enter-lostballs-form {
  display: grid;
  grid-template-columns: 80px auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.golf__enter-lostballs-input {
  width: 80px;
  height: 44px;
  padding: 6px 8px;
  font-size: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--golf-line);
  border-radius: var(--golf-radius-sm);
  background: #fff;
}

@media (max-width: 640px) {
  .golf__enter-lostballs-form {
    grid-template-columns: 72px 80px 1fr;
  }
  .golf__enter-lostballs-input {
    width: 72px;
    font-size: 16px;
  }
}

/* Summary "Lost balls" panel — mirrors the leaderboard table styling
   so the eye doesn't have to relearn a new layout. The "—" cell uses
   a muted color so empty rounds visually retreat. */
.golf__lostballs-table {
  width: 100%;
  min-width: 360px;
}

.golf__lostballs-total {
  border-left: 1px solid var(--golf-line);
  padding-left: 14px;
  font-weight: 600;
}

.golf__lostballs-empty {
  color: var(--golf-mute);
}

.golf__lostballs-row--most td {
  background: rgba(176, 92, 43, 0.06);
}
.golf__lostballs-row--clean td {
  background: rgba(47, 107, 47, 0.06);
}

.golf__lostballs-callouts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.golf__lostballs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 6px;
}

.golf__lostballs-chip--most {
  background: rgba(176, 92, 43, 0.14);
  color: #8a4a1e;
  border: 1px solid rgba(176, 92, 43, 0.28);
}

.golf__lostballs-chip--clean {
  background: rgba(47, 107, 47, 0.12);
  color: #2f6b2f;
  border: 1px solid rgba(47, 107, 47, 0.28);
}

/* Player-profile one-liner stat. Sits inside the existing badge
   ribbon panel. Single horizontal line with a subtle separator above
   it (border-top) when badges are present so it reads as a related-
   but-distinct stat. */
.golf__pp-lostballs-line {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--golf-line-soft);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}

.golf__pp-lostballs-label {
  color: var(--golf-ink-soft);
  font-weight: 600;
}

.golf__pp-lostballs-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--golf-ink);
  font-variant-numeric: tabular-nums;
}

.golf__pp-lostballs-meta {
  color: var(--golf-mute);
  font-size: 12px;
}

.golf__pp-lostballs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}

.golf__pp-lostballs-chip--most {
  background: rgba(176, 92, 43, 0.14);
  color: #8a4a1e;
  border: 1px solid rgba(176, 92, 43, 0.28);
}

.golf__pp-lostballs-chip--clean {
  background: rgba(47, 107, 47, 0.12);
  color: #2f6b2f;
  border: 1px solid rgba(47, 107, 47, 0.28);
}