/* Good as Golf Rescue — Checkpoint 1
   Presentation layer only. Existing screen services and workflows remain intact. */

:root {
  --rail-w: 252px;
  --header-h: 64px;
  --bottom-nav-h: 72px;
  --gag-gold: var(--gold);
  --gag-gold-soft: var(--gold-text);
  --gag-green: var(--green-mid);
  --gag-surface: var(--panel);
  --gag-surface-2: var(--graphite);
  --gag-border: rgba(199,155,53,0.34);
}

body { background:var(--ink); }
body::before { background:
  radial-gradient(1000px 500px at 70% -15%, rgba(199,155,53,0.065), transparent 62%),
  radial-gradient(900px 500px at 2% 108%, rgba(46,107,80,0.035), transparent 65%); }

/* ---------- responsive shell ---------- */
#app-shell { background:var(--ink); }
.gag-header { border-bottom-color:var(--line); background:rgba(243,241,234,0.94); }
.gag-header__logo { letter-spacing:.07em; }
.gag-header__logo small { color:var(--gold-text); }
.gag-header .chip { border-color:rgba(199,155,53,0.18); background:var(--panel); }

@media (min-width: 768px) {
  #app-shell {
    grid-template-areas:"rail header" "rail content";
    grid-template-columns:92px 1fr;
    grid-template-rows:var(--header-h) 1fr;
  }
  .rail {
    grid-area:rail; display:flex; flex-direction:column; padding:14px 10px;
    background:linear-gradient(180deg,#1B4237 0%,var(--green) 45%,var(--green-deep) 100%);
    border-right:1px solid var(--green-deep); overflow-y:auto; z-index:55;
  }
  nav.bottom { display:none; }
  .stamp { bottom:10px; left:100px; }
  .screen { padding:14px; }
  .rail .rlogo { justify-content:center; padding:8px 0 14px; font-size:0; }
  .rail .rlogo .mark { width:38px; height:38px; }
  .rail .rprofile { padding:9px 6px; justify-content:center; }
  .rail .rprofile > span:last-child { display:none; }
  .rail button.gag-nav-item { justify-content:center; padding:12px 8px; min-height:48px; }
  .rail button.gag-nav-item .gag-nav-label { display:none; }
  .rail button.gag-nav-item svg { width:21px; height:21px; }
  .rail .lm14l { padding:12px 5px; text-align:center; }
  .rail .lm14l b { font-size:8px; }
  .rail .lm14l div { display:none; }
}

@media (min-width: 1180px) {
  #app-shell { grid-template-columns:var(--rail-w) 1fr; }
  .stamp { left:calc(var(--rail-w) + 12px); }
  .rail { padding:16px; }
  .rail .rlogo { justify-content:flex-start; font-size:15px; padding:6px 4px 18px; }
  .rail .rlogo .mark { width:32px; height:32px; }
  .rail .rprofile { justify-content:flex-start; padding:12px; }
  .rail .rprofile > span:last-child { display:block; }
  .rail button.gag-nav-item { justify-content:flex-start; padding:10px 12px; min-height:42px; }
  .rail button.gag-nav-item .gag-nav-label { display:inline; }
  .rail .lm14l { text-align:left; padding:14px; }
  .rail .lm14l b { font-size:10px; }
  .rail .lm14l div { display:block; }
  .screen { padding:14px 16px 20px; }
}

@media (max-width: 767px) {
  #app-shell { grid-template-rows:56px 1fr var(--bottom-nav-h); }
  .gag-header { padding:0 16px; background:linear-gradient(180deg,rgba(243,241,234,0.98),rgba(243,241,234,0.92)); }
  .gag-header__logo { font-size:14px; }
  .gag-header__logo small, #hdr-chip { display:none; }
  .gag-header__actions { gap:0; }
  .screen { padding:10px 14px 26px; }
  nav.bottom { align-items:center; padding:6px 5px calc(7px + env(safe-area-inset-bottom)); }
  nav.bottom button { flex:1; min-width:0; padding:6px 1px; font-size:9px; }
  nav.bottom button svg { width:21px; height:21px; }
  .stamp { display:none; }
}

/* ---------- rail ---------- (deep green clubhouse rail on light product) */
.rail .rlogo { display:flex; align-items:center; gap:9px; font-family:Sora,sans-serif; font-weight:800; letter-spacing:.05em; color:var(--dc-text); }
.rail .rlogo .as { color:var(--dc-gold); }
.rail .rprofile { display:flex; align-items:center; gap:10px; width:100%; border:1px solid rgba(243,241,234,0.14); background:rgba(243,241,234,0.05); margin-bottom:10px; }
.rail .rprofile .ava { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(243,241,234,0.08); border:1px solid rgba(217,180,92,0.45); color:var(--dc-gold); font-weight:800; }
.rail .rprofile b { color:var(--dc-text); font-size:13px; }
.rail .rprofile span span { display:block; color:var(--dc-mut); font-size:10px; }
.rail button.gag-nav-item { width:100%; display:flex; align-items:center; gap:11px; border-radius:8px; color:var(--dc-sub); text-transform:uppercase; letter-spacing:.055em; font-size:10px; font-weight:700; margin:1px 0; border:1px solid transparent; }
.rail button.gag-nav-item:hover { background:rgba(243,241,234,0.06); color:var(--dc-text); }
.rail button.gag-nav-item.on { color:var(--dc-gold); background:linear-gradient(90deg,rgba(217,180,92,0.18),rgba(217,180,92,0.07)); border-color:rgba(217,180,92,0.30); }
.rail .lm14l { margin-top:auto; border:1px solid rgba(217,180,92,0.30); background:rgba(243,241,234,0.04); border-radius:10px; color:var(--dc-mut); }
.rail .lm14l b { color:var(--dc-gold); letter-spacing:.12em; }
.rail .lm14l div { font-size:9px; line-height:1.65; margin-top:5px; }

/* ---------- checkpoint dashboard ---------- */
.desktop-dashboard { display:none; }
.mobile-home { display:block; }
.demo-ribbon { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(199,155,53,0.34); background:rgba(199,155,53,0.09); color:var(--gold-text); border-radius:99px; padding:4px 9px; font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.demo-ribbon::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.empty-copy { color:var(--mut); font-size:12px; line-height:1.5; }

@media (min-width: 768px) {
  .mobile-home { display:none; }
  .desktop-dashboard { display:block; }
}

.desktop-dashboard { max-width:1720px; margin:0 auto; }
.desktop-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px; padding:0 3px; }
.desktop-topline h1 { margin:0; font-size:20px; text-transform:uppercase; letter-spacing:.065em; }
.desktop-topline p { margin:2px 0 0; color:var(--mut); font-size:11px; }
.desktop-ecosystem { display:flex; gap:8px; }
.eco-chip { min-width:92px; padding:7px 9px; border:1px solid rgba(199,155,53,0.25); border-radius:8px; background:var(--panel); text-align:center; }
.eco-chip b { display:block; color:var(--gold-text); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.eco-chip span { display:block; margin-top:2px; color:var(--mut); font-size:9px; }

.gag-command-grid { display:grid; grid-template-columns:1.12fr 1.12fr 1.08fr 1.18fr; grid-auto-rows:minmax(190px,auto); gap:8px; }
.gag-module { min-width:0; overflow:hidden; position:relative; display:flex; flex-direction:column; background:linear-gradient(155deg,var(--panel),#F4F1E8)); border:1px solid rgba(199,155,53,0.43); border-radius:8px; box-shadow:0 12px 32px rgba(62,56,38,0.10); }
.gag-module button { text-align:left; }
.gag-module__head { min-height:31px; padding:7px 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid rgba(32,37,34,0.119); background:rgba(32,37,34,0.020); }
.gag-module__head h2 { margin:0; font-size:10px; color:var(--text); text-transform:uppercase; letter-spacing:.095em; }
.gag-module__head span { color:var(--gold-text); font:600 9px 'IBM Plex Mono',monospace; }
.gag-module__body { padding:10px; flex:1; min-height:0; }
.gag-module__action { margin-top:auto; min-height:30px; display:flex; align-items:center; justify-content:center; border-top:1px solid rgba(199,155,53,0.25); background:linear-gradient(180deg,rgba(199,155,53,0.08),rgba(199,155,53,0.14)); color:var(--gold-text); font-size:9px; text-transform:uppercase; letter-spacing:.11em; font-weight:800; }
.gag-module__action:hover { background:rgba(199,155,53,0.19); }

.gag-overview-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.gag-overview-title b { font-size:13px; }
.gag-overview-title span { color:var(--sub); font-size:10px; }
.gag-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.gag-kpi { border:1px solid rgba(32,37,34,0.136); background:var(--panel); border-radius:7px; padding:9px; }
.gag-kpi label { display:block; color:var(--mut); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.gag-kpi strong { display:block; color:var(--text); font:600 22px 'IBM Plex Mono',monospace; line-height:1.15; }
.gag-kpi small { display:block; color:var(--green-mid); font-size:8px; }
.gag-kpi small.baseline { color:var(--mut); }
.gag-last { margin-top:8px; display:grid; grid-template-columns:1fr 1.4fr; gap:7px; }
.gag-last > div { border:1px solid rgba(32,37,34,0.119); background:var(--panel); border-radius:7px; padding:8px; }
.gag-last label { color:var(--gold-text); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.gag-last strong { display:block; font-size:13px; margin-top:3px; }

.gag-visual { position:relative; height:118px; border-radius:6px; overflow:hidden; background:var(--panel); }
.gag-visual img { width:100%; height:100%; object-fit:cover; opacity:.88; }
.gag-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,32,27,0.35),transparent 48%,rgba(16,32,27,0.2)); }
.play-orb { position:absolute; z-index:3; top:50%; left:58%; transform:translate(-50%,-50%); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; border:2px solid rgba(255,255,255,.8); background:rgba(16,32,27,0.45); font-size:17px; }
.swing-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:7px; }
.swing-metrics div { padding:5px; border-left:1px solid rgba(32,37,34,0.153); }
.swing-metrics label { display:block; font-size:7px; color:var(--mut); text-transform:uppercase; }
.swing-metrics b { font:600 13px 'IBM Plex Mono',monospace; }
.swing-metrics small { display:block; font-size:7px; color:var(--green-mid); }

.course-mini { display:grid; grid-template-columns:86px 1fr; gap:8px; }
.distance-stack b { display:block; color:var(--text); font:600 19px 'IBM Plex Mono',monospace; }
.distance-stack b em { color:var(--gold-text); font-style:normal; }
.distance-stack span { display:block; color:var(--mut); font-size:8px; margin-bottom:6px; text-transform:uppercase; }
.hole-art { position:relative; min-height:123px; border-radius:6px; background:linear-gradient(145deg,#23351d,#577437 42%,#1b3322); overflow:hidden; }
.hole-art::before { content:""; position:absolute; width:72%; height:140%; top:-20%; left:19%; border-radius:50%; border:18px solid rgba(46,107,80,0.45); transform:rotate(23deg); }
.hole-art::after { content:""; position:absolute; width:3px; height:90%; left:49%; top:10%; background:linear-gradient(var(--gold),var(--green)); transform:rotate(16deg); box-shadow:0 0 8px rgba(199,155,53,0.6); }
.hole-art .pin { position:absolute; top:12px; right:20px; color:#fff; font-size:9px; }
.course-conditions { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:7px; }
.course-conditions div { border:1px solid rgba(32,37,34,0.102); padding:5px; }
.course-conditions label { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.course-conditions b { font-size:10px; }

.ai-kicker { color:var(--gold-text); font-size:8px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.ai-copy { color:var(--text); font-size:10.5px; line-height:1.42; }
.confidence-row { margin-top:8px; display:grid; grid-template-columns:64px 1fr 30px; align-items:center; gap:6px; font-size:8px; color:var(--mut); }
.confidence-row i { height:4px; background:var(--line); border-radius:99px; overflow:hidden; }
.confidence-row i span { display:block; height:100%; background:var(--green); }
.risk-row { display:flex; justify-content:space-between; margin-top:5px; font-size:8px; color:var(--sub); }
.risk-row b { color:var(--gold-text); }

.performance-layout { display:grid; grid-template-columns:100px 1fr; gap:10px; align-items:center; }
.score-ring { width:91px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--green) 0 58%,var(--gold) 58% 78%,var(--line) 78%); position:relative; }
.score-ring::before { content:""; position:absolute; inset:10px; border-radius:50%; background:var(--panel); }
.score-ring span { position:relative; text-align:center; }
.score-ring b { display:block; font:600 25px 'IBM Plex Mono',monospace; }
.score-ring small { display:block; color:var(--sub); font-size:8px; }
.metric-line { display:grid; grid-template-columns:62px 1fr 25px; gap:5px; align-items:center; margin:5px 0; color:var(--sub); font-size:8px; }
.metric-line i { height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
.metric-line i span { display:block; height:100%; background:var(--green); }
.metric-line b { color:var(--green-mid); font:600 8px 'IBM Plex Mono',monospace; }

.practice-list, .feed-list, .bag-list { display:grid; gap:5px; }
.practice-row, .feed-row, .bag-row { display:grid; grid-template-columns:28px 1fr auto; gap:7px; align-items:center; padding:6px 0; border-bottom:1px solid rgba(32,37,34,0.093); }
.practice-row:last-child, .feed-row:last-child, .bag-row:last-child { border-bottom:none; }
.practice-icon, .feed-avatar { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:var(--gold-dim); border:1px solid rgba(199,155,53,0.3); color:var(--gold-text); font-size:9px; font-weight:800; }
.practice-row b, .feed-row b, .bag-row b { display:block; font-size:9.5px; }
.practice-row span, .feed-row span, .bag-row span { display:block; color:var(--mut); font-size:8px; }
.practice-row em, .feed-row em, .bag-row em { color:var(--sub); font-size:8px; font-style:normal; }
.practice-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:8px; }
.practice-stats div { padding:6px; border:1px solid rgba(32,37,34,0.102); text-align:center; }
.practice-stats b { display:block; font:600 14px 'IBM Plex Mono',monospace; }
.practice-stats span { color:var(--mut); font-size:7px; text-transform:uppercase; }

.live-visual { position:relative; min-height:100px; border-radius:6px; overflow:hidden; background:url('../assets/hero.jpg') center/cover; }
.live-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,32,27,0.75),rgba(16,32,27,0.15)); }
.live-visual .live-distance { position:absolute; z-index:2; left:11px; bottom:9px; }
.live-distance b { display:block; font:600 27px 'IBM Plex Mono',monospace; }
.live-distance span { font-size:8px; color:var(--text); }
.live-rec { position:absolute; z-index:2; right:8px; bottom:8px; padding:6px 8px; background:rgba(16,32,27,0.63); border-radius:5px; }
.live-rec b { display:block; font-size:10px; }
.live-rec span { color:var(--mut); font-size:7px; }

.challenge-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:8px; }
.challenge-progress { text-align:center; border-right:1px solid rgba(32,37,34,0.119); }
.challenge-progress b { display:block; font-size:11px; }
.challenge-progress .mini-ring { width:64px; height:64px; margin:8px auto; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--gold) 0 60%,var(--line) 60%); position:relative; }
.challenge-progress .mini-ring::before { content:""; position:absolute; inset:7px; border-radius:50%; background:var(--graphite); }
.challenge-progress .mini-ring span { position:relative; font:600 13px 'IBM Plex Mono',monospace; }
.leader-mini div { display:grid; grid-template-columns:18px 1fr auto; gap:5px; padding:4px; font-size:8.5px; }
.leader-mini div.me { background:rgba(199,155,53,0.13); border-radius:4px; color:var(--gold-text); }

.trend-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.trend-card { border:1px solid rgba(32,37,34,0.102); border-radius:6px; padding:7px; }
.trend-card label { color:var(--mut); font-size:7px; text-transform:uppercase; }
.trend-card svg { width:100%; height:34px; margin:4px 0; }
.trend-card strong { font:600 14px 'IBM Plex Mono',monospace; }
.trend-card small { color:var(--green-mid); font-size:8px; margin-left:4px; }

.debrief-tags { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0; }
.debrief-tags span { border:1px solid rgba(32,37,34,0.136); border-radius:4px; padding:4px 7px; color:var(--sub); font-size:8px; }

/* desktop placements */
.mod-overview { grid-column:1; grid-row:1; }
.mod-swing { grid-column:2; grid-row:1; }
.mod-course { grid-column:3; grid-row:1; }
.mod-caddie { grid-column:4; grid-row:1; }
.mod-performance { grid-column:1; grid-row:2; }
.mod-practice { grid-column:2 / span 2; grid-row:2; }
.mod-community { grid-column:4; grid-row:2; }
.mod-challenges { grid-column:1; grid-row:3; }
.mod-trends { grid-column:2; grid-row:3; }
.mod-equipment { grid-column:3; grid-row:3; }
.mod-debrief { grid-column:4; grid-row:3; }

@media (min-width:768px) and (max-width:1179px) {
  .desktop-topline { align-items:center; }
  .desktop-ecosystem { display:none; }
  .gag-command-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:10px; }
  .gag-module { grid-column:auto !important; grid-row:auto !important; min-height:205px; }
  .mod-practice { grid-column:1 / -1 !important; }
}

@media (min-width:1500px) {
  .gag-command-grid { grid-auto-rows:minmax(205px,auto); }
  .gag-module__body { padding:11px; }
}

/* ---------- mobile home ---------- */
.mobile-home { max-width:520px; margin:0 auto; }
.mobile-greeting { display:flex; align-items:center; justify-content:space-between; margin:4px 2px 12px; }
.mobile-greeting h1 { margin:0; font-size:20px; }
.mobile-greeting p { margin:1px 0 0; color:var(--mut); font-size:11px; }
.mobile-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(199,155,53,0.44); background:var(--line); color:var(--gold-text); font-weight:800; }
.mobile-card { margin-bottom:10px; border:1px solid rgba(32,37,34,0.153); border-radius:12px; background:linear-gradient(150deg,var(--panel),#F4F1E8)); overflow:hidden; box-shadow:0 12px 30px rgba(16,32,27,0.18); }
.mobile-card__body { padding:14px; }
.mobile-course { display:grid; grid-template-columns:1fr 86px; min-height:120px; }
.mobile-course__copy { padding:14px; }
.mobile-course__copy label { color:var(--mut); font-size:9px; text-transform:uppercase; }
.mobile-course__copy strong { display:block; margin:5px 0 2px; font-size:26px; }
.mobile-course__copy p { margin:0; color:var(--sub); font-size:10px; }
.sun-mark { display:grid; place-items:center; font-size:42px; color:var(--gold-text); background:radial-gradient(circle at 50% 45%,rgba(225,185,64,.13),transparent 58%); }
.mobile-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(32,37,34,0.119); }
.mobile-stats div { padding:9px; text-align:center; border-right:1px solid rgba(32,37,34,0.102); }
.mobile-stats div:last-child { border-right:none; }
.mobile-stats b { display:block; font-size:10px; }
.mobile-stats span { color:var(--mut); font-size:8px; }
.performance-score { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.performance-score strong { font:600 34px 'IBM Plex Mono',monospace; }
.performance-score strong small { font-size:11px; color:var(--mut); }
.performance-score p { color:var(--green-mid); margin:0 0 4px; font-size:11px; }
.focus-card { display:grid; grid-template-columns:1fr 82px; align-items:center; }
.focus-card label, .next-card label { color:var(--gold-text); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.focus-card b, .next-card b { display:block; margin-top:4px; font-size:14px; }
.focus-card p, .next-card p { color:var(--mut); font-size:10px; margin:2px 0 0; }
.focus-silhouette { height:85px; background:url('../assets/hero.jpg') 35% center/cover; border-left:1px solid rgba(32,37,34,0.102); }
.next-card { display:grid; grid-template-columns:1fr 106px; }
.next-card .mobile-card__body { padding:13px 14px; }
.next-thumb { background:linear-gradient(rgba(16,32,27,0.1),rgba(16,32,27,0.25)),url('../assets/hero.jpg') center/cover; }
.mobile-quick { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.mobile-quick button { padding:13px; border:1px solid rgba(199,155,53,0.22); border-radius:12px; background:var(--panel); text-align:left; }
.mobile-quick button svg { width:22px; color:var(--gold-text); }
.mobile-quick button b { display:block; margin-top:8px; font-size:11px; }
.mobile-quick button span { display:block; color:var(--mut); font-size:9px; margin-top:2px; }

/* ---------- approved login direction ---------- */
.auth { background:var(--ink); }
.auth .scene.art .art-bg { object-position:center center; animation:none; }
.auth .scene.art .art-scrim { background:linear-gradient(90deg,rgba(16,32,27,0.10) 0%,rgba(16,32,27,0.14) 48%,rgba(243,241,234,0.55) 72%,var(--ink) 100%); }
.auth-stage { align-items:center; padding:36px clamp(24px,5vw,72px); }
.auth-panel { width:min(430px,94vw); background:rgba(251,250,246,0.94); border-color:rgba(199,155,53,0.35); border-radius:18px; padding:28px; box-shadow:0 25px 90px rgba(16,32,27,0.40); }
.auth-panel .aw { font-size:24px; }
.auth-panel .atag { color:var(--gold-text); margin-bottom:5px; }
.auth-intelligence { text-align:center; color:var(--mut); font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:19px; }
.auth-pills { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:16px; }
.auth-pills span { padding:6px 4px; text-align:center; border-top:1px solid rgba(199,155,53,0.25); color:var(--mut); font-size:8px; line-height:1.25; }
.auth-provider-note { display:block; margin-left:auto; color:var(--mut); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }

@media (max-width: 680px) {
  .auth { overflow:hidden; }
  .auth .scene.art { position:absolute; height:46vh; inset:0 0 auto; }
  .auth .scene.art .art-bg { object-position:47% 18%; }
  .auth .scene.art .art-scrim { background:linear-gradient(180deg,rgba(16,32,27,0.06),rgba(243,241,234,0.10) 52%,var(--ink) 100%); }
  .auth-stage { min-height:100dvh; align-items:flex-end; padding:0; }
  .auth-panel { width:100%; max-height:61vh; overflow:auto; border-radius:24px 24px 0 0; border-left:none; border-right:none; border-bottom:none; padding:20px 20px calc(18px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(251,250,246,0.97),var(--panel) 20%); }
  .auth-panel .aw { font-size:21px; }
  .auth-panel .atag { margin-bottom:3px; }
  .auth-intelligence { margin-bottom:14px; }
  .auth-pills { display:none; }
  .auth-foot { display:none; }
}

/* never allow a desktop dashboard to squeeze onto phone */
@media (max-width: 767px) {
  .dash-grid, .bento { display:block; }
}

/* ======================================================================
   Slice 1 — Swing Analysis vertical experience
   Dedicated desktop/tablet and mobile compositions, sharing the same state.
   ====================================================================== */

.eyebrow {
  display:block; color:var(--gold-text); font-size:9px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:4px;
}

.swing-desktop-shell { display:none; max-width:1560px; margin:0 auto; }
.swing-mobile-shell { display:block; max-width:520px; margin:0 auto; }

.swing-page-header {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:3px 2px 14px;
}
.swing-page-header h1 { margin:0; font-size:24px; letter-spacing:-.025em; }
.swing-page-header p { margin:5px 0 0; color:var(--mut); font-size:12px; }
.swing-header-actions { display:flex; gap:8px; flex:none; }

.swing-workspace-tabs {
  display:flex; gap:28px; min-height:42px; align-items:flex-end; border-bottom:1px solid rgba(32,37,34,0.153);
  margin-bottom:12px;
}
.swing-workspace-tabs button {
  position:relative; padding:0 1px 12px; color:var(--mut); font-size:10px; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase;
}
.swing-workspace-tabs button::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:center; transition:transform .2s ease;
}
.swing-workspace-tabs button.on { color:var(--gold-text); }
.swing-workspace-tabs button.on::after { transform:scaleX(1); }

.swing-capture-status {
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 12px; margin-bottom:12px;
  border:1px solid rgba(32,37,34,0.128); border-radius:9px; background:var(--panel);
}
.swing-capture-status > div:first-child { display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; }
.swing-capture-status b { font-size:11px; color:var(--text); }
.swing-capture-status small { grid-column:2; color:var(--mut); font-size:9px; margin-top:2px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--dim); box-shadow:0 0 0 4px rgba(143,149,157,.08); }
.status-dot.good { background:var(--green); box-shadow:0 0 0 4px rgba(46,107,80,0.09); }
.status-dot.warn { background:var(--gold); box-shadow:0 0 0 4px rgba(215,170,66,.09); }
.capture-methods { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

.swing-status {
  display:inline-flex; align-items:center; min-height:23px; padding:4px 8px; border:1px solid rgba(32,37,34,0.153);
  border-radius:99px; background:var(--line); color:var(--mut); font-size:8px; font-weight:750; letter-spacing:.04em;
  white-space:nowrap;
}
.swing-status.good { color:var(--green-mid); border-color:rgba(46,107,80,0.26); background:rgba(46,107,80,0.07); }
.swing-status.ready { color:var(--gold-text); border-color:rgba(199,155,53,0.3); background:rgba(199,155,53,0.08); }
.swing-status.warn { color:var(--gold-text); border-color:rgba(199,155,53,0.18); background:rgba(199,155,53,0.04); }

.swing-primary-grid { display:grid; grid-template-columns:minmax(0,1.72fr) minmax(330px,.78fr); gap:12px; align-items:stretch; }
.swing-video-card, .swing-summary-rail, .swing-tab-stage, .swing-capability-panel {
  border:1px solid rgba(199,155,53,0.27); border-radius:11px;
  background:linear-gradient(155deg,var(--line) 0%,var(--graphite) 78%); box-shadow:0 15px 42px rgba(16,32,27,0.25);
}
.swing-video-card { overflow:hidden; min-width:0; }
.swing-video-head {
  min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px;
  border-bottom:1px solid rgba(32,37,34,0.119); background:rgba(32,37,34,0.020);
}
.swing-video-head b { display:block; font-size:11px; color:var(--text); }
.swing-video-tools { display:flex; gap:7px; align-items:center; }
.icon-toggle {
  min-height:25px; padding:5px 8px; border:1px solid rgba(32,37,34,0.170); border-radius:6px;
  color:var(--mut); background:var(--panel); font-size:8px; font-weight:700;
}
.icon-toggle.on { color:var(--gold-text); border-color:rgba(217,180,92,0.32); background:rgba(217,180,92,0.06); }

.swing-video-frame { position:relative; aspect-ratio:16/9; min-height:280px; overflow:hidden; background:#030405; }
.swing-player { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#030405; }
.swing-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.swing-empty-visual { position:absolute; inset:0; }
.swing-empty-visual img { width:100%; height:100%; object-fit:cover; object-position:52% 38%; filter:saturate(.76) brightness(.74); }
.swing-empty-scrim { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,32,27,0.2),rgba(16,32,27,0.24) 48%,rgba(16,32,27,0.85)); }
.swing-capture-guide { position:absolute; z-index:2; top:50%; right:7%; width:min(280px,42%); transform:translateY(-50%); }
.swing-capture-guide > span { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(199,155,53,0.38); border-radius:50%; background:rgba(16,32,27,0.75); color:var(--gold-text); }
.swing-capture-guide svg { width:20px; }
.swing-capture-guide b { display:block; margin-top:11px; color:var(--text); font-size:17px; }
.swing-capture-guide p { color:var(--mut); font-size:11px; line-height:1.55; margin:5px 0 0; }

.swing-video-readout {
  position:absolute; z-index:4; top:14px; left:14px; display:grid; gap:7px; width:116px;
}
.swing-video-readout > div { padding:7px 9px; background:rgba(16,32,27,0.73); border-left:2px solid rgba(217,180,92,0.65); backdrop-filter:blur(8px); }
.swing-video-readout span { display:block; color:var(--gold-text); font-size:7px; text-transform:uppercase; letter-spacing:.11em; }
.swing-video-readout b { display:block; color:var(--text); font:600 16px 'IBM Plex Mono',monospace; }
.swing-video-readout small { display:block; color:var(--mut); font-size:7px; }
.swing-timeline-cues { position:absolute; z-index:5; left:50%; bottom:13px; transform:translateX(-50%); display:flex; gap:4px; padding:4px; border-radius:8px; background:rgba(16,32,27,0.74); backdrop-filter:blur(9px); }
.swing-timeline-cues button { padding:6px 9px; border-radius:5px; color:var(--text); font-size:8px; background:rgba(32,37,34,0.068); }
.swing-timeline-cues button:hover { color:var(--gold-text); background:rgba(199,155,53,0.1); }
.swing-timeline-cues.phases { max-width:calc(100% - 16px); flex-wrap:wrap; justify-content:center; }
.swing-timeline-cues.phases button.estimated { border:1px dashed rgba(199,155,53,0.5); color:var(--gold-text); }

.swing-framing-banner { margin:8px 12px 0; padding:10px 12px; border:1px solid rgba(199,155,53,0.4); border-left:3px solid var(--gold); border-radius:8px; background:rgba(199,155,53,0.07); }
.swing-framing-banner.confidence { border-color:rgba(82,112,141,0.35); border-left-color:var(--steel); background:rgba(82,112,141,0.07); }
.swing-framing-banner b { display:block; color:var(--gold-text); font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.swing-framing-banner.confidence b { color:var(--steel); }
.swing-framing-banner ul { margin:6px 0 0; padding-left:16px; }
.swing-framing-banner li { color:var(--mut); font-size:10.5px; line-height:1.5; }

.swing-view-toggle { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 12px 0; padding:8px 12px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.swing-view-toggle > span:first-child { color:var(--mut); font-size:10.5px; }
.swing-view-toggle > span:first-child b { color:var(--text); margin:0 4px; }
.swing-view-toggle small { color:var(--mut); font-size:9px; }
.swing-view-toggle .view-buttons { display:flex; gap:4px; }
.swing-view-toggle .view-buttons button { padding:5px 9px; border-radius:5px; border:1px solid rgba(32,37,34,0.153); color:var(--mut); font-size:9px; background:rgba(32,37,34,0.051); }
.swing-view-toggle .view-buttons button.on { border-color:rgba(217,180,92,0.55); color:var(--gold-text); }

.swing-compare-strip { margin-top:8px; padding:10px 12px; border:1px solid rgba(32,37,34,0.128); border-radius:9px; background:var(--panel); }
.swing-compare-strip > .eyebrow { display:block; margin-bottom:7px; }
.swing-compare-strip > div { display:inline-grid; grid-template-columns:auto auto; gap:1px 8px; margin-right:16px; align-items:baseline; }
.swing-compare-strip > div span { color:var(--mut); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.swing-compare-strip > div b { color:var(--text); font:600 14px 'IBM Plex Mono',monospace; }
.swing-compare-strip > div small { grid-column:2; color:var(--mut); font-size:8.5px; }
.swing-compare-strip small.up { color:var(--green-mid); }
.swing-compare-strip small.down { color:var(--red); }
.swing-playback-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:10px 12px; border-top:1px solid rgba(32,37,34,0.119); }
.swing-playback-actions .analyse-clip-action { margin-right:auto; }

.swing-summary-rail { padding:12px; overflow:hidden; }
.swing-score-panel { display:grid; grid-template-columns:104px 1fr; align-items:center; gap:12px; padding:11px; border:1px solid rgba(32,37,34,0.128); border-radius:9px; background:var(--panel); }
.swing-score-ring {
  --score:0; width:96px; height:96px; display:grid; place-items:center; border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--score)*1%), var(--line) 0); position:relative;
}
.swing-score-ring::before { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--graphite); }
.swing-score-ring > div { position:relative; text-align:center; }
.swing-score-ring strong { font:600 27px 'IBM Plex Mono',monospace; }
.swing-score-ring span { color:var(--mut); font-size:9px; }
.swing-score-ring small { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
.swing-score-copy h2 { margin:0 0 5px; font-size:13px; line-height:1.35; }
.swing-score-copy p { margin:0; color:var(--mut); font-size:9.5px; line-height:1.5; }

.swing-metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
.swing-metric-card { min-width:0; padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.swing-metric-card span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; letter-spacing:.09em; }
.swing-metric-card strong { display:block; margin:3px 0 1px; color:var(--text); font:600 17px 'IBM Plex Mono',monospace; }
.swing-metric-card small { display:block; color:var(--mut); font-size:7.5px; line-height:1.3; }
.swing-metric-card.measured { border-left-color:rgba(46,107,80,0.45); }
.swing-metric-card.proxy { border-left-color:rgba(199,155,53,0.4); }
.swing-metric-card.unavailable { opacity:.76; border-style:dashed; }
.swing-metric-card.unavailable strong { color:var(--mut); }

.swing-empty-panel { min-height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:18px; }
.swing-empty-panel .empty-icon { display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(199,155,53,0.25); border-radius:50%; color:var(--gold-text); background:rgba(199,155,53,0.05); }
.swing-empty-panel .empty-icon svg { width:22px; }
.swing-empty-panel h3 { margin:12px 0 4px; font-size:16px; }
.swing-empty-panel p { color:var(--mut); font-size:11px; line-height:1.55; }
.truth-note { margin-top:12px; padding:10px; border-left:2px solid var(--gold); background:rgba(199,155,53,0.05); }
.truth-note b { display:block; color:var(--gold-text); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.truth-note span { display:block; color:var(--mut); font-size:9px; line-height:1.45; margin-top:3px; }

.swing-phase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 12px; }
.swing-phase-grid > button, .swing-phase-grid.empty > div {
  position:relative; min-height:86px; padding:12px; text-align:left; border:1px solid rgba(32,37,34,0.136); border-radius:9px;
  background:linear-gradient(150deg,var(--panel),#F4F1E8));
}
.swing-phase-grid > button:hover { border-color:rgba(199,155,53,0.32); }
.swing-phase-grid span { color:var(--mut); font-size:8px; font-weight:750; text-transform:uppercase; letter-spacing:.1em; }
.swing-phase-grid strong { display:block; margin:6px 0 2px; color:var(--text); font:600 19px 'IBM Plex Mono',monospace; }
.swing-phase-grid small { color:var(--mut); font-size:8px; }
.swing-phase-grid > button::after { content:"›"; position:absolute; right:10px; top:10px; color:var(--gold-text); }
.swing-phase-grid > button.limited { border-style:dashed; }
.swing-phase-grid > button.limited strong { font-family:Inter,sans-serif; font-size:13px; color:var(--gold-text); }
.swing-phase-grid.empty > div strong { font-family:Inter,sans-serif; font-size:13px; color:var(--mut); }

.swing-tab-stage { padding:13px; min-height:170px; }
.swing-detail-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:15px; }
.swing-detail-grid > section, .swing-detail-grid > aside { min-width:0; }
.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin:1px 0 10px; }
.section-heading h2 { margin:0; font-size:14px; }

.swing-evidence-list { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.swing-evidence-list > div { display:grid; grid-template-columns:1fr auto; gap:2px 8px; padding:9px 10px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--panel); }
.swing-evidence-list span { color:var(--mut); font-size:9px; }
.swing-evidence-list b { color:var(--gold-text); font:600 12px 'IBM Plex Mono',monospace; }
.swing-evidence-list small { grid-column:1/-1; color:var(--mut); font-size:7.5px; line-height:1.4; }
.swing-evidence-empty { min-height:120px; display:grid; place-items:center; border:1px dashed rgba(32,37,34,0.153); border-radius:9px; color:var(--mut); font-size:10px; }

.swing-history-list { display:flex; flex-direction:column; gap:5px; }
.swing-history-item { width:100%; display:grid; grid-template-columns:40px 1fr auto 14px; gap:8px; align-items:center; padding:8px; text-align:left; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--panel); }
.swing-history-item:hover, .swing-history-item.on { border-color:rgba(199,155,53,0.28); background:rgba(199,155,53,0.055); }
.history-score { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:var(--line); color:var(--gold-text); font:600 12px 'IBM Plex Mono',monospace; }
.history-copy { min-width:0; }
.history-copy b { display:block; color:var(--text); font-size:8.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-copy small { display:block; color:var(--mut); font-size:7.5px; margin-top:2px; }
.history-metrics { text-align:right; }
.history-metrics b { display:block; color:var(--text); font:600 9px 'IBM Plex Mono',monospace; }
.history-metrics small { color:var(--mut); font-size:7px; }
.history-open { color:var(--gold-text); }
.swing-history-item.pending .history-score { color:var(--green-mid); }
.swing-history-loading, .swing-history-empty { min-height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--mut); }
.swing-history-empty h3 { font-size:12px; margin:0 0 3px; color:var(--text); }
.swing-history-empty p, .swing-history-loading p { font-size:9px; margin:0; }
.spin-ring { width:22px; height:22px; margin-bottom:7px; border:2px solid rgba(32,37,34,0.136); border-top-color:var(--gold-text); border-radius:50%; animation:spin .8s linear infinite; }

.swing-processing {
  display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:center; padding:13px 15px; margin-bottom:12px;
  border:1px solid rgba(199,155,53,0.32); border-radius:10px; background:linear-gradient(90deg,rgba(199,155,53,0.085),var(--panel));
}
.processing-orb { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(199,155,53,0.35); border-radius:50%; }
.processing-orb span { width:14px; height:14px; border:2px solid rgba(199,155,53,0.2); border-top-color:var(--gold-text); border-radius:50%; animation:spin .75s linear infinite; }
.swing-processing h3 { margin:0; font-size:12px; }
.swing-processing p { margin:3px 0 7px; color:var(--mut); font-size:9px; }
.processing-track { height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
.processing-track i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--gold)); transition:width .18s linear; }
.swing-processing > div:last-child > small { display:block; text-align:right; color:var(--mut); font-size:8px; margin-top:3px; }
.swing-error { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 14px; margin-bottom:12px; border:1px solid rgba(176,74,66,0.33); border-radius:9px; background:rgba(176,74,66,0.07); }
.swing-error b { color:var(--red); font-size:11px; }
.swing-error p { color:var(--red); font-size:9px; margin:3px 0 0; }

.swing-insights-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.swing-insight { display:grid; grid-template-columns:22px 1fr; gap:8px; padding:11px; border:1px solid rgba(32,37,34,0.128); border-radius:9px; background:var(--panel); }
.swing-insight > span { width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:var(--gold-text); background:rgba(199,155,53,0.08); }
.swing-insight.good > span { color:var(--green-mid); background:rgba(46,107,80,0.09); }
.swing-insight b { display:block; color:var(--text); font-size:10px; }
.swing-insight p { color:var(--mut); font-size:9px; line-height:1.48; margin:4px 0; }
.swing-insight small { color:var(--mut); font-size:7.5px; line-height:1.4; }
.swing-truth-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.swing-truth-grid article { padding:10px; border-left:2px solid var(--green); background:rgba(46,107,80,0.045); }
.swing-truth-grid article:last-child { border-left-color:var(--gold-text); background:rgba(199,155,53,0.045); }
.swing-truth-grid b { display:block; font-size:9px; color:var(--text); }
.swing-truth-grid p { color:var(--mut); font-size:8px; line-height:1.5; margin:3px 0 0; }
.swing-insight-empty, .swing-compare-empty { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.swing-insight-empty h3, .swing-compare-empty h3 { margin:7px 0 3px; font-size:14px; }
.swing-insight-empty p, .swing-compare-empty p { max-width:430px; color:var(--mut); font-size:10px; line-height:1.5; }
.swing-compare-empty > span { color:var(--gold-text); }
.swing-compare-empty svg { width:38px; }

.swing-compare-selectors { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:end; }
.swing-compare-selectors > span { padding-bottom:10px; color:var(--mut); font-size:9px; }
.swing-compare-selectors label { color:var(--mut); font-size:8px; text-transform:uppercase; letter-spacing:.09em; }
.swing-compare-selectors select { display:block; width:100%; margin-top:5px; padding:10px 11px; color:var(--text); border:1px solid rgba(32,37,34,0.170); border-radius:8px; background:var(--panel); font-size:10px; }
.swing-compare-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0; }
.swing-compare-summary article { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; padding:11px; border:1px solid rgba(32,37,34,0.128); border-radius:9px; background:var(--panel); }
.swing-compare-summary article > span { color:var(--mut); font-size:8px; text-transform:uppercase; }
.swing-compare-summary strong { grid-row:1/3; grid-column:2; font:600 25px 'IBM Plex Mono',monospace; color:var(--gold-text); }
.swing-compare-summary small { color:var(--mut); font-size:8px; }
.swing-compare-summary .btn { grid-column:1/-1; margin-top:6px; }
.swing-compare-table { border:1px solid rgba(32,37,34,0.128); border-radius:9px; overflow:hidden; }
.swing-compare-table > div { display:grid; grid-template-columns:1.5fr .55fr 24px .55fr .7fr; gap:8px; align-items:center; padding:9px 11px; border-bottom:1px solid rgba(32,37,34,0.102); font-size:9px; }
.swing-compare-table > div:last-child { border-bottom:none; }
.swing-compare-table span { color:var(--mut); }
.swing-compare-table b { text-align:right; font:600 10px 'IBM Plex Mono',monospace; }
.swing-compare-table i { color:var(--mut); text-align:center; font-style:normal; }
.swing-compare-table b.good { color:var(--green-mid); }
.swing-compare-table b.down { color:var(--red); }
.swing-compare-table small { color:var(--mut); text-align:right; }
.comparison-note { color:var(--mut); font-size:8px; line-height:1.5; margin:9px 1px 0; }

.swing-capability-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:10px; padding:11px 13px; }
.swing-capability-panel h2 { margin:0; font-size:12px; }
.capability-pills { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }

/* Camera overlay and recording state */
.cap-overlay { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(16,32,27,0.92); }
.cap-stage { position:relative; width:min(100%,1080px); height:min(88dvh,760px); overflow:hidden; border:1px solid rgba(199,155,53,0.35); border-radius:18px; background:#020303; box-shadow:0 30px 100px rgba(16,32,27,0.75); }
.cap-stage video { width:100%; height:100%; object-fit:contain; background:#020303; }
.cap-top { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; z-index:3; }
.cap-bottom { position:absolute; left:0; right:0; bottom:0; z-index:3; min-height:102px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:14px 24px 18px; background:linear-gradient(transparent,rgba(16,32,27,0.88)); }
.cap-bottom #cap-timer { justify-self:end; color:var(--gold-text); font-size:15px; }
.cap-quality { color:var(--mut); font-size:9px; }
.cap-recbtn { width:66px; height:66px; border:4px solid rgba(255,255,255,.9); border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(16,32,27,0.45),0 0 30px rgba(199,155,53,0.35); }
.cap-recbtn::after { content:""; display:block; width:46px; height:46px; margin:auto; border-radius:50%; background:var(--gold); transition:.18s; }
.cap-recbtn.rec::after { width:28px; height:28px; border-radius:7px; background:var(--red); }
.cap-recbtn:disabled { opacity:.34; cursor:not-allowed; }
.cap-status { position:absolute; z-index:3; top:70px; left:50%; transform:translateX(-50%); max-width:80%; padding:7px 11px; border-radius:99px; background:rgba(16,32,27,0.7); color:var(--text); font-size:10px; backdrop-filter:blur(8px); text-align:center; }
.cap-status[data-state="error"] { color:var(--red); border:1px solid rgba(176,74,66,0.28); }
.cap-guide { position:absolute; z-index:2; inset:14% 25% 17%; border:1px dashed rgba(217,180,92,0.52); border-radius:45% 45% 30% 30%; pointer-events:none; }
.cap-guide::before { content:""; position:absolute; left:50%; top:0; bottom:0; border-left:1px dashed rgba(217,180,92,0.18); }
.cap-guide span { position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 70px rgba(217,180,92,0.035); }
.cap-guide b { position:absolute; bottom:-25px; left:50%; transform:translateX(-50%); color:var(--gold-text); font-size:9px; white-space:nowrap; }

/* Mobile Swing composition */
.swing-mobile-title { display:flex; align-items:center; justify-content:space-between; padding:2px 1px 7px; }
.swing-mobile-title h1 { margin:0; font-size:18px; }
.mobile-circle-action { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(32,37,34,0.170); border-radius:50%; color:var(--gold-text); background:var(--panel); font-size:20px; }
.swing-mobile-shell .swing-workspace-tabs { justify-content:space-between; gap:0; min-height:38px; margin-bottom:9px; }
.swing-mobile-shell .swing-workspace-tabs button { flex:1; padding-bottom:10px; font-size:9px; }
.swing-mobile-shell .swing-video-card { border-color:rgba(32,37,34,0.153); border-radius:12px; }
.swing-mobile-shell .swing-video-head { min-height:44px; padding:8px 10px; }
.swing-mobile-shell .swing-video-head .eyebrow { display:none; }
.swing-mobile-shell .swing-video-head b { font-size:9px; }
.swing-mobile-shell .swing-video-frame { aspect-ratio:4/3; min-height:0; }
.swing-mobile-shell .swing-capture-guide { right:auto; left:15px; bottom:14px; top:auto; width:calc(100% - 30px); transform:none; padding:11px; border-radius:9px; background:rgba(16,32,27,0.75); backdrop-filter:blur(8px); }
.swing-mobile-shell .swing-capture-guide > span { width:34px; height:34px; float:left; margin-right:10px; }
.swing-mobile-shell .swing-capture-guide b { margin:0; font-size:12px; }
.swing-mobile-shell .swing-capture-guide p { font-size:8.5px; margin-top:2px; }
.swing-mobile-shell .swing-empty-scrim { background:linear-gradient(180deg,rgba(16,32,27,0.08),rgba(16,32,27,0.78)); }
.swing-mobile-shell .swing-video-readout { top:9px; left:9px; width:91px; gap:4px; }
.swing-mobile-shell .swing-video-readout > div { padding:5px 7px; }
.swing-mobile-shell .swing-video-readout b { font-size:12px; }
.swing-mobile-shell .swing-timeline-cues { bottom:8px; }
.swing-mobile-shell .swing-timeline-cues button { padding:5px 7px; font-size:7px; }
.swing-mobile-shell .swing-playback-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; padding:8px; }
.swing-mobile-shell .swing-playback-actions .btn { width:100%; min-height:38px; font-size:10px; }
.swing-mobile-shell .swing-playback-actions .analyse-clip-action { grid-column:1/-1; order:-1; }
.swing-mobile-shell .swing-playback-actions [data-playback], .swing-mobile-shell .swing-playback-actions [data-frame-step] { display:none; }
.swing-mobile-shell .swing-phase-grid { gap:6px; margin:8px 0 10px; overflow-x:auto; scrollbar-width:none; }
.swing-mobile-shell .swing-phase-grid::-webkit-scrollbar { display:none; }
.swing-mobile-shell .swing-phase-grid > button, .swing-mobile-shell .swing-phase-grid.empty > div { min-width:106px; min-height:82px; padding:9px; }
.swing-mobile-shell .swing-phase-grid strong { font-size:15px; }
.swing-mobile-shell .swing-phase-grid small { font-size:7px; line-height:1.35; display:block; }
.swing-mobile-tab-stage { padding-bottom:4px; }
.mobile-swing-summary { padding:10px; border:1px solid rgba(32,37,34,0.136); border-radius:12px; background:linear-gradient(150deg,var(--panel),#F4F1E8)); }
.mobile-swing-summary .swing-score-panel { grid-template-columns:86px 1fr; padding:8px; }
.mobile-swing-summary .swing-score-ring { width:80px; height:80px; }
.mobile-swing-summary .swing-score-ring strong { font-size:22px; }
.mobile-swing-summary .swing-score-copy h2 { font-size:11px; }
.mobile-swing-summary .swing-score-copy p { font-size:8px; max-height:58px; overflow:auto; }
.mobile-swing-summary .swing-metric-grid { grid-template-columns:repeat(2,1fr); }
.mobile-swing-summary .swing-metric-card { padding:8px; }
.mobile-swing-summary .swing-metric-card strong { font-size:14px; }
.mobile-swing-history { margin-top:10px; padding:10px; border:1px solid rgba(32,37,34,0.136); border-radius:12px; background:var(--panel); }
.swing-mobile-shell .swing-history-item { grid-template-columns:35px 1fr auto 10px; padding:7px; }
.swing-mobile-shell .history-score { width:31px; height:31px; }
.swing-mobile-shell .swing-insights-grid, .swing-mobile-shell .swing-truth-grid { grid-template-columns:1fr; }
.swing-mobile-shell .swing-insight { padding:10px; }
.swing-mobile-shell .swing-compare-selectors { grid-template-columns:1fr; gap:7px; }
.swing-mobile-shell .swing-compare-selectors > span { display:none; }
.swing-mobile-shell .swing-compare-summary { gap:6px; }
.swing-mobile-shell .swing-compare-summary strong { font-size:20px; }
.swing-mobile-shell .swing-compare-table > div { grid-template-columns:1.2fr .55fr 16px .55fr; padding:8px; }
.swing-mobile-shell .swing-compare-table small { grid-column:1/-1; text-align:left; }
.mobile-measurement-note { margin-top:10px; padding:10px; border:1px solid rgba(32,37,34,0.136); border-radius:10px; color:var(--mut); background:var(--panel); }
.mobile-measurement-note summary { color:var(--text); font-size:9px; font-weight:700; }
.mobile-measurement-note .capability-pills { justify-content:flex-start; margin-top:8px; }
.swing-mobile-shell .swing-processing { grid-template-columns:38px 1fr; padding:10px; }
.swing-mobile-shell .processing-orb { width:34px; height:34px; }

@media (min-width:768px) {
  .swing-desktop-shell { display:block; }
  .swing-mobile-shell { display:none; }
  #outlet .screen[data-screen="swing"] { padding-top:10px; }
}

@media (min-width:768px) and (max-width:1179px) {
  .swing-page-header h1 { font-size:21px; }
  .swing-primary-grid { grid-template-columns:1fr; }
  .swing-video-frame { min-height:330px; }
  .swing-summary-rail .swing-empty-panel { min-height:180px; }
  .swing-summary-rail .swing-metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .swing-summary-rail .swing-score-panel { grid-template-columns:90px 1fr; }
  .swing-summary-rail .swing-score-ring { width:82px; height:82px; }
  .swing-detail-grid { grid-template-columns:1fr; }
  .swing-capability-panel { align-items:flex-start; }
  .swing-capability-panel .capability-pills { max-width:62%; }
}

@media (max-width:767px) {
  #outlet .screen[data-screen="swing"] { padding-top:6px; }
  .cap-overlay { padding:0; }
  .cap-stage { width:100%; height:100dvh; border:none; border-radius:0; }
  .cap-top { top:calc(10px + env(safe-area-inset-top)); }
  .cap-bottom { padding:12px 16px calc(15px + env(safe-area-inset-bottom)); grid-template-columns:1fr auto 1fr; }
  .cap-quality { font-size:7px; line-height:1.35; }
  .cap-recbtn { width:58px; height:58px; }
  .cap-recbtn::after { width:40px; height:40px; }
  .cap-status { top:calc(60px + env(safe-area-inset-top)); width:84%; }
  .cap-guide { inset:17% 13% 20%; }
}

@media (max-width:390px) {
  .swing-mobile-shell .swing-video-head .swing-status { display:none; }
  .swing-mobile-shell .swing-video-readout { width:84px; }
  .swing-mobile-shell .swing-video-readout small { display:none; }
  .mobile-swing-summary .swing-score-panel { grid-template-columns:74px 1fr; gap:8px; }
  .mobile-swing-summary .swing-score-ring { width:70px; height:70px; }
  .mobile-swing-summary .swing-score-ring strong { font-size:19px; }
}
.validation-badge { display:inline-flex; margin-top:6px; padding:3px 7px; border:1px solid rgba(199,155,53,0.28); border-radius:99px; color:var(--gold-text); background:rgba(199,155,53,0.06); font-size:7px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }

/* ========================================================================
   Slice 2 — Play vertical journey
   Separate desktop/tablet and mobile compositions share the same state.
   ======================================================================== */
.play-desktop-shell { display:none; max-width:1720px; margin:0 auto; }
.play-mobile-shell { display:block; max-width:520px; margin:0 auto; }
.play-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 2px 10px; }
.play-page-header h1, .play-mobile-title h1 { margin:2px 0 2px; color:var(--text); font-family:Sora,sans-serif; }
.play-page-header h1 { font-size:24px; letter-spacing:.025em; }
.play-page-header p, .play-mobile-title p { margin:0; color:var(--mut); font-size:10px; }
.play-header-actions { display:flex; gap:7px; }
.play-mobile-title { display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; margin:0 1px 7px; }
.play-mobile-title > .play-source { grid-column:1/-1; justify-self:start; }
.play-mobile-title.live h1 { font-size:14px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.play-mobile-title.live p { font-size:8px; }
.play-journey-nav { display:grid; grid-template-columns:repeat(3,1fr); min-height:39px; margin:0 0 10px; border:1px solid rgba(32,37,34,0.128); border-radius:9px; overflow:hidden; background:var(--graphite); }
.play-journey-nav button { position:relative; min-width:0; padding:10px 8px; color:var(--mut); font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.08em; border-right:1px solid rgba(32,37,34,0.102); }
.play-journey-nav button:last-child { border-right:none; }
.play-journey-nav button.on { color:var(--gold-text); background:rgba(199,155,53,0.08); }
.play-journey-nav button.on::after { content:""; position:absolute; left:16%; right:16%; bottom:0; height:2px; background:var(--gold); }
.play-network-state { display:flex; align-items:center; gap:10px; margin:0 0 10px; padding:9px 11px; border:1px solid rgba(199,155,53,0.3); border-radius:9px; background:rgba(199,155,53,0.07); }
.play-network-state b { color:var(--gold-text); font-size:9px; text-transform:uppercase; letter-spacing:.09em; }
.play-network-state span { color:var(--gold-text); font-size:9px; }
.play-network-state[hidden] { display:none!important; }
.play-panel, .play-mobile-card, .play-mobile-map-card { min-width:0; border:1px solid rgba(32,37,34,0.145); border-radius:11px; background:linear-gradient(155deg,var(--panel),#F4F1E8)); box-shadow:0 13px 32px rgba(16,32,27,0.18); }
.play-panel { padding:13px; }
.play-mobile-card { padding:11px; margin-bottom:9px; }
.play-mobile-map-card { overflow:hidden; margin-bottom:9px; }
.play-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:11px; margin-bottom:10px; }
.play-section-head h2 { margin:2px 0 0; font-size:14px; line-height:1.35; }
.play-source { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:3px 7px; border:1px solid rgba(32,37,34,0.153); border-radius:99px; color:var(--mut); background:rgba(32,37,34,0.043); font-size:7px; font-weight:750; letter-spacing:.055em; text-transform:uppercase; white-space:nowrap; }
.play-source.good { color:var(--green-mid); border-color:rgba(46,107,80,0.28); background:rgba(46,107,80,0.055); }
.play-source.warn { color:var(--gold-text); border-color:rgba(199,155,53,0.29); background:rgba(199,155,53,0.06); }
.play-source.missing { color:var(--red-soft); border-color:rgba(176,74,66,0.24); background:rgba(176,74,66,0.045); }
.play-selector-bar { display:grid; grid-template-columns:minmax(210px,1fr) minmax(230px,.75fr) auto auto; gap:9px; align-items:center; margin-bottom:9px; padding:10px 12px; border:1px solid rgba(199,155,53,0.18); border-radius:10px; background:var(--panel); }
.play-selector-bar > div:first-child span { display:block; }
.play-selector-bar > div:first-child b { font-size:12px; }
.play-field { display:block; min-width:0; }
.play-field > span, .play-green-editor label > span { display:block; color:var(--mut); font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.play-field select, .play-green-editor input { width:100%; min-height:38px; margin-top:4px; padding:8px 10px; color:var(--text); border:1px solid rgba(32,37,34,0.170); border-radius:8px; background:var(--graphite); font-size:10px; }
.play-field select:disabled { opacity:.62; }
.play-field small, .play-green-editor small { display:block; margin-top:3px; color:var(--mut); font-size:7.5px; line-height:1.4; }
.play-field.compact select { min-height:34px; padding:6px 8px; }
.play-hole-strip { display:flex; gap:5px; margin:0 0 9px; padding:7px; overflow-x:auto; border:1px solid rgba(32,37,34,0.119); border-radius:9px; background:var(--graphite); scrollbar-width:none; }
.play-hole-strip::-webkit-scrollbar { display:none; }
.play-hole-strip button { flex:1 0 46px; min-width:46px; padding:7px 4px; border:1px solid transparent; border-radius:7px; color:var(--mut); background:var(--line); text-align:center; }
.play-hole-strip button span { display:block; font:600 12px 'IBM Plex Mono',monospace; }
.play-hole-strip button small { display:block; margin-top:2px; color:var(--mut); font-size:6.5px; }
.play-hole-strip button.on { color:var(--gold-text); border-color:rgba(199,155,53,0.38); background:rgba(199,155,53,0.09); }
.play-hole-strip button.on small { color:var(--gold-text); }
.play-hole-strip.compact { margin-bottom:8px; padding:5px; }
.play-hole-strip.compact button { flex-basis:39px; min-width:39px; padding:6px 2px; }
.play-map { margin:0; min-width:0; }
.play-map-canvas { position:relative; min-height:360px; overflow:hidden; border:1px solid rgba(32,37,34,0.128); border-radius:9px; background:#08100b; }
.play-map-canvas svg { display:block; width:100%; height:100%; min-height:360px; }
.play-map-canvas .flight { stroke:var(--gold-text); stroke-width:2.4; fill:none; stroke-dasharray:6 5; filter:drop-shadow(0 0 4px rgba(199,155,53,0.35)); }
.play-map-badge { position:absolute; top:10px; left:10px; z-index:3; max-width:210px; padding:7px 9px; border:1px solid rgba(199,155,53,0.25); border-radius:8px; background:rgba(16,32,27,0.76); backdrop-filter:blur(8px); }
.play-map-badge b { display:block; color:var(--gold-text); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.play-map-badge span { display:block; margin-top:2px; color:var(--sub); font-size:7px; }
.play-position-dot { position:absolute; z-index:4; left:50%; bottom:28px; transform:translateX(-50%); display:grid; place-items:center; width:29px; height:29px; border:2px solid rgba(255,255,255,.9); border-radius:50%; color:#07100b; background:var(--green); font-size:7px; font-weight:800; box-shadow:0 0 0 6px rgba(46,107,80,0.13); }
.play-map figcaption { margin-top:6px; color:var(--mut); font-size:8px; line-height:1.45; }
.play-distance-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }
.play-distance-grid > div { min-width:0; padding:9px; border:1px solid rgba(32,37,34,0.128); border-radius:8px; background:var(--graphite); }
.play-distance-grid > div.primary { border-color:rgba(199,155,53,0.28); background:rgba(199,155,53,0.045); }
.play-distance-grid span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
.play-distance-grid strong { display:block; margin:3px 0 1px; font:600 18px 'IBM Plex Mono',monospace; white-space:nowrap; }
.play-distance-grid > div.primary strong { color:var(--gold-text); }
.play-distance-grid small { display:block; color:var(--mut); font-size:6.5px; }
.play-distance-source { margin:6px 1px 0; color:var(--mut); font-size:7.5px; line-height:1.4; }
.course-intel-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(350px,.9fr); gap:9px; }
.course-intel-lower { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:9px; }
.play-map-panel { overflow:hidden; }
.play-course-facts { display:flex; flex-direction:column; }
.play-condition-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.play-condition-grid article { min-width:0; padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.play-condition-grid article > span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
.play-condition-grid article strong { display:block; margin:4px 0 1px; color:var(--text); font-size:10px; line-height:1.3; }
.play-condition-grid article small { display:block; min-height:20px; color:var(--mut); font-size:7px; line-height:1.35; }
.play-condition-grid .play-source { margin-top:6px; }
.play-green-editor { margin-top:9px; padding:9px; border-left:2px solid rgba(199,155,53,0.45); background:rgba(199,155,53,0.04); }
.play-green-editor label { display:block; }
.play-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:auto; padding-top:11px; }
.play-evidence-rows { display:flex; flex-direction:column; gap:6px; }
.play-evidence-rows > div { display:grid; grid-template-columns:1fr auto; gap:2px 9px; align-items:center; padding:8px 9px; border:1px solid rgba(32,37,34,0.111); border-radius:8px; background:var(--graphite); }
.play-evidence-rows span { color:var(--sub); font-size:9px; text-transform:capitalize; }
.play-evidence-rows b { font:600 9px 'IBM Plex Mono',monospace; text-align:right; }
.play-evidence-rows small { grid-column:1/-1; color:var(--mut); font-size:7px; }
.play-history-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.play-history-grid > div { padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.play-history-grid span { color:var(--mut); font-size:7px; text-transform:uppercase; }
.play-history-grid strong { display:block; margin-top:3px; font:600 15px 'IBM Plex Mono',monospace; }
.play-empty-copy, .play-advisory { color:var(--mut); font-size:9px; line-height:1.52; }
.play-advisory { margin:8px 0 0; }
.play-course-picker { margin-bottom:9px; padding:12px; border:1px solid rgba(199,155,53,0.3); border-radius:11px; background:var(--panel); box-shadow:0 20px 50px rgba(16,32,27,0.35); }
.play-course-option { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:9px; border-bottom:1px solid rgba(32,37,34,0.102); }
.play-course-option:last-of-type { border-bottom:none; }
.play-course-option b { display:block; font-size:10px; }
.play-course-option span, .play-course-option small { display:block; color:var(--mut); font-size:7.5px; margin-top:2px; }
.play-course-option.on { background:rgba(199,155,53,0.04); }
.play-course-option.disabled { opacity:.58; }
.play-loading, .play-empty { min-height:90px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--mut); font-size:9px; }
.play-loading i { width:18px; height:18px; border:2px solid rgba(32,37,34,0.136); border-top-color:var(--gold-text); border-radius:50%; animation:spin .75s linear infinite; }
.play-course-chip { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; padding:9px 10px; border:1px solid rgba(199,155,53,0.19); border-radius:9px; background:var(--panel); text-align:left; }
.play-course-chip span { max-width:72%; color:var(--text); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.play-course-chip small { color:var(--gold-text); font-size:8px; }
.play-mobile-hole-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border-bottom:1px solid rgba(32,37,34,0.119); }
.play-mobile-hole-head b { display:block; font-size:12px; }
.play-mobile-hole-head span { display:block; color:var(--mut); font-size:8px; }
.play-mobile-hole-head .play-field { max-width:170px; }
.play-mobile-primary-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:9px 0; }
.play-mobile-details { margin:9px 0; border:1px solid rgba(32,37,34,0.136); border-radius:10px; background:var(--graphite); }
.play-mobile-details summary { padding:10px; color:var(--text); font-size:9px; font-weight:700; cursor:pointer; }
.play-mobile-details > .play-panel { border:none; border-top:1px solid rgba(32,37,34,0.119); border-radius:0 0 10px 10px; box-shadow:none; }

/* Tactical Caddie */
.caddie-desktop-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(370px,.9fr); gap:9px; }
.caddie-right-stack { display:flex; flex-direction:column; gap:9px; }
.caddie-copy { color:var(--text); font-size:11px; line-height:1.62; }
.caddie-outcome-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:11px; }
.caddie-outcome-grid > div { padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.caddie-outcome-grid span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.caddie-outcome-grid strong { display:block; margin:4px 0 2px; font:600 17px 'IBM Plex Mono',monospace; }
.caddie-outcome-grid small { display:block; color:var(--mut); font-size:6.5px; line-height:1.35; }
.risk-high { color:var(--red); } .risk-medium { color:var(--gold-text); } .risk-low { color:var(--green-mid); }
.caddie-confidence { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin-top:10px; color:var(--mut); font-size:8px; }
.caddie-confidence i { height:5px; overflow:hidden; border-radius:99px; background:var(--line); }
.caddie-confidence i b { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--gold)); }
.caddie-confidence strong { color:var(--gold-text); font:600 10px 'IBM Plex Mono',monospace; }
.club-rec-main { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; }
.club-rec-main span, .club-disc span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.club-rec-main strong { display:block; margin:4px 0 2px; color:var(--gold-text); font-family:Sora,sans-serif; font-size:24px; }
.club-rec-main small, .club-disc small { color:var(--mut); font-size:7.5px; }
.club-disc { min-width:90px; padding:8px; border-left:1px solid rgba(32,37,34,0.136); text-align:right; }
.club-disc b { display:block; margin:4px 0; font-size:11px; }
.caddie-reasons { margin:10px 0 0; padding-left:16px; color:var(--mut); font-size:8.5px; line-height:1.52; }
.play-evidence-ledger { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.play-evidence-ledger > div { min-width:0; padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.play-evidence-ledger > div.available { border-left-color:rgba(46,107,80,0.45); }
.play-evidence-ledger > div.approximate { border-left-color:rgba(199,155,53,0.45); }
.play-evidence-ledger > div.missing { border-style:dashed; opacity:.76; }
.play-evidence-ledger span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.play-evidence-ledger b { display:block; margin:4px 0 2px; color:var(--text); font-size:9px; }
.play-evidence-ledger small { display:block; color:var(--mut); font-size:7px; line-height:1.4; }
.caddie-reason-source { margin-top:11px; }
.caddie-reason-source h3 { margin:0 0 6px; font-size:10px; }
.caddie-reason-source > div { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:start; padding:7px 0; border-top:1px solid rgba(32,37,34,0.093); }
.caddie-reason-source > div > span { color:var(--mut); font-size:8.5px; line-height:1.5; }
.play-missing { display:flex; gap:8px; margin-top:9px; padding:9px; border-left:2px solid var(--red); background:rgba(176,74,66,0.045); }
.play-missing b { color:var(--red); font-size:8px; text-transform:uppercase; }
.play-missing span { color:var(--red-soft); font-size:8px; }
.play-map-truth { display:flex; align-items:center; gap:8px; margin-top:8px; }
.play-map-truth > span:last-child { color:var(--mut); font-size:8px; }
.play-map-truth-mobile { margin:7px 10px 10px; color:var(--mut); font-size:7.5px; }

/* Live Round */
.round-start-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); gap:9px; }
.round-start-panel { display:flex; flex-direction:column; justify-content:center; }
.round-start-panel h2 { font-size:20px; }
.round-start-panel .btn { margin-top:7px; }
.round-start-facts { display:flex; flex-direction:column; gap:7px; margin:10px 0; }
.round-start-facts > div { padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.round-start-facts span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.round-start-facts b { display:block; margin:3px 0 1px; font-size:10px; }
.round-start-facts small { display:block; color:var(--mut); font-size:7px; }
.round-mobile-start { padding:10px; }
.round-mobile-start span { color:var(--gold-text); font-size:8px; text-transform:uppercase; }
.round-mobile-start strong { display:block; margin:3px 0; font-size:15px; }
.round-mobile-start small { color:var(--mut); font-size:7.5px; }
.round-score-hero { display:grid; grid-template-columns:90px 90px 110px 1fr; gap:7px; margin-bottom:9px; }
.round-score-hero > div { padding:9px 11px; border:1px solid rgba(32,37,34,0.136); border-radius:9px; background:var(--panel); }
.round-score-hero span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.round-score-hero strong { display:block; margin:2px 0; font:600 24px 'IBM Plex Mono',monospace; }
.round-score-hero small { display:block; color:var(--mut); font-size:7px; }
.round-progress-block { display:flex; flex-direction:column; justify-content:center; }
.round-progress-block i { height:5px; margin:7px 0 4px; overflow:hidden; border-radius:99px; background:var(--line); }
.round-progress-block i b { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--green)); }
.round-desktop-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr); gap:9px; }
.round-right-stack { display:flex; flex-direction:column; gap:9px; }
.round-lower-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:9px; margin-top:9px; }
.round-hole-nav { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.round-confidence { color:var(--gold-text); font:600 20px 'IBM Plex Mono',monospace; }
.round-club-values { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.round-club-values > div { padding:8px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--graphite); }
.round-club-values span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.round-club-values b { display:block; margin-top:3px; font:600 12px 'IBM Plex Mono',monospace; }
.round-club-rec > p { color:var(--mut); font-size:8px; line-height:1.45; }
.round-step-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid rgba(32,37,34,0.102); }
.round-step-row > span { color:var(--sub); font-size:9px; }
.round-step-row > small { grid-column:1/-1; color:var(--mut); font-size:7px; }
.round-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.round-result-grid > div > span { display:block; margin-bottom:5px; color:var(--mut); font-size:7px; text-transform:uppercase; }
.round-result-grid > div > b { color:var(--mut); font-size:8px; }
.round-result-grid .toggle { display:flex; width:100%; }
.round-result-grid .toggle button { flex:1; min-width:0; font-size:7px; padding:7px 3px; }
.round-club-tabs { margin-top:9px; }
.round-club-tabs > span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.round-club-tabs > div { display:flex; gap:4px; overflow-x:auto; margin-top:5px; padding-bottom:3px; scrollbar-width:none; }
.round-club-tabs > div::-webkit-scrollbar { display:none; }
.round-club-tabs button { flex:0 0 auto; padding:6px 8px; border:1px solid rgba(32,37,34,0.136); border-radius:6px; color:var(--mut); background:var(--graphite); font-size:7.5px; }
.round-club-tabs button.on { color:var(--gold-text); border-color:rgba(199,155,53,0.34); background:rgba(199,155,53,0.08); }
.round-save-next { width:100%; min-height:44px; text-align:center; }
.round-shot-actions { display:grid; grid-template-columns:1fr auto; gap:7px; }
.shot-ledger { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
.shot-ledger > div { display:grid; grid-template-columns:24px 1fr auto; gap:7px; align-items:center; padding:7px; border:1px solid rgba(32,37,34,0.111); border-radius:7px; background:var(--graphite); }
.shot-ledger span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:var(--gold-text); background:rgba(199,155,53,0.08); font:600 8px 'IBM Plex Mono',monospace; }
.shot-ledger b { font-size:9px; }
.shot-ledger small { color:var(--mut); font-size:7px; text-align:right; }
.round-bag-picker { max-height:380px; overflow:auto; padding:9px; border:1px solid rgba(199,155,53,0.2); border-radius:8px; background:var(--graphite); }
.round-bag-picker > p { margin:0 0 7px; font-size:9px; }
.round-bag-picker > div > span { display:block; margin:7px 0 4px; color:var(--mut); font-size:7px; text-transform:uppercase; }
.round-bag-picker > div > div { display:flex; gap:5px; flex-wrap:wrap; }
.shot-result-picker { display:flex!important; gap:5px; flex-wrap:wrap; margin-top:9px; }
.round-ledger-grid { display:grid; grid-template-columns:repeat(9,1fr); gap:4px; }
.round-ledger-grid button { min-width:0; padding:6px 2px; border:1px solid rgba(32,37,34,0.111); border-radius:6px; color:var(--mut); background:var(--graphite); text-align:center; }
.round-ledger-grid button span, .round-ledger-grid button b, .round-ledger-grid button small { display:block; }
.round-ledger-grid button span { font-size:6.5px; }
.round-ledger-grid button b { margin:2px 0; font:600 10px 'IBM Plex Mono',monospace; }
.round-ledger-grid button small { color:var(--mut); font-size:6px; }
.round-ledger-grid button.saved { color:var(--text); border-color:rgba(46,107,80,0.2); }
.round-ledger-grid button.on { color:var(--gold-text); border-color:rgba(199,155,53,0.4); background:rgba(199,155,53,0.08); }
.round-footer-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }
.round-confirm { position:fixed; inset:0; z-index:950; display:grid; place-items:center; padding:18px; background:rgba(16,32,27,0.78); backdrop-filter:blur(8px); }
.round-confirm > div { width:min(100%,460px); padding:20px; border:1px solid rgba(199,155,53,0.34); border-radius:14px; background:var(--panel); box-shadow:0 30px 80px rgba(16,32,27,0.55); }
.round-confirm h2 { margin:5px 0; font-size:17px; }
.round-confirm p { color:var(--mut); font-size:10px; line-height:1.5; }
.round-confirm > div > div { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:12px; }
.round-mobile-distance { padding:9px 10px; border-top:1px solid rgba(32,37,34,0.119); }
.round-mobile-distance span { color:var(--mut); font-size:7px; text-transform:uppercase; }
.round-mobile-distance strong { display:block; color:var(--gold-text); font:600 26px 'IBM Plex Mono',monospace; }
.round-mobile-distance small { color:var(--mut); font-size:7px; }

/* truthful debrief */
.debrief-rescue { max-width:1150px; margin:0 auto; }
.debrief-score { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; margin-bottom:9px; border:1px solid rgba(199,155,53,0.32); border-radius:12px; background:radial-gradient(circle at 50% 10%,rgba(199,155,53,0.1),var(--panel) 58%); }
.debrief-score span { color:var(--mut); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.debrief-score strong { color:var(--gold-text); font:600 52px 'IBM Plex Mono',monospace; line-height:1; }
.debrief-score b { margin-top:6px; font-size:12px; }
.debrief-score small { margin-top:5px; color:var(--green-mid); font-size:8px; }
.debrief-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:9px; }
.debrief-stat-grid > div, .debrief-hole-grid > div { padding:11px; border:1px solid rgba(32,37,34,0.136); border-radius:9px; background:var(--panel); }
.debrief-stat-grid span, .debrief-hole-grid span { color:var(--mut); font-size:7px; text-transform:uppercase; }
.debrief-stat-grid strong, .debrief-hole-grid strong { display:block; margin:4px 0 2px; font:600 18px 'IBM Plex Mono',monospace; }
.debrief-stat-grid small, .debrief-hole-grid small { color:var(--mut); font-size:7px; }
.debrief-evidence-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:9px; }
.debrief-evidence-grid ul { margin:8px 0 0; padding-left:17px; color:var(--mut); font-size:9px; line-height:1.6; }
.debrief-hole-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.debrief-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:9px; }

@media (min-width:768px) {
  .play-desktop-shell { display:block; }
  .play-mobile-shell { display:none; }
  #outlet .screen[data-screen="course"], #outlet .screen[data-screen="caddie"], #outlet .screen[data-screen="round"] { padding-top:10px; }
}
@media (min-width:768px) and (max-width:1179px) {
  .play-page-header h1 { font-size:21px; }
  .play-selector-bar { grid-template-columns:1fr 1fr; }
  .play-selector-bar .btn { width:100%; }
  .course-intel-grid, .caddie-desktop-grid, .round-desktop-grid, .round-start-grid { grid-template-columns:1fr; }
  .course-intel-lower, .round-lower-grid { grid-template-columns:1fr; }
  .play-map-canvas, .play-map-canvas svg { min-height:330px; }
  .play-course-facts .play-actions { margin-top:11px; }
  .play-evidence-ledger { grid-template-columns:repeat(2,1fr); }
  .round-score-hero { grid-template-columns:repeat(3,1fr); }
  .round-progress-block { grid-column:1/-1; }
  .round-ledger-grid { grid-template-columns:repeat(9,1fr); }
}
@media (max-width:767px) {
  #outlet .screen[data-screen="course"], #outlet .screen[data-screen="caddie"], #outlet .screen[data-screen="round"] { padding-top:5px; }
  .play-mobile-title h1 { font-size:18px; }
  .play-journey-nav { margin-bottom:8px; }
  .play-network-state { align-items:flex-start; flex-direction:column; gap:3px; }
  .play-map-canvas, .play-map-canvas svg { min-height:322px; }
  .play-map figcaption { padding:0 9px; }
  .play-mobile-map-card .play-distance-grid { margin:8px; }
  .play-mobile-map-card .play-distance-source { margin:0 9px 9px; }
  .play-distance-grid strong { font-size:15px; }
  .play-condition-grid { grid-template-columns:1fr 1fr; }
  .play-condition-grid article { padding:8px; }
  .play-section-head h2 { font-size:12px; }
  .play-panel { padding:10px; margin-bottom:9px; }
  .play-course-picker { padding:10px; }
  .play-course-option { grid-template-columns:1fr; }
  .play-course-option .btn, .play-course-option .play-source { justify-self:start; }
  .play-evidence-ledger { grid-template-columns:1fr 1fr; }
  .caddie-outcome-grid { gap:5px; }
  .caddie-outcome-grid > div { padding:7px; }
  .caddie-outcome-grid strong { font-size:14px; }
  .club-rec-main strong { font-size:21px; }
  .round-score-hero { grid-template-columns:repeat(3,1fr); gap:5px; }
  .round-score-hero > div { padding:8px; }
  .round-score-hero strong { font-size:20px; }
  .round-progress-block { grid-column:1/-1; }
  .round-result-grid { grid-template-columns:1fr; }
  .round-shot-actions { grid-template-columns:1fr 1fr; }
  .round-ledger-grid { grid-template-columns:repeat(6,1fr); }
  .round-footer-actions { grid-template-columns:1fr 1fr; }
  .round-confirm > div > div { grid-template-columns:1fr; }
  .debrief-stat-grid { grid-template-columns:1fr 1fr; }
  .debrief-evidence-grid, .debrief-hole-grid, .debrief-actions { grid-template-columns:1fr; }
}
@media (max-width:390px) {
  .play-map-canvas, .play-map-canvas svg { min-height:298px; }
  .play-mobile-primary-actions { grid-template-columns:1fr; }
  .play-condition-grid { grid-template-columns:1fr; }
  .play-evidence-ledger { grid-template-columns:1fr; }
  .caddie-outcome-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .caddie-outcome-grid small { min-height:28px; }
  .round-ledger-grid { grid-template-columns:repeat(6,1fr); }
  .round-shot-actions { grid-template-columns:1fr; }
}
/* Slice 2 mobile live-round density: keep scoring controls within reach rather
   than reproducing the full course-map composition above the fold. */
@media (max-width: 640px) {
  .live-round-mobile .play-mobile-map-card .play-map-canvas,
  .live-round-mobile .play-mobile-map-card .play-map-canvas svg {
    min-height: 245px;
    height: 245px;
  }
  .live-round-mobile .play-mobile-map-card .play-map figcaption { font-size:7px; line-height:1.3; }
  .live-round-mobile .round-mobile-distance { padding:8px 11px 9px; }
  .live-round-mobile .round-mobile-distance strong { font-size:26px; }
}
@media (max-width: 640px) {
  .round-mobile-live-hero { display:grid; grid-template-columns:1.08fr .92fr; gap:1px; margin-bottom:9px; overflow:hidden; border:1px solid rgba(32,37,34,0.153); border-radius:11px; background:rgba(32,37,34,0.136); }
  .round-mobile-live-hero > div { min-width:0; padding:14px 12px; background:linear-gradient(155deg,var(--panel),#F4F1E8)); }
  .round-mobile-live-hero span { display:block; color:var(--mut); font-size:7.5px; text-transform:uppercase; letter-spacing:.08em; }
  .round-mobile-live-hero strong { display:block; margin:5px 0 3px; color:var(--text); font-size:23px; line-height:1; }
  .round-mobile-live-distance strong { color:var(--gold-text); font-size:32px; }
  .round-mobile-live-hero small { display:block; color:var(--mut); font-size:7px; line-height:1.4; }
  .round-mobile-live-hero .play-source { display:inline-flex; margin-top:7px; }
  .live-round-mobile .round-score-panel { margin-bottom:9px; }
  .live-round-mobile .round-score-panel .play-section-head h2 { font-size:16px; }
  .live-round-mobile .play-mobile-details .play-mobile-map-card { margin-top:9px; }
}
/* Stable strategic-map dimensions across responsive shells. The SVG is
   intentionally fitted to a controlled viewport so tablet layouts do not
   inherit its tall intrinsic aspect ratio. */
.play-map-canvas { height:480px; min-height:0; }
.play-map-canvas svg { position:absolute; inset:0; width:100%; height:100%; min-height:0; }
@media (min-width:768px) and (max-width:1179px) {
  .play-map-canvas { height:430px; min-height:0; }
  .play-map-canvas svg { height:100%; min-height:0; }
}
@media (max-width:767px) {
  .play-map-canvas { height:410px; min-height:0; }
  .play-map-canvas svg { height:100%; min-height:0; }
}
@media (max-width:390px) {
  .play-map-canvas { height:385px; min-height:0; }
  .play-map-canvas svg { height:100%; min-height:0; }
}
@media (max-width:640px) {
  .live-round-mobile .play-mobile-map-card .play-map-canvas { height:245px; min-height:0; }
  .live-round-mobile .play-mobile-map-card .play-map-canvas svg { height:100%; min-height:0; }
}

/* ========================================================================
   SLICE 3 · EVIDENCE-BASED PRACTICE
   Separate desktop/tablet and mobile compositions sharing persistent state.
   ======================================================================== */
.practice-desktop-shell { display:none; max-width:1640px; margin:0 auto; padding-bottom:30px; }
.practice-mobile-shell { display:block; max-width:520px; margin:0 auto; padding-bottom:10px; }
.practice-desktop-shell button, .practice-mobile-shell button { text-align:center; }
.practice-hero-head, .practice-subpage-head, .practice-session-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:14px;
}
.practice-hero-head h1, .practice-subpage-head h1, .practice-session-head h1 { margin:2px 0 3px; font-size:27px; letter-spacing:-.025em; }
.practice-hero-head p, .practice-subpage-head p, .practice-session-head p { max-width:720px; color:var(--mut); font-size:12px; }
.practice-desktop-shell .eyebrow, .practice-mobile-shell .eyebrow {
  color:var(--gold-text); font-size:8px; line-height:1.2; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.practice-goal { min-width:260px; display:grid; gap:5px; padding:10px 12px; border:1px solid rgba(199,155,53,0.25); border-radius:9px; background:var(--panel); }
.practice-goal > span { color:var(--gold-text); font-size:8px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.practice-goal select, .practice-library-layout input, .practice-mobile-search input, .practice-outcome select, .practice-notes textarea {
  width:100%; border:1px solid rgba(32,37,34,0.170); border-radius:7px; background:var(--graphite); color:var(--text); font:500 11px Inter,sans-serif; outline:none;
}
.practice-goal select { min-height:36px; padding:0 9px; }
.practice-goal small { color:var(--mut); font-size:8px; line-height:1.35; }
.practice-offline { display:flex; align-items:center; gap:12px; margin-bottom:10px; padding:9px 12px; border:1px solid rgba(199,155,53,0.34); background:rgba(199,155,53,0.08); border-radius:8px; }
.practice-offline[hidden] { display:none !important; }
.practice-offline b { color:var(--gold-text); font-size:10px; }
.practice-offline span { color:var(--gold-text); font-size:9px; }
.practice-stat-strip { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(199,155,53,0.28); border-radius:9px; background:linear-gradient(120deg,var(--panel),#F4F1E8)); margin-bottom:10px; overflow:hidden; }
.practice-stat-strip > div { min-width:0; padding:11px 14px; border-right:1px solid rgba(32,37,34,0.119); }
.practice-stat-strip > div:last-child { border-right:none; }
.practice-stat-strip span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; letter-spacing:.11em; }
.practice-stat-strip strong { display:block; margin:1px 0; color:var(--text); font:650 20px 'IBM Plex Mono',monospace; }
.practice-stat-strip small { display:block; color:var(--mut); font-size:8px; }
.practice-panel { min-width:0; border:1px solid rgba(32,37,34,0.136); border-radius:9px; background:linear-gradient(145deg,var(--panel),#F4F1E8)); box-shadow:0 12px 32px rgba(16,32,27,0.18); padding:13px; }
.practice-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.practice-panel-head h2 { margin:2px 0 0; font-size:15px; }
.practice-truth-pill, .practice-week-count { display:inline-flex; align-items:center; min-height:23px; padding:4px 8px; border:1px solid rgba(199,155,53,0.22); border-radius:99px; background:rgba(199,155,53,0.06); color:var(--gold-text); font-size:7px; font-weight:700; letter-spacing:.06em; }
.practice-main-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr); gap:10px; margin-bottom:10px; }
.practice-focus-panel { border-color:rgba(199,155,53,0.38); position:relative; overflow:hidden; }
.practice-focus-panel::after { content:""; position:absolute; width:260px; height:260px; right:-120px; top:-130px; border-radius:50%; border:1px solid rgba(199,155,53,0.1); box-shadow:0 0 90px rgba(199,155,53,0.06); pointer-events:none; }
.practice-focus-reason { max-width:840px; color:var(--text); font-size:12px; line-height:1.6; margin-bottom:10px; }
.practice-source { display:inline-flex; align-items:center; min-height:20px; padding:3px 7px; border-radius:99px; border:1px solid rgba(32,37,34,0.170); color:var(--mut); background:var(--panel); font-size:6.5px; font-weight:800; letter-spacing:.085em; text-transform:uppercase; white-space:nowrap; }
.practice-source.measured { color:var(--green-mid); border-color:rgba(46,107,80,0.34); background:rgba(46,107,80,0.08); }
.practice-source.proxy { color:var(--green-mid); border-color:rgba(46,107,80,0.3); background:rgba(46,107,80,0.06); }
.practice-source.derived { color:var(--gold-text); border-color:rgba(199,155,53,0.32); background:rgba(199,155,53,0.07); }
.practice-source.user { color:var(--gold-text); border-color:rgba(199,155,53,0.28); background:rgba(199,155,53,0.06); }
.practice-source.general { color:var(--mut); border-color:rgba(32,37,34,0.204); }
.practice-source.unavailable { color:var(--red); border-color:rgba(176,74,66,0.3); background:rgba(176,74,66,0.06); }
.practice-evidence-list { display:grid; gap:6px; }
.practice-evidence-list article { padding:8px 9px; border:1px solid rgba(32,37,34,0.111); border-radius:7px; background:var(--graphite); }
.practice-evidence-list article > div { display:flex; align-items:center; gap:7px; }
.practice-evidence-list article b { font-size:9px; }
.practice-evidence-list article p { margin-top:5px; color:var(--mut); font-size:9px; line-height:1.45; }
.practice-evidence-empty { color:var(--mut); font-size:9px; padding:8px; border:1px dashed rgba(32,37,34,0.170); border-radius:7px; }
.practice-inline-link { margin-top:4px; color:var(--gold-text); font-size:8px; font-weight:700; }
.practice-focus-foot { display:grid; grid-template-columns:1.5fr .5fr; gap:8px; margin-top:10px; }
.practice-focus-foot > div { padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:7px; background:var(--panel); }
.practice-focus-foot span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; letter-spacing:.09em; }
.practice-focus-foot b { display:block; margin-top:2px; font-size:10px; }
.practice-focus-actions { display:flex; gap:8px; margin-top:10px; }
.practice-plan-list { display:grid; gap:7px; }
.practice-plan-card { border:1px solid rgba(32,37,34,0.136); border-radius:8px; background:var(--panel); padding:10px; }
.practice-plan-card.active { border-color:rgba(46,107,80,0.35); }
.practice-plan-card.done { border-color:rgba(46,107,80,0.2); background:rgba(46,107,80,0.035); }
.practice-plan-kicker { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.practice-plan-kicker > span { color:var(--gold-text); font-size:7px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.practice-plan-card h3 { margin:6px 0 3px; font-size:12px; }
.practice-plan-card > p { min-height:34px; color:var(--mut); font-size:8.5px; line-height:1.45; }
.practice-plan-meta { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.practice-plan-meta span { padding:3px 6px; border-radius:99px; background:var(--line); color:var(--mut); font-size:7px; }
.practice-plan-actions { display:flex; align-items:center; gap:6px; margin-top:8px; }
.practice-done-mark { color:var(--green-mid); font-size:7px; font-weight:700; }
.practice-secondary-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:10px; margin-bottom:10px; }
.practice-ledger-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.practice-ledger-grid article { display:grid; grid-template-columns:24px 1fr; gap:8px; min-width:0; padding:8px; border:1px solid rgba(32,37,34,0.119); border-radius:7px; background:var(--panel); }
.practice-ledger-grid article > span { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(32,37,34,0.170); color:var(--mut); font-size:9px; }
.practice-ledger-grid article.ready > span { border-color:rgba(46,107,80,0.35); color:var(--green-mid); background:rgba(46,107,80,0.08); }
.practice-ledger-grid b { display:block; font-size:9px; }
.practice-ledger-grid p { color:var(--mut); font-size:8px; line-height:1.4; margin-top:2px; }
.practice-history-list { display:grid; gap:4px; }
.practice-history-row { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid rgba(32,37,34,0.093); }
.practice-history-row:last-child { border-bottom:none; }
.practice-history-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(46,107,80,0.25); background:rgba(46,107,80,0.07); color:var(--green-mid); font-size:9px; }
.practice-history-row b, .practice-history-row strong { display:block; font-size:9px; }
.practice-history-row small { display:block; color:var(--mut); font-size:7px; }
.practice-history-row > div:last-child { text-align:right; }
.practice-empty { padding:26px 16px; text-align:center; border:1px dashed rgba(32,37,34,0.170); border-radius:8px; color:var(--mut); }
.practice-empty b { display:block; color:var(--text); font-size:12px; }
.practice-empty p { max-width:440px; margin:5px auto 10px; font-size:9px; line-height:1.55; }
.practice-library-preview, .practice-capabilities { margin-bottom:10px; }
.practice-library-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.practice-drill-card { display:flex; flex-direction:column; min-width:0; padding:10px; border:1px solid rgba(32,37,34,0.136); border-radius:8px; background:var(--panel); }
.practice-drill-card-top { display:flex; justify-content:space-between; gap:8px; color:var(--gold-text); font-size:7px; text-transform:uppercase; letter-spacing:.06em; }
.practice-drill-card-top small { color:var(--mut); text-transform:none; letter-spacing:0; }
.practice-drill-card h3 { margin:7px 0 4px; font-size:11px; }
.practice-drill-card p { flex:1; color:var(--mut); font-size:8px; line-height:1.5; }
.practice-drill-card > div:last-child { display:flex; gap:5px; margin-top:9px; }
.practice-capability-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.practice-capability-grid article { padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:7px; background:var(--panel); }
.practice-capability-grid b { display:block; font-size:9px; }
.practice-capability-grid span { display:block; margin:2px 0 4px; color:var(--mut); font-size:7px; font-weight:700; text-transform:uppercase; }
.practice-capability-grid p { color:var(--mut); font-size:8px; line-height:1.45; }
.practice-capability-grid .connected span { color:var(--green-mid); }
.practice-capability-grid .entered span, .practice-capability-grid .available span { color:var(--gold-text); }
.practice-capability-grid .unavailable span { color:var(--red); }
.practice-interrupted { display:grid; grid-template-columns:16px 1fr auto; align-items:center; gap:10px; padding:9px 12px; margin-bottom:10px; border:1px solid rgba(46,107,80,0.28); border-radius:8px; background:linear-gradient(90deg,rgba(46,107,80,0.07),rgba(10,14,17,.92)); }
.practice-interrupted.compact { grid-template-columns:12px 1fr auto; padding:8px 9px; }
.practice-live-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(46,107,80,0.08); animation:practicePulse 1.8s ease-in-out infinite; }
.practice-live-dot.paused { background:var(--gold); box-shadow:0 0 0 5px rgba(199,155,53,0.08); animation:none; }
@keyframes practicePulse { 50% { transform:scale(.75); opacity:.62; } }
.practice-interrupted span, .practice-interrupted small { display:block; color:var(--mut); font-size:7px; }
.practice-interrupted b { display:block; font-size:10px; }
.practice-subpage-head .practice-back-link { display:block; color:var(--gold-text); font-size:9px; text-align:left; margin-bottom:6px; }
.practice-detail-duration, .practice-history-total { min-width:118px; padding:11px 18px; border:1px solid rgba(199,155,53,0.28); border-radius:9px; background:var(--panel); text-align:center; }
.practice-detail-duration strong, .practice-history-total strong { display:block; color:var(--gold-text); font:650 28px 'IBM Plex Mono',monospace; line-height:1; }
.practice-detail-duration span, .practice-history-total span { color:var(--mut); font-size:8px; text-transform:uppercase; }
.practice-library-layout { display:grid; grid-template-columns:230px 1fr; gap:10px; }
.practice-filter-panel { align-self:start; position:sticky; top:0; padding:12px; border:1px solid rgba(32,37,34,0.136); border-radius:9px; background:var(--panel); }
.practice-filter-panel label { display:grid; gap:5px; }
.practice-filter-panel label span { color:var(--mut); font-size:8px; text-transform:uppercase; }
.practice-filter-panel input { min-height:38px; padding:0 9px; }
.practice-category-list { display:grid; gap:3px; margin-top:10px; }
.practice-category-list button { display:flex; align-items:center; justify-content:space-between; min-height:34px; padding:0 8px; border:1px solid transparent; border-radius:7px; color:var(--mut); font-size:9px; text-align:left; }
.practice-category-list button.on { border-color:rgba(199,155,53,0.28); background:rgba(199,155,53,0.08); color:var(--gold-text); }
.practice-category-list em { color:var(--mut); font-style:normal; }
.practice-filter-truth { margin-top:12px; padding:9px; border:1px solid rgba(32,37,34,0.119); border-radius:7px; background:var(--graphite); }
.practice-filter-truth b { font-size:9px; }
.practice-filter-truth p, .practice-filter-truth li { color:var(--mut); font-size:7.5px; line-height:1.45; }
.practice-filter-truth p { margin:4px 0; }
.practice-filter-truth ul { padding-left:14px; }
.practice-library-results-head { display:flex; justify-content:space-between; gap:14px; margin-bottom:8px; }
.practice-library-results-head b { font-size:11px; }
.practice-library-results-head span { color:var(--mut); font-size:8px; }
.practice-library-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.practice-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:10px; }
.practice-detail-grid main, .practice-detail-grid aside { display:grid; align-content:start; gap:10px; }
.practice-step-list { display:grid; gap:8px; padding-left:27px; counter-reset:practiceStep; }
.practice-step-list li { position:relative; padding:8px 10px 8px 3px; border-bottom:1px solid rgba(32,37,34,0.102); color:var(--mut); font-size:10px; line-height:1.5; }
.practice-step-list li::marker { color:var(--gold-text); font:700 10px 'IBM Plex Mono',monospace; }
.practice-step-list.session li { padding-top:11px; padding-bottom:11px; font-size:11px; }
.practice-success { margin-top:12px; padding:10px; border-left:2px solid var(--gold); background:rgba(199,155,53,0.055); }
.practice-success span { color:var(--gold-text); font-size:7px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.practice-success p { margin-top:3px; color:var(--mut); font-size:9px; line-height:1.5; }
.practice-detail-facts, .practice-session-sidebar { display:grid; gap:0; }
.practice-detail-facts > div, .practice-session-sidebar > div { padding:9px 0; border-bottom:1px solid rgba(32,37,34,0.102); }
.practice-detail-facts > div:last-child, .practice-session-sidebar > div:last-child { border-bottom:none; }
.practice-detail-facts span, .practice-session-sidebar span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.practice-detail-facts b, .practice-session-sidebar b { display:block; margin-top:2px; font-size:9px; line-height:1.4; }
.practice-detail-start { width:100%; }
.practice-session-state { display:flex; align-items:center; gap:8px; }
.practice-session-state > span:last-child { color:var(--mut); font-size:8px; }
.practice-session-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:10px; }
.practice-session-layout main, .practice-session-layout aside { display:grid; align-content:start; gap:10px; }
.practice-session-clock { display:grid; grid-template-columns:190px 1fr; gap:20px; align-items:center; padding:18px; border:1px solid rgba(199,155,53,0.32); border-radius:10px; background:linear-gradient(135deg,var(--panel),#F4F1E8)); }
.practice-clock-ring { --practice-progress:0; width:168px; height:168px; display:grid; place-items:center; border-radius:50%; position:relative; background:conic-gradient(var(--gold) calc(var(--practice-progress)*1%),var(--line) 0); }
.practice-clock-ring::before { content:""; position:absolute; inset:10px; border-radius:50%; background:var(--panel); border:1px solid rgba(32,37,34,0.119); }
.practice-clock-ring > div { position:relative; z-index:1; text-align:center; }
.practice-clock-ring strong { display:block; color:var(--text); font:650 29px 'IBM Plex Mono',monospace; }
.practice-clock-ring span, .practice-clock-ring small { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.practice-session-clock h2 { margin:4px 0; font-size:19px; }
.practice-session-clock p { color:var(--mut); font-size:10px; line-height:1.55; }
.practice-session-controls { display:flex; gap:7px; margin-top:12px; }
.practice-result-controls { display:grid; grid-template-columns:repeat(2,minmax(0,180px)) 1fr; gap:8px; align-items:end; }
.practice-counter { padding:9px; border:1px solid rgba(32,37,34,0.136); border-radius:8px; background:var(--graphite); }
.practice-counter > span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.practice-counter > div { display:grid; grid-template-columns:34px 1fr 34px; align-items:center; margin-top:5px; }
.practice-counter button { min-height:32px; border:1px solid rgba(32,37,34,0.170); border-radius:6px; background:var(--line); color:var(--gold-text); font-size:15px; }
.practice-counter strong { text-align:center; font:650 22px 'IBM Plex Mono',monospace; }
.practice-outcome { display:grid; gap:4px; }
.practice-outcome > span, .practice-notes > span { color:var(--mut); font-size:7px; text-transform:uppercase; }
.practice-outcome select { min-height:40px; padding:0 8px; }
.practice-outcome small, .practice-notes small { color:var(--mut); font-size:7px; }
.practice-notes { display:grid; gap:4px; margin-top:9px; }
.practice-notes textarea { min-height:86px; resize:vertical; padding:9px; line-height:1.45; }
.practice-complete-button { width:100%; min-height:46px; }
.practice-complete-note { color:var(--mut); font-size:7px; text-align:center; line-height:1.4; }
.practice-confirm-backdrop { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; background:rgba(16,32,27,0.76); backdrop-filter:blur(9px); }
.practice-confirm { width:min(440px,100%); padding:20px; border:1px solid rgba(199,155,53,0.35); border-radius:12px; background:var(--line); box-shadow:0 30px 80px rgba(16,32,27,0.55); }
.practice-confirm > span { color:var(--red); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.practice-confirm h2 { margin:6px 0; font-size:18px; }
.practice-confirm p { color:var(--mut); font-size:10px; line-height:1.55; }
.practice-confirm > div { display:flex; justify-content:flex-end; gap:7px; margin-top:14px; }
.practice-history-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:10px; }
.practice-history-list.full .practice-history-row { padding:10px 2px; }
.practice-trend-empty h2 { margin:5px 0; font-size:15px; }
.practice-trend-empty p { color:var(--mut); font-size:9px; line-height:1.55; }
.practice-trend-list { display:grid; gap:4px; margin-top:8px; }
.practice-trend-list article { display:grid; grid-template-columns:1fr auto; gap:10px; padding:8px 0; border-bottom:1px solid rgba(32,37,34,0.102); }
.practice-trend-list b, .practice-trend-list span { display:block; }
.practice-trend-list b { font-size:9px; }
.practice-trend-list span { color:var(--mut); font-size:7px; }
.practice-trend-list strong { color:var(--mut); font:650 14px 'IBM Plex Mono',monospace; }
.practice-trend-list strong.positive { color:var(--green-mid); }
.practice-trend-list strong.negative { color:var(--red); }
.practice-completion-hero { display:flex; align-items:center; gap:16px; margin:6px 0 14px; padding:18px; border:1px solid rgba(46,107,80,0.28); border-radius:10px; background:linear-gradient(120deg,rgba(46,107,80,0.08),var(--panel)); }
.practice-completion-check { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(46,107,80,0.38); background:rgba(46,107,80,0.1); color:var(--green-mid); font-size:24px; }
.practice-completion-hero h1 { margin:2px 0; font-size:24px; }
.practice-completion-hero p { color:var(--mut); font-size:10px; }
.practice-completion-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.practice-completion-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.practice-completion-facts div { padding:8px; border:1px solid rgba(32,37,34,0.119); border-radius:7px; background:var(--panel); }
.practice-completion-facts span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; }
.practice-completion-facts b { display:block; margin-top:2px; font-size:9px; text-transform:capitalize; }
.practice-completion-truth { margin-top:10px; color:var(--mut); font-size:8px; line-height:1.5; }
.practice-completion-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:10px; }

/* Mobile composition */
.practice-mobile-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:2px 0 10px; }
.practice-mobile-title h1 { margin:2px 0; font-size:21px; }
.practice-mobile-title p { color:var(--mut); font-size:9px; }
.practice-mobile-menu, .practice-session-more { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(199,155,53,0.26); border-radius:50%; background:var(--line); color:var(--gold-text); font-size:20px; }
.practice-mobile-focus, .practice-mobile-plan, .practice-mobile-progress, .practice-mobile-detail-section, .practice-mobile-history, .practice-mobile-session-objective {
  margin-bottom:9px; padding:12px; border:1px solid rgba(32,37,34,0.136); border-radius:12px; background:linear-gradient(145deg,var(--panel),#F4F1E8));
}
.practice-mobile-focus { border-color:rgba(199,155,53,0.36); background:linear-gradient(145deg,rgba(199,155,53,0.08),var(--panel) 54%); }
.practice-mobile-focus-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.practice-mobile-focus-top > span { color:var(--gold-text); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.practice-mobile-focus h2 { margin:7px 0 4px; font-size:19px; }
.practice-mobile-focus > p { color:var(--mut); font-size:9px; line-height:1.55; }
.practice-mobile-evidence { display:grid; gap:4px; margin-top:9px; }
.practice-mobile-evidence div { padding:7px 8px; border:1px solid rgba(32,37,34,0.111); border-radius:7px; background:rgba(16,32,27,0.55); }
.practice-mobile-evidence b, .practice-mobile-evidence span { display:block; }
.practice-mobile-evidence b { font-size:8px; }
.practice-mobile-evidence span { color:var(--mut); font-size:7px; line-height:1.4; }
.practice-mobile-focus-meta { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
.practice-mobile-focus-meta span { padding:4px 7px; border-radius:99px; background:var(--line); color:var(--mut); font-size:7px; }
.practice-mobile-focus-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.practice-mobile-focus-actions .btn { width:100%; }
.practice-mobile-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.practice-mobile-section-head span, .practice-mobile-section-head b { display:block; }
.practice-mobile-section-head span { color:var(--gold-text); font-size:7px; text-transform:uppercase; letter-spacing:.09em; }
.practice-mobile-section-head b { margin-top:1px; font-size:12px; }
.practice-mobile-section-head button, .practice-mobile-section-head em { color:var(--gold-text); font-size:8px; font-style:normal; }
.practice-mobile-plan .practice-plan-card { margin-bottom:6px; }
.practice-mobile-plan .practice-plan-card:last-child { margin-bottom:0; }
.practice-progress-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.practice-progress-grid > div { min-width:0; padding:8px 5px; border:1px solid rgba(32,37,34,0.119); border-radius:8px; background:var(--panel); text-align:center; }
.practice-progress-grid strong, .practice-progress-grid span, .practice-progress-grid small { display:block; }
.practice-progress-grid strong { font:650 18px 'IBM Plex Mono',monospace; }
.practice-progress-grid span { color:var(--sub); font-size:8px; }
.practice-progress-grid small { color:var(--mut); font-size:6.5px; line-height:1.25; }
.practice-mobile-truth { margin-top:8px; color:var(--mut); font-size:7.5px; line-height:1.5; }
.practice-mobile-gaps { margin-bottom:9px; }
.practice-mobile-gaps > summary { list-style:none; padding:10px 12px; border:1px solid rgba(32,37,34,0.136); border-radius:9px; background:var(--panel); color:var(--mut); font-size:8px; }
.practice-mobile-gaps[open] > summary { margin-bottom:6px; }
.practice-mobile-gaps .practice-panel { padding:9px; }
.practice-mobile-gaps .practice-ledger-grid { grid-template-columns:1fr; }
.practice-mobile-gaps .practice-capability-grid { grid-template-columns:1fr; }
.practice-mobile-subhead { display:grid; grid-template-columns:36px 1fr 36px; align-items:center; gap:8px; margin-bottom:9px; }
.practice-mobile-subhead > button:first-child { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(32,37,34,0.170); border-radius:50%; background:var(--line); font-size:18px; }
.practice-mobile-subhead span, .practice-mobile-subhead h1 { display:block; text-align:center; }
.practice-mobile-subhead span { color:var(--mut); font-size:7px; text-transform:uppercase; }
.practice-mobile-subhead h1 { margin-top:1px; font-size:15px; }
.practice-mobile-subhead::after { content:""; width:34px; }
.practice-mobile-subhead .practice-session-more { font-size:10px; }
.practice-mobile-search { display:block; margin-bottom:8px; }
.practice-mobile-search input { min-height:42px; padding:0 11px; border-radius:10px; }
.practice-mobile-categories { display:flex; gap:5px; overflow-x:auto; padding-bottom:6px; margin-bottom:4px; scrollbar-width:none; }
.practice-mobile-categories::-webkit-scrollbar { display:none; }
.practice-mobile-categories button { flex:0 0 auto; min-height:30px; padding:0 10px; border:1px solid rgba(32,37,34,0.136); border-radius:99px; background:var(--panel); color:var(--mut); font-size:8px; }
.practice-mobile-categories button.on { border-color:rgba(199,155,53,0.34); color:var(--gold-text); background:rgba(199,155,53,0.08); }
.practice-mobile-library { display:grid; gap:7px; }
.practice-mobile-library .practice-drill-card { min-height:145px; padding:12px; border-radius:11px; }
.practice-mobile-library .practice-drill-card h3 { font-size:14px; }
.practice-mobile-library .practice-drill-card p { font-size:9px; }
.practice-mobile-detail-hero { margin-bottom:8px; padding:15px 12px; border:1px solid rgba(199,155,53,0.35); border-radius:12px; background:linear-gradient(145deg,rgba(199,155,53,0.08),var(--panel)); }
.practice-mobile-detail-hero > div { display:flex; justify-content:space-between; color:var(--gold-text); font-size:8px; text-transform:uppercase; }
.practice-mobile-detail-hero h2 { margin:10px 0 5px; font-size:18px; }
.practice-mobile-detail-hero > p { color:var(--mut); font-size:9px; line-height:1.55; margin-bottom:9px; }
.practice-mobile-detail-section h3 { margin-bottom:8px; font-size:12px; }
.practice-mobile-detail-section .practice-evidence-list article { padding:8px; }
.practice-equipment-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.practice-equipment-chips span { padding:5px 8px; border:1px solid rgba(32,37,34,0.136); border-radius:99px; background:var(--panel); color:var(--mut); font-size:7px; }
.practice-mobile-sticky-action { position:sticky; bottom:0; z-index:15; padding:9px 0 2px; background:linear-gradient(180deg,transparent,var(--ink) 24%); }
.practice-mobile-sticky-action .btn { width:100%; min-height:47px; }
.practice-mobile-clock { display:grid; place-items:center; gap:10px; margin-bottom:9px; padding:17px; border:1px solid rgba(199,155,53,0.3); border-radius:12px; background:linear-gradient(145deg,var(--panel),#F4F1E8)); }
.practice-mobile-clock .practice-clock-ring { width:150px; height:150px; }
.practice-mobile-clock-actions { width:100%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; }
.practice-mobile-clock-actions span { color:var(--mut); font-size:7px; }
.practice-mobile-session-objective span { color:var(--gold-text); font-size:7px; text-transform:uppercase; }
.practice-mobile-session-objective h2 { margin:4px 0; font-size:16px; }
.practice-mobile-session-objective p { color:var(--mut); font-size:9px; line-height:1.55; margin-bottom:8px; }
.practice-session-mobile .practice-result-controls { grid-template-columns:repeat(2,1fr); }
.practice-session-mobile .practice-outcome { grid-column:1/-1; }
.practice-session-mobile .practice-counter strong { font-size:20px; }
.practice-mobile-session-truth { margin-bottom:8px; padding:10px; border:1px solid rgba(176,74,66,0.18); border-radius:9px; background:rgba(176,74,66,0.035); }
.practice-mobile-session-truth b { color:var(--red); font-size:8px; }
.practice-mobile-session-truth p { color:var(--mut); font-size:7.5px; line-height:1.45; }
.practice-mobile-history { display:grid; gap:3px; margin-top:8px; }
.practice-mobile-history .practice-history-row { padding:9px 0; }
.practice-mobile-shell > .practice-panel.practice-trend-empty, .practice-mobile-shell > .practice-panel:not(.practice-mobile-focus) { margin:8px 0; }
.practice-mobile-complete { padding:25px 12px 19px; text-align:center; }
.practice-mobile-complete > span { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 10px; border-radius:50%; border:1px solid rgba(46,107,80,0.35); background:rgba(46,107,80,0.09); color:var(--green-mid); font-size:25px; }
.practice-mobile-complete small { color:var(--green-mid); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.practice-mobile-complete h1 { margin:5px 0 2px; font-size:21px; }
.practice-mobile-complete p { color:var(--mut); font-size:9px; }
.practice-mobile-focus.next { margin-top:8px; }

@media (min-width:768px) {
  .practice-desktop-shell { display:block; }
  .practice-mobile-shell { display:none; }
}
@media (min-width:768px) and (max-width:1179px) {
  .practice-hero-head h1, .practice-subpage-head h1, .practice-session-head h1 { font-size:23px; }
  .practice-main-grid, .practice-secondary-grid, .practice-detail-grid, .practice-session-layout, .practice-history-layout { grid-template-columns:1fr; }
  .practice-week-panel .practice-plan-list { grid-template-columns:repeat(2,1fr); }
  .practice-library-grid, .practice-library-cards { grid-template-columns:repeat(2,1fr); }
  .practice-capability-grid { grid-template-columns:repeat(2,1fr); }
  .practice-detail-grid aside, .practice-session-layout aside { grid-template-columns:repeat(2,1fr); }
  .practice-detail-grid aside .practice-detail-start, .practice-session-layout aside .practice-complete-button, .practice-session-layout aside .practice-complete-note { grid-column:1/-1; }
  .practice-history-layout aside { display:grid; grid-template-columns:1fr; }
}
@media (max-width:767px) {
  .practice-mobile-shell { padding-bottom:4px; }
  .practice-offline { align-items:flex-start; padding:8px 9px; }
  .practice-offline b { white-space:nowrap; }
  .practice-offline span { font-size:7px; }
  .practice-interrupted.compact { grid-template-columns:10px 1fr auto; gap:7px; }
  .practice-interrupted.compact .btn { padding-left:8px; padding-right:8px; font-size:8px; }
  .practice-panel-head h2 { font-size:13px; }
  .practice-confirm { padding:17px; }
}
@media (max-width:390px) {
  .practice-mobile-focus-actions { grid-template-columns:1fr; }
  .practice-source { font-size:6px; padding:3px 6px; }
  .practice-plan-actions { flex-wrap:wrap; }
  .practice-session-mobile .practice-result-controls { grid-template-columns:1fr 1fr; }
}

/* ========================================================================
   ENGINEERING REVIEW 1 · FOUNDATION STABILISATION
   Shared interaction, spacing, motion and accessibility rules for Slices 1–3.
   No golf calculations or evidence rules are defined in CSS.
   ======================================================================== */
:root {
  --gag-space-1: 4px;
  --gag-space-2: 8px;
  --gag-space-3: 12px;
  --gag-space-4: 16px;
  --gag-space-5: 20px;
  --gag-card-radius: 12px;
  --gag-control-radius: 10px;
  --gag-control-h: 42px;
  --gag-panel-border: rgba(32,37,34,0.145);
  --gag-panel-border-gold: rgba(199,155,53,0.3);
  --gag-panel-bg: linear-gradient(155deg,var(--panel),#F4F1E8));
  --gag-panel-shadow: 0 12px 30px rgba(62,56,38,0.10);
  --gag-motion-fast: 140ms;
  --gag-motion-route: 170ms;
  --gag-text-scale: 1;
}

body[data-text-size="S"] { --gag-text-scale: .94; }
body[data-text-size="L"] { --gag-text-scale: 1.12; }

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

/* One calm route transition. Remove legacy horizontal page slides and card
   cascades that made the three slices feel like separate prototypes. */
.screen,
.screen.push-in,
.screen.pop-in,
.screen.route-enter,
.screen.route-back {
  animation: gagRouteIn var(--gag-motion-route) ease-out both;
}
.screen.push-out { animation: none; }
.screen > .stack > .card,
.screen > .stack > .card:nth-of-type(n) { animation: none; }
@keyframes gagRouteIn {
  from { opacity:0; transform:translateY(4px); }
  to { opacity:1; transform:none; }
}

body.route-pending #outlet { cursor:progress; }
body.route-pending .gag-header { border-bottom-color:rgba(199,155,53,0.32); }

/* Shared panel language across Swing, Play and Practice. */
:is(
  .swing-video-card,.swing-score-panel,.swing-empty-panel,.swing-processing,.swing-error,
  .swing-insight,.swing-capability-panel,.swing-history-list,.mobile-swing-summary,.mobile-swing-history,
  .play-panel,.play-mobile-card,.play-mobile-map-card,.play-selector-bar,.play-course-picker,
  .round-start-panel,.round-confirm,.round-bag-picker,
  .practice-panel,.practice-filter-panel,.practice-drill-card,.practice-interrupted,.practice-confirm,
  .practice-mobile-focus,.practice-mobile-plan,.practice-mobile-detail-section,.practice-mobile-detail-hero,
  .practice-mobile-clock,.practice-mobile-session-truth,.practice-mobile-gaps > summary
) {
  border-radius:var(--gag-card-radius);
  border-color:var(--gag-panel-border);
  box-shadow:var(--gag-panel-shadow);
}

:is(.swing-video-card,.play-panel,.practice-panel,.practice-drill-card) {
  background:var(--gag-panel-bg);
}

/* Shared page rhythm and hierarchy. */
:is(.swing-page-header,.play-page-header,.practice-hero-head,.practice-subpage-head,.practice-session-head) {
  margin:2px 2px var(--gag-space-3);
  gap:var(--gag-space-4);
}
:is(.swing-page-header,.play-page-header,.practice-hero-head,.practice-subpage-head,.practice-session-head) h1 {
  margin:2px 0 3px;
  color:var(--text);
  font-size:calc(23px * var(--gag-text-scale));
  line-height:1.16;
  letter-spacing:-.015em;
}
:is(.swing-page-header,.play-page-header,.practice-hero-head,.practice-subpage-head,.practice-session-head) p {
  color:var(--mut);
  font-size:calc(10px * var(--gag-text-scale));
  line-height:1.5;
}
:is(.eyebrow,.ai-kicker,.practice-plan-kicker) {
  color:var(--gold-text);
  font-size:calc(8px * var(--gag-text-scale));
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* One control family. */
.btn,
:is(.swing-workspace-tabs,.play-journey-nav) button,
.practice-category-list button,
.practice-mobile-categories button,
.play-hole-strip button {
  min-height:var(--gag-control-h);
  border-radius:var(--gag-control-radius);
  transition:
    background var(--gag-motion-fast) ease,
    border-color var(--gag-motion-fast) ease,
    color var(--gag-motion-fast) ease,
    box-shadow var(--gag-motion-fast) ease,
    transform 90ms ease;
}
.btn.gold,
.round-save-next,
.practice-complete-button {
  background:linear-gradient(135deg,#D6AC4A 0%,#B08A28 100%);
  color:#100d06;
  box-shadow:0 6px 20px rgba(199,155,53,0.22);
}
.btn.gold:hover,
.round-save-next:hover,
.practice-complete-button:hover {
  box-shadow:0 8px 24px rgba(199,155,53,0.3);
  transform:translateY(-1px);
}
button.is-pressed,
[role="button"].is-pressed { transform:scale(.985)!important; }
button:disabled,
button[aria-disabled="true"] {
  cursor:not-allowed;
  opacity:.56;
  filter:saturate(.55);
  box-shadow:none!important;
  transform:none!important;
}
button[aria-busy="true"] { cursor:progress; }
button[aria-busy="true"] .spin { flex:0 0 auto; }

/* Focus must remain visible against every dark panel. */
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(199,155,53,0.13);
}
.screen:focus-visible { outline:none; box-shadow:none; }

/* Honest states use one visual grammar. */
:is(.swing-error,.practice-error,.play-error) {
  border:1px solid rgba(176,74,66,0.32);
  background:linear-gradient(145deg,rgba(176,74,66,0.075),var(--panel));
}
:is(.swing-empty-panel,.practice-empty,.play-empty-copy,.swing-history-empty,.swing-evidence-empty,.practice-evidence-empty) p,
:is(.play-empty-copy,.empty-copy) {
  color:var(--mut);
  line-height:1.55;
}
:is(.play-loading,.swing-history-loading,.swing-processing) {
  min-height:72px;
}

/* Loading must not shift button width. */
.btn .spin,
button[aria-busy="true"] .spin {
  width:14px;
  height:14px;
  border-width:2px;
}

/* Consistent status/source labels. */
:is(.swing-status,.play-source,.practice-source,.demo-ribbon) {
  min-height:22px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 8px;
  font-size:calc(7.5px * var(--gag-text-scale));
  line-height:1.2;
  letter-spacing:.065em;
}

/* Tablet shell: intentional density, not an enlarged phone. */
@media (min-width:768px) and (max-width:1179px) {
  .screen { padding:14px 16px 22px; }
  :is(.swing-page-header,.play-page-header,.practice-hero-head,.practice-subpage-head,.practice-session-head) h1 {
    font-size:calc(22px * var(--gag-text-scale));
  }
  .btn { min-height:42px; }
}

/* Mobile composition: shared top rhythm, readable copy and full touch targets. */
@media (max-width:767px) {
  :root { --gag-control-h:44px; }
  .screen { padding:10px 14px 24px; }
  .swing-mobile-title,
  .play-mobile-title,
  .practice-mobile-title {
    min-height:74px;
    padding:4px 1px 10px;
    margin:0 0 8px;
    align-items:flex-start;
  }
  :is(.swing-mobile-title,.play-mobile-title,.practice-mobile-title) h1 {
    margin:3px 0 2px;
    color:var(--text);
    font-size:calc(20px * var(--gag-text-scale));
    line-height:1.18;
    letter-spacing:-.015em;
  }
  :is(.swing-mobile-title,.play-mobile-title,.practice-mobile-title) p {
    color:var(--mut);
    font-size:calc(9px * var(--gag-text-scale));
    line-height:1.45;
  }
  :is(.swing-mobile-title,.play-mobile-title,.practice-mobile-title) > button,
  .practice-mobile-subhead > button,
  .mobile-avatar,
  .gag-header__icon-btn,
  .gag-header__back {
    min-width:44px;
    width:44px;
    min-height:44px;
    height:44px;
  }
  nav.bottom button {
    min-height:48px;
    padding:5px 2px;
    font-size:calc(9px * var(--gag-text-scale));
  }
  nav.bottom svg { width:22px; height:22px; }

  .play-journey-nav { min-height:44px; }
  .play-journey-nav button { min-height:44px; font-size:calc(9px * var(--gag-text-scale)); }
  .swing-workspace-tabs button { min-height:44px; }
  .play-hole-strip button { min-width:46px; min-height:44px; }
  .practice-mobile-categories button { min-height:40px; }
  .practice-counter button { min-width:44px; min-height:44px; }

  :is(
    .swing-score-copy p,.swing-insight p,.swing-metric-card small,.swing-phase-grid small,
    .play-mobile-card p,.play-section-head p,.play-map figcaption,.play-distance-grid small,
    .play-distance-source,.play-evidence-rows small,.round-club-rec p,.shot-ledger small,
    .practice-mobile-focus > p,.practice-mobile-evidence span,.practice-plan-card p,
    .practice-mobile-detail-hero > p,.practice-mobile-session-objective p,
    .practice-completion-truth,.practice-mobile-truth
  ) {
    font-size:calc(9px * var(--gag-text-scale));
    line-height:1.5;
  }
  :is(
    .swing-metric-card span,.swing-metric-card small,.swing-phase-grid span,
    .play-field > span,.play-distance-grid span,.play-source,
    .practice-source,.practice-plan-meta span,.practice-progress-grid small
  ) { letter-spacing:.04em; }

  .swing-video-card,.play-mobile-card,.play-mobile-map-card,
  .practice-mobile-focus,.practice-mobile-plan,.practice-mobile-detail-section {
    margin-bottom:10px;
  }
}

/* Coarse-pointer accessibility also applies to touch tablets. */
@media (pointer:coarse) {
  :is(button,.btn,summary,input,select) { min-height:44px; }
  .rail button.gag-nav-item { min-height:48px; }
}

/* Landscape phones keep all primary actions reachable without hiding content. */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape) {
  #app-shell { grid-template-rows:48px 1fr 58px; }
  .gag-header { min-height:48px; }
  .screen { padding-top:8px; padding-bottom:14px; }
  nav.bottom { padding-top:3px; }
  nav.bottom button { min-height:44px; }
  .swing-video-frame { max-height:calc(100dvh - 170px); }
  .practice-mobile-clock { grid-template-columns:130px 1fr; place-items:center stretch; }
  .practice-mobile-clock .practice-clock-ring { width:120px; height:120px; }
}

@media (prefers-reduced-motion:reduce) {
  .screen,.screen.route-enter,.screen.route-back { animation:none!important; }
  .splash .mark,.splash .bar i,.skel::after,.practice-live-dot { animation:none!important; }
  html { scroll-behavior:auto; }
}

/* Foundation review: compact touch controls remain reachable on touch tablets
   and landscape phones, where width-based tablet layouts can otherwise leave
   36px icon actions. */
@media (pointer:coarse) {
  .gag-header__icon-btn,
  .gag-header__back,
  .practice-inline-link,
  .practice-mobile-menu,
  .practice-session-more {
    min-width:44px;
    min-height:44px;
  }
  .practice-goal select,
  .practice-outcome select,
  .practice-mobile-search input,
  .practice-library-layout input {
    min-height:44px;
  }
}

/* Foundation review: specific compact variants must not override the shared
   mobile touch target. */
@media (max-width:767px), (pointer:coarse) {
  .swing-mobile-shell .btn.sm,
  .play-field.compact select,
  .play-green-editor input,
  .practice-goal select,
  .practice-outcome select {
    min-height:44px;
  }
  .play-hole-strip.compact button {
    flex-basis:46px;
    min-width:46px;
  }
  .practice-mobile-section-head > button {
    min-width:44px;
    min-height:44px;
    padding-inline:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* Touch tablets use the desktop/tablet compositions, so their compact tab and
   hole controls need the same physical target as the phone composition. */
@media (pointer:coarse) {
  .swing-workspace-tabs button,
  .play-journey-nav button,
  .play-hole-strip button,
  .play-field select,
  .play-green-editor input {
    min-height:44px;
  }
}
@media (pointer:coarse) {
  .swing-workspace-tabs button { min-width:44px; }
}

/* =====================================================================
   COURSE DATA PROVIDER — live discovery + offline course library
   ===================================================================== */
.course-discovery { color:var(--text); }
.course-discovery--mobile { display:none; }
.course-discovery__hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:18px; padding:18px 20px; border:1px solid rgba(199,155,53,0.22); border-radius:var(--r-lg,16px); background:radial-gradient(circle at 85% 10%,rgba(199,155,53,0.1),transparent 34%),linear-gradient(145deg,var(--panel),#F4F1E8)); }
.course-discovery__hero h1,.course-mobile-head h1 { margin:3px 0 6px; font:800 clamp(28px,3vw,42px)/1.05 'Sora',sans-serif; letter-spacing:-.045em; }
.course-discovery__hero p,.course-mobile-head p { max-width:680px; margin:0; color:var(--mut); line-height:1.55; }
.course-hero-stat { min-width:150px; padding:13px 16px; border-left:1px solid rgba(32,37,34,0.153); text-align:right; }
.course-hero-stat b { display:block; color:var(--gold); font:800 34px/1 'Sora'; }
.course-hero-stat span { display:block; margin-top:5px; color:var(--dim); font-size:12px; }
.course-notice { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:11px 13px; border:1px solid rgba(199,155,53,0.22); border-radius:11px; background:rgba(199,155,53,0.055); }
.course-notice b { flex:none; color:var(--gold); font-size:12px; }
.course-notice span { color:var(--mut); font-size:12px; line-height:1.45; }
.course-notice.warn { border-color:rgba(199,155,53,0.35); background:rgba(199,155,53,0.07); }
.course-discovery__controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.course-mode-tabs { display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--graphite); }
.course-mode-tabs button { min-height:40px; padding:0 15px; border-radius:8px; color:var(--mut); font-weight:700; font-size:12px; }
.course-mode-tabs button.on { color:#090a0b; background:var(--gold); box-shadow:0 6px 18px rgba(199,155,53,0.16); }
.course-search-field { display:flex; align-items:center; gap:8px; width:min(560px,58vw); }
.course-search-field input { flex:1; min-height:44px; }
.course-inline-status { margin:0 0 12px; padding:9px 12px; border-radius:9px; background:rgba(32,37,34,0.060); color:var(--mut); font-size:12px; }
.course-discovery__grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.course-section-title { display:flex; justify-content:space-between; align-items:end; gap:14px; margin:2px 2px 10px; }
.course-section-title h2,.course-offline-panel h2 { margin:3px 0 0; font:700 18px/1.2 'Sora'; }
.course-section-title > span { color:var(--dim); font-size:11px; }
.course-result-list { display:grid; gap:9px; }
.course-found-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; min-height:92px; padding:14px 15px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,var(--panel),#F4F1E8)); box-shadow:0 10px 26px rgba(16,32,27,0.14); }
.course-found-card.is-active { border-color:rgba(199,155,53,0.48); box-shadow:inset 3px 0 0 var(--gold),0 10px 26px rgba(16,32,27,0.16); }
.course-found-card__main { min-width:0; }
.course-found-card__title { display:flex; align-items:center; gap:8px; min-width:0; }
.course-found-card__title > span:first-child { color:var(--gold); font:700 10px/1 'IBM Plex Mono'; }
.course-found-card__title h3 { overflow:hidden; margin:0; color:var(--text); font:700 14px/1.25 'Sora'; text-overflow:ellipsis; white-space:nowrap; }
.course-found-card p { margin:5px 0 8px; color:var(--dim); font-size:11px; }
.course-meta-row { display:flex; flex-wrap:wrap; gap:6px 12px; color:var(--mut); font-size:10px; }
.course-meta-row > span:not(.course-state)::before { content:'·'; margin-right:8px; color:var(--mut); }
.course-state { display:inline-flex; align-items:center; min-height:21px; padding:0 7px; border:1px solid rgba(32,37,34,0.170); border-radius:999px; color:var(--mut); background:rgba(32,37,34,0.043); font-size:9px; font-weight:700; }
.course-state.good { color:var(--green-mid); border-color:rgba(46,107,80,0.28); background:rgba(46,107,80,0.08); }
.course-state.warn { color:var(--gold-text); border-color:rgba(199,155,53,0.28); background:rgba(199,155,53,0.07); }
.course-found-card__actions { display:flex; align-items:center; justify-content:flex-end; }
.course-offline-panel { position:sticky; top:80px; padding:17px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(150deg,var(--panel),#F4F1E8)); }
.course-offline-panel ul { display:grid; gap:9px; margin:14px 0; padding:0; list-style:none; }
.course-offline-panel li { position:relative; padding-left:18px; color:var(--sub); font-size:11px; line-height:1.45; }
.course-offline-panel li::before { content:'✓'; position:absolute; left:0; color:var(--gold); }
.course-offline-panel p { margin:0 0 14px; color:var(--dim); font-size:10.5px; line-height:1.55; }
.course-empty-state { display:grid; place-items:center; min-height:260px; padding:36px 20px; border:1px dashed rgba(32,37,34,0.204); border-radius:14px; background:rgba(32,37,34,0.031); text-align:center; }
.course-empty-state .spin { width:25px; height:25px; }
.course-empty-state h3 { margin:10px 0 5px; font:700 16px/1.3 'Sora'; }
.course-empty-state p { max-width:430px; margin:0 0 16px; color:var(--mut); font-size:12px; line-height:1.55; }
.course-empty-state small { display:block; max-width:420px; margin-top:11px; color:var(--dim); font-size:10px; }
.course-empty-state.is-error { border-color:rgba(176,74,66,0.25); }
.course-empty-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(199,155,53,0.3); border-radius:50%; color:var(--gold); font-size:21px; background:rgba(199,155,53,0.07); }
.course-mobile-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.course-mobile-head h1 { font-size:27px; }
.course-mobile-head p { font-size:11px; }
.course-mobile-count { flex:none; margin-top:5px; padding:6px 9px; border:1px solid rgba(199,155,53,0.2); border-radius:999px; color:var(--gold); font-size:9px; font-weight:700; }
.course-location-primary { width:100%; margin:10px 0; }
.course-mobile-offline { display:grid; gap:4px; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel); }
.course-mobile-offline b { color:var(--text); font-size:11px; }
.course-mobile-offline span { color:var(--dim); font-size:9.5px; line-height:1.45; }

@media (max-width:1024px) {
  .course-discovery__grid { grid-template-columns:1fr 260px; }
  .course-found-card { grid-template-columns:1fr; }
  .course-found-card__actions { justify-content:flex-start; }
}
@media (max-width:700px) {
  .course-discovery--desktop { display:none; }
  .course-discovery--mobile { display:block; padding-bottom:10px; }
  .course-discovery--mobile .course-notice { align-items:flex-start; flex-direction:column; gap:4px; }
  .course-mode-tabs { display:grid; grid-template-columns:repeat(3,1fr); width:100%; }
  /* Wave 4 mobile tabs (Near Me | Search | Recent | Saved): 4 tabs fit one row */
  .course-discovery--mobile .course-mode-tabs { grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); }
  .course-mode-tabs button { padding:0 6px; font-size:11.5px; }
  .course-search-field { width:100%; margin:10px 0; }
  .course-search-field input { min-width:0; }
  .course-found-card { grid-template-columns:1fr; min-height:0; padding:13px; }
  .course-found-card__title h3 { font-size:13px; }
  .course-meta-row { gap:5px 9px; }
  .course-meta-row > span:not(.course-state)::before { margin-right:5px; }
  .course-found-card__actions .btn { width:100%; }
  .course-empty-state { min-height:230px; }
}

/* =====================================================================
   v4.8.000 CLUBHOUSE THEME — refinement layer
   1. Scoped dark-canvas media zones (video analysis, strategic maps,
      live overlays) intentionally contrasted against the light product.
   2. Light-theme legibility corrections after the retokenizing pass.
   ===================================================================== */

/* ---------- dark canvas: swing video stage ---------- */
.swing-video-frame { background:var(--dc-bg); }
.swing-player { background:var(--dc-bg); }
.swing-empty-scrim { background:linear-gradient(90deg,rgba(16,32,27,0.20),rgba(16,32,27,0.28) 48%,rgba(16,32,27,0.86)); }
.swing-mobile-shell .swing-empty-scrim { background:linear-gradient(180deg,rgba(16,32,27,0.10),rgba(16,32,27,0.80)); }
.swing-video-readout > div { background:rgba(16,32,27,0.74); border-left-color:rgba(217,180,92,0.65); }
.swing-video-readout span { color:var(--dc-gold); }
.swing-video-readout b { color:var(--dc-text); }
.swing-video-readout small { color:var(--dc-dim); }
.swing-timeline-cues { background:rgba(16,32,27,0.76); }
.swing-timeline-cues button { color:var(--dc-sub); background:rgba(243,241,234,0.06); }
.swing-timeline-cues button:hover { color:var(--dc-gold); background:rgba(217,180,92,0.12); }
.swing-timeline-cues.phases button.estimated { border-color:rgba(217,180,92,0.5); color:var(--dc-gold); }
.swing-capture-guide > span { border-color:rgba(217,180,92,0.45); background:rgba(16,32,27,0.78); color:var(--dc-gold); }
.swing-capture-guide b { color:var(--dc-text); }
.swing-capture-guide p { color:var(--dc-sub); }
.swing-mobile-shell .swing-capture-guide { background:rgba(16,32,27,0.78); }

/* ---------- dark canvas: camera capture overlay ---------- */
.cap-overlay { background:rgba(12,22,18,0.94); }
.cap-stage { background:var(--dc-bg); border-color:rgba(217,180,92,0.35); }
.cap-stage video { background:var(--dc-bg); }
.cap-bottom { background:linear-gradient(transparent,rgba(12,22,18,0.90)); }
.cap-bottom #cap-timer { color:var(--dc-gold); }
.cap-quality { color:var(--dc-mut); }
.cap-status { background:rgba(12,22,18,0.72); color:var(--dc-sub); }
.cap-guide { border-color:rgba(217,180,92,0.55); }
.cap-guide::before { border-left-color:rgba(217,180,92,0.20); }
.cap-guide span { box-shadow:inset 0 0 70px rgba(217,180,92,0.05); }
.cap-guide b { color:var(--dc-gold); }

/* ---------- dark canvas: strategic / live hole maps ---------- */
.play-map-canvas { background:var(--dc-bg); border-color:var(--green-deep); }
.play-map-canvas .flight { stroke:var(--gold-hi); filter:drop-shadow(0 0 4px rgba(217,180,92,0.4)); }
.play-map-badge { background:rgba(12,22,18,0.78); border-color:rgba(217,180,92,0.32); }
.play-map-badge b { color:var(--dc-gold); }
.play-map-badge span { color:var(--dc-mut); }
.play-position-dot { background:var(--dc-sage); color:var(--green-deep); box-shadow:0 0 0 6px rgba(143,168,146,0.18); }
.swing-frame { background:var(--dc-bg); }

/* ---------- light-theme corrections ---------- */
/* progress gradient on processing card */
.processing-track { background:var(--line); }
.processing-track i { background:linear-gradient(90deg,#B08A28,#D6AC4A); }
/* interrupted-session banner stays light */
.practice-interrupted { background:linear-gradient(90deg,rgba(46,107,80,0.08),var(--panel)); }
.practice-mobile-evidence div { background:rgba(23,60,50,0.04); }
/* media tiles keep light text over their dark photo scrims */
.live-visual .live-distance b { color:var(--dc-text); }
.live-visual .live-distance span { color:var(--dc-sub); }
.live-rec b { color:var(--dc-text); }
.live-rec span { color:var(--dc-mut); }
/* confirm dialogs sit on parchment */
.practice-confirm { background:var(--panel); }
/* ring centres match the card they sit on */
.swing-score-ring::before, .practice-clock-ring::before, .score-ring::before,
.challenge-progress .mini-ring::before { background:var(--panel); }
/* editorial hierarchy: major headings in deep golf green */
:is(.swing-page-header,.play-page-header,.practice-hero-head,.practice-subpage-head,.practice-session-head) h1,
:is(.swing-mobile-title,.play-mobile-title,.practice-mobile-title) h1,
.screen h1, .section-heading h2, .play-section-head h2 {
  color:var(--green);
}
.card h3 { color:var(--sage-deep); }

/* ========================================================================
   WAVE 4 · DEDICATED MOBILE UX (SPEC v3)
   Mobile-only compositions. Nothing here may affect ≥768px rendering —
   every rule is either scoped to a mobile shell class or wrapped in a
   max-width:767px media query. Palette: clubhouse tokens only.
   ======================================================================== */

/* Header "More" button: mobile-only sheet trigger (Community + secondary nav) */
.gag-header__more { display:none; }
@media (max-width:767px) {
  .gag-header__more { display:flex; }
}

/* ---------- Home · player snapshot + quick actions ---------- */
.mobile-card-label { display:block; color:var(--mut); font-size:9px; text-transform:uppercase; letter-spacing:.09em; margin-bottom:8px; }
.mobile-snapshot { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:10px; align-items:center; }
.mobile-snapshot > div { min-width:0; }
.mobile-snapshot span { display:block; color:var(--mut); font-size:8.5px; text-transform:uppercase; letter-spacing:.06em; }
.mobile-snapshot b { display:block; margin:3px 0 1px; color:var(--text); font:600 24px 'IBM Plex Mono',monospace; line-height:1.1; }
.mobile-snapshot small { display:block; font-size:8.5px; color:var(--green-mid); }
.mobile-snapshot small.baseline { color:var(--mut); }
.mobile-snapshot-trend svg { width:100%; height:34px; display:block; margin-top:4px; }
.mobile-quick--four { margin-bottom:10px; }
.mobile-quick--four button { min-height:84px; }
.mobile-community-link { display:flex; align-items:center; gap:12px; width:100%; padding:13px 14px; border:1px solid rgba(32,37,34,0.14); border-radius:12px; background:var(--panel); text-align:left; }
.mobile-community-link svg { width:22px; height:22px; color:var(--gold-text); flex:none; }
.mobile-community-link span { flex:1; min-width:0; }
.mobile-community-link b { display:block; font-size:12.5px; color:var(--text); }
.mobile-community-link small { display:block; color:var(--mut); font-size:9.5px; margin-top:1px; }
.mobile-community-link em { font-style:normal; color:var(--gold-text); font-size:17px; }

/* ---------- Play · live-round tactical layer + thumb-sized scoring ---------- */
.round-mobile-fbf { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:7px 0 6px; }
.round-mobile-fbf > div { border:1px solid rgba(32,37,34,0.12); border-radius:8px; padding:6px 4px; text-align:center; background:rgba(32,37,34,0.02); }
.round-mobile-fbf > div.primary { border-color:rgba(199,155,53,0.4); background:rgba(199,155,53,0.07); }
.round-mobile-fbf span { display:block; color:var(--mut); font-size:7px; text-transform:uppercase; letter-spacing:.07em; }
.round-mobile-fbf b { display:block; margin-top:2px; color:var(--text); font:600 13px 'IBM Plex Mono',monospace; }
.round-mobile-fbf > div.primary b { color:var(--gold-text); }

.round-mobile-tactical { margin-bottom:9px; padding:12px; border:1px solid rgba(32,37,34,0.15); border-radius:11px; background:linear-gradient(155deg,var(--panel),var(--lift)); }
.round-mobile-tactical-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:8px; }
.round-mobile-tactical-facts > div { border-left:2px solid rgba(199,155,53,0.45); padding-left:8px; }
.round-mobile-tactical-facts span { display:block; color:var(--mut); font-size:7.5px; text-transform:uppercase; letter-spacing:.08em; }
.round-mobile-tactical-facts b { display:block; margin-top:2px; color:var(--text); font-size:11.5px; }
.round-mobile-tactical-advice { margin:9px 0 0; color:var(--sub); font-size:10.5px; line-height:1.5; }

@media (max-width:767px) {
  /* Very large thumb-friendly score stepper for outdoor use */
  .play-mobile-shell .round-score-panel .step { gap:20px; }
  .play-mobile-shell .round-score-panel .step button { width:60px; height:60px; border-radius:16px; font-size:30px; }
  .play-mobile-shell .round-score-panel .step b { font-size:50px; min-width:56px; }
  .play-mobile-shell .round-score-panel .round-step-row > span { font-size:11px; }
  .play-mobile-shell .round-save-next { min-height:56px; font-size:14px; }
  .play-mobile-shell .round-result-grid .toggle { gap:6px; }
  .play-mobile-shell .round-result-grid .toggle button { min-height:44px; font-size:9px; border:1px solid rgba(32,37,34,0.18); border-radius:9px; background:var(--panel); color:var(--sub); }
  .play-mobile-shell .round-result-grid .toggle button.on { border-color:rgba(199,155,53,0.5); background:rgba(199,155,53,0.1); color:var(--gold-text); font-weight:700; }
}

/* ---------- Insights · dedicated mobile cards + tabs ---------- */
.insights-desktop-shell { display:none; }
.insights-mobile-shell { display:block; max-width:520px; margin:0 auto; }
@media (min-width:768px) {
  .insights-desktop-shell { display:block; }
  .insights-mobile-shell { display:none; }
}
.insights-m-head { display:flex; align-items:center; justify-content:space-between; padding:2px 1px 8px; }
.insights-m-head h1 { margin:0; font-size:18px; }
.insights-m-head p { margin:1px 0 0; color:var(--mut); font-size:10px; }
.insights-m-tabs { display:flex; gap:6px; margin:10px 0 12px; }
.insights-m-tabs button { flex:1; min-height:42px; border:1px solid rgba(32,37,34,0.15); border-radius:10px; background:var(--panel); color:var(--mut); font-size:11px; font-weight:600; }
.insights-m-tabs button.on { color:var(--gold-text); border-color:rgba(199,155,53,0.45); background:rgba(199,155,53,0.08); }
.insights-m-card { margin-bottom:10px; padding:14px; border:1px solid rgba(32,37,34,0.14); border-radius:12px; background:linear-gradient(155deg,var(--panel),var(--lift)); }
.insights-m-card > span { display:block; color:var(--mut); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.insights-m-card > strong { display:block; margin:4px 0 1px; color:var(--text); font:600 22px 'IBM Plex Mono',monospace; }
.insights-m-card small.up { color:var(--green-mid); font-size:9px; }
.insights-m-card small.down { color:var(--red-soft); font-size:9px; }
.insights-m-card small.baseline { color:var(--mut); font-size:9px; }
.insights-m-card.hero { padding:16px 14px; }
.insights-m-hero-top { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--mut); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.insights-m-hero-top svg { width:110px; height:30px; }
.insights-m-hero-val { display:flex; align-items:baseline; gap:9px; margin-top:5px; }
.insights-m-hero-val strong { color:var(--text); font:600 34px 'IBM Plex Mono',monospace; }
.insights-m-note { color:var(--mut); font-size:9px; }
.insights-m-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.insights-m-grid .insights-m-card { margin-bottom:0; }
.insights-m-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.insights-m-card-head > span { color:var(--mut); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.insights-m-card-head small { color:var(--dim); font-size:8.5px; }
.insights-m-card.trend svg { width:100%; height:38px; display:block; margin:4px 0; }
.insights-m-trend-val { font-size:20px; }

/* ---------- My Bag · large thumb-friendly club rows ---------- */
@media (max-width:767px) {
  #outlet .screen[data-screen="equipment"] .club-row { min-height:66px; padding:12px 6px; gap:12px; }
  #outlet .screen[data-screen="equipment"] .club-row .club-ic { width:46px; height:46px; font-size:12px; }
  #outlet .screen[data-screen="equipment"] .club-row b { font-size:14.5px; }
  #outlet .screen[data-screen="equipment"] .club-row .dim { font-size:11px; }
  #outlet .screen[data-screen="equipment"] .club-row .mono { font-size:15px; }
}

/* ---------- Profile · mobile-only Community entry ---------- */
.profile-community-entry { display:none; }
@media (max-width:767px) {
  .profile-community-entry { display:block; }
}

/* ---------- Swing · thumb-sized capture actions on mobile ---------- */
@media (max-width:767px) {
  .swing-mobile-shell .swing-playback-actions .btn { min-height:46px; font-size:11px; }
}

/* ========================================================================
   GAG v5 RC1 — mobile-first camera foundation
   ======================================================================== */
.swing-capture-modes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:2px 0 10px;
}
.swing-capture-mode {
  min-height:82px;
  padding:11px 10px;
  border:1px solid rgba(32,37,34,.14);
  border-radius:14px;
  text-align:left;
  background:var(--panel);
  color:var(--text);
  box-shadow:0 6px 18px rgba(16,32,27,.05);
}
.swing-capture-mode span {
  display:block;
  margin-bottom:4px;
  color:var(--mut);
  font-size:8px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.swing-capture-mode b { display:block; font:700 12px Sora,sans-serif; }
.swing-capture-mode small { display:block; margin-top:4px; color:var(--mut); font-size:8px; line-height:1.35; }
.swing-capture-mode.analyse {
  border-color:rgba(217,180,92,.48);
  background:linear-gradient(145deg,rgba(217,180,92,.14),rgba(251,250,246,.98));
}
.swing-capture-mode.analyse span { color:var(--gold-text); }
.swing-capture-mode:active { transform:scale(.985); }

.cap-mode {
  position:absolute;
  z-index:3;
  top:calc(58px + env(safe-area-inset-top));
  left:16px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(12,22,18,.66);
  color:var(--dc-gold);
  font-size:8px;
  font-weight:800;
  letter-spacing:.1em;
  backdrop-filter:blur(8px);
}
.cap-stage[data-facing="user"] #cap-video { transform:scaleX(-1); }

@media (max-width:767px) {
  #outlet .screen[data-screen="swing"] { padding-left:8px; padding-right:8px; }
  .swing-mobile-shell { max-width:none; }
  .swing-mobile-shell .swing-video-card { border-radius:14px; }
  .swing-mobile-shell .swing-video-frame { aspect-ratio:9/12; max-height:58dvh; }
  .swing-mobile-shell .swing-empty-visual,
  .swing-mobile-shell .swing-player { width:100%; height:100%; }
  .swing-mobile-shell .swing-player { object-fit:contain; background:#050706; }
  .cap-stage video { object-fit:cover; }
  .cap-stage[data-mode="analyse"] video { object-fit:contain; }
}