/* Cycling Buddy SG · © 2026 Lin Jiaen · All rights reserved */
:root{
  color-scheme: light dark;
  --map:#E9EDE7;
  --panel:rgba(255,255,255,.90);
  --panel-solid:#FFFFFF;
  --panel-2:#F3F6F1;
  --line:rgba(18,32,24,.12);
  --line-strong:rgba(18,32,24,.22);
  --ink:#15211B;
  --ink-dim:#54655C;
  --ink-faint:#889389;
  --accent:#0E86C7;
  --accent-text:#006296;
  --accent-strong:#0A6DA3;
  --accent-ink:#ffffff;
  --rec:#E02749;
  --cpn:#5E7169;
  --rail:#4A3226;
  --park:#2E8B57;
  --rack-fill:#1F2937;
  --rack-glyph:#FFFFFF;
  --closed:#DC2626;
  --seg-ded:#1F9D5B; --seg-low:#E07C05; --seg-oth:#94A3B8;
  --wx-storm:#6D28D9; --wx-heavy:#1D4ED8; --wx-rain:#0E7490; --wx-haze:#B45309; --wx-mist:#64748B; --wx-safe:#2E9E5B;
  --shadow:0 6px 20px rgba(18,32,24,.16), 0 1px 3px rgba(18,32,24,.10);
  --radius:16px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root[data-theme="dark"]{
  --map:#0E1613;
  --panel:rgba(20,29,25,.86);
  --panel-solid:#141D19;
  --panel-2:#1C2822;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --ink:#EAF2ED;
  --ink-dim:#9DB0A6;
  --ink-faint:#6C7D74;
  --accent:#38BDF8;
  --accent-text:#5CCBFA;
  --accent-strong:#38BDF8;
  --accent-ink:#04202e;
  --rec:#FF3B5C;
  --cpn:#84958D;
  --rail:#DDD2C0;
  --park:#3FA96B;
  --rack-fill:#E2E8F0;
  --rack-glyph:#0E1613;
  --closed:#F87171;
  --seg-ded:#3FBE77; --seg-low:#F5A623; --seg-oth:#7C8B98;
  --wx-storm:#A78BFA; --wx-heavy:#60A5FA; --wx-rain:#38BDF8; --wx-haze:#FBBF24; --wx-mist:#94A3B8; --wx-safe:#4ADE80;
  --shadow:0 8px 26px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
html,body{height:100%;margin:0}
body{
  font-family:var(--ui); color:var(--ink); background:var(--map);
  overflow:hidden; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
#app{position:fixed;inset:0;overflow:hidden}
#map{position:absolute;inset:0}
.maplibregl-map{font:inherit}
/* geolocate control is driven by our own FAB */
.maplibregl-ctrl-top-right{display:none !important}
.maplibregl-ctrl-bottom-left{margin:0 0 4px 6px}
.maplibregl-ctrl-attrib.maplibregl-compact{background:var(--panel);color:var(--ink-dim)}
.maplibregl-ctrl-attrib a{color:var(--ink-dim)}
.maplibregl-ctrl-scale{background:var(--panel);border-color:var(--line-strong);color:var(--ink-dim);font-family:var(--mono);font-size:10px}
/* heading arrowhead on the blue user-location dot — points the way you're facing */
.user-arrow{width:36px;height:36px;pointer-events:none}/* no drop-shadow filter: it repainted every compass frame; the white head stroke gives contrast instead */
.user-arrow .ua-cone{fill:color-mix(in srgb,var(--accent) 30%,transparent)}
.user-arrow .ua-head{fill:var(--accent);stroke:#fff;stroke-width:1.3;stroke-linejoin:round}

.topbar{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:calc(env(safe-area-inset-top) + 12px) 14px 26px;pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb,var(--map) 72%, transparent), transparent);z-index:5;
}
.brand{display:flex;align-items:center;gap:10px;pointer-events:auto}
.brand .glyph{width:34px;height:34px;flex:0 0 auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.brand .wm{display:flex;flex-direction:column;line-height:1;text-shadow:0 1px 3px color-mix(in srgb,var(--map) 60%, transparent)}
.brand .wm b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.brand .wm span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-top:3px;font-weight:600}
.topbtns{display:flex;gap:8px;pointer-events:auto}

.iconbtn{
  appearance:none;-webkit-appearance:none;width:40px;height:40px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);
  transition:transform .12s ease, background .15s ease;
}
.iconbtn:hover{background:var(--panel-2)}
.iconbtn:active{transform:scale(.94)}
.iconbtn[hidden]{display:none}
.iconbtn.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.legend{
  position:absolute;top:calc(env(safe-area-inset-top) + 62px);left:14px;z-index:4;width:248px;max-width:calc(100vw - 28px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden;
}
.lg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:11px 13px;cursor:pointer}
.lg-head h2{margin:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-weight:700}
.lg-head .chev{transition:transform .2s ease;color:var(--ink-dim)}
.legend.collapsed .chev{transform:rotate(-90deg)}
.lg-body{max-height:66vh;overflow:auto;padding:2px 8px 9px;transition:max-height .22s ease,opacity .18s ease}
.lg-sep{height:1px;background:var(--line);margin:7px 8px 5px}
.legend.collapsed .lg-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.lrow{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px}
.lrow:hover{background:var(--panel-2)}
.lrow .sw{width:26px;height:26px;flex:0 0 auto;border-radius:8px;border:1px solid var(--line-strong);display:grid;place-items:center;cursor:pointer;background:transparent;padding:0}
.lrow .sw i{width:14px;height:4px;border-radius:2px;display:block;transition:opacity .15s}
.lrow.off .sw i{opacity:.22}
.lrow.off .name{color:var(--ink-faint)}
.lrow .meta{flex:1 1 auto;min-width:0;cursor:pointer;background:none;border:0;text-align:left;padding:0;color:inherit;font-family:inherit}
.lrow .name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* deliberately allowed to wrap: the panel is 188px on phones and truncating "6.7 km closed" or
   "19,329 spaces" loses the number that makes the row worth reading */
.lrow .km{font-size:11px;color:var(--ink-dim);font-variant-numeric:tabular-nums;font-family:var(--mono);line-height:1.35}
.lrow .zoom{opacity:.5;width:26px;height:26px;border-radius:7px;border:0;background:transparent;color:var(--ink-dim);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.lrow:hover .zoom{opacity:1}
.lrow .zoom svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.fabs{position:absolute;right:14px;bottom:calc(var(--dockh,150px) + env(safe-area-inset-bottom) + 16px);z-index:6;display:flex;flex-direction:column;gap:12px}
.fab{appearance:none;-webkit-appearance:none;width:52px;height:52px;border-radius:16px;cursor:pointer;background:var(--panel-solid);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .12s ease, background .15s}
.fab:active{transform:scale(.93)}
.fab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fab.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.fab.rec{color:var(--rec)}
.fab.rec.active{background:var(--rec);color:#fff}
.fab .dot{width:16px;height:16px;border-radius:50%;background:currentColor}
.fab.rec.active .dot{border-radius:4px;width:15px;height:15px;background:#fff}
.fab.compass .needle{display:grid;place-items:center;width:24px;height:24px;transition:transform .18s ease-out}
.fab.compass .needle svg{width:24px;height:24px;stroke:none}
.fab.compass.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.fab.compass.active .needle svg path:first-child{fill:var(--accent-ink)}
.fab.compass.active .needle svg path:last-child{fill:rgba(255,255,255,.55)}

.dock{
  position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:5;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);max-width:520px;margin:0 auto;
  display:flex;flex-direction:column;overflow:hidden;
}
.dock-handle{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;min-height:24px;background:none;border:0;cursor:pointer;padding:9px 16px 5px;color:var(--ink);-webkit-appearance:none;appearance:none}
.dock-handle .grip{width:38px;height:4px;border-radius:2px;background:var(--line-strong)}
.dock-peek{font-size:12.5px;font-weight:700;color:var(--ink-dim);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock:not(.collapsed) .dock-peek{display:none}
.dock-body{padding:2px 16px 14px;overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:52vh}
.dk-label{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;display:flex;align-items:center;gap:7px}
.dk-main{display:flex;align-items:baseline;gap:12px;margin-top:6px;flex-wrap:wrap}
.dk-big{font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.dk-sub{font-size:13.5px;color:var(--ink-dim);font-weight:600}
.dk-loop{display:inline-flex;align-items:center;gap:6px}
.dk-loop i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.divider{height:1px;background:var(--line);margin:12px -16px 0}
.stats{display:flex;margin-top:10px}
.stat{flex:1;display:flex;flex-direction:column;gap:3px;padding:0 2px}
.stat + .stat{border-left:1px solid var(--line);padding-left:14px;margin-left:14px}
.stat .v{font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.stat .k{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);font-weight:600}

/* ---- v34: calmer dock · v38: proper bottom-sheet drag ---- */
/* The sheet is always full-height; collapsing slides it DOWN by its own body height (--cdy) so it
   stays welded to the bottom edge and never floats a gap beneath itself during a drag. */
.dock{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.dock.collapsed{transform:translateY(var(--cdy,220px))}
.dock.dragging{transition:none;will-change:transform}
.dock-handle{touch-action:none}
/* Plan a ride — the primary action, anchoring the default dock */
.dk-plan{width:100%;min-height:52px;margin-top:12px;font-size:15.5px;font-weight:800;border-radius:14px;
  text-align:center;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
/* Record a ride — a quiet secondary, keeps free-ride recording reachable without a planned route.
   Both labels are plain centred text so they line up vertically. */
.dk-reclink{appearance:none;-webkit-appearance:none;width:100%;min-height:36px;margin-top:6px;display:flex;
  align-items:center;justify-content:center;background:transparent;border:0;color:var(--ink-dim);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--ui);text-align:center}
.dk-reclink:active{transform:scale(.98)}
/* weather row: a header (icon · condition · refresh) over three evenly-spread stats; the coloured
   left rail carries the rain go/no-go severity */
/* .wx-card.wx-merged (not bare .wx-merged): the base .wx-card rule is later in the file and equal
   specificity, so a bare selector loses align-items and the column silently centres at content
   width — leaving empty gutters and cramming UV/PM2.5 onto the divider. */
.wx-card.wx-merged{flex-direction:column;align-items:stretch;gap:10px;border-left:3px solid var(--line)}
.wx-merged[data-sev="safe"]{border-left-color:var(--wx-safe)}
.wx-merged[data-sev="rain"]{border-left-color:var(--wx-rain)}
.wx-merged[data-sev="heavy"]{border-left-color:var(--wx-heavy)}
.wx-merged[data-sev="storm"]{border-left-color:var(--wx-storm)}
.wx-merged[data-sev="haze"]{border-left-color:var(--wx-haze)}
.wx-merged[data-sev="mist"]{border-left-color:var(--wx-mist)}
.wx-head{display:flex;align-items:center;gap:10px}
.wx-temp{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink);flex:0 0 auto}
.wx-temp[hidden]{display:none}
.wx-stats{display:flex;border-top:1px solid var(--line);margin-top:9px;padding-top:10px}
.wx-stat{flex:1;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;padding:0 4px;min-width:0}
.wx-stat + .wx-stat{border-left:1px solid var(--line)}
.wx-stat .v{font-family:var(--mono);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.05;display:inline-flex;align-items:baseline;gap:5px}
.wx-stat .v em{font-family:var(--ui);font-style:normal;font-size:11px;font-weight:700;letter-spacing:.01em;text-transform:capitalize}
.wx-stat .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wx-stat[data-tone="good"] .v{color:var(--wx-safe)} .wx-stat[data-tone="warn"] .v{color:var(--wx-haze)} .wx-stat[data-tone="bad"] .v{color:var(--rec)}
.wx-stat[data-tone="good"] .k{color:var(--wx-safe)} .wx-stat[data-tone="warn"] .k{color:var(--wx-haze)} .wx-stat[data-tone="bad"] .k{color:var(--rec)}
/* nearest-connector row — same card idiom as the rack row, with an accent location-pin badge */
.conn-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text);flex:0 0 auto}
.conn-ic svg{width:15px;height:15px}
.conn-card{cursor:pointer}
/* Compass + Record join the FAB stack only during a ride (GO) */
.fab.go-only{display:none}
.fabs.riding .fab.go-only{display:grid;animation:fabpop .28s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes fabpop{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}

/* weather (NEA 2-hour forecast) */
.wx-card{display:flex;align-items:center;gap:11px;margin-top:12px;padding:9px 11px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line)}
/* an author display: rule outranks the UA's [hidden]{display:none}, so restate it */
.wx-card[hidden]{display:none}
/* nearest bike rack — same card idiom as the weather row */
.rack-card{cursor:pointer}
.rk-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--rack-fill);color:var(--rack-glyph);font-size:13px;font-weight:800;line-height:1}
/* The rack swatch is a round "P" badge, not the 14x4 line bar the other layers use, so it has to
   outrank `.lrow .sw i` and `.pcn-popup i.sw` — hence the long selectors. */
.sw-rack{display:grid;place-items:center;border-radius:50%;background:var(--rack-fill);color:var(--rack-glyph);font-weight:800;line-height:1;font-style:normal;flex:0 0 auto}
.lrow .sw i.sw-rack{width:16px;height:16px;border-radius:50%;font-size:10px}
.pcn-popup i.sw.sw-rack{width:13px;height:13px;border-radius:50%;font-size:8.5px}
.wx-ic{font-size:22px;line-height:1;width:26px;text-align:center;flex:0 0 auto}
.wx-tx{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px}
.wx-main{font-weight:650;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-sub{font-size:12px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-rf{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--ink-dim);cursor:pointer;padding:6px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center}
.wx-rf svg{width:15px;height:15px}
.wx-rf:active{transform:scale(.88)}
.wx-rf.spin svg{animation:wxspin .8s linear infinite}
@keyframes wxspin{to{transform:rotate(360deg)}}
.wx-adv,.wx-note{margin-top:8px;padding:8px 11px;border-radius:10px;font-size:12.5px;font-weight:600;line-height:1.32;display:flex;gap:8px;align-items:center}
.wx-note{margin-top:10px;font-size:12px;font-weight:600}
.wx-note .wx-ic{font-size:16px;width:18px}
.wx-adv[data-sev="storm"],.wx-note[data-sev="storm"]{background:color-mix(in srgb,var(--wx-storm) 15%,transparent);color:var(--wx-storm)}
.wx-adv[data-sev="heavy"],.wx-note[data-sev="heavy"]{background:color-mix(in srgb,var(--wx-heavy) 15%,transparent);color:var(--wx-heavy)}
.wx-adv[data-sev="rain"],.wx-note[data-sev="rain"]{background:color-mix(in srgb,var(--wx-rain) 15%,transparent);color:var(--wx-rain)}
.wx-adv[data-sev="haze"],.wx-note[data-sev="haze"]{background:color-mix(in srgb,var(--wx-haze) 15%,transparent);color:var(--wx-haze)}
.wx-adv[data-sev="mist"],.wx-note[data-sev="mist"]{background:color-mix(in srgb,var(--wx-mist) 15%,transparent);color:var(--wx-mist)}
.wx-adv[data-sev="safe"],.wx-note[data-sev="safe"]{background:color-mix(in srgb,var(--wx-safe) 16%,transparent);color:var(--wx-safe)}
/* rain-map overlay caption (colour-ramp legend + validity) */
.wx-cap{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--dockh,150px) + env(safe-area-inset-bottom) + 16px);z-index:6;
  display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:var(--panel);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--line);box-shadow:var(--shadow);font-size:11.5px;font-weight:600;color:var(--ink-dim);white-space:nowrap;pointer-events:none}
.wx-cap[hidden]{display:none}
.wx-scale{display:inline-flex;gap:3px}
.wx-scale i{width:9px;height:9px;border-radius:50%;display:inline-block}
.wx-scale i:nth-child(1){background:#6E7C8C}
.wx-scale i:nth-child(2){background:#565C86}
.wx-scale i:nth-child(3){background:#8B3FB0}
.wx-cap-time{color:var(--ink-faint)}

.rec-actions{display:flex;gap:9px;margin-top:12px}
.mini-x{width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:var(--ink-dim);display:grid;place-items:center;cursor:pointer;padding:0}
.mini-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#rtOptions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.rt-opt{appearance:none;-webkit-appearance:none;text-align:left;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;
  border:1.5px solid var(--line);background:var(--panel-2);color:var(--ink);font-family:var(--ui)}
.rt-opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel-2))}
.rt-opt .tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-dim);width:74px;flex:0 0 auto}
.rt-opt.sel .tag{color:var(--accent-text)}
.rt-opt .mid{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.rt-opt .big{font-family:var(--mono);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.rt-opt .sub{font-size:11.5px;color:var(--ink-dim)}
.rt-opt .pct{font-family:var(--mono);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;text-align:right}
.rt-opt .pct small{display:block;font-family:var(--ui);font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.rt-notice{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 11px;border-radius:11px;font-size:12.5px;font-weight:600;line-height:1.3;
  background:color-mix(in srgb,#F79009 15%,var(--panel-2));border:1px solid color-mix(in srgb,#F79009 45%,transparent);color:var(--ink)}
.rt-notice svg{width:19px;height:19px;flex:0 0 auto;stroke:#F79009;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* v40: bridge/underpass markers ON the planned route (map, not panel); tap for the name */
.cross-mk{width:28px;height:28px;border-radius:50%;background:var(--panel-solid);border:2px solid var(--accent-text);display:grid;place-items:center;box-shadow:0 1px 5px rgba(0,0,0,.35);cursor:pointer}
.cross-mk svg{width:16px;height:16px;fill:none;stroke:var(--accent-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cross-mk.cross-underpass{border-color:var(--ink-dim)}
.cross-mk.cross-underpass svg{stroke:var(--ink-dim)}
.cross-pop .maplibregl-popup-content{font-family:var(--ui);font-size:12.5px;font-weight:700;color:var(--ink);background:var(--panel-solid);border:1px solid var(--line);border-radius:9px;padding:6px 10px;box-shadow:var(--shadow)}
.cross-pop .maplibregl-popup-tip{border-top-color:var(--panel-solid);border-bottom-color:var(--panel-solid)}
.rt-key{display:flex;gap:13px;margin-top:10px;flex-wrap:wrap}
.rt-key span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-dim)}
.rt-key i{width:15px;height:4px;border-radius:2px;display:inline-block}
/* ---- planner: task-oriented sheet ---- */
.rt-head{justify-content:space-between}
.rt-title{display:inline-flex;align-items:center;gap:7px}
/* From / To inputs with a swap control on the divider */
.rt-trip{position:relative;margin-top:11px;display:flex;flex-direction:column;gap:8px}
.rt-row{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);font-family:var(--ui);box-sizing:border-box}
.rt-from:focus-within,.rt-to:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.rt-row.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.rt-node{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.rt-node-a{background:#22B573;box-shadow:0 0 0 3px color-mix(in srgb,#22B573 22%,transparent)}
.rt-node-b{background:var(--rec);box-shadow:0 0 0 3px color-mix(in srgb,var(--rec) 22%,transparent)}
/* guide start→destination: the field to fill next glows; the destination dims until the start is set */
.rt-row.glow{border-color:var(--accent);animation:rtGlow 1.7s ease-in-out infinite}
@keyframes rtGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 34%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}}
.rt-row.await{opacity:.6}
.rt-row.await .rt-node{filter:grayscale(1)}
@media (prefers-reduced-motion:reduce){.rt-row.glow{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}}
/* ⌖ set-start-to-current-location button, with a live-GPS dot */
.rt-loc{flex:0 0 auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:var(--panel-solid);color:var(--accent-text);display:grid;place-items:center;cursor:pointer;position:relative;-webkit-appearance:none;appearance:none}
.rt-loc svg{width:18px;height:18px}
.rt-loc:active{transform:scale(.92)}
.rt-loc.live::after{content:"";position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--park);border:1.5px solid var(--panel-solid)}
.rt-swap{position:absolute;right:13px;top:calc(50% - 17px);width:34px;height:34px;border-radius:50%;background:var(--panel-solid);border:1px solid var(--line-strong);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);z-index:2;-webkit-appearance:none;appearance:none}
.rt-swap[hidden]{display:none}
.rt-swap svg{width:17px;height:17px}
.rt-swap:active{transform:scale(.9)}
.rt-input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:16px;font-family:var(--ui);padding:0;outline:none;-webkit-appearance:none;appearance:none}/* 16px: iOS Safari zooms the page on focus for any <16px input */
.rt-input::placeholder{color:var(--ink-faint)}
.rt-scope{margin-top:8px;font-size:11.5px;color:var(--ink-dim);font-weight:600;letter-spacing:.01em;line-height:1.5}
.rt-scope .rt-ic{width:13px;height:13px;vertical-align:-2px;color:var(--accent-text)}
.rt-maphint{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-dim);font-weight:600;background:var(--panel-2);border:1px dashed var(--line-strong);border-radius:999px;padding:5px 11px}
.rt-maphint[hidden]{display:none}
.rt-chips{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.rt-chips[hidden]{display:none}
.rt-chip{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:12px;font-weight:600;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;cursor:pointer;font-family:var(--ui);max-width:62%}
.rt-chip .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-chip .ic{color:var(--ink-dim);flex:0 0 auto;font-size:12px}
.rt-hint{margin-top:9px;font-size:12.5px;color:var(--ink-dim);font-weight:600}
.rt-hint[hidden]{display:none}
.rt-results{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-height:190px;overflow:auto}
.rt-results[hidden]{display:none}
.rt-result{appearance:none;-webkit-appearance:none;text-align:left;cursor:pointer;min-height:40px;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:13px;font-family:var(--ui);display:flex;align-items:center;gap:8px}
.rt-result:hover{border-color:var(--accent)}
.rt-result .rk{flex:0 0 auto;min-width:52px;text-align:center;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:6px;padding:3px 6px}
.rt-result .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-result .sub{color:var(--ink-dim);font-size:11.5px;margin-left:auto;flex:0 0 auto}
.rt-noresult{padding:9px 11px;font-size:12.5px;color:var(--ink-dim);line-height:1.35}
/* recommended route card + collapsible alternatives (rendered into #rtOptions) */
#rtOptions{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rt-rec{border:1.5px solid var(--accent);border-radius:14px;padding:12px 13px;background:color-mix(in srgb,var(--accent) 6%,var(--panel-2))}
.rt-rec-eyebrow{display:flex;align-items:center;gap:6px;color:var(--accent-text);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.rt-rec-eyebrow svg{width:14px;height:14px;fill:currentColor}
.rt-metrics{display:flex;align-items:baseline;gap:9px;margin-top:7px;flex-wrap:wrap}
.rt-metrics .big{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rt-metrics .t{font-size:12.5px;color:var(--ink-dim);font-weight:600}
.rt-metrics .pct{margin-left:auto;font-size:13px;font-weight:800;color:var(--ink)}
.rt-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;margin:10px 0 8px;background:var(--line)}
.rt-bar span{display:block;height:100%}
.rt-legend{display:flex;gap:11px;flex-wrap:wrap;font-size:11px;color:var(--ink-dim);font-weight:600}
.rt-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
.rt-expo{margin-top:9px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-dim);font-weight:600}
.rt-expo svg{width:14px;height:14px;flex:0 0 auto;color:var(--ink-faint)}
.rt-alt-toggle{appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:10px 13px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-size:13px;font-weight:700;font-family:var(--ui);cursor:pointer}
.rt-alt-toggle .chev{transition:transform .2s ease;color:var(--ink-dim)}
.rt-alt-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.rt-alt{appearance:none;-webkit-appearance:none;text-align:left;width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel);color:var(--ink);font-family:var(--ui);cursor:pointer}
.rt-alt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.rt-alt-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rt-alt-label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:var(--ink-dim)}
.rt-alt.sel .rt-alt-label{color:var(--accent-text)}
.rt-alt-figs{font-family:var(--mono);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.rt-alt .rt-bar{height:5px;margin:8px 0 6px}
.rt-alt-note{font-size:11.5px;color:var(--ink-dim);font-weight:600}
.rt-alt-list{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.rt-alt-list[hidden]{display:none}   /* author display:flex would otherwise beat the UA [hidden] rule and keep the list open */
.rt-rec.sel{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.nav-banner{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 12px);z-index:20;background:var(--accent);color:var(--accent-ink);padding:9px 18px;border-radius:14px;box-shadow:var(--shadow);text-align:center;max-width:calc(100% - 28px);pointer-events:none}
.nav-banner[hidden]{display:none}
.nav-banner .nav-main{font-weight:800;font-size:16px;line-height:1.15}
.nav-banner .nav-sub{font-size:12.5px;opacity:.9}
.rt-actionbar{display:flex;gap:9px;margin-top:12px}
.rt-actionbar[hidden]{display:none}
.rt-go{flex:1;min-height:50px;font-size:16px;font-weight:800;letter-spacing:.06em}
.rt-more{width:50px;min-height:50px;flex:0 0 auto;border-radius:12px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);cursor:pointer;display:grid;place-items:center;-webkit-appearance:none;appearance:none}
.rt-more svg{width:22px;height:22px}
.rt-more:active{transform:scale(.95)}
.rt-menu{margin-top:8px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;background:var(--panel-solid);overflow:hidden;box-shadow:var(--shadow)}
.rt-menu[hidden]{display:none}
.rt-menu-item{appearance:none;-webkit-appearance:none;text-align:left;min-height:44px;padding:11px 14px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;font-weight:600;font-family:var(--ui);cursor:pointer}
.rt-menu-item:first-child{border-top:0}
.rt-menu-item:hover{background:var(--panel-2)}
.rt-clear{appearance:none;-webkit-appearance:none;display:block;margin:11px auto 2px;min-height:32px;background:none;border:0;color:var(--ink-dim);font-size:12.5px;font-weight:600;font-family:var(--ui);cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:6px 12px}
.rt-clear[hidden]{display:none}
.rt-dirs{margin-top:12px;border-top:1px solid var(--line);padding-top:6px}
.rt-step{display:flex;align-items:center;gap:10px;padding:6px 2px}
.rt-step .ic{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;color:var(--ink-dim)}
.rt-step .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rt-step .tx{flex:1;font-size:13px}
.rt-step .ds{font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.btn{appearance:none;-webkit-appearance:none;flex:1;min-height:44px;padding:11px 12px;border-radius:12px;font-size:13.5px;font-weight:700;cursor:pointer;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--ui)}
.btn.primary{background:var(--accent-strong);color:var(--accent-ink);border-color:transparent}
.btn:active{transform:scale(.98)}
/* Author display: rules outrank the UA's [hidden]{display:none}; restate it so the road notice
   and the route options stay hidden until a route exists. */
.btn[hidden],.rt-notice[hidden],#rtOptions[hidden]{display:none}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}

.scrim{position:absolute;inset:0;background:rgba(6,10,8,.5);z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);width:min(560px,100%);z-index:21;
  background:var(--panel-solid);border:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:var(--shadow);
  padding:20px 22px calc(env(safe-area-inset-bottom) + 26px);transition:transform .26s cubic-bezier(.2,.8,.2,1);max-height:82vh;overflow:auto;
}
.sheet.open{transform:translate(-50%,0)}
.sheet h3{margin:2px 0 4px;font-size:19px;letter-spacing:-.01em}
.sheet-badge{display:inline-block;margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--accent-text);background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:999px;padding:3px 11px}
.sheet p{margin:9px 0;font-size:13.5px;line-height:1.55;color:var(--ink-dim);max-width:60ch}
.sheet p b{color:var(--ink)}
.sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 12px}
.sheet ul{margin:8px 0;padding-left:18px;font-size:13.5px;line-height:1.65;color:var(--ink-dim)}
.sheet ol{margin:8px 0;padding-left:20px;font-size:13.5px;line-height:1.75;color:var(--ink-dim)}
.sheet ol b,.sheet ul b{color:var(--ink)}
.sheet a{color:var(--accent-text)}
.sheet .close{position:absolute;top:16px;right:16px}
.sheet .fine{font-size:12.5px;color:var(--ink-faint)}
.faq{margin:8px 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:9px 2px;font-size:13.5px;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-dim);font-weight:400;font-size:17px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 2px 10px;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.kbd{font-family:var(--mono);font-size:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}

.toast{
  position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 74px);transform:translate(-50%,-14px);
  background:var(--panel-solid);border:1px solid var(--line-strong);color:var(--ink);padding:10px 15px;border-radius:12px;
  font-size:13px;font-weight:600;box-shadow:var(--shadow);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* update pill — accent-coloured and tappable, so it reads as an action, not the neutral toast */
.update-pill{
  position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 74px);transform:translate(-50%,-14px);
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);border:0;padding:10px 16px;border-radius:12px;
  font-size:13px;font-weight:650;font-family:inherit;box-shadow:var(--shadow);z-index:31;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;
}
.update-pill.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.update-pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.update-pill[hidden]{display:none}   /* author display: outranks the UA [hidden] rule */

.pcn-popup .maplibregl-popup-content{background:var(--panel-solid);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);font-family:var(--ui);padding:9px 12px}
.pcn-popup .maplibregl-popup-tip{border-top-color:var(--panel-solid);border-bottom-color:var(--panel-solid)}
.pcn-popup .maplibregl-popup-close-button{color:var(--ink-dim)}
.pcn-popup b{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.pcn-popup i.sw{width:10px;height:10px;border-radius:3px}
.pcn-popup .pk{display:block;font-size:12px;color:var(--ink-dim);margin-top:2px}
.pcn-popup .pk-link{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);margin-top:6px;text-decoration:none}

.iconbtn:focus-visible,.fab:focus-visible,.btn:focus-visible,.lrow .sw:focus-visible,.lrow .meta:focus-visible,.lrow .zoom:focus-visible,.lg-head:focus-visible,.rt-loc:focus-visible,.rt-swap:focus-visible,.rt-more:focus-visible,.rt-alt:focus-visible,.rt-alt-toggle:focus-visible,.rt-chip:focus-visible,.rt-menu-item:focus-visible,.rt-clear:focus-visible,.rt-result:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}

@media (max-width:560px){
  .legend{width:188px;top:calc(env(safe-area-inset-top) + 58px)}
  .lg-body{max-height:38vh}
  .dk-big{font-size:30px}
  .brand .wm b{font-size:17px}
  .brand .wm span{display:none}
  .dock{left:0;right:0;bottom:0;margin:0;max-width:none;border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0}
  .dock-body{max-height:58vh;padding-bottom:calc(env(safe-area-inset-bottom) + 6px);overflow-x:hidden}
  .dock-handle{padding-top:11px}
  .stat + .stat{padding-left:11px;margin-left:11px}
  .stat .v{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}