/* ===== BASE — Base element styles, resets, typography, globe canvas ===== */
/* ============ BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
/* html gets the theme background too: on phones the strip behind the home
   indicator / bottom bar is painted from html, and it flashed white. */
html{background:radial-gradient(120% 90% at 50% 10%,var(--bg2) 0%,var(--bg) 60%)}
html,body{height:100%;height:100dvh;overflow:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;
  background:radial-gradient(120% 90% at 50% 10%,var(--bg2) 0%,var(--bg) 60%);
  transition:background .4s, color .4s}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-0.17em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}
.iconbtn .ic,.tbModes .ic,.navModes .ic,.modeRow .ic{width:17px;height:17px;vertical-align:middle}
.navpill .ic{width:16px;height:16px}
#zoomCtl .ic{width:19px;height:19px}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink);background:var(--input);
  border:1px solid var(--input-border);border-radius:10px;padding:9px 11px;width:100%;outline:none}
input[type=checkbox],input[type=radio]{width:auto;flex:none;padding:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:70px}
a{color:var(--accent)}
::selection{background:var(--accent);color:#241a05}
.eyebrow{font-family:var(--disp);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Opaque theme background on the canvas itself: iOS Safari tints the status
   area by sampling the page's topmost pixels, and a transparent WebGL canvas
   sampled against Safari's default surface read as white. */
#globe{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;cursor:grab;
  background:radial-gradient(120% 90% at 50% 10%,var(--bg2) 0%,var(--bg) 60%)}
#globe.dragging{cursor:grabbing}
#globe.pinmode{cursor:default}
#streetmap{position:fixed;inset:0;z-index:5;display:none;background:var(--bg);opacity:0;
  transition:opacity .45s ease;pointer-events:none}
#streetmap.show{opacity:1;pointer-events:auto}
#globe{transition:opacity .45s ease}
#streetmap.pinmode .leaflet-container, #streetmap.pinmode{cursor:default}
html[data-theme="dark"] #streetmap:not(.sat-base) .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.6)}
.leaflet-top.leaflet-left{top:64px}
.leaflet-container{font-family:var(--body)}
#routeEditBar{position:fixed;z-index:30;top:66px;left:50%;transform:translateX(-50%);display:none;
  align-items:center;gap:8px;background:var(--panel-solid);border:1px solid var(--panel-border);
  border-radius:12px;box-shadow:var(--shadow);padding:8px 12px;font-size:12.5px;max-width:92vw;flex-wrap:wrap}
#routeEditBar b{font-size:13px}
#routeEditBar .mono{color:var(--muted);font-size:11px}
#routeEditBar .smallbtn.armed{background:var(--accent);color:#241a05;border-color:transparent}
.viaDot{width:16px;height:16px;border-radius:50%;background:#ff8c42;border:2.5px solid #10142c;
  box-shadow:0 0 0 2px rgba(255,255,255,.4);cursor:grab}
.stopDot{width:18px;height:18px;border-radius:50%;background:#f0b24a;border:2.5px solid #10142c;
  box-shadow:0 0 0 2px rgba(255,255,255,.4)}
#tileWarn{position:absolute;z-index:800;top:76px;left:50%;transform:translateX(-50%);display:none;
  background:var(--panel-solid);border:1px solid var(--panel-border);color:var(--ink);box-shadow:var(--shadow);
  border-radius:12px;padding:10px 16px;font-size:12.5px;text-align:center;line-height:1.5;max-width:min(430px,90vw)}
.mapmode #layerCtl{display:none}
.dmarker{border-radius:50%;border:2px solid rgba(10,14,30,.9);box-shadow:0 0 0 2px rgba(255,255,255,.25)}