/* Self-hosted Nunito. Replaces the Google Fonts CDN link removed from index.html.
   Benefits: one fewer third-party request (privacy), works offline in the PWA,
   and woff2 is already in the service worker precache. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/nunito-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/nunito-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/nunito-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/nunito-800.woff2') format('woff2');
}

/* 7 Under Golf app styles. Mobile-first. */
:root {
  /* Core UI palette */
  --green-900: #1E3A34;   /* deep green: splash, handicap card, pressed states */
  --green-700: #2F7D5A;   /* medium green: buttons, active states, links */
  --green-500: #3E9670;   /* lighter green: accents, progress */
  --sage:      #A9B8A8;   /* muted green-grey */
  --accent:    #C9B79C;   /* warm tan: premium badge, brand mark on dark */
  --cream:     #F4F6F8;   /* page background: cool near-white, not pure white,
                             so white cards still read as cards */
  --surface:   #FFFFFF;   /* cards and raised surfaces */
  --ink:       #16191D;   /* body text (cool near-black) */
  --muted:     #667085;   /* secondary text */
  --line:      #E4E7EB;   /* hairlines, deliberately almost invisible */
  --danger:    #DC2626;
  --ok:        #16A34A;

  /* Scorecard / Data palette (categorical + light fills) for stats & charts */
  --data-blue:   #1D4ED8; --data-blue-50:   #DBEAFE;
  --data-green:  #16A34A; --data-green-50:  #DCFCE7;
  --data-violet: #6D28D9; --data-violet-50: #EDE9FE;
  --data-amber:  #D97706; --data-amber-50:  #FEF3C7;
  --data-red:    #DC2626; --data-red-50:    #FEE2E2;

  --radius:    10px;   /* crisper corners (owner, 18 Oct 2026); was 18px */
  --tabbar-h:  64px;
  /* Cards lift off the page with shadow rather than outline. */
  --shadow:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  /* One family: Nunito. Heavier weights (700/800) stand in for display type. */
  --font:      'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --serif:     'Nunito', system-ui, sans-serif;  /* alias: existing display rules → Nunito */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* The page behind everything is deep green; the light background belongs to the
   app shell. iOS 26 tints the glass under the status bar from the page background:
   light gave a white haze over the photos with a black clock, green gives a dark
   one with a white clock (owner's screenshots, 19 Oct 2026). */
html { background: var(--green-900); }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--green-900);
  -webkit-font-smoothing: antialiased;
}
.shell { background: var(--cream); }
/* color: inherit, or iOS Safari draws the text of any button without its own colour
   in system blue (owner, 18 Oct 2026: blue plan names on Train). */
button { font-family: inherit; color: inherit; cursor: pointer; }

/* Display elements (previously serif). Nunito needs weight to read as headings. */
.splash__mark, .appbar__brand, .auth__title, .section__title,
.wizard__title, .coach-hero__name, .pillar__title { font-weight: 800; letter-spacing: -0.01em; }

/* --- Splash / launch screen --- */
/* Launch screen. The timings here and SPLASH_MS in app.js are one sequence:
   the mark lands at 1.8s, the tagline at 2.5s, and the hold keeps it still for a
   beat after that. Change one and the tagline gets swept off as it arrives. */
.splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  height: 100dvh; background: var(--green-900); text-align: center; padding: 24px;
  transition: opacity .48s ease;
}
.splash.is-out { opacity: 0; }
.splash__logo {
  width: 200px; max-width: 62%; height: auto;
  animation: splashLogoIn 1.5s cubic-bezier(.2,.7,.2,1) .3s both;
}
.splash__mark {
  font-weight: 800; font-size: 40px; color: var(--cream);
  letter-spacing: 1px; line-height: .9;
  animation: splashLogoIn 1.5s cubic-bezier(.2,.7,.2,1) .3s both;
}
.splash__mark span { display: block; font-weight: 600; font-size: 13px; letter-spacing: 6px; color: var(--accent); margin-top: 6px; }
.splash__tagline {
  margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .3px;
  color: rgba(234,231,225,.82);
  animation: splashFadeUp 1s ease 1.5s both;
}
@keyframes splashLogoIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes splashFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash__logo, .splash__mark, .splash__tagline { animation-duration: .01ms; animation-delay: 0ms; }
}

/* --- Inputs (shared, on light surfaces) --- */
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.field {
  width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-size: 16px; outline: none;
}
.field:focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(47,125,90,.16); }
.link { background: none; border: 0; color: var(--green-700); font-size: 14px; font-weight: 600; }

/* --- Welcome auth (rendered inside the dark-green splash) --- */
.authbox { width: 100%; max-width: 320px; margin-top: 6px; animation: splashFadeUp .8s ease 2.3s both; }
.authbox__form { display: flex; flex-direction: column; gap: 10px; }
.authbox .field { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: var(--cream); }
.authbox .field::placeholder { color: rgba(234,231,225,.55); }
.authbox .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,183,156,.22); background: rgba(255,255,255,.14); }
.authbox .btn--primary { background: var(--cream); color: var(--green-900); margin-top: 4px; }
.authbox .btn--primary:active { background: #fff; }
.auth-links { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 14px; }
.auth-links .link { color: var(--accent); }
.auth-links .link.subtle { color: rgba(234,231,225,.66); font-weight: 500; }

/* OTP digit grid */
.otp-grid { display: flex; gap: 8px; justify-content: center; }
.otp-digit {
  width: 44px; height: 54px; padding: 0; text-align: center;
  font-size: 24px; font-weight: 700; font-family: var(--font);
  background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 7px; color: var(--cream); caret-color: var(--accent);
  -webkit-appearance: none; appearance: none;
}
.otp-digit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,183,156,.22); background: rgba(255,255,255,.14); outline: none; }
.authbox__hint { font-size: 14px; color: rgba(234,231,225,.75); text-align: center; margin: 0 0 16px; line-height: 1.5; }

/* --- Buttons --- */
.btn { border: 0; border-radius: 8px; padding: 12px 16px; font-size: 15px; font-weight: 600; margin-top: 14px; }
.btn--primary { background: var(--green-700); color: #fff; }
.btn--primary:disabled { opacity: .6; }
.btn--primary:active { background: var(--green-900); }

/* --- App shell --- */
.shell { min-height: 100dvh; display: flex; flex-direction: column; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.appbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px; background: var(--surface); color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.appbar__brand { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.appbar__brand { color: var(--green-900); }
.appbar__brand span { color: var(--green-700); font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: 4px; margin-left: 6px; }
.outlet { flex: 1; padding: 18px 16px 24px; }
.outlet.is-leaving { opacity: .4; }

/* --- Section view --- */
.section__header { margin: 4px 2px 18px; }
.section__header--sub { display: grid; gap: 2px; }
.section__title { font-family: var(--serif); font-size: 26px; margin: 0 0 2px; }
/* A rung between the screen title and the small uppercase labels inside a block,
   so a screen made of several blocks says what each one is. */
.section__grouptitle {
  font-family: var(--serif); font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
  margin: 4px 2px 12px; color: var(--ink);
}
.section__sub { color: var(--muted); margin: 0; }
/* The opening paragraph of a screen, in the flow rather than inside a card. A card
   around it makes it read as one more thing on the page to deal with, when it is
   the page explaining itself. */
.section__lede { color: var(--muted); font-size: 15px; line-height: 1.5; margin: -4px 2px 4px; }
.section__note { color: var(--muted); font-size: 13px; text-align: center; margin: 18px 8px 0; }
/* The way back on every sub-page (WP-33): a clear pill top left, the same
   everywhere, so nobody has to look for it. */
.backlink { align-self: start; justify-self: start; width: auto; display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px;
  padding: 10px 18px 10px 14px; border-radius: 999px; border: 0;
  background: var(--green-900); box-shadow: 0 4px 12px rgba(30,58,52,.25);
  color: #fff; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; cursor: pointer; }
.backlink:active { background: var(--green-700); }
.feature-list { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--surface); border: 0; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.feature__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.feature__title { font-size: 16px; margin: 0; }
.feature__desc { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.45; }
.feature.is-locked { opacity: .85; }
.feature.is-link { cursor: pointer; }
.feature.is-link:active { background: #F7F8FA; }

/* --- Account footer (Me) --- */
.account { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.account__row { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px; }
.account__label { color: var(--muted); font-size: 14px; }
.btn--ghost { background: none; color: var(--danger); border: 1px solid var(--line); }
.btn--ghost:active { background: #FEF2F2; }

/* --- Coach section hero --- */
.coach-hero { text-align: center; padding: 12px 0 20px; }
.coach-hero__avatar { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--green-900); font-family: var(--serif); font-weight: 700; font-size: 26px; margin-bottom: 10px; }
.coach-hero__name { font-family: var(--serif); font-size: 24px; margin: 0 0 2px; }
.coach-hero__tagline { color: var(--muted); margin: 0; }

/* --- Badges --- */
.badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; line-height: 1; }
.badge--premium { background: rgba(201,183,156,.32); color: #6b5a3c; }
.badge--phase { background: #EFF1F4; color: var(--muted); margin-left: auto; }
.badge--trial { background: rgba(255,183,77,.22); color: #a05e00; }
.badge--expired { background: #F1F3F5; color: var(--muted); border: 1px solid var(--line); }

/* --- Bottom tab bar --- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--muted); font-size: 11px; }
.tab__icon { font-size: 24px; line-height: 1; }
.tab.is-active { color: var(--green-700); }
.tab.is-active .tab__icon { transform: translateY(-1px); }

/* --- Forms --- */
.form { display: flex; flex-direction: column; gap: 2px; }
.formrow { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.formrow:last-child { margin-bottom: 0; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c7a72' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field--area { resize: vertical; min-height: 76px; font-family: inherit; }
button.field--pick { text-align: left; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c7a72' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 9px 14px; font-size: 14px; }
.chip.is-on { background: var(--green-700); color: #fff; border-color: var(--green-700); }

.segmented { display: flex; background: #EFF1F4; border-radius: 8px; padding: 4px; margin-bottom: 14px; }
.segmented__btn { flex: 1; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 10px; border-radius: 6px; }
.segmented__btn.is-on { background: #fff; color: var(--green-900); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

.sticky-save { position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px); margin-top: 16px; }
.sticky-save .btn { width: 100%; margin: 0; }

/* ============================================================
   Onboarding overlay + wizard
   ============================================================
   Dark green throughout: welcome AND all profile steps.
   In-screen wizards (train, preround) share .wizard but
   never sit inside .overlay, so they are unaffected.
   ============================================================ */

/* Full-screen dark-green layer above the shell. */
.overlay {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  background: var(--green-900);
}

/* Desktop: blurred backdrop, wizard becomes a centered card. */
@media (min-width: 900px) {
  .overlay {
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,20,16,.80);
    backdrop-filter: blur(12px);
    padding: 40px 24px;
  }
}

/* --- Wizard shell (onboarding only) --- */
.overlay .wizard {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 24px 0;
  max-width: 480px; width: 100%; margin: 0 auto;
}

@media (min-width: 900px) {
  .overlay .wizard {
    min-height: 0;
    background: var(--green-900);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    padding: 32px 36px 0;
    overflow: hidden;
  }
}

/* --- Progress bar + skip --- */
.overlay .wizard__top {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 36px;
}
.overlay .wizard__progress {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.15); overflow: hidden;
}
.overlay .wizard__progress-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent);
  transition: width .3s ease;
}
.overlay .wizard__skip {
  flex-shrink: 0; background: none; border: 0; padding: 4px;
  font-size: 13px; font-weight: 600;
  color: rgba(234,231,225,.45);
}

/* --- Step body --- */
.overlay .wizard__step { flex: 1; }

/* Welcome hero */
.overlay .wizard__hero { margin: 4px 0 28px; }
.overlay .wizard__hero .splash__mark { color: var(--cream); font-size: 46px; }
.overlay .wizard__hero .splash__mark span { font-size: 13px; letter-spacing: 7px; }

/* Titles (all steps) */
.overlay .wizard__title {
  font-family: var(--serif); font-size: 30px; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 8px; color: var(--cream);
}
.overlay .wizard__sub {
  font-size: 15px; line-height: 1.55;
  margin: 0 0 28px; color: rgba(234,231,225,.6);
}

/* Step counter label (profile steps only) */
.overlay .wizard__step-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 8px;
}

/* --- Form controls on dark surface (all steps) --- */
.overlay .field-label {
  color: rgba(234,231,225,.65); font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
}
.overlay .field {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15);
  color: var(--cream);
}
.overlay .field::placeholder { color: rgba(234,231,225,.35); }
.overlay .field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,183,156,.22);
  background: rgba(255,255,255,.13);
}
/* Light chevron for selects on dark */
.overlay select.field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a9b8a8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
.overlay select.field option { background: #1E3A34; color: #F4F6F8; }
.overlay .segmented { background: rgba(255,255,255,.1); }
.overlay .segmented__btn { color: rgba(234,231,225,.55); }
.overlay .segmented__btn.is-on {
  background: rgba(255,255,255,.18); color: var(--cream);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.overlay .chip {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15);
  color: rgba(234,231,225,.75);
}
.overlay .chip.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--green-900);
}

/* --- Nav buttons (sticky, dark background always) --- */
.overlay .wizard__nav {
  display: flex; gap: 12px;
  position: sticky; bottom: 0;
  padding: 16px 0 max(24px, env(safe-area-inset-bottom));
  margin-top: 24px;
  background: var(--green-900);
}
@media (min-width: 900px) {
  .overlay .wizard__nav { background: transparent; padding-bottom: 32px; }
}

.overlay .wizard__nav .btn { flex: 1; margin: 0; }

/* Primary button: cream on all steps (stands out against dark green). */
.overlay .wizard__nav .btn--primary { background: var(--cream); color: var(--green-900); }
.overlay .wizard__nav .btn--primary:active { background: rgba(244,246,248,.88); }

/* Ghost back button: subtle on dark. */
.overlay .wizard__nav .btn--ghost {
  background: transparent; color: rgba(234,231,225,.7);
  border-color: rgba(255,255,255,.18);
}
.overlay .wizard__nav .btn--ghost:active { background: rgba(255,255,255,.08); }
.overlay .wizard__nav .btn--ghost:disabled { opacity: .3; }

/* Welcome: back is hidden (it's disabled anyway, but hide it for cleaner layout). */
.overlay .wizard--welcome .wizard__back { display: none; }

/* Shared styles also used by in-screen wizards (train, preround) -- kept minimal. */
.wizard__nav { display: flex; gap: 12px; margin-top: 20px; }
.wizard__nav .btn { flex: 1; margin: 0; }
.wizard__back:disabled { opacity: .4; }
.wizard__title { font-family: var(--serif); font-size: 26px; margin: 0 0 4px; }
.wizard__sub { color: var(--muted); margin: 0 0 22px; }

/* --- Onboarding nudge --- */
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; text-align: left;
  background: rgba(201,183,156,.26); color: #6b5a3c; padding: 12px 16px; font-size: 14px; font-weight: 600; }
.nudge__cta { color: var(--green-700); font-weight: 700; white-space: nowrap; }

/* --- Toasts --- */
.toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 84px); z-index: 20; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 8px; color: #fff; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); opacity: 0; transform: translateY(8px); transition: .22s; }
.toast.is-in { opacity: 1; transform: none; }
.toast--info { background: var(--green-700); }
.toast--success { background: var(--ok); }
.toast--error { background: var(--danger); }

/* ============================================================
   Albert: the conversation, rendered inside the sheet
   ============================================================
   The chat owns the full viewport: the log scrolls internally so the composer
   never drifts away from the thumb. Every other view keeps the normal page
   scroll, so the height chain is scoped to the shell that contains a .chat. */

/* The chat now lives in the Albert sheet, never in the outlet, so it fills its
   sheet rather than the shell. Scoping this to .sheet matters: a bare
   .shell:has(.chat) would match the sheet's chat and collapse every screen. */
.sheet .chat { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.chat__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.chat__head-id { display: flex; align-items: center; gap: 8px; }
.chat__avatar {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--green-900); font-size: 14px;
}
.chat__name { font-weight: 700; font-size: 15px; }
.chat__reset {
  border: 0; background: none; color: var(--muted); font-size: 17px;
  padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.chat__reset:active { background: #e2dfd7; }

.chat__log {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}

/* --- Bubbles --- */
.chat__msg { display: flex; max-width: 100%; }
.chat__msg--user   { justify-content: flex-end; }
.chat__msg--albert { justify-content: flex-start; }

.chat__bubble {
  max-width: 85%; padding: 10px 14px; border-radius: 10px;
  font-size: 15px; line-height: 1.5; overflow-wrap: anywhere;
}
.chat__msg--user .chat__bubble {
  background: var(--green-700); color: #fff; border-bottom-right-radius: 6px;
}
.chat__msg--albert .chat__bubble {
  background: #F1F3F5; border: 0; color: var(--ink);
  border-bottom-left-radius: 6px;
}
.chat__bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: rgba(30,42,38,.07); padding: 1px 5px; border-radius: 4px;
}
.chat__msg--user .chat__bubble code { background: rgba(255,255,255,.2); }
.chat__bubble strong { font-weight: 700; }

/* --- Activity: Albert never narrates his own tool use, so the app shows it --- */
.chat__working { color: var(--muted); font-size: 14px; font-style: italic; }

.chat__typing { display: inline-flex; gap: 4px; padding: 3px 0; }
.chat__typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
  animation: chat-bounce 1.3s infinite ease-in-out;
}
.chat__typing i:nth-child(2) { animation-delay: .18s; }
.chat__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-bounce {
  0%, 70%, 100% { transform: translateY(0);    opacity: .45; }
  35%           { transform: translateY(-5px); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .chat__typing i { animation: none; opacity: .6; }
}

.chat__error { color: var(--danger); font-size: 14px; }

/* --- Empty state: the first thing a new golfer sees --- */
.chat__empty { margin: auto; text-align: center; padding: 20px 8px; }
.chat__empty-avatar {
  display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: var(--green-900); font-size: 30px; margin-bottom: 12px;
}
.chat__empty-title { font-size: 24px; margin: 0 0 4px; }
.chat__empty-sub { color: var(--muted); margin: 0 0 20px; }
.chat__starters { display: flex; flex-direction: column; gap: 8px; }
.chat__starter {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 9px; padding: 12px 16px; font-size: 14px; text-align: left; line-height: 1.4;
}
.chat__starter:active { background: #F1F3F5; }

/* --- Composer --- */
.chat__composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--surface);
}
.chat__input {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 15px; font: inherit; line-height: 1.4;
  background: #fff; color: var(--ink); max-height: 140px; overflow-y: auto;
  /* 16px is a hard floor, not a design choice: iOS Safari zooms the whole page
     when you focus an input smaller than this. Do not drop it to 15 to match
     the bubbles. Every other focusable field in the app is 16 for the same
     reason. */
  font-size: 16px;
}
.chat__input:focus { outline: none; border-color: var(--green-500); }
.chat__send {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--green-700); color: #fff; font-size: 19px; line-height: 1;
}
.chat__send:active { background: var(--green-900); }
.chat.is-busy .chat__send { opacity: .45; }

/* --- Dev quick login (welcome screen, over the green splash) ---------------
   Draws nothing in a normal deployment: the API returns an empty list unless
   dev_login.enabled is on. */
.devlogin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin-top: 24px;
}
.devlogin__label {
  width: 100%; text-align: center; font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(234,231,225,.45);
}
.devlogin__btn {
  border: 1px solid rgba(234,231,225,.35); background: rgba(234,231,225,.08);
  color: var(--cream); border-radius: 999px; padding: 9px 18px;
  font-size: 13px; font-weight: 600;
}
.devlogin__btn:active { background: rgba(234,231,225,.22); }
.devlogin__btn:disabled { opacity: .45; }

/* ============================================================
   Rounds: history list and round detail
   ============================================================ */

.round-list { display: flex; flex-direction: column; gap: 10px; }

.round-card {
  background: var(--surface); border: 0; box-shadow: var(--shadow); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer;
}
.round-card:active { background: #F7F8FA; }
.round-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.round-card__meta { display: grid; gap: 2px; min-width: 0; }
.round-card__course { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.round-card__date { color: var(--muted); font-size: 13px; }
.round-card__score { display: flex; align-items: baseline; gap: 6px; flex: none; }
.round-card__total { font-size: 26px; font-weight: 800; line-height: 1; }

.round-card__nines { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nine { display: inline-flex; align-items: baseline; gap: 5px; background: #F1F3F5; border-radius: 7px; padding: 5px 10px; }
.nine__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.nine__score { font-size: 15px; font-weight: 700; }
/* Score-relative colouring, judged by how it played rather than by beating par. */
.is-under { color: var(--data-blue); }
.is-level { color: var(--ok); }
.is-over  { color: var(--data-amber); }
.round-card__par, .nine__par, .round-head__par, .nineblock__par { font-weight: 700; font-size: 13px; }

/* --- Detail head --- */
.round-head { margin: 6px 0 18px; }
.round-head__course { font-size: 24px; margin: 0 0 2px; }
.round-head__meta { color: var(--muted); margin: 0 0 10px; font-size: 14px; }
.round-head__score { display: flex; align-items: baseline; gap: 8px; }
.round-head__total { font-size: 44px; font-weight: 800; line-height: 1; }
.round-head__par { font-size: 17px; }

/* --- The two nines, the headline of the screen --- */
.nineblocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.nineblock { background: var(--surface); border: 0; box-shadow: var(--shadow); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; }
.nineblock__label { font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--muted); }
.nineblock__score { font-size: 28px; font-weight: 800; line-height: 1.1; }
.nineblock__delta { font-size: 12px; color: var(--muted); }

/* --- Callouts: the thing worth noticing --- */
.callout {
  background: rgba(201,183,156,.24); border-left: 3px solid var(--accent);
  border-radius: 7px; padding: 12px 14px; margin-bottom: 12px;
}
.callout--quiet { background: #F1F3F5; border-left-color: var(--sage); }
.callout__text { margin: 0; font-size: 14px; line-height: 1.45; }

/* --- Supporting stats --- */
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 0; box-shadow: var(--shadow); border-radius: 8px; padding: 10px; text-align: center; }
.stat__value { display: block; font-size: 19px; font-weight: 800; }
.stat__label { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }

/* --- Scorecard: scrolls sideways rather than forcing the page to --- */
/* Fits the width, always. Fixed 34px cells came to 398px, which overflows a 390px
   phone before you count any padding, so the hole columns now share whatever space
   there is and the card scales with the screen instead of scrolling. */
.scorecard { width: 100%; }
.card-half { width: 100%; }
.card-half + .card-half { margin-top: 20px; }
.card-row { display: grid; grid-template-columns: 40px repeat(9, minmax(0, 1fr)) 38px; }
.card-cell {
  height: 34px; display: grid; place-items: center; min-width: 0;
  font-size: 14px; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line);
}
/* A doubled mark reaches 29px across, so the score row needs the clearance the
   other two rows do not. */
.card-row:last-child .card-cell { height: 38px; }
.card-cell--head { font-size: 9px; letter-spacing: .02em; font-weight: 700; text-transform: uppercase; color: var(--muted); justify-content: start; }
.card-cell--tot  { font-weight: 800; background: #F1F3F5; }
.card-cell--par  { color: var(--muted); }
.card-cell--score { font-weight: 700; }

/* Scorecard notation, the way it is drawn on a tour card and on television:
   circle under par, square over, doubled at two clear either way, par unmarked.
   The shape carries the meaning and the colour only reinforces it, so the card
   still reads at arm's length, in sunlight, and to a colour-blind golfer.

   Drawn with a border for the inner shape and a box-shadow for the outer ring,
   which keeps every mark the same 22px whatever it is: a scorecard where the
   numbers do not line up is not a scorecard. */
.mark {
  display: grid; place-items: center;
  width: 22px; height: 22px; box-sizing: border-box;
  border: 2px solid transparent; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.mark--eagle, .mark--birdie { border-radius: 50%; }
.mark--bogey, .mark--double { border-radius: 3px; }

.mark--birdie {
  border-color: var(--data-blue); background: var(--data-blue-50); color: var(--data-blue);
}
.mark--eagle {
  border-color: var(--data-violet); background: var(--data-violet-50); color: var(--data-violet);
  /* The gap ring is painted in the card's own background, so the two rings read
     as two rings rather than one thick one. */
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px var(--data-violet);
}
.mark--par { color: var(--ink); }
.mark--bogey {
  border-color: var(--data-amber); background: var(--data-amber-50); color: #7A4E13;
}
.mark--double {
  border-color: var(--data-red); background: var(--data-red-50); color: var(--data-red);
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px var(--data-red);
}


/* --- Lifetime stats: scoring by par, and tee-shot dispersion --------------- */
.stats { display: flex; flex-direction: column; }
.stats__group {
  background: var(--surface); border: 0; box-shadow: var(--shadow);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.stats__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.stats__note { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }

.bypar { display: grid; gap: 2px; }
.bypar__row {
  display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: baseline;
  gap: 10px; padding: 7px 8px; border-radius: 6px;
}
.bypar__row.is-worst { background: var(--data-amber-50); }
.bypar__par   { font-weight: 700; font-size: 14px; }
.bypar__avg   { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bypar__rel   { font-size: 13px; font-weight: 700; color: var(--data-amber); font-variant-numeric: tabular-nums; }
.bypar__holes { font-size: 11px; color: var(--muted); text-align: right; }

.disp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.disp__col { text-align: center; background: #F1F3F5; border-radius: 8px; padding: 12px 6px; }
/* Off the tee, coloured by outcome rather than by direction: straight is the shot
   you were trying to hit, either side is not. The side you miss most is called out
   because that is the one worth a lesson. */
.disp__col--straight { background: var(--data-green-50); }
.disp__col--straight .disp__pct { color: var(--data-green); }
.disp__col--left, .disp__col--right { background: var(--data-amber-50); }
.disp__col--left .disp__pct, .disp__col--right .disp__pct { color: var(--data-amber); }
.disp__col.is-most { background: var(--data-red-50); }
.disp__col.is-most .disp__pct { color: var(--data-red); }
.disp__col.is-most .disp__dir { font-weight: 800; }
.disp__pct { display: block; font-size: 22px; font-weight: 800; line-height: 1; }
.disp__dir { display: block; font-size: 12px; font-weight: 600; margin-top: 4px; }
.disp__fw  { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ============================================================
   Albert as a layer: floating button and bottom sheet
   ============================================================ */

.fab {
  position: fixed; right: 16px; z-index: 8;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--green-700); color: var(--cream);
  box-shadow: 0 6px 18px rgba(30,58,52,.32);
  display: grid; place-items: center;
}
.fab__mark { font-size: 28px; line-height: 1; }
.fab:active { background: var(--green-900); transform: translateY(1px); }
body.has-sheet .fab { opacity: 0; pointer-events: none; }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 9; background: rgba(30,42,38,.45);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
.sheet-backdrop.is-in { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  height: 88dvh; max-height: 88dvh;
  background: var(--surface); border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 32px rgba(30,42,38,.28);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.sheet.is-in { transform: translateY(0); }

/* Asking for one line of text. Sized to its content and lifted clear of the
   bottom, so the on-screen keyboard has somewhere to go and the sheet does not
   read as a page that happens to contain a field. */
.ask {
  height: auto; max-height: none;
  padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
}
.ask__body { padding: 2px 18px 6px; display: grid; gap: 10px; }
.ask__title { margin: 0; font-size: 17px; font-weight: 800; }
.ask__input { width: 100%; font-size: 16px; }   /* 16px, or iOS zooms the page in */
.ask__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ask__hint { font-size: 12px; color: var(--muted); }
.ask__count { flex: none; font-size: 12px; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.ask__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }

/* The grab handle is the close button, so the gesture and the tap agree. */
.sheet__grab {
  flex: none; border: 0; background: none; padding: 10px 0 6px;
  display: grid; place-items: center;
}
.sheet__grab::before {
  content: ''; width: 40px; height: 4px; border-radius: 999px; background: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop { transition: none; }
}

/* ============================================================
   Home
   ============================================================ */

.home { display: flex; flex-direction: column; gap: 12px; }
.home__head { margin: 4px 2px 16px; }
.home__greeting { font-size: 26px; margin: 0; }
.home__label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 6px 2px 0;
}

.home__hc {
  background: var(--green-900); color: var(--cream); border-radius: var(--radius);
  padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.home__hc-main { display: flex; align-items: baseline; gap: 10px; }
.home__hc-value { font-size: 38px; font-weight: 800; line-height: 1; }
.home__hc-label { font-size: 13px; opacity: .75; }
.home__hc-target {
  font-size: 12px; text-align: right; opacity: .85; line-height: 1.35;
  border-left: 1px solid rgba(234,231,225,.25); padding-left: 12px;
}

/* --- Progress: am I getting better, first on Home (WP-22) ------------------- */
.prog, .hc {
  background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px 12px; display: grid; gap: 10px;
}

/* On Home the block is a light card, like the other cards there: the hero photo is
   already the dark mass at the top, and better and worse read more naturally in
   green and red on white (owner, 17 Oct 2026). The handicap and performance
   screens keep the dark card for now. */
.prog { background: var(--surface, #fff); color: var(--ink); box-shadow: var(--shadow); }
.prog .prog__hcLabel, .prog .prog__hcSince,
.prog .prog__sectionLabel, .prog .prog__chipLabel { color: var(--muted); opacity: 1; }
/* A pencil behind each number: what you tap is what you change. */
.prog__hcRow { display: inline-flex; align-items: baseline; gap: 6px; }
.prog__hcValue, .prog__targetValue { border: 0; background: none; padding: 0; color: inherit; font-family: var(--serif); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.prog__targetValue { font-size: 26px; color: var(--green-700); }
.prog__edit {
  width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; flex: none; align-self: center;
  background: var(--cream); color: var(--green-900); font-size: 14px; line-height: 1;
}
.prog__target { display: grid; justify-items: end; gap: 2px; text-align: right; }
.prog__targetValue.is-empty { font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0; }
:is(.prog, .pc, .pc-sheet) .bars__bar { background: #E3E7E5; color: var(--ink); }
:is(.prog, .pc, .pc-sheet) .bars__bar.is-better { background: var(--green-700); }
:is(.prog, .pc, .pc-sheet) .bars__bar.is-last { box-shadow: 0 0 0 2px var(--green-900); }
:is(.prog, .pc, .pc-sheet) .bars__avg { border-top-color: rgba(30,58,52,.55); }
:is(.prog, .pc, .pc-sheet) .bars__avgLabel { background: var(--surface, #fff); }
:is(.prog, .pc, .pc-sheet) .bars__caption { color: var(--muted); opacity: 1; }
.bars__avg--ref { border-top-color: #9AA0A6 !important; }
.prog .prog__chip { background: var(--cream); }
.prog .prog__chip.is-better .prog__chipDelta { color: #2E7D32; }
.prog .prog__chip.is-worse .prog__chipDelta { color: #B42318; }
.prog .prog__cta { color: var(--green-700); }
.prog .prog__cta:active { color: var(--green-900); }

.prog__top, .hc__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.prog__hc, .hc__num { display: grid; gap: 2px; }
.prog__hcLabel, .hc__label { font-size: 11px; font-weight: 700; opacity: .7; }
.prog__hcValue, .hc__value { font-family: var(--serif); font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.prog__hcSince, .hc__since { font-size: 12px; opacity: .7; }
.hc__num--estimate { text-align: right; }
.hc__num--estimate .hc__value { color: #B08A3E; }
.hc .hc__label, .hc .hc__since { color: var(--muted); opacity: 1; }

/* Update is a button, not a link in a corner: it is how the number stays true. */
.hc__update {
  border: 0; border-radius: 999px; padding: 9px 16px; background: var(--accent); color: var(--green-900);
  font-size: 13px; font-weight: 800;
}
.hc__update { width: 100%; margin: 0; background: none; color: var(--green-900); border: 1.5px solid rgba(30,58,52,.3); }



.prog__section { display: grid; gap: 6px; }
.prog__sectionLabel { font-size: 11px; font-weight: 700; opacity: .7; }

.prog__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prog__chip {
  background: rgba(244,246,248,.10); border-radius: 7px; padding: 6px 6px;
  display: grid; gap: 0; text-align: center;
}
.prog__chipValue { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prog__chipLabel { font-size: 10px; opacity: .7; line-height: 1.3; }
.prog__chipDelta { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
.prog__chip.is-better .prog__chipDelta { color: #7FD1A0; }
.prog__chip.is-worse  .prog__chipDelta { color: #F2A9A9; }


.prog__cta {
  width: 100%; border: 0; background: none; color: var(--accent);
  border-radius: 7px; padding: 2px 0 0; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.prog__cta:active { color: var(--cream); }
.prog__chev { font-size: 17px; line-height: 1; }

/* Charts in general (chart.js), also used by the admin dashboard. Better is up:
   in golf the number goes down as the golfer improves, so the y axis is inverted
   in chart.js; without that every line reads backwards. */
.chart { width: 100%; }
.chart__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart__line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--official { stroke: var(--cream); }
.chart__line--official[x1] { stroke-dasharray: 6 5; opacity: .8; }
.chart__line--estimate { stroke: var(--accent); }
.chart__band { stroke: rgba(234,231,225,.35); stroke-width: 1; stroke-dasharray: 3 4; }
.chart__key { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.chart__keyItem { display: inline-flex; align-items: center; gap: 6px; }
.chart__swatch { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.chart__swatch--official { background: var(--ink); }
.chart__swatch--estimate { background: #B08A3E; }
.chart__swatch--target { background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 7px); }

/* Rounds as bars: lit when better than the average, the newest outlined. */
/* Room for the newest value over its bar is on .bars, not the plot: the bars
   (percent of the plot's content) and the average line (percent of its padding
   box) must measure against the same height. */
.bars { display: grid; gap: 4px; padding-top: 14px; }
.bars__plot { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 0; box-sizing: border-box; }
.bars__bar {
  position: relative; flex: 1; min-width: 0; border: 0; padding: 0; border-radius: 4px 4px 2px 2px;
  background: rgba(244,246,248,.22); color: var(--cream);
}
.bars__bar.is-better { background: var(--accent); }
.bars__bar.is-last { box-shadow: 0 0 0 2px var(--cream); }
.bars__value {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -3px);
  font-size: 11px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.bars__avg { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(244,246,248,.7); pointer-events: none; }
.bars__avgLabel {
  position: absolute; left: 0; bottom: 2px; padding: 0 4px; border-radius: 4px;
  background: var(--green-900); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bars__caption { min-height: 15px; font-size: 11px; opacity: .75; text-align: center; }

/* --- Handicap screen: the same dark card, with a chart that explains itself -- */
.hc { margin-bottom: 18px; }
.hc__form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The form opens on Update; display: grid would otherwise override [hidden]. */
.hc__form[hidden] { display: none; }
.hc__form .btn { grid-column: 1 / -1; margin: 0; }
.hc__field { display: grid; gap: 4px; font-size: 11px; font-weight: 700; }
.hc__field span { opacity: .75; }

.hc__ranges { margin: 4px 0 0; }
.hc .chart__key { margin-top: 0; }
.hc .chart__line--official { stroke: var(--ink); }
.hc .chart__line--estimate { stroke: #B08A3E; }
.hc .chart__band { stroke: var(--muted); }
.hc__empty, .hc__hint, .hc__note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.hc__note { opacity: .85; }


/* The time chart: lines in SVG, everything with text placed in HTML on top. */
.tchart { display: grid; gap: 4px; }
.tchart__plot { position: relative; }
.tchart__grid { stroke: rgba(22,25,29,.08); stroke-width: 1; }
.tchart__tick {
  position: absolute; left: 0; transform: translateY(-50%);
  font-size: 10px; font-weight: 700; opacity: .6; font-variant-numeric: tabular-nums;
}
.tchart__bandLabel {
  position: absolute; right: 0; transform: translateY(-120%);
  font-size: 10px; font-weight: 800; opacity: .75;
}
.tchart__dot {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; padding: 0;
  border-radius: 50%; border: 2px solid #fff; background: var(--ink); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(22,25,29,.15);
}
.tchart__dot--estimate { background: #B08A3E; }
.tchart__dotLabel {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -2px);
  font-size: 10px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tchart__dot--estimate .tchart__dotLabel { color: #B08A3E; top: 100%; bottom: auto; transform: translate(-50%, 2px); }
.tchart__months { position: relative; height: 14px; }
.tchart__months span { position: absolute; transform: translateX(-50%); font-size: 10px; opacity: .6; white-space: nowrap; }
.tchart__tip { min-height: 15px; font-size: 11px; font-weight: 700; text-align: center; }

.hclist { display: grid; gap: 2px; }
.hcrow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px;
}
.hcrow__value { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hcrow__date { font-size: 13px; color: var(--muted); }
.hcrow__del { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; padding: 0 4px; }

.home__ask {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--surface); border: 0; box-shadow: var(--shadow); border-radius: var(--radius); padding: 14px 16px;
}
.home__ask:active { background: #F7F8FA; }
.home__ask-avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--green-900); font-size: 20px;
}
.home__ask-text { display: grid; gap: 2px; min-width: 0; }
.home__ask-title { font-weight: 700; font-size: 15px; }
.home__ask-sub { font-size: 13px; color: var(--muted); line-height: 1.35; }


/* --- Hero: a photo band with the heading laid over it ---------------------- */
.hero {
  position: relative; margin: 0 0 18px; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.hero__img { display: block; width: 100%; height: 132px; object-fit: cover; background: var(--sage); }
/* One size for every section hero. Home, Rounds and Planning sit next to each
   other in the tab bar, so a shorter one on any of them reads as a mistake rather
   than a choice. A hero with a button gets a little more room because its body is
   a line taller, not because it is a different kind of thing. */
.hero--tall .hero__img { height: 184px; }
.hero--action .hero__img { height: 196px; }
/* A band, not a picture: for a screen whose content needs the height back. */
.hero--short .hero__img { height: 96px; }
.hero--short .hero__body {
  padding: 12px 16px 14px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.hero--short .hero__title { font-size: 20px; }
.hero__body {
  /* Extra padding at the foot lifts the block off the bottom edge, which matters
     most where a hero carries an action button. */
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 24px; color: #fff;
  /* Scrim, not a flat tint: keeps the photo readable and the text legible. */
  background: linear-gradient(to top, rgba(12,20,17,.86) 0%, rgba(12,20,17,.5) 42%, rgba(12,20,17,0) 82%);
}
.hero__title { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.hero--tall .hero__title, .hero--action .hero__title { font-size: 27px; }
.hero__sub { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.88); }
/* Inside the tagline, not under it: the story is a footnote to that sentence, and
   a button of its own was taking a row for one link. */
.hero__more {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 800;
  color: #fff; text-decoration: underline; text-underline-offset: 2px;
}
.hero__more:active { color: var(--accent); }

/* --- Drawn icons ----------------------------------------------------------
   Each svg is 1em square and inherits currentColor, so a single file serves the
   13px avatar in the chat header and the 28px mark on the floating button, and
   goes green on an active tab without a second asset. Size with font-size. */
.icon { line-height: 0; }
.icon svg { display: block; width: 1em; height: 1em; }

/* --- App bar actions ------------------------------------------------------- */
.appbar__right { display: flex; align-items: center; gap: 10px; }
.appbar__btn {
  border: 0; background: none; color: var(--muted); font-size: 20px;
  padding: 4px; border-radius: 6px; line-height: 0;
}
.appbar__btn:active { background: #F1F3F5; color: var(--ink); }
.appbar__btn:disabled { opacity: .4; }

/* --- Score distribution ---------------------------------------------------- */
.spread {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 9px 12px;
}
.spread__label { font-size: 14px; color: var(--muted); }
.spread__track { height: 12px; border-radius: 999px; background: #EFF1F4; overflow: hidden; }
.spread__bar { display: block; height: 100%; border-radius: 999px; min-width: 0; }
.spread__count { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; min-width: 18px; }

/* A scoring scale, dark to light and cool to hot, so worse reads hotter. */
.spread__bar--eagle  { background: var(--data-violet); }
.spread__bar--birdie { background: var(--data-blue); }
.spread__bar--par    { background: var(--data-green); }
.spread__bar--bogey  { background: var(--data-amber); }
.spread__bar--double { background: #E07A3F; }
.spread__bar--triple { background: var(--data-red); }

/* --- Drive dispersion fan -------------------------------------------------- */
.fan { margin: 4px 0 2px; }
.fan svg { display: block; width: 100%; height: auto; }
.fan__wedge { stroke: var(--surface); stroke-width: 2; }
.fan__wedge--good  { fill: var(--data-green-50); }
.fan__wedge--mixed { fill: var(--data-amber-50); }
.fan__wedge--poor  { fill: var(--data-red-50); }
.fan__wedge--none  { fill: #F1F3F5; }
.fan__tee { fill: var(--ink); }
.fan__n {
  fill: var(--ink); font-size: 21px; font-weight: 800; text-anchor: middle;
  font-family: var(--font); font-variant-numeric: tabular-nums;
}
.fan__sub { font-size: 12px; font-weight: 700; text-anchor: middle; font-family: var(--font); fill: var(--muted); }
.fan__hit  { fill: var(--data-green); }
.fan__miss { fill: var(--data-red); }

/* --- Hero action: a way into a story from the picture ---------------------- */
.hero__action {
  margin-top: 10px; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14);
  color: #fff; border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 600;
  backdrop-filter: blur(3px);
}
/* On a band there is no room for a bordered pill, so the action is a plain link
   sharing the title's line. */
.hero__action--inline {
  margin: 0; flex: none; border: 0; background: none; backdrop-filter: none;
  padding: 0; font-size: 13px; font-weight: 700; color: var(--accent);
}
.hero__action:active { background: rgba(255,255,255,.28); }
.hero__action--inline:active { background: none; color: #fff; }

/* --- Story overlay --------------------------------------------------------
   Full screen and scrollable, because this is prose to be read rather than a
   dialog to be dismissed. Measure is capped so lines stay readable on a tablet. */
.story {
  position: fixed; inset: 0; z-index: 20; background: var(--cream);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; transform: translateY(12px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.32,.72,0,1);
}
.story.is-in { opacity: 1; transform: none; }
.story__panel {
  max-width: 560px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 22px calc(40px + env(safe-area-inset-bottom));
}
.story__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.story__title { font-size: 30px; font-weight: 800; letter-spacing: -0.015em; margin: 0; line-height: 1.1; }
.story__close {
  flex: none; border: 0; background: #EFF1F4; color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%; font-size: 14px; line-height: 1;
}
.story__close:active { background: var(--line); color: var(--ink); }

/* The lede carries the argument, so it gets the weight. */
.story__lede { font-size: 19px; line-height: 1.45; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.story__section { margin-top: 26px; }
.story__heading { font-size: 17px; font-weight: 800; margin: 0 0 7px; }
.story__body { font-size: 15px; line-height: 1.62; color: var(--ink); margin: 0 0 10px; }
.story__body:last-child { margin-bottom: 0; }
.story__close-line {
  margin: 30px 0 0; padding: 18px 20px; border-radius: var(--radius);
  background: var(--green-900); color: var(--cream);
  font-size: 15px; line-height: 1.6; font-weight: 500;
}
.story__done { width: 100%; }

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

/* On the narrowest phones the hole columns come down to about 20px, where 14px
   digits start to touch. */
@media (max-width: 360px) {
  .card-cell { font-size: 13px; }
  .card-row { grid-template-columns: 34px repeat(9, minmax(0, 1fr)) 34px; }
  .mark { width: 20px; height: 20px; font-size: 12px; }
}

/* --- Stat tiles judged against the golfer's handicap ----------------------- */
.stat__bench { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.stat--good .stat__value { color: var(--data-green); }
.stat--ok   .stat__value { color: var(--ink); }
.stat--poor .stat__value { color: var(--data-red); }
/* A tinted foot rather than a tinted tile: the colour reads as a verdict on the
   number without turning a row of facts into a traffic light. */
.stat--good { box-shadow: var(--shadow), inset 0 -3px 0 var(--data-green); }
.stat--ok   { box-shadow: var(--shadow), inset 0 -3px 0 var(--data-amber); }
.stat--poor { box-shadow: var(--shadow), inset 0 -3px 0 var(--data-red); }

/* --- Albert's read on a round --------------------------------------------
   Deliberately not a .card. This is the one thing on the screen that is spoken
   rather than measured, so it is tinted and signed to look like someone talking
   rather than another panel of figures. */
.note {
  background: rgba(201,183,156,.22); border-radius: var(--radius);
  padding: 16px 18px 14px; margin-bottom: 16px;
}
.note__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.note__avatar {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-700); color: var(--cream); font-size: 14px; flex: none;
}
.note__who {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-700);
}
.note__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.note__more {
  border: 0; padding: 0; background: none; font: inherit;
  font-weight: 700; color: var(--green-700); white-space: nowrap;
}
.note__more:active { color: var(--green-900); }

/* A round's by-par rows are judged against the golfer's own normal for that par,
   which the lifetime block on the rounds screen has no equivalent of: there, the
   averages are the normal. Same markup, one extra tint. */
.bypar__row--good { background: var(--data-green-50); }
.bypar__row--good .bypar__rel { color: var(--data-green); }
.bypar__row--poor { background: var(--data-red-50); }
.bypar__row--poor .bypar__rel { color: var(--data-red); }
.bypar__row--ok .bypar__rel { color: var(--muted); }

/* Two-way switch over a block of figures. Sits above what it changes, so it reads
   as a lens on the numbers rather than navigation. */
.segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: #EEF0F2; border-radius: 8px; padding: 4px; margin-bottom: 14px;
}
.segmented--three { grid-template-columns: repeat(3, 1fr); }
.segmented__btn {
  border: 0; background: none; border-radius: 6px; padding: 8px 6px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
.segmented__btn.is-on {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 3px rgba(20,24,28,.12);
}

/* A row that goes somewhere. Not a .card, because a card is something to read and
   this is something to press. */
/* Styled as the Gameplan cards, so every list of things to open looks alike. */
.linkcard {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; background: #fff; border-radius: 8px; color: var(--ink);
  padding: 14px 16px; margin-top: 4px; transition: box-shadow .12s ease;
}
.linkcard:active { box-shadow: 0 0 0 3px rgba(47,125,90,.12); }
/* On a white panel (a sheet, a card) a white row would vanish: page grey instead. */
.sheet .linkcard, .card .linkcard { background: var(--cream); }
.linkcard__text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.linkcard__title { font-weight: 800; font-size: 15px; color: var(--ink); }
.linkcard__sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.linkcard__chevron { font-size: 22px; color: var(--muted); line-height: 1; flex: none; }
/* A small standing badge on a row: which routine the card prints, and anything
   else later that is true of one row in a list and has to be said, not inferred. */
.pill {
  flex: none; border-radius: 999px; padding: 3px 9px;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.pill--on { background: var(--green-700); color: #fff; }
/* A tee's colour, as a colour. Ringed rather than bare, because white and yellow
   tees are the two most common and both vanish on this background. */
.teedot {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--line); box-shadow: inset 0 0 0 1px rgba(20,24,28,.28);
}

/* Performance: the same blocks as a round, over many rounds. */
.statgrid--two { grid-template-columns: 1fr 1fr; }

/* ============================================================
   Pre-shot routine
   ============================================================ */

/* --- The wizard --- */
.wizard { padding: 4px 2px 24px; }
.wizard__bar { height: 3px; border-radius: 999px; background: #EDEFF1; overflow: hidden; margin-bottom: 14px; }
.wizard__fill { display: block; height: 100%; background: var(--green-700); transition: width .25s ease; }
.wizard__count { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wizard__q { font-family: var(--serif); font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 8px 0 4px; }
.wizard__sub { color: var(--muted); margin: 0 0 20px; line-height: 1.45; }

.options { display: grid; gap: 8px; }
.option {
  width: 100%; text-align: left; border: 1px solid var(--line); background: #fff;
  border-radius: 9px; padding: 15px 16px; font-size: 15px; font-weight: 600; color: var(--ink);
}
.option:active { background: #FAFAF8; }
.option.is-on { border-color: var(--green-700); box-shadow: inset 0 0 0 1px var(--green-700); }

.preshot__reminder { min-height: 96px; margin-bottom: 14px; resize: vertical; }

/* --- Albert working --- */
.building { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 64px 24px; }
.building__avatar {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-700); color: var(--cream); font-size: 28px; margin-bottom: 8px;
  animation: building-pulse 1.6s ease-in-out infinite;
}
@keyframes building-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.building__text { font-size: 17px; font-weight: 700; margin: 0; }
.building__sub { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.45; }

/* --- The routine as a card you read --- */
.trigger {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: rgba(201,183,156,.22); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px;
}
.trigger__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a6647; }
.trigger__phrase { font-family: var(--serif); font-size: 19px; font-weight: 800; }

.routine { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 2px; }
.routine__step {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px;
}
.routine__num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-700); color: #fff; font-size: 13px; font-weight: 800;
}
/* The routine's name, with the way to change it beside it rather than under it:
   under it, a rename link reads as an action on the whole screen. */
.routine__name { display: flex; align-items: baseline; gap: 10px; }
.routine__name .section__title { min-width: 0; }
.routine__rename {
  flex: none; background: none; border: 0; padding: 0;
  color: var(--green-700); font-size: 14px; font-weight: 600;
}
.routine__text { font-size: 15px; line-height: 1.5; padding-top: 3px; }
.routine__run { width: 100%; }
.routine__actions {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 14px 2px 20px;
}
/* Destructive actions, everywhere in the app: an outlined pill on white rather
   than a red word in a row of green ones. Red text alone reads as a link that has
   been styled oddly; an outline says this one is a button that does something to
   your data. Outlined rather than filled, because it is still the quiet option on
   the screen and should not compete with the primary button above it. */
.link--danger {
  display: block; width: fit-content; margin-inline: auto;
  background: #fff; color: var(--data-red);
  border: 1.5px solid var(--data-red); border-radius: 999px;
  padding: 9px 20px; font-size: 14px; font-weight: 700;
}
.link--danger:active { background: color-mix(in srgb, var(--data-red) 8%, #fff); }

/* --- Train: a practice plan, read standing on a range --- */
.tr__week { margin-bottom: 6px; }
.tr__session { padding: 13px 14px; }
.tr__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tr__title { margin: 0; font-size: 15px; font-weight: 800; }
.tr__mins {
  flex: none; font-size: 11px; font-weight: 800; color: var(--green-700);
  font-variant-numeric: tabular-nums;
}
.tr__drills { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tr__drill { padding-top: 9px; border-top: 1px solid var(--line); }
.tr__drill:first-child { padding-top: 0; border-top: 0; }
.tr__drillTop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tr__drillName { font-size: 13px; font-weight: 700; }
.tr__drillMins {
  flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.tr__drillHow { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink); }

/* --- Run mode: one step, arm's length, no timer --- */
.run {
  display: grid; align-content: center; justify-items: center; gap: 28px;
  min-height: 52vh; text-align: center; padding: 24px 8px;
  background: var(--green-900); border-radius: var(--radius); color: var(--cream);
}
.run__stage { display: grid; justify-items: center; gap: 14px; }
.run__num { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.run__text { font-family: var(--serif); font-size: 27px; font-weight: 800; line-height: 1.3; margin: 0; max-width: 18ch; }
.run__done { display: grid; justify-items: center; gap: 14px; }
.run__phrase { font-family: var(--serif); font-size: 30px; font-weight: 800; margin: 0; color: var(--accent); }
.run__hit { font-size: 16px; opacity: .75; margin: 0; }
.run__done .btn--primary { background: var(--cream); color: var(--green-900); }
.run__dots { display: flex; gap: 7px; }
.run__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(243,239,231,.3); }
.run__dot.is-on { background: var(--accent); }
.run__hint { margin: 12px 2px 20px; }

/* ============================================================
   Pre-round routine
   ============================================================ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 9px 15px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.chip.is-on { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.chips__next { width: 100%; margin-top: 20px; }

.warmup__total { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.warmup__mins { font-family: var(--serif); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.warmup__minsLabel { font-size: 13px; font-weight: 600; color: var(--muted); }

.warmup { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.warmup__block {
  display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px;
}
.warmup__time {
  font-size: 12px; font-weight: 800; color: var(--green-700);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.warmup__body { min-width: 0; }
.warmup__title { font-size: 15px; font-weight: 700; margin: 0 0 3px; }
.warmup__what { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }

/* --- Run mode with a clock. Sits on the bag divider and gets glanced at. --- */
.timer {
  display: grid; justify-items: center; gap: 18px; text-align: center;
  background: var(--green-900); border-radius: var(--radius); color: var(--cream);
  padding: 22px 18px 24px; min-height: 52vh; align-content: center;
}
.timer__bar {
  width: 100%; height: 3px; border-radius: 999px;
  background: rgba(243,239,231,.2); overflow: hidden;
}
.timer__fill { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.timer__clock {
  font-family: var(--serif); font-size: 46px; font-weight: 800;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1;
}
.timer__stage { display: grid; justify-items: center; gap: 8px; }
.timer__title { font-family: var(--serif); font-size: 24px; font-weight: 800; margin: 0; }
.timer__what { font-size: 15px; line-height: 1.5; opacity: .8; margin: 0; max-width: 30ch; }
.timer__controls { display: flex; gap: 8px; }
.timer__btn {
  border: 1px solid rgba(243,239,231,.35); background: none; color: var(--cream);
  border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 600; min-width: 96px;
}
.timer__btn--next { background: var(--cream); border-color: var(--cream); color: var(--green-900); }

/* ============================================================
   Course Planner
   ============================================================ */

.linkcard.is-disabled { opacity: .5; }
.option__name { display: block; }
.option__meta { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.wizard__count--gap { display: block; margin-top: 22px; }


/* ============================================================
   Gameplan: the card itself, and four ways into it
   ============================================================ */

.gp__hint { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 12px; color: var(--muted); }
.gp__hintClose { border: 0; background: none; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; }

/* The stage owns the space the scaled sheet occupies. A transform does not affect
   layout, so the height comes from fitPaper as a variable. */
/* Clipped, so that a sheet which has not been fitted yet is cut off rather than
   lying across the buttons underneath it. The fit is the normal case; this is what
   the abnormal one should look like. */
.gp__stage {
  position: relative; height: var(--sheet-h, 400px); margin-bottom: 12px; overflow: hidden;
}
.gp__stage .paperwrap { position: relative; padding: 0; }

/* Four transparent buttons floating over the sheet, sized from what the sheet
   actually measures rather than 100%: the scale is capped at 1, so on a wide
   screen the sheet is narrower than its wrapper and a percentage overlay would
   sit off to one side of it. */
.gp__hits {
  position: absolute; top: 0; left: var(--sheet-x, 0px);
  width: var(--sheet-w, 100%); height: var(--sheet-h, 100%);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.gp__hit {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0;
  padding: 6px; margin: 0; font: inherit; color: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
  position: relative; display: grid; align-content: center; justify-items: stretch;
}
/* A tap on a transparent button is otherwise completely silent. */
.gp__hit:active::after {
  content: ''; position: absolute; inset: 5px;
  border: 2px solid var(--green-700); border-radius: 7px;
}
/* An empty quadrant keeps the ruled-paper look the old fake preview had. It sits
   on this layer, so the sheet that prints still carries its honest "not built yet"
   line, which is the right thing to take to the course as a to-do. */
.gp__hit.is-empty {
  background-image: repeating-linear-gradient(transparent 0 7px, rgba(20,24,28,.05) 7px 8px);
}
.gp__hit.is-empty::before {
  content: ''; position: absolute; inset: 7px;
  border: 1.5px dashed var(--line); border-radius: 7px;
}
/* One caption, the same in all four quadrants: a band across the middle, full
   width, opaque. Centred is where the eye lands, and a quadrant is a thumbnail
   rather than something you read, so there is nothing underneath worth protecting.
   Full width rather than shrink-wrapped, so the four read as one set instead of
   two: built quadrants had a strip and empty ones a floating box, which made the
   card look like it had two kinds of thing on it. */
.gp__cap {
  position: relative; display: grid; gap: 1px;
  width: 100%; min-width: 0; text-align: center;
  background: rgba(255,255,255,.96); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 9px 7px;
  box-shadow: 0 2px 10px rgba(20,24,28,.10);
}
/* The state line, with the tick small and in front of it. On the label line the
   tick was a badge on a heading, and at "Pre-round routine" length it pushed the
   second word onto a line of its own. Down here it marks the state, which is what
   it was reporting on all along. Grey for empty, green for built, the same pair
   the label uses. */
.gp__capState {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0;
}
.gp__tick {
  flex: none; display: grid; place-items: center; width: 12px; height: 12px;
  border-radius: 50%; background: var(--muted); color: #fff; font-size: 8px; line-height: 1;
}
.gp__hit.is-ready .gp__tick { background: var(--green-700); }
/* A little smaller and a little tighter than the rest of the app's small caps:
   "PRE-ROUND ROUTINE" is seventeen characters and half a quadrant is 116px, so at
   the usual 10px and .04em it wrapped. French still wraps, on the hyphen, which is
   a clean enough break to live with. */
.gp__capLabel {
  min-width: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
  line-height: 1.2; text-transform: uppercase; color: var(--muted);
}
.gp__hit.is-ready .gp__capLabel { color: var(--green-700); }
.gp__sub {
  min-width: 0; font-size: 11px; color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gp__actions { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gp__print { flex: 1; }
.gp__share { flex: 1; }

/* Gameplan home: plan library */
.gp__next { margin-bottom: 20px; }
.gp__plans { margin-bottom: 16px; }
.gp__cardList { display: grid; gap: 10px; }
.gp__routines { margin-bottom: 16px; }
.gp__homeActions { display: flex; gap: 10px; margin-bottom: 16px; }
.gp__homeActions .btn { flex: 1; }

/* Plan card */
.gp__card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; text-align: left; cursor: pointer;
  transition: box-shadow .12s ease;
}
.gp__card:active { box-shadow: 0 0 0 3px rgba(47,125,90,.12); }
.gp__card--next { border-color: var(--green-500); background: rgba(47,125,90,.03); }
.gp__cardBody { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gp__cardCourse { font-weight: 800; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp__cardCity { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.gp__cardDot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); flex: none; }
.gp__cardName { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.gp__cardDate { font-size: 12px; color: var(--green-700); }
/* Swipe actions (favourite + delete) */
.gp__swipe { position: relative; overflow: hidden; border-radius: 8px; transition: height .3s ease, opacity .3s ease; }
.gp__swipeActions { position: absolute; right: 0; top: 0; bottom: 0; display: flex; }
.gp__swipeFav, .gp__swipeDel {
  width: 72px; border: 0; color: #fff; font-size: 12px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.gp__swipeFav { background: var(--green-700); }
.gp__swipeDel { background: var(--danger); border-radius: 0 8px 8px 0; }
.gp__swipe .gp__card { position: relative; z-index: 1; will-change: transform; }
.gp__star { display: inline-block; color: var(--muted); font-size: 17px; line-height: 1; margin: -6px 6px -6px -6px; padding: 6px; cursor: pointer; vertical-align: -1px; }
.gp__star.is-on { color: #F2C200; }

.gp__cardRight { flex: none; text-align: center; min-width: 44px; }
.gp__cardPct { display: block; font-size: 20px; font-weight: 800; color: var(--green-700); line-height: 1; }
.gp__cardReady { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.gp__empty { padding: 8px 0; }
.gp__steps { list-style: none; margin: 0 0 20px; padding: 0; counter-reset: step; }
.gp__step { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-bottom: 14px; }
.gp__step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-700); color: #fff; font-weight: 700; font-size: 14px; grid-row: 1 / 3; }
.gp__step b { font-size: 15px; }
.gp__step span { font-size: 13px; color: var(--muted); grid-column: 2; }

/* New plan form inside a sheet */
.gp__newForm { padding: 0 16px 16px; display: grid; gap: 10px; }
.gp__fieldLabel { font-size: 13px; font-weight: 600; color: var(--muted); }
.gp__chips { display: flex; gap: 6px; }
.gp__formActions { display: flex; gap: 8px; justify-content: flex-end; }
.gp__check { width: 22px; text-align: center; font-weight: 700; color: var(--green-700); flex: none; }
.chip { border: 1px solid var(--border); border-radius: 10px; padding: 4px 12px; font-size: 13px; background: #fff; cursor: pointer; }
.chip:active { background: var(--green-50); }

/* Plan page */
.planpage { padding: 0 0 32px; }

/* Header banner */
.pp__header {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--green-900); color: #fff; border-radius: 8px;
  padding: 20px; margin-bottom: 20px; position: relative;
}
.pp__back {
  position: absolute; top: 12px; left: 12px; border: 0; background: none;
  color: rgba(255,255,255,.7); font-size: 24px; line-height: 1; padding: 4px;
  cursor: pointer;
}
.pp__back:hover { color: #fff; }
.pp__headerBody { flex: 1; padding-top: 20px; }
.pp__name {
  font-size: 22px; font-weight: 800; margin: 0 0 2px; color: #fff; cursor: pointer;
  border-bottom: 1px dotted rgba(255,255,255,.25); display: inline;
}
.pp__name:hover { border-bottom-color: rgba(255,255,255,.6); }
.pp__course { font-size: 14px; color: rgba(255,255,255,.7); margin: 4px 0 0; }
.pp__dateBtn {
  border: 0; background: none; padding: 0; margin-top: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.pp__dateText { font-size: 13px; color: rgba(255,255,255,.6); }
.pp__dateAdd { font-size: 13px; color: var(--green-500); }
.pp__ring { flex: none; width: 56px; height: 56px; position: relative; margin-top: 20px; }
.pp__svg { width: 56px; height: 56px; }
.pp__ringLabel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
}

/* Four parts as cards */
.pp__parts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
@media (max-width: 400px) { .pp__parts { grid-template-columns: 1fr; } }
.pp__part {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: 7px; border: 1px solid var(--border);
  background: #fff; text-align: left; cursor: pointer; width: 100%;
  transition: box-shadow .15s ease;
}
.pp__part:active { box-shadow: 0 0 0 3px rgba(47,125,90,.12); }
.pp__part.is-static { cursor: default; }
.pp__part.is-static:active { box-shadow: none; }
.pp__part.is-empty { border-style: dashed; border-width: 1px; }
.pp__partNum {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--green-700); color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pp__part.is-empty .pp__partNum { background: var(--muted); }
.pp__partBody { flex: 1; min-width: 0; }
.pp__partLabel { display: block; font-weight: 700; font-size: 13px; color: var(--ink); }
.pp__partValue {
  display: block; font-size: 12px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp__part.is-empty .pp__partValue { color: var(--green-700); }
.pp__partChev { font-size: 18px; color: var(--muted); flex: none; line-height: 1.4; }
.pp__teeDot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; vertical-align: middle; border: 1px solid rgba(0,0,0,.12); }

/* Hole grid */
.pp__holeGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px; margin-bottom: 24px;
}
.pp__cell {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: #fff; text-align: left; cursor: pointer; width: 100%;
  min-height: 48px; transition: box-shadow .12s ease;
}
.pp__cell:active { box-shadow: 0 0 0 3px rgba(47,125,90,.12); }
.pp__cell.is-done { border-color: var(--green-500); background: rgba(47,125,90,.04); }
.pp__cellNum { font-weight: 800; font-size: 13px; color: var(--muted); }
.pp__cell.is-done .pp__cellNum { color: var(--green-700); }
.pp__cellClubs { font-size: 12px; color: var(--ink); margin-top: 2px; }
.pp__cellEmpty { font-size: 16px; color: var(--muted); margin-top: 1px; }
.pp__cellNote { font-size: 11px; color: var(--muted); font-style: italic; margin-top: 1px; }

/* Primary action row */
.pp__primary { display: flex; gap: 10px; margin-bottom: 12px; }
.pp__mainBtn { flex: 1; }

/* Secondary links */
.pp__secondary { display: flex; justify-content: center; gap: 24px; padding: 4px 0 12px; }
.pp__link {
  border: 0; background: none; font-size: 14px; font-weight: 600;
  color: var(--green-700); cursor: pointer; padding: 4px 0;
}
.pp__link:hover { text-decoration: underline; }
.pp__link--danger { color: var(--danger); }

.btn--danger { background: none; border: 1px solid var(--danger); color: var(--danger); }
.btn--danger:active { background: rgba(220,38,38,.08); }
.btn--ghost { background: none; border: 0; padding: 0; cursor: pointer; }
.btn--small { padding: 6px 14px; font-size: 13px; }

/* Planner first-time hints */
.pl__hint { position: absolute; z-index: 500; background: rgba(0,0,0,.78); color: #fff; font-size: 13px; padding: 8px 14px; border-radius: 6px; pointer-events: none; animation: plHintIn .4s ease-out; max-width: 200px; }
.pl__hint--target { top: 50%; left: 50%; transform: translate(-50%, -80%); }
.pl__hint--lock { bottom: 130px; left: 50%; transform: translateX(-50%); }
@keyframes plHintIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Course Planner: map underneath, everything else floating over
   ============================================================ */

/* The map fills everything between the brand bar and the tabs: no page padding,
   edge to edge, but the app is still visibly the app. A satellite view of one hole
   boxed inside 16px of margin is a picture of a golf hole rather than something
   you can work on; losing the header and the tabs is a different mistake. */
/* Full bleed. A hole is a photograph of a place you are about to walk, and it was
   being shown in the letterbox between the app bar and the tabs. Everything the
   screen needs floats on top of it, so nothing is lost by taking the whole
   viewport, and the back button in the corner is the way out. */
.pl {
  position: fixed; inset: 0; z-index: 4; overflow: hidden;
  background: var(--green-900);
}
/* The floating Albert would land on the controls, which are the part of the screen
   you are actually pressing. He is one tap away in the tab bar regardless. */
body.has-map .fab,
body.has-map .appbar,
body.has-map .tabbar { display: none; }
/* The outlet still scrolls behind a fixed child, so it is pinned while the map is
   up. Otherwise a flick on the bottom sheet drags the page underneath it. */
body.has-map { overflow: hidden; }

.pl__map { position: absolute; inset: 0; }
/* Leaflet writes its own z-index stack; keep it under the floating chrome. */
.pl__map .leaflet-pane, .pl__map .leaflet-control { z-index: 1; }

/* Two corners of chrome and nothing else on the grass. The old layout put a
   column of nine white boxes down the left, which is a third of the hole. */
.pl__back {
  position: absolute; z-index: 800; left: 12px; top: calc(12px + env(safe-area-inset-top));
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: #fff; color: var(--ink);
  font-size: 24px; font-weight: 700; line-height: 1; box-shadow: 0 2px 12px rgba(0,0,0,.34);
}

/* One card. The distance left is the number the screen exists to produce, so it
   is the only thing set at display size. */
/* Everything that floats on the right, stacked, so nothing has to guess how tall
   the thing above it is. The yardage card grows a line when a club is aimed and
   another when there is trouble in the dispersion ring. */
.pl__right {
  position: absolute; z-index: 500; right: 12px; top: calc(12px + env(safe-area-inset-top));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  max-width: calc(100% - 84px); pointer-events: none;
}
.pl__right > * { pointer-events: auto; }
.pl__hud {
  background: rgba(255,255,255,.94); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  padding: 9px 14px 8px; text-align: right; min-width: 92px;
}
.pl__hudMain { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
.pl__toGreen {
  font-family: var(--serif); font-size: 30px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--green-900);
  font-variant-numeric: tabular-nums;
}
.pl__hudUnit { font-size: 11px; font-weight: 700; color: var(--muted); }
.pl__hudLabel {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-top: 1px;
}
.pl__shotLine {
  display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 800; color: var(--green-700); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pl__shotLine.is-on { display: block; }
/* Trouble inside the ring, in words. An amber circle on a satellite photograph is
   not something anyone reads as "the water is in play". */
.pl__spreadNote {
  display: none; margin-top: 4px; font-size: 11px; font-weight: 800;
  color: #B4741B; white-space: nowrap;
}
.pl__spreadNote.is-on { display: block; }
/* The metres on a dispersion ring. Small and light: it labels the circle, it is
   not a number you read the hole by. */
.pl__ring {
  display: inline-block; padding: 1px 6px; border-radius: 5px;
  background: rgba(10,14,12,.72); color: #fff;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.pl__ring--warn { background: #B4741B; }

/* Controls live at the bottom, in reach of a thumb, and off the hole. */
/* A white sheet on the bottom edge, full width. It used to float as a dark bar with
   a margin on three sides, which cost space and still cut the hole's length off
   after the stroke index. Welded to the edge it reads as the sheet it is: swipe it
   up for every hole. Its height is a variable so the rail and the zoom button can
   sit clear of it. */
.pl { --pl-sheet: 128px; }
/* One line more when the bag is the stock one and the sheet says so. */
.pl.is-stock { --pl-sheet: 156px; }
.pl__stockHint {
  display: block; width: 100%; margin: 0 0 6px; padding: 7px 12px;
  border: 0; border-radius: 7px; background: var(--data-amber-50);
  color: #7A4E13; font-size: 12px; font-weight: 700; text-align: left;
}
.pl__sheet {
  position: absolute; z-index: 600; left: 0; right: 0; bottom: 0;
  padding: 0 12px env(safe-area-inset-bottom);
  background: #fff; border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,.22);
  touch-action: none;
}
.pl__grab {
  display: block; width: 100%; height: 16px; border: 0; padding: 0; background: none;
}
.pl__grab::after {
  content: ''; display: block; width: 38px; height: 4px; margin: 6px auto 0;
  border-radius: 2px; background: #D5DADF;
}

/* The shots committed to on this hole, under the distance on the right. The map
   already draws them on the fairway, but a plan is also something you read: driver,
   seven iron, pitching wedge is the sentence you take to the tee. Hidden until
   there is one, so an unplanned hole is just the hole. */
.pl__shots {
  display: none; margin: 0; padding: 6px; list-style: none;
  width: 116px; border-radius: 9px;
  background: rgba(18, 42, 33, .72);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0,0,0,.32);
}
.pl__shots.is-on { display: grid; gap: 3px; }
.pl__shot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px;
  padding: 3px 5px; border-radius: 6px; color: #fff;
}
/* What the shot leaves, under it, lighter: a sequence, not a sum to do. */
.pl__shotLeft {
  flex-basis: 100%; padding-left: 21px;
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.66);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pl__shotNum {
  flex: none; display: grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: rgba(255,255,255,.20);
  font-size: 9px; font-weight: 800;
}
.pl__shotClub {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl__shotDist {
  flex: none; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: rgba(255,255,255,.86);
}

/* Whole hole, or in on the green. One control, on the right under the shots, so
   the two ways of looking at a hole are asked for rather than done to you. */
.pl__zoom {
  position: absolute; z-index: 600; right: 12px;
  bottom: calc(var(--pl-sheet) + 12px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(18, 42, 33, .72);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.32);
}

/* The whole bag down the left, every club in view. It was a wheel you flicked to a
   centre line, and with a full bag half of it was always out of sight. Fourteen is
   the most a bag holds, and fourteen fit when the chips share the height: each one
   grows to fill its share and stops at a comfortable size on a tall phone. */
.pl__rail {
  position: absolute; z-index: 700; left: 8px;
  top: calc(66px + env(safe-area-inset-top));
  bottom: calc(var(--pl-sheet) + 10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 4px;
  touch-action: none;
}
.pl__club {
  flex: 1 1 0; min-height: 0; max-height: 46px; width: 54px;
  display: grid; place-content: center; justify-items: center; gap: 0;
  background: rgba(255,255,255,.92); border: 1.5px solid transparent; border-radius: 7px;
  padding: 0 4px; color: var(--ink); box-shadow: 0 1px 6px rgba(20,24,28,.18);
  transition: background .14s ease;
}
.pl__club b { font-size: 13px; font-weight: 800; line-height: 1.1; }
.pl__club small { font-size: 10px; font-weight: 700; line-height: 1.1; color: var(--muted); }
/* The club in play is the dark one. Against pale chips it is the only thing that
   reads at a glance on a bright satellite photograph. */
.pl__club.is-on {
  border-color: var(--green-900); background: var(--green-900); color: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.42);
}
.pl__club.is-on small { color: rgba(255,255,255,.82); }

.pl__hrow { display: flex; align-items: center; gap: 10px; padding: 2px 0 8px; }
.pl__nav {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: #F4F6F8;
  font-size: 19px; color: var(--ink); line-height: 1;
}
.pl__nav:disabled { opacity: .3; }
/* The hole, whole: number big, then par and index, then the length and the tees
   it is measured from. A button, because tapping it opens every hole. */
.pl__hmid {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; background: none; padding: 0; color: var(--ink); text-align: left;
}
.pl__holeNum {
  font-family: var(--serif); font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: var(--green-900); font-variant-numeric: tabular-nums;
}
.pl__hinfo { display: grid; gap: 1px; min-width: 0; }
.pl__holeFacts {
  font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.pl__holeLen {
  font-size: 12px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl__actions { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.pl__icon {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: #F4F6F8;
  font-size: 16px; color: var(--ink);
}
.pl__icon:disabled { opacity: .35; }
/* A hole with a note on it says so, since the note is not otherwise on screen. */
.pl__note.is-on { background: var(--green-900); color: #fff; border-color: var(--green-900); }
.pl__lock {
  flex: 1; height: 42px; background: var(--green-700); color: #fff; border: 0; border-radius: 999px;
  padding: 0 16px; font-weight: 800; font-size: 14px; white-space: nowrap;
}
.pl__lock:disabled { background: #E9ECEF; color: #9AA3AB; }
/* The hole is planned. Moving on is the obvious thing to do, not a commitment. */
.pl__lock--done { background: var(--green-900); color: #fff; }

/* Every hole, slid up over the map. The current hole is filled, one planned to the
   green has a tick, one begun has a dot. The tees sit at the foot. */
.pl__holes {
  position: absolute; inset: 0; z-index: 900;
  background: rgba(10,14,12,0); pointer-events: none;
  transition: background .22s ease;
}
.pl__holes.is-open { background: rgba(10,14,12,.38); pointer-events: auto; }
.pl__holesSheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  background: #fff; border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,.22);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.pl__holes.is-open .pl__holesSheet { transform: none; }
.pl__hgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 6px 0 14px; }
.pl__hbtn {
  position: relative; display: grid; place-content: center; justify-items: center;
  height: 52px; border: 0; border-radius: 9px; background: #F4F6F8; color: var(--ink);
}
.pl__hbtn b { font-size: 17px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pl__hbtn small { font-size: 10px; font-weight: 700; color: var(--muted); }
.pl__hbtn.is-cur { background: var(--green-900); color: #fff; }
.pl__hbtn.is-cur small { color: rgba(255,255,255,.75); }
.pl__hcheck {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--data-green); color: #fff; font-size: 11px; font-weight: 900;
  box-shadow: 0 0 0 2px #fff;
}
.pl__hbtn.is-begun::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--data-amber);
}
.pl__tee {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1.5px solid transparent; border-radius: 9px;
  background: #F4F6F8; font: inherit; color: var(--ink); text-align: left;
}
.pl__tee.is-cur { border-color: var(--green-900); background: #fff; }
.pl__teeList { display: grid; gap: 6px; }
.pl__teeMore { font-size: 20px; line-height: 1; color: var(--muted); }
.pl__teeName { flex: 1; font-weight: 800; color: var(--ink); }
.pl__teeLen { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The tee, a handle you can drag. The hit area is wider than the dot so a thumb
   finds it. A tee the golfer has moved carries a second ring: theirs, not ours. */
/* Centred by position, not by grid: Leaflet's stylesheet loads after this one and
   sets its markers to display: block, which undid the grid and left the dot in the
   top corner of its box, off the end of the line. */
.pl__teeHandle { cursor: grab; }
.pl__teeDot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%;
  background: #2F7D5A; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.pl__teeDot.is-moved { box-shadow: 0 0 0 3px #2F7D5A, 0 0 0 5px #fff, 0 1px 8px rgba(0,0,0,.5); }

/* Map furniture. The pin is a teardrop so its point is the actual target, which a
   circle cannot express. */
.pl__pin {
  display: block; width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
  background: #E8A33D; border: 3px solid #fff; transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* A shot is a circle on the line with its distance in it, and the club under it.
   As a pill carrying "7 iron · 138 m" every label was a different width and the
   line read as a row of tags; as a disc they read as the shots they are, and the
   eye follows the hole rather than the text. */
.pl__seg {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto;
  border-radius: 50%; background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0,0,0,.38);
}
.pl__seg--live { background: var(--green-700); color: #fff; }
.pl__segClub {
  display: block; margin: 3px auto 0; width: max-content; max-width: 92px;
  border-radius: 999px; padding: 1px 7px;
  background: rgba(20,24,28,.62); color: #fff;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}

/* ============================================================
   Intel card: one sheet, four quadrants, two folds
   ============================================================ */

.card-opts { display: grid; gap: 12px; margin-bottom: 14px; }
.card-opt { display: grid; gap: 6px; }
.card-optLabel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.card-print { width: 100%; }
.card-hint { margin: 10px 2px 18px; }

/* On screen the sheet is a preview: shrunk to the width available, with the paper
   shadow that tells you it is a physical object. In print it is the page. */
/* On screen the sheet is a preview at true size, scaled down to fit. The wrapper
   is given the scaled height in JS, because a transform does not affect layout and
   the page would otherwise reserve a full 297mm of empty space below it. */
.paperwrap { padding-bottom: 24px; }
.paper {
  position: relative; background: #fff; color: #14181C;
  box-shadow: 0 6px 24px rgba(20,24,28,.16);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  transform-origin: top left;
  transform: translateX(var(--paper-x, 0px)) scale(var(--paper-sx, 1), var(--paper-sy, 1));
  font-family: var(--font);
}
.paper--a4 { width: 210mm; height: 297mm; }
.paper--letter { width: 216mm; height: 279mm; }

.paper__fold { position: absolute; background: repeating-linear-gradient(transparent 0 3mm, #C9CDD1 3mm 5mm); }
.paper__fold--v { left: 50%; top: 0; bottom: 0; width: .3mm; }
.paper__fold--h { top: 50%; left: 0; right: 0; height: .3mm;
  background: repeating-linear-gradient(90deg, transparent 0 3mm, #C9CDD1 3mm 5mm); }
/* The emailed PDF is drawn by html2canvas, which cannot paint a repeating gradient,
   so the folds went missing from it. On the copy it draws, they are dashed borders. */
.paper--capture .paper__fold { background: none; }
.paper--capture .paper__fold--v { width: 0; border-left: .35mm dashed #C9CDD1; }
.paper--capture .paper__fold--h { height: 0; border-top: .35mm dashed #C9CDD1; }

.paper__q { padding: 8mm 7mm; overflow: hidden; }
.paper__q--tl { grid-area: 1 / 1; }
.paper__q--tr { grid-area: 1 / 2; }
.paper__q--bl { grid-area: 2 / 1; }
.paper__q--br { grid-area: 2 / 2; }

.panel { height: 100%; display: flex; flex-direction: column; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 4mm;
  border-bottom: .4mm solid #14181C; padding-bottom: 1.6mm; margin-bottom: 2.6mm; }
.panel__label { font-size: 9pt; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.panel__meta { font-size: 7pt; color: #5A6169; white-space: nowrap; }
.panel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8mm; }
.panel__row { display: grid; grid-template-columns: 7mm 1fr; gap: 2mm; font-size: 7.6pt; line-height: 1.32; }
.panel__mins, .panel__num { font-weight: 800; font-size: 7.6pt; }
.panel__mins::after { content: "'"; }
.panel__body b { font-weight: 800; }
.panel__foot, .panel__trigger { margin: auto 0 0; padding-top: 2.5mm; font-size: 8pt; font-style: italic; }
.panel__trigger { font-style: normal; font-weight: 800; font-size: 10pt; text-align: center; }
.panel__missing { font-size: 8pt; color: #8A9098; }
.panel__player { display: flex; justify-content: space-between; gap: 3mm; font-size: 7pt; color: #5A6169; margin-bottom: 2mm; }
.panel__date { flex: 1; border-bottom: .3mm solid #9AA0A6; max-width: 26mm; }

/* The scorecard. Printed columns on the left, written columns on the right, and
   the written cells get the room because they are what has to be read back. */
.sc {
  width: 100%; font-size: 7pt;
  /* Each rule drawn once: cells own their right and bottom edge, the table its top
     and left. Collapsed borders come out doubled in the PDF capture. */
  border-collapse: separate; border-spacing: 0;
  border-top: .2mm solid #8A9097; border-left: .2mm solid #8A9097;
}
.sc th {
  font-size: 5.6pt; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  background: #E8EAEC; padding: .8mm 0; text-align: center;
  border-right: .2mm solid #8A9097; border-bottom: .2mm solid #8A9097;
}
/* Thin grey rules, as on the old card: the pencil marks are what should stand out. */
.sc td {
  border-right: .2mm solid #8A9097; border-bottom: .2mm solid #8A9097; text-align: center; height: 4.9mm; padding: 0; }
.sc--h { width: 6%; font-weight: 800; }
.sc--p, .sc--i { width: 6.5%; color: #5A6169; }
.sc--d { width: 9%; color: #5A6169; }
.sc--w { width: 15%; background: #fff; }
.sc--dir { width: 17%; white-space: nowrap; }
/* Empty circles to fill in with a pencil: three for left, centre and right (the
   header names them), one for the fairway. Easy to fill and easy to read back
   from a photo. */
.sc__o {
  display: inline-block; width: 3mm; height: 3mm; margin: 0 .4mm; box-sizing: border-box;
  border: .2mm solid #8A9097; border-radius: 50%; vertical-align: middle;
}
.sc__sum td { background: #E8EAEC; font-weight: 800; }
.sc__sum .sc--w, .sc__sum .sc--dir { background: #fff; }
/* Par 3: nothing to circle, so a dash where the circles would be. */
.sc td.sc--na { color: #9AA0A6; }

/* The hole plan: eighteen lines, each the clubs you decided on and your own note
   about the hole. Three columns rather than a run-on line, so a long note wraps
   inside its own column and the eighteen rows still line up, which is the one
   thing this quadrant has to do. */
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7mm; }
.plan__row {
  display: grid; grid-template-columns: 5mm minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 1.6mm; font-size: 7.2pt;
  border-bottom: .2mm dotted #C9CDD1; padding-bottom: .7mm;
}
.plan__h { font-weight: 800; }
.plan__shots { color: #14181C; }
.plan__note { color: #4A5158; font-style: italic; }

/* A4, with margins a home printer can actually print inside: 12 mm top and bottom,
   8.6 mm at the sides. It used to be margin 0, which most printers clipped or
   pushed onto a second page. The two margins are in A4's own proportion, so the
   sheet below keeps its shape at 91.8 per cent and its folds stay on the paper's
   centre lines. The Print button prints the PDF made with the same margins
   (planning.js, cardPdfBlob); this is for the browser's own Print menu. */
@page { size: A4; margin: 12mm 8.6mm; }

@media print {
  /* Only the sheet exists. Everything else is the app around it. Named by what it
     is rather than by listing every block on the screen: the old list had to be
     edited every time the Gameplan screen grew a row, and forgetting meant a
     button printed on the card. */
  .appbar, .tabbar, .fab, .nudge, .backlink, .noprint { display: none !important; }

  /* Any padding left on the shell is added to the sheet's own height and pushes
     a second, empty page out of the printer. The chain from html down to the
     wrapper is flattened to nothing so the sheet is the only thing with size. */
  html, body, .shell, .outlet, .section, .gp__stage, .paperwrap {
    background: #fff !important; margin: 0 !important; padding: 0 !important;
    min-height: 0 !important; overflow: visible !important; display: block !important;
  }
  .shell, .outlet, .section, .gp__stage, .paperwrap { height: auto !important; }

  /* The sheet at true A4 size, zoomed to fit inside the margins: 192.8 by 272.6 mm
     in a 192.8 by 273 mm printable area. Millimetres, not 100vw and 100vh, which
     iOS resolves against the screen rather than the page. zoom, not a transform,
     because zoom shrinks the layout box too and a transform leaves a full-size
     box behind to spill onto page two. */
  .paper {
    transform: none !important; box-shadow: none;
    width: 210mm !important; height: 297mm !important; zoom: .918;
    break-inside: avoid; break-after: avoid; page-break-after: avoid; overflow: hidden;
  }
}


/* ============================================================
   Adding a round
   ============================================================ */

.addround {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--green-700); color: #fff; border: 0; border-radius: 9px;
  padding: 13px 16px; margin-bottom: 10px; font-weight: 700; font-size: 15px;
}
.addround:active { background: var(--green-900); }
.addround__plus {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.2); font-size: 16px; line-height: 1; flex: none;
}

.ways { display: grid; gap: 10px; }
.way {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.way:active { background: #FAFAF8; }
.way__icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px;
  background: #EAF3EE; color: var(--green-700); font-size: 21px; flex: none;
}
.way__text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.way__title { font-weight: 700; font-size: 16px; }
.way__desc { font-size: 13px; color: var(--muted); line-height: 1.35; }
.way__chev { font-size: 22px; color: var(--muted); line-height: 1; flex: none; }

.entry__meta { display: grid; gap: 12px; margin-bottom: 20px; }

/* The card, in the same column order as the printed one, so a golfer copying from
   paper reads straight across rather than hunting for the right box. */
.entry__head, .entry__row {
  display: grid; grid-template-columns: 22px 1fr 1fr 1fr 34px 32px 32px; gap: 5px; align-items: center;
}
.entry__head {
  padding: 0 2px 6px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); text-align: center;
}
.entry__head span:first-child { text-align: left; }
.entry__row { padding: 3px 2px; }
/* A hairline where the turn is, because the two nines are the story. */
.entry__row.is-turn { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 9px; }
.entry__hole { font-size: 13px; font-weight: 800; color: var(--muted); }
.entry__num {
  width: 100%; min-width: 0; height: 38px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
/* 16px keeps iOS from zooming the page when the field takes focus, and the spinner
   arrows are useless at this size. */
.entry__num::-webkit-outer-spin-button, .entry__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.entry__num:focus { border-color: var(--green-700); outline: none; box-shadow: 0 0 0 3px rgba(47,125,90,.14); }
.entry__num--par { background: #F4F6F8; color: var(--muted); font-weight: 600; }
.entry__num.is-set { border-color: #C8D2CC; }

/* The green is a readout, not a control: same size and place as the ticks so the
   row still lines up, but flat, because there is nothing to press. */
.entry__green {
  height: 38px; display: grid; place-items: center; border-radius: 7px;
  border: 1px dashed var(--line); font-size: 14px; font-weight: 800; color: var(--muted);
}
.entry__green.is-yes { background: var(--data-green-50); border-color: var(--data-green); border-style: solid; color: var(--data-green); }
.entry__green.is-no { color: #B9C0C6; }

.entry__tick, .entry__drive {
  height: 38px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  font-size: 14px; font-weight: 800; color: var(--muted); padding: 0;
}
/* Down the middle is the good one, either side is not, and nothing recorded reads
   as nothing rather than as a miss. */
.entry__drive.is-mid { background: var(--data-green-50); border-color: var(--data-green); color: var(--data-green); }
.entry__drive.is-off { background: var(--data-amber-50); border-color: var(--data-amber); color: #7A4E13; }
.entry__tick.is-yes { background: var(--data-green-50); border-color: var(--data-green); color: var(--data-green); }
.entry__tick.is-no  { background: #F4F6F8; color: var(--muted); }
/* Par 3: no fairway, so no direction and no fairway tick to set. */
.entry__tick.is-na, .entry__drive.is-na { background: #F4F6F8; border-color: transparent; color: #C4CAD0; cursor: default; }

.entry__totals {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--green-900); color: var(--cream); border-radius: var(--radius);
  padding: 14px 12px; margin: 16px 0 18px;
}
.entry__tot { display: grid; justify-items: center; gap: 1px; }
.entry__totValue { font-family: var(--serif); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.entry__totRel { font-size: 11px; font-weight: 800; color: var(--accent); }
.entry__totLabel { font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .05em; }

.entry__save { width: 100%; }
.entry__hint { margin: 10px 2px 20px; text-align: center; }

/* Deleting a round: reachable, and never in the way. */
.round-danger { display: flex; justify-content: center; margin: 4px 0 24px; }

/* Sharing a round. The link is shown once it exists, because a golfer who granted
   it should be able to see what they granted. */
.share { display: grid; justify-items: center; gap: 6px; margin: 4px 0 6px; }
.share__btn { width: 100%; }
.share__state {
  margin: 0; font-size: 12px; color: var(--muted); word-break: break-all;
  text-align: center; font-variant-numeric: tabular-nums;
}
.share__off { font-size: 13px; }
/* Not .btn--ghost: that name was taken first, by the red one that logs you out. */
.btn--outline {
  background: #fff; color: var(--green-700); border: 1px solid var(--green-700);
}
.btn--outline:active { background: #EAF3EE; }

/* The plan picker, in the sheet the app already has for Albert. */
.gp__picker { height: auto; max-height: 70dvh; padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.gp__pickerTitle { margin: 0 18px 10px; }
/* The list takes what height is left and scrolls in it, so above the keyboard the
   search field stays put and the results scroll under it. */
.gp__pickerList { padding: 0 16px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* Above the keyboard there is no home indicator to clear. */
.sheet.is-keyboard { padding-bottom: 8px; transition: transform .28s cubic-bezier(.32,.72,0,1), bottom .18s ease; }
.gp__courseSearch { margin: 0 16px 10px; width: calc(100% - 32px); }

/* A date is eight characters wide. Stretched across the screen it reads as an
   input waiting for a sentence. */
.field--date { max-width: 190px; }

/* A date read off the photograph, offered rather than applied. */
.entry__dateNote { margin: 6px 2px 0; font-size: 12px; color: var(--muted); }

/* -----------------------------------------------------------------------
   AI consent overlay
   ----------------------------------------------------------------------- */
.consent-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.consent-card {
  background: var(--surface);
  border-radius: 10px;
  padding: 28px 24px 24px;
  max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.consent__title { margin: 0; font-size: 18px; font-weight: 700; }
.consent__body  { margin: 0; font-size: 14px; line-height: 1.55; }
.consent__details { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.consent__who   { margin: 0; font-size: 12px; color: var(--muted); }
.consent__actions { display: flex; gap: 10px; margin-top: 4px; }
.consent__actions .btn { flex: 1; }

/* -----------------------------------------------------------------------
   Settings additions
   ----------------------------------------------------------------------- */
.settings-section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  margin: 24px 4px 8px;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row__label { font-size: 14px; }
.settings-row--nav { cursor: pointer; }
.settings-row--nav:active { background: rgba(0,0,0,.04); margin: 0 -16px; padding: 10px 16px; }
.settings-row__text { display: flex; flex-direction: column; gap: 1px; }
.settings-row__sub { font-size: 12px; color: var(--muted); }
.settings-row__end { display: flex; align-items: center; gap: 8px; }
.settings-row__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.settings-row__chevron { color: var(--muted); font-size: 18px; line-height: 1; }
.me__meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.me__email { font-size: 14px; color: var(--muted); }
.btn--warn { border-color: var(--danger) !important; color: var(--danger) !important; }
.settings-link { font-size: 14px; color: var(--accent); text-decoration: none; }
.settings-link:hover { text-decoration: underline; }
.settings-note { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.settings-note--warn { color: var(--warning, #b45309); }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--danger { background: var(--danger, #dc2626); color: #fff; border-color: var(--danger, #dc2626); }
.btn--danger:hover { opacity: .85; }

/* -------------------------------------------------------------------------
   My Bag (WP-16)
   ------------------------------------------------------------------------- */

/* Club row layout: name/brand on the left, distance + actions on the right. */
.club-row__left  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.club-row__right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* Small muted category label above the club name. */
.club-cat  { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* The main club name. */
.club-name { font-size: 15px; font-weight: 500; }

/* Distance badge on the right side. */
.club-dist { font-size: 13px; color: var(--muted); min-width: 52px; text-align: right; }

/* Small transparent icon button for edit and delete within a row. */
.btn-icon {
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--muted);
  transition: background 120ms, color 120ms;
}
.btn-icon:hover       { background: var(--surface2, rgba(0,0,0,.06)); color: var(--text); }
.btn-icon--danger     { color: var(--danger, #dc2626); }
.btn-icon--danger:hover { background: rgba(220,38,38,.08); color: var(--danger, #dc2626); }

/* Two-button row at the bottom of the club list. */
.bag-actions { display: flex; gap: 10px; padding: 12px 0 4px; justify-content: flex-end; }

/* Wizard textarea. */
.bag-wizard__textarea { min-height: 80px; width: 100%; box-sizing: border-box; resize: vertical; }

/* Preview of parsed clubs inside a wizard step. */
.wiz-clubs-preview { margin: 12px 0 4px; }

/* Each club row inside the wizard preview. */
.wiz-club-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
}
.wiz-club-row:last-child { border-bottom: none; }
.wiz-club-row > span { flex: 1; min-width: 0; }

/* A brief legal line below the register form. */
.auth-legal { font-size: 12px; color: var(--muted); text-align: center; margin: 4px 0 0; line-height: 1.5; }
.auth-legal a { color: var(--muted); }

/* Impersonation banner: an admin viewing the app as a golfer, read-only (WP-16).
   The portal itself lives at admin.7-under.com. */
.impersonate-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--danger, #dc2626); color: #fff; padding: 10px 16px;
  font-size: 14px; font-weight: 600; flex-shrink: 0; z-index: 200;
  position: sticky; top: 0;
}
.impersonate-banner .btn {
  background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4);
  font-size: 13px; padding: 5px 14px; font-weight: 700;
}
.impersonate-banner .btn:hover { background: rgba(255,255,255,.32); }

/* ==========================================================================
   Paywall overlay (WP-12 + WP-14)
   ========================================================================== */

.paywall-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20,33,29,.6);
  display: flex; align-items: flex-end; justify-content: center;
  padding: env(safe-area-inset-top) 0 0;
}

@media (min-height: 600px) {
  .paywall-overlay { align-items: center; padding: 16px; }
}

.paywall {
  background: var(--surface);
  border-radius: 14px 14px 0 0;
  width: 100%; max-width: 480px;
  max-height: calc(100dvh - env(safe-area-inset-top) - 16px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}

@media (min-height: 600px) {
  .paywall { border-radius: 14px; max-height: calc(100dvh - 32px); }
}

.paywall__header {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 12px 14px 0; flex-shrink: 0;
}

.paywall__close {
  background: var(--cream); border: none; border-radius: 50%;
  width: 30px; height: 30px; font-size: 16px; line-height: 1;
  cursor: pointer; color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.paywall__close:hover { background: var(--line); }

.paywall__body {
  padding: 4px 24px 32px; display: flex; flex-direction: column; gap: 12px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

.paywall__title { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); }
.paywall__sub   { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
.paywall__loading { margin: 24px auto; color: var(--muted); text-align: center; }

/* Plan cards */
.paywall__plans { display: flex; gap: 10px; }

.paywall__plan {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px; border-radius: 8px;
  border: 2px solid var(--line); background: var(--cream);
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.paywall__plan:hover { border-color: var(--green-700); }
.paywall__plan.is-selected { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--surface)); }

.paywall__plan-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.paywall__plan-price { font-size: 18px; font-weight: 700; color: var(--ink); }
.paywall__plan.is-selected .paywall__plan-label { color: var(--green); }

.paywall__cta-note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.5; }
.paywall__renews   { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.paywall__legal    { margin: 0; font-size: 11px; color: var(--muted); text-align: center; line-height: 1.6; }
.paywall__no-offers { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }

.paywall__restore {
  background: none; border: none; padding: 0;
  font-size: 13px; color: var(--muted); text-decoration: underline;
  cursor: pointer; text-align: center; align-self: center;
}
.paywall__restore:hover { color: var(--ink); }

/* Stripe embedded form container */
.paywall__stripe-form { display: none; }

/* =============================================================
   Desktop / tablet layout
   Single breakpoint. The bottom tab bar rotates into a left
   sidebar; everything else shifts right to fill the gap.
   Two ways in:
   - 900px+ with a mouse or trackpad: a desktop or laptop.
     pointer:fine guards against wide-screen phones (e.g. Honor 90
     on MagicOS) that report 900px+ CSS width but are touch-only.
   - 744px+ and tablet-shaped, touch or not: an iPad, portrait or
     landscape (744 is the iPad mini). A phone is never that shape:
     it is at least 1.8 times as tall as it is wide in portrait and
     as wide as it is tall in landscape, so the aspect ratio keeps
     the Honor 90 out where pointer:fine kept the iPad out too.
   ============================================================= */
@media (min-width: 900px) and (pointer: fine),
       (min-width: 744px) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 5/3) {
  :root { --sidebar-w: 180px; }

  /* Shell: no bottom padding (tabbar is now on the left),
     padding-left pushes appbar + outlet clear of the sidebar. */
  .shell {
    padding-bottom: 0;
    padding-left: var(--sidebar-w);
  }

  /* Content area: comfortable padding, readable line length. */
  .outlet { padding: 28px 32px 40px; max-width: 860px; }

  /* ---- Left sidebar (was fixed bottom tabbar) ---- */
  .tabbar {
    /* Reposition: full-height strip on the left. */
    right: auto;
    bottom: 0;
    width: var(--sidebar-w);
    height: 100dvh;
    /* Override the 5-column grid with a vertical flex column. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Remove mobile chrome. */
    border-top: none;
    border-right: 1px solid var(--line);
    padding-bottom: 0;
    /* Safe-area: push content below the notch/status bar. */
    padding-top: max(16px, env(safe-area-inset-top));
    overflow-y: auto;
  }

  /* Brand name at the top of the sidebar. */
  .tabbar::before {
    content: '7 UNDER';
    display: block;
    font-family: var(--font);
    font-weight: 800;
    font-size: 15px;
    color: var(--green-900);
    letter-spacing: .5px;
    padding: 4px 16px 14px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    margin-bottom: 6px;
  }

  /* Tab items: horizontal icon + label rows. */
  .tab {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 7px;
    margin: 1px 8px;
    width: auto;
  }
  .tab__icon { font-size: 20px; flex-shrink: 0; }
  .tab.is-active {
    background: rgba(47,125,90,.10);
    color: var(--green-700);
  }
  /* Mobile lifts the icon 1px; that looks wrong in a horizontal row. */
  .tab.is-active .tab__icon { transform: none; }

  /* ---- Floating Albert button ---- */
  /* No tabbar to clear on desktop; anchor to viewport bottom. */
  .fab {
    bottom: 24px;
    right: 24px;
  }

  /* ---- Toasts ---- */
  /* Offset so they appear in the content area, not behind the sidebar. */
  .toasts {
    left: calc(var(--sidebar-w) + 12px);
    bottom: 24px;
  }

  /* ---- Sticky save button ---- */
  /* No tabbar height to clear; a small gap from the bottom is enough. */
  .sticky-save { bottom: 16px; }

  /* ---- Map view ---- */
  /* body.has-map already hides the tabbar; on desktop the sidebar
     vanishes too, so the map still fills the full viewport. */
  body.has-map .shell { padding-left: 0; }
}

/* Albert's tone in Settings: a three-stop slider with its labels under the stops. */
.tone { margin-bottom: 8px; }
.tone__range { width: 100%; accent-color: var(--green-700); margin: 6px 0 2px; }
.tone__labels { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--muted); }
.tone__hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; min-height: 2.6em; }
.tone__hint b { color: var(--ink, inherit); }

/* --- Play: in-round scoring ------------------------------------------------ */

.play { position: relative; min-height: 100%; }
.play__pane { padding: 16px 20px 32px; }
.play__setup { padding-top: 12px; }

/* Resume card on Rounds section and play setup. */
.play__resume { padding: 16px; margin: 12px 0; }
.play__resumeText { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.play__resumeActions { display: flex; gap: 12px; align-items: center; }

/* Round actions: Start and Add stacked, full width. Side by side, "Start a
   round" broke over two lines on a phone. */
.round-actions { padding: 0 20px; }
.round-continue { padding: 0 20px; }

/* Setup: the course, its tees, the plan and the card on one page. */
.play__label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 8px;
}
.play__tees { display: flex; flex-wrap: wrap; gap: 6px; }
.play__tee {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; padding: 6px 12px 6px 8px; font: inherit; font-size: 13px;
}
.play__tee.is-on { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.play__tee .teedot { width: 12px; height: 12px; }
.play__teeName { font-weight: 700; }
.play__teeLen { font-size: 11px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }
.play__teeFacts { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.play__plans .chip { padding: 7px 12px; font-size: 13px; }
.play__holesCard { display: grid; gap: 8px; }
.play__sc {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: 12px; font-variant-numeric: tabular-nums; text-align: center;
  background: #fff; border-radius: 7px; overflow: hidden;
}
.play__sc th, .play__sc td { padding: 4px 1px; border-bottom: 1px solid var(--line); }
.play__sc th { width: 2.6em; text-align: left; padding-left: 8px; font-size: 10px; font-weight: 700; color: var(--muted); }
.play__sc tr:last-child th, .play__sc tr:last-child td { border-bottom: 0; }
.play__scHead td { font-weight: 800; color: var(--ink); background: var(--cream); }
.play__scHead th { background: var(--cream); }
.play__scSi td, .play__scLen td { color: var(--muted); }
.play__scLen td { font-size: 10px; }
.play__startBar { margin-top: 20px; }
.play__startBar .btn { width: 100%; margin: 0; }

/* Map view: full bleed, everything floating over the tiles. */
.play__map { position: fixed; inset: 0; z-index: 100; background: #1a1a1a; --pl-sheet: 76px; }

/* Satellite tiles coming down in the background. */
.play__tileBar {
  position: absolute; z-index: 500; left: 50%; transform: translateX(-50%);
  top: calc(118px + env(safe-area-inset-top));
  width: 150px; height: 18px; border-radius: 6px; overflow: hidden;
  background: rgba(0,0,0,.55); display: none; pointer-events: none;
}
.play__tileBar.is-on { display: block; }
.play__tileFill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green-700); transition: width .3s ease; }
.play__tileText {
  position: relative; display: block; text-align: center; line-height: 18px;
  font-size: 10px; font-weight: 700; color: #fff;
}

/* The target: a ring a thumb can hold, with the aiming point in the middle. */
.play__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #fff; background: rgba(232,163,61,.35);
  box-shadow: 0 2px 10px rgba(0,0,0,.5); cursor: grab; touch-action: none;
}
.play__pin::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  transform: translate(-50%, -50%); border-radius: 50%; background: #E8A33D;
  box-shadow: 0 0 0 2px #fff;
}

/* Trouble inside the dispersion ring, said in words. */
.play__warn {
  position: absolute; z-index: 500; left: 50%; transform: translateX(-50%);
  top: calc(92px + env(safe-area-inset-top));
  background: #B4741B; color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 7px; display: none; pointer-events: none;
}
.play__warn.is-on { display: block; }

/* The plan written at home for this hole, beside the club rail. */
.play__plan {
  position: absolute; z-index: 500;
  left: 70px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); border-radius: 8px;
  padding: 7px 12px; box-shadow: 0 1px 6px rgba(0,0,0,.25); pointer-events: none;
}
.play__planLabel {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.play__planShots {
  list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.play__planShots li + li::before { content: '\203A'; margin-right: 8px; color: var(--muted); }
.play__planShots span { color: var(--muted); font-weight: 600; }
.play__planNote { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--ink); }

/* The pre-shot routine, slid in from a tab on the right edge of the map. */
/* Routine button: centred in the bottom bar, under the hole info. */
.play__routineTab {
  display: block; margin: 0 auto 4px; border: 0;
  background: var(--green-700); color: #fff; border-radius: 9px;
  padding: 5px 18px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  touch-action: manipulation;
}
.play__backdrop { z-index: 850; }
.play__backdrop:not(.sheet-backdrop) {
  position: fixed; inset: 0; background: rgba(30,42,38,.45);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
.play__backdrop.is-in { opacity: 1; pointer-events: auto; }
.play__routine {
  position: fixed; z-index: 900; top: 0; right: 0; bottom: 0; width: min(86vw, 380px);
  background: var(--surface, #fff); box-shadow: -8px 0 30px rgba(0,0,0,.3);
  padding: calc(16px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; transform: translateX(100%); transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.play__routine.is-in { transform: none; }
.play__routineHead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.play__routineHead h2 { flex: 1; margin: 0; font-size: 20px; }
.play__routineClose, .play__close {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: var(--cream); color: var(--ink); font-size: 16px; font-weight: 700;
}
.play__routineSteps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 14px; }
.play__routineSteps li {
  counter-increment: step; position: relative; padding-left: 40px;
  font-size: 17px; line-height: 1.35; font-weight: 600;
}
.play__routineSteps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-700); color: #fff; font-size: 14px; font-weight: 800;
}

/* Distance HUD at top centre. */
.play__map .pl__hud {
  position: absolute; z-index: 500;
  top: calc(12px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.94); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  padding: 8px 16px; pointer-events: none; white-space: nowrap;
}
.play__map .pl__hudMain {
  display: flex; align-items: baseline; gap: 2px;
}
.play__map .pl__hudSide {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.play__map .pl__hudSide .pl__hudLabel {
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.play__map .pl__distFront,
.play__map .pl__distBack {
  font-size: 14px; font-weight: 800; color: var(--green-900);
  font-variant-numeric: tabular-nums;
}

/* GPS status line. */
.play__map .pl__shotLine {
  position: absolute; z-index: 500;
  top: calc(68px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 7px;
  display: none; pointer-events: none;
}
.play__map .pl__shotLine.is-on { display: block; }

/* Hazard distance labels on the map. */
.pl__hazLabel {
  display: inline-block;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* Bottom bar: shared between map and score views. */
.pl__bottom {
  position: absolute; z-index: 600;
  bottom: 0; left: 0; right: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background: rgba(255,255,255,.96);
  box-shadow: 0 -1px 6px rgba(0,0,0,.12);
}
.pl__hbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 10px;
}
.play__map .pl__nav,
.play__score .pl__nav {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--cream); color: var(--ink);
  font-size: 22px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.play__map .pl__nav:disabled,
.play__score .pl__nav:disabled { opacity: .3; }
.pl__nav--next {
  background: var(--green-700) !important; color: #fff !important;
  font-size: 14px !important; font-weight: 700 !important;
  padding: 0 14px !important; border-radius: 14px !important;
  width: auto !important; white-space: nowrap;
}
.pl__hmid {
  flex: 1; text-align: center; min-width: 0;
}
.pl__holeNum {
  display: block; font-size: 16px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.1;
}
.pl__holeMeta {
  display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  line-height: 1.2;
}
.pl__icon {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: var(--cream); color: var(--ink);
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Score entry: one tap per number. */
.play__score { padding-bottom: 96px; }
.play__score .pl__bottom { position: fixed; }
.play__scoreHead { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.play__scoreHole {
  width: 52px; height: 52px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--green-900); color: #fff; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.play__scoreMeta { flex: 1; min-width: 0; display: grid; gap: 1px; }
.play__scoreMeta b { font-size: 18px; font-weight: 800; }
.play__scoreMeta small { font-size: 12px; font-weight: 600; color: var(--muted); }
.play__total { font-size: 12px; font-weight: 700; color: var(--green-900); font-variant-numeric: tabular-nums; }
.play__field { padding: 12px 0; border-top: 1px solid var(--line); }
.play__fieldLabel { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.play__picks { display: flex; gap: 6px; }
.play__pick {
  flex: 1 1 0; min-width: 0; height: 52px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; position: relative;
}
/* Par marked under its number, so the eye finds it without reading. */
.play__pick.is-mark::after {
  content: ''; position: absolute; left: 50%; bottom: 7px; width: 14px; height: 3px;
  transform: translateX(-50%); border-radius: 2px; background: var(--green-700); opacity: .5;
}
.play__pick.is-on { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.play__pick.is-on.is-under { background: var(--green-900); border-color: var(--green-900); }
.play__pick.is-on.is-over { background: #3E4A55; border-color: #3E4A55; }
.play__pick.is-on::after { background: #fff; }
.play__pick--more { color: var(--muted); }
.play__dirs { display: flex; gap: 6px; }
.play__dir {
  flex: 1; height: 58px; border-radius: 8px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 12px; font-weight: 700; color: var(--ink);
  display: grid; place-content: center; justify-items: center; gap: 2px;
}
.play__dirMark { font-size: 18px; line-height: 1; }
.play__dir.is-on { border-color: var(--green-700); background: var(--green-700); color: #fff; }

/* Derived, never tapped: GIR and up and down light up when the numbers say so. */
.play__derivedRow { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.play__derived {
  flex: 1; text-align: center; padding: 10px 0; border-radius: 8px;
  background: var(--cream); color: var(--muted); font-size: 13px; font-weight: 700; opacity: .7;
}
.play__derived.is-yes { background: var(--green-700); color: #fff; opacity: 1; }
.play__derived.is-no { opacity: 1; text-decoration: line-through; }

/* Scorecard grid. */
.play__card { padding-bottom: 100px; }
.play__grid {
  display: grid; grid-template-columns: 2em repeat(4, 1fr);
  gap: 1px; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; margin: 12px 0;
}
.play__gh {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); padding: 4px 2px; text-align: center;
}
.play__gc {
  border: 0; background: var(--cream); color: var(--ink);
  padding: 6px 2px; text-align: center; cursor: pointer;
  font: inherit; font-variant-numeric: tabular-nums;
}
.play__gc--h { font-weight: 800; background: transparent; }
.play__gc.is-set { color: var(--green-900); font-weight: 800; }

/* Menu sheet. Above the map, which sits at z-index 100; the generic sheet is 10,
   which put the menu behind the map where nobody could see it open. */
.play__menu {
  z-index: 900; height: auto; padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.play__danger .linkcard__title { color: var(--danger); }
.play__holeGrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin: 8px 0 16px;
}
.play__holeBtn {
  height: 44px; border-radius: 7px;
  border: 2px solid var(--line); background: var(--surface);
  font-size: 16px; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.play__holeBtn.is-current { border-color: var(--green-700); background: var(--green-700); color: #fff; }
.play__holeBtn.is-scored { border-color: var(--green-500); }
.play__menuActions { display: grid; gap: 4px; margin-top: 8px; }

.play__next { margin-top: 16px; width: 100%; }
.play__cardLink { margin-top: 12px; display: block; text-align: center; }

/* Stableford additions. */
.card-cell__dot { display: block; font-size: 8px; line-height: 1; color: var(--green-700); letter-spacing: 1px; }
.card-cell--pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.card-cell--pts.is-ok { color: var(--ok); }
.mark--pu { opacity: .45; text-decoration: line-through; }
.round-head__pts { font-size: 16px; font-weight: 800; color: var(--accent); margin-left: 8px; }
.round-card__pts { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 4px; }
.round-card__secondary { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.play__golferPar { font-size: 12px; color: var(--muted); margin: 4px 0 0; text-align: center; }
.play__pickUp { display: block; margin: 12px auto 0; font-size: 13px; }
.sc__dot { display: inline-block; font-size: 9px; color: var(--green-700); vertical-align: super; margin-left: 1px; }
.sc--gp { font-weight: 700; font-size: 9px; }

.stats__explain { margin: -4px 0 10px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.stat__verdict { display: block; margin-top: 4px; font-size: 10px; font-weight: 700; line-height: 1.3; color: var(--muted); }
.stat--good .stat__verdict { color: var(--ok, #2E7D32); }
.stat--poor .stat__verdict { color: var(--danger, #B42318); }

/* --- Tab pages: the photo to the top of the screen, on a phone -------------- */
/* No header bar on Home, Rounds, Gameplan and Train: the photo runs edge to edge
   and up under the status bar, with a soft shade at the top so the time and
   battery stay readable on a light sky. Home's is the tallest; the others are 15
   per cent lower. The page is already drawn under the status bar (viewport-fit=
   cover, black-translucent). Tablets and desktop keep the header and the framed
   photo. */
@media (max-width: 899px) {
  body.has-bleed .appbar { display: none; }
  /* Room at the top for whatever shows before the photo (a loading line), so it
     never sits under the time; the photo pulls back up over it. */
  body.has-bleed .outlet { padding-top: max(18px, env(safe-area-inset-top)); }
  .hero--bleed { margin: calc(-1 * max(18px, env(safe-area-inset-top))) -16px 18px; border-radius: 0; box-shadow: none; }
  .hero--bleed .hero__img { height: calc(200px + env(safe-area-inset-top)); }
  body.is-home .hero--bleed .hero__img { height: calc(236px + env(safe-area-inset-top)); }

  /* Scrolling up, the photo sticks once a strip of 52 px under the status bar is
     left: top is minus the photo height plus that strip, and the status bar height
     cancels out of both. Stuck, the title shrinks, the subtitle goes and the strip
     darkens, so the title and the time stay readable. */
  .hero--bleed { position: sticky; top: -148px; z-index: 6; }
  body.is-home .hero--bleed { top: -184px; }
  .hero--bleed::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: rgba(12,20,17,.6); opacity: 0; transition: opacity .2s ease;
  }
  .hero--bleed .hero__body { z-index: 2; transition: padding .2s ease; }
  .hero--bleed .hero__title { transition: font-size .2s ease; }
  .hero--bleed.is-stuck::after { opacity: 1; }
  .hero--bleed.is-stuck .hero__body { padding: 0 18px 14px; background: none; }
  .hero--bleed.is-stuck .hero__title { font-size: 19px; }
  .hero--bleed.is-stuck .hero__sub { display: none; }
  .hero--bleed::before {
    content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 0; pointer-events: none;
    height: calc(64px + env(safe-area-inset-top));
    background: linear-gradient(rgba(12,20,17,.5), rgba(12,20,17,0));
  }
  .hero__badge { position: absolute; z-index: 2; right: 14px; top: calc(10px + env(safe-area-inset-top)); }
}
@media (min-width: 900px) { .hero__badge { position: absolute; z-index: 2; right: 14px; top: 12px; } }

/* --- Performance center (WP-23): light tiles, slide-ins for the detail ------- */
.pc__body { display: grid; gap: 12px; }
.pc__windows { margin: 0; }
.pc-card, .pc-tile, .pc-par, .pc-chip {
  border: 0; font: inherit; color: inherit; text-align: left; background: var(--surface);
  border-radius: 10px; box-shadow: var(--shadow);
}
.pc-card { position: relative; display: grid; gap: 4px; padding: 14px; }
.pc-score__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-right: 14px; }
.pc-lab { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pc-big { display: block; font-family: var(--serif); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.pc-sub { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.pc-chev { position: absolute; right: 12px; top: 12px; color: #B7BCB4; font-size: 18px; line-height: 1; }
.pc-pill { flex: none; display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.pc-pill.is-good { background: #E3F4E8; color: #1F7A3A; }
.pc-pill.is-poor { background: #FCE8E6; color: #B42318; }
.pc-pill.is-ok   { background: #EEF1EE; color: var(--muted); }

/* One line each, scrolling sideways rather than stacking. */
.pc-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.pc-chips::-webkit-scrollbar { display: none; }
.pc-chip { flex: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pc-dot.is-good { background: #1F7A3A; } .pc-dot.is-poor { background: #B42318; } .pc-dot.is-info { background: #2F5DB0; }

.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pc-tile { position: relative; display: grid; gap: 3px; padding: 12px; align-content: start; }
.pc-tile__value { font-family: var(--serif); font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }

/* Typical for the handicap in the middle, the golfer as a dot; better is right. */
.pc-gauge { position: relative; height: 6px; border-radius: 3px; background: #E6EAE8; margin: 8px 0 3px; }
.pc-gauge.is-empty { opacity: .5; }
.pc-gauge__typical { position: absolute; left: 50%; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: #9AA0A6; border-radius: 1px; }
.pc-gauge__you { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); background: #FDAB3D; }
.pc-gauge__you.is-good { background: #00C875; } .pc-gauge__you.is-poor { background: #E2445C; }

.pc-pars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-par { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; text-align: center; }
.pc-par b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-par.is-worst { box-shadow: 0 0 0 2px #F2A9A9; }

.pc-prio {
  border-radius: 10px; padding: 14px; color: #fff;
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
}
.pc-prio .pc-lab { color: rgba(255,255,255,.75); }
.pc-prio p { margin: 4px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; }

/* The slide-in: as tall as its content, never taller than the sheet allows. */
.pc-sheet { height: auto; max-height: 88dvh; overflow-y: auto; }
.pc-sheet__body { display: grid; gap: 14px; padding: 4px 18px calc(22px + env(safe-area-inset-bottom)); }
.pc-sheet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.pc-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.pc-kv div { background: var(--cream); border-radius: 8px; padding: 10px 6px; text-align: center; display: grid; gap: 2px; }
.pc-kv b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-kv span { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pc-explain { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* --- Conversations with Albert (WP-26) ---------------------------------------- */
.chat { position: relative; }
.chat__head-actions { display: flex; gap: 2px; }
.chat__name { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__history {
  position: absolute; inset: 0; z-index: 5; background: var(--surface);
  display: flex; flex-direction: column; gap: 10px; padding: 10px 16px 16px; overflow: hidden;
}
.chat__history[hidden] { display: none; }
.chat__hhead { display: flex; align-items: center; gap: 10px; }
.chat__hhead b { flex: 1; font-size: 16px; }
.chat__hnew { border: 1.5px solid rgba(30,58,52,.3); background: none; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 800; color: var(--green-900); }
.chat__hsearch { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 15px; background: var(--cream); }
.chat__htopics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.chat__htopics::-webkit-scrollbar { display: none; }
.chat__htopic { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); }
.chat__htopic.is-on { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.chat__hlist { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; margin: 0 -6px; }
.chat__hgroup { margin: 10px 6px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chat__hrow { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding: 2px 4px; }
.chat__hrow.is-current { background: var(--cream); }
.chat__hopen { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; border: 0; background: none; padding: 8px 4px; font: inherit; color: inherit; }
.chat__hopen b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat__hopen span { font-size: 12px; color: var(--muted); }
.chat__hicon { flex: none; width: 32px; height: 32px; border: 0; background: none; border-radius: 6px; color: var(--muted); font-size: 15px; }
.chat__hicon.is-on { color: #C9A15B; }
.chat__hicon--danger { font-size: 19px; }
.chat__hempty { margin: 20px 6px; font-size: 14px; color: var(--muted); }

/* --- Me and Settings (WP-32) ------------------------------------------------------ */
/* Light grey with a dark green icon, everywhere in the app (owner, 19 Oct 2026,
   after trying it on Me and Golf profile). Each tile still carries a colour in
   --tile; it is not shown. */
.tile { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #F0F2F1; color: var(--green-900); font-size: 18px; box-shadow: inset 0 0 0 1px rgba(30,58,52,.06); }
.tile .icon svg { width: 18px; height: 18px; }

/* Me: the photo with the golfer on it, and three figures */
.me-hero .hero__img { height: 250px; }
.me-hero .hero__body { padding-bottom: 18px; }
.me-hero .hero__title { font-size: 30px; }
.me-facts { display: block; margin-top: 2px; font-size: 14px; color: rgba(255,255,255,.9); }
.me-stats { display: flex; gap: 22px; margin-top: 12px; }
.me-stat { display: grid; gap: 1px; }
.me-stat b { font-size: 24px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.01em; }
.me-stat small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.me-gear { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(16,32,28,.35); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.me-gear .icon svg { width: 21px; height: 21px; }

/* The plan as a club membership card */
.me-card { position: relative; overflow: hidden; margin: 0 0 22px; padding: 18px 18px 16px; border-radius: 16px; color: #F4EFE6;
  background: radial-gradient(120% 140% at 100% 0%, #2F6B55 0%, #1E3A34 45%, #142A25 100%);
  box-shadow: 0 10px 24px rgba(16,32,28,.28), inset 0 0 0 1px rgba(201,183,156,.35); z-index: 1; }
.me-card::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(201,183,156,.18); box-shadow: 0 0 0 22px rgba(201,183,156,.05); pointer-events: none; }
.me-card__top { display: flex; align-items: center; justify-content: space-between; }
.me-card__brand { font-weight: 900; letter-spacing: .28em; font-size: 12px; color: #C9B79C; }
.me-card__tier { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #E7D3A8, #B9965B); color: #2A2116; }
.me-card__name { margin: 18px 0 0; font-size: 19px; font-weight: 800; letter-spacing: .01em; }
.me-card__since { margin: 2px 0 0; font-size: 12px; color: rgba(244,239,230,.65); }
.me-card__line { margin: 12px 0 0; font-size: 14px; color: rgba(244,239,230,.92); }
.me-card__trial { display: grid; gap: 6px; margin-top: 10px; }
.me-card__trialBar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.me-card__trialBar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E7D3A8, #C9A227); }
.me-card__trialText { font-size: 12px; color: rgba(244,239,230,.75); }
.me-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.me-card__btn { border: 1px solid rgba(244,239,230,.4); background: rgba(255,255,255,.06); color: #F4EFE6; font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 999px; }
.me-card__btn--primary { border: 0; background: linear-gradient(135deg, #E7D3A8, #C9A227); color: #2A2116; }
.me-card--comp .me-card__tier { background: rgba(244,239,230,.16); color: #F4EFE6; }
.me-card--ended { background: linear-gradient(160deg, #3A3F3C, #232725); box-shadow: 0 10px 24px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.12); }
.me-card--ended .me-card__tier { background: rgba(255,255,255,.14); color: #F4EFE6; }
.me-email { text-align: center; font-size: 12px; color: var(--muted); margin: -6px 0 24px; }

.me-group, .set-group__title { margin: 0 0 6px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.me-list, .set-list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.me-row, .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: var(--ink); text-decoration: none; }
.me-row:last-child, .set-row:last-child { border-bottom: 0; }
.me-row:active, .set-row--link:active { background: rgba(0,0,0,.035); }
.me-row__label, .set-row__label { flex: 1; font-size: 15px; font-weight: 600; }
.me-row { justify-content: flex-start; }
.me-row__end { margin-left: auto; }
.set-row__start { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.me-row__end, .set-row__end { display: flex; align-items: center; gap: 8px; flex: none; }
.me-row__value, .set-row__value { font-size: 14px; color: var(--muted); }
.me-row__chevron, .set-row__chevron { color: var(--muted); font-size: 20px; line-height: 1; }
.me-row__dot { width: 8px; height: 8px; border-radius: 50%; background: #d97706; }

.set-group { margin-bottom: 6px; }
.set-list--controls { padding: 14px 16px; }
.set-list--controls .field-label:first-child { margin-top: 0; }
.set-row__text { display: grid; gap: 1px; min-width: 0; }
.set-row__sub { font-size: 12px; color: var(--muted); }
.set-row--soon .set-row__label { font-weight: 500; }
.set-soon { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: #F1F3F5; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.set-row--danger .set-row__label { color: #B42318; }
.set-row--warn .set-row__label { color: #a05e00; }
.set-group__note { margin: -10px 4px 18px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.set-group__note--warn { color: #a05e00; }
.set-delete { margin: -6px 0 18px; display: grid; gap: 10px; }
.set-delete .set-group__note { margin: 0 4px; }
.set-version { text-align: center; font-size: 12px; color: var(--muted); margin: 8px 0 28px; }

/* Me's photo is taller than the other tabs; the title strip still sticks (WP-32). */
.me-hero.hero--bleed .hero__img { height: calc(250px + env(safe-area-inset-top)); }
@media (max-width: 899px) { .me-hero.hero--bleed { top: -198px; } }

/* --- Settings in the 7 Under identity (WP-32) ---------------------------------- */
.set-head { position: relative; overflow: hidden; margin: 4px 0 20px; padding: 14px 18px 20px; border-radius: 16px; color: #F4EFE6;
  background: radial-gradient(120% 160% at 100% 0%, #2F6B55 0%, #1E3A34 50%, #142A25 100%);
  box-shadow: 0 8px 20px rgba(16,32,28,.22), inset 0 0 0 1px rgba(201,183,156,.3); }
.set-head__back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(244,239,230,.35); background: rgba(255,255,255,.06); color: #F4EFE6; font: inherit; font-size: 14px; font-weight: 700; padding: 6px 14px 6px 10px; border-radius: 999px; }
.set-head__back span:first-child { font-size: 20px; line-height: 1; margin-top: -2px; }
.set-head__title { margin: 16px 0 0; font-family: var(--serif); font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
.set-head__mark { position: absolute; right: -18px; bottom: -26px; font-size: 120px; color: rgba(201,183,156,.14); pointer-events: none; }
.set-head__mark .icon svg { width: 120px; height: 120px; }

.set-coming { position: relative; overflow: hidden; margin: 0 0 22px; padding: 16px; border-radius: 16px; background: linear-gradient(160deg, #FFFFFF, #F5F1E8); box-shadow: var(--shadow), inset 0 0 0 1px rgba(201,183,156,.45); }
.set-coming__head { display: flex; align-items: center; justify-content: space-between; }
.set-coming__brand { font-weight: 900; letter-spacing: .28em; font-size: 11px; color: #9A7B45; }
.set-coming__badge { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, #E7D3A8, #C9A227); color: #2A2116; }
.set-coming__title { margin: 10px 0 2px; font-size: 18px; font-weight: 800; color: var(--ink); }
.set-coming__sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.set-coming__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.set-coming__item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; }

.set-foot { display: grid; justify-items: center; gap: 4px; margin: 10px 0 28px; }
.set-foot__brand { font-weight: 900; letter-spacing: .3em; font-size: 12px; color: #9A7B45; }
.set-version { font-size: 12px; color: var(--muted); }

/* A choice in a sheet from the bottom */
.pick { height: auto; max-height: 80dvh; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
.pick__body { padding: 2px 16px 6px; overflow-y: auto; }
.pick__title { margin: 0 4px 10px; font-size: 18px; font-weight: 800; }
.pick__list { display: grid; gap: 8px; }
.pick__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; font: inherit; color: var(--ink); }
.pick__opt.is-on { border-color: var(--green-700); background: rgba(47,125,90,.06); box-shadow: inset 0 0 0 1px var(--green-700); }
.pick__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pick__label { font-size: 15px; font-weight: 700; }
.pick__sub { font-size: 13px; color: var(--muted); line-height: 1.35; }
.pick__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; }
.pick__opt.is-on .pick__tick { background: var(--green-700); }
.pick__opt { box-sizing: border-box; } .pick__body { box-sizing: border-box; width: 100%; }
.ask__input--area { resize: none; min-height: 96px; line-height: 1.4; }
.set-head__sub { margin: 4px 0 0; font-size: 14px; color: rgba(244,239,230,.8); max-width: 80%; }
.set-head__progress { display: grid; gap: 6px; margin-top: 14px; max-width: 80%; }
.set-head__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.set-head__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E7D3A8, #C9A227); }
.set-head__pct { font-size: 12px; font-weight: 700; color: rgba(244,239,230,.8); }
.field--pick.is-empty { color: var(--muted); }

/* --- Paywall in the style of the membership card (WP-33) ------------------------ */
.paywall { position: relative; }
.paywall__header { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 0; }
.paywall__close { background: rgba(255,255,255,.12) !important; color: #F4EFE6 !important; border: 1px solid rgba(244,239,230,.35) !important; }
.paywall__hero { position: relative; overflow: hidden; margin: -4px -24px 4px; padding: 22px 24px 20px; color: #F4EFE6;
  background: radial-gradient(120% 160% at 100% 0%, #2F6B55 0%, #1E3A34 50%, #142A25 100%);
  box-shadow: inset 0 -1px 0 rgba(201,183,156,.35); }
.paywall__hero::after { content: ''; position: absolute; right: -50px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(201,183,156,.2); box-shadow: 0 0 0 24px rgba(201,183,156,.05); pointer-events: none; }
.paywall__brand { font-weight: 900; letter-spacing: .28em; font-size: 12px; color: #C9B79C; }
.paywall__hero .paywall__title { margin: 12px 0 0; font-size: 26px; color: #F4EFE6; }
.paywall__hero .paywall__sub { margin: 4px 0 0; color: rgba(244,239,230,.85); }
.paywall__perks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; position: relative; z-index: 1; }
.paywall__perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #F4EFE6; }
.paywall__perks li::before { content: '✓'; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: linear-gradient(135deg, #E7D3A8, #C9A227); color: #2A2116; }
.paywall__plan { border-radius: 14px !important; }
.paywall__plan.is-selected { border-color: #C9A227 !important; background: #FBF7EE !important; box-shadow: inset 0 0 0 1px #C9A227; }
.paywall__plan.is-selected .paywall__plan-label { color: #8A6A2E !important; }
.paywall .btn--primary { border: 0; background: linear-gradient(135deg, #E7D3A8, #C9A227); color: #2A2116; font-weight: 800; box-shadow: 0 6px 16px rgba(201,162,39,.3); }
.gp-profile__empty { color: var(--green-700); font-weight: 700; }


/* --- Tab bar with Albert at the end (WP-34) --------------------------------------
   Four tabs and a round Albert button; the floating button is gone. */
.tabbar { grid-template-columns: repeat(4, 1fr) 76px; align-items: center; }
.tab__icon .icon svg, .tab .icon svg { width: 25px; height: 25px; }
.tab.is-active { color: var(--green-900); font-weight: 800; }
.tab--albert { border: 0; background: none; font: inherit; padding: 0; cursor: pointer; color: var(--green-900); }
.tab__albert { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -22px; border-radius: 50%; color: #F4EFE6;
  background: radial-gradient(120% 140% at 100% 0%, #2F6B55 0%, #1E3A34 55%, #142A25 100%);
  box-shadow: 0 6px 16px rgba(16,32,28,.3), inset 0 0 0 1px rgba(201,183,156,.45), 0 0 0 4px #fff; }
.tab__albert .tab__icon { font-size: 28px; }
.tab__albert .icon svg { width: 30px; height: 30px; }
.tab--albert .tab__label { font-size: 11px; font-weight: 800; color: var(--green-900); }
.tab--albert:active .tab__albert { transform: translateY(1px); }
body.has-sheet .tab__albert { box-shadow: 0 0 0 3px #C9A227, 0 0 0 7px #fff; }
.me-alert { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 14px; padding: 12px 16px; border: 0; border-radius: var(--radius); background: #FFF6E5; color: #8A5A00; font: inherit; font-size: 14px; font-weight: 800; text-align: left; box-shadow: inset 0 0 0 1px rgba(232,163,61,.35); }
@media (min-width: 900px) {
  .tabbar { grid-template-columns: none; }
  .tab--albert { margin-top: auto !important; margin-bottom: 16px !important; }
  .tab__albert { width: 34px; height: 34px; margin-top: 0; box-shadow: inset 0 0 0 1px rgba(201,183,156,.45); }
  .tab__albert .icon svg { width: 21px; height: 21px; }
}
/* My golf uses Me's taller photo (figures on it); Home's own height rules give way. */
@media (max-width: 899px) {
  body.is-home .me-hero.hero--bleed .hero__img { height: calc(250px + env(safe-area-inset-top)); }
  body.is-home .me-hero.hero--bleed { top: -198px; }
}
.me .me-group { margin-top: 22px; }

/* Trial (owner, 19 Oct 2026): no dark shade at the top of the photos, to see how it
   feels. The shade kept the white status bar readable on light photos; delete this
   rule to bring it back. */
.hero--bleed::before { display: none; }

/* Onboarding: the Albert step, one consent for every AI feature */
.wizard__ai-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin: 0 0 18px; border-radius: 10px; background: #F0F2F1; }
.wizard__ai .btn { width: 100%; margin: 0 0 10px; }
.wizard__ai-later { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }
.wizard__ai .wizard__ai-no { color: var(--cream); background: none; border: 1px solid rgba(234,231,225,.35); padding: 12px 16px; font-weight: 600; }
.wizard__ai .wizard__ai-later { color: rgba(234,231,225,.6); }

/* Paywall: why it opened, when a Free limit was reached (WP03) */
.paywall__reason { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: #FFF4E5; color: #8A4B00; font-size: 14px; font-weight: 600; line-height: 1.4; }