/* ==========================================================================
   Golf Intelligence — Approved Design System
   Canonical reference: approved Shot Analysis mobile render.
   Loaded after styles.css so analytics/data behaviour remains unchanged.
   ========================================================================== */

:root{
  color-scheme:light;
  --brand-green:#123D36;
  --brand-green-deep:#0B2724;
  --bg-canvas:#FAF9F5;
  --bg-surface:#FAF9F5;
  --bg-warm:#F3F0E9;
  --text-primary:#161918;
  --text-secondary:#687083;
  --text-tertiary:#858B98;
  --border-subtle:#E7E3DC;
  --border-strong:#D8D3CA;
  --state-negative:#D84B45;
  --viz-rough:#F5A62A;
  --viz-bunker:#E86A3C;
  --viz-penalty:#E5424F;
  --mineral-mint:#79B7A2;
  --muted-bronze:#9A8465;

  --canvas:var(--bg-canvas);
  --surface:var(--bg-surface);
  --surface-subtle:#F8F6F1;
  --surface-green:#EEF4F0;
  --surface-green-strong:#E4EEE8;
  --forest:var(--brand-green);
  --forest-deep:var(--brand-green-deep);
  --carbon:#161918;
  --mint:var(--mineral-mint);
  --bronze:var(--muted-bronze);
  --bronze-ink:#776B59;
  --muted:var(--text-secondary);
  --muted-soft:var(--text-tertiary);
  --line:var(--border-subtle);
  --line-strong:var(--border-strong);
  --positive:var(--brand-green);
  --negative:var(--state-negative);
  --benchmark:#596477;
  --warning:#98692E;

  --font-editorial:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  --radius-control:24px;
  --radius-viz:18px;
  --radius-cta:28px;
  --content-max:1240px;
  --content-pad-mobile:24px;
  --motion-fast:180ms;
  --motion-normal:220ms;
  --ease-ui:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body,#app{width:100%;max-width:100%;min-width:0;overflow-x:clip}
html{background:var(--bg-canvas)}
body{
  margin:0;
  background:var(--bg-canvas);
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.48;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
button,select,input{font-family:var(--font-ui)}
button{touch-action:manipulation}
button,select,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand-green);
  outline-offset:3px;
}
svg{display:block}
h1,h2,h3,p{overflow-wrap:anywhere}
.goodtext{color:var(--brand-green)!important}
.badtext{color:var(--state-negative)!important}
.neutraltext,.muted{color:var(--text-secondary)!important}

/* ==========================================================================
   Product shell
   ========================================================================== */
.app-frame{
  min-height:100vh;
  display:grid;
  grid-template-columns:214px minmax(0,1fr);
  background:var(--bg-canvas);
}
.side-nav{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:28px 14px 20px;
  border-right:1px solid var(--border-subtle);
  background:var(--bg-surface);
  color:var(--text-primary);
}
.brand-lockup{
  position:relative;
  padding:4px 10px 32px 18px;
}
.brand-lockup:before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:2px;
  height:34px;
  border-radius:2px;
  background:var(--brand-green);
}
.brand-wordmark strong{
  display:block;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:20px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
}
.brand-wordmark span{
  display:block;
  margin-top:6px;
  color:var(--text-secondary);
  font-size:9px;
  font-weight:650;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.side-nav nav{
  display:grid;
  gap:2px;
}
.side-nav nav button{
  position:relative;
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#747C89;
  text-align:left;
  font-size:12px;
  font-weight:520;
  cursor:pointer;
  transition:color var(--motion-fast) var(--ease-ui),background var(--motion-fast) var(--ease-ui),transform 100ms var(--ease-ui);
}
.side-nav nav button:hover{background:#F3F6F3;color:var(--brand-green)}
.side-nav nav button:active{transform:scale(.985)}
.side-nav nav button.active{
  background:transparent;
  color:var(--brand-green);
  font-weight:650;
}
.side-nav nav button.active:before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:2px;
  border-radius:999px;
  background:var(--brand-green);
}
.nav-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  color:#808895;
}
.side-nav nav button.active .nav-icon{color:var(--brand-green)}
.icon{width:19px;height:19px}
.side-foot{
  margin-top:auto;
  padding:16px 10px 2px;
  border-top:1px solid var(--border-subtle);
}
.side-foot span,.side-foot small{
  display:block;
  color:var(--text-secondary);
  font-size:9px;
  line-height:1.4;
}
.side-foot span{
  font-size:8px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.side-foot strong{
  display:block;
  margin:5px 0 3px;
  color:var(--brand-green);
  font-size:12px;
  font-weight:650;
}
.workspace{
  min-width:0;
  max-width:100%;
  background:var(--bg-canvas);
}
.context-bar{
  position:sticky;
  z-index:30;
  top:0;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:12px clamp(22px,3vw,40px);
  border-bottom:1px solid var(--border-subtle);
  background:rgba(250,249,245,.96);
}
@supports(backdrop-filter:blur(18px)){
  .context-bar{
    background:rgba(250,249,245,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
}
.context-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.context-select,.benchmark-context{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 6px 4px 12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);
  background:var(--bg-surface);
}
.context-select{border-color:var(--brand-green)}
.context-select>span,.benchmark-context>span{
  color:var(--text-secondary);
  font-size:8px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.context-select select{
  max-width:350px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-primary);
  font-size:11px;
  font-weight:600;
}
.benchmark-control{
  display:flex;
  gap:2px;
  padding:2px;
}
.benchmark-control button{
  min-height:36px;
  padding:7px 11px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
  font-size:10px;
  font-weight:600;
  white-space:nowrap;
}
.benchmark-control button.active{
  background:var(--brand-green);
  color:#fff;
}
.workspace-body{
  width:min(100%,var(--content-max));
  margin:0 auto;
  padding:44px clamp(26px,4vw,50px) 88px;
}
.view{display:none;min-width:0}
.view.active{display:block}

/* ==========================================================================
   Shared typography + components
   ========================================================================== */
.eyebrow,.section-label,.feature-kicker,.approved-micro,.approved-section-title{
  display:block;
  color:var(--text-secondary);
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.page-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  padding:0 0 24px;
  border-bottom:1px solid var(--border-subtle);
}
.page-heading h1,
.round-masthead h1,
.approved-shot-header h1{
  margin:6px 0 5px;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-weight:400;
  line-height:1;
  letter-spacing:-.035em;
}
.page-heading h1{font-size:clamp(42px,4.5vw,54px)}
.page-heading p,.round-masthead p{
  margin:0;
  color:var(--text-secondary);
  font-size:13px;
}
.section{
  margin-top:42px;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:15px;
}
.section-head h2{
  margin:4px 0 0;
  color:var(--text-primary);
  font-size:21px;
  font-weight:650;
  letter-spacing:-.02em;
}
.section-head p{
  max-width:520px;
  margin:0;
  color:var(--text-secondary);
  font-size:11px;
  text-align:right;
}
.card,.support-panel,.profile-panel,
.overview-score-card,.overview-metric-card,.trend-chart-panel{
  border:1px solid var(--border-subtle);
  border-radius:14px;
  background:var(--bg-surface);
  box-shadow:none;
}
.control{
  min-width:0;
  min-height:44px;
  padding:6px 13px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);
  background:var(--bg-surface);
}
.period-select{border-color:var(--brand-green)}
.control-label,.kpi-label{
  color:var(--text-tertiary);
  font-size:9px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.control select,.period-select select{
  width:100%;
  min-height:28px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-primary);
  font-weight:600;
}
.segmented{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);
  background:#F7F5F0;
}
.segmented button{
  min-height:38px;
  padding:7px 13px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
  font-size:11px;
  font-weight:600;
}
.segmented button.active{background:var(--brand-green);color:#fff}
details{
  border-color:var(--border-subtle);
  background:transparent;
}
summary{color:var(--text-primary)}
.tour-badge,.chip,.benchmark-badge{
  border-color:var(--border-subtle);
  background:transparent;
  color:var(--benchmark);
}

/* ==========================================================================
   Approved Shot Analysis — exact visual direction
   ========================================================================== */
.approved-shot-page{
  width:min(100%,980px);
  margin:0 auto;
}
.approved-shot-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:2px 0 22px;
  border-bottom:1px solid var(--border-subtle);
}
.approved-shot-header h1{
  margin:0;
  font-size:48px;
}
.approved-range-control{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 14px;
  border:1px solid var(--brand-green);
  border-radius:24px;
  background:var(--bg-surface);
  color:var(--brand-green);
}
.approved-range-control select{
  min-width:118px;
  border:0;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:var(--text-primary);
  font-size:12px;
  font-weight:600;
}
.approved-calendar-icon{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:var(--brand-green);
  font-size:13px;
  line-height:1;
}
.approved-chevron{
  color:var(--brand-green);
  font-size:14px;
}
.approved-key-insight{
  max-width:830px;
  padding:24px 0 26px;
  border-bottom:1px solid var(--border-subtle);
}
.approved-key-insight h2{
  max-width:760px;
  margin:7px 0 9px;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:40px;
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.026em;
}
.approved-key-insight p{
  max-width:790px;
  margin:0;
  color:var(--text-secondary);
  font-size:17px;
  line-height:1.42;
}
.approved-analysis-section{
  padding:24px 0 26px;
  border-bottom:1px solid var(--border-subtle);
}
.approved-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:15px;
}
.approved-section-head p{
  margin:5px 0 0;
  color:var(--text-secondary);
  font-size:12px;
}
.approved-section-title{
  color:var(--text-primary);
  font-size:13px;
}
.approved-filter-label{
  flex:0 0 auto;
  color:var(--text-primary);
  font-size:12px;
  font-weight:600;
}
.approved-analysis-grid{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.approved-kpi-stack{
  min-width:0;
  display:grid;
}
.approved-kpi{
  padding:6px 0 19px;
  border-bottom:1px solid var(--border-subtle);
}
.approved-kpi+.approved-kpi{padding-top:19px}
.approved-kpi:last-child{border-bottom:0}
.approved-kpi>strong{
  display:block;
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:52px;
  font-weight:700;
  line-height:.94;
  letter-spacing:-.045em;
}
.approved-kpi>span{
  display:block;
  margin-top:7px;
  color:var(--text-primary);
  font-size:16px;
  font-weight:550;
  line-height:1.2;
}
.approved-kpi>small{
  display:block;
  margin-top:5px;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:520;
  line-height:1.3;
}
.approved-kpi-text>span{
  margin-top:0;
  color:var(--text-secondary);
  font-size:13px;
}
.approved-kpi-text>strong{
  margin-top:4px;
  font-family:var(--font-editorial);
  font-size:38px;
  font-weight:400;
  letter-spacing:-.02em;
}
.approved-viz-column{min-width:0}
.approved-map-with-key{
  min-width:0;
  width:100%;
}
.approved-map-with-key>.approved-viz{
  width:100%;
}
.approved-compact-map-key{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:6px;
  color:var(--text-secondary);
  font-size:10px;
  line-height:1.2;
}
.approved-viz{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius-viz);
  background:#DCE6DD;
}
.approved-driving-viz{aspect-ratio:958/915;height:auto}
.approved-approach-viz{aspect-ratio:1312/1199;height:auto}
.approved-viz>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.78) contrast(.90) brightness(.93);
}
.approved-driving-viz>img{
  object-position:center center;
  transform:none;
}
.approved-approach-viz>img{
  object-position:center 48%;
}
.approved-viz>svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.approved-target-line{
  stroke:rgba(255,255,255,.82);
  stroke-width:1.6;
  stroke-dasharray:8 9;
}
.approved-dispersion{
  fill:rgba(255,255,255,.08);
  stroke:rgba(255,255,255,.72);
  stroke-width:1.6;
  stroke-dasharray:7 7;
}
.approved-marker,
.approved-approach-dot,
.approved-outlier-x,
.approved-offscreen-dot{
  vector-effect:none;
  shape-rendering:geometricPrecision;
}
.approved-marker.fairway{
  fill:#fff;
  stroke:rgba(11,13,16,.74);
  stroke-width:1.2;
}
.approved-marker.miss{
  fill:var(--viz-rough);
  stroke:rgba(11,13,16,.28);
  stroke-width:1;
}
.approved-marker.penalty{
  fill:none;
  stroke:var(--viz-penalty);
  stroke-width:3;
  stroke-linecap:round;
}
.approved-outlier-x{
  fill:none;
  stroke:var(--viz-penalty);
  stroke-width:3;
  stroke-linecap:round;
}
.approved-offscreen-dot{
  fill:var(--viz-penalty);
  stroke:rgba(255,255,255,.94);
  stroke-width:1.25;
}
.approved-pin-ring{
  fill:none;
  stroke:rgba(255,255,255,.88);
  stroke-width:1.5;
  stroke-dasharray:6 6;
}
.approved-pin-stick{
  stroke:#132C28;
  stroke-width:2;
}
.approved-pin-flag{fill:var(--viz-penalty)}
.approved-pin-hole{fill:#132C28}
.approved-approach-dot.inside{
  fill:#fff;
  stroke:rgba(11,13,16,.68);
  stroke-width:1.1;
}
.approved-approach-dot.outside{
  fill:var(--viz-rough);
  stroke:rgba(11,13,16,.22);
  stroke-width:1;
}
.approved-normalised,.approved-ring-label{
  fill:rgba(255,255,255,.88);
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}
.approved-ring-label{
  font-size:11px;
  letter-spacing:0;
}
.approved-legend{
  display:grid;
  margin-top:10px;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.approved-legend-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.approved-legend>div{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:7px;
  align-items:center;
  padding:10px 9px;
  border-right:1px solid var(--border-subtle);
}
.approved-legend>div:last-child{border-right:0}
.approved-legend i{
  grid-row:1/3;
  align-self:center;
}
.approved-legend span{
  color:var(--text-secondary);
  font-size:10px;
  line-height:1.1;
}
.approved-legend strong{
  color:var(--text-primary);
  font-size:13px;
  font-weight:700;
  line-height:1.1;
}
.approved-legend>.approved-offscreen-legend{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border-top:1px solid var(--border-subtle);
  border-right:0;
}
.approved-offscreen-legend span{
  font-size:10px;
  line-height:1.2;
}
.legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
}
.legend-dot.fairway{background:#fff;border:1.2px solid var(--text-primary)}
.legend-dot.left-miss,.legend-dot.right-miss{background:var(--viz-rough)}
.legend-dot.offscreen{
  flex:0 0 auto;
  background:var(--viz-penalty);
  border:1px solid rgba(255,255,255,.94);
}
.legend-x{
  color:var(--viz-penalty);
  font-size:20px;
  font-style:normal;
  font-weight:600;
  line-height:1;
}
.approved-viz-note{
  margin:9px 0 0;
  color:var(--text-tertiary);
  font-size:10px;
  line-height:1.45;
}
.approved-approach-legend{
  grid-template-columns:1fr 1fr;
}
.legend-ring{
  width:16px;
  height:16px;
  border:1px dashed var(--brand-green);
  border-radius:50%;
}
.approved-inline-insight{
  max-width:780px;
  margin:18px 0 0 212px;
  padding-top:2px;
}
.approved-inline-insight p{
  margin:6px 0 0;
  color:var(--text-primary);
  font-size:15px;
  line-height:1.4;
}
.approved-next-priority{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
  padding:25px 0 28px;
  border-bottom:1px solid var(--border-subtle);
}
.approved-next-priority h2{
  margin:6px 0 6px;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:34px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.025em;
}
.approved-next-priority p{
  max-width:690px;
  margin:0;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.45;
}
.approved-primary-cta{
  min-height:48px;
  padding:0 20px;
  border:0;
  border-radius:var(--radius-cta);
  background:var(--brand-green);
  color:#fff;
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
}
.approved-primary-cta span{margin-left:8px}
.approved-detail-disclosure{
  margin-top:0;
  padding:0;
  border:0;
  border-bottom:1px solid var(--border-subtle);
}
.approved-detail-disclosure>summary{
  min-height:70px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:0 2px;
  list-style:none;
}
.approved-detail-disclosure>summary::-webkit-details-marker{display:none}
.approved-detail-disclosure>summary span{
  color:var(--text-primary);
  font-size:13px;
  font-weight:650;
}
.approved-detail-disclosure>summary small{
  color:var(--text-secondary);
  font-size:10px;
}
.approved-detail-body{padding:0 0 26px}
.approved-detail-controls{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.approved-detail-controls .period-select{min-width:0;max-width:none}
.approved-detail-meta{
  color:var(--text-tertiary);
  font-size:10px;
}

/* ==========================================================================
   Home / latest round
   ========================================================================== */
.round-masthead{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:28px;
  padding:3px 0 28px;
  border-bottom:1px solid var(--border-subtle);
}
.round-masthead h1{
  max-width:760px;
  font-size:clamp(42px,4.6vw,58px);
}
.round-score{
  min-width:190px;
  padding-left:28px;
  border-left:1px solid var(--border-subtle);
  text-align:right;
}
.round-score>span{
  display:block;
  color:var(--text-secondary);
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.round-score>strong{
  display:block;
  margin-top:2px;
  color:var(--brand-green);
  font-family:var(--font-ui);
  font-size:68px;
  font-weight:700;
  line-height:.9;
  letter-spacing:-.055em;
}
.round-score>div{margin-top:8px;color:var(--text-primary);font-size:13px;font-weight:650}
.round-score>small{display:block;margin-top:4px;color:var(--text-secondary);font-size:9px}
.snapshot-section{margin-top:28px}
.snapshot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.overview-score-card{
  grid-column:1/-1;
  min-height:210px;
  padding:20px;
  background:transparent;
  border-left:0;
  border-right:0;
  border-radius:0;
}
.overview-metric-card{
  min-height:205px;
  padding:18px;
  background:var(--bg-surface);
}
.overview-metric-card:nth-child(3){background:#F1F5F1}
.snapshot-title>span{color:var(--text-primary);font-weight:650}
.snapshot-title>small{color:var(--text-secondary)}
.score-history-bar.current{background:var(--brand-green)}
.score-average strong,.distance-value strong,.sg-total strong{color:var(--text-primary);font-weight:700}
.donut-value{stroke:var(--brand-green)}
.fairway-labels strong{color:var(--brand-green)}
.distance-marker.you{background:var(--brand-green);box-shadow:0 0 0 1px var(--brand-green)}
.round-story{
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.round-story-main h2{
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:30px;
  font-weight:400;
  line-height:1.06;
}
.round-story-main p,.round-story-next p{color:var(--text-secondary)}
.round-story-next{
  border-left:1px solid var(--border-subtle);
  background:transparent;
}
.round-story-next strong{color:var(--brand-green)}
.priority-row{border-color:var(--border-subtle)}
.priority-row strong{color:var(--text-primary)}
.priority-row p{color:var(--text-secondary)}
.priority-arrow{color:var(--brand-green)}

/* ==========================================================================
   Progress / trends
   ========================================================================== */
.trend-summary-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:22px;
  overflow:hidden;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  border-left:0;
  border-right:0;
  border-radius:0;
  background:transparent;
}
.trend-summary-item{
  padding:16px;
  border-right:1px solid var(--border-subtle);
}
.trend-summary-item:last-child{border-right:0}
.trend-summary-item strong{color:var(--text-primary);font-weight:700}
.trend-stage{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.55fr);
  gap:16px;
}
.trend-chart-panel{
  padding:20px;
  background:var(--bg-surface);
}
.metric-buttons button{
  min-height:38px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
}
.metric-buttons button.active{
  border-color:var(--brand-green);
  background:var(--brand-green);
  color:#fff;
}
.chart-value{fill:var(--brand-green)}
.trend-insight{
  min-height:250px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  border:0;
  border-top:1px solid var(--brand-green);
  border-bottom:1px solid var(--border-subtle);
  border-radius:0;
  background:transparent;
  color:var(--text-primary);
}
.trend-insight:before{display:none}
.trend-insight .section-label{color:var(--text-secondary)}
.trend-insight strong{
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:28px;
  font-weight:400;
  line-height:1.08;
}
.trend-insight p{color:var(--text-secondary)}
.recent-rounds-panel{background:#F1F5F1}
.round-list-row{border-color:var(--border-subtle)}
.round-list-row strong{color:var(--text-primary)}

/* ==========================================================================
   Practice — secondary screen from Analyse
   ========================================================================== */
.practice-focus{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);
  margin-top:26px;
  overflow:hidden;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  border-left:0;
  border-right:0;
  border-radius:0;
  background:transparent;
}
.practice-focus-main{padding:26px 4px}
.practice-focus-main h2{
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:32px;
  font-weight:400;
  line-height:1.06;
}
.practice-focus-main p{color:var(--text-secondary)}
.practice-session{
  padding:26px 22px;
  border-left:1px solid var(--border-subtle);
  background:#F1F5F1;
}
.practice-session .section-label{color:var(--text-secondary)}
.practice-session strong{color:var(--text-primary);font-size:13px}
.practice-secondary-row{
  border-color:var(--border-subtle);
}
.practice-secondary-item:first-child{border-color:var(--border-subtle)}
.practice-secondary-item strong{color:var(--text-primary)}
.practice-secondary-item p{color:var(--text-secondary)}
.profile-panel{background:#F1F5F1}
.profile-grid{border-color:var(--border-subtle)}
.profile-grid>div{border-color:var(--border-subtle)}
.profile-grid strong{color:var(--text-primary)}

/* ==========================================================================
   Rounds
   ========================================================================== */
.approved-list{
  border-top:1px solid var(--border-subtle);
}
.approved-round-row{
  width:100%;
  min-height:76px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px 90px 24px;
  gap:16px;
  align-items:center;
  padding:15px 4px;
  border:0;
  border-bottom:1px solid var(--border-subtle);
  background:transparent;
  color:var(--text-primary);
  text-align:left;
  cursor:pointer;
}
.approved-round-main strong,
.approved-round-main small,
.approved-round-score strong,
.approved-round-score small{
  display:block;
}
.approved-round-main strong{font-size:13px;font-weight:650}
.approved-round-main small{margin-top:3px;color:var(--text-secondary);font-size:10px}
.approved-round-score{text-align:right}
.approved-round-score strong{font-size:20px;font-weight:700}
.approved-round-score small{color:var(--text-secondary);font-size:9px}
.approved-round-sg{text-align:right;font-size:11px;font-weight:650}
.approved-round-arrow{color:var(--brand-green)}
.approved-round-arrow .icon{width:16px;height:16px}

/* ==========================================================================
   More / settings
   ========================================================================== */
.settings-sheet{
  margin-top:26px;
  overflow:hidden;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  border-left:0;
  border-right:0;
  border-radius:0;
  background:transparent;
}
.settings-group{padding:0}
.setting-row{
  min-height:72px;
  padding:16px 4px;
  border-color:var(--border-subtle);
}
.setting-copy strong{color:var(--text-primary);font-size:13px}
.setting-copy span{color:var(--text-secondary)}
.setting-actions{
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-control);
  background:#F7F5F0;
}
.setting-actions button{
  min-height:38px;
  border-radius:999px;
  color:var(--text-secondary);
}
.setting-actions button.active{background:var(--brand-green);color:#fff}
.settings-preview-strip{
  border-color:var(--border-subtle);
  background:#F1F5F1;
}
.settings-preview-strip>div{border-color:var(--border-subtle)}
.settings-preview-strip strong{color:var(--text-primary)}

/* Detailed TrackMan tables inherit the clean system. */
.shot-details,.shot-disclosure,.shot-data-row,.shot-compare-row{border-color:var(--border-subtle)}
.shot-disclosure summary{color:var(--text-primary)}
.shot-data-row>div:first-child span{color:var(--text-primary)}
.shot-data-row>strong,.shot-compare-row strong{color:var(--text-primary)}
.shot-data-state.good{background:#EEF4F0;color:var(--brand-green)}
.shot-data-state.bad{background:#F9EFED;color:var(--state-negative)}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media(max-width:1040px){
  .app-frame{grid-template-columns:190px minmax(0,1fr)}
  .workspace-body{padding-left:28px;padding-right:28px}
  .approved-analysis-grid{grid-template-columns:160px minmax(0,1fr);gap:18px}
  .approved-inline-insight{margin-left:178px}
  .trend-stage{grid-template-columns:1fr}
  .trend-insight{min-height:0}
  .practice-focus{grid-template-columns:1fr}
  .practice-session{border-left:0;border-top:1px solid var(--border-subtle)}
}

/* ==========================================================================
   Mobile — canonical experience
   ========================================================================== */
@media(max-width:820px){
  .app-frame{display:block}
  .workspace{width:100%;max-width:100%}
  .context-bar{display:none}

  .side-nav{
    position:fixed;
    z-index:50;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(78px + env(safe-area-inset-bottom));
    display:block;
    padding:5px 8px max(7px,env(safe-area-inset-bottom));
    border-top:1px solid var(--border-subtle);
    border-right:0;
    background:rgba(250,249,245,.98);
  }
  @supports(backdrop-filter:blur(16px)){
    .side-nav{
      background:rgba(250,249,245,.95);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
    }
  }
  .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:62px;
    display:grid;
    grid-template-rows:26px 17px;
    justify-items:center;
    align-content:center;
    gap:3px;
    padding:4px 1px;
    border-radius:0;
    color:#7D8491;
    font-size:10px;
    font-weight:560;
    text-align:center;
  }
  .side-nav nav button:hover{background:transparent;color:#7D8491}
  .side-nav nav button.active{
    color:var(--brand-green);
    font-weight:650;
  }
  .side-nav nav button.active:before{
    left:50%;
    right:auto;
    top:auto;
    bottom:1px;
    width:28px;
    height:3px;
    transform:translateX(-50%);
    border-radius:999px;
    background:var(--brand-green);
  }
  .nav-icon{width:23px;height:23px;color:#858C98}
  .nav-icon .icon{width:20px;height:20px}
  .side-nav nav button.active .nav-icon{color:var(--brand-green)}

  .workspace-body{
    width:100%;
    max-width:100%;
    padding:22px var(--content-pad-mobile) calc(106px + env(safe-area-inset-bottom));
  }

  .page-heading{
    align-items:flex-start;
    gap:16px;
    padding-bottom:21px;
  }
  .page-heading h1{font-size:43px}
  .page-heading p{font-size:12px}
  .section{margin-top:32px}

  /* Shot Analysis */
  .approved-shot-page{width:100%}
  .approved-shot-header{
    gap:12px;
    padding:1px 0 20px;
  }
  .approved-shot-header h1{font-size:39px}
  .approved-range-control{
    min-height:44px;
    max-width:150px;
    padding:0 10px;
    gap:6px;
  }
  .approved-range-control select{
    min-width:0;
    width:102px;
    font-size:10px;
  }
  .approved-calendar-icon{font-size:11px}
  .approved-key-insight{padding:22px 0 24px}
  .approved-key-insight h2{
    max-width:100%;
    margin-top:7px;
    font-size:33px;
    line-height:1.045;
  }
  .approved-key-insight p{
    font-size:15px;
    line-height:1.42;
  }
  .approved-analysis-section{padding:22px 0 24px}
  .approved-section-head{margin-bottom:14px}
  .approved-section-title{font-size:12px}
  .approved-section-head p{font-size:10px}
  .approved-filter-label{font-size:10px}
  .approved-analysis-grid{
    grid-template-columns:100px minmax(0,1fr);
    gap:12px;
  }
  .approved-kpi{padding:4px 0 17px}
  .approved-kpi+.approved-kpi{padding-top:17px}
  .approved-kpi>strong{font-size:41px}
  .approved-kpi>span{font-size:14px}
  .approved-kpi>small{font-size:11px}
  .approved-kpi-text>span{font-size:11px}
  .approved-kpi-text>strong{font-size:30px}
  .approved-driving-viz{aspect-ratio:958/915;height:auto}
  .approved-approach-viz{aspect-ratio:1312/1199;height:auto}
  .approved-viz{border-radius:16px}
  .approved-legend>div{
    padding:8px 5px;
    column-gap:5px;
  }
  .approved-legend span{font-size:8px}
  .approved-legend strong{font-size:10px}
  .legend-dot{width:7px;height:7px}
  .legend-x{font-size:17px}
  .approved-viz-note{font-size:8.5px;line-height:1.35}
  .approved-inline-insight{
    margin:14px 0 0 108px;
  }
  .approved-inline-insight p{font-size:13px}
  .approved-next-priority{
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    padding:22px 0 25px;
  }
  .approved-next-priority h2{font-size:31px}
  .approved-next-priority p{font-size:12px}
  .approved-primary-cta{
    min-height:46px;
    padding:0 15px;
    font-size:11px;
  }
  .approved-detail-disclosure>summary{min-height:64px}
  .approved-detail-disclosure>summary small{display:none}
  .approved-detail-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Home */
  .round-masthead{
    grid-template-columns:minmax(0,1fr) 92px;
    gap:14px;
    padding:2px 0 22px;
  }
  .round-masthead h1{font-size:35px}
  .round-masthead p{font-size:10px}
  .round-score{min-width:0;padding-left:13px}
  .round-score>strong{font-size:49px}
  .round-score>small{display:none}
  .snapshot-grid{gap:10px}
  .overview-score-card{min-height:180px;padding:15px 0}
  .overview-metric-card{min-height:180px;padding:13px}
  .round-story-main h2{font-size:26px}
  .round-story-next{border-left:0;border-top:1px solid var(--border-subtle)}

  /* Progress */
  .trend-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trend-summary-item{border-bottom:1px solid var(--border-subtle)}
  .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;
  }
  .metric-buttons button{min-height:44px}
  .metric-buttons button:last-child{grid-column:1/-1}
  .trend-insight{padding:19px 2px}
  .trend-insight strong{font-size:25px}

  /* Practice */
  .practice-focus-main{padding:22px 2px}
  .practice-focus-main h2{font-size:28px}
  .practice-session{padding:20px 14px}
  .practice-secondary-row{grid-template-columns:1fr}
  .practice-secondary-item:first-child{border-right:0;border-bottom:1px solid var(--border-subtle)}

  /* Rounds */
  .approved-round-row{
    grid-template-columns:minmax(0,1fr) 58px 24px;
    gap:10px;
    min-height:72px;
    padding:14px 2px;
  }
  .approved-round-sg{display:none}
  .approved-round-main strong{font-size:12px}
  .approved-round-main small{font-size:9px}
  .approved-round-score strong{font-size:18px}

  /* Settings */
  .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(--border-subtle);
  }
  .settings-preview-strip>div:last-child{border-bottom:0}

  .diagnostic-grid,.split-support{grid-template-columns:1fr}
}

/* ==========================================================================
   Small iPhone
   ========================================================================== */
@media(max-width:560px){
  :root{--content-pad-mobile:20px}
  body{font-size:14px}
  .workspace-body{padding-left:20px;padding-right:20px}
  .page-heading h1{font-size:40px}
  .approved-shot-header h1{font-size:39px}
  .approved-range-control{
    max-width:138px;
    padding:0 8px;
  }
  .approved-range-control select{width:94px;font-size:9px}
  .approved-key-insight h2{font-size:32px}
  .approved-key-insight p{font-size:14px}
  .approved-analysis-grid{
    grid-template-columns:96px minmax(0,1fr);
    gap:11px;
  }
  .approved-kpi>strong{font-size:39px}
  .approved-kpi>span{font-size:13px}
  .approved-kpi>small{font-size:10px}
  .approved-kpi-text>strong{font-size:30px}
  .approved-driving-viz{aspect-ratio:958/915;height:auto}
  .approved-approach-viz{aspect-ratio:1312/1199;height:auto}
  .approved-inline-insight{margin-left:107px}
  .approved-next-priority h2{font-size:29px}
  .approved-next-priority p{display:none}
  .approved-primary-cta{padding:0 13px}
  .section-head h2{font-size:19px}
  .section-head p{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}

/* Final fidelity overrides — approved Shot Analysis reference */
html,body,.workspace,.workspace-body{background:#FAF9F5}
.approved-shot-page,.page-heading,.round-masthead{color:#161918}
.approved-shot-header{padding-top:0}
.approved-shot-header,.approved-key-insight,.approved-analysis-section,.approved-next-priority{border-color:#E7E3DC}
.approved-key-insight p,.approved-section-head p,.approved-kpi>small,.approved-viz-note,.approved-inline-insight p,.approved-next-priority p{color:#6F7890}
.approved-micro{color:#6F7890;letter-spacing:.22em}
.approved-section-title{letter-spacing:.16em}
.approved-range-control{
  border-color:#123D36;
  background:#FAF9F5;
  box-shadow:none;
}
.approved-primary-cta{background:#0F665B}
.side-nav{background:#FAF9F5}
@media(max-width:820px){
  .workspace-body{padding-top:18px}
  .approved-shot-header{padding-bottom:18px}
  .approved-key-insight{padding-top:18px;padding-bottom:20px}
  .approved-analysis-section{padding-top:18px;padding-bottom:20px}
  .approved-section-head{margin-bottom:11px}
  .approved-kpi{padding-bottom:14px}
  .approved-kpi+.approved-kpi{padding-top:14px}
  .approved-viz{border-radius:14px}
  .approved-legend{margin-top:8px}
  .approved-next-priority{padding-top:18px;padding-bottom:20px}
}

/* Approved compact filter and icon language */
.approved-calendar-icon svg{
  width:18px;height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.approved-filter-control{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:1px solid #ECE8E0;
  border-radius:18px;
  background:#FAF9F5;
  color:#161918;
  font-size:11px;
  font-weight:560;
  line-height:1;
}
.approved-filter-control span{color:#6F7890;font-size:12px}
.approved-filter-pair{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:nowrap;
}
.approved-info-dot{
  display:inline-grid!important;
  place-items:center;
  width:15px;
  height:15px;
  margin:0 0 0 3px!important;
  border:1px solid #77819A;
  border-radius:50%;
  color:#77819A!important;
  font-size:9px!important;
  font-weight:700!important;
  vertical-align:1px;
}
@media(max-width:820px){
  .approved-filter-control{min-height:31px;padding:0 9px;font-size:9px}
  .approved-filter-pair{gap:5px}
}
@media(max-width:560px){
  .approved-filter-control{padding:0 8px}
  .approved-filter-pair .approved-filter-control:first-child{max-width:90px}
}

/* Canonical page shell used beyond Analyse */
.approved-page-top{margin-bottom:0}
.approved-page-intro{
  padding:18px 0 20px;
  border-bottom:1px solid #E7E3DC;
}
.approved-page-intro p{
  max-width:720px;
  margin:6px 0 0;
  color:#6F7890;
  font-size:14px;
  line-height:1.45;
}
.approved-page-top+.round-masthead{
  padding-top:24px;
}
.approved-page-top+.approved-page-intro+.approved-list{
  margin-top:0;
}
@media(max-width:820px){
  .approved-page-intro{padding:16px 0 18px}
  .approved-page-intro p{font-size:12px}
  .approved-page-top+.round-masthead{padding-top:20px}
}

/* Cross-page consistency pass: remove residual generic SaaS card language */
.benchmark-grid .card,
.diagnostic-grid .card,
.split-support .support-panel,
.split-support .profile-panel{
  border:0;
  border-top:1px solid #E7E3DC;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.benchmark-grid .card{padding:17px 8px 10px}
.diagnostic-grid .card,
.split-support .support-panel,
.split-support .profile-panel{padding:20px 4px}
.card-heading h2,.card-heading h3,.trend-chart-header h2{
  color:#161918;
  font-family:var(--font-ui);
  font-weight:650;
  letter-spacing:-.015em;
}
.card-heading p,.kpi-note,.diagnostic-copy span,.technical{color:#6F7890}
.band-title,.barlabel,.mini small{color:#6F7890}
.band-value,.barval,.mini strong{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.bartrack,.band-track,.distance-track{background:#E9E6DF}
.barfill.good{background:#123D36}
.barfill.bad{background:#D84B45}
.barfill.neutral{background:#9A8465}
.marker.selected,.you-marker{background:#123D36}
.benchmark-badge{
  border:0;
  padding:0;
  background:transparent;
  color:#6F7890;
  font-size:9px;
  font-weight:650;
}
.priority-stack{border-top:1px solid #E7E3DC}
.priority-row{
  min-height:72px;
  padding:15px 4px;
  border-bottom:1px solid #E7E3DC;
  background:transparent;
}
.priority-row .priority-index{color:#9A8465}
.support-panel table{border-collapse:collapse}
.support-panel th,.support-panel td{border-color:#E7E3DC}
@media(max-width:820px){
  .benchmark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .benchmark-grid .card{padding:15px 4px}
  .diagnostic-grid,.split-support{gap:18px}
}

/* Narrow-phone safeguard: preserve the approved one-line header without overflow */
@media(max-width:380px){
  :root{--content-pad-mobile:16px}
  .workspace-body{padding-left:16px;padding-right:16px}
  .approved-shot-header h1{font-size:34px}
  .approved-range-control{max-width:126px;padding:0 7px}
  .approved-range-control select{width:84px;font-size:9px}
  .approved-analysis-grid{grid-template-columns:91px minmax(0,1fr);gap:9px}
  .approved-kpi>strong{font-size:36px}
  .approved-kpi>span{font-size:12px}
  .approved-kpi>small{font-size:9px}
  .approved-filter-pair{gap:4px}
  .approved-filter-control{padding:0 6px;font-size:8px}
  .approved-next-priority h2{font-size:27px}
}

/* Keep the approved compact visual size while preserving a 44px tap target. */
.approved-filter-control{
  position:relative;
  z-index:0;
  min-height:44px!important;
  border:0!important;
  background:transparent!important;
}
.approved-filter-control:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;right:0;top:6px;bottom:6px;
  border:1px solid #ECE8E0;
  border-radius:18px;
  background:#FAF9F5;
}

/* Reference-density pass: calibrated directly against the approved mobile render. */
@media(max-width:820px){
  .workspace-body{padding-top:14px}
  .approved-shot-header{padding-bottom:14px}
  .approved-shot-header h1{font-size:31px;letter-spacing:-.03em}
  .approved-range-control{min-height:40px;max-width:142px;padding:0 9px}
  .approved-range-control select{width:102px;font-size:9.5px}
  .approved-calendar-icon svg{width:16px;height:16px}

  .approved-key-insight{padding:14px 0 16px}
  .approved-micro{font-size:8px;letter-spacing:.21em}
  .approved-key-insight h2{
    margin:5px 0 6px;
    font-size:24px;
    line-height:1.04;
    letter-spacing:-.02em;
  }
  .approved-key-insight p{font-size:11.5px;line-height:1.42}

  .approved-analysis-section{padding:14px 0 16px}
  .approved-section-head{margin-bottom:8px}
  .approved-section-title{font-size:10px}
  .approved-section-head p{margin-top:2px;font-size:8.5px}
  .approved-analysis-grid{grid-template-columns:91px minmax(0,1fr);gap:10px}

  .approved-kpi{padding:3px 0 10px}
  .approved-kpi+.approved-kpi{padding-top:10px}
  .approved-kpi>strong{font-size:31px;letter-spacing:-.035em}
  .approved-kpi>span{margin-top:4px;font-size:11px}
  .approved-kpi>small{margin-top:3px;font-size:8.5px;line-height:1.25}
  .approved-kpi-text>span{font-size:9px}
  .approved-kpi-text>strong{margin-top:3px;font-size:24px;line-height:1}
  .approved-info-dot{width:13px;height:13px;font-size:8px!important}

  .approved-viz{border-radius:12px}
  .approved-legend{margin-top:5px}
  .approved-legend>div{padding:5px 3px;column-gap:4px}
  .approved-legend span{font-size:7px}
  .approved-legend strong{font-size:9px}
  .legend-dot{width:6px;height:6px}
  .legend-x{font-size:14px}
  .approved-viz-note{margin-top:5px;font-size:7.5px;line-height:1.3}

  .approved-inline-insight{margin:10px 0 0 101px}
  .approved-inline-insight p{margin-top:4px;font-size:10px;line-height:1.35}

  .approved-next-priority{gap:10px;padding:13px 0 15px}
  .approved-next-priority h2{margin:4px 0 4px;font-size:25px;line-height:1.02}
  .approved-next-priority p{font-size:9.5px;line-height:1.35}
  .approved-primary-cta{min-height:40px;padding:0 13px;font-size:10px}

  .approved-detail-disclosure>summary{min-height:52px}
  .approved-detail-disclosure>summary span{font-size:11px}

  .side-nav{height:calc(68px + env(safe-area-inset-bottom))}
  .side-nav nav button{min-height:53px;grid-template-rows:22px 14px;font-size:9px}
  .nav-icon{width:21px;height:21px}
  .nav-icon .icon{width:18px;height:18px}
  .side-nav nav button.active:before{width:27px;height:2px}
  .workspace-body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){
  .approved-shot-header h1{font-size:29px}
  .approved-key-insight h2{font-size:22px}
  .approved-analysis-grid{grid-template-columns:86px minmax(0,1fr);gap:9px}
  .approved-kpi>strong{font-size:29px}
  .approved-kpi-text>strong{font-size:23px}
  .approved-inline-insight{margin-left:95px}
}

/* Pixel-fidelity mobile geometry from the approved 941px reference artboard.
   The reference uses ~9% side gutters and a ~202:27:538 KPI/gap/image ratio. */
@media(max-width:820px){
  :root{--content-pad-mobile:32px}
  .workspace-body{padding-left:32px;padding-right:32px}
  .approved-shot-header h1{font-size:30px}
  .approved-key-insight p{font-size:10.25px;line-height:1.38}
  .approved-analysis-grid{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .approved-kpi>strong{font-size:29px}
  .approved-kpi>span{font-size:10px}
  .approved-kpi>small{font-size:8px}
  .approved-kpi-text>strong{font-size:23px}
  .approved-inline-insight{margin-left:96px}
  .approved-next-priority h2{font-size:22px;white-space:nowrap}
  .approved-primary-cta{min-width:105px}
}
@media(max-width:410px){
  :root{--content-pad-mobile:30px}
  .workspace-body{padding-left:30px;padding-right:30px}
  .approved-analysis-grid{grid-template-columns:82px minmax(0,1fr);gap:11px}
  .approved-inline-insight{margin-left:93px}
}
@media(max-width:380px){
  :root{--content-pad-mobile:26px}
  .workspace-body{padding-left:26px;padding-right:26px}
  .approved-shot-header h1{font-size:28px}
  .approved-analysis-grid{grid-template-columns:78px minmax(0,1fr);gap:10px}
  .approved-kpi>strong{font-size:27px}
  .approved-kpi-text>strong{font-size:22px}
  .approved-inline-insight{margin-left:88px}
  .approved-next-priority h2{font-size:20px}
}

/* Final hierarchy details from the approved reference */
.approved-heading-info{
  display:inline-grid;
  place-items:center;
  width:15px;
  height:15px;
  margin-left:4px;
  border:1px solid #77819A;
  border-radius:50%;
  color:#77819A;
  font-size:9px;
  font-weight:700;
  letter-spacing:0;
  vertical-align:1px;
}
.approved-cost{
  font-weight:700;
  white-space:nowrap;
}
.approved-cost.negative{color:#0F665B}
.approved-cost.positive{color:#0F665B}
@media(max-width:820px){
  .approved-heading-info{width:13px;height:13px;font-size:8px}
  .approved-next-priority p{display:block!important}
}

/* ==========================================================================
   Unified sports-report graph system — approved visual language
   ========================================================================= */
.approved-viz>img{
  filter:none!important;
  object-fit:cover;
}
.approved-driving-viz>img,
.approved-approach-viz>img{
  transform:none!important;
  object-position:center center!important;
}

/* Benchmark comparison rows */
.sports-compare-list{
  border-top:1px solid var(--border-subtle);
}
.sports-compare-row{
  display:grid;
  grid-template-columns:minmax(150px,190px) minmax(220px,1fr) minmax(110px,150px);
  gap:18px;
  align-items:center;
  min-height:70px;
  padding:12px 0;
  border-bottom:1px solid var(--border-subtle);
}
.sports-compare-label{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:baseline;
}
.sports-compare-label span{
  color:var(--text-primary);
  font-size:13px;
  font-weight:540;
}
.sports-compare-label strong{
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.sports-compare-track{
  position:relative;
  height:32px;
}
.sports-track-bg{
  position:absolute;
  left:0;right:0;
  top:14px;
  height:5px;
  border-radius:999px;
  background:#E8E6E1;
}
.sports-track-fill{
  position:absolute;
  left:0;
  top:14px;
  height:5px;
  border-radius:999px;
  background:var(--muted-bronze);
}
.sports-track-fill.good{background:var(--brand-green)}
.sports-track-fill.bad{background:#C95E55}
.sports-track-fill.neutral{background:#8A8F91}
.sports-benchmark-marker{
  position:absolute;
  top:6px;
  bottom:5px;
  width:2px;
  transform:translateX(-1px);
  background:var(--text-primary);
}
.sports-benchmark-marker span{
  position:absolute;
  left:50%;
  top:-11px;
  transform:translateX(-50%);
  color:#667089;
  font-size:8px;
  font-weight:650;
  white-space:nowrap;
}
.sports-compare-delta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.08;
  text-align:right;
}
.sports-compare-delta strong{
  font-size:12px;
  font-weight:700;
}
.sports-compare-delta span{
  margin-top:3px;
  font-size:8px;
  color:currentColor;
}

/* Diverging SG bars */
.sports-diverging-bars{
  border-top:1px solid var(--border-subtle);
}
.sports-diverging-row{
  display:grid;
  grid-template-columns:minmax(105px,145px) minmax(160px,1fr) 58px;
  gap:12px;
  align-items:center;
  min-height:48px;
  padding:8px 0;
  border-bottom:1px solid var(--border-subtle);
}
.sports-diverging-label{
  color:var(--text-primary);
  font-size:11px;
  font-weight:540;
}
.sports-diverging-track{
  position:relative;
  height:22px;
}
.sports-diverging-track:before{
  content:"";
  position:absolute;
  left:4%;right:4%;
  top:9px;
  height:4px;
  border-radius:999px;
  background:#ECEAE5;
}
.sports-diverging-zero{
  position:absolute;
  left:50%;
  top:3px;
  bottom:3px;
  width:1px;
  background:#8A8F98;
}
.sports-diverging-fill{
  position:absolute;
  top:9px;
  height:4px;
  border-radius:999px;
  background:#8A8F91;
}
.sports-diverging-fill.good{background:var(--brand-green)}
.sports-diverging-fill.bad{background:#C95E55}
.sports-diverging-value{
  text-align:right;
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* Line charts */
.sports-line-chart{
  width:100%;
  margin-top:8px;
}
.sports-line-chart svg{
  width:100%;
  height:auto;
  overflow:visible;
}
.sports-grid-line{
  stroke:#E8E6E1;
  stroke-width:1;
}
.sports-axis-line{
  stroke:#DCD9D2;
  stroke-width:1;
}
.sports-chart-area{
  fill:rgba(18,61,54,.045);
}
.sports-chart-line{
  fill:none;
  stroke:var(--brand-green);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sports-chart-dot{
  fill:var(--brand-green);
  stroke:#FAF9F5;
  stroke-width:1.3;
}
.sports-chart-dot.latest{
  stroke-width:2;
}
.sports-bench-line{
  stroke:#7E8798;
  stroke-width:1.4;
  stroke-dasharray:7 7;
}
.sports-bench-label,
.sports-axis-label{
  fill:#7B8393;
  font-family:var(--font-ui);
  font-size:9px;
}
.sports-latest-tag rect{
  fill:var(--brand-green);
}
.sports-latest-tag text{
  fill:#fff;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
}

/* Home report strip */
.approved-report-section{
  border-bottom:1px solid var(--border-subtle);
  padding-bottom:22px;
}
.sports-total-sg-row{
  display:grid;
  grid-template-columns:minmax(150px,190px) auto minmax(0,1fr);
  gap:18px;
  align-items:baseline;
  min-height:56px;
  padding:13px 0 0;
}
.sports-total-sg-row span{
  color:var(--text-primary);
  font-size:12px;
  font-weight:600;
}
.sports-total-sg-row strong{
  font-size:22px;
  font-weight:700;
}
.sports-total-sg-row small{
  color:var(--text-secondary);
  font-size:9px;
}

/* Rounds report */
.rounds-editorial-intro h2{
  max-width:650px;
  margin:6px 0 7px;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:36px;
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.025em;
}
.rounds-score-trend{
  padding:22px 0 24px;
  border-bottom:1px solid var(--border-subtle);
}
.rounds-summary-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid var(--border-subtle);
}
.rounds-summary-strip>div{
  min-width:0;
  padding:0 14px;
  border-right:1px solid var(--border-subtle);
}
.rounds-summary-strip>div:first-child{padding-left:0}
.rounds-summary-strip>div:last-child{border-right:0;padding-right:0}
.rounds-summary-strip strong{
  display:block;
  color:var(--text-primary);
  font-size:23px;
  font-weight:700;
  line-height:1;
}
.rounds-summary-strip span{
  display:block;
  margin-top:6px;
  color:var(--text-secondary);
  font-size:9px;
}

/* Existing graph containers inherit the new restraint */
.trend-chart-panel,
.support-panel,
.overview-score-card,
.overview-metric-card{
  box-shadow:none!important;
}
.trend-chart-panel{
  border:1px solid var(--border-subtle);
  border-radius:14px;
  background:#FAF9F5;
}
.trend-insight{
  border-top:1px solid var(--brand-green)!important;
}
.metric-buttons button{
  background:#FAF9F5;
  border-color:#E7E3DC;
}
.metric-buttons button.active{
  background:var(--brand-green);
  border-color:var(--brand-green);
  color:#fff;
}

/* Mobile graph calibration */
@media(max-width:820px){
  .sports-compare-row{
    grid-template-columns:88px minmax(0,1fr) 76px;
    gap:8px;
    min-height:54px;
    padding:9px 0;
  }
  .sports-compare-label{
    display:block;
  }
  .sports-compare-label span{
    display:block;
    font-size:9px;
  }
  .sports-compare-label strong{
    display:block;
    margin-top:2px;
    font-size:14px;
  }
  .sports-compare-track{
    height:28px;
  }
  .sports-track-bg,
  .sports-track-fill{top:12px;height:4px}
  .sports-benchmark-marker{top:5px;bottom:5px}
  .sports-benchmark-marker span{top:-10px;font-size:7px}
  .sports-compare-delta strong{font-size:9px}
  .sports-compare-delta span{font-size:7px}

  .sports-diverging-row{
    grid-template-columns:84px minmax(0,1fr) 44px;
    gap:7px;
    min-height:42px;
    padding:6px 0;
  }
  .sports-diverging-label{font-size:8.5px}
  .sports-diverging-value{font-size:9px}

  .sports-total-sg-row{
    grid-template-columns:88px auto minmax(0,1fr);
    gap:8px;
    min-height:50px;
  }
  .sports-total-sg-row span{font-size:9px}
  .sports-total-sg-row strong{font-size:18px}
  .sports-total-sg-row small{font-size:7.5px}

  .rounds-editorial-intro h2{font-size:28px}
  .rounds-score-trend{padding:16px 0 18px}
  .rounds-summary-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
  .rounds-summary-strip>div{
    padding:10px 12px;
    border-right:1px solid var(--border-subtle);
    border-bottom:1px solid var(--border-subtle);
  }
  .rounds-summary-strip>div:nth-child(2n){border-right:0}
  .rounds-summary-strip>div:nth-last-child(-n+2){border-bottom:0}
  .rounds-summary-strip>div:first-child{padding-left:0}
  .rounds-summary-strip>div:nth-child(3){padding-left:0}
  .rounds-summary-strip strong{font-size:19px}
  .rounds-summary-strip span{font-size:8px}
}

/* ==========================================================================
   Approved report page compositions — Home / Progress / Rounds / Practice
   ========================================================================== */
.editorial-hero{
  padding:22px 0 24px;
  border-bottom:1px solid var(--border-subtle);
}
.editorial-hero h2{
  max-width:790px;
  margin:7px 0 8px;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:clamp(34px,4vw,46px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.03em;
}
.editorial-hero p{
  max-width:800px;
  margin:0;
  color:#66718E;
  font-size:16px;
  line-height:1.43;
}

/* Home */
.latest-round-strip{
  display:grid;
  grid-template-columns:minmax(260px,1fr) repeat(3,110px);
  margin-top:20px;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.latest-round-strip>div{
  min-width:0;
  padding:15px 16px;
  border-right:1px solid var(--border-subtle);
}
.latest-round-strip>div:first-child{padding-left:0}
.latest-round-strip>div:last-child{border-right:0;padding-right:0}
.latest-round-strip>div>span{
  display:block;
  color:#687494;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
}
.latest-round-strip>div>strong{
  display:block;
  margin-top:4px;
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:25px;
  font-weight:700;
  line-height:1;
}
.latest-round-identity>strong{
  font-family:var(--font-editorial)!important;
  font-size:22px!important;
  font-weight:400!important;
}
.latest-round-identity>small{
  display:block;
  margin-top:4px;
  color:#687494;
  font-size:11px;
}
.home-aerial-layout{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:20px;
  align-items:stretch;
}
.home-aerial-copy{
  padding:8px 0;
}
.home-aerial-copy>strong{
  display:block;
  color:var(--text-primary);
  font-size:46px;
  font-weight:700;
  line-height:.95;
}
.home-aerial-copy>span{
  display:block;
  margin-top:7px;
  color:var(--text-primary);
  font-size:15px;
  font-weight:550;
}
.home-aerial-copy>p{
  margin:8px 0 0;
  color:#687494;
  font-size:11px;
  line-height:1.4;
}
.aerial-context-card{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:16px;
  background:#DBE3D8;
}
.aerial-context-card img{
  display:block;
  width:100%;
  aspect-ratio:2.25/1;
  object-fit:cover;
}
.aerial-context-card figcaption{
  position:absolute;
  left:12px;
  bottom:10px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(14,40,35,.72);
  color:#fff;
  font-size:8px;
  font-weight:650;
  letter-spacing:.05em;
}
.next-focus-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:end;
  padding:24px 0 26px;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.next-focus-strip h2{
  max-width:700px;
  margin:5px 0 5px;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:34px;
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.025em;
}
.next-focus-strip p{
  max-width:680px;
  margin:0;
  color:#687494;
  font-size:13px;
}
.approved-secondary-detail{
  border:0;
  border-bottom:1px solid var(--border-subtle);
}
.approved-secondary-detail>summary{
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2px;
  color:var(--text-primary);
  font-size:12px;
  font-weight:650;
}
.approved-secondary-detail-body{padding:0 0 24px}

/* Progress */
.progress-feature{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:26px;
  align-items:stretch;
  padding:22px 0 25px;
  border-bottom:1px solid var(--border-subtle);
}
.progress-total{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-right:22px;
  border-right:1px solid var(--border-subtle);
}
.progress-total>span{
  color:var(--text-primary);
  font-size:14px;
  font-weight:550;
}
.progress-total>strong{
  display:block;
  margin:9px 0 3px;
  font-size:54px;
  font-weight:700;
  line-height:.9;
  letter-spacing:-.045em;
}
.progress-total>small{
  color:#687494;
  font-size:11px;
}
.progress-main-chart{
  min-width:0;
  padding-top:3px;
}
.progress-chart-label{
  margin-bottom:3px;
  color:#687494;
  font-size:9px;
  font-weight:650;
  text-align:right;
}
.benchmark-report-section{
  padding-bottom:4px;
  border-bottom:1px solid var(--border-subtle);
}
.category-spark-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.category-spark-card{
  min-width:0;
  padding:13px 14px 10px;
  border:1px solid var(--border-subtle);
  border-radius:13px;
  background:transparent;
}
.category-spark-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.category-spark-head span{
  color:var(--text-primary);
  font-size:12px;
  font-weight:600;
}
.category-spark-head strong{
  font-size:17px;
  font-weight:700;
}
.category-spark-card svg{
  display:block;
  width:100%;
  height:auto;
  margin-top:7px;
}
.spark-zero{
  stroke:#D9D7D2;
  stroke-width:1;
  stroke-dasharray:5 5;
}
.spark-line{
  fill:none;
  stroke:var(--brand-green);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.spark-dot{
  fill:var(--brand-green);
  stroke:#FAF9F5;
  stroke-width:1;
}
.progress-key-insight{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(270px,390px);
  gap:28px;
  align-items:center;
  padding:25px 0;
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
}
.progress-key-insight h2{
  margin:6px 0 6px;
  color:var(--text-primary);
  font-family:var(--font-editorial);
  font-size:32px;
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.025em;
}
.progress-key-insight p{
  margin:0;
  color:#687494;
  font-size:12px;
  line-height:1.4;
}
.progress-key-insight figure{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:14px;
}
.progress-key-insight img{
  display:block;
  width:100%;
  aspect-ratio:2.45/1;
  object-fit:cover;
}
.progress-key-insight figcaption{
  position:absolute;
  bottom:8px;
  left:10px;
  color:#fff;
  font-size:7px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* Practice */
.practice-primary-section{
  padding:22px 0 24px;
  border-bottom:1px solid var(--border-subtle);
}
.practice-primary-grid{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
.practice-kpi-rail{
  display:grid;
}
.practice-kpi-rail>div{
  padding:12px 0 15px;
  border-bottom:1px solid var(--border-subtle);
}
.practice-kpi-rail>div:first-child{padding-top:2px}
.practice-kpi-rail>div:last-child{border-bottom:0}
.practice-kpi-rail strong{
  display:block;
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
}
.practice-kpi-rail>div:first-child strong{
  font-family:var(--font-editorial);
  font-size:24px;
  font-weight:400;
}
.practice-kpi-rail span{
  display:block;
  margin-top:5px;
  color:var(--text-primary);
  font-size:11px;
  font-weight:550;
}
.practice-kpi-rail small{
  display:block;
  margin-top:3px;
  color:#687494;
  font-size:9px;
}
.practice-aerial-card{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:15px;
  background:#DBE3D8;
}
.practice-aerial-card img{
  display:block;
  width:100%;
  aspect-ratio:1.55/1;
  object-fit:cover;
}
.practice-aerial-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.practice-aerial-overlay i{
  position:absolute;
  left:50%;
  top:8%;
  bottom:8%;
  border-left:1.5px dashed rgba(255,255,255,.86);
}
.practice-aerial-overlay span{
  position:absolute;
  left:12px;
  bottom:10px;
  color:#fff;
  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
}
.practice-aerial-card figcaption{
  padding:8px 10px;
  color:#687494;
  background:#FAF9F5;
  font-size:8px;
}
.practice-evidence-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:18px;
  align-items:stretch;
}
.practice-evidence-read{
  padding-left:18px;
  border-left:1px solid var(--border-subtle);
}
.practice-evidence-read>strong{
  display:block;
  font-size:38px;
  line-height:.95;
  font-weight:700;
}
.practice-evidence-read>span{
  display:block;
  margin-top:5px;
  color:var(--text-primary);
  font-size:12px;
}
.practice-evidence-read>p{
  margin:6px 0 0;
  color:#687494;
  font-size:10px;
  line-height:1.4;
}
.practice-drill-list{
  border-top:1px solid var(--border-subtle);
}
.practice-drill-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 24px;
  gap:11px;
  align-items:center;
  min-height:66px;
  padding:11px 2px;
  border-bottom:1px solid var(--border-subtle);
}
.practice-drill-index{
  color:#9A8465;
  font-size:10px;
  font-weight:700;
}
.practice-drill-row strong{
  color:var(--text-primary);
  font-size:12px;
  font-weight:650;
}
.practice-drill-row p{
  margin:3px 0 0;
  color:#687494;
  font-size:9px;
}
.practice-large-cta{
  width:100%;
  min-height:48px;
  margin-top:16px;
  border:0;
  border-radius:999px;
  background:var(--brand-green);
  color:#fff;
  font-size:13px;
  font-weight:650;
}
.practice-large-cta span{margin-left:8px}

/* Rounds */
.recent-rounds-report{
  padding:22px 0 0;
}
.approved-round-row{
  grid-template-columns:58px minmax(0,1fr) 64px 84px 24px!important;
}
.round-thumb{
  width:58px;
  height:48px;
  overflow:hidden;
  border-radius:10px;
  background:#DCE4DA;
}
.round-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Mobile composition */
@media(max-width:820px){
  .editorial-hero{padding:15px 0 17px}
  .editorial-hero h2{font-size:27px;margin:5px 0 6px}
  .editorial-hero p{font-size:10.5px;line-height:1.4}

  .latest-round-strip{
    grid-template-columns:minmax(0,1.45fr) repeat(3,.55fr);
    margin-top:14px;
  }
  .latest-round-strip>div{padding:10px 7px}
  .latest-round-strip>div:first-child{padding-left:0}
  .latest-round-strip>div>span{font-size:7px}
  .latest-round-strip>div>strong{font-size:18px}
  .latest-round-identity>strong{font-size:16px!important}
  .latest-round-identity>small{font-size:7.5px}

  .home-aerial-layout{
    grid-template-columns:86px minmax(0,1fr);
    gap:10px;
  }
  .home-aerial-copy>strong{font-size:29px}
  .home-aerial-copy>span{font-size:10px}
  .home-aerial-copy>p{font-size:7.5px}
  .aerial-context-card{border-radius:12px}
  .aerial-context-card figcaption{left:8px;bottom:7px;font-size:6.5px}

  .next-focus-strip{gap:10px;padding:15px 0 17px}
  .next-focus-strip h2{font-size:23px}
  .next-focus-strip p{font-size:9px}

  .progress-feature{
    grid-template-columns:96px minmax(0,1fr);
    gap:12px;
    padding:15px 0 17px;
  }
  .progress-total{padding-right:10px}
  .progress-total>span{font-size:9px}
  .progress-total>strong{font-size:34px}
  .progress-total>small{font-size:7.5px}
  .progress-chart-label{font-size:7px}
  .category-spark-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .category-spark-card{padding:9px 9px 6px}
  .category-spark-card:nth-child(3){grid-column:1/-1}
  .category-spark-head span{font-size:9px}
  .category-spark-head strong{font-size:13px}
  .progress-key-insight{
    grid-template-columns:minmax(0,1fr) 42%;
    gap:12px;
    padding:16px 0;
  }
  .progress-key-insight h2{font-size:22px}
  .progress-key-insight p{font-size:8.5px}
  .progress-key-insight figure{border-radius:10px}

  .practice-primary-grid{
    grid-template-columns:84px minmax(0,1fr);
    gap:10px;
  }
  .practice-kpi-rail>div{padding:8px 0 10px}
  .practice-kpi-rail strong{font-size:23px}
  .practice-kpi-rail>div:first-child strong{font-size:18px}
  .practice-kpi-rail span{font-size:8.5px}
  .practice-kpi-rail small{font-size:7px}
  .practice-aerial-card{border-radius:12px}
  .practice-aerial-card figcaption{font-size:7px}
  .practice-evidence-grid{
    grid-template-columns:minmax(0,1fr) 86px;
    gap:10px;
  }
  .practice-evidence-read{padding-left:10px}
  .practice-evidence-read>strong{font-size:27px}
  .practice-evidence-read>span{font-size:9px}
  .practice-evidence-read>p{font-size:7.5px}
  .practice-drill-row{
    grid-template-columns:27px minmax(0,1fr) 20px;
    min-height:58px;
    padding:9px 0;
  }
  .practice-drill-row strong{font-size:10px}
  .practice-drill-row p{font-size:7.5px}
  .practice-large-cta{min-height:43px;font-size:11px}

  .approved-round-row{
    grid-template-columns:46px minmax(0,1fr) 47px 20px!important;
    gap:8px!important;
  }
  .round-thumb{width:46px;height:42px;border-radius:8px}
  .approved-round-sg{display:none!important}
}
@media(max-width:380px){
  .progress-key-insight{grid-template-columns:1fr}
  .progress-key-insight figure{display:none}
  .latest-round-strip{grid-template-columns:1.4fr repeat(3,.55fr)}
  .latest-round-identity>small{display:none}
}


/* ==========================================================================
   Production QA — benchmark controls, branded pickers, mobile collision fixes
   ========================================================================== */

/* Page titles: deliberately +5px from the approved production scale. */
.approved-shot-header h1{
  font-size:53px;
  font-weight:700;
}
.approved-header-controls{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

/* Branded HTML picker — avoids native iOS select presentation for rounds. */
.brand-picker{
  position:relative;
  z-index:44;
  min-width:0;
}
.brand-picker>summary{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border:1px solid var(--brand-green);
  border-radius:999px;
  background:#FAF9F5;
  color:var(--text-primary);
  cursor:pointer;
  list-style:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.brand-picker>summary::-webkit-details-marker{display:none}
.brand-picker>summary::marker{content:""}
.brand-picker>summary:focus-visible{
  outline:2px solid rgba(18,61,54,.28);
  outline-offset:2px;
}
.brand-picker>summary strong{
  min-width:0;
  overflow:hidden;
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:650;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.brand-picker-kicker{
  color:#6F7890;
  font-size:7px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand-picker-chevron{
  margin-left:auto;
  color:var(--brand-green);
  font-size:13px;
  line-height:1;
  transition:transform .16s ease;
}
.brand-picker[open] .brand-picker-chevron{transform:rotate(180deg)}
.brand-picker-calendar{
  width:17px;
  height:17px;
  flex:0 0 17px;
  display:grid;
  place-items:center;
  color:var(--brand-green);
}
.brand-picker-calendar svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
}
.brand-picker-date{
  flex:0 0 auto;
  color:#6F7890;
  font-size:9px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.brand-picker-menu{
  position:absolute;
  z-index:120;
  top:calc(100% + 8px);
  right:0;
  width:198px;
  overflow:hidden;
  border:1px solid #DCD8D0;
  border-radius:16px;
  background:#FAF9F5;
  box-shadow:0 18px 46px rgba(19,33,29,.16);
}
.brand-picker-menu-title{
  padding:11px 13px 8px;
  border-bottom:1px solid #E8E4DD;
  color:#6F7890;
  font-size:8px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.brand-picker-menu button{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border:0;
  border-bottom:1px solid #ECE8E1;
  background:transparent;
  color:var(--text-primary);
  font-family:var(--font-ui);
  text-align:left;
}
.brand-picker-menu button:last-child{border-bottom:0}
.brand-picker-menu button:active,
.brand-picker-menu button.selected{background:#EEF3EF}
.brand-picker-menu button>span:not(.round-picker-copy){
  font-size:12px;
  font-weight:600;
}
.brand-picker-menu button>i{
  color:var(--brand-green);
  font-size:12px;
  font-style:normal;
  font-weight:700;
  text-align:right;
}
.round-picker{min-width:250px}
.round-picker>summary{max-width:330px}
.round-picker>summary>strong{max-width:190px}
.round-picker-menu{
  left:0;
  right:auto;
  width:min(360px,calc(100vw - 40px));
  max-height:min(62vh,540px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.round-picker-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.round-picker-copy strong{
  overflow:hidden;
  font-size:12px;
  font-weight:650;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.round-picker-copy small{
  color:#6F7890;
  font-size:9px;
  font-weight:550;
  font-variant-numeric:tabular-nums;
}
.benchmark-picker>.brand-picker-trigger{min-width:122px}
.benchmark-picker>.brand-picker-trigger strong{font-size:11px}

/* Text collision safeguards. */
.editorial-hero h2,
.section-head h2,
.approved-key-insight h2,
.approved-next-priority h2,
.progress-key-insight h2,
.next-focus-strip h2,
.practice-drill-row strong,
.practice-drill-row p{
  overflow-wrap:anywhere;
}
.approved-next-priority h2{white-space:normal!important}
.approved-round-main,
.latest-round-identity{min-width:0}
.approved-round-main strong,
.latest-round-identity>strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.approved-filter-pair{flex-wrap:wrap}

/* Practice rows are informational, not fake navigation. */
.practice-drill-row{
  grid-template-columns:38px minmax(0,1fr);
}
.priority-arrow{display:none}

/* Let chart labels remain inside their own geometry. */
.sports-line-chart,
.progress-main-chart,
.category-spark-card,
.support-panel{min-width:0}
.sports-line-chart svg{max-width:100%}
.sports-benchmark-label{paint-order:stroke;stroke:#FAF9F5;stroke-width:3px;stroke-linejoin:round}

/* Mobile: title gets +5px (30 -> 35 at canonical iPhone width), controls move
   to their own row so benchmark + range/round selection cannot collide. */
@media(max-width:820px){
  .approved-shot-header{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:11px;
  }
  .approved-shot-header h1{
    width:100%;
    flex:1 0 100%;
    font-size:35px;
    line-height:1;
  }
  .approved-header-controls{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(108px,126px);
    gap:8px;
  }
  .approved-header-controls>.approved-range-control{
    width:100%;
    max-width:none!important;
  }
  .approved-header-controls>.approved-range-control select{
    width:100%!important;
    min-width:0;
  }
  .brand-picker{width:100%;min-width:0}
  .brand-picker>summary{
    width:100%;
    min-height:40px;
    padding:0 9px;
  }
  .round-picker>summary{max-width:none}
  .round-picker>summary>strong{max-width:none;flex:1 1 auto}
  .round-picker{min-width:0}
  .benchmark-picker>.brand-picker-trigger{min-width:0}
  .brand-picker-kicker{font-size:6.5px}
  .brand-picker-menu-right{right:0;left:auto}
  .round-picker-menu{width:min(340px,calc(100vw - 60px))}

  /* The practice evidence screenshot was structurally too tight at phone widths. */
  .practice-evidence-grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .practice-evidence-read{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:baseline;
    gap:8px;
    padding:10px 0 0;
    border-top:1px solid var(--border-subtle);
    border-left:0;
  }
  .practice-evidence-read>strong{font-size:25px}
  .practice-evidence-read>span{margin-top:0;font-size:9px}
  .practice-evidence-read>p{margin:0;font-size:8.5px;line-height:1.35}

  /* Give the latest-round identity a full row instead of crushing four columns. */
  .latest-round-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .latest-round-strip>.latest-round-identity{
    grid-column:1/-1;
    padding:10px 0 11px;
    border-right:0;
    border-bottom:1px solid var(--border-subtle);
  }
  .latest-round-strip>div:not(.latest-round-identity){
    padding:10px 8px;
  }
  .latest-round-strip>div:nth-child(4){border-right:0}

  .practice-drill-row{
    grid-template-columns:27px minmax(0,1fr);
  }
  .practice-drill-row strong{font-size:11px;line-height:1.25}
  .practice-drill-row p{font-size:8.5px;line-height:1.4}

  .approved-round-main strong{max-width:100%}
  .sports-compare-label span,
  .sports-compare-delta strong,
  .sports-compare-delta span{overflow-wrap:anywhere}
}

@media(max-width:560px){
  /* Progress feature stacks before it can compress the chart/readout. */
  .progress-feature{
    grid-template-columns:1fr;
    gap:12px;
  }
  .progress-total{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:baseline;
    gap:8px;
    padding:0 0 12px;
    border-right:0;
    border-bottom:1px solid var(--border-subtle);
  }
  .progress-total>strong{margin:0;font-size:31px}
  .progress-total>small{text-align:right}

  .sports-compare-row{
    grid-template-columns:82px minmax(0,1fr) 66px;
    gap:7px;
  }
}

@media(max-width:380px){
  .approved-shot-header h1{font-size:33px}
  .approved-header-controls{
    grid-template-columns:minmax(0,1fr) 105px;
  }
  .round-picker-menu{width:calc(100vw - 52px)}
  .brand-picker-date{font-size:8px}
}

/* ==========================================================================
   Interactive aerial maps / full-screen viewer
   ========================================================================== */
.interactive-map{
  position:relative;
  cursor:zoom-in;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
.interactive-map:focus-visible{
  outline:2px solid var(--brand-green);
  outline-offset:3px;
}
.map-expand-chip{
  position:absolute;
  z-index:8;
  top:9px;
  right:9px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.58);
  border-radius:50%;
  background:rgba(8,25,22,.68);
  color:#fff;
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:500;
  line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
.approved-marker[data-shot-detail],
.approved-approach-dot[data-shot-detail],
.approved-outlier-x[data-shot-detail],
.approved-offscreen-dot[data-shot-detail]{
  cursor:pointer;
  pointer-events:all;
  outline:none;
}
.approved-marker[data-shot-detail]:focus-visible,
.approved-approach-dot[data-shot-detail]:focus-visible,
.approved-outlier-x[data-shot-detail]:focus-visible,
.approved-offscreen-dot[data-shot-detail]:focus-visible{
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95));
}

body.map-viewer-open{
  overflow:hidden!important;
  overscroll-behavior:none;
  touch-action:none;
}
.map-viewer-overlay{
  position:fixed;
  z-index:99999;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:#07100E;
  color:#fff;
  opacity:0;
  transform:translateZ(0);
  transition:opacity 150ms ease;
}
.map-viewer-overlay.is-open{opacity:1}
.map-viewer-overlay.is-closing{opacity:0}
.map-viewer-topbar{
  position:relative;
  z-index:20;
  min-height:72px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:10px;
  padding:max(12px,env(safe-area-inset-top)) 14px 10px;
  background:linear-gradient(180deg,rgba(2,10,8,.76),rgba(2,10,8,0));
  pointer-events:none;
}
.map-viewer-topbar>*{pointer-events:auto}
.map-viewer-circle-button,
.map-viewer-fit-button{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(18,31,29,.72);
  color:#fff;
  font-size:24px;
  font-weight:400;
  line-height:1;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.map-viewer-fit-button{
  border-radius:21px;
  font-size:11px;
  font-weight:650;
}
.map-viewer-title{
  min-width:0;
  text-align:center;
}
.map-viewer-title strong{
  display:block;
  overflow:hidden;
  color:#fff;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.map-viewer-title span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.62);
  font-size:8px;
  font-weight:500;
  letter-spacing:.01em;
}
.map-viewer-stage{
  position:relative;
  min-height:0;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  overscroll-behavior:none;
}
.map-viewer-centre{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:12px 14px calc(86px + env(safe-area-inset-bottom));
  pointer-events:none;
}
.map-viewer-transform{
  position:relative;
  width:min(94vw,1040px);
  max-width:none;
  transform-origin:center center;
  will-change:transform;
  pointer-events:auto;
}
.map-viewer-clone{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  cursor:grab!important;
  border-radius:16px!important;
  box-shadow:0 16px 70px rgba(0,0,0,.26);
}
.map-viewer-overlay.is-zoomed .map-viewer-clone{cursor:grabbing!important}
.map-viewer-clone.approved-driving-viz{
  width:min(86vw,760px)!important;
  max-height:78dvh;
}
.map-viewer-clone.approved-approach-viz{
  width:min(94vw,980px)!important;
  max-height:78dvh;
}
.map-viewer-clone img{
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.map-viewer-clone svg{
  pointer-events:auto;
}
.map-viewer-controls{
  position:absolute;
  z-index:22;
  left:50%;
  bottom:max(16px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:repeat(3,44px);
  gap:7px;
  transform:translateX(-50%);
  padding:5px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(14,31,27,.76);
  box-shadow:0 8px 34px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.map-viewer-controls button{
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:21px;
  font-weight:450;
}
.map-viewer-controls button:active,
.map-viewer-circle-button:active,
.map-viewer-fit-button:active{
  background:rgba(255,255,255,.13);
}
.map-shot-popover{
  position:absolute;
  z-index:24;
  left:16px;
  bottom:max(82px,calc(70px + env(safe-area-inset-bottom)));
  width:min(330px,calc(100vw - 32px));
  padding:13px 14px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(14,30,27,.88);
  color:#fff;
  box-shadow:0 16px 50px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  touch-action:auto;
  user-select:text;
}
.map-shot-popover[hidden]{display:none!important}
.map-shot-popover-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.map-shot-popover-head>span{
  color:rgba(255,255,255,.58);
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}
.map-shot-popover-head button{
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:18px;
}
.map-shot-popover-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 12px;
}
.map-shot-popover-grid>div{
  min-width:0;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.10);
}
.map-shot-popover-grid span,
.map-shot-popover-grid strong{
  display:block;
}
.map-shot-popover-grid span{
  color:rgba(255,255,255,.54);
  font-size:8px;
}
.map-shot-popover-grid strong{
  margin-top:2px;
  overflow:hidden;
  color:#fff;
  font-size:11px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Genuine TrackMan course thumbnails */
.round-thumb{
  background:#E5E7E1;
}
.round-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media(max-width:820px){
  .map-expand-chip{
    top:7px;
    right:7px;
    width:27px;
    height:27px;
    font-size:13px;
  }
  .map-viewer-topbar{
    min-height:66px;
    padding-left:12px;
    padding-right:12px;
  }
  .map-viewer-title span{font-size:7.5px}
  .map-viewer-centre{
    padding-left:10px;
    padding-right:10px;
  }
  .map-viewer-transform{
    width:96vw;
  }
  .map-viewer-clone.approved-driving-viz{
    width:min(90vw,720px)!important;
  }
  .map-viewer-clone.approved-approach-viz{
    width:96vw!important;
  }
  .map-shot-popover{
    left:12px;
    width:calc(100vw - 24px);
  }
}
@media(prefers-reduced-motion:reduce){
  .map-viewer-overlay{transition:none}
}

/* Marker zoom fidelity + gesture performance */
.map-viewer-clone .approved-marker,
.map-viewer-clone .approved-approach-dot,
.map-viewer-clone .approved-outlier-x,
.map-viewer-clone .approved-offscreen-dot{
  vector-effect:none!important;
  transform-box:fill-box;
}
.map-viewer-transform{
  contain:paint;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.map-viewer-overlay.is-interacting .map-viewer-topbar,
.map-viewer-overlay.is-interacting .map-viewer-controls{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Density-aware shot-map readability */
.dense-map .approved-marker,
.dense-map .approved-approach-dot,
.dense-map .approved-offscreen-dot{
  opacity:.68;
}
.map-viewer-clone.dense-map .approved-marker,
.map-viewer-clone.dense-map .approved-approach-dot,
.map-viewer-clone.dense-map .approved-offscreen-dot{
  opacity:.62;
}
.map-viewer-overlay.is-detail-zoom .map-viewer-clone.dense-map .approved-marker,
.map-viewer-overlay.is-detail-zoom .map-viewer-clone.dense-map .approved-approach-dot,
.map-viewer-overlay.is-detail-zoom .map-viewer-clone.dense-map .approved-offscreen-dot{
  opacity:.96;
}
.map-viewer-overlay.is-interacting .approved-marker,
.map-viewer-overlay.is-interacting .approved-approach-dot,
.map-viewer-overlay.is-interacting .approved-outlier-x,
.map-viewer-overlay.is-interacting .approved-offscreen-dot{
  transition:none!important;
}
.approved-marker,
.approved-approach-dot,
.approved-outlier-x,
.approved-offscreen-dot{
  transition:opacity 140ms ease;
}

/* Overlapping-shot navigator */
.map-shot-stack-nav{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:8px;
  margin:-1px 0 10px;
  padding:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.045);
}
.map-shot-stack-nav button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:22px;
  line-height:1;
}
.map-shot-stack-nav span{
  color:rgba(255,255,255,.72);
  font-size:9px;
  font-weight:650;
  text-align:center;
}

/* Keep heavy analytical sections cheap until they approach the viewport. */
@supports (content-visibility:auto){
  .approved-secondary-detail,
  .recent-rounds-report,
  .category-trends-section,
  .practice-evidence-section,
  .practice-plan-section{
    content-visibility:auto;
    contain-intrinsic-size:auto 420px;
  }
}


/* Constant screen-size shots: inverse zoom around each marker's own centre. */
.map-viewer-clone [data-shot-detail]{
  transform-box:fill-box;
  transform-origin:center;
  transition:none!important;
}
.map-viewer-clone [data-shot-detail].is-selected{
  opacity:1!important;
  outline:2px solid #fff;
  outline-offset:3px;
}
.map-viewer-transform{contain:layout style}
.map-viewer-clone{box-shadow:none}
.map-viewer-overlay.is-zoomed .map-viewer-clone{cursor:grab!important}
.map-viewer-overlay.is-interacting .map-viewer-clone{cursor:grabbing!important}
.map-viewer-circle-button,.map-viewer-fit-button{width:44px;height:44px}
.map-viewer-fit-button{font-size:14px}
.map-viewer-title strong{font-size:16px;white-space:normal;line-height:1.25}
.map-viewer-title span{font-size:12px;line-height:1.4;color:#bfcfc9;margin-top:4px}
.map-viewer-controls{grid-template-columns:44px 64px 44px;background:#123d36;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.map-viewer-controls output{align-self:center;text-align:center;font:600 14px var(--font-ui);font-variant-numeric:tabular-nums}
.map-viewer-controls button:disabled{opacity:.35;cursor:default}
.map-viewer-overlay :focus-visible{outline:2px solid #b9e6d6;outline-offset:3px}
.map-shot-popover{max-height:55%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .map-shot-popover,.map-viewer-circle-button,.map-viewer-fit-button{background:#123d36;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* The fit box and rendered map must share their dimensions and centre. */
.map-viewer-clone.approved-driving-viz,.map-viewer-clone.approved-approach-viz{
  width:100%!important;max-height:none;
}
.map-viewer-clone svg{width:100%;height:100%}


/* Progress uses the same calibrated interactive approach map as Shot Analysis. */
.progress-key-insight>.approved-approach-viz{
  width:100%;
  margin:0;
  border-radius:14px;
}
.progress-key-insight>.approved-approach-viz>img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}
@media(max-width:820px){
  .progress-key-insight>.approved-approach-viz{border-radius:10px}
}
@media(max-width:380px){
  .progress-key-insight>.approved-approach-viz{display:block}
}


/* Contextual functional maps on Home and Progress. */
.home-aerial-layout>.approved-driving-viz,
.progress-key-insight>.approved-viz,
.home-aerial-layout>.approved-map-with-key>.approved-driving-viz,
.progress-key-insight>.approved-map-with-key>.approved-viz{
  width:100%;
  min-width:0;
  margin:0;
  border-radius:14px;
}
.home-aerial-layout>.approved-driving-viz>img,
.progress-key-insight>.approved-viz>img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}
@media(max-width:820px){
  .home-aerial-layout>.approved-driving-viz,
  .progress-key-insight>.approved-viz{border-radius:10px}
}
@media(max-width:380px){
  .progress-key-insight>.approved-viz{display:block}
}


/* Shared shot-distance band control */
.distance-band-control{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  gap:8px;
  cursor:pointer;
}
.distance-band-control select{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:600;
  line-height:1;
  padding:0 18px 0 0;
  min-height:42px;
  cursor:pointer;
  outline:none;
}
.distance-band-control > span:last-child{
  pointer-events:none;
  position:absolute;
  right:13px;
}
.distance-band-control:focus-within{
  outline:2px solid #174d3b;
  outline-offset:2px;
}
@media (max-width:640px){
  .distance-band-control,
  .distance-band-control select{width:100%}
  .approved-filter-pair{width:min(100%,220px)}
}


/* Dynamic, club-scale distance grid for spatial shot maps */
.approved-distance-grid line{
  stroke:rgba(255,255,255,.66);
  stroke-width:1;
  stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke;
}
.approved-distance-grid text{
  fill:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  paint-order:stroke;
  stroke:rgba(7,35,27,.78);
  stroke-width:3px;
  stroke-linejoin:round;
}


/* Keep branded pickers above tappable hero/card layers on touch devices. */
.brand-picker[open]{z-index:2147483000}
.brand-picker[open] .brand-picker-menu{
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
.brand-picker[open] .brand-picker-menu button{
  position:relative;
  z-index:1;
  pointer-events:auto;
  touch-action:manipulation;
  cursor:pointer;
}


/* Document-level benchmark picker: avoids nested-card touch interception on iOS. */
.brand-picker>.brand-picker-trigger{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border:1px solid var(--brand-green);
  border-radius:999px;
  background:#FAF9F5;
  color:var(--text-primary);
  font-family:var(--font-ui);
  cursor:pointer;
  list-style:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.brand-picker>.brand-picker-trigger:focus-visible{
  outline:2px solid rgba(18,61,54,.28);
  outline-offset:2px;
}
.brand-picker>.brand-picker-trigger strong{
  min-width:0;
  overflow:hidden;
  color:var(--text-primary);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:650;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.brand-picker>.brand-picker-trigger[aria-expanded="true"] .brand-picker-chevron{transform:rotate(180deg)}
.brand-picker-portal-layer{
  position:fixed;
  inset:0;
  z-index:2147483646;
  pointer-events:auto;
}
.brand-picker-portal-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(3,28,23,.08);
  -webkit-tap-highlight-color:transparent;
}
.brand-picker-portal-menu{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  z-index:1;
  pointer-events:auto;
  touch-action:manipulation;
}
.brand-picker-portal-menu button{
  position:relative;
  z-index:2;
  pointer-events:auto;
  touch-action:manipulation;
  cursor:pointer;
}
.benchmark-picker-qa{
  min-height:100vh;
  padding:24px;
  background:#F7F8F5;
}
.benchmark-picker-qa>h1{margin:0;color:var(--brand-green);font:700 28px/1.1 var(--font-ui)}
.benchmark-picker-qa>p{margin:8px 0 20px;color:#5F6D68;font:500 14px/1.4 var(--font-ui)}
.benchmark-picker-qa-grid{display:grid;gap:18px}
.benchmark-picker-qa .evolution-hero{min-height:180px}