:root{
  color-scheme:light;
  --canvas:#F3F0E9;
  --surface:#FAF9F5;
  --surface-subtle:#F6F3EC;
  --surface-green:#E8EFEA;
  --surface-green-strong:#DDE8E2;
  --forest:#123D36;
  --forest-deep:#0B2724;
  --carbon:#161918;
  --mint:#79B7A2;
  --bronze:#9A8465;
  --bronze-ink:#786448;
  --muted:#646B67;
  --muted-soft:#818782;
  --line:rgba(18,61,54,.12);
  --line-strong:rgba(18,61,54,.22);
  --positive:#2F735F;
  --negative:#A5544B;
  --benchmark:#51647A;
  --warning:#8A5D25;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --ease:cubic-bezier(.22,.8,.22,1);
  --press:100ms;
  --ui:180ms;
}
*{box-sizing:border-box}
html,body,#app{width:100%;max-width:100%;min-width:0;overflow-x:clip}
html{background:var(--canvas)}
body{
  margin:0;
  background:var(--canvas);
  color:var(--carbon);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.48;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
button,select,input{font:inherit}
button{touch-action:manipulation}
button,select,summary{
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid rgba(121,183,162,.9);
  outline-offset:3px;
}
svg{display:block}
h1,h2,h3,p{overflow-wrap:anywhere}
.goodtext{color:var(--positive)!important}
.badtext{color:var(--negative)!important}
.muted{color:var(--muted)}
.view{display:none;min-width:0;max-width:100%}
.view.active{display:block}

/* ---------- Product frame ---------- */
.app-frame{
  min-height:100vh;
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  background:var(--canvas);
}
.side-nav{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:28px 16px 20px;
  border-right:1px solid rgba(255,255,255,.08);
  background:var(--forest-deep);
  color:#F8F6F0;
}
.brand-lockup{
  position:relative;
  padding:3px 10px 31px 18px;
}
.brand-lockup:before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:1px;
  height:30px;
  background:var(--bronze);
}
.brand-wordmark strong{
  display:block;
  color:#FCFBF7;
  font-size:15px;
  font-weight:560;
  line-height:1.12;
  letter-spacing:-.025em;
}
.brand-wordmark span{
  display:block;
  margin-top:4px;
  color:rgba(248,246,240,.62);
  font-size:9px;
  font-weight:520;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.side-nav nav{
  display:grid;
  gap:2px;
}
.side-nav nav button{
  position:relative;
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 11px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:rgba(248,246,240,.57);
  text-align:left;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:color var(--ui) var(--ease),background var(--ui) var(--ease),transform var(--press) var(--ease);
}
.side-nav nav button:hover{color:#fff;background:rgba(255,255,255,.05)}
.side-nav nav button:active{transform:scale(.985)}
.side-nav nav button.active{
  color:#fff;
  background:transparent;
}
.side-nav nav button.active:before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:2px;
  border-radius:2px;
  background:var(--bronze);
}
.nav-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  color:rgba(248,246,240,.54);
}
.side-nav nav button.active .nav-icon{color:var(--mint)}
.icon{width:18px;height:18px}
.side-foot{
  margin-top:auto;
  padding:16px 10px 2px;
  border-top:1px solid rgba(255,255,255,.10);
}
.side-foot span,.side-foot small{
  display:block;
  color:rgba(248,246,240,.58);
  font-size:9px;
  line-height:1.4;
}
.side-foot span{
  font-size:8px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.side-foot strong{
  display:block;
  margin:5px 0 3px;
  color:#F8F6F0;
  font-size:12px;
  font-weight:560;
}
.workspace{min-width:0;max-width:100%;background:var(--canvas)}
.context-bar{
  position:sticky;
  z-index:30;
  top:0;
  min-height:72px;
  width:100%;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:12px clamp(20px,3vw,38px);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(18,61,54,.98);
}
@supports(backdrop-filter:blur(18px)){
  .context-bar{
    background:rgba(18,61,54,.94);
    backdrop-filter:blur(18px) saturate(1.05);
    -webkit-backdrop-filter:blur(18px) saturate(1.05);
  }
}
.mobile-brand{display:none}
.context-tools{
  min-width:0;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.context-select,.benchmark-context{
  min-width:0;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 5px 4px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.065);
}
.context-select>span,.benchmark-context>span{
  color:rgba(249,247,242,.62);
  font-size:8px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.context-select select{
  min-width:0;
  max-width:340px;
  border:0;
  outline:0;
  background:transparent;
  color:#F9F7F2;
  font-size:11px;
  font-weight:520;
}
.context-select select option{color:var(--carbon);background:#fff}
.benchmark-control{
  display:flex;
  align-items:center;
  gap:2px;
  padding:2px;
  overflow:auto;
  scrollbar-width:none;
}
.benchmark-control::-webkit-scrollbar{display:none}
.benchmark-control button{
  min-height:36px;
  padding:7px 11px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(249,247,242,.58);
  font-size:10px;
  font-weight:540;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--ui) var(--ease),color var(--ui) var(--ease),transform var(--press) var(--ease);
}
.benchmark-control button:hover{color:#fff}
.benchmark-control button:active{transform:scale(.975)}
.benchmark-control button.active{
  background:#F8F6F0;
  color:var(--forest);
}
.workspace-body{
  width:min(100%,1190px);
  margin:0 auto;
  padding:clamp(30px,4vw,50px) clamp(24px,4vw,48px) 76px;
}

/* ---------- Type + shared composition ---------- */
.page-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding:0 0 24px;
  border-bottom:1px solid var(--line);
}
.compact-heading{align-items:center}
.eyebrow,.section-label,.feature-kicker{
  display:block;
  color:var(--bronze-ink);
  font-size:10px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.page-heading h1{
  margin:7px 0 5px;
  color:var(--forest);
  font-size:clamp(36px,4.2vw,50px);
  font-weight:540;
  line-height:1;
  letter-spacing:-.048em;
}
.page-heading p{
  max-width:560px;
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.section{
  margin-top:clamp(32px,4vw,48px);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}
.section-head h2{
  margin:4px 0 0;
  color:var(--forest);
  font-size:21px;
  font-weight:560;
  line-height:1.12;
  letter-spacing:-.03em;
}
.section-head p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  font-size:11px;
  text-align:right;
}
.grid{display:grid;gap:12px}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.support-panel,.profile-panel{
  min-width:0;
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.card h3,.support-panel h3,.profile-panel h3{
  margin:0 0 12px;
  color:var(--forest);
  font-size:14px;
  font-weight:560;
  letter-spacing:-.015em;
}
.card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:15px;
}
.card-heading h2,.card-heading h3{
  margin:3px 0 0;
  color:var(--forest);
  font-weight:560;
  letter-spacing:-.02em;
}
.card-heading h2{font-size:20px}
.card-heading h3{font-size:14px}
.kpi-label,.control-label{
  color:var(--muted-soft);
  font-size:9px;
  font-weight:600;
  letter-spacing:.085em;
  text-transform:uppercase;
}
.kpi-note{
  margin:8px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.48;
}
.tour-badge,.chip{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border:1px solid rgba(81,100,122,.20);
  border-radius:999px;
  background:transparent;
  color:var(--benchmark);
  font-size:8px;
  font-weight:600;
  letter-spacing:.035em;
  white-space:nowrap;
}
.chip.neutral{background:rgba(81,100,122,.07)}
.metric-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--surface-green);
  color:var(--forest);
  font-size:9px;
  font-weight:600;
}
.control{
  min-width:0;
  min-height:48px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
}
.control-label{margin-bottom:3px}
.control select,.period-select select{
  width:100%;
  min-width:0;
  min-height:28px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--carbon);
  font-weight:520;
}
.period-select{min-width:220px;max-width:310px}
.segmented{
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-subtle);
}
.segmented button{
  min-height:38px;
  padding:7px 13px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:540;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--ui) var(--ease),color var(--ui) var(--ease),transform var(--press) var(--ease);
}
.segmented button:active{transform:scale(.975)}
.segmented button.active{background:var(--forest);color:#fff}
details{
  padding:15px 17px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:transparent;
}
summary{
  min-height:44px;
  display:flex;
  align-items:center;
  cursor:pointer;
  color:var(--forest);
  font-size:11px;
  font-weight:560;
}
.technical{
  display:grid;
  gap:8px;
  padding:4px 0 3px;
  color:var(--muted);
  font-size:10px;
}

/* ---------- Overview ---------- */
.round-masthead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:32px;
  padding:3px 0 27px;
  border-bottom:1px solid var(--line);
}
.round-masthead h1{
  max-width:760px;
  margin:8px 0 7px;
  color:var(--forest);
  font-size:clamp(38px,4.4vw,54px);
  font-weight:540;
  line-height:1;
  letter-spacing:-.052em;
}
.round-masthead p{margin:0;color:var(--muted);font-size:12px}
.round-score{
  min-width:205px;
  padding-left:28px;
  border-left:1px solid var(--line);
  text-align:right;
}
.round-score>span{
  display:block;
  color:var(--bronze-ink);
  font-size:9px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.round-score>strong{
  display:block;
  margin-top:2px;
  color:var(--forest);
  font-size:72px;
  font-weight:520;
  line-height:.88;
  letter-spacing:-.065em;
}
.round-score>div{margin-top:8px;color:var(--carbon);font-size:13px;font-weight:560}
.round-score>small{display:block;max-width:230px;margin:4px 0 0 auto;color:var(--muted);font-size:9px}
.snapshot-section{margin-top:26px}
.snapshot-head{margin-bottom:12px}
.snapshot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.overview-score-card,.overview-metric-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.overview-score-card{
  grid-column:1/-1;
  min-height:218px;
  padding:20px;
  background:#F9F7F1;
}
.overview-metric-card{
  min-height:214px;
  padding:18px;
}
.overview-metric-card:nth-child(3){background:var(--surface-green)}
.snapshot-title{
  min-height:28px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.snapshot-title>span{
  color:var(--forest);
  font-size:12px;
  font-weight:600;
}
.snapshot-title>small{
  max-width:48%;
  color:var(--muted);
  font-size:8px;
  line-height:1.35;
  text-align:right;
}
.score-history-layout{
  height:157px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:22px;
  align-items:end;
  margin-top:8px;
}
.score-history{
  height:133px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:end;
  gap:10px;
  padding:10px 3px 0;
  border-bottom:1px solid var(--line);
}
.score-history-col{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
}
.score-history-bar{
  width:min(100%,31px);
  min-height:20px;
  border-radius:4px 4px 1px 1px;
  background:#D9DEDB;
}
.score-history-bar.current{background:var(--forest)}
.score-history-col span{color:var(--muted);font-size:8px;font-weight:520}
.score-history-col:last-child span{color:var(--forest);font-weight:650}
.score-average{
  align-self:center;
  padding-left:18px;
  border-left:1px solid var(--line);
}
.score-average span,.score-average small{display:block}
.score-average span{
  color:var(--bronze-ink);
  font-size:8px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.score-average strong{
  display:block;
  margin:2px 0;
  color:var(--forest);
  font-size:45px;
  font-weight:540;
  line-height:1;
  letter-spacing:-.055em;
}
.score-average small{font-size:9px;font-weight:560}
.metric-visual{position:relative}
.donut-visual{
  width:min(100%,168px);
  aspect-ratio:1;
  margin:8px auto 0;
}
.donut-visual svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut-track,.donut-value{fill:none;stroke-width:9}
.donut-track{stroke:#E1E6E2}
.donut-value{stroke:#245E52;stroke-linecap:round}
.donut-center{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
}
.donut-center strong{
  color:var(--forest);
  font-size:34px;
  font-weight:540;
  letter-spacing:-.045em;
}
.donut-center span{margin-top:2px;color:var(--muted);font-size:8px}
.fairway-fan{margin:12px auto 0}
.fairway-fan svg{width:100%;max-height:137px}
.fairway-fan text{fill:var(--muted);font-size:10px;font-weight:560}
.fan-line{fill:none;stroke:rgba(18,61,54,.15);stroke-width:1;stroke-dasharray:3 4}
.fan-left,.fan-right{fill:#D8DEDA}
.fan-fair{fill:#6E9E8E}
.fan-tee{fill:var(--forest)}
.fairway-labels{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:6px;
  margin-top:-3px;
  color:var(--muted);
  font-size:8px;
}
.fairway-labels span:last-child{text-align:right}
.fairway-labels strong{color:var(--forest);font-size:9px;font-weight:600}
.distance-value{margin-top:28px}
.distance-value strong{
  display:block;
  color:var(--forest);
  font-size:38px;
  font-weight:540;
  line-height:1;
  letter-spacing:-.05em;
}
.distance-value span{display:block;margin-top:5px;color:var(--muted);font-size:9px}
.distance-scale{position:relative;height:50px;margin:31px 6px 0}
.distance-track{
  position:absolute;
  left:0;right:0;top:18px;
  height:4px;
  border-radius:999px;
  background:#DDE5E0;
}
.distance-marker{
  position:absolute;
  top:9px;
  width:2px;
  height:22px;
  transform:translateX(-50%);
}
.distance-marker.benchmark{background:var(--bronze-ink)}
.distance-marker.you{
  top:14px;
  width:12px;
  height:12px;
  border:3px solid var(--surface);
  border-radius:50%;
  background:var(--forest);
  box-shadow:0 0 0 1px var(--forest);
}
.distance-marker span{
  position:absolute;
  top:27px;
  left:50%;
  transform:translateX(-50%);
  color:var(--bronze-ink);
  font-size:7px;
  white-space:nowrap;
  font-style:normal;
}
.sg-total{margin-top:19px}
.sg-total strong{
  display:block;
  color:var(--forest);
  font-size:37px;
  font-weight:540;
  line-height:1;
  letter-spacing:-.05em;
}
.sg-total span{display:block;margin-top:4px;color:var(--muted);font-size:8px}
.sg-mini-bars{display:grid;gap:9px;margin-top:18px}
.sg-mini-bars>div{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) 32px;
  align-items:center;
  gap:7px;
}
.sg-mini-bars span{
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.sg-mini-bars i{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:#E1E5E2;
}
.sg-mini-bars b{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--negative);
}
.sg-mini-bars b.good{background:var(--positive)}
.sg-mini-bars strong{font-size:9px;font-weight:600;text-align:right}
.round-story{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.72fr);
  overflow:hidden;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}
.round-story-main{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:16px;
  padding:27px 27px 27px 2px;
}
.story-number{color:var(--bronze-ink);font-size:11px;font-weight:650}
.round-story h2{
  margin:4px 0 8px;
  color:var(--forest);
  font-size:25px;
  font-weight:550;
  line-height:1.08;
  letter-spacing:-.035em;
}
.round-story p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.round-story-next{
  padding:27px;
  border-left:1px solid var(--line);
  background:var(--surface-green);
}
.round-story-next strong{
  display:block;
  margin:7px 0 5px;
  color:var(--forest);
  font-size:14px;
  font-weight:600;
}
.benchmark-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  padding:6px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-green);
}
.band-card{
  min-width:0;
  padding:15px 16px 12px;
  border:0;
  border-right:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.band-card:last-child{border-right:0}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.band-title{color:var(--forest);font-size:11px;font-weight:600}
.band-value{color:var(--muted);font-size:9px;font-weight:520}
.band{position:relative;height:58px;margin:22px 4px 20px}
.band-track{
  position:absolute;
  left:0;right:0;top:25px;
  height:3px;
  border-radius:999px;
  background:rgba(18,61,54,.14);
}
.marker{
  position:absolute;
  top:16px;
  width:1px;
  height:21px;
  background:rgba(18,61,54,.34);
  transform:translateX(-50%);
}
.marker.selected{width:2px;background:var(--bronze-ink)}
.marker .marker-label{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  color:var(--muted);
  font-size:7px;
  font-weight:560;
  white-space:nowrap;
}
.marker.selected .marker-label{color:var(--bronze-ink)}
.marker .marker-label.lane-0{top:26px}
.marker .marker-label.lane-1{top:-17px}
.marker .marker-label.lane-2{top:38px}
.you-marker{
  position:absolute;
  top:20px;
  width:13px;
  height:13px;
  border:3px solid var(--surface-green);
  border-radius:50%;
  background:var(--forest);
  box-shadow:0 0 0 1px var(--forest);
  transform:translateX(-50%);
}
.you-marker span{
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  color:var(--forest);
  font-size:7px;
  font-weight:650;
  letter-spacing:.04em;
}
.band-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:7px}
.diagnostic-grid,.split-support{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.driverstats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.mini{
  min-width:0;
  padding:13px 10px;
  border-right:1px solid var(--line);
}
.mini:last-child{border-right:0}
.mini small{display:block;color:var(--muted);font-size:8px}
.mini strong{
  display:block;
  margin-top:3px;
  color:var(--forest);
  font-size:19px;
  font-weight:540;
  letter-spacing:-.025em;
}
.diagnostic-copy{
  display:grid;
  gap:4px;
  margin:15px 0 0;
}
.diagnostic-copy strong{color:var(--forest);font-size:11px;font-weight:600}
.diagnostic-copy span{color:var(--muted);font-size:10px;line-height:1.45}
.bars{display:grid;gap:12px}
.barrow{
  min-width:0;
  display:grid;
  grid-template-columns:118px minmax(0,1fr) 52px;
  align-items:center;
  gap:10px;
}
.barlabel{
  overflow:hidden;
  color:var(--carbon);
  font-size:10px;
  font-weight:520;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.bartrack{
  height:5px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(18,61,54,.08);
}
.barfill{height:100%;border-radius:999px;background:var(--negative)}
.barfill.good{background:var(--positive)}
.barval{text-align:right;font-size:10px;font-weight:600}
table{width:100%;border-collapse:collapse;font-size:11px}
th{
  padding:0 0 8px;
  color:var(--muted-soft);
  font-size:8px;
  font-weight:600;
  letter-spacing:.06em;
  text-align:left;
  text-transform:uppercase;
}
td{padding:9px 0;border-top:1px solid var(--line)}
td:last-child,th:last-child{text-align:right}
.priority-stack{border-top:1px solid var(--line)}
.priority-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 24px;
  gap:14px;
  align-items:center;
  padding:17px 4px;
  border-bottom:1px solid var(--line);
}
.priority-index{color:var(--bronze-ink);font-size:9px;font-weight:650}
.priority-row strong{color:var(--forest);font-size:12px;font-weight:580}
.priority-row p{margin:3px 0 0;color:var(--muted);font-size:10px}
.priority-arrow{color:var(--muted)}
.priority-arrow .icon{width:15px;height:15px}

/* ---------- Trends ---------- */
.trend-summary-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:18px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-green);
}
.trend-summary-item{
  min-width:0;
  padding:16px;
  border-right:1px solid var(--line);
}
.trend-summary-item:last-child{border-right:0}
.trend-summary-item span,.trend-summary-item small{display:block}
.trend-summary-item span{
  color:var(--muted);
  font-size:8px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.trend-summary-item strong{
  display:block;
  margin:4px 0 2px;
  color:var(--forest);
  font-size:24px;
  font-weight:540;
  letter-spacing:-.04em;
}
.trend-summary-item small{color:var(--muted);font-size:8px}
.trend-stage{
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(260px,.56fr);
  gap:12px;
  align-items:stretch;
}
.trend-chart-panel{
  min-width:0;
  width:100%;
  overflow:hidden;
  padding:19px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.trend-chart-header{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:18px;
  margin-bottom:12px;
}
.trend-chart-header h2{
  margin:3px 0 0;
  color:var(--forest);
  font-size:20px;
  font-weight:560;
  letter-spacing:-.03em;
}
.metric-buttons{
  min-width:0;
  display:flex;
  justify-content:flex-end;
  gap:4px;
  overflow:auto;
  scrollbar-width:none;
}
.metric-buttons::-webkit-scrollbar{display:none}
.metric-buttons button{
  min-height:36px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font-size:9px;
  font-weight:540;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--ui) var(--ease),color var(--ui) var(--ease),transform var(--press) var(--ease);
}
.metric-buttons button:active{transform:scale(.975)}
.metric-buttons button.active{border-color:var(--forest);background:var(--forest);color:#fff}
.chartwrap{width:100%;min-width:0;min-height:220px;overflow:hidden}
.chartwrap svg{width:100%;max-width:100%;height:auto}
.chart-label{fill:#727A75;font-size:9px}
.chart-value{fill:var(--forest);font-size:9px;font-weight:650}
.trend-insight{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:270px;
  padding:24px;
  border-radius:var(--radius-md);
  background:var(--forest);
  color:#F8F6F0;
}
.trend-insight:before{
  content:"";
  position:absolute;
  left:24px;
  top:0;
  width:48px;
  height:1px;
  background:var(--bronze);
}
.trend-insight .section-label{color:#C5AA83}
.trend-insight strong{
  display:block;
  margin-top:7px;
  color:#FCFBF7;
  font-size:23px;
  font-weight:510;
  line-height:1.14;
  letter-spacing:-.035em;
}
.trend-insight p{margin:9px 0 0;color:rgba(248,246,240,.58);font-size:10px}
.support-panel{background:var(--surface)}
.recent-rounds-panel{background:var(--surface-green)}
.round-list{display:grid}
.round-list-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  padding:11px 0;
  border-top:1px solid var(--line);
}
.round-list-row:first-child{border-top:0}
.round-list-row>div:last-child{text-align:right}
.round-list-row strong{display:block;color:var(--forest);font-size:10px;font-weight:580}
.round-list-row span{display:block;margin-top:2px;color:var(--muted);font-size:8px}

/* ---------- Practice ---------- */
.practice-focus{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr);
  margin-top:22px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.practice-focus-main{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:27px;
}
.practice-order{color:var(--bronze-ink);font-size:11px;font-weight:650;letter-spacing:.08em}
.practice-focus-main h2{
  max-width:690px;
  margin:4px 0 8px;
  color:var(--forest);
  font-size:28px;
  font-weight:550;
  line-height:1.08;
  letter-spacing:-.04em;
}
.practice-focus-main p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.practice-session{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:25px;
  border-left:1px solid rgba(255,255,255,.09);
  background:var(--forest);
}
.practice-session .section-label{color:#C5AA83}
.practice-session strong{
  display:block;
  margin-top:7px;
  color:#F8F6F0;
  font-size:13px;
  font-weight:530;
  line-height:1.5;
}
.practice-secondary-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:10px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.practice-secondary-item{
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:12px;
  padding:17px 14px;
}
.practice-secondary-item:first-child{border-right:1px solid var(--line)}
.practice-secondary-item>span{color:var(--bronze-ink);font-size:9px;font-weight:650}
.practice-secondary-item strong{display:block;color:var(--forest);font-size:11px;font-weight:600}
.practice-secondary-item p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.45}
.profile-panel{background:var(--surface-green)}
.profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:10px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.profile-grid>div{
  padding:14px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.profile-grid span{
  display:block;
  color:var(--muted);
  font-size:8px;
  font-weight:560;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.profile-grid strong{
  display:block;
  margin-top:5px;
  color:var(--forest);
  font-size:22px;
  font-weight:540;
  letter-spacing:-.04em;
}
.profile-panel>p{margin:10px 0 0;color:var(--muted);font-size:9px}

/* ---------- Shot analysis ---------- */
.shot-page{
  width:100%;
  max-width:100%;
}
.shot-toolbar{
  display:grid;
  gap:9px;
  margin-bottom:18px;
}
.shot-primary-controls,
.shot-secondary-controls{
  display:grid;
  gap:8px;
  align-items:stretch;
}
.shot-primary-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.shot-secondary-controls{
  grid-template-columns:minmax(220px,.7fr) minmax(190px,.3fr);
  max-width:620px;
}
.shot-secondary-controls .segmented{width:100%}
.shot-secondary-controls .segmented button{flex:1}
.shot-secondary-controls .period-select{min-width:0;max-width:none}
.shot-meta{
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
}
.shot-verdict{
  position:relative;
  overflow:hidden;
  padding:24px 24px 0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  background:var(--forest-deep);
  color:#F8F6F0;
}
.shot-verdict:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:rgba(248,246,240,.18);
}
.shot-verdict.bad:before{background:var(--negative)}
.shot-verdict.good:before{background:var(--positive)}
.shot-verdict-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.section-label.light{color:rgba(248,246,240,.56)}
.shot-verdict h1{
  margin:5px 0 0;
  color:#FCFBF7;
  font-size:24px;
  font-weight:560;
  line-height:1;
  letter-spacing:-.035em;
}
.shot-status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(248,246,240,.72);
  font-size:8px;
  font-weight:600;
  white-space:nowrap;
}
.shot-status-chip i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(248,246,240,.42);
}
.shot-status-chip.bad i{background:#D98B83}
.shot-status-chip.good i{background:#7FC5AE}
.shot-verdict-main{
  max-width:720px;
  padding:30px 0 24px;
}
.shot-verdict-main>strong{
  display:block;
  color:#FCFBF7;
  font-size:64px;
  font-weight:520;
  line-height:.88;
  letter-spacing:-.065em;
}
.shot-verdict-main>span{
  display:block;
  margin-top:8px;
  color:rgba(248,246,240,.58);
  font-size:10px;
  font-weight:560;
  letter-spacing:.02em;
}
.shot-verdict-main h2{
  margin:22px 0 7px;
  color:#FCFBF7;
  font-size:25px;
  font-weight:540;
  line-height:1.08;
  letter-spacing:-.035em;
}
.shot-verdict-main p{
  max-width:640px;
  margin:0;
  color:rgba(248,246,240,.62);
  font-size:11px;
  line-height:1.55;
}
.shot-verdict-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 -24px;
  border-top:1px solid rgba(255,255,255,.10);
}
.shot-verdict-strip>div{
  min-width:0;
  padding:14px 18px;
  border-right:1px solid rgba(255,255,255,.10);
}
.shot-verdict-strip>div:last-child{border-right:0}
.shot-verdict-strip span,
.shot-verdict-strip strong{
  display:block;
}
.shot-verdict-strip span{
  color:rgba(248,246,240,.44);
  font-size:8px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.shot-verdict-strip strong{
  margin-top:4px;
  overflow:hidden;
  color:#F8F6F0;
  font-size:13px;
  font-weight:580;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.shot-verdict-next{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 -24px;
  padding:13px 18px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.shot-verdict-next span{
  color:rgba(248,246,240,.44);
  font-size:8px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.shot-verdict-next strong{
  color:#F8F6F0;
  font-size:10px;
  font-weight:600;
  text-align:right;
}
.shot-visual-card{
  min-width:0;
  margin-top:18px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
.shot-card-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:20px 20px 14px;
}
.shot-card-head h2{
  margin:4px 0 0;
  color:var(--forest);
  font-size:20px;
  font-weight:560;
  line-height:1.1;
  letter-spacing:-.03em;
}
.shot-card-head small{
  color:var(--muted-soft);
  font-size:8px;
  white-space:nowrap;
}
.shot-pattern-stage{
  min-height:300px;
  padding:8px 12px 2px;
  background:
    radial-gradient(circle at 50% 52%,rgba(121,183,162,.14),transparent 29%),
    linear-gradient(180deg,#EAF0EA 0%,#DDE7DF 100%);
}
.shot-pattern-stage svg{width:100%;height:auto;max-height:300px}
.pattern-corridor{fill:rgba(255,255,255,.42);stroke:rgba(18,61,54,.08);stroke-width:1}
.pattern-target{stroke:rgba(18,61,54,.24);stroke-width:1.2;stroke-dasharray:4 5}
.pattern-cross{stroke:rgba(18,61,54,.12);stroke-width:1}
.pattern-ellipse{fill:rgba(18,61,54,.12);stroke:rgba(18,61,54,.48);stroke-width:2}
.pattern-centre{fill:var(--forest);stroke:#F8F6F0;stroke-width:3}
.pattern-target-dot{fill:var(--bronze)}
.pattern-label,.flight-label,.delivery-label{
  fill:rgba(18,61,54,.58);
  font-size:8px;
  font-weight:650;
  letter-spacing:.06em;
}
.shot-stat-strip{
  display:grid;
  border-top:1px solid var(--line);
}
.shot-stat-strip.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.shot-stat-strip.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.shot-stat-strip>div{
  min-width:0;
  padding:13px 15px;
  border-right:1px solid var(--line);
}
.shot-stat-strip>div:last-child{border-right:0}
.shot-stat-strip span,
.shot-stat-strip strong,
.shot-stat-strip small{display:block}
.shot-stat-strip span{
  color:var(--muted-soft);
  font-size:8px;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.shot-stat-strip strong{
  margin-top:4px;
  overflow:hidden;
  color:var(--forest);
  font-size:14px;
  font-weight:580;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.shot-stat-strip small{
  margin-top:3px;
  color:var(--muted);
  font-size:7px;
}
.shot-stat-strip>div.bad strong{color:var(--negative)}
.shot-stat-strip>div.good strong{color:var(--positive)}
.shot-card-note{
  margin:0;
  padding:12px 20px 16px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
}
.shot-visual-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.shot-flight-stage,
.shot-delivery-stage{
  min-height:206px;
  padding:8px 12px 0;
  background:var(--surface-green);
}
.shot-flight-stage svg,
.shot-delivery-stage svg{width:100%;height:auto;max-height:206px}
.flight-ground{stroke:rgba(18,61,54,.22);stroke-width:1}
.flight-path{fill:none;stroke:var(--forest);stroke-width:3;stroke-linecap:round}
.flight-ball{fill:#F8F6F0;stroke:var(--forest);stroke-width:2}
.flight-land{fill:var(--bronze)}
.flight-apex-line{stroke:rgba(18,61,54,.22);stroke-width:1;stroke-dasharray:3 4}
.delivery-target{stroke:rgba(18,61,54,.26);stroke-width:1.3;stroke-dasharray:4 5}
.delivery-path{stroke:var(--forest);stroke-width:3;stroke-linecap:round}
.delivery-arrow{fill:var(--forest)}
.delivery-face{fill:var(--bronze)}
.delivery-ball{fill:#F8F6F0;stroke:var(--forest);stroke-width:2}
.shot-priority{
  position:relative;
  margin-top:18px;
  overflow:hidden;
  padding:24px;
  border-radius:var(--radius-lg);
  background:var(--forest);
  color:#F8F6F0;
}
.shot-priority h2{
  max-width:720px;
  margin:8px 0 9px;
  color:#FCFBF7;
  font-size:27px;
  font-weight:540;
  line-height:1.08;
  letter-spacing:-.04em;
}
.shot-priority>p{
  max-width:760px;
  margin:0;
  color:rgba(248,246,240,.62);
  font-size:10px;
  line-height:1.55;
}
.shot-next-test{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:16px;
  align-items:start;
  margin:20px -24px -24px;
  padding:17px 24px 20px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
}
.shot-next-test span{
  color:#C5AA83;
  font-size:8px;
  font-weight:650;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.shot-next-test strong{
  color:#F8F6F0;
  font-size:11px;
  font-weight:550;
  line-height:1.5;
}
.shot-details{
  margin-top:22px;
  border-top:1px solid var(--line-strong);
}
.shot-disclosure{
  margin:0;
  padding:0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.shot-disclosure summary{
  position:relative;
  min-height:66px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(160px,.65fr) 24px;
  gap:16px;
  align-items:center;
  padding:12px 4px;
  color:var(--forest);
  list-style:none;
}
.shot-disclosure summary::-webkit-details-marker{display:none}
.shot-disclosure summary:after{
  content:"+";
  grid-column:3;
  grid-row:1;
  color:var(--muted);
  font-size:20px;
  font-weight:400;
  text-align:center;
  transition:transform var(--ui) var(--ease);
}
.shot-disclosure[open] summary:after{transform:rotate(45deg)}
.shot-disclosure summary>span{
  font-size:12px;
  font-weight:600;
}
.shot-disclosure summary>small{
  color:var(--muted);
  font-size:9px;
  font-weight:450;
  text-align:right;
}
.shot-disclosure-body{
  padding:2px 4px 20px;
  color:var(--muted);
  font-size:10px;
}
.shot-disclosure-body>h3,
.shot-data-group h3,
.shot-why-grid h3{
  margin:15px 0 8px;
  color:var(--forest);
  font-size:11px;
  font-weight:600;
}
.shot-disclosure-body p{margin:9px 0;line-height:1.55}
.shot-disclosure-body ul{
  display:grid;
  gap:7px;
  margin:0;
  padding-left:17px;
}
.shot-disclosure-body li{line-height:1.5}
.shot-why-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.shot-data-group{
  padding:4px 0 14px;
  border-top:1px solid var(--line);
}
.shot-data-group:first-child{border-top:0}
.shot-data-row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(105px,.45fr) minmax(150px,.7fr);
  gap:14px;
  align-items:center;
  padding:11px 0;
  border-top:1px solid var(--line);
}
.shot-data-row:first-of-type{border-top:0}
.shot-data-row>div:first-child span,
.shot-data-row>div:first-child small,
.shot-data-row>div:last-child small{
  display:block;
}
.shot-data-row>div:first-child span{
  color:var(--carbon);
  font-size:10px;
  font-weight:560;
}
.shot-data-row>div:first-child small,
.shot-data-row>div:last-child small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}
.shot-data-row>strong{
  color:var(--forest);
  font-size:14px;
  font-weight:580;
  text-align:right;
}
.shot-data-row>div:last-child{text-align:right}
.shot-data-state{
  display:inline-flex;
  align-items:center;
  min-height:21px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(81,100,122,.07);
  color:var(--benchmark);
  font-size:7px;
  font-weight:650;
}
.shot-data-state.bad{background:rgba(165,84,75,.08);color:var(--negative)}
.shot-data-state.good{background:rgba(47,115,95,.08);color:var(--positive)}
.shot-compare-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:42px;
  border-top:1px solid var(--line);
}
.shot-compare-row span{color:var(--carbon)}
.shot-compare-row strong{color:var(--forest);font-weight:600}

/* Shot Analysis removes duplicated global benchmark chrome. */
.context-bar.shot-context{min-height:54px}
.context-bar.shot-context .context-tools{display:none}

/* ---------- Settings ---------- */
.settings-sheet{
  margin-top:22px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
}
.settings-group{padding:0 20px}
.setting-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:19px 0;
  border-top:1px solid var(--line);
}
.setting-row:first-child{border-top:0}
.setting-copy strong{display:block;color:var(--forest);font-size:12px;font-weight:600}
.setting-copy span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.setting-actions{
  display:flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-subtle);
}
.setting-actions button{
  min-height:36px;
  padding:7px 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:560;
  cursor:pointer;
}
.setting-actions button.active{background:var(--forest);color:#fff}
.settings-preview-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  background:var(--surface-green);
}
.settings-preview-strip>div{
  min-width:0;
  padding:16px 20px;
  border-right:1px solid var(--line);
}
.settings-preview-strip>div:last-child{border-right:0}
.settings-preview-strip span{display:block;color:var(--muted);font-size:8px}
.settings-preview-strip strong{
  display:block;
  margin-top:4px;
  color:var(--forest);
  font-size:17px;
  font-weight:540;
}

/* ---------- Legacy-safe helpers used by diagnostics ---------- */
.list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.list li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:11px}
.missbar{display:flex;height:7px;margin:15px 0 7px;border-radius:999px;overflow:hidden;background:rgba(18,61,54,.08)}
.left{background:#B97770}.fair{background:var(--positive)}.right{background:#6D7E92}
.legend{display:flex;justify-content:space-between;color:var(--muted);font-size:8px}
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.delta{margin-top:5px;font-size:9px;font-weight:600}
.delta.good{color:var(--positive)}.delta.bad{color:var(--negative)}.delta.neutral{color:var(--muted)}
.positive{color:var(--positive)}.negative{color:var(--negative)}

/* ---------- Tablet ---------- */
@media(max-width:1040px){
  .app-frame{grid-template-columns:196px minmax(0,1fr)}
  .workspace-body{padding-left:26px;padding-right:26px}
  .round-story{grid-template-columns:1fr}
  .round-story-next{border-left:0;border-top:1px solid var(--line)}
  .trend-stage{grid-template-columns:1fr}
  .trend-insight{min-height:190px}
  .practice-focus{grid-template-columns:1fr}
  .practice-session{border-left:0;border-top:1px solid rgba(255,255,255,.08)}
}

/* ---------- iPhone / mobile ---------- */
@media(max-width:820px){
  .app-frame{display:block}
  .workspace{width:100%;max-width:100%}
  .side-nav{
    position:fixed;
    z-index:50;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(70px + env(safe-area-inset-bottom));
    display:block;
    padding:5px 8px max(6px,env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.10);
    border-right:0;
    background:rgba(11,39,36,.97);
  }
  @supports(backdrop-filter:blur(18px)){
    .side-nav{
      background:rgba(11,39,36,.93);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
  }
  .brand-lockup,.side-foot{display:none}
  .side-nav nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0;
  }
  .side-nav nav button{
    min-width:0;
    min-height:58px;
    display:grid;
    grid-template-rows:24px 16px;
    justify-items:center;
    align-content:center;
    gap:2px;
    padding:4px 1px;
    border-radius:0;
    color:rgba(248,246,240,.58);
    font-size:9px;
    text-align:center;
  }
  .side-nav nav button:hover{background:transparent}
  .side-nav nav button.active{color:#fff}
  .side-nav nav button.active:before{
    left:50%;
    right:auto;
    top:1px;
    bottom:auto;
    width:18px;
    height:2px;
    transform:translateX(-50%);
  }
  .nav-icon{width:22px;height:22px}
  .nav-icon .icon{width:18px;height:18px}

  .context-bar{
    display:grid;
    grid-template-columns:minmax(116px,.7fr) minmax(0,1.3fr);
    grid-template-areas:
      "brand round"
      "benchmark benchmark";
    align-items:center;
    gap:8px 10px;
    min-height:0;
    padding:max(10px,env(safe-area-inset-top)) 14px 10px;
  }
  .mobile-brand{
    position:relative;
    grid-area:brand;
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding-left:10px;
  }
  .mobile-brand:before{
    content:"";
    position:absolute;
    left:0;
    width:2px;
    height:22px;
    border-radius:2px;
    background:var(--bronze);
  }
  .mobile-brand span{
    color:rgba(249,247,242,.47);
    font-size:7px;
    font-weight:600;
    letter-spacing:.10em;
    text-transform:uppercase;
  }
  .mobile-brand strong{
    overflow:hidden;
    color:#F9F7F2;
    font-size:15px;
    font-weight:560;
    letter-spacing:-.02em;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .context-tools{display:contents}
  .context-select{
    grid-area:round;
    justify-self:end;
    width:min(100%,245px);
    max-width:245px;
    min-height:44px;
    padding:3px 8px;
  }
  .context-select>span{display:none}
  .context-select select{
    width:100%;
    min-width:0;
    max-width:100%;
    min-height:38px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .benchmark-context{
    grid-area:benchmark;
    width:100%;
    max-width:100%;
    min-height:44px;
    display:block;
    padding:3px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .benchmark-context::-webkit-scrollbar{display:none}
  .benchmark-context>span{display:none}
  .benchmark-context .benchmark-control{
    width:max-content;
    min-width:max-content;
    max-width:none;
  }
  .benchmark-control button{min-height:44px}

  .workspace-body{
    width:100%;
    max-width:100%;
    padding:26px 14px calc(96px + env(safe-area-inset-bottom));
  }
  .page-heading{
    align-items:flex-start;
    gap:16px;
    padding-bottom:18px;
  }
  .premium-page-heading>div:first-child{display:none}
  .premium-page-heading{
    min-height:0;
    justify-content:flex-start;
    border-bottom:0;
    padding:0;
  }
  .premium-page-heading .segmented,
  .premium-page-heading .control{
    width:auto;
  }
  .premium-page-heading:has(>div:only-child){display:none}
  .section{margin-top:30px}
  .section-head{align-items:flex-start}
  .section-head p{max-width:46%;font-size:9px}

  .round-masthead{
    grid-template-columns:minmax(0,1fr) 92px;
    gap:14px;
    padding:1px 0 20px;
  }
  .round-masthead h1{font-size:29px}
  .round-masthead p{font-size:10px}
  .round-score{min-width:0;padding-left:13px}
  .round-score>strong{font-size:52px}
  .round-score>div{font-size:11px}
  .round-score>small{display:none}
  .snapshot-grid{gap:10px}
  .overview-score-card{min-height:190px;padding:16px}
  .overview-metric-card{min-height:190px;padding:14px}
  .score-history-layout{grid-template-columns:minmax(0,1fr) 112px;gap:12px;height:137px}
  .score-history{height:116px;gap:6px}
  .score-average{padding-left:12px}
  .score-average strong{font-size:36px}
  .donut-visual{width:min(100%,145px)}
  .donut-center strong{font-size:29px}
  .fairway-fan svg{max-height:126px}
  .distance-value{margin-top:22px}
  .distance-value strong{font-size:32px}
  .distance-scale{margin-top:28px}
  .sg-total{margin-top:15px}
  .sg-total strong{font-size:31px}
  .sg-mini-bars{gap:7px;margin-top:14px}
  .sg-mini-bars>div{grid-template-columns:54px minmax(0,1fr) 26px;gap:5px}
  .round-story{grid-template-columns:1fr}
  .round-story-main{grid-template-columns:34px minmax(0,1fr);gap:11px;padding:21px 2px}
  .round-story h2{font-size:21px}
  .round-story-next{padding:18px 14px}
  .benchmark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band-card{border-bottom:1px solid var(--line)}
  .band-card:nth-child(2n){border-right:0}
  .band-card:nth-last-child(-n+2){border-bottom:0}
  .diagnostic-grid,.split-support{grid-template-columns:1fr}
  .barrow{grid-template-columns:82px minmax(0,1fr) 44px}

  .trend-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trend-summary-item{border-bottom:1px solid var(--line)}
  .trend-summary-item:nth-child(2n){border-right:0}
  .trend-summary-item:nth-last-child(-n+2){border-bottom:0}
  .trend-chart-panel{padding:15px}
  .trend-chart-header{display:block}
  .trend-chart-header>div:first-child{margin-bottom:11px}
  .metric-buttons{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    width:100%;
    overflow:visible;
  }
  .metric-buttons button{
    width:100%;
    min-width:0;
    min-height:44px;
    white-space:normal;
    line-height:1.15;
  }
  .metric-buttons button:last-child{grid-column:1/-1}
  .trend-insight{min-height:0;padding:20px}
  .trend-insight strong{font-size:20px}

  .practice-focus-main{padding:22px 18px}
  .practice-focus-main h2{font-size:23px}
  .practice-session{padding:19px}
  .practice-secondary-row{grid-template-columns:1fr}
  .practice-secondary-item:first-child{border-right:0;border-bottom:1px solid var(--line)}

  .shot-page-controls{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .shot-page-controls .segmented{grid-column:1/-1}
  .shot-page-controls .control{min-width:0;width:100%}
  .shot-analysis-feature{grid-template-columns:1fr}
  .shot-feature-copy{min-height:218px;padding:22px}
  .shot-feature-copy:before{left:22px}
  .shot-feature-data{padding:9px}
  .shot-key-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:9px;
  }
  .metric-row-benchmark{
    grid-column:1/-1;
    justify-content:flex-start;
  }
  .metric-row>strong{text-align:right}
  .diagnosis-flow{grid-template-columns:1fr}
  .diagnosis-step{border-right:0;border-bottom:1px solid var(--line)}
  .diagnosis-step:last-child{border-bottom:0}
  .shot-bench-row{grid-template-columns:minmax(0,1fr) auto auto}
  .shot-bench-row small{grid-column:1/-1}

  .setting-row{align-items:flex-start;flex-direction:column;gap:12px}
  .setting-actions{width:100%}
  .setting-actions button{flex:1;min-height:44px}
  .settings-preview-strip{grid-template-columns:1fr}
  .settings-preview-strip>div{border-right:0;border-bottom:1px solid var(--line)}
  .settings-preview-strip>div:last-child{border-bottom:0}
}

/* ---------- Small iPhone ---------- */
@media(max-width:560px){
  body{font-size:14px}
  .workspace-body{padding-left:12px;padding-right:12px}
  .section{margin-top:26px}
  .section-head h2{font-size:19px}
  .section-head p{display:none}
  .context-bar{padding-left:12px;padding-right:12px}
  .context-select{max-width:220px}
  .benchmark-control button{padding-left:10px;padding-right:10px}
  .round-masthead{grid-template-columns:minmax(0,1fr) 82px;gap:10px}
  .round-masthead h1{font-size:25px}
  .round-score{padding-left:10px}
  .round-score>strong{font-size:47px}
  .snapshot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .overview-score-card{min-height:176px;padding:14px}
  .overview-metric-card{min-height:176px;padding:12px}
  .snapshot-title{min-height:30px}
  .snapshot-title>span{font-size:10px}
  .snapshot-title>small{font-size:7px}
  .score-history-layout{grid-template-columns:minmax(0,1fr) 92px;gap:10px;height:120px;margin-top:6px}
  .score-history{height:104px;gap:5px}
  .score-history-bar{max-width:22px}
  .score-average{padding-left:10px}
  .score-average strong{font-size:31px}
  .donut-visual{width:132px;max-width:100%}
  .donut-center strong{font-size:26px}
  .fairway-fan svg{max-height:112px}
  .distance-value{margin-top:17px}
  .distance-value strong{font-size:28px}
  .distance-value span{font-size:7px}
  .distance-scale{height:44px;margin:26px 3px 0}
  .sg-total strong{font-size:27px}
  .sg-mini-bars>div{grid-template-columns:46px minmax(0,1fr) 23px}
  .sg-mini-bars span,.sg-mini-bars strong{font-size:7px}
  .benchmark-grid .marker-label{display:none}
  .benchmark-grid .marker.selected .marker-label{display:block}
  .band-card{padding:12px 10px 10px}
  .band-title{font-size:10px}
  .band-value{font-size:8px}
  .barrow{grid-template-columns:70px minmax(0,1fr) 38px;gap:7px}
  .barlabel,.barval{font-size:9px}
  .trend-summary-item{padding:13px}
  .trend-summary-item strong{font-size:21px}
  .practice-focus-main{grid-template-columns:30px minmax(0,1fr);gap:10px}
  .practice-focus-main h2{font-size:21px}
  .shot-feature-copy h2{font-size:34px}
  .shot-key{min-height:76px;padding:11px}
  .shot-key strong{font-size:17px}
  .metric-table{padding:0 14px}
}


/* ---------- Shot Analysis mobile hierarchy ---------- */
@media(max-width:820px){
  .context-bar.shot-context{
    grid-template-columns:1fr;
    grid-template-areas:"brand";
    gap:0;
    min-height:52px;
    padding:max(10px,env(safe-area-inset-top)) 12px 9px;
  }
  .context-bar.shot-context .mobile-brand{grid-area:brand}
  .shot-toolbar{gap:7px;margin:-2px 0 14px}
  .shot-primary-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .shot-secondary-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-width:none}
  .shot-toolbar .control{min-height:46px;padding:6px 9px}
  .shot-toolbar .control-label{font-size:7px}
  .shot-toolbar select{font-size:11px}
  .shot-toolbar .segmented{min-height:46px}
  .shot-toolbar .segmented button{min-height:40px;padding:7px 9px}
  .shot-meta{font-size:8px;padding:0 2px}
  .shot-verdict{padding:18px 16px 0;border-radius:14px}
  .shot-verdict h1{font-size:21px}
  .shot-verdict-main{padding:22px 0 18px}
  .shot-verdict-main>strong{font-size:49px}
  .shot-verdict-main>span{font-size:9px}
  .shot-verdict-main h2{margin-top:18px;font-size:21px}
  .shot-verdict-main p{font-size:10px}
  .shot-verdict-strip{margin:0 -16px}
  .shot-verdict-strip>div{padding:12px 10px}
  .shot-verdict-strip span{font-size:7px}
  .shot-verdict-strip strong{font-size:11px}
  .shot-verdict-next{margin:0 -16px;padding:12px 10px}
  .shot-verdict-next span{font-size:7px}
  .shot-verdict-next strong{font-size:9px}
  .shot-visual-card{margin-top:14px;border-radius:14px}
  .shot-card-head{padding:16px 16px 12px}
  .shot-card-head h2{font-size:18px}
  .shot-pattern-stage{min-height:260px;padding:4px 8px 0}
  .shot-pattern-stage svg{max-height:260px}
  .shot-stat-strip>div{padding:11px 10px}
  .shot-stat-strip span{font-size:7px}
  .shot-stat-strip strong{font-size:12px}
  .shot-stat-strip small{font-size:7px}
  .shot-card-note{padding:10px 16px 14px;font-size:8px}
  .shot-visual-pair{grid-template-columns:1fr;gap:0}
  .shot-flight-stage,.shot-delivery-stage{min-height:190px;padding:5px 9px 0}
  .shot-flight-stage svg,.shot-delivery-stage svg{max-height:190px}
  .shot-stat-strip.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot-stat-strip.four>div:nth-child(2n){border-right:0}
  .shot-stat-strip.four>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .shot-priority{margin-top:14px;padding:19px 16px;border-radius:14px}
  .shot-priority h2{font-size:23px}
  .shot-priority>p{font-size:9px}
  .shot-next-test{grid-template-columns:86px minmax(0,1fr);gap:11px;margin:17px -16px -19px;padding:14px 16px 17px}
  .shot-next-test strong{font-size:10px}
  .shot-details{margin-top:18px}
  .shot-disclosure summary{grid-template-columns:minmax(0,1fr) 24px;gap:10px;min-height:60px;padding:10px 2px}
  .shot-disclosure summary>small{display:none}
  .shot-disclosure summary:after{grid-column:2}
  .shot-disclosure-body{padding:0 2px 18px}
  .shot-why-grid{grid-template-columns:1fr;gap:6px}
  .shot-data-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .shot-data-row>div:last-child{grid-column:1/-1;text-align:left}
  .shot-data-row>strong{text-align:right}
}
@media(max-width:560px){
  .shot-primary-controls,.shot-secondary-controls{gap:6px}
  .shot-toolbar .control{padding:5px 8px}
  .shot-verdict-top{gap:10px}
  .shot-status-chip{padding:3px 7px;font-size:7px}
  .shot-verdict-main>strong{font-size:44px}
  .shot-verdict-main h2{font-size:20px}
  .shot-verdict-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shot-verdict-strip>div:nth-child(2n){border-right:0}
  .shot-verdict-strip>div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.10)}
  .shot-pattern-stage{min-height:236px}
  .shot-pattern-stage svg{max-height:236px}
  .shot-stat-strip.three>div{padding-left:7px;padding-right:7px}
  .shot-stat-strip.three strong{font-size:10px}
  .shot-flight-stage,.shot-delivery-stage{min-height:176px}
  .shot-flight-stage svg,.shot-delivery-stage svg{max-height:176px}
  .shot-priority h2{font-size:21px}
  .shot-next-test{grid-template-columns:1fr;gap:6px}
  .shot-disclosure summary>span{font-size:11px}
}
/* ---------- Motion ---------- */
@media(prefers-reduced-motion:no-preference){
  .overview-score-card,.overview-metric-card,.support-panel,.profile-panel,.trend-chart-panel,.practice-focus,.shot-analysis-feature,.settings-sheet{
    transition:border-color var(--ui) var(--ease),background var(--ui) var(--ease);
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* Complete coverage for less-common diagnostic states */
.critical-metric,.distance-card,.sg-card{min-width:0}
.shot-metric-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.critical-value{margin-top:6px;color:var(--forest);font-size:30px;font-weight:540;letter-spacing:-.045em}
.metric-benchmark{margin-top:5px;color:var(--muted);font-size:9px}
.grade-legend{display:flex;flex-wrap:wrap;gap:6px}
.legend-chip{display:inline-flex;align-items:center;min-height:22px;padding:3px 6px;border-radius:999px;background:var(--surface-subtle);color:var(--muted);font-size:8px}
.chip.unknown{color:var(--muted);background:var(--surface-subtle)}
.round-masthead-copy{min-width:0}

@media(max-width:820px){
  .segmented button,
  .metric-buttons button,
  .setting-actions button,
  .benchmark-control button,
  .context-select select,
  .control select,
  .period-select select,
  summary{min-height:44px}
  .period-select{max-width:100%}
}


/* =========================================================
   PREMIUM BENCHMARK STATES
   Restrained signal hierarchy: state → delta → detail
   ========================================================= */
.neutraltext{color:var(--benchmark)!important}

.benchmark-signal{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:22px;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:8px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
.benchmark-signal i{
  width:5px;
  height:5px;
  flex:none;
  border-radius:50%;
  background:currentColor;
}
.benchmark-signal.good{
  color:var(--positive);
  border-color:rgba(47,115,95,.20);
  background:rgba(47,115,95,.055);
}
.benchmark-signal.bad{
  color:var(--negative);
  border-color:rgba(165,84,75,.20);
  background:rgba(165,84,75,.055);
}
.benchmark-signal.neutral{
  color:var(--benchmark);
  border-color:rgba(81,100,122,.17);
  background:rgba(81,100,122,.045);
}
.benchmark-signal.unknown{color:var(--muted-soft)}

.benchmark-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border:1px solid rgba(81,100,122,.18);
  border-radius:999px;
  background:rgba(81,100,122,.045);
  color:var(--benchmark);
  font-size:8px;
  font-weight:600;
  white-space:nowrap;
}

/* State is visible without turning the interface into a red/green dashboard. */
.overview-metric-card.metric-state,
.band-card.metric-state,
.trend-summary-item.metric-state,
.card.metric-state,
.profile-grid>div.metric-state{
  position:relative;
}
.overview-metric-card.metric-state.good,
.band-card.metric-state.good,
.trend-summary-item.metric-state.good,
.card.metric-state.good{
  border-color:rgba(47,115,95,.22);
}
.overview-metric-card.metric-state.bad,
.band-card.metric-state.bad,
.trend-summary-item.metric-state.bad,
.card.metric-state.bad{
  border-color:rgba(165,84,75,.22);
}
.overview-metric-card.metric-state.good:before,
.overview-metric-card.metric-state.bad:before,
.trend-summary-item.metric-state.good:before,
.trend-summary-item.metric-state.bad:before,
.card.metric-state.good:before,
.card.metric-state.bad:before{
  content:"";
  position:absolute;
  left:14px;
  top:-1px;
  width:30px;
  height:2px;
  border-radius:2px;
}
.overview-metric-card.metric-state.good:before,
.trend-summary-item.metric-state.good:before,
.card.metric-state.good:before{background:var(--positive)}
.overview-metric-card.metric-state.bad:before,
.trend-summary-item.metric-state.bad:before,
.card.metric-state.bad:before{background:var(--negative)}

.round-score.metric-state.good>small{color:var(--positive)}
.round-score.metric-state.bad>small{color:var(--negative)}
.round-score.metric-state.neutral>small{color:var(--benchmark)}

.profile-grid>div.metric-state.good{background:rgba(47,115,95,.045)}
.profile-grid>div.metric-state.bad{background:rgba(165,84,75,.045)}
.profile-grid>div.metric-state.neutral{background:rgba(81,100,122,.025)}
.profile-grid>div small{
  display:block;
  margin-top:5px;
  font-size:8px;
  font-weight:600;
}

/* Data visualisations use the same quiet semantic palette. */
.barfill.good{background:var(--positive)}
.barfill.bad{background:var(--negative)}
.barfill.neutral{background:var(--benchmark);opacity:.58}
.sg-mini-bars b.good{background:var(--positive)}
.sg-mini-bars b.bad{background:var(--negative)}
.sg-mini-bars b.neutral{background:var(--benchmark);opacity:.60}
.donut-visual.good .donut-value{stroke:var(--positive)}
.donut-visual.bad .donut-value{stroke:var(--negative)}
.donut-visual.neutral .donut-value{stroke:var(--benchmark)}

.trend-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.trend-summary-item em{
  display:block;
  margin-top:4px;
  color:var(--muted-soft);
  font-size:7px;
  font-style:normal;
}
.trend-insight.metric-state.good{background:#123D36}
.trend-insight.metric-state.bad{background:#3F2725}
.trend-insight.metric-state.neutral{background:#273B42}
.trend-insight.metric-state .section-label{color:#C6AA82}

/* The benchmark line remains bronze; zero means the selected target for SG. */
.chartwrap .benchmark-zero{stroke:var(--bronze)}

@media(max-width:560px){
  .benchmark-signal{
    min-height:20px;
    padding:3px 6px;
    font-size:7px;
  }
  .benchmark-signal i{width:4px;height:4px}
  .snapshot-title{gap:6px}
  .snapshot-title .benchmark-signal{max-width:54%;overflow:hidden}
  .snapshot-title .benchmark-signal span{
    overflow:hidden;
    text-overflow:ellipsis;
  }
}