/* Fonts are loaded from <link> in each page head, not imported here: a CSS
   @import cannot start until this file has been fetched and parsed, which put
   three serial round trips in front of first paint. Only DM Sans 400 is
   requested — it was the sole weight in use across the whole site. */
:root{--navy:#081522;--navy2:#102434;--ink:#132432;--muted:#6e7e8a;--line:#dfe6e8;--soft:#f3f6f5;--white:#fff;--green:#b9f54a;--green2:#84cb1b;--red:#e95d5d;--amber:#eca72c;--radius:18px}
*{box-sizing:border-box} body{margin:0;background:var(--soft);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:16px}.app{min-height:100vh}.topbar{height:76px;background:var(--navy);display:flex;align-items:center;padding:0 38px;color:white;border-bottom:1px solid rgba(255,255,255,.1)}
.brand{display:flex;align-items:center;gap:12px;font:800 21px Manrope}.mark{width:31px;height:31px;border:2px solid var(--green);border-radius:50%;position:relative}.mark:before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--green);left:10px;top:10px}.mark:after{content:"";position:absolute;width:17px;height:2px;background:var(--green);transform:rotate(-43deg);right:-9px;top:2px}
.nav{display:flex;gap:7px;margin-left:54px}.nav button{border:0;color:#aebcc5;background:transparent;font:600 14px DM Sans;padding:12px 16px;border-radius:9px;cursor:pointer}.nav button.active{color:white;background:rgba(255,255,255,.1)}.profile{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:14px}.avatar{width:35px;height:35px;background:#274257;border-radius:50%;display:grid;place-items:center;color:var(--green);font-weight:700}
.page{max-width:1450px;margin:0 auto;padding:32px 38px 50px}.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.eyebrow{font:700 12px Manrope;letter-spacing:.12em;text-transform:uppercase;color:#628078;margin-bottom:7px}.heading h1{font:700 30px Manrope;margin:0;letter-spacing:-.03em}.heading p{color:var(--muted);margin:7px 0 0}.round-switch{display:flex;gap:7px;background:white;border:1px solid var(--line);border-radius:12px;padding:5px}.round-switch button{border:0;background:transparent;padding:10px 15px;border-radius:8px;font:600 14px DM Sans;color:var(--muted);cursor:pointer}.round-switch button.active{background:var(--navy);color:white}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:22px}.card{background:white;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 12px rgba(15,35,49,.035)}.entry{overflow:hidden}.coursebar{display:grid;grid-template-columns:1.4fr .65fr .65fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.field{background:white;padding:18px 20px}.label{font:700 11px Manrope;letter-spacing:.09em;text-transform:uppercase;color:#73838d;margin-bottom:6px}.value{font-weight:600;display:flex;align-items:center;justify-content:space-between}.chev{color:#94a0a6}
.holes{display:flex;align-items:center;padding:15px 18px;gap:8px;border-bottom:1px solid var(--line);overflow:auto}.holes span{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;color:#7a898f;cursor:pointer}.holes span.current{background:var(--navy);color:var(--green)}.holes span.done{background:#e5f3cf;color:#4b7911}.holes .next{margin-left:auto;flex:0 0 auto;width:auto;padding:0 12px;border-radius:8px;background:#f1f4f3;color:var(--ink);font-size:13px}.shot-area{padding:23px 24px 24px}.shot-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.shot-title{display:flex;align-items:baseline;gap:10px}.shot-title h2{font:700 21px Manrope;margin:0}.shot-title span{color:var(--muted);font-size:14px}.par{font:700 12px Manrope;background:#edf1f0;padding:8px 11px;border-radius:8px}.shot-table{width:100%;border-collapse:collapse}.shot-table th{text-align:left;font:700 11px Manrope;letter-spacing:.07em;color:#7a898f;text-transform:uppercase;padding:0 8px 10px}.shot-table td{padding:8px}.shot-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:white;font:700 13px Manrope}.input{height:47px;border:1px solid #d5dddf;border-radius:10px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;font-weight:600;min-width:104px}.input .unit{color:#89979e;font-weight:500}.lie{gap:10px;justify-content:flex-start}.lie-dot{width:10px;height:10px;border-radius:50%;background:#55a54b}.lie.rough .lie-dot{background:#24714a}.lie.green .lie-dot{background:#83c932}.shot-gain{font:700 14px Manrope;color:#4c8a16}.add-shot{width:100%;border:1px dashed #b8c5c7;background:#f8faf9;border-radius:11px;padding:14px;color:#5d7078;font:600 14px DM Sans;margin-top:9px;cursor:pointer}.actions{display:flex;align-items:center;justify-content:space-between;margin-top:21px}.link-btn{border:0;background:transparent;color:#718087;font:600 14px DM Sans;cursor:pointer}.primary{border:0;background:var(--navy);color:white;padding:14px 21px;border-radius:11px;font:700 14px DM Sans;cursor:pointer}.primary span{color:var(--green);margin-left:14px}
.summary{padding:22px}.summary-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}.summary-head h3{font:700 17px Manrope;margin:0}.pill{font:700 11px Manrope;background:#e8f6d5;color:#49770c;border-radius:99px;padding:7px 10px}.total{padding:23px 0 21px}.total-label{color:var(--muted);font-size:13px}.total-num{font:800 46px Manrope;letter-spacing:-.055em;margin:2px 0}.total-num small{font:700 18px Manrope;color:#779087}.benchmark{height:7px;background:#ebefee;border-radius:99px;position:relative;margin:16px 0 7px;overflow:hidden}.benchmark i{position:absolute;left:50%;top:0;width:31%;height:100%;background:var(--green2);border-radius:99px}.scale{display:flex;justify-content:space-between;color:#859298;font-size:11px}.breakdown{border-top:1px solid var(--line);padding-top:17px}.row{display:grid;grid-template-columns:1fr 53px;gap:12px;align-items:center;padding:11px 0}.row-main{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:9px;font-size:13px}.bar{height:7px;background:#edf0ef;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--green2);border-radius:99px}.bar i.neg{background:var(--red)}.score{text-align:right;font:700 14px Manrope}.score.pos{color:#4d8917}.score.neg{color:var(--red)}.insight{margin-top:16px;background:var(--navy);color:white;border-radius:13px;padding:16px}.insight .label{color:var(--green)}.insight p{font-size:13px;line-height:1.5;color:#c3cdd3;margin:7px 0 0}.footer-note{text-align:center;color:#8b989d;font-size:12px;margin-top:18px}
.results{display:none}.results.show{display:block}.calculator.hide{display:none}.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.hero-result{grid-column:1/-1;background:var(--navy);color:white;padding:30px;display:grid;grid-template-columns:270px 1fr;gap:36px}.big-sg{font:800 64px Manrope;letter-spacing:-.06em}.big-sg small{font-size:20px;color:#9fb0ba}.hero-result p{color:#bec9cf;line-height:1.55}.chart-card{padding:24px}.chart-card h3{margin:0;font:700 18px Manrope}.chart-card>p{margin:5px 0 24px;color:var(--muted);font-size:14px}.big-bars .row{grid-template-columns:1fr 55px}.big-bars .row-main{grid-template-columns:110px 1fr}.big-bars .bar{height:12px}.shots-list{margin-top:13px}.shot-item{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.shot-icon{height:38px;width:38px;border-radius:10px;background:#eef3f0;display:grid;place-items:center;font-weight:700}.shot-item b{display:block;font-size:14px}.shot-item span{font-size:12px;color:var(--muted)}.gain{font:700 14px Manrope;color:#4c8a16}.gain.bad{color:var(--red)}
@media(max-width:980px){.nav{display:none}.page{padding:24px 18px}.layout,.results-grid{grid-template-columns:1fr}.summary{order:-1}.hero-result{grid-template-columns:1fr}.coursebar{grid-template-columns:1fr}.coursebar .field:not(:first-child){display:none}.heading{align-items:start;gap:20px}.shot-table th:nth-child(4),.shot-table td:nth-child(4){display:none}}
@media(max-width:620px){.topbar{padding:0 18px;height:68px}.profile span{display:none}.heading{display:block}.round-switch{margin-top:18px;width:max-content}.holes span:nth-child(n+7):not(.next){display:none}.shot-area{padding:20px 13px}.shot-table th:nth-child(3),.shot-table td:nth-child(3){display:none}.input{min-width:0}.total-num{font-size:40px}.hero-result{padding:23px}.big-sg{font-size:52px}}
/* Terminal data-workspace direction */
:root{--navy:#05090c;--navy2:#0a1116;--ink:#dbe7eb;--muted:#78909a;--line:#22313a;--soft:#080e12;--white:#0d151a;--green:#b7ff3c;--green2:#9de52c;--red:#ff5d64;--amber:#ffbd3f;--radius:3px}
body{background:#080e12;color:#dbe7eb;font-family:"DM Sans",sans-serif;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:32px 32px}
.topbar{height:58px;padding:0 24px;background:#030608;border-color:#1c2a31}.brand{font-family:monospace;font-size:17px;letter-spacing:.1em}.mark{width:22px;height:22px;border-radius:2px}.mark:before{width:5px;height:5px;left:7px;top:7px}.mark:after{width:12px;right:-7px;top:1px}.nav{margin-left:38px}.nav button{border-radius:2px;padding:9px 14px;font-family:monospace;text-transform:uppercase;letter-spacing:.05em;font-size:12px}.nav button.active{background:#142028;color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}.avatar{border-radius:2px;width:30px;height:30px;background:#142028;font-family:monospace}.profile{font-family:monospace;color:#82959e;font-size:12px}
.ticker{height:34px;background:#0b1318;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;padding:0 24px;overflow:hidden;font:600 11px monospace;color:#728891;letter-spacing:.04em;white-space:nowrap}.ticker b{color:#c4d1d6;font-weight:600}.ticker .up{color:var(--green)}.ticker .live{color:#070b0d;background:var(--green);padding:3px 6px}
.page{max-width:1600px;padding:23px 25px 38px}.heading{margin-bottom:17px;align-items:center}.eyebrow,.label{font-family:monospace;color:var(--green);letter-spacing:.12em}.heading h1{font:700 23px monospace;letter-spacing:-.04em;text-transform:uppercase}.heading p{font-family:monospace;font-size:12px;margin-top:5px}.round-switch{background:#0b1318;border-radius:2px;padding:3px}.round-switch button{border-radius:1px;padding:8px 12px;font-family:monospace;text-transform:uppercase;font-size:11px}.round-switch button.active{background:var(--green);color:#060a0c}
.layout{grid-template-columns:minmax(0,1fr) 370px;gap:10px}.card{background:#0c1419;border-color:#263740;border-radius:3px;box-shadow:none}.entry{border-top:2px solid #4f6873}.coursebar{background:#263740;border-color:#263740}.field{background:#0c1419;padding:13px 16px}.label{font-size:10px}.value{font-family:monospace;font-size:13px}.holes{padding:9px 14px;gap:4px;background:#091015}.holes span{border-radius:2px;width:34px;height:30px;flex-basis:34px;font-family:monospace;font-size:12px}.holes span.done{background:#172719;color:#9fd969;border:1px solid #365328}.holes span.current{background:var(--green);color:#070b0d}.holes .next{background:#142028;border:1px solid #2a3d46;border-radius:2px}.shot-area{padding:17px 18px}.shot-head{margin-bottom:13px}.shot-title h2{font:700 16px monospace;text-transform:uppercase}.shot-title span{font-family:monospace;font-size:12px}.par{font-family:monospace;border-radius:2px;background:#172128;color:#acc0c8;padding:6px 9px}.shot-table th{font-family:monospace;color:#718892;border-bottom:1px solid var(--line);padding:0 7px 8px}.shot-table td{padding:6px 7px;border-bottom:1px solid #17242b}.shot-num{border-radius:2px;width:28px;height:28px;background:#18262e;color:var(--green);font-family:monospace}.input{height:39px;border-radius:2px;background:#081015;border-color:#2b3d46;font-family:monospace;font-size:12px}.shot-gain,.score{font-family:monospace}.add-shot{border-radius:2px;background:#0a1217;border-color:#354a54;color:#8398a1;font-family:monospace;text-transform:uppercase;padding:11px}.actions{margin-top:14px}.link-btn{font-family:monospace;color:#82959e}.primary{border-radius:2px;background:var(--green);color:#070b0d;font-family:monospace;text-transform:uppercase;padding:11px 16px}.primary span{color:#070b0d}.summary{padding:17px;border-top:2px solid var(--green)}.summary-head{padding-bottom:13px}.summary-head h3,.chart-card h3{font-family:monospace;text-transform:uppercase;font-size:14px}.pill{border-radius:2px;background:#172719;color:var(--green);font-family:monospace}.total{padding:17px 0}.total-label{font-family:monospace;text-transform:uppercase;font-size:10px;letter-spacing:.08em}.total-num{font-family:monospace;font-size:42px;letter-spacing:-.08em;color:var(--green)}.total-num small{font-family:monospace;color:#78909a;font-size:12px;text-transform:uppercase}.benchmark,.bar{border-radius:0;background:#1a272e}.benchmark i,.bar i{border-radius:0}.scale{font-family:monospace}.row{padding:8px 0}.row-main{font-family:monospace;font-size:11px}.insight{margin-top:11px;background:#091015;border:1px solid #2a3b44;border-left:3px solid var(--green);border-radius:2px;padding:13px}.insight p{font-family:monospace;font-size:11px}.footer-note{font-family:monospace;font-size:10px}.hero-result{background:#0b1318;border-top:2px solid var(--green);padding:23px}.big-sg{font-family:monospace;color:var(--green)}.hero-result h2,.hero-result p,.chart-card>p,.shot-item{font-family:monospace}.chart-card{padding:18px}.shot-icon{border-radius:2px;background:#17242b;color:var(--green);font-family:monospace}.shot-item{border-color:#21313a}.gain{font-family:monospace}
@media(max-width:620px){.ticker{padding:0 18px}.topbar{height:54px}.page{padding:17px 12px}.heading h1{font-size:19px}.summary{order:initial}.layout{gap:9px}}
/* Softer slate + coastal blue palette */
:root{--navy:#111820;--navy2:#18232c;--ink:#e1e5e4;--muted:#91a0a8;--line:#33424b;--soft:#121920;--white:#182128;--green:#78b8c4;--green2:#65aab7;--red:#d9797d;--amber:#d7ae68}
body{background-color:#121920;color:var(--ink);background-image:linear-gradient(rgba(178,199,207,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(178,199,207,.018) 1px,transparent 1px);background-size:32px 32px}
.topbar{background:#0e151b;border-color:#2b3942}.ticker{background:#151f27;border-color:#31404a;color:#8798a0}.ticker b{color:#d6dcdd}.ticker .live{background:#78b8c4;color:#10171c}.card,.field{background:#182128;border-color:#34444e}.entry{border-top-color:#647985}.coursebar{background:#34444e;border-color:#34444e}.holes{background:#151d24}.holes span.done{background:#24353a;color:#9fc8cf;border-color:#3b5960}.holes span.current,.round-switch button.active,.primary{background:#78b8c4;color:#11181d}.holes .next,.input,.add-shot{background:#141c22;border-color:#3b4d57}.shot-table td{border-color:#26343c}.shot-num,.shot-icon{background:#26343d;color:#a4ccd3}.summary{border-top-color:#78b8c4}.pill{background:#24353a;color:#a4ccd3}.total-num,.eyebrow,.label,.score.pos,.gain{color:#83bdc8}.benchmark,.bar{background:#2a3740}.insight{background:#151d24;border-color:#34454e;border-left-color:#78b8c4}.hero-result{background:#151e25;border-top-color:#78b8c4}.big-sg{color:#83bdc8}.score.neg,.gain.bad{color:#d9797d}.bar i.neg{background:#d9797d}.nav button.active{background:#213039;color:#9fcbd2;box-shadow:inset 0 -2px 0 #78b8c4}.avatar{background:#25343d;color:#9fcbd2}

/* ══════════════════════════════════════════════════════════════════════════
   App additions — everything above this line is the mockup verbatim.
   These rules only dress real form controls to look like the mock's static
   fields, add states the mock had no need for (empty, focus, toast), and fix
   the two places where copying the mock exactly would break the app on a
   phone. Nothing here changes the resting appearance of the design.
   ══════════════════════════════════════════════════════════════════════════ */

/* Real inputs and selects wearing the mock's static field styling */
.bare{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;margin:0;width:100%;min-width:0;outline:none}
select.bare{cursor:pointer}
input.bare::placeholder{color:#6d818b}
select.bare option{background:#182128;color:var(--ink)}
.input .bare{flex:1}
.input:focus-within,.value:focus-within,.par:focus-within{outline:1px solid #78b8c4;outline-offset:1px}
.shot-title input.bare{width:5.5ch;text-align:right}
input[type=number].bare::-webkit-outer-spin-button,input[type=number].bare::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number].bare{-moz-appearance:textfield}
.par .bare{width:auto}
.value{gap:8px}

/* Hole chips are spans in the mock; keep them keyboard reachable */
.holes span:not(.next):focus-visible,.holes .next:focus-visible{outline:1px solid #78b8c4;outline-offset:1px}

/* States the static mock never had to show */
.shot-empty{border:1px dashed #354a54;background:#0a1217;border-radius:2px;padding:22px 16px;text-align:center;margin-top:4px}
.shot-empty p{margin:0;font-family:monospace;font-size:12px;color:var(--muted)}
.shot-empty p+p{margin-top:6px}
.shot-empty b{color:var(--ink);font-weight:500}
.shot-gain.neg,.shot-gain.pending{color:var(--red)}
.shot-gain.pending{color:#6d818b}
.shot-table tr:last-child td{border-bottom:0}

/* Nav views. The mock ships .calculator/.results; How It Works and FAQ
   are the same pattern for the two nav items it added. */
.info{display:none}
.info.show{display:block}
.info h2{font:700 16px monospace;text-transform:uppercase;margin:0 0 10px}
.info .card{padding:18px;margin-bottom:10px}
.info p{color:var(--muted);font-size:13px;line-height:1.65;margin:0}
.info p+p{margin-top:9px}
.info-num{font-family:monospace;font-size:11px;color:var(--green);letter-spacing:.12em}
.info .q{font-family:monospace;font-size:13px;text-transform:uppercase;margin:0 0 8px;color:var(--ink)}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--green);color:#11181d;font:600 11px monospace;letter-spacing:.06em;text-transform:uppercase;padding:11px 16px;border-radius:2px;z-index:60}

@media(max-width:980px){.info-grid{grid-template-columns:1fr}}

/* Two functional overrides of the mock's mobile rules:
   the mock hides the Distance column and holes 7-9, which leaves the
   calculator unable to take a distance or reach the rest of the nine. */
@media(max-width:620px){
  .shot-table th:nth-child(3),.shot-table td:nth-child(3){display:table-cell}
  .holes span:nth-child(n+7):not(.next){display:grid}
  .holes{gap:4px}
  .shot-table th,.shot-table td{padding:6px 4px}
  .shot-num{width:24px;height:24px}
  .actions{flex-direction:column-reverse;align-items:stretch;gap:8px}
  .actions button{width:100%}
}

/* The mock's terminal layer re-declares .layout *after* its own 980px media
   query, so the single-column rule never won — under 980px the entry card
   collapsed to a couple of pixels beside the 370px rail. The same query also
   hides every coursebar field but Course, which leaves the benchmark
   unreachable on a phone. Both restated here. */
@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .coursebar .field:not(:first-child){display:block}
}

/* Phone: reclaim the chevron's width so the lie label isn't clipped mid-word. */
@media(max-width:620px){
  .input.lie{gap:6px;min-width:100px}
  .input.lie .chev{display:none}
}

/* Bars diverge from a centre zero line: gains grow right, losses grow left,
   both scaled against the largest magnitude on screen. The mock grew every
   bar from the left edge, which made a loss and a gain of equal size look
   identical apart from colour. */
.bar{position:relative}
.bar::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#4a5d68;z-index:1}
.bar i{position:absolute;top:0;height:100%;z-index:2}

/* ── Analytics cards ──────────────────────────────────────────────────── */

.wide{grid-column:1/-1}
.none{font-family:monospace;font-size:12px;color:var(--muted);margin:0;padding:10px 0}

/* Bar rows carrying a second line of detail under the label */
.big-bars .row-main{grid-template-columns:126px 1fr}
.cat{display:grid;gap:3px;min-width:0}
.cat b{font-weight:500}
.cat em{font-style:normal;font-size:9.5px;color:#788d97;white-space:nowrap}

/* Traditional stat tiles, built from the coursebar's field language */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;background:#263740;border:1px solid #263740}
.stat{background:#182128;padding:13px 15px}
.stat-num{font-family:monospace;font-size:20px;color:var(--ink);margin-top:5px;letter-spacing:-.03em}
.stat-num em{font-style:normal;font-size:12px;color:#788d97}
.stat-sub{font-family:monospace;font-size:10px;color:#788d97;margin-top:3px;letter-spacing:.04em;text-transform:uppercase}

/* Cumulative line */
.spark{margin-bottom:14px;background:#141c22;border:1px solid #263740}
.spark svg{display:block;width:100%;height:110px}

/* Hole-by-hole table */
.hole-table{display:grid;gap:1px;background:#263740;border:1px solid #263740}
.ht-row{display:grid;grid-template-columns:52px 44px 52px repeat(5,minmax(0,1fr)) 80px;background:#182128;padding:8px 12px;align-items:center;font-family:monospace;font-size:12px}
.ht-row.head{background:#141c22;color:#788d97;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.ht-row .pos{color:#83bdc8}
.ht-row .neg{color:var(--red)}
.ht-row .zero{color:#5f727c}
.ht-row > *:not(:first-child):not(:nth-child(2)){text-align:right}

/* Penalty toggle — hidden until the row is hovered, so the resting design
   is unchanged, and pinned visible once a penalty is actually set. */

@media(max-width:980px){
  .ht-row{grid-template-columns:38px 32px 40px repeat(5,minmax(0,1fr)) 58px;font-size:10px;padding:7px 6px;gap:4px}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .big-bars .row-main{grid-template-columns:1fr;gap:8px}
  .cat{grid-auto-flow:column;justify-content:space-between;align-items:baseline;gap:10px}
}

/* Nine columns will not shrink into a phone legibly, so the hole table keeps
   readable column widths and scrolls sideways instead. */
@media(max-width:620px){
  .hole-table{display:block;overflow-x:auto;background:#182128}
  .ht-row{min-width:600px;border-bottom:1px solid #263740;font-size:11px;padding:8px 10px}
  .ht-row:last-child{border-bottom:0}
}

/* ── Hole strip ───────────────────────────────────────────────────────────
   All 18 on one line rather than nine behind a "Back nine" toggle. Chips
   share the width evenly (capped, so they stay chip-shaped on wide screens)
   and a hairline marks the turn, which is where a golfer's round divides
   anyway. Below 620px they revert to fixed width and the strip scrolls. */
.holes{gap:5px;justify-content:space-between}
.holes span{flex:1 1 0;width:auto;min-width:30px;max-width:48px}
.holes .turn{flex:0 0 1px;align-self:stretch;background:#33454f;margin:0 7px}

@media(max-width:620px){
  .holes span:not(.next){flex:0 0 34px;width:34px;min-width:34px;max-width:none}
  .holes .turn{margin:0 5px}
}

/* ── Putting only ─────────────────────────────────────────────────────────
   The mode swaps what the page measures, so a few things move: the distance
   breakdown becomes the headline card, and the hole table loses the four
   category columns it has nothing to put in. */
body[data-scope="putting"] .hero-result{order:-2}
body[data-scope="putting"] #cardPutting{order:-1}
.ht-row.putt{grid-template-columns:60px 64px minmax(0,1fr) minmax(0,1fr) 92px}

@media(max-width:980px){
  .ht-row.putt{grid-template-columns:44px 48px minmax(0,1fr) minmax(0,1fr) 68px}
}
@media(max-width:620px){
  .ht-row.putt{min-width:0}
}

@media(max-width:620px){
  /* The chevron eats the width the select label needs; the control still
     opens on tap without it. */
  .input .chev{display:none}
  /* Keep the shot-number column's heading off the next one. */
  .shot-table th:first-child,.shot-table td:first-child{padding-right:10px}
}

/* ══════════════════════════════════════════════════════════════════════════
   PALETTE LAYER
   Every colour in the design routed through one set of tokens, so a scheme is
   a block of variables rather than a rewrite. The :root values below are the
   mockup's coastal layer exactly, so the default rendering is unchanged — the
   rules here restate the same colours, they do not alter them.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* the mockup's own variables, re-pointed at the tokens */
  --navy:#111820;--navy2:#18232c;--ink:#e1e5e4;--muted:#91a0a8;--line:#34444e;
  --soft:#121920;--white:#182128;--green:#78b8c4;--green2:#65aab7;--red:#d9797d;--amber:#d7ae68;

  --p-bg:#121920;            --p-grid:rgba(178,199,207,.018);
  --p-top:#0e151b;           --p-top-line:#2b3942;
  --p-top-ink:#d6dcdd;       --p-top-muted:#8798a0;
  --p-ticker:#151f27;        --p-ticker-line:#31404a;
  --p-panel:#182128;         --p-panel-line:#34444e;
  --p-inset:#141c22;         --p-inset-line:#3b4d57;
  --p-well:#151d24;          --p-feature:#151e25;
  --p-feature-ink:#e1e5e4;   --p-feature-muted:#93a4ad;
  --p-chip:#26343d;          --p-chip-ink:#a4ccd3;
  --p-nav:#213039;           --p-nav-ink:#9fcbd2;
  --p-rule:#26343c;          --p-rule-2:#263740;
  --p-track:#2a3740;         --p-mid:#4a5d68;
  --p-ink:#e1e5e4;           --p-muted:#91a0a8;
  --p-faint:#788d97;         --p-faint-2:#6d818b;
  --p-accent:#78b8c4;        --p-accent-ink:#11181d;
  --p-accent-soft:#83bdc8;   --p-accent-dim:#24353a;
  --p-accent-dim-line:#3b5960; --p-done-ink:#9fc8cf;
  --p-entry-top:#647985;     --p-turn:#33454f;
  --p-red:#d9797d;           --p-red-dim:#241a1c;  --p-red-line:#6b3a3d;
  --p-zero:#5f727c;          --p-quiet:#5d7078;
  --p-dashed:#354a54;        --p-empty:#0a1217;
}

[data-palette="terminal"]{
  --navy:#05090c;--ink:#dbe7eb;--muted:#78909a;--line:#263740;--soft:#080e12;
  --white:#0c1419;--green:#b7ff3c;--green2:#9de52c;--red:#ff5d64;--amber:#ffbd3f;
  --p-bg:#080e12;            --p-grid:rgba(255,255,255,.012);
  --p-top:#030608;           --p-top-line:#1c2a31;
  --p-top-ink:#c4d1d6;       --p-top-muted:#728891;
  --p-ticker:#0b1318;        --p-ticker-line:#22313a;
  --p-panel:#0c1419;         --p-panel-line:#263740;
  --p-inset:#081015;         --p-inset-line:#2b3d46;
  --p-well:#091015;          --p-feature:#0b1318;
  --p-feature-ink:#dbe7eb;   --p-feature-muted:#7e949e;
  --p-chip:#18262e;          --p-chip-ink:#b7ff3c;
  --p-nav:#142028;           --p-nav-ink:#b7ff3c;
  --p-rule:#17242b;          --p-rule-2:#263740;
  --p-track:#1a272e;         --p-mid:#3d525c;
  --p-ink:#dbe7eb;           --p-muted:#78909a;
  --p-faint:#718892;         --p-faint-2:#657c86;
  --p-accent:#b7ff3c;        --p-accent-ink:#070b0d;
  --p-accent-soft:#b7ff3c;   --p-accent-dim:#172719;
  --p-accent-dim-line:#365328; --p-done-ink:#9fd969;
  --p-entry-top:#4f6873;     --p-turn:#2a3d46;
  --p-red:#ff5d64;           --p-red-dim:#25151a;  --p-red-line:#6d3238;
  --p-zero:#546b74;          --p-quiet:#5b727c;
  --p-dashed:#354a54;        --p-empty:#0a1217;
}

[data-palette="fairway"]{
  --navy:#101614;--ink:#e3e9e3;--muted:#8fa397;--line:#2e3d34;--soft:#101614;
  --white:#172019;--green:#74c47e;--green2:#5fae6b;--red:#d9797d;--amber:#d9b168;
  --p-bg:#101614;            --p-grid:rgba(190,215,200,.02);
  --p-top:#0b110f;           --p-top-line:#24312b;
  --p-top-ink:#d7e0d8;       --p-top-muted:#879b8e;
  --p-ticker:#131d18;        --p-ticker-line:#2a3830;
  --p-panel:#172019;         --p-panel-line:#2e3d34;
  --p-inset:#121a16;         --p-inset-line:#35473c;
  --p-well:#131c17;          --p-feature:#141e18;
  --p-feature-ink:#e3e9e3;   --p-feature-muted:#9ab0a1;
  --p-chip:#24322a;          --p-chip-ink:#a8d5ae;
  --p-nav:#1e2b23;           --p-nav-ink:#a8d5ae;
  --p-rule:#23302a;          --p-rule-2:#24332c;
  --p-track:#26332c;         --p-mid:#45594c;
  --p-ink:#e3e9e3;           --p-muted:#8fa397;
  --p-faint:#7d9384;         --p-faint-2:#6f8577;
  --p-accent:#74c47e;        --p-accent-ink:#0e1611;
  --p-accent-soft:#8ed296;   --p-accent-dim:#1e3324;
  --p-accent-dim-line:#35543c; --p-done-ink:#9ccfa3;
  --p-entry-top:#5d7a65;     --p-turn:#2f4137;
  --p-red:#d9797d;           --p-red-dim:#241a1c;  --p-red-line:#6b3a3d;
  --p-zero:#5c7265;          --p-quiet:#62796a;
  --p-dashed:#35473c;        --p-empty:#0d1512;
}

[data-palette="clay"]{
  --navy:#17130f;--ink:#ece5dc;--muted:#a4968a;--line:#3b3129;--soft:#17130f;
  --white:#1f1a15;--green:#e0a458;--green2:#c9904a;--red:#e0736b;--amber:#e0a458;
  --p-bg:#17130f;            --p-grid:rgba(220,200,180,.022);
  --p-top:#100c09;           --p-top-line:#322a22;
  --p-top-ink:#e2d9cd;       --p-top-muted:#9c8d80;
  --p-ticker:#1d1712;        --p-ticker-line:#3a2f26;
  --p-panel:#1f1a15;         --p-panel-line:#3b3129;
  --p-inset:#191410;         --p-inset-line:#423629;
  --p-well:#1b1611;          --p-feature:#1c1712;
  --p-feature-ink:#ece5dc;   --p-feature-muted:#b0a294;
  --p-chip:#302720;          --p-chip-ink:#dcc09a;
  --p-nav:#2a221b;           --p-nav-ink:#dcc09a;
  --p-rule:#2e251e;          --p-rule-2:#332a22;
  --p-track:#302720;         --p-mid:#5b4b3b;
  --p-ink:#ece5dc;           --p-muted:#a4968a;
  --p-faint:#948678;         --p-faint-2:#877868;
  --p-accent:#e0a458;        --p-accent-ink:#17120c;
  --p-accent-soft:#eab979;   --p-accent-dim:#33281c;
  --p-accent-dim-line:#56432c; --p-done-ink:#e0c396;
  --p-entry-top:#7a6851;     --p-turn:#40352a;
  --p-red:#e0736b;           --p-red-dim:#2a1a18;  --p-red-line:#6e3b36;
  --p-zero:#776b5f;          --p-quiet:#7a6b5c;
  --p-dashed:#4a3d2e;        --p-empty:#140f0b;
}

[data-palette="ink"]{
  --navy:#14161c;--ink:#e4e6ee;--muted:#959bad;--line:#343a48;--soft:#14161c;
  --white:#1a1d25;--green:#8ea2ff;--green2:#7488e8;--red:#ef7d90;--amber:#e0b46a;
  --p-bg:#14161c;            --p-grid:rgba(200,205,225,.02);
  --p-top:#0e1014;           --p-top-line:#2a2e3a;
  --p-top-ink:#dcdfea;       --p-top-muted:#8c92a5;
  --p-ticker:#191c24;        --p-ticker-line:#303542;
  --p-panel:#1a1d25;         --p-panel-line:#343a48;
  --p-inset:#16181f;         --p-inset-line:#3b4152;
  --p-well:#171a21;          --p-feature:#181b23;
  --p-feature-ink:#e4e6ee;   --p-feature-muted:#a0a7bd;
  --p-chip:#282d3a;          --p-chip-ink:#b6c0ea;
  --p-nav:#232838;           --p-nav-ink:#b6c0ea;
  --p-rule:#272c38;          --p-rule-2:#2b3040;
  --p-track:#2a2f3c;         --p-mid:#4e5468;
  --p-ink:#e4e6ee;           --p-muted:#959bad;
  --p-faint:#7e8497;         --p-faint-2:#71778a;
  --p-accent:#8ea2ff;        --p-accent-ink:#10121a;
  --p-accent-soft:#a6b4ff;   --p-accent-dim:#262c44;
  --p-accent-dim-line:#414a70; --p-done-ink:#aab6ee;
  --p-entry-top:#656e8c;     --p-turn:#383e4e;
  --p-red:#ef7d90;           --p-red-dim:#251a1f;  --p-red-line:#6d3b47;
  --p-zero:#6b7183;          --p-quiet:#6a7083;
  --p-dashed:#414759;        --p-empty:#111319;
}

/* The one light scheme. Top chrome and the feature panels stay dark, which is
   what keeps it recognisably the same product rather than an inversion. */
[data-palette="paper"]{
  --navy:#121a20;--ink:#17211f;--muted:#5d6b66;--line:#d8dbd3;--soft:#eeede7;
  --white:#ffffff;--green:#2b7f6a;--green2:#3d9481;--red:#bc504f;--amber:#96701f;
  --p-bg:#eeede7;            --p-grid:rgba(30,50,45,.05);
  --p-top:#121a20;           --p-top-line:#2a343c;
  --p-top-ink:#dfe4e6;       --p-top-muted:#93a2aa;
  --p-ticker:#1a232a;        --p-ticker-line:#2e3941;
  --p-panel:#ffffff;         --p-panel-line:#d8dbd3;
  --p-inset:#f5f5f0;         --p-inset-line:#c5cac1;
  --p-well:#f7f7f2;          --p-feature:#13232b;
  --p-feature-ink:#eaf0f1;   --p-feature-muted:#a4b7be;
  --p-chip:#e6ebe6;          --p-chip-ink:#2b6f60;
  --p-nav:#22303a;           --p-nav-ink:#8fd0c0;
  --p-rule:#e4e6df;          --p-rule-2:#dcdfd7;
  --p-track:#e3e5dd;         --p-mid:#b6bcb2;
  --p-ink:#17211f;           --p-muted:#56655f;
  --p-faint:#5e6c66;         --p-faint-2:#6b7872;
  --p-accent:#2b7f6a;        --p-accent-ink:#ffffff;
  --p-accent-soft:#1f6a58;   --p-accent-dim:#e0efe9;
  --p-accent-dim-line:#a9d4c7; --p-done-ink:#1f6a58;
  --p-entry-top:#9aa8a2;     --p-turn:#c9cec5;
  --p-red:#bc504f;           --p-red-dim:#fbeceb;  --p-red-line:#e0b3b1;
  --p-zero:#8b968f;          --p-quiet:#7d8a84;
  --p-dashed:#c2c8bf;        --p-empty:#f7f7f2;
}

/* ── Tokens applied ───────────────────────────────────────────────────── */

body{background-color:var(--p-bg);color:var(--p-ink);
  background-image:linear-gradient(var(--p-grid) 1px,transparent 1px),linear-gradient(90deg,var(--p-grid) 1px,transparent 1px)}

.topbar{background:var(--p-top);border-color:var(--p-top-line)}
.nav button{color:var(--p-top-muted)}
.nav button.active{background:var(--p-nav);color:var(--p-nav-ink);box-shadow:inset 0 -2px 0 var(--p-accent)}
.profile{color:var(--p-top-muted)}
.avatar{background:var(--p-nav);color:var(--p-nav-ink)}
.ticker{background:var(--p-ticker);border-color:var(--p-ticker-line);color:var(--p-top-muted)}
.ticker b{color:var(--p-top-ink)}
.ticker .up{color:var(--p-accent)}
.ticker .live{background:var(--p-accent);color:var(--p-accent-ink)}

.heading p{color:var(--p-muted)}
.eyebrow,.label{color:var(--p-accent-soft)}
.round-switch{background:var(--p-inset);border-color:var(--p-panel-line)}
.round-switch button{color:var(--p-muted)}
.round-switch button.active{background:var(--p-accent);color:var(--p-accent-ink)}

.card,.field{background:var(--p-panel);border-color:var(--p-panel-line)}
.entry{border-top-color:var(--p-entry-top)}
.coursebar{background:var(--p-panel-line);border-color:var(--p-panel-line)}
.chev{color:var(--p-faint)}
.holes{background:var(--p-well);border-color:var(--p-panel-line)}
.holes span{color:var(--p-faint)}
.holes span.done{background:var(--p-accent-dim);color:var(--p-done-ink);border-color:var(--p-accent-dim-line)}
.holes span.current,.primary{background:var(--p-accent);color:var(--p-accent-ink)}
.primary span{color:var(--p-accent-ink)}
.holes .turn{background:var(--p-turn)}
.input,.add-shot{background:var(--p-inset);border-color:var(--p-inset-line)}
.add-shot{color:var(--p-faint);border-color:var(--p-dashed)}
.input .unit{color:var(--p-faint)}
.shot-table th{color:var(--p-faint);border-color:var(--p-panel-line)}
.shot-table td{border-color:var(--p-rule)}
.shot-num,.shot-icon{background:var(--p-chip);color:var(--p-chip-ink)}
.par{background:var(--p-chip);color:var(--p-chip-ink)}
.shot-title span{color:var(--p-muted)}
.link-btn{color:var(--p-muted)}

.summary{border-top-color:var(--p-accent)}
.summary-head{border-color:var(--p-panel-line)}
.pill{background:var(--p-accent-dim);color:var(--p-chip-ink)}
.total-label,.scale,.footer-note{color:var(--p-faint)}
.total-num,.big-sg,.score.pos,.gain,.shot-gain{color:var(--p-accent-soft)}
.total-num small{color:var(--p-faint)}
.benchmark,.bar{background:var(--p-track)}
.benchmark i,.bar i{background:var(--green2)}
.bar::before{background:var(--p-mid)}
.breakdown{border-color:var(--p-panel-line)}
.row-main{color:var(--p-ink)}
.score.neg,.gain.bad,.shot-gain.neg{color:var(--p-red)}
.bar i.neg{background:var(--p-red)}
.insight{background:var(--p-well);border-color:var(--p-panel-line);border-left-color:var(--p-accent);color:var(--p-ink)}
.insight p{color:var(--p-muted)}
.insight .label{color:var(--p-accent)}

.hero-result{background:var(--p-feature);border-top-color:var(--p-accent);color:var(--p-feature-ink)}
.hero-result h2{color:var(--p-feature-ink)}
.hero-result p{color:var(--p-feature-muted)}
.big-sg small{color:var(--p-feature-muted)}
.chart-card>p{color:var(--p-muted)}
.shot-item{border-color:var(--p-rule)}
.shot-item b{color:var(--p-ink)}
.shot-item span{color:var(--p-faint)}

/* Controls and states added on top of the mockup */
.bare{color:inherit}
input.bare::placeholder{color:var(--p-faint-2)}
select.bare option{background:var(--p-panel);color:var(--p-ink)}
.input:focus-within,.value:focus-within,.par:focus-within,
.holes span:not(.turn):focus-visible{outline-color:var(--p-accent)}
.shot-empty{background:var(--p-empty);border-color:var(--p-dashed)}
.shot-empty p{color:var(--p-muted)}
.shot-empty b{color:var(--p-ink)}
.shot-gain.pending{color:var(--p-faint-2)}

.none{color:var(--p-muted)}
.cat em{color:var(--p-faint)}
.stat-grid{background:var(--p-rule-2);border-color:var(--p-rule-2)}
.stat{background:var(--p-panel)}
.stat-num{color:var(--p-ink)}
.stat-num em,.stat-sub{color:var(--p-faint)}
.spark{background:var(--p-inset);border-color:var(--p-rule-2)}
.hole-table{background:var(--p-rule-2);border-color:var(--p-rule-2)}
.ht-row{background:var(--p-panel)}
.ht-row.head{background:var(--p-well);color:var(--p-faint)}
.ht-row .pos{color:var(--p-accent-soft)}
.ht-row .neg{color:var(--p-red)}
.ht-row .zero{color:var(--p-zero)}
.info h2{color:var(--p-ink)}
.info p{color:var(--p-muted)}
.info-num{color:var(--p-accent)}
.info .q{color:var(--p-ink)}
.toast{background:var(--p-accent);color:var(--p-accent-ink)}

/* The top bar and ticker stay dark in every scheme, so they need an accent
   that does not follow a light palette down into unreadability. */
:root{--p-chrome-accent:var(--p-accent);--p-chrome-accent-ink:var(--p-accent-ink)}
[data-palette="paper"]{--p-chrome-accent:#7fd4b8;--p-chrome-accent-ink:#0e211b}

.mark{border-color:var(--p-chrome-accent)}
.mark:before,.mark:after{background:var(--p-chrome-accent)}
.ticker .up{color:var(--p-chrome-accent)}
.ticker .live{background:var(--p-chrome-accent);color:var(--p-chrome-accent-ink)}
.nav button.active{box-shadow:inset 0 -2px 0 var(--p-chrome-accent)}

/* The results hero is a dark panel in every scheme, so its label follows the
   chrome accent rather than the page accent. Zero cells stay quiet but legible. */
.hero-result .label{color:var(--p-chrome-accent)}
.ht-row .zero{color:var(--p-faint)}

/* The results hero panel is dark in every scheme, so its big number follows
   the chrome accent — the page accent is tuned for light panels. */
.hero-result .big-sg{color:var(--p-chrome-accent)}

/* A losing total reads as a loss. The hero panel is dark in every scheme, so
   it needs a red that survives there. */
:root{--p-chrome-red:var(--p-red)}
[data-palette="paper"]{--p-chrome-red:#f0928d}
.total-num.neg{color:var(--p-red)}
.hero-result .big-sg.neg{color:var(--p-chrome-red)}

/* A hole left half-entered claims a hole-out on its last shot, which inflates
   the round. Say so where it happens. */
.hole-warning{
  margin:12px 0 0;padding:10px 12px;border-radius:2px;
  background:var(--p-red-dim);border:1px solid var(--p-red-line);
  color:var(--p-red);font-family:monospace;font-size:11.5px;line-height:1.55;
}

/* letter-spacing given in em resolves against the element's own font-size and
   is then inherited as an absolute length. The big display numbers carry tight
   negative tracking, which landed unchanged on their small print: "strokes"
   rendered at 12px with −3.36px of spacing and "SG" at 20px with −3.84px, so
   the letters overlapped. Reset it where the size changes. */
.total-num small,.big-sg small{letter-spacing:.08em}

/* The band label column was 126px while the putting detail line — "5 putts ·
   100% holed · +0.24 each" — needs about 190px and is set nowrap, so it ran
   out under the bar. Widen the column and stop the grid tracks from sizing to
   their content, which is what let it escape in the first place. */
.big-bars .row-main{grid-template-columns:190px 1fr}
.cat{grid-template-columns:minmax(0,1fr)}

@media(max-width:620px){
  .big-bars .row-main{grid-template-columns:1fr}
  .cat{grid-template-columns:none;grid-auto-flow:column;justify-content:space-between}
}

/* Wordmark: the name in full, with the second half carrying the accent — the
   two-tone device the PINPOINT//SG mark used, without the abbreviation. */
.brand{text-transform:none;letter-spacing:.02em;gap:9px}
.brand-accent{color:var(--p-chrome-accent);margin-left:.45em}

/* The full name is twice the length of PINPOINT//SG, so it needs room on a
   phone: at 17px it wrapped to two lines inside a 54px bar and ran into the
   avatar. One line, always. */
.brand{white-space:nowrap}

@media(max-width:620px){
  .brand{font-size:13px;letter-spacing:.01em}
  /* Table auto-layout was handing the lie column its 100px floor and leaving
     the distance field 17px, clipping "412" behind its unit. */
  .input.lie{min-width:96px}
  .input.dist{min-width:74px}
}

/* Reset: quiet until hovered, loud once armed, dead when there is nothing to
   clear. The armed state has to look different enough that the second press
   is a decision rather than a reflex. */
.actions-left{display:flex;align-items:center;gap:16px}
.link-btn.reset{color:var(--p-faint)}
.link-btn.reset:hover:not(:disabled){color:var(--p-red)}
.link-btn:disabled{opacity:.35;cursor:not-allowed}
.link-btn.reset.armed{
  color:var(--p-red);background:var(--p-red-dim);
  border:1px solid var(--p-red-line);border-radius:2px;padding:5px 9px;
}

/* Hole yardage and par were set as plain text to match the mockup, which made
   two required inputs read as labels. They are proper fields now, captioned
   like the coursebar, and an empty yardage says it is needed — nothing on the
   hole can be scored without it. */
.hole-fields{display:flex;align-items:flex-end;gap:10px}
.hole-field{display:grid;gap:5px}
.hole-field .label{margin:0}
.hole-field .input{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
#holeYards{width:64px;text-align:left}
#holeParWrap .input{min-width:56px}
#holePar{width:auto}

.hole-field.needs-input .input{border-color:var(--p-red);box-shadow:inset 0 0 0 1px var(--p-red)}
.hole-field.needs-input .label{color:var(--p-red)}

@media(max-width:620px){
  .shot-head{gap:12px}
  .hole-fields{gap:8px}
  #holeYards{width:56px}
}

/* The top bar used to carry a session id and an avatar with someone's
   initials, in a tool that has no accounts. Replaced with the one thing a
   first-time visitor actually wants to know. */
.no-account{color:var(--p-top-muted);letter-spacing:.05em;text-transform:uppercase}

@media(max-width:620px){
  /* "Another putt" needs 87px of label; without a floor the table handed the
     width to the distance column and clipped it. Tighter field padding buys
     8px back on every control at this width. */
  .input{padding:0 9px}
  .input.result{min-width:112px}
}

/* ── Results header ───────────────────────────────────────────────────────
   Three identical text buttons ran together as one string, and the back
   action sat last. Now split by kind: a back link above the title where the
   eye starts, and the two exports grouped right as bordered buttons so they
   read as controls rather than prose. */

/* Reads as a control, like the exports it sits opposite. Placement carries
   the distinction between going back and exporting, not styling. */
.back-link{margin:0 0 14px}

.export-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-outline{
  border:1px solid var(--p-inset-line);background:var(--p-inset);color:var(--p-ink);
  border-radius:2px;padding:9px 14px;cursor:pointer;
  font-family:monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
}
.btn-outline:hover{border-color:var(--p-accent);color:var(--p-accent)}
.btn-outline:active{background:var(--p-panel-3)}

@media(max-width:620px){
  .export-actions{margin-top:16px}
  .btn-outline{flex:1;text-align:center}
}

/* \`hidden\` is a user-agent style, so any author rule that sets \`display\`
   silently defeats it — \`.hole-field{display:grid}\` and \`.chart-card{display:flex}\`
   were both winning, which left yardage and par on screen in Putting only even
   though the attribute was set. Make the attribute authoritative. */
[hidden]{display:none !important}

/* ── Shot row: value and actions separated ────────────────────────────────
   The SG column held a number plus a 17×19 bordered toggle and an 18×14 bare
   glyph, all under a header reading "SG". The two controls now share a column
   of their own, at one size and one weight, and they stay visible instead of
   appearing on hover — a control that only exists on hover does not exist at
   all on a touch screen. */

.shot-gain{text-align:right;white-space:nowrap}

.row-actions{width:1%;white-space:nowrap;padding-left:14px !important}
.row-btn{
  display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;
  border:1px solid transparent;border-radius:2px;background:transparent;
  color:var(--p-faint-2);font-family:monospace;font-size:10px;line-height:1;
  cursor:pointer;transition:color .12s ease,border-color .12s ease,background .12s ease;
}
.row-btn:hover{color:var(--p-ink);border-color:var(--p-inset-line);background:var(--p-inset)}
.js-remove:hover{color:var(--p-red);border-color:var(--p-red-line);background:var(--p-red-dim)}
.js-remove{font-size:14px}
.row-btn:focus-visible{outline:1px solid var(--p-accent);outline-offset:1px}

/* A penalty is state, not a hover affordance, so it reads as set at a glance. */
.js-pen[aria-pressed="true"]{
  color:var(--p-red);border-color:var(--p-red-line);background:var(--p-red-dim);
}

@media(max-width:620px){
  .row-actions{padding-left:6px !important}
  .row-btn{width:20px;height:20px;margin-left:2px}
}

/* The SG heading sat left while its numbers ran right. */
.shot-table th.ta-r{text-align:right}

/* Was an inline Manrope rule, the only use of that family on the site. */
.hero-result-title{font:700 22px "DM Sans",system-ui,sans-serif;margin:0 0 8px}

/* ── Nav as links ─────────────────────────────────────────────────────────
   How It Works and the FAQ are their own URLs now, so the nav is anchors —
   crawlable, linkable, and working without JavaScript. */
.nav a{
  display:inline-block;text-decoration:none;border-radius:2px;padding:9px 14px;
  font-family:monospace;text-transform:uppercase;letter-spacing:.05em;font-size:12px;
  color:var(--p-top-muted);
}
.nav a:hover{color:var(--p-top-ink)}
.nav a.active{background:var(--p-nav);color:var(--p-nav-ink);box-shadow:inset 0 -2px 0 var(--p-chrome-accent)}

/* ── Long-form content ───────────────────────────────────────────────────
   The explainer is the page that answers "what is strokes gained", so it is
   set for reading: a measured column, real paragraph rhythm, and the sans
   face rather than the interface mono. */
.prose{max-width:760px}
.prose .lede{max-width:none}
.prose-card{padding:24px 26px;margin-bottom:12px}
.prose h2{font-family:monospace;font-size:15px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
.prose p{font-family:"DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.7;color:var(--p-ink);margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:700}
.prose em{font-style:italic}
.prose h2.q{color:var(--p-accent)}

.formula-line{
  font-family:monospace !important;font-size:13px !important;
  background:var(--p-inset);border-left:3px solid var(--p-accent);
  padding:14px 16px;margin:0 0 14px;
}

.prose-table{display:grid;gap:1px;background:var(--p-rule-2);border:1px solid var(--p-rule-2);margin:0 0 16px}
.pt-row{display:grid;grid-template-columns:44px 1.3fr 84px 1.3fr 84px 74px;background:var(--p-panel);padding:9px 12px;font-family:monospace;font-size:12px;align-items:center}
.pt-row.pt-4{grid-template-columns:1fr 1.5fr 2fr}
.pt-head{background:var(--p-well);color:var(--p-faint);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.pt-row .pos{color:var(--p-accent-soft);text-align:right}
.pt-row .neg{color:var(--p-red);text-align:right}
.pt-row > *:nth-child(3),.pt-row > *:nth-child(5){text-align:right}
.pt-row.pt-4 > *{text-align:left}

.cta a{font-family:monospace;font-size:13px;color:var(--p-accent);text-decoration:none;letter-spacing:.03em}
.cta a:hover{text-decoration:underline}

.site-footer{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:34px;padding-top:20px;padding-bottom:34px;border-top:1px solid var(--p-panel-line);
}
.site-footer p{font-family:monospace;font-size:11px;color:var(--p-faint);margin:0;letter-spacing:.04em}
.footer-nav{display:flex;gap:16px}
.footer-nav a{font-family:monospace;font-size:11px;color:var(--p-muted);text-decoration:none;letter-spacing:.04em}
.footer-nav a:hover{color:var(--p-accent)}

@media(max-width:760px){
  .prose-card{padding:18px}
  /* Hiding columns left four items in a three-column grid and one wrapped.
     The worked example is the centrepiece of the guide, so it keeps every
     column and scrolls sideways instead — the same treatment the hole-by-hole
     table already uses. The three-column table stacks, which reads fine. */
  .wide-table{display:block;overflow-x:auto}
  .wide-table .pt-row{min-width:540px;grid-template-columns:38px 1.15fr 74px 1.15fr 74px 64px;font-size:11px;padding:8px;column-gap:10px}
  .pt-row.pt-4{grid-template-columns:1fr;font-size:11px;padding:8px;row-gap:4px}
  .pt-row.pt-4 > *:not(:first-child){color:var(--p-muted)}
  .site-footer{flex-direction:column;align-items:flex-start;gap:12px}
}

/* The wordmark is a link home now, so it needs its colour back — an anchor
   with no colour declared takes the browser's link blue rather than the
   white it was inheriting from .topbar. */
.brand{color:var(--p-top-ink);text-decoration:none}
.brand:hover .brand-accent{opacity:.85}

/* .prose-table sets a 1px gap between rows; the cells inside a row had none,
   so values ran into the next column. */
.pt-row{column-gap:14px}

/* The mockup hid the nav below 980px, which was survivable when every view
   lived on one URL. Now they are separate pages and two of them are search
   entry points, so the nav has to be reachable on a phone: it wraps to its
   own row rather than disappearing. */
@media(max-width:980px){
  .topbar{height:auto;min-height:58px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .nav{display:flex;order:3;width:100%;gap:2px}
  .nav a{flex:1;text-align:center;padding:9px 6px;font-size:11px}
  .profile{margin-left:auto}
}
@media(max-width:620px){
  .nav a{letter-spacing:.02em}
}

/* ── Guide layout ─────────────────────────────────────────────────────────
   A long article left alone in a 760px column leaves half the screen empty
   and gives a reader no way to navigate or act. The sidebar carries a
   contents list and a route into the calculator, on the same grid proportions
   as the round-input screen so the two pages feel like one product. */
.guide{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
.guide .prose{max-width:none}
.guide-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:12px}

.toc-card,.cta-card{padding:18px}
.aside-label{font-family:monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--p-faint);margin:0 0 12px}
.toc{display:grid;gap:1px}
.toc a{
  font-family:monospace;font-size:11.5px;line-height:1.45;color:var(--p-muted);
  text-decoration:none;padding:6px 8px;border-left:2px solid transparent;border-radius:2px;
}
.toc a:hover{color:var(--p-accent);border-left-color:var(--p-accent);background:var(--p-inset)}

.cta-card{border-top:2px solid var(--p-accent)}
.cta-card p{font-family:"DM Sans",system-ui,sans-serif;font-size:13px;line-height:1.6;color:var(--p-muted);margin:0 0 14px}
.cta-card .primary{display:block;text-align:center;text-decoration:none;padding:12px}

/* Headings are anchor targets, so they must clear the sticky top bar. */
.prose h2{scroll-margin-top:80px}
.prose h3{font-family:monospace;font-size:13px;text-transform:uppercase;letter-spacing:.03em;margin:20px 0 10px;color:var(--p-accent)}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{font-family:"DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.7;color:var(--p-ink);margin-bottom:7px}
.prose .note{font-size:13px;color:var(--p-muted);border-left:2px solid var(--p-panel-line);padding-left:14px}
.prose a{color:var(--p-accent)}
.sources{font-family:monospace;font-size:11px;color:var(--p-faint);line-height:1.7}
.sources a{color:var(--p-muted)}

@media(max-width:980px){
  /* minmax(0,1fr), not 1fr: a grid column’s automatic minimum is its content’s
     min-width, so the scrolling table’s 540px floor was widening the whole
     column past the viewport instead of scrolling inside it. */
  .guide{grid-template-columns:minmax(0,1fr)}
  .guide-aside{position:static}
  .toc-card{display:none}   /* a contents list below the article helps nobody */
}

/* Removing the 760px cap let the article run to 1053px — roughly 140
   characters a line, well past the point where the eye loses its place.
   Cap the whole block instead and centre it, so the column stays readable
   and the page is not weighted to one side. */
.guide{max-width:1060px;margin:0 auto}


/* 95 characters a line is still long for sustained reading; 16px over a
   narrower column lands near 78, which is where the eye stops working to
   find the next line. */
.guide{max-width:970px}
.prose p,.prose li{font-size:16px;line-height:1.75}

/* ── Article heading ──────────────────────────────────────────────────────
   The title block sat outside the guide grid at a different max-width, so it
   hung to the left of the column it introduced. It lives in the article
   column now and shares its edges exactly.

   The standfirst was inheriting .heading p — monospace at 12px — which read
   as code above body copy set in DM Sans at 16px. It is the same face as the
   article now, one step larger, as a standfirst should be. */
.prose-head{margin-bottom:18px}
.prose-head .eyebrow{margin-bottom:10px}
.prose-head h1{
  font:700 27px monospace;text-transform:uppercase;letter-spacing:-.025em;
  line-height:1.18;margin:0 0 16px;
}
.prose-head .lede{
  font-family:"DM Sans",system-ui,sans-serif;font-size:18px;line-height:1.6;
  font-weight:400;color:var(--p-muted);margin:0;max-width:none;
}

@media(max-width:620px){
  .prose-head h1{font-size:21px}
  .prose-head .lede{font-size:16px}
}

/* The heading is a grid child spanning both columns, rather than a block above
   the grid with its own max-width — that way it cannot drift out of alignment
   with the column it introduces, and the title runs the full width. */
.prose-head{grid-column:1/-1;margin-bottom:4px}

/* Sticking is not enough on its own: at 697px the sidebar was taller than a
   typical laptop viewport, so its lower half — including the call to action —
   sat permanently below the fold no matter how far you scrolled. Cap it to the
   screen, let the long contents list scroll inside its own card, and pin the
   call to action so it is always the part you can see. */
.guide-aside{max-height:calc(100vh - 48px)}
.toc-card{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.toc{overflow-y:auto;min-height:0;scrollbar-width:thin}
.cta-card{flex:0 0 auto}

/* Restated after the flex rules above, which have equal specificity and would
   otherwise win purely by coming later in the file. */
@media(max-width:980px){
  .toc-card{display:none}
}

/* The 78px offset assumed a top bar overhead to clear, but the bar is static
   and scrolls away — so the sidebar pinned itself 78px below nothing, leaving
   a void beside an article that ran to the top edge. 24px reads as deliberate
   padding instead, and the height cap follows it. */

/* ── 404 ──────────────────────────────────────────────────────────────────
   Centred rather than in the .guide grid: there is no sidebar to balance and
   nothing to navigate, so the column that serves the long-form pages would
   only strand this in the left third. */
.notfound{max-width:560px;margin:0 auto;padding:76px 0 96px;text-align:center}
.notfound .nf-code{font-family:monospace;font-size:12px;letter-spacing:.24em;color:var(--p-accent);margin:0 0 18px}
.notfound h1{font-size:34px;line-height:1.18;letter-spacing:-.01em;color:var(--p-ink);margin:0 0 14px}
.notfound .nf-sub{font-size:15px;line-height:1.6;color:var(--p-muted);margin:0 auto 28px;max-width:44ch}
.notfound .primary{display:inline-block}
.nf-links{display:grid;gap:10px;margin-top:44px;text-align:left}
.nf-links a{display:block;padding:15px 17px;background:var(--p-panel);border:1px solid var(--p-panel-line);text-decoration:none}
.nf-links a:hover{border-color:var(--p-accent-dim-line);background:var(--p-accent-dim)}
.nf-links b{display:block;font-size:14px;font-weight:500;color:var(--p-ink);margin-bottom:3px}
.nf-links span{display:block;font-size:13px;line-height:1.5;color:var(--p-muted)}
@media(max-width:620px){.notfound{padding:48px 0 64px}.notfound h1{font-size:27px}}