/* Carry — light, dense, readable in sunlight. One green, ink, paper. No brand colors. */
:root{
  --bg:#EFF2EE; --card:#FFFFFF; --card2:#F5F7F4; --sheet:#F4F6F3;
  --ink:#0E1411; --ink2:#59635D; --ink3:#8A938D; --ink4:#B2B8B3;
  --line:rgba(14,20,17,.08); --line2:rgba(14,20,17,.14);
  --g:#136A4B; --g-d:#0B4E36; --g-l:#E6F0EA; --g-t:#42916F;
  --red:#BE4038; --amber:#B8801F; --blue:#2F7DF6;
  --sh1:0 1px 1px rgba(14,20,17,.04), 0 1px 3px rgba(14,20,17,.05);
  --sh2:0 2px 4px rgba(14,20,17,.04), 0 12px 24px -16px rgba(14,20,17,.4);
  --r:14px; --r2:18px;
  --san:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--san);
  font-size:15px;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv05" 1,"ss03" 1}
body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease}
button:active{transform:scale(.975)}
input,select{font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line2);
  border-radius:11px;padding:11px 12px;width:100%}
input::placeholder{color:var(--ink4)}
input:focus,select:focus{outline:none;border-color:var(--g);box-shadow:0 0 0 3px var(--g-l)}
[hidden]{display:none!important}
.wrap{max-width:560px;margin:0 auto;padding:0 16px}
svg.i{width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* header */
.hdr{position:sticky;top:0;z-index:500;background:rgba(239,242,238,.9);backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.hdr .in{max-width:560px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:8px}
.hdr .t{font-size:10px;color:var(--ink3);letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr .h{font-size:19px;font-weight:650;line-height:1.15;letter-spacing:-.025em;margin-top:2px;
  display:flex;align-items:baseline;gap:7px}
.hdr .h span{font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:0}
.arrow{width:36px;height:36px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  font-size:15px;color:var(--ink2);flex:none;box-shadow:var(--sh1);display:grid;place-items:center}
.arrow:active{background:var(--card2)}
.par{margin-left:auto;padding:6px 10px;border-radius:11px;background:var(--card);border:1px solid var(--line);
  font-size:10px;color:var(--ink3);letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  flex:none;box-shadow:var(--sh1);line-height:1.1;text-align:center}
.par b{display:block;color:var(--ink);font-size:16px;letter-spacing:-.02em;margin-top:2px}

/* map */
/* z-index here traps Leaflet's own 400-deep panes, or the map paints over the sheet. */
#mapwrap{position:relative;z-index:1;height:33vh;min-height:190px;background:#DEE3DD}
#map{position:absolute;inset:0}
#mapmsg{position:absolute;left:12px;right:60px;top:12px;z-index:450;pointer-events:none;font-size:12.5px;line-height:1.35}
#mapmsg span{background:rgba(255,255,255,.95);color:var(--ink);padding:7px 10px;border-radius:10px;
  display:inline-block;box-shadow:var(--sh2);font-weight:500}
.mapbtn{position:absolute;right:12px;bottom:26px;z-index:450;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--g);box-shadow:var(--sh2);display:grid;place-items:center;font-size:15px}
.leaflet-container{background:#DEE3DD;font-family:var(--san)}
.leaflet-control-attribution{font-size:9px!important;background:rgba(255,255,255,.62)!important;color:#7a837d!important;
  padding:0 4px!important;border-radius:5px 0 0 0}
.yd-label{background:#fff!important;color:var(--ink)!important;border:0!important;border-radius:9px!important;
  font-weight:650;font-size:12.5px!important;box-shadow:0 2px 10px rgba(0,0,0,.28)!important;padding:4px 8px!important}
.yd-label:before{display:none}

/* the sheet lifts over the map — the app's one bit of depth */
.sheet{position:relative;z-index:5;background:var(--sheet);border-radius:var(--r2) var(--r2) 0 0;
  margin-top:-16px;padding-top:2px;box-shadow:0 -8px 24px -14px rgba(14,20,17,.5)}
.sheet:before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:#C9D0CA;
  margin:7px auto 0}
.nomap .sheet{margin-top:0;border-radius:0;box-shadow:none}
.nomap .sheet:before{display:none}

/* the number */
.yard{display:flex;align-items:flex-start;gap:12px;padding:14px 0 0;animation:rise .18s ease both}
.yard .n{font-size:56px;font-weight:300;line-height:.95;letter-spacing:-.045em}
.yard .n i{font-style:normal;font-size:15px;font-weight:500;color:var(--ink3);letter-spacing:0;margin-left:4px}
.yard .u{font-size:12.5px;color:var(--ink2);line-height:1.35;padding-top:9px;min-width:0}
.yard .u small{display:block;color:var(--ink3);font-size:11.5px;margin-top:2px}
.yard .src{margin-left:auto;padding-top:6px}
.link{color:var(--g);font-size:12.5px;font-weight:600;padding:5px 9px;border-radius:9px;background:var(--g-l);white-space:nowrap}
.typed{display:flex;gap:8px;align-items:center;margin:10px 0 2px}
.typed input{width:118px;font-size:16px}

/* front / back */
.fb{display:flex;gap:8px;margin:12px 0 0}
.fb div{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 11px;
  box-shadow:var(--sh1);display:flex;align-items:baseline;gap:7px}
.fb b{font-size:17px;font-weight:650;letter-spacing:-.02em}
.fb span{font-size:10px;color:var(--ink3);letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.mark{display:flex;gap:8px;margin:12px 0 2px}
.teeno{width:18px;height:18px;border-radius:50%;background:#fff;color:var(--g-d);font-size:10px;
  font-weight:700;line-height:18px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* clubs row */
.chips{display:flex;gap:7px;overflow-x:auto;padding:14px 16px 12px;margin:0 -16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  text-align:left;min-width:70px;position:relative;box-shadow:var(--sh1)}
.chip .cn{font-size:13px;font-weight:650;white-space:nowrap;letter-spacing:-.015em}
.chip .cd{font-size:11px;color:var(--ink3);margin-top:1px;font-weight:500}
.chip.on{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 4px 12px -4px rgba(19,106,75,.5)}
.chip.on .cd{color:rgba(255,255,255,.78)}
.chip.fit:after{content:"";position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%;background:var(--g-t)}
.chip.on.fit:after{background:#fff}
.chip.empty .cd{color:var(--ink4)}

/* the shot card */
.shot{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:0 14px 14px;
  box-shadow:var(--sh2);animation:rise .18s ease both}
.shead{display:flex;align-items:center;gap:10px;padding:12px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sn{font-size:14.5px;font-weight:650;letter-spacing:-.015em;flex:1}
.sn span{font-size:11.5px;font-weight:500;color:var(--ink3);margin-left:6px;letter-spacing:0}
.pill{font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 9px;border-radius:8px;
  background:var(--card2);color:var(--ink2);white-space:nowrap}
.pill.good{background:var(--g-l);color:var(--g)}
.pill.warn{background:#FAF1E0;color:var(--amber)}
.pill.bad{background:#FBECEB;color:var(--red)}
.shot svg.pic{display:block;width:100%;height:auto}
.verdict{display:flex;align-items:center;gap:9px;margin:6px 2px 0}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink3)}
.read{font-size:15px;font-weight:650;letter-spacing:-.015em}
.read.good,.dot.good{color:var(--g)} .dot.good{background:var(--g)}
.read.warn,.dot.warn{color:var(--amber)} .dot.warn{background:var(--amber)}
.read.bad,.dot.bad{color:var(--red)} .dot.bad{background:var(--red)}
.how{font-size:11.5px;color:var(--ink3);margin:4px 2px 12px;line-height:1.4}
.pow{display:flex;align-items:center;gap:12px;margin:2px 2px}
.pow b{font-size:17px;font-weight:650;min-width:46px;letter-spacing:-.02em}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;padding:0;border:0;height:34px;box-shadow:none}
input[type=range]:focus{box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#E2E7E2}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;margin-top:-9.5px;border:1px solid var(--line2);box-shadow:0 2px 6px rgba(14,20,17,.25)}
input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#E2E7E2}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--line2)}
.seg{display:flex;gap:2px;background:var(--card2);border-radius:11px;padding:3px;margin:4px 2px 12px}
.seg button{flex:1;padding:7px 0;border-radius:9px;font-size:12px;color:var(--ink2);font-weight:600}
.seg button.on{background:#fff;color:var(--g);box-shadow:var(--sh1)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:13px;border-radius:13px;
  background:var(--g);color:#fff;font-weight:650;font-size:14px;letter-spacing:-.01em;box-shadow:0 4px 14px -6px rgba(19,106,75,.6)}
.btn:active{background:var(--g-d)}
.btn.q{background:var(--card);border:1px solid var(--line2);color:var(--ink);box-shadow:var(--sh1)}
.btn.q:active{background:var(--card2)}
.btn.sm{padding:9px 12px;font-size:13px;border-radius:11px}
.btn[disabled]{opacity:.45}
.row{display:flex;gap:8px}
.row>*{flex:1}

/* pending shot */
.pend{background:var(--card);border:1px solid rgba(19,106,75,.22);border-left:3px solid var(--g);
  border-radius:var(--r);padding:13px 14px;margin:14px 0 0;box-shadow:var(--sh1);animation:rise .18s ease both}
.pend .pt{font-size:14.5px;font-weight:650;letter-spacing:-.015em;margin-bottom:3px}
.pend .ps{font-size:12.5px;color:var(--ink2);margin-bottom:11px;line-height:1.4}

/* score */
.score{display:flex;gap:8px;margin:14px 0 22px}
.step{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px;
  display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh1)}
.step .l{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-top:1px}
.step .v{font-size:21px;font-weight:650;min-width:26px;text-align:center;letter-spacing:-.02em}
.step button{width:34px;height:34px;border-radius:10px;background:var(--card2);font-size:16px;color:var(--ink2);
  display:grid;place-items:center}

/* sections */
.sec{padding:18px 0;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.k{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-bottom:11px}
.hint{font-size:13px;color:var(--ink2);line-height:1.5;margin:0 0 12px}
h1{font-size:25px;font-weight:650;letter-spacing:-.03em;margin:18px 0 6px}

/* clubs tab */
.club{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:7px;box-shadow:var(--sh1)}
.club .top{display:flex;align-items:center;gap:10px;padding:13px 14px;width:100%;text-align:left}
.club .nm{font-weight:650;flex:1;letter-spacing:-.015em;font-size:14.5px}
.club .av{font-size:19px;font-weight:650;letter-spacing:-.025em;min-width:42px;text-align:right}
.club .rg{font-size:11px;color:var(--ink3);text-align:right;line-height:1.35;font-weight:500}
.club .body{padding:0 14px 14px;animation:rise .16s ease both}
.logrow{display:flex;gap:7px;margin-bottom:10px}
.logrow input{flex:1}
.logrow select{width:92px;flex:none}
.shots{display:flex;flex-wrap:wrap;gap:6px}
.sh{font-size:12px;padding:6px 8px;border-radius:9px;background:var(--card2);color:var(--ink2);
  display:flex;gap:6px;align-items:center;border:1px solid var(--line);font-weight:500}
.sh button{color:var(--ink4);font-size:14px;line-height:1}
.ladder svg{display:block;width:100%;height:auto}

/* card tab */
table.sc{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh1)}
table.sc th,table.sc td{text-align:center;padding:7px 1px;border-bottom:1px solid var(--line)}
table.sc tr:last-child td{border-bottom:0}
table.sc th{font-size:10px;color:var(--ink3);font-weight:700;background:var(--card2);letter-spacing:.04em}
table.sc td:first-child,table.sc th:first-child{text-align:left;color:var(--ink3);font-size:9.5px;
  letter-spacing:.1em;font-weight:700;padding-left:11px;width:46px}
table.sc tr.tot td{font-weight:650;font-size:13.5px;height:34px}
table.sc td:last-child,table.sc th:last-child{background:var(--card2);font-weight:700}
/* golf marks: birdie in a circle, bogey in a square */
.mk{display:inline-grid;place-items:center;width:23px;height:23px;line-height:1}
.mk.bird{border:1.5px solid var(--g);border-radius:50%;color:var(--g)}
.mk.bog{border:1.5px solid var(--red);border-radius:4px;color:var(--red)}
.mk.eag{border:1.5px solid var(--g);border-radius:50%;box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--g);color:var(--g)}
.mk.dbl{border:1.5px solid var(--red);border-radius:4px;box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--red);color:var(--red)}
.rnd{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:7px;box-shadow:var(--sh1)}
.rnd .rn{flex:1;font-weight:650;letter-spacing:-.015em;font-size:14.5px}
.rnd .rn small{display:block;color:var(--ink3);font-size:11.5px;margin-top:3px;font-weight:500}
.rnd .rs{font-size:18px;font-weight:650;color:var(--ink3)}
.rnd .go{color:var(--ink4);font-size:15px}

/* install card */
.install{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 14px;box-shadow:var(--sh1);margin-bottom:8px}
.install .ii{width:34px;height:34px;border-radius:9px;background:var(--g);color:#fff;display:grid;place-items:center;flex:none}
.install .it{flex:1;font-size:13px;line-height:1.4;color:var(--ink2)}
.install .it b{display:block;color:var(--ink);font-size:14px;font-weight:650;margin-bottom:1px}
.install .btn{width:auto;flex:none;padding:9px 13px;font-size:13px}

/* nav */
#nav{position:fixed;left:0;right:0;bottom:0;z-index:600;background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px) saturate(1.5);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:env(safe-area-inset-bottom)}
#nav button{padding:9px 0 10px;font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--ink3);
  display:flex;flex-direction:column;align-items:center;gap:3px}
#nav button svg{width:21px;height:21px}
#nav button.on{color:var(--g)}

#toast{position:fixed;left:14px;right:14px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:700;
  max-width:520px;margin:0 auto;background:var(--ink);color:#fff;border-radius:13px;padding:12px 15px;
  font-size:13.5px;font-weight:550;display:flex;gap:14px;align-items:center;
  box-shadow:0 14px 34px -14px rgba(14,20,17,.7);animation:rise .18s ease both}
#toast button{margin-left:auto;color:#8FD3B4;font-weight:650;font-size:13px}

/* Fly the hole — the button on the play map, and the full-screen, hands-off flyover */
.flybtn{position:absolute;left:12px;bottom:26px;z-index:450;height:38px;padding:0 14px 0 11px;border-radius:19px;
  background:rgba(255,255,255,.95);color:var(--g);box-shadow:var(--sh2);display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;letter-spacing:-.01em}
.flybtn svg.i{fill:currentColor;stroke-width:1.4}
#fly{position:fixed;inset:0;z-index:9000;background:#0E1411;opacity:0;transition:opacity .4s ease;
  touch-action:none;user-select:none;-webkit-user-select:none}
#fly.on{opacity:1}
#flymap{position:absolute;inset:0}
#fly .maplibregl-canvas{outline:none}
.flytop{position:absolute;left:0;right:0;top:0;padding:calc(14px + env(safe-area-inset-top)) 18px 26px;
  background:linear-gradient(rgba(8,12,10,.55),rgba(8,12,10,0));color:#fff;display:flex;align-items:baseline;gap:10px;pointer-events:none}
.flytop b{font-size:22px;font-weight:650;letter-spacing:-.03em}
.flytop span{font-size:13px;opacity:.85}
.flydate{position:absolute;left:14px;bottom:calc(16px + env(safe-area-inset-bottom));background:rgba(8,12,10,.55);color:#fff;
  font-size:11.5px;font-weight:500;padding:5px 9px;border-radius:8px;pointer-events:none;backdrop-filter:blur(6px)}
.flypost{background:#fff;color:var(--ink);font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
.flytee{background:var(--g);color:#fff;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
#fly .maplibregl-ctrl-attrib{font-size:9px;background:rgba(255,255,255,.5)}

/* the course name in a round doubles as the way out: "PEBBLE BEACH  Change" */
.hdr .t.chg{display:flex;max-width:100%;text-align:left;gap:6px}
.hdr .t.chg span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.hdr .t.chg u{text-decoration:none;color:var(--g);flex:none}