/* TOWNHOP — terminal cockpit (flagship 5.5). Dark, mono, neon terminal-green.
   Fits the nixfred.com family; the only member that's a live map. */
:root {
  color-scheme: dark;
  --void:#060a09; --surface-0:#0a1110; --surface-1:#0b1513; --surface-2:#10201c;
  --line:#13201d; --line2:#1d302c;
  --ink:#cdeee2; --muted:#6f9388; --faint:#46635c;
  --grn:#00ff9c; --grn-dim:#0a3b2c; --cyan:#3ad6ff; --amber:#ffb454; --red:#ff5167;
  --accent:var(--grn); --accent-deep:#042016; --glow:0 0 16px rgba(0,255,156,.45);
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --d-fast:.22s; --d-base:.4s; --d-smooth:.7s;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-snap:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
:focus-visible{outline:2px solid var(--grn);outline-offset:2px}
html,body{height:100%;margin:0}
body{
  background:var(--void); color:var(--ink); font:13px/1.5 var(--mono);
  display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; overflow:hidden;
}
/* atmosphere: grid + scanlines */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,255,156,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,156,.04) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(ellipse 95% 85% at 40% 45%,#000 35%,transparent 88%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.45;mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 3px,transparent 4px)}

/* ── top HUD ── */
.hud{position:relative;z-index:10;display:flex;align-items:center;gap:16px;padding:11px 18px;
  border-bottom:1px solid var(--line2);background:linear-gradient(180deg,rgba(0,255,156,.04),transparent)}
.brand{font-weight:800;font-size:19px;letter-spacing:.05em}
.brand .slash{color:var(--faint)} .brand .hop{color:var(--grn);text-shadow:var(--glow)}
.tele{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0}
.pill{border:1px solid var(--line2);border-radius:3px;padding:4px 9px;color:var(--muted);font-size:11px;letter-spacing:.07em;display:flex;align-items:center;gap:6px;background:var(--surface-0);white-space:nowrap}
.pill b{color:var(--ink);font-weight:600} .pill .v{color:var(--grn)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:var(--glow);animation:blink 1.4s steps(2) infinite}
.saved{display:flex;align-items:center;gap:6px}
.hud select,.hud button{font:600 11px var(--mono);letter-spacing:.06em;background:var(--surface-0);color:var(--ink);
  border:1px solid var(--line2);border-radius:4px;padding:5px 9px;cursor:pointer}
.hud #share{color:var(--grn);border-color:var(--grn-dim)}
.hud button:hover{border-color:var(--grn);box-shadow:var(--glow)}

/* ── terminal command line ── */
/* the WHY soul line (Wave 1·4) — a thin band under the command bar, on-brand */
.why{position:relative;z-index:9;padding:6px 16px;text-align:center;
  font:700 11px var(--mono);letter-spacing:.18em;color:var(--muted);
  background:linear-gradient(rgba(6,10,9,.55),rgba(6,10,9,0));border-bottom:1px solid var(--line2)}
.why b{color:var(--amber);font-weight:800}
.cmd{position:relative;z-index:10;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:10px 18px;border-bottom:1px solid var(--line);background:var(--surface-0);font-size:13.5px}
.cmd .p{color:var(--grn);font-weight:700} .cmd .k{color:var(--muted)}
.cmd input,.cmd select{font:600 13.5px var(--mono);background:transparent;color:var(--cyan);border:0;
  border-bottom:1px solid var(--line2);padding:2px 3px}
.cmd input:focus,.cmd select:focus{outline:0;border-bottom-color:var(--grn)}
.cmd #from,.cmd #to{width:9.5em}
/* #interval lives in the TUNE panel now; .tune-row input styles it (don't pin a
   narrow id-specific width here or the spinner arrows overlap the number). */
.cmd select{color:var(--cyan);cursor:pointer}
.cmd select option{background:var(--surface-1)}
.cmd .field{display:inline-flex;align-items:baseline;gap:6px}
.cmd .arrow{color:var(--grn-dim);font-size:15px;padding:0 2px}

/* TUNE popover: the four filters, labeled, with a live summary chip */
.tune{position:relative}
.tune-btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface-1);color:var(--ink);
  border:1px solid var(--line2);border-radius:5px;font:700 11px var(--mono);letter-spacing:.08em;padding:6px 11px;cursor:pointer}
.tune-btn .caret{color:var(--muted);font-size:9px;transition:transform var(--d-fast) var(--ease)}
.tune-btn:hover{border-color:var(--grn)}
.tune-btn[aria-expanded="true"]{border-color:var(--grn);box-shadow:var(--glow)}
.tune-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.tune-sum{color:var(--grn);font-size:10px;letter-spacing:.06em;font-weight:600}
.tune-panel{position:absolute;top:calc(100% + 9px);left:0;z-index:1200;width:330px;
  display:flex;flex-direction:column;gap:15px;background:var(--surface-1);border:1px solid var(--grn-dim);
  border-radius:9px;padding:17px 18px;box-shadow:0 18px 54px rgba(0,0,0,.62)}
.tune-panel[hidden]{display:none}
.tune-panel::before,.tune-panel::after{content:"";position:absolute;width:13px;height:13px;border:2px solid var(--grn);opacity:.6}
.tune-panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.tune-panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.tune-grp{display:flex;flex-direction:column;gap:6px}
.tune-lbl{font:700 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grn)}
.tune-row{color:var(--ink);font-size:12.5px;display:flex;align-items:center;gap:7px}
.tune-row input{width:7em;font:600 12.5px var(--mono);color:var(--cyan);
  background:var(--void);border:1px solid var(--line2);border-radius:4px;padding:5px 24px 5px 9px}
.tune-grp select{width:100%;background:var(--void);color:#eafff6;border:1px solid var(--line2);border-radius:5px;
  font:500 12.5px var(--mono);padding:8px 9px;cursor:pointer}
.tune-grp select:focus,.tune-row input:focus{outline:0;border-color:var(--grn)}
.tune-help{color:var(--faint);font-size:10.5px;letter-spacing:.02em}
/* Always clickable: it applies the current TUNE settings (a solid primary action). */
.tune-apply{margin-top:2px;width:100%;border-radius:6px;cursor:pointer;padding:12px;
  font:800 11px var(--mono);letter-spacing:.12em;background:var(--grn);color:var(--accent-deep);border:1px solid var(--grn)}
.tune-apply:hover{box-shadow:var(--glow)}

/* actions: PLOT (primary) + UPDATE (contextual ghost) */
.cmd-actions{display:flex;gap:7px;margin-left:auto}
.cmd .run{color:var(--grn);background:transparent;border:1px solid var(--grn);
  border-radius:4px;padding:5px 14px;font:700 11px var(--mono);letter-spacing:.12em;cursor:pointer;white-space:nowrap}
.cmd .run:hover{background:var(--grn);color:var(--accent-deep);box-shadow:var(--glow)}
.cmd .run:disabled{opacity:.5;cursor:progress}
.cmd .run.ghost{color:var(--muted);border-color:var(--line2);background:transparent}
.cmd .run.ghost:disabled{opacity:.35;cursor:not-allowed}
/* AVAILABLE: a route is on screen and a filter changed — pulse amber so the user
   sees there's a pending change to apply. Hover fills; reduced-motion = static glow. */
.cmd .run.ghost:not(:disabled){color:var(--amber);border-color:var(--amber);animation:updateReady 1.7s var(--ease) infinite}
.cmd .run.ghost:not(:disabled):hover{color:var(--accent-deep);background:var(--amber);border-color:var(--amber);box-shadow:0 0 16px rgba(255,180,84,.55);animation:none}
@keyframes updateReady{0%,100%{box-shadow:0 0 0 0 rgba(255,180,84,0)}50%{box-shadow:0 0 13px 1px rgba(255,180,84,.5)}}
@media (prefers-reduced-motion: reduce){.cmd .run.ghost:not(:disabled){animation:none;box-shadow:0 0 10px rgba(255,180,84,.4)}}

/* ── main ── */
main{flex:1;display:flex;min-height:0;position:relative;z-index:1}
#map{flex:1;min-height:0;position:relative;background:#04100c}
.leaflet-container{background:#04100c;font-family:var(--mono)}
/* CARTO dark tiles are dark already; a touch more contrast/greenshift to seat them in the cockpit */
.leaflet-tile-pane{filter:saturate(.55) brightness(.92) contrast(1.05)}
.leaflet-control-attribution{background:rgba(6,10,9,.7)!important;color:var(--faint)!important;font-size:9px}
.leaflet-control-attribution a{color:var(--muted)!important}
.leaflet-bar a{background:var(--surface-1)!important;color:var(--grn)!important;border-color:var(--line2)!important}
.leaflet-bar a:hover{background:var(--surface-2)!important}
.corner{position:absolute;width:24px;height:24px;border:2px solid var(--grn);opacity:.55;z-index:400;pointer-events:none}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0}.corner.br{bottom:12px;right:12px;border-left:0;border-top:0}
.maplabel{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:400;pointer-events:none;
  color:var(--faint);font-size:11px;letter-spacing:.32em}

/* ── map / globe view toggle (7.0) ── */
.viewtoggle{position:absolute;top:11px;right:14px;z-index:500;display:flex;border:1px solid var(--line2);
  border-radius:5px;overflow:hidden;background:rgba(8,16,14,.82);backdrop-filter:blur(8px)}
.viewtoggle .vt{background:transparent;color:var(--muted);border:0;cursor:pointer;
  font:700 10px var(--mono);letter-spacing:.16em;padding:6px 12px}
.viewtoggle .vt.active{background:var(--grn);color:var(--accent-deep)}
.viewtoggle .vt:not(.active):hover{color:var(--grn)}
/* The globe sits above the (now-hidden) Leaflet panes but below the cockpit
   chrome (corners z400, toggle z500, travelbar z600), which stays visible. */
#globe{position:absolute;inset:0;z-index:350;background:var(--void)}
#globe[hidden]{display:none}
#globe canvas{display:block}
#map.globe-on .leaflet-pane,#map.globe-on .leaflet-control-container{visibility:hidden}
/* HOME/reset button (in the view toggle) + globe-only zoom controls (Fred) */
.viewtoggle .vt.home{border-left:1px solid var(--line2);color:var(--muted)}
.viewtoggle .vt.home:hover{color:var(--amber)}
.globe-zoom{display:none}
#map.globe-on .globe-zoom{position:absolute;right:14px;top:84px;z-index:500;display:flex;flex-direction:column;gap:6px}
.globe-zoom button{width:38px;height:38px;font:700 20px var(--mono);line-height:1;
  background:rgba(8,16,14,.85);backdrop-filter:blur(8px);color:var(--grn);border:1px solid var(--line2);border-radius:6px;cursor:pointer}
.globe-zoom button:hover{border-color:var(--grn);box-shadow:var(--glow)}

/* ── globe coverage toggle ── */
.covbtn{position:absolute;top:46px;right:14px;z-index:500;background:rgba(8,16,14,.82);backdrop-filter:blur(8px);
  color:var(--grn);border:1px solid var(--grn-dim);border-radius:5px;font:700 10px var(--mono);letter-spacing:.14em;
  padding:6px 11px;cursor:pointer}
.covbtn[hidden]{display:none}
.covbtn:hover{border-color:var(--grn);box-shadow:var(--glow)}
.covbtn[aria-pressed="false"]{color:var(--muted);border-color:var(--line2)}

/* ── town video lookup modal ── */
#townlookup{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,7,.74);backdrop-filter:blur(9px)}
#townlookup[hidden]{display:none}
.tv-sheet{width:min(94vw,560px);max-height:86vh;display:flex;flex-direction:column}
.tv-search{position:relative;margin:4px 0 12px;display:flex;gap:8px}
#tv-q{flex:1;min-width:0;background:var(--void);border:1px solid var(--line2);border-radius:7px;color:#eafff6;
  font:600 15px var(--mono);padding:11px 13px}
#tv-q:focus{outline:0;border-color:var(--grn)}
#tv-surprise{flex:none;white-space:nowrap;background:rgba(0,255,156,.12);border:1px solid var(--grn);color:var(--grn);
  border-radius:7px;font:700 12px var(--mono);letter-spacing:.08em;padding:0 14px;cursor:pointer}
#tv-surprise:hover{background:rgba(0,255,156,.22);box-shadow:var(--glow)}
.tv-results{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start}
.tv-results .hint{grid-column:1/-1}
.tv-results .tv-card{display:block;border:0;background:none;padding:0;cursor:pointer;text-align:left}
.tv-results .tv-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid var(--line2);display:block}
.tv-results .tv-card .t{display:block;color:var(--ink);font:500 11px var(--mono);margin-top:5px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv-results .tv-card .m{color:var(--faint);font-size:10px}
.tv-results .tv-card:hover img{border-color:var(--grn)}

/* ── pick start/end on the map ── */
.picktools{position:absolute;top:11px;left:14px;z-index:500;display:flex;align-items:center;gap:6px;
  background:rgba(8,16,14,.82);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:7px;padding:4px 8px 4px 10px}
.pick-lbl{font:700 9px var(--mono);letter-spacing:.16em;color:var(--muted)}
.picktool{display:inline-flex;align-items:center;gap:6px;background:transparent;
  color:var(--ink);border:1px solid var(--line2);border-radius:5px;font:700 10px var(--mono);letter-spacing:.14em;
  padding:6px 11px;cursor:pointer;max-width:20ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* CRITICAL: .picktool sets display:inline-flex, which beats the UA [hidden] rule,
   so without this the hidden PLOT/× buttons stayed visible (the "greyed out" widget). */
.picktool[hidden]{display:none}
/* Three legible states. IDLE = tinted fill + bright border (reads as a button, not
   a faint tag). ARMED = solid + pulsing ring (tap the map now). SET = confirmed ✓. */
.picktool.start{color:var(--grn);border-color:var(--grn);background:rgba(0,255,156,.10)}
.picktool.end{color:var(--cyan);border-color:var(--cyan);background:rgba(58,214,255,.10)}
.picktool.start:hover{background:rgba(0,255,156,.20)} .picktool.end:hover{background:rgba(58,214,255,.20)}
.picktool.start.set{background:rgba(0,255,156,.20);color:#dffff1}
.picktool.end.set{background:rgba(58,214,255,.20);color:#e8fbff}
.picktool.start.armed{background:var(--grn);color:var(--accent-deep);border-color:var(--grn)}
.picktool.end.armed{background:var(--cyan);color:#062029;border-color:var(--cyan)}
.picktool.armed{animation:armPulse 1.35s var(--ease) infinite}
@keyframes armPulse{
  0%{box-shadow:0 0 12px rgba(255,255,255,.3),0 0 0 0 rgba(255,255,255,.4)}
  70%{box-shadow:0 0 12px rgba(255,255,255,.15),0 0 0 7px rgba(255,255,255,0)}
  100%{box-shadow:0 0 12px rgba(255,255,255,.15),0 0 0 0 rgba(255,255,255,0)}}
.picktool.go{background:var(--grn);color:var(--accent-deep);border-color:var(--grn);box-shadow:0 0 14px rgba(0,255,156,.45)}
.picktool.go:hover{box-shadow:0 0 20px rgba(0,255,156,.7)}
.picktool.clear{padding:6px 9px;font-size:13px;letter-spacing:0;color:var(--muted);background:transparent;border-color:var(--line2)}
.picktool.clear:hover{color:var(--red);border-color:var(--red)}
.picktool:disabled{opacity:.4;cursor:not-allowed;animation:none}
@media (prefers-reduced-motion: reduce){.picktool.armed{animation:none;box-shadow:0 0 14px rgba(255,255,255,.35)}}
#map.picking{cursor:crosshair}
#map.picking .leaflet-grab,#map.picking .leaflet-interactive,#map.picking #globe,#map.picking #globe canvas{cursor:crosshair}
.pickbanner{position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:600;pointer-events:none;
  background:rgba(8,16,14,.94);border:1px solid var(--grn);border-radius:6px;padding:9px 17px;
  color:var(--grn);font:700 11px var(--mono);letter-spacing:.1em;box-shadow:0 8px 30px rgba(0,0,0,.55)}
.pickbanner b{color:#fff} .pickbanner.end{border-color:var(--cyan);color:var(--cyan)}
.pickbanner[hidden]{display:none}
.pickbanner.err{border-color:var(--red);color:var(--red)}
.pickbanner small{color:var(--muted);letter-spacing:.1em;font-weight:500}
/* reticle endpoint pins — a bracketed crosshair, distinct from round stop markers */
.pin{display:flex;align-items:center;justify-content:center;width:30px;height:30px;font:800 18px var(--mono);
  line-height:1}
.pin span{filter:drop-shadow(0 0 5px currentColor)}
.pin.start{color:var(--grn)} .pin.end{color:var(--cyan)}
.pin-tag{position:absolute;left:50%;top:30px;transform:translateX(-50%);white-space:nowrap;
  font:700 9.5px var(--mono);letter-spacing:.1em;padding:2px 6px;border-radius:3px;background:rgba(6,10,9,.9);border:1px solid currentColor}

/* ── travel bar ── */
#travelbar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:600;display:flex;gap:6px;
  background:rgba(8,16,14,.85);backdrop-filter:blur(9px);border:1px solid var(--line2);border-radius:999px;padding:5px 7px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
#travelbar[hidden]{display:none}
#travelbar button{background:transparent;color:var(--ink);border:0;border-radius:999px;padding:6px 11px;font:700 11px var(--mono);letter-spacing:.1em;cursor:pointer}
#travelbar #play{background:var(--grn);color:var(--accent-deep)}
#travelbar button:hover{background:var(--surface-2)} #travelbar #play:hover{box-shadow:var(--glow)}

/* ── numbered town nodes ── */
.town-marker span{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;
  background:var(--void);color:var(--grn);font:700 11px var(--mono);border:2px solid var(--grn);box-shadow:0 0 8px rgba(0,255,156,.55)}
.town-marker.drop span{animation:drop .55s var(--ease-snap) both}
.town-marker.active span{background:var(--amber);color:#241200;border-color:var(--amber);animation:pulse 1.8s var(--ease) infinite}
.traveler span{display:block;width:16px;height:16px;border-radius:50%;background:var(--amber);border:2px solid #241200;
  box-shadow:0 0 12px rgba(255,180,84,.9),0 0 0 6px rgba(255,180,84,.14)}

/* ── dossier panel ── */
#panel{width:380px;max-width:46vw;overflow-y:auto;padding:14px 12px 80px;background:var(--surface-0);
  border-left:1px solid var(--line2);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.hint{color:var(--muted);font-size:12px;letter-spacing:.04em}
.stop{position:relative;overflow:hidden;display:block;padding:11px 12px;margin-bottom:10px;cursor:pointer;
  background:var(--surface-1);border:1px solid var(--line);border-left:2px solid var(--grn-dim);border-radius:5px;
  opacity:0;transform:translateY(14px);
  transition:opacity var(--d-smooth) var(--ease),transform var(--d-smooth) var(--ease),border-color var(--d-fast) var(--ease-snap),background var(--d-fast)}
.stop.in{opacity:1;transform:none}
.stop::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(150px circle at var(--cx,50%) var(--cy,50%),rgba(0,255,156,.12),transparent 70%);transition:opacity var(--d-fast)}
.stop:hover::before{opacity:1}
.stop>*{position:relative;z-index:1}
.stop:hover{transform:translateY(-3px);border-color:var(--grn);background:var(--surface-2)}
.stop.active{border-left-color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,180,84,.16)}
.stop .num{display:none}
.stop .town{display:flex;flex-direction:column}
.stop .eyebrow{font:600 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--grn);margin-bottom:2px;display:flex;align-items:center;gap:7px}
.stop.active .eyebrow{color:var(--amber)}
.stop .grade{margin-left:auto;border:1px solid var(--grn);color:var(--grn);border-radius:3px;font-weight:800;font-size:10px;padding:0 6px;letter-spacing:.04em}
.stop .grade.b{border-color:var(--cyan);color:var(--cyan)} .stop .grade.none{border-color:var(--red);color:var(--red)}
.stop .town b{font-size:15px;font-weight:700;letter-spacing:.03em;color:#eafff6}
.stop.active .town b{color:var(--amber)}
.stop .town small{color:var(--cyan);font-size:11px;letter-spacing:.06em;margin:2px 0 9px;opacity:.85}
/* AI town personality line (BL-06) — the character of the place, set apart */
.stop .town .blurb{margin:3px 0 6px;color:#cfe9df;font-size:12px;line-height:1.35;font-style:italic;
  border-left:2px solid var(--grn-dim);padding-left:8px}
/* top-clip telemetry readout — real length · reach · channel (Wave 1·3) */
.stop .town .clip{display:block;max-width:100%;color:var(--cyan);opacity:.8;font-size:10px;
  letter-spacing:.03em;margin:1px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stop .vids{display:flex;gap:6px;flex-wrap:wrap}
.stop .vids a,.stop .vids button.thumb{padding:0;border:0;background:none;cursor:pointer;border-radius:4px;display:block;line-height:0;position:relative}
.stop .vids img{width:86px;height:48px;object-fit:cover;border-radius:4px;display:block;border:1px solid var(--line2);filter:saturate(.9);transition:transform var(--d-fast) var(--ease-snap)}
.stop .vids a:hover img,.stop .vids button.thumb:hover img{transform:scale(1.05)}
.stop .none{color:var(--red);font-size:11px;letter-spacing:.08em;font-style:normal}
/* footage streaming in (BL-04): a calm green shimmer, not the red "no footage" */
.stop .none.loading{color:var(--grn);opacity:.75;animation:footagePulse 1.25s var(--ease) infinite}
@keyframes footagePulse{0%,100%{opacity:.35}50%{opacity:.85}}
@media (prefers-reduced-motion: reduce){.stop .none.loading{animation:none;opacity:.7}}

/* ── footage takeover ── */
#stage{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:rgba(4,8,7,.78);backdrop-filter:blur(14px);opacity:0;transition:opacity var(--d-base) var(--ease)}
#stage.show{opacity:1} #stage[hidden]{display:none}
.stage-frame{width:min(92vw,1100px);aspect-ratio:16/9;background:#000;border:1px solid var(--grn-dim);border-radius:10px;overflow:hidden;
  box-shadow:0 0 50px rgba(0,255,156,.2);transform:scale(.94);transition:transform var(--d-smooth) var(--ease)}
#stage.show .stage-frame{transform:scale(1)}
.stage-frame iframe{width:100%;height:100%;border:0;display:block}
.stage-caption{font:700 1.05rem var(--mono);letter-spacing:.06em;color:var(--grn)}
#stage-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;background:var(--surface-1);color:var(--ink);font-size:1.4rem;cursor:pointer}
#stage-close:hover{border-color:var(--grn)}

/* ── share sheet ── */
#sharesheet{position:fixed;inset:0;z-index:2100;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,7,.7);backdrop-filter:blur(8px)}
#sharesheet[hidden]{display:none}
.sheet{position:relative;width:min(92vw,440px);background:var(--surface-1);border:1px solid var(--line2);border-radius:10px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#share-close{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--muted);font-size:1.3rem;cursor:pointer}
.sheet-h{color:var(--grn);font-size:11px;letter-spacing:.2em;margin-bottom:14px}
.sheet-url{display:flex;gap:6px;margin-bottom:14px}
.sheet-url input{flex:1;min-width:0;background:var(--void);border:1px solid var(--line2);border-radius:5px;color:var(--cyan);font:12px var(--mono);padding:9px 10px}
.sheet-url button{background:var(--grn);color:var(--accent-deep);border:0;border-radius:5px;font:700 11px var(--mono);letter-spacing:.08em;padding:0 14px;cursor:pointer}
.sheet-row{display:flex;gap:8px;flex-wrap:wrap}
.sheet-row a,.sheet-row button{flex:1;text-align:center;background:var(--surface-2);border:1px solid var(--line2);border-radius:6px;color:var(--ink);
  font:600 11px var(--mono);letter-spacing:.06em;padding:10px;cursor:pointer;text-decoration:none}
.sheet-row a:hover,.sheet-row button:hover{border-color:var(--grn);color:var(--grn)}

/* ── cheat-code footer ── */
.foot{position:relative;z-index:10;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 18px;
  border-top:1px solid var(--line2);background:var(--surface-0)}
.foot .lbl{color:var(--faint);font-size:10px;letter-spacing:.2em;margin-right:4px}
.code{border:1px solid var(--line2);border-radius:3px;padding:3px 8px;font-size:10.5px;color:var(--muted)}
.code b{color:var(--grn)} #foot-status{color:var(--grn);border-color:var(--grn-dim)}

/* ── town autocomplete ── */
.ac{position:fixed;z-index:1500;margin:0;padding:4px;list-style:none;min-width:220px;max-height:264px;overflow-y:auto;
  background:var(--surface-1);border:1px solid var(--grn-dim);border-radius:7px;box-shadow:0 14px 44px rgba(0,0,0,.6);
  font:500 12px var(--mono);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.ac[hidden]{display:none}
.ac li{display:flex;align-items:baseline;gap:9px;padding:7px 10px;border-radius:5px;cursor:pointer}
.ac li .nm{color:#eafff6} .ac li .rg{color:var(--grn);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.ac li .pp{margin-left:auto;color:var(--faint);font-size:10px;font-variant-numeric:tabular-nums}
.ac li[aria-selected="true"]{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--grn-dim)}
.ac li:hover{background:var(--surface-2)}

/* ── uplink: screen-locking progress overlay ── */
#uplink{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(3,7,6,.82);backdrop-filter:blur(10px);opacity:0;transition:opacity .32s var(--ease)}
#uplink.show{opacity:1}
#uplink[hidden]{display:none}
.ul-scan{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,255,156,.035) 2px 3px)}
.ul-card{position:relative;width:min(92vw,560px);background:linear-gradient(180deg,rgba(8,18,15,.96),rgba(5,11,9,.96));
  border:1px solid var(--grn-dim);border-radius:10px;padding:22px 22px 18px;box-shadow:0 0 60px rgba(0,255,156,.16),inset 0 0 0 1px rgba(0,255,156,.05);
  transform:translateY(8px) scale(.985);transition:transform .32s var(--ease);outline:none}
#uplink.show .ul-card{transform:none}
.ul-card::before,.ul-card::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--grn);opacity:.7}
.ul-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ul-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.ul-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.ul-dot{width:9px;height:9px;border-radius:50%;background:var(--grn);box-shadow:0 0 10px var(--grn);animation:ulpulse 1.1s var(--ease) infinite}
.ul-dot.err{background:var(--red);box-shadow:0 0 10px var(--red);animation:none}
.ul-dot.done{background:var(--grn);animation:none}
.ul-title{font:800 13px var(--mono);letter-spacing:.16em;color:var(--ink)}
.ul-title.err{color:var(--red)}
.ul-pct{margin-left:auto;font:800 15px var(--mono);color:var(--grn);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ul-bar{height:6px;border-radius:3px;background:rgba(0,255,156,.1);overflow:hidden;border:1px solid var(--line2)}
.ul-fill{height:100%;width:0;background:linear-gradient(90deg,var(--grn-dim),var(--grn));box-shadow:0 0 12px rgba(0,255,156,.6);
  transition:width .3s var(--ease)}
.ul-fill.err{background:var(--red);box-shadow:0 0 12px rgba(255,90,90,.6)}
.ul-phase{margin:9px 0 6px;font:700 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grn)}
.ul-phase.err{color:var(--red)}
.ul-log{height:148px;overflow-y:auto;font:500 11.5px var(--mono);line-height:1.7;color:var(--muted);
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;padding-right:6px}
.ul-log .ok{color:#bdf} .ul-log .ok b{color:var(--grn)}
.ul-log .warn{color:var(--amber)} .ul-log .none{color:var(--faint)} .ul-log .bad{color:var(--red)}
.ul-log .hd{color:var(--ink)}
.ul-actions{display:flex;gap:8px;margin-top:14px}
.ul-btn{flex:1;background:var(--grn);color:var(--accent-deep);border:0;border-radius:6px;cursor:pointer;
  font:800 12px var(--mono);letter-spacing:.1em;padding:11px}
.ul-btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line2)}
.ul-btn.ghost:hover{border-color:var(--grn);color:var(--grn)} .ul-btn:hover{box-shadow:var(--glow)}
@keyframes ulpulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){
  #uplink,.ul-card,.ul-fill{transition:none} .ul-dot{animation:none}
}

/* ── loader ── */
#loader{position:fixed;inset:0;z-index:9999;background:var(--void);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;transition:opacity .9s var(--ease)}
#loader.done{opacity:0;pointer-events:none}
#loader .lo-word{font:800 clamp(40px,9vw,100px) var(--mono);letter-spacing:.06em;color:var(--ink);text-shadow:var(--glow)}
#loader .lo-count{font:700 1rem var(--mono);color:var(--grn);letter-spacing:.4em}

/* ── grain ── */
.grain{position:fixed;inset:0;pointer-events:none;z-index:70;background:radial-gradient(ellipse at center,transparent 56%,rgba(0,0,0,.3) 100%)}
.grain::before{content:"";position:absolute;inset:-50%;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}

@keyframes blink{50%{opacity:0}}
@keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.6)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,180,84,.4)}70%{box-shadow:0 0 0 13px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(4%,3%)}}

/* mobile-only chrome is hidden on desktop */
.mob-only{display:none}

/* On touch devices, kill sticky :hover states that look stuck after a tap. */
@media (hover:none){
  .stop:hover{transform:none;border-color:var(--line);background:var(--surface-1)}
  .stop:hover::before{opacity:0}
  .stop .vids a:hover img,.stop .vids button.thumb:hover img{transform:none}
}

/* ── MOBILE: full-bleed fixed map + overlay chrome + swipe-up town sheet ──
   The map owns the whole viewport and never resizes, so app.js is untouched;
   everything else floats over it as layers. */
@media (max-width:680px){
  .why{display:none}
  .mob-only{display:flex}

  main{position:fixed;inset:0;display:block;z-index:1}
  #map{position:absolute;inset:0}

  /* top bar: brand + EDIT TRIP + saved/share; telemetry is desktop flair (hidden) */
  .hud{position:fixed;top:0;left:0;right:0;z-index:800;gap:8px;flex-wrap:nowrap;overflow:hidden;
    padding:calc(env(safe-area-inset-top) + 8px) 12px 9px;
    background:linear-gradient(180deg,var(--surface-0) 40%,rgba(6,10,9,.82) 80%,transparent)}
  .brand{font-size:15px}
  .tele{display:none}
  #mob-edit{align-items:center;white-space:nowrap;background:var(--surface-1);color:var(--grn);border:1px solid var(--grn-dim);
    border-radius:6px;font:700 11px var(--mono);letter-spacing:.06em;padding:8px 11px;cursor:pointer;min-height:38px}
  .hud .saved{gap:5px;margin-left:auto}
  .hud .saved #saved{max-width:86px;font-size:10px;min-height:38px}
  .hud .saved button{min-height:38px;min-width:38px}

  /* command line → SET-UP-TRIP bottom sheet (opened by EDIT TRIP) */
  .cmd{position:fixed;left:0;right:0;bottom:0;z-index:1300;flex-direction:column;align-items:stretch;gap:11px;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--grn-dim);
    border-radius:14px 14px 0 0;background:var(--surface-1);box-shadow:0 -18px 50px rgba(0,0,0,.62);
    transform:translateY(112%);transition:transform .3s var(--ease)}
  body.setup-open .cmd{transform:none}
  body.setup-open::after{content:"";position:fixed;inset:0;z-index:1290;background:rgba(3,7,6,.6)}
  .cmd .p,.cmd .arrow,.cmd>.k{display:none}
  .setup-head{justify-content:space-between;align-items:center;color:var(--grn);font:700 11px var(--mono);letter-spacing:.18em}
  .setup-head button{background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer;min-height:44px;min-width:44px}
  .cmd .field{display:flex;align-items:center;gap:8px;background:var(--void);border:1px solid var(--line2);border-radius:7px;padding:2px 10px}
  .cmd .field label{min-width:2.8em}
  .cmd #from,.cmd #to{flex:1;width:auto;border:0;font-size:15px;padding:9px 2px}
  .cmd .tune{width:100%} .cmd .tune-btn{width:100%;justify-content:center;min-height:44px}
  .cmd-actions{margin-left:0;display:flex;gap:8px}
  .cmd .run{flex:1;text-align:center;min-height:46px;font-size:12px}

  /* TUNE → full-width bottom sheet */
  .tune-panel{position:fixed;inset:auto 0 0 0;width:auto;left:0;right:0;border-radius:12px 12px 0 0;
    max-height:80vh;overflow-y:auto;z-index:1400;padding-bottom:calc(18px + env(safe-area-inset-bottom))}

  /* map tools stay on the map, below the top bar, 40px+ targets */
  .picktools{top:calc(env(safe-area-inset-top) + 54px);left:12px}
  .viewtoggle{top:calc(env(safe-area-inset-top) + 54px);right:12px}
  .picktool,.vt{min-height:40px}
  .pickbanner{top:calc(env(safe-area-inset-top) + 100px)}
  .maplabel{display:none}

  /* the town panel is a swipe-up bottom sheet (PEEK ↔ HALF ↔ FULL via sheet.js) */
  #panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;height:90vh;
    border-left:0;border-top:1px solid var(--line2);border-radius:16px 16px 0 0;z-index:700;
    padding:0 12px calc(86px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateY(var(--sheet-y,calc(90vh - 108px)));transition:transform .32s var(--ease);
    box-shadow:0 -18px 50px rgba(0,0,0,.6)}
  body.sheet-dragging #panel{transition:none}
  .sheet-handle{display:block;position:sticky;top:0;width:100%;height:30px;border:0;background:var(--surface-0);
    cursor:grab;border-radius:16px 16px 0 0;touch-action:none}
  .sheet-handle::before{content:"";position:absolute;left:50%;top:11px;transform:translateX(-50%);
    width:42px;height:4px;border-radius:3px;background:var(--line2)}
  #panel .hint{padding:6px 4px}

  /* travel bar rides just above the sheet lip */
  #travelbar{bottom:calc(var(--sheet-h,108px) + 12px + env(safe-area-inset-bottom));z-index:760}
  #travelbar button{min-height:40px}
  .leaflet-bottom{margin-bottom:var(--sheet-h,108px)}
  .leaflet-control-attribution{font-size:8px}

  .foot{display:none}
  .ul-log{height:min(148px,30vh)}
  #ac{max-height:min(264px,42vh)}

  /* share sheet → bottom sheet */
  #sharesheet{align-items:flex-end}
  #sharesheet .sheet{width:100%;border-radius:12px 12px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

@media (max-width:430px){
  .brand{font-size:14px}
  #mob-edit{font-size:10px;padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .stop{opacity:1;transform:none} #loader{display:none}
}