/* eFind Maps v2 - app styles
   Desktop (>=760px): floating left panel. Mobile: top search bar + bottom sheet. */

/* ---------- tokens ---------- */
:root{
  --brand:#1877f2; --brand-ink:#ffffff; --brand-soft:#e7f0fe;
  --good:#1e8e3e; --warn:#e37400; --bad:#d93025;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f1f3f4; --hover:#f1f3f4;
  --text:#202124; --muted:#5f6368; --faint:#9aa0a6; --border:#dadce0;
  --shadow:0 1px 2px rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-lg:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
  --radius:12px; --pill:24px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  --panel-w:408px; --gap:12px;
  --sheet-h:0px; /* height of the mobile sheet currently covering the map, set by JS */
  --footer-h:28px;
  --map-bottom:max(var(--sheet-h), var(--footer-h)); /* what covers the bottom of the map: sheet or footer */
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#5b9dff; --brand-ink:#0b1b33; --brand-soft:#1d2d45;
    --good:#5bb974; --warn:#fbbc04; --bad:#f28b82;
    --bg:#1f2124; --surface:#2a2c30; --surface-2:#35373c; --hover:#3a3d42;
    --text:#e8eaed; --muted:#bdc1c6; --faint:#80868b; --border:#45484e;
    --shadow:0 1px 3px rgba(0,0,0,.6),0 2px 8px 2px rgba(0,0,0,.35);
    --shadow-lg:0 6px 16px 4px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#5b9dff; --brand-ink:#0b1b33; --brand-soft:#1d2d45;
  --good:#5bb974; --warn:#fbbc04; --bad:#f28b82;
  --bg:#1f2124; --surface:#2a2c30; --surface-2:#35373c; --hover:#3a3d42;
  --text:#e8eaed; --muted:#bdc1c6; --faint:#80868b; --border:#45484e;
  --shadow:0 1px 3px rgba(0,0,0,.6),0 2px 8px 2px rgba(0,0,0,.35);
  --shadow-lg:0 6px 16px 4px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .fill{fill:currentColor;stroke:none}
a{color:var(--brand)}
#map{position:fixed;inset:0}
.noscript{position:fixed;inset:auto 0 50% 0;text-align:center}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- buttons ---------- */
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);flex:none}
.icon-btn:hover{background:var(--hover)}
.icon-btn.accent{color:var(--brand)}
.icon-btn.accent svg .stroke-inv{stroke:var(--surface);stroke-width:1.8}
.text-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:18px;color:var(--brand);font-weight:500}
.text-btn svg{width:18px;height:18px}
.text-btn:hover{background:var(--brand-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--border);background:var(--surface);color:var(--brand);font-weight:500;white-space:nowrap}
.btn:hover{background:var(--brand-soft)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn svg{width:18px;height:18px}

/* ---------- panel (desktop) ---------- */
.panel{position:fixed;z-index:20;top:var(--gap);left:var(--gap);width:var(--panel-w);max-height:calc(100% - 2*var(--gap) - var(--footer-h));display:flex;flex-direction:column;gap:8px;pointer-events:none}
.panel > *{pointer-events:auto}
.searchbar{display:flex;align-items:center;gap:2px;height:48px;padding:0 4px;background:var(--surface);border-radius:var(--pill);box-shadow:var(--shadow)}
.searchbar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:15px;padding:0 4px}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar .divider{width:1px;height:24px;background:var(--border);margin:0 4px}
.suggest{list-style:none;margin:0;padding:6px 0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);max-height:min(60vh,520px);overflow:auto}
.suggest li{display:flex;align-items:center;gap:12px;padding:8px 16px;cursor:pointer}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--hover)}
.suggest .s-ico{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--muted);flex:none}
.suggest .s-ico svg{width:18px;height:18px}
.suggest .s-main{min-width:0;flex:1}
.suggest .s-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest .s-sub{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest .s-dist{color:var(--faint);font-size:12px;flex:none}
.suggest .s-head{padding:6px 16px 2px;font-size:12px;color:var(--muted);cursor:default}
.suggest .s-head:hover{background:none}

.sheet{display:flex;flex-direction:column;min-height:0;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.sheet-handle{display:none}
.panel-body{overflow:auto;min-height:0;outline:0;overscroll-behavior:contain}

/* ---------- directions form ---------- */
.dir-form{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 8px 6px}
.dir-top{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.modes{display:flex;gap:4px;flex:1;justify-content:center}
.modes button{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;color:var(--muted)}
.modes button svg{width:20px;height:20px}
.modes button:hover{background:var(--hover)}
.modes button[aria-selected="true"]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.stops{list-style:none;margin:0;padding:0 4px 0 0;position:relative}
.stop{display:flex;align-items:center;gap:8px;position:relative}
.stop + .stop{margin-top:8px}
.stop .dot{width:24px;height:24px;flex:none;display:grid;place-items:center;position:relative}
.stop .dot i{width:12px;height:12px;border-radius:50%;border:2.5px solid var(--muted);background:var(--surface)}
.stop:last-child .dot i{border:0;width:16px;height:20px;border-radius:0;background:var(--bad);clip-path:path("M8 0a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8z")}
.stop .dot b{font-size:11px;color:var(--muted)}
.stop:not(:last-child) .dot::after{content:"";position:absolute;top:24px;left:11px;height:8px;border-left:2px dotted var(--faint)}
.stop .field{flex:1;min-width:0;position:relative}
.stop input{width:100%;height:38px;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:0 10px;outline:0}
.stop input:focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.stop .rm{width:32px;height:32px}
.stop .rm svg{width:18px;height:18px}
.dir-actions{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px}
.dir-opts{display:flex;flex-wrap:wrap;gap:6px 16px;padding:6px 10px 4px;color:var(--muted)}
.dir-opts label{display:flex;align-items:center;gap:6px;cursor:pointer}
.stop-suggest{position:absolute;left:0;right:0;top:42px;z-index:5}

/* ---------- body content ---------- */
.place{padding:16px 16px 12px}
.place h1{font-size:22px;line-height:1.25;font-weight:500;margin:0 0 4px}
.place .cat{color:var(--muted);margin-bottom:4px;text-transform:capitalize}
.place .addr{color:var(--text);margin:10px 0 2px;display:flex;gap:10px;align-items:flex-start}
.place .addr svg,.place .row svg{width:20px;height:20px;color:var(--brand);margin-top:1px}
.place .row{display:flex;gap:10px;align-items:center;margin:8px 0;word-break:break-word}
.place .coords{color:var(--muted);font-size:12.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;padding:4px 16px 16px;border-bottom:1px solid var(--border)}
.close-x{position:absolute;right:8px;top:8px}
.rel{position:relative}
.section-title{padding:12px 16px 4px;font-size:13px;color:var(--muted);font-weight:500}
.results{list-style:none;margin:0;padding:0}
.results li{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.results li:hover,.results li.on{background:var(--hover)}
.results .r-n{font-weight:500}
.results .r-s{color:var(--muted);font-size:13px}
.results .r-num{width:22px;height:22px;border-radius:50%;background:var(--bad);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;flex:none;margin-top:1px}
.empty{padding:20px 16px;color:var(--muted)}
.spinner{width:22px;height:22px;border:3px solid var(--surface-2);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* routes */
.routes{list-style:none;margin:0;padding:0}
.route{display:grid;grid-template-columns:28px 1fr auto;gap:4px 12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;border-left:4px solid transparent}
.route:hover{background:var(--hover)}
.route.on{border-left-color:var(--brand);background:var(--brand-soft)}
.route .m-ico{color:var(--muted);grid-row:span 2;padding-top:2px}
.route .via{font-weight:500}
.route .sub{color:var(--muted);font-size:13px}
.route .time{text-align:right;font-size:17px;font-weight:600}
.route .time.traffic-low{color:var(--good)} .route .time.traffic-mod{color:var(--warn)} .route .time.traffic-high{color:var(--bad)}
.route .dist{text-align:right;color:var(--muted);font-size:13px}
.route .details{grid-column:2 / 4;margin-top:4px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.badge{font-size:11.5px;padding:1px 8px;border-radius:10px;background:var(--surface-2);color:var(--muted)}
.badge.best{background:var(--good);color:#fff}
.steps{list-style:none;margin:0;padding:4px 0 8px}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:4px 14px;padding:10px 16px;cursor:pointer}
.steps li:hover{background:var(--hover)}
.steps .st-ico{color:var(--muted);display:grid;place-items:center}
.steps .st-txt{line-height:1.35}
.steps .st-d{grid-column:2;color:var(--faint);font-size:12.5px;border-bottom:1px solid var(--border);padding-bottom:8px}
.steps-head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 4px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.steps-head .t{font-weight:600;font-size:16px}
.steps-head .s{color:var(--muted);font-size:13px}
.note{padding:10px 16px;color:var(--muted);font-size:12.5px}

/* ---------- map buttons ---------- */
.fab{position:fixed;z-index:15;width:44px;height:44px;border-radius:8px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);display:grid;place-items:center}
.fab:hover{background:var(--hover)}
.fab.layers{right:var(--gap);top:var(--gap)}
.popover{position:fixed;z-index:30;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px}
.layers-pop{right:var(--gap);top:calc(var(--gap) + 52px);width:280px;padding:4px 14px 14px}
.pop-title{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em;margin:12px 0 8px;text-transform:uppercase}
.map-types{display:flex;gap:12px}
.maptype{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12.5px;color:var(--muted)}
.maptype .thumb{display:block;width:64px;height:64px;border-radius:10px;border:2px solid transparent;object-fit:cover;color:transparent}
.maptype[aria-pressed="true"]{color:var(--brand);font-weight:600}
.maptype[aria-pressed="true"] .thumb{border-color:var(--brand)}
.t-default{background:linear-gradient(135deg,#f2efe9 0%,#e4e0d8 45%,#c8dff2 100%)} /* shown until the preview loads */
.t-sat{background:linear-gradient(135deg,#4b5d3c 0%,#6d6a52 50%,#3f5163 100%)}
.switch{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.switch input{appearance:none;width:34px;height:20px;border-radius:10px;background:var(--border);position:relative;cursor:pointer;flex:none;transition:background .15s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.switch input:checked{background:var(--brand)}
.switch input:checked::after{left:16px}
.seg{display:flex;background:var(--surface-2);border-radius:8px;padding:3px}
.seg button{flex:1;height:30px;border-radius:6px;color:var(--muted);font-size:13px}
.seg button[aria-checked="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.traffic-legend{position:fixed;z-index:10;left:50%;transform:translateX(-50%);bottom:calc(var(--map-bottom) + 34px);display:flex;align-items:center;gap:4px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:4px 12px;font-size:12px;color:var(--muted)}
.traffic-legend i{width:22px;height:6px;border-radius:3px}
.tl-low{background:#34a853}.tl-mod{background:#f9ab00}.tl-heavy{background:#ea4335}.tl-severe{background:#a50e0e}

/* context menu */
.ctx{width:230px;padding:6px 0}
.ctx button{display:block;width:100%;text-align:left;padding:9px 16px}
.ctx button:hover{background:var(--hover)}
.ctx-coords{padding:6px 16px 8px;color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--border);margin-bottom:4px;font-variant-numeric:tabular-nums}

/* side menu */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35)}
.menu{position:fixed;z-index:41;top:0;bottom:0;left:0;width:300px;max-width:85vw;background:var(--surface);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slidein .18s ease-out}
@keyframes slidein{from{transform:translateX(-100%)}}
.menu-head{display:flex;align-items:center;gap:8px;padding:14px 8px 14px 18px;font-size:18px;border-bottom:1px solid var(--border)}
.menu-head b{color:var(--brand)}
.menu-head .icon-btn{margin-left:auto}
.menu nav{padding:8px 0;overflow:auto}
.menu hr{border:0;border-top:1px solid var(--border);margin:8px 0}
.menu-item{display:flex;align-items:center;gap:16px;width:100%;padding:11px 20px;color:var(--text);text-decoration:none;text-align:left}
.menu-item:hover{background:var(--hover)}
.menu-item svg{width:20px;height:20px;color:var(--muted)}
.menu-item.small{padding:7px 20px;font-size:13px;color:var(--muted)}

/* toast */
.toast{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:calc(var(--map-bottom) + 40px);background:#323232;color:#fff;padding:10px 18px;border-radius:8px;box-shadow:var(--shadow-lg);max-width:min(90vw,480px);font-size:14px}

/* markers */
.pin{width:28px;height:40px;cursor:pointer;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.pin svg{width:28px;height:40px;stroke:none}
.pin .body{fill:var(--bad)}
.pin .hole{fill:#7a1712}
.pin.small{width:22px;height:31px}.pin.small svg{width:22px;height:31px}
.pin-num{position:absolute;top:5px;left:0;right:0;text-align:center;color:#fff;font:600 12px var(--font)}
.stop-mk{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #202124;display:grid;place-items:center;font:700 12px var(--font);color:#202124;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab}
.stop-mk.end{background:var(--bad);border-color:#fff;color:#fff}
.stop-mk.start{background:#fff;border-color:#202124}

/* ---------- Mapbox control tweaks ---------- */
.mapboxgl-ctrl-group{border-radius:8px!important;box-shadow:var(--shadow)!important;background:var(--surface)!important}
.mapboxgl-ctrl-group button{width:36px!important;height:36px!important}
.mapboxgl-ctrl-group button+button{border-top-color:var(--border)!important}
:root[data-theme="dark"] .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon{filter:invert(1) hue-rotate(180deg)}}
.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-bottom-left{bottom:var(--map-bottom);transition:bottom .2s}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin:0 var(--gap) 10px 0}
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl{margin:0 0 6px 10px}
.mapboxgl-ctrl-scale{background:rgba(255,255,255,.75);border-color:#5f6368;color:#202124;font-size:10px}
.mapboxgl-popup-content{background:var(--surface);color:var(--text);border-radius:8px;box-shadow:var(--shadow);padding:8px 12px;font:13px var(--font)}
.mapboxgl-popup-tip{border-top-color:var(--surface)!important;border-bottom-color:var(--surface)!important}

/* desktop: shift bottom-left logo/scale right of the open panel */
@media (min-width:760px){
  body.panel-open .mapboxgl-ctrl-bottom-left{left:calc(var(--panel-w) + var(--gap))}
  body.panel-open .traffic-legend{left:calc(50% + var(--panel-w)/2)}
}

/* ---------- mobile ---------- */
@media (max-width:759px){
  :root{--gap:10px}
  .panel{display:contents}
  .searchbar{position:fixed;z-index:22;top:calc(var(--gap) + env(safe-area-inset-top));left:var(--gap);right:calc(var(--gap) + 54px)}
  .suggest{position:fixed;z-index:22;top:calc(var(--gap) + 56px + env(safe-area-inset-top));left:var(--gap);right:var(--gap);max-height:calc(100% - 90px)}
  .dir-form{position:fixed;z-index:22;top:0;left:0;right:0;border-radius:0 0 var(--radius) var(--radius);padding-top:calc(8px + env(safe-area-inset-top))}
  .modes button span{display:none}
  .modes button{padding:0 16px}
  .sheet{position:fixed;z-index:21;left:0;right:0;bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -2px 10px rgba(0,0,0,.18);
         height:var(--sheet-h);transition:height .22s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom)}
  .sheet.dragging{transition:none}
  .sheet-handle{display:block;padding:8px 0 6px;cursor:grab;touch-action:none;flex:none}
  .sheet-handle span{display:block;width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto}
  .panel-body{flex:1}
  .fab.layers{top:calc(var(--gap) + env(safe-area-inset-top));right:var(--gap);width:48px;height:48px;border-radius:50%}
  .layers-pop{top:auto;bottom:0;left:0;right:0;width:auto;border-radius:16px 16px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  body.dir-mode .searchbar, body.dir-mode .fab.layers{display:none}
  .place h1{font-size:20px}
  .ctx{width:auto;left:var(--gap)!important;right:var(--gap);top:auto!important;bottom:calc(var(--gap) + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- footer (full width, like the classic eFind Maps footer) ---------- */
.ftr{position:fixed;z-index:12;left:0;right:0;bottom:0;height:calc(var(--footer-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:center;justify-content:center;gap:28px;font-size:12px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border-top:1px solid var(--border)}
.ftr a{color:var(--muted);text-decoration:none;letter-spacing:.01em}
.ftr a:hover{color:var(--brand);text-decoration:underline}
:root[data-theme="dark"] .ftr{background:rgba(42,44,48,.82)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ftr{background:rgba(42,44,48,.82)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.ftr{background:var(--surface)}}
/* mobile: the bottom sheet slides over the footer while it's open */
@media (max-width:759px){ .ftr{gap:22px} }

/* Mapbox wordmark hidden at the owner's request (2026-11-06), after being told that
   Mapbox's terms require it on Mapbox maps. Text attribution (the "i" button) stays. */
.mapboxgl-ctrl-logo{display:none!important}

/* ---------- live navigation ---------- */
body.nav-mode .panel, body.nav-mode .sheet, body.nav-mode .searchbar, body.nav-mode .dir-form, body.nav-mode .suggest,
body.nav-mode .fab.layers, body.nav-mode .ftr, body.nav-mode .traffic-legend,
body.nav-mode .mapboxgl-ctrl-bottom-left, body.nav-mode .mapboxgl-ctrl-group{display:none!important}
body.nav-mode{--map-bottom:96px}
.nav-banner{position:fixed;z-index:30;top:calc(var(--gap) + env(safe-area-inset-top));left:var(--gap);right:var(--gap);max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:#0b6b3a;color:#fff;box-shadow:var(--shadow-lg)}
.nb-ico{flex:none;width:52px;height:52px;display:grid;place-items:center}
.nb-ico svg{width:52px;height:52px;stroke-width:2.4;color:#fff}
.nb-ico svg .fill{fill:#fff}
.nb-dist{font-size:28px;font-weight:700;line-height:1.1}
.nb-text{font-size:18px;line-height:1.25;margin-top:2px}
.nav-then{position:fixed;z-index:29;top:calc(var(--gap) + env(safe-area-inset-top) + 92px);left:var(--gap);max-width:560px;
  background:#085a30;color:#fff;border-radius:0 0 10px 10px;padding:6px 14px;font-size:14px;box-shadow:var(--shadow)}
@media (min-width:600px){.nav-then{left:calc(50% - 280px + var(--gap))}}
.nav-bar{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--surface);box-shadow:0 -2px 10px rgba(0,0,0,.2);border-radius:16px 16px 0 0}
.nav-eta{flex:1;text-align:center}
.nav-eta .eta{font-size:22px;font-weight:700;color:var(--good)}
.nav-eta .rem{color:var(--muted);font-size:14px}
.nav-exit{height:44px;padding:0 20px;border-radius:22px;background:var(--bad);color:#fff;font-weight:600}
#nav_mute{width:44px;height:44px;background:var(--surface-2);color:var(--text)}
.nav-recenter{position:fixed;z-index:30;left:var(--gap);bottom:calc(96px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;
  height:42px;padding:0 16px;border-radius:21px;background:var(--surface);color:var(--brand);font-weight:600;box-shadow:var(--shadow)}
.nav-recenter svg{width:18px;height:18px}
.nav-puck{width:36px;height:36px;display:grid;place-items:center}
.nav-puck svg{width:36px;height:36px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}