/* ============================================================
   Fairway — Material 3 design tokens

   Every color role below is generated (not hand-picked) from one seed —
   Fairway's own brand green, #1f4d3a — run through Google's actual M3
   color algorithm (Material Color Utilities, HCT color space, TonalSpot
   scheme, standard contrast). Primary/secondary/tertiary/error and every
   surface/outline tone are the real output of that algorithm for both
   light and dark. Sand, sky, bogey, and double stay as their own
   hand-set "extended" colors on top of the scheme — they're semantic
   (a warning highlight, a location pin, scorecard conventions), not
   brand color, and M3 explicitly leaves room for exactly that alongside
   the generated roles rather than forcing every accent through them.
   ============================================================ */

:root {
  /* --- color: core M3 roles (light) --- */
  --color-bg: #f5fbf5; /* surface */
  --color-surface: #eaefea; /* surfaceContainer — cards sit a tone up from the page */
  --color-surface-low: #eff5ef; /* surfaceContainerLow — recessed areas, text field fill */
  --color-surface-high: #e4eae4; /* surfaceContainerHigh — nested emphasis (sheet headers, active rail pill) */
  --color-surface-highest: #dee4de; /* surfaceContainerHighest — highest-emphasis container */
  --color-ink: #171d1a; /* onSurface */
  --color-ink-muted: #404943; /* onSurfaceVariant */
  --color-line: #bfc9c2; /* outlineVariant — hairlines */
  --color-outline: #707973; /* outline — stronger borders (unfilled inputs, dividers) */

  --color-fairway: #1f6a4e; /* primary */
  --color-on-fairway: #ffffff; /* onPrimary */
  --color-fairway-container: #a8f2ce; /* primaryContainer */
  --color-on-fairway-container: #005138; /* onPrimaryContainer */

  --color-secondary: #4d6357;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #cfe9d9;
  --color-on-secondary-container: #354b40;

  --color-tertiary: #3d6373;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #c1e8fb;
  --color-on-tertiary-container: #244c5b;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-inverse-surface: #2c322e;
  --color-inverse-on-surface: #edf2ec;
  --color-inverse-primary: #8dd5b3;
  --color-scrim: #000000;

  /* --- color: extended (hand-set, not algorithmic — see banner above) --- */
  --color-sand: #b99a63;
  --color-bogey: #9c4b2c;
  --color-double: #74331f;

  /* --- shape scale (official M3 corner radii) --- */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* --- elevation (official M3 two-layer shadow tokens: a tight "key"
     shadow at 30% opacity + a broad "ambient" shadow at 15%, both pure
     black — this is what makes M3 elevation read consistently whether
     the surface under it is light or dark) --- */
  --elevation-0: none;
  --elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elevation-3: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --elevation-3-up: 0px -1px 3px rgba(0, 0, 0, 0.3), 0px -4px 8px 3px rgba(0, 0, 0, 0.15); /* sheets sliding up from the bottom edge */
  --elevation-4: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --shadow-card: var(--elevation-1); /* Elevated Card / Elevated Button, per M3 */

  /* --- state layers (official M3 opacities — hover/focus/press overlays
     use currentColor at these opacities, see .m3-ripple and the shared
     interactive-surface rule near the bottom of this file) --- */
  --state-hover: 0.08;
  --state-focus: 0.12;
  --state-press: 0.12;

  /* --- type (Roboto is THE Material typeface; scores stay in mono —
     a scorecard convention, not branding, kept from every prior pass) --- */
  --font-display: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* --- motion --- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);

  /* --- layout --- */
  --header-height: 56px;
  --rail-width: 88px;
  --content-max: 480px; /* compact (phone) column width — see the responsive section for medium/expanded */
}

[data-theme='dark'] {
  --color-bg: #0f1512;
  --color-surface: #1b211e;
  --color-surface-low: #171d1a;
  --color-surface-high: #252b28;
  --color-surface-highest: #303632;
  --color-ink: #dee4de;
  --color-ink-muted: #bfc9c2;
  --color-line: #404943;
  --color-outline: #8a938c;

  --color-fairway: #8dd5b3;
  --color-on-fairway: #003826;
  --color-fairway-container: #005138;
  --color-on-fairway-container: #a8f2ce;

  --color-secondary: #b3ccbe;
  --color-on-secondary: #1f352a;
  --color-secondary-container: #354b40;
  --color-on-secondary-container: #cfe9d9;

  --color-tertiary: #a5ccdf;
  --color-on-tertiary: #073543;
  --color-tertiary-container: #244c5b;
  --color-on-tertiary-container: #c1e8fb;

  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  --color-inverse-surface: #dee4de;
  --color-inverse-on-surface: #2c322e;
  --color-inverse-primary: #1f6a4e;

  --color-sand: #c7a876;
  --color-bogey: #c97a54;
  --color-double: #de9877;
}

/* ============================================================
   Reset & base
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--color-fairway);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-link {
  color: var(--color-fairway);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   State layers & ripple (M3's hover/focus/press language)

   Applied to the same set of interactive classes js/ripple.js delegates
   ripple-spawning to (see RIPPLE_SELECTOR there) — a shared ::after
   overlay handles the static hover/focus wash, js/ripple.js's spawned
   .m3-ripple span handles the animated press circle. Mouse-only (hover
   is meaningless on touch, and this app now runs on real pointer
   devices at tablet/desktop widths too).
   ============================================================ */

.btn,
.tile,
.icon-btn,
.segment-btn,
.settings-row,
.course-card,
.score-row,
.list-row,
.strip-cell,
.stepper-btn,
.par-confirm-btn,
.track-shot-btn,
.text-btn,
.nav-rail-item,
.club-chip,
.club-row-summary,
.hero-price-details-btn,
.hero-book-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn::after,
.tile::after,
.icon-btn::after,
.segment-btn::after,
.settings-row::after,
.course-card::after,
.score-row::after,
.list-row::after,
.strip-cell::after,
.stepper-btn::after,
.par-confirm-btn::after,
.track-shot-btn::after,
.text-btn::after,
.nav-rail-item::after,
.club-chip::after::after,
.club-row-summary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after,
  .tile:hover::after,
  .icon-btn:hover::after,
  .segment-btn:hover::after,
  .settings-row:hover::after,
  .course-card:hover::after,
  .score-row:hover::after,
  .list-row:hover::after,
  .strip-cell:hover::after,
  .stepper-btn:hover::after,
  .par-confirm-btn:hover::after,
  .track-shot-btn:hover::after,
  .text-btn:hover::after,
  .nav-rail-item:hover::after,
  .club-chip:hover::after,
  .club-row-summary:hover::after {
    opacity: var(--state-hover);
  }
}

.btn:focus-visible::after,
.tile:focus-visible::after,
.icon-btn:focus-visible::after,
.segment-btn:focus-visible::after,
.settings-row:focus-visible::after,
.course-card:focus-visible::after,
.score-row:focus-visible::after,
.list-row:focus-visible::after,
.strip-cell:focus-visible::after,
.stepper-btn:focus-visible::after,
.par-confirm-btn:focus-visible::after,
.track-shot-btn:focus-visible::after,
.text-btn:focus-visible::after,
.nav-rail-item:focus-visible::after,
.club-chip:focus-visible::after:focus-visible::after,
.club-row-summary:focus-visible::after {
  opacity: var(--state-focus);
}

.m3-ripple-host {
  position: relative;
}

.m3-ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: var(--state-press);
  pointer-events: none;
  transform: scale(0);
  animation: m3-ripple-expand 420ms var(--ease-standard) forwards;
}

@keyframes m3-ripple-expand {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* Every one of the interactive classes above needs its real content
   lifted above the ::after overlay + ripple (both z-index: 0). */
.btn > *,
.tile > *,
.icon-btn > *,
.segment-btn,
.hero-eyebrow,
.hero-course,
.hero-price-row,
.hero-cta {
  position: relative;
  z-index: 1;
}

/* ============================================================
   App frame: nav rail (medium/expanded) + app shell
   Compact (phone, <600px): no rail at all — the tile-stack home screen
   IS the primary navigation there, same as before. Medium/expanded
   widths get a persistent M3 navigation rail; see the responsive
   section at the end of this file for exactly where it switches on.
   ============================================================ */

.app-frame {
  display: flex;
  min-height: 100vh;
}

.nav-rail {
  display: none; /* switched on at medium+ widths — see responsive section */
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: var(--rail-width);
  flex-shrink: 0;
  padding: 20px 8px;
  background: var(--color-bg);
  border-right: 1px solid var(--color-line);
}

/* Higher specificity than the bare .wordmark rule below (which the rail
   wordmark also carries) — this is a deliberate override, not a race
   against source order. */
.nav-rail .wordmark {
  font-size: 16px;
  margin-bottom: 20px;
}

.nav-rail-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.nav-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 8px;
  border-radius: var(--shape-lg);
  color: var(--color-ink-muted);
  cursor: pointer;
}

.nav-rail-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 32px;
  border-radius: var(--shape-full);
  transition: background-color 0.18s var(--ease-standard);
}

.nav-rail-item.is-active .nav-rail-icon {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.nav-rail-item.is-active {
  color: var(--color-ink);
}

.nav-rail-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.app-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  background: var(--color-bg);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fairway);
}

.header-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 500; /* M3 Title Large */
}

.header-spacer {
  width: 36px;
}

.header-action-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: var(--color-fairway);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: right;
}

.header-action-btn:active {
  opacity: 0.6;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--color-ink);
  border-radius: var(--shape-full);
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s var(--ease-standard);
}

.icon-btn:active {
  transform: scale(0.92);
}

.back-btn {
  color: var(--color-ink);
}

.view-outlet {
  flex: 1;
  padding: 20px 20px 40px;
}

/* ============================================================
   Panels & generic layout
   ============================================================ */

.panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-header h2 {
  font-size: 22px;
  line-height: 28px;
}

.empty-state {
  color: var(--color-ink-muted);
  text-align: center;
  padding: 48px 12px;
  line-height: 1.6;
}

.empty-state a {
  color: var(--color-fairway);
  font-weight: 600;
}

/* ============================================================
   Buttons — M3 Filled (primary), Elevated (secondary), Text
   Pill-shaped per M3's default button shape; primary relies on solid
   color alone (elevation 0), secondary keeps a soft shadow (that's the
   M3 "Elevated Button" variant — surface-tone fill + elevation-1).
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--shape-full);
  border: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s var(--ease-standard), opacity 0.12s var(--ease-standard);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-fairway);
  color: var(--color-on-fairway);
}

.btn-secondary {
  background: var(--color-surface-low);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
}

.btn-secondary[disabled] {
  opacity: 0.4;
  cursor: default;
}

.btn-block {
  width: 100%;
}

/* ============================================================
   Home screen — tile stack
   ============================================================ */

.tile-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tile {
  display: flex;
  border-radius: var(--shape-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.12s var(--ease-standard);
}

.tile:active {
  transform: scale(0.98);
}

/* --- Tile 1: hero round tile. A non-interactive satellite snapshot of
   the relevant course sits behind the text (js/views/home.js mounts it
   into .tile-map); ::before layers a scrim above the map so text stays
   legible regardless of what's underneath, and a flat gradient shows
   through on its own when no course location is known yet. --- */

.tile--hero {
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-height: 200px;
  padding: 20px;
  color: #f4f3ec;
  background: linear-gradient(160deg, #1c3d2e 0%, #14251c 55%, #0e1712 100%);
}

.tile-map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tile--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(180deg, rgba(14, 23, 18, 0.1) 0%, rgba(14, 23, 18, 0.35) 55%, rgba(14, 23, 18, 0.85) 100%),
    radial-gradient(circle at 78% 22%, rgba(141, 213, 179, 0.25), transparent 45%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 26px);
}

.tile--hero-empty {
  background: linear-gradient(160deg, #2a2c28 0%, #17181a 100%);
}

/* Fills the whole tile as an invisible tap target — kept separate from
   the directions/booking buttons below so they don't fight over clicks
   (an <a>/<button> nested inside another <a> is invalid HTML and
   behaves inconsistently, so they're siblings instead, stacked above). */
.tile-primary-link {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.directions-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--shape-full);
  background: color-mix(in srgb, #0e1712 55%, transparent);
  backdrop-filter: blur(6px);
  color: #f4f3ec;
  transition: transform 0.12s var(--ease-standard);
}

.directions-btn:active {
  transform: scale(0.9);
}

.weather-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--shape-full);
  background: color-mix(in srgb, #0e1712 55%, transparent);
  backdrop-filter: blur(6px);
  color: #f4f3ec;
  font-size: 12px;
  font-weight: 600;
}

.hero-eyebrow {
  position: relative;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.hero-course {
  position: relative;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600; /* M3 Headline Small, weighted up for legibility over a photo */
  margin: 2px 0 0;
}

.hero-price-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
}

.hero-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #f4f3ec;
}

.hero-price--yoc {
  color: #c1e8fb; /* tertiary-container-ish tint, reads as a distinct highlight from the plain price */
}

.hero-price-details-btn,
.hero-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(244, 243, 236, 0.45);
  border-radius: var(--shape-full);
  padding: 4px 12px;
  background: color-mix(in srgb, #0e1712 35%, transparent);
  color: #f4f3ec;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.hero-cta {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  color: #8dd5b3;
}

/* --- Tile 2: stats summary --- */

.tile--stats {
  background: var(--color-surface);
  padding: 18px;
}

.mini-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 12px;
  width: 100%;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mini-stat-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
}

.mini-stat-label {
  font-size: 11px;
  color: var(--color-ink-muted);
  text-align: center;
}

.stats-tile-empty {
  color: var(--color-ink-muted);
  font-size: 14px;
  padding: 8px 2px;
}

/* --- Tile 3: clubs/bags preview --- */

.tile--bags {
  background: var(--color-surface);
  padding: 18px 20px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.bags-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bags-tile-label {
  font-weight: 700;
  font-size: 15px;
}

.bags-tile-chevron {
  color: var(--color-ink-muted);
  display: inline-flex;
}

.bags-tile-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bags-tile-bag {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bags-tile-bag-name {
  font-weight: 600;
  font-size: 13px;
}

.bags-tile-bag-clubs {
  font-size: 12px;
  color: var(--color-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Tile 4: settings --- */

.tile--settings {
  background: var(--color-surface);
  padding: 18px 20px;
  align-items: center;
  justify-content: space-between;
}

.settings-tile-label {
  font-weight: 700;
  font-size: 15px;
}

.settings-tile-chevron {
  color: var(--color-ink-muted);
  display: inline-flex;
}

/* ============================================================
   Bottom sheet (shared: club picker in views/play.js, price details
   in views/home.js) — a scrim + a panel that slides up from the
   bottom edge, top corners only.
   ============================================================ */

.sheet-scrim,
.club-picker-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--color-scrim) 45%, transparent);
  animation: sheet-fade-in 0.15s ease-out;
}

@keyframes sheet-fade-in {
  from {
    opacity: 0;
  }
}

.sheet-panel,
.club-picker-sheet {
  width: 100%;
  max-width: var(--content-max);
  max-height: 80vh;
  background: var(--color-surface-high);
  border-radius: var(--shape-xl) var(--shape-xl) 0 0;
  box-shadow: var(--elevation-3-up);
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: sheet-slide-up 0.22s var(--ease-emphasized-decelerate);
  overflow-y: auto;
}

@keyframes sheet-slide-up {
  from {
    transform: translateY(100%);
  }
}

.sheet-handle,
.club-picker-handle {
  width: 32px;
  height: 4px;
  border-radius: var(--shape-full);
  background: var(--color-line);
  align-self: center;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet-title,
.club-picker-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}

.price-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
}

.price-details-row:last-of-type {
  border-bottom: none;
}

.price-details-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.price-details-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
}

.price-details-text {
  margin: 0;
  padding-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  white-space: pre-wrap;
}

/* ============================================================
   Forms — M3 outlined text fields (transparent fill, 1px outline,
   2px primary outline on focus). Labels stay above the field rather
   than the M3 default floating-inside-the-field label: with a fixed
   external label already established across every screen in this app,
   moving to a floating label would mean rebuilding every form's markup
   for a purely cosmetic swap — not worth it, and plenty of real M3
   settings-style UIs use a fixed label above a field just like this.
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-muted);
}

.field input,
.field select,
.field textarea,
.add-club-row input {
  font: inherit;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
  padding: 12px 14px;
  border-radius: var(--shape-xs);
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-ink);
  transition: border-color 0.12s var(--ease-standard);
}

.field textarea {
  resize: vertical;
  font-family: inherit;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.add-club-row input:focus-visible {
  outline: none;
  border-color: var(--color-fairway);
  border-width: 2px;
  padding: 11px 13px; /* compensates the extra 1px border so the field doesn't visibly grow on focus */
}

.field-group-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.price-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* --- Par entry: a vertical list of stepper rows, one big touch target
   per hole, instead of a cramped grid of tiny number inputs. --- */

.par-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
}

/* Higher specificity than the bare .list-row rule below (which this also
   carries, for the same row/hover/focus treatment) — a deliberate
   tighter-padding override, not a race against source order. */
.list-row.club-row {
  padding: 10px 14px;
}

.club-card {
  background: var(--color-surface);
  border-radius: var(--shape-md);
  overflow: hidden;
  max-height: 400px;
  opacity: 1;
  transform: scale(1);
  transition: max-height 0.24s var(--ease-standard), opacity 0.2s var(--ease-standard), transform 0.24s var(--ease-standard), margin 0.24s var(--ease-standard);
}

.club-card.is-removing {
  max-height: 0;
  opacity: 0;
  transform: scale(0.94);
  margin-bottom: -10px; /* cancels the .plain-list gap so nothing after it visibly jumps down twice */
  pointer-events: none;
}

.club-card .club-row {
  background: transparent;
  border-radius: 0;
}

.club-row-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: var(--shape-xs);
}

.club-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 14px 14px;
  border-top: 1px solid var(--color-line);
  margin-top: 2px;
  padding-top: 12px;
}

.club-detail-fields .field input,
.club-detail-fields textarea.club-field {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: var(--shape-xs);
  border: 1px solid var(--color-outline);
  background: var(--color-surface-low);
  color: var(--color-ink);
}

.club-detail-fields textarea.club-field {
  resize: vertical;
}

.club-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.club-row-actions .icon-btn {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.club-row-actions .icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.add-club-row {
  display: flex;
  gap: 8px;
  margin: 10px 0 20px;
}

.add-club-row input {
  flex: 1;
}

.par-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  border-radius: var(--shape-sm);
  padding: 10px 12px;
}

.par-row-hole {
  font-size: 14px;
  font-weight: 600;
}

.par-row-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.par-row-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  width: 18px;
  text-align: center;
}

/* ============================================================
   Rounds list (used on the Stats screen)
   ============================================================ */

.scorecard-list,
.plain-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score-row,
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: var(--shape-md);
  transition: transform 0.12s var(--ease-standard);
}

.score-row:active {
  transform: scale(0.98);
}

.score-row-main,
.score-row-total {
  display: flex;
  flex-direction: column;
}

.score-row-course {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-row-weather {
  color: var(--color-ink-muted);
  display: inline-flex;
}

.score-row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-row-wrap .score-row {
  flex: 1;
  min-width: 0;
}

.weather-filter {
  margin-bottom: 10px;
  gap: 2px;
}

.weather-filter-btn {
  display: grid;
  place-items: center;
}

.score-row-date,
.list-row-meta {
  font-size: 12px;
  color: var(--color-ink-muted);
}

.list-row > a:first-child,
.list-row > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.list-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delete-course-btn,
.delete-round-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  color: var(--color-ink-muted);
}

.delete-course-btn:hover,
.delete-round-btn:hover {
  color: var(--color-error);
}

/* Compound selector — deliberately higher specificity than the plain
   .text-btn rule below (which this always appears alongside), so the
   error color isn't at the mercy of which rule happens to come later. */
.text-btn.text-btn-danger {
  color: var(--color-error);
}

.abandon-round-btn {
  display: block;
  margin: 4px auto 0;
}

.score-row-total {
  align-items: flex-end;
}

.score-strokes {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
}

.score-topar {
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* ============================================================
   Play screen — the core scoring interaction
   ============================================================ */

.play-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hole-card {
  background: var(--color-surface);
  border-radius: var(--shape-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hole-card--map {
  padding: 0 0 24px;
  overflow: hidden;
}

.hole-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 24px;
}

.hole-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

.hole-par {
  font-size: 13px;
  color: var(--color-ink-muted);
  border: none;
  background: none;
  font: inherit;
}

.hole-par-unconfirmed {
  color: var(--color-sand);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The scorecard signature: a birdie or better is circled, a bogey or
   worse is boxed — same convention golfers already use with a pencil. */

.stroke-display {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  transition: transform 0.18s var(--ease-standard);
}

.stroke-number {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
}

.score-par {
  color: var(--color-ink);
}

.score-birdie,
.score-eagle {
  border-radius: var(--shape-full);
  border: 3px solid var(--color-fairway);
}

.score-eagle {
  border-width: 4px;
  box-shadow: inset 0 0 0 3px var(--color-bg), inset 0 0 0 6px var(--color-fairway);
}

.score-birdie .stroke-number,
.score-eagle .stroke-number {
  color: var(--color-fairway);
}

.score-bogey,
.score-double {
  border-radius: var(--shape-sm);
  border: 3px solid var(--color-bogey);
}

.score-double {
  border-width: 4px;
  box-shadow: inset 0 0 0 3px var(--color-bg), inset 0 0 0 6px var(--color-bogey);
}

.score-bogey .stroke-number {
  color: var(--color-bogey);
}

.score-double .stroke-number {
  color: var(--color-double);
}

.stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.stepper-row-secondary {
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
}

.stepper-label {
  font-size: 14px;
  color: var(--color-ink-muted);
  min-width: 90px;
  text-align: center;
}

.stepper-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--shape-full);
  border: none;
  background: var(--color-surface-high);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-fairway);
  cursor: pointer;
  transition: transform 0.12s var(--ease-standard);
}

.stepper-btn:active {
  transform: scale(0.9);
}

.stepper-btn-sm {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.play-nav {
  display: flex;
  gap: 12px;
}

.play-nav .btn {
  flex: 1;
}

/* ============================================================
   Summary screen
   ============================================================ */

.summary {
  gap: 24px;
}

.summary-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 28px 0;
}

.summary-course {
  font-size: 13px;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.summary-total {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 600;
  color: var(--color-fairway);
  line-height: 1.1;
}

.summary-topar {
  font-size: 14px;
  color: var(--color-ink-muted);
}

.summary-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.weather-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-surface);
  border-radius: var(--shape-md);
  margin-bottom: 4px;
}

.weather-summary-condition {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.weather-summary-temp {
  color: var(--color-ink-muted);
  font-weight: 500;
}

.weather-summary-wind {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.weather-summary-wind-value {
  font-weight: 700;
}

.weather-summary-wind-label {
  font-size: 12px;
  color: var(--color-ink-muted);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
}

.stat-label {
  font-size: 12px;
  color: var(--color-ink-muted);
}

.scorecard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.grid-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--color-surface);
  border-radius: var(--shape-sm);
  padding: 10px 0;
}

.grid-hole {
  font-size: 10px;
  color: var(--color-ink-muted);
  font-weight: 700;
}

.grid-score {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.grid-score.score-birdie,
.grid-score.score-eagle {
  border-radius: var(--shape-full);
  border: 2px solid var(--color-fairway);
  color: var(--color-fairway);
}

.grid-score.score-bogey,
.grid-score.score-double {
  border-radius: 4px;
  border: 2px solid var(--color-bogey);
  color: var(--color-bogey);
}

/* ============================================================
   Stats screen
   ============================================================ */

.stat-block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-surface);
  border-radius: var(--shape-md);
  padding: 16px;
}

.stat-block-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 24px;
  color: var(--color-fairway);
}

.stat-block-label {
  font-size: 12px;
  color: var(--color-ink-muted);
}

.stats-note {
  font-size: 13px;
  color: var(--color-ink-muted);
  line-height: 1.6;
}

.club-stats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.club-stat-card {
  background: var(--color-surface);
  border-radius: var(--shape-md);
  padding: 14px 16px;
}

.club-stat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.club-stat-name {
  font-weight: 700;
  font-size: 15px;
}

.club-stat-count {
  font-size: 12px;
  color: var(--color-ink-muted);
}

.club-stat-numbers {
  display: flex;
  gap: 28px;
}

.club-stat-number {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.club-stat-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-fairway);
}

.club-stat-label {
  font-size: 11px;
  color: var(--color-ink-muted);
}

.club-stat-outliers {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-line);
}

.club-stat-outliers summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
}

.club-outlier-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--color-ink-muted);
}

/* ============================================================
   Settings screen
   ============================================================ */

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
  padding-left: 2px;
}

/* M3 Segmented Button — one outlined stadium track; the active segment
   is marked by .segment-thumb, a real element js/segmentedThumb.js
   slides between positions (see the comment there) rather than a
   background instantly toggled on whichever button is active, the same
   way M3's own Tabs indicator animates between tabs. */
.segmented {
  position: relative;
  display: flex;
  background: transparent;
  border: 1px solid var(--color-outline);
  border-radius: var(--shape-full);
  padding: 4px;
  gap: 0;
}

.segment-thumb {
  position: absolute;
  top: 4px;
  left: 0;
  bottom: 4px;
  border-radius: var(--shape-full);
  background: var(--color-secondary-container);
  pointer-events: none;
  transition: transform 0.28s var(--ease-standard), width 0.28s var(--ease-standard);
  z-index: 0;
  will-change: transform, width;
}

.segment-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 0;
  border-radius: var(--shape-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: color 0.18s var(--ease-standard);
}

.segment-btn.is-active {
  color: var(--color-on-secondary-container);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface);
  border-radius: var(--shape-md);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.settings-row-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--color-ink-muted);
}

.settings-row-chevron {
  color: var(--color-ink-muted);
  display: inline-flex;
  flex-shrink: 0;
}

.settings-row-danger {
  color: var(--color-error);
}

.settings-row-toggle {
  align-items: center;
  cursor: pointer;
}

.settings-row-toggle > span:not(.settings-row-icon):not(.toggle-switch) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.settings-row-subtext {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

/* M3 Switch: an outlined track (unfilled state shows the outline +
   small dot so "off" reads as a deliberate state, not a broken
   control), filled with primary + a larger thumb once on. */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--shape-full);
  background: var(--color-surface-highest);
  border: 2px solid var(--color-outline);
  transition: background-color 0.18s var(--ease-standard), border-color 0.18s var(--ease-standard);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-outline);
  transform: translateY(-50%);
  transition: left 0.15s var(--ease-standard), width 0.15s var(--ease-standard), height 0.15s var(--ease-standard), background-color 0.15s var(--ease-standard);
}

.toggle-switch.is-on {
  background: var(--color-fairway);
  border-color: var(--color-fairway);
}

.toggle-switch.is-on::after {
  left: 22px;
  width: 20px;
  height: 20px;
  background: var(--color-on-fairway);
}

/* ============================================================
   Course search (new-round flow)
   ============================================================ */

.search-input {
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border-radius: var(--shape-xs);
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-ink);
  width: 100%;
}

.search-input:focus-visible {
  outline: none;
  border-color: var(--color-fairway);
  border-width: 2px;
  padding: 11px 13px;
}

.field-hint {
  font-size: 13px;
  color: var(--color-ink-muted);
  padding: 2px 2px;
}

.field-hint-error {
  color: var(--color-error);
}

.course-info-section {
  margin-bottom: 16px;
}

.course-info-text {
  font-size: 14px;
  color: var(--color-ink-muted);
  margin: 4px 0 0;
}

.tee-table {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--shape-md);
  overflow: hidden;
}

.tee-table-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 4px;
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-line);
}

.tee-table-row:last-child {
  border-bottom: none;
}

.tee-table-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-muted);
}

.small-empty-state {
  padding: 12px 2px;
  text-align: left;
}

.course-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: none;
  border-radius: var(--shape-sm);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s var(--ease-standard);
}

.course-card:active {
  transform: scale(0.98);
}

.course-card-name {
  font-weight: 700;
  font-size: 14px;
}

.course-card-meta {
  font-size: 12px;
  color: var(--color-ink-muted);
}

/* ============================================================
   Shot tracking, rangefinder & map (play screen)
   ============================================================ */

.mapping-hint {
  margin: 0;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-fairway);
  line-height: 1.5;
}

.map-area {
  position: relative;
  width: 100%;
}

.shot-map {
  width: 100%;
  height: 200px;
  background: var(--color-bg);
}

.shot-map--large {
  height: 260px;
}

.shot-map-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  font-size: 13px;
  color: var(--color-ink-muted);
  margin: 0;
}

/* Rangefinder reads as a small floating badge over the top of the map,
   rather than its own row. */
.rangefinder-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 4px;
  border: none;
  border-radius: var(--shape-full);
  padding: 8px 14px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  color: var(--color-ink);
}

.rangefinder-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-fairway);
}

.rangefinder-label {
  font-size: 11px;
  color: var(--color-ink-muted);
}

.rangefinder-prompt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink);
}

/* Start hole / Track shot — a normal, full-width button in document
   flow rather than floating over the map, so it's guaranteed to render
   regardless of how the map layer underneath behaves. */
.track-shot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 24px 0;
  padding: 14px 18px;
  border: none;
  border-radius: var(--shape-full);
  background: var(--color-fairway);
  color: var(--color-on-fairway);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s var(--ease-standard), background-color 0.15s var(--ease-standard);
}

.track-shot-btn:active {
  transform: scale(0.98);
}

/* Before the hole is started, the button marks the tee instead of a
   stroke — a distinct color makes that mode visible at a glance, on top
   of the flag-vs-crosshair icon change. */
.track-shot-btn--start {
  background: var(--color-sand);
  color: #241d0f;
}

.text-btn {
  border: none;
  background: transparent;
  color: var(--color-ink-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--shape-xs);
}

.par-confirm-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.par-confirm-label {
  font-size: 13px;
  color: var(--color-ink-muted);
  font-weight: 600;
}

.par-confirm-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--shape-full);
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.par-confirm-btn:active {
  transform: scale(0.9);
}

/* Themed map markers, replacing Leaflet's default pin image. */
.map-marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  border-radius: 50%;
  border: 2px solid #fff;
}

.map-marker--tee span {
  background: var(--color-fairway);
}

.map-marker--green span {
  background: var(--color-bogey);
}

.map-marker--shot span {
  background: var(--color-secondary);
}

.map-marker--you span {
  background: var(--color-tertiary);
  border-width: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-tertiary) 30%, transparent);
}

/* ============================================================
   Scorecard strip (play screen — running score across every hole)
   ============================================================ */

.scorecard-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.scorecard-strip-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  flex: 1;
  scrollbar-width: none;
}

.scorecard-strip-scroll::-webkit-scrollbar {
  display: none;
}

.strip-cell,
.strip-total {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 38px;
  padding: 6px 0;
  border-radius: var(--shape-sm);
  background: var(--color-surface);
  border: none;
  cursor: pointer;
}

.strip-total {
  cursor: default;
  background: transparent;
  border: 1px dashed var(--color-line);
}

.strip-cell.is-current {
  background: var(--color-fairway);
}

.strip-cell.is-current .strip-hole,
.strip-cell.is-current .strip-score {
  color: var(--color-on-fairway);
}

.strip-hole {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-ink-muted);
}

.strip-score {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink);
}

/* ============================================================
   Suggested-course banner (new-round flow, arriving via the home
   screen's hero tile — see js/views/newRound.js)
   ============================================================ */

.suggested-course-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.suggested-course-banner > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suggested-course-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fairway);
}

/* ============================================================
   Club picker sheet (play screen) & club management (bags screen)
   ============================================================ */

.club-picker-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.club-picker-header > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.club-picker-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-muted);
}

.club-picker-help-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--color-surface);
  font-weight: 700;
  font-size: 14px;
}

.club-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* M3 Assist Chip: outlined pill, fills solid on selection. */
.club-chip {
  padding: 9px 16px;
  border-radius: var(--shape-sm);
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.club-picker-skip-btn {
  align-self: center;
  margin-top: 2px;
}

.club-card.is-expanded {
  background: var(--color-surface-high);
  box-shadow: var(--shadow-card);
}

.delete-bag-btn {
  color: var(--color-ink-muted);
}

.delete-bag-btn:hover {
  color: var(--color-error);
}

/* ============================================================
   Responsive: medium (>=600px, tablet) & expanded (>=840px, desktop)

   Everything above this point IS the compact/phone layout — untouched.
   These two breakpoints only add the navigation rail and widen/regroup
   content for the extra space; there's no separate "mobile stylesheet,"
   this file just adds onto the same rules as the viewport grows.
   ============================================================ */

@media (min-width: 600px) {
  .nav-rail {
    display: flex;
  }

  .app-header {
    padding: 0 32px;
  }

  .view-outlet {
    padding: 28px 32px 48px;
  }

  .panel {
    max-width: 700px;
    margin: 0 auto;
  }

  /* Forms (and the read-only OpenGolfAPI info above the course-edit
     form) stay a comfortable reading width even inside a wider panel —
     more than ~480px of label-and-input row starts looking sparse, not
     spacious. Lists and grids below intentionally use the fuller width
     instead. */
  .form,
  .course-info-section {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .tile-stack {
    max-width: 900px;
    margin: 0 auto;
  }

  .stat-block-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 840px) {
  .app-header {
    height: 64px;
    min-height: 64px;
  }

  /* Home screen becomes a real dashboard: the hero spans the full
     width, the three secondary tiles sit in a row beneath it instead
     of stacking one under another. */
  .tile-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .tile--hero {
    grid-column: 1 / -1;
    min-height: 260px;
  }

  .course-card-list,
  .plain-list,
  .scorecard-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-content: start;
  }

  /* The club editor's list is excluded: tapping a club expands it to
     show detail fields right there in place, and a 2-up grid would put
     mismatched-height neighbors awkwardly side by side as cards
     open/close independently. */
  #club-list {
    display: flex;
    flex-direction: column;
  }

  .stat-block-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .scorecard-grid {
    grid-template-columns: repeat(9, 1fr);
  }
}