*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
  --font-sans:"Assistant",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"Rubik","Assistant",ui-sans-serif,sans-serif;
  --ink:#1F2937;--ink-soft:#4B5563;--ink-muted:#8A8E96;--ink-faint:#C2C5CC;
  --bg:#F2EFE9;--surface:#FFFFFF;--surface-2:#FAF8F3;
  --hairline:rgba(31,41,55,.10);--hairline-2:rgba(31,41,55,.06);
  --mint:oklch(78% 0.10 165);--mint-ink:oklch(38% 0.08 165);--mint-tint:oklch(94% 0.04 165);
  --peach:oklch(82% 0.10 55);--peach-ink:oklch(42% 0.10 55);--peach-tint:oklch(95% 0.04 55);
  --lavender:oklch(78% 0.09 295);--lavender-ink:oklch(40% 0.10 295);--lavender-tint:oklch(94% 0.04 295);
  --sky:oklch(73% 0.10 235);--sky-ink:oklch(38% 0.10 235);--sky-tint:oklch(94% 0.04 235);
  --coral:oklch(67% 0.16 22);--coral-ink:oklch(38% 0.14 22);--coral-tint:oklch(94% 0.04 22);
  --blue:oklch(73% 0.10 235);--blue-dk:oklch(38% 0.10 235);
  --green:var(--mint);--orange:var(--peach);--red:var(--coral);--purple:var(--lavender);
  --card:var(--surface);--card2:var(--surface-2);
  --label:var(--ink);--label2:var(--ink-soft);--label3:var(--ink-muted);
  --sep:var(--hairline);
  --shadow:0 2px 8px rgba(31,41,55,.08),0 1px 2px rgba(31,41,55,.05);
  --shadow-md:0 4px 16px rgba(31,41,55,.11),0 2px 4px rgba(31,41,55,.06);
  --shadow-lg:0 10px 32px rgba(31,41,55,.14),0 4px 10px rgba(31,41,55,.06);
  --shadow-pop:0 20px 60px rgba(31,41,55,.22),0 6px 16px rgba(31,41,55,.10);
  --r:20px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
}
html,body{height:100%;font-family:var(--font-sans);overflow:hidden;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}

/* ── MAP ── */
#map{position:fixed;inset:0;z-index:1;}

.leaflet-control-zoom{border:none!important;box-shadow:var(--shadow-md)!important;border-radius:14px!important;overflow:hidden;}
.leaflet-control-zoom a{background:var(--surface)!important;color:var(--ink)!important;border:none!important;font-size:18px!important;line-height:30px!important;}
.leaflet-control-zoom a:hover{background:var(--surface-2)!important;}
.leaflet-popup-content-wrapper{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);border:.5px solid var(--hairline-2);}
.leaflet-popup-tip{background:var(--surface);}
.leaflet-popup-content{margin:14px 16px;font-family:var(--font-sans);}
.leaflet-attribution-flag{display:none!important;}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.7)!important;border-radius:6px;}

/* ── IDLE: TOP (hidden, buttons still functional via JS) ── */
#idle-top{display:none;}

/* ── SEARCH CARD (inside sheet) ── */
#search-card{
  display:flex;align-items:center;min-height:52px;
  background:var(--surface-2);border-radius:14px;
  border:.5px solid var(--hairline-2);
  overflow:visible;position:relative;pointer-events:auto;
  margin:4px 14px 0;
}
#search-icon{padding:13px 8px 13px 16px;color:var(--ink-muted);flex-shrink:0;}
#dest-input{
  flex:1;padding:13px 4px;background:none;border:none;
  color:var(--ink);font-size:16px;outline:none;font-family:var(--font-sans);
}
#dest-input::placeholder{color:var(--ink-muted);}
#gps-btn{
  width:40px;height:40px;border-radius:50%;margin-left:6px;
  background:transparent;border:none;cursor:pointer;
  color:var(--sky-ink);font-size:18px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
#gps-btn:active{transform:scale(.95);}

#ac-list{
  position:absolute;top:calc(100% + 8px);right:0;left:0;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:.5px solid var(--hairline-2);
  max-height:280px;overflow-y:auto;display:none;z-index:400;
}
#ac-list.open{display:block;}
.ac-row{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-bottom:.5px solid var(--hairline-2);}
.ac-row:last-child{border-bottom:none;}
.ac-row:active{background:var(--surface-2);}
.ac-ico{width:36px;height:36px;border-radius:10px;background:var(--surface-2);border:.5px solid var(--hairline-2);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.ac-name{font-size:15px;font-weight:600;color:var(--ink);}
.ac-sub{font-size:13px;color:var(--ink-muted);margin-top:2px;}

/* mode pills */
#mode-pills{display:flex;gap:0;margin:10px 14px 0;pointer-events:auto;
  background:var(--surface-2);border-radius:var(--r-pill);padding:4px;
  border:.5px solid var(--hairline-2);
}
.pill{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border-radius:var(--r-pill);
  background:transparent;border:none;
  font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  font-family:var(--font-sans);transition:background .15s,color .15s;
}
.pill.active{background:var(--ink);color:#fff;}
/* hide mode pills in search mode */
.search-active #mode-pills{display:none;}
#bike-net-toggle,#routes-toggle,#traffic-toggle,#waze-toggle,
#cameras-toggle,#lime-toggle,#bird-toggle,#dott-toggle{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:7px 13px;
  border:none;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow);border:.5px solid var(--hairline-2);
  font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer;pointer-events:auto;
  font-family:var(--font-sans);transition:background .15s,color .15s;
}
#bike-net-toggle.off,#routes-toggle.off,#traffic-toggle.off,#waze-toggle.off,
#cameras-toggle.off,#lime-toggle.off,#bird-toggle.off,#dott-toggle.off{opacity:.6;}
#bike-net-toggle.loading,#routes-toggle.loading,#traffic-toggle.loading,#waze-toggle.loading,
#cameras-toggle.loading,#lime-toggle.loading,#bird-toggle.loading,#dott-toggle.loading{color:var(--ink-muted);}
#bike-net-dot,#routes-dot,#traffic-dot,#waze-dot,
#cameras-dot,#lime-dot,#bird-dot,#dott-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
#bike-net-dot{background:var(--mint);}
#routes-dot{background:var(--peach);}
#traffic-dot{background:var(--coral);}
#waze-dot{background:var(--sky);}
#cameras-dot{background:var(--lavender);}
#lime-dot{background:#7ACC00;}
#bird-dot{background:#666;}
#dott-dot{background:var(--sky);}
#routes-filters{display:none;gap:8px;overflow-x:auto;margin-top:8px;padding-bottom:2px;pointer-events:auto;scrollbar-width:none;}
#routes-filters::-webkit-scrollbar{display:none;}
#routes-filters.open{display:flex;}
.route-filter{
  white-space:nowrap;padding:7px 12px;border:none;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow);border:.5px solid var(--hairline-2);
  color:var(--ink-muted);font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;
  font-family:var(--font-sans);transition:all .15s;
}
.route-filter.active{background:var(--peach);color:var(--peach-ink);border-color:transparent;}

/* ── BOTTOM SHEET ── */
#sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  height:100vh;
  transform:translateY(calc(100% - 90px));
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events:auto;
}
#sheet-card{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:0 -1px 0 var(--hairline-2),var(--shadow-lg);
  height:100%;display:flex;flex-direction:column;overflow:visible;
  transition:border-radius .2s;
}
.search-active{border-radius:0!important;}
.search-active #sheet-handle-wrap{display:none;}
#sheet-handle-wrap{
  padding:8px 0 0;cursor:ns-resize;touch-action:none;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;
}
.handle-pill{width:40px;height:5px;border-radius:3px;background:var(--ink-faint);margin-bottom:6px;}
#sheet-scroll{flex:1;overflow-y:auto;padding:0 0 40px;margin-top:4px;}

/* ── SEARCH MODE ── */
#search-back{
  display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;
  color:var(--ink);flex-shrink:0;align-items:center;justify-content:center;padding:0 0 0 10px;
}
.search-active #search-back{display:flex;}
.search-active #search-icon{display:none;}
#search-clear{
  display:none;width:36px;height:36px;border:none;background:none;cursor:pointer;
  flex-shrink:0;align-items:center;justify-content:center;padding:0;
}
.search-active #search-clear{display:flex;}
.search-active #gps-btn{display:none;}
.search-active #search-card{
  background:var(--surface);border-radius:0;margin:0;
  border:.5px solid transparent;border-bottom:.5px solid var(--hairline-2);
}
.search-active #mode-pills{display:none;}

/* ── SEARCH RESULTS (in sheet) ── */
.search-result-row{
  display:flex;align-items:center;gap:14px;padding:13px 18px;
  border-bottom:.5px solid var(--hairline-2);cursor:pointer;transition:background .12s;
}
.search-result-row:last-child{border-bottom:none;}
.search-result-row:active{background:var(--surface-2);}
.search-result-ico{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-muted);
}
.search-result-body{flex:1;min-width:0;}
.search-result-name{font-size:15px;font-weight:700;color:var(--ink);}
.search-result-sub{font-size:13px;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-result-ico--recent{background:var(--surface-3,var(--surface-2));color:var(--ink-soft);}
.search-recents-hdr{padding:10px 18px 4px;font-size:12px;font-weight:700;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;}

/* ── FAVORITES ── */
.sheet-section-hdr{
  font-size:12px;font-weight:700;color:var(--ink-muted);
  padding:10px 18px 6px;letter-spacing:.05em;text-transform:uppercase;
}
.sheet-section-hdr--flex{
  display:flex;align-items:center;justify-content:space-between;
}

/* ── Colorblind accessible mode ── */
body.colorblind #turn-bar.danger{background:repeating-linear-gradient(45deg,#B42318,#B42318 8px,#7B1A12 8px,#7B1A12 16px);}
body.colorblind #turn-bar.warn{background:repeating-linear-gradient(-45deg,#B65A00,#B65A00 8px,#8A3A00 8px,#8A3A00 16px);}
body.colorblind #turn-bar.success{background:repeating-linear-gradient(90deg,#1A7A3C,#1A7A3C 8px,#0E5A2A 8px,#0E5A2A 16px);}
body.colorblind .rwarn[style*="#D1F5DF"]{border-left:4px solid #1A7A3C!important;}
body.colorblind .rwarn[style*="#FFECEA"]{border-left:4px solid #B42318!important;}
body.colorblind .rwarn[style*="#FFF4E0"]{border-left:4px dashed #B65A00!important;}
body.colorblind .zone-chip.zone-forbidden{background:repeating-linear-gradient(45deg,var(--coral-tint),var(--coral-tint) 4px,#fff 4px,#fff 8px)!important;}

/* ── Auth modal ── */
.auth-provider-btn{
  width:100%;border:none;border-radius:14px;padding:13px;margin-bottom:10px;
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .12s;
}
.auth-provider-btn:active{filter:brightness(.92);}

/* ── Large text accessibility mode ── */
body.large-text #turn-street{font-size:20px!important;}
body.large-text #turn-in{font-size:16px!important;}
body.large-text .nb-val{font-size:24px!important;}
body.large-text .step-label{font-size:16px!important;}
body.large-text #nb-eta{font-size:20px!important;}
body.large-text #speed-num{font-size:26px!important;}
body.large-text .fav-name{font-size:17px!important;}
body.large-text .nearby-sc-name{font-size:16px!important;}

/* ── Report age badge ── */
.inc-age-badge{
  position:absolute;bottom:-4px;right:-4px;
  background:rgba(31,41,55,.72);color:#fff;
  font-size:9px;font-weight:800;
  padding:1px 4px;border-radius:6px;
  pointer-events:none;white-space:nowrap;
}
.inc-pin{position:relative;}

/* Route milestone tooltip */
.milestone-tip{
  background:rgba(0,122,255,.85)!important;color:#fff!important;
  border:none!important;border-radius:8px!important;
  font-size:11px!important;font-weight:800!important;
  padding:2px 5px!important;box-shadow:none!important;
}
.milestone-tip::before{display:none!important;}

/* Install banner */
#install-banner{
  position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);left:14px;right:14px;z-index:200;
  background:var(--ink);color:#fff;border-radius:16px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:var(--shadow-pop);font-size:13px;font-weight:700;
}
#install-banner-text{flex:1;font-size:12px;}
#install-yes{border:none;border-radius:10px;padding:6px 12px;background:var(--mint-tint);color:var(--mint-ink);font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;}
#install-no{border:none;background:rgba(255,255,255,.15);color:#fff;border-radius:10px;padding:6px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;}

/* Route freshness */
#route-freshness{
  text-align:center;font-size:11px;color:var(--ink-muted);
  font-weight:600;padding:2px 0 4px;
}
#waypoint-teaser-btn{
  width:100%;border:none;border-radius:12px;padding:8px;margin-top:4px;
  background:transparent;color:var(--sky-ink);font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px dashed var(--sky);
  transition:background .12s;
}
#waypoint-teaser-btn:active{background:var(--sky-tint);}
.rs-badge{
  padding:4px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:800;
  background:var(--surface-2);color:var(--ink-soft);border:.5px solid var(--hairline-2);
}

/* Bulk clear button */
#bulk-clear-btn{
  width:100%;border:none;border-radius:12px;padding:10px;
  background:var(--surface-2);color:var(--ink-muted);
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  border:.5px solid var(--hairline-2);transition:background .12s, color .12s;
}
#bulk-clear-btn:active{background:var(--coral-tint);color:var(--coral-ink);}

/* Provider filter chips */
#provider-filter-row{
  display:flex;gap:6px;padding:8px 14px 4px;overflow-x:auto;scrollbar-width:none;
}
#provider-filter-row::-webkit-scrollbar{display:none;}
.prov-chip{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:5px 12px;
  background:var(--surface-2);color:var(--ink-muted);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  transition:background .12s, color .12s;white-space:nowrap;
}
.prov-chip.active{background:var(--sky-tint);color:var(--sky-ink);border-color:var(--sky);}

/* Incident type filter */
/* Area risk banner */
#area-risk-banner{
  padding:8px 16px 6px;font-size:12px;font-weight:700;
  color:var(--peach-ink);background:var(--peach-tint);
  border-bottom:.5px solid var(--peach);
}

/* Incident type filter */
#incident-filter-row{
  display:flex;gap:6px;padding:8px 14px 6px;overflow-x:auto;scrollbar-width:none;
}
#incident-filter-row::-webkit-scrollbar{display:none;}
.inc-filter-chip{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:5px 10px;
  background:var(--surface-2);color:var(--ink-soft);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  transition:background .12s, color .12s;white-space:nowrap;
}
.inc-filter-chip.active{background:var(--ink);color:#fff;}

/* Battery filter chips */
#scooter-batt-filter{
  display:flex;gap:6px;padding:4px 18px 8px;overflow-x:auto;scrollbar-width:none;
}
#scooter-batt-filter::-webkit-scrollbar{display:none;}
.batt-chip{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:5px 12px;
  background:var(--surface-2);color:var(--ink-soft);font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;border:.5px solid var(--hairline-2);
  transition:background .15s, color .15s;
}
.batt-chip.active{background:var(--ink);color:#fff;}

/* Favorite edit mode */
.fav-row--edit{background:var(--surface-2);}
.fav-rename-input{padding:2px 0;}
.fav-row{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:.5px solid var(--hairline-2);transition:background .12s;
}
.fav-row:last-child{border-bottom:none;}
.fav-row:active{background:var(--surface-2);}
.fav-info{flex:1;min-width:0;cursor:pointer;}
.fav-edit-btn{
  background:none;border:none;cursor:pointer;padding:6px 4px;
  font-size:15px;opacity:.4;flex-shrink:0;line-height:1;
  transition:opacity .15s;
}
.fav-edit-btn:active{opacity:1;}
.fav-ico--clickable:hover{transform:scale(1.15);transition:transform .12s;}
.fav-ico--clickable:active{transform:scale(.9);}
.fav-ico{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.fav-name{font-size:15px;font-weight:700;color:var(--ink);}
.fav-sub{font-size:13px;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fav-arrow{color:var(--ink-faint);font-size:18px;flex-shrink:0;line-height:1;}

.preset-row{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  border-bottom:.5px solid var(--hairline-2);cursor:pointer;
  transition:background .12s;
}
.preset-row:active{background:var(--surface-2);}
.preset-ico-wrap{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.preset-row.easy .preset-ico-wrap{background:var(--mint-tint);}
.preset-row.med  .preset-ico-wrap{background:var(--peach-tint);}
.preset-row.hard .preset-ico-wrap{background:var(--coral-tint);}
.preset-info{flex:1;min-width:0;}
.preset-name{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.preset-meta{font-size:12.5px;color:var(--ink-muted);margin-top:3px;font-family:var(--font-num);}
.preset-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-soft);display:inline-flex;align-items:center;gap:4px;
  border:.5px solid var(--hairline-2);}
.tag.mint{background:var(--mint-tint);color:var(--mint-ink);border-color:transparent;}
.tag.peach{background:var(--peach-tint);color:var(--peach-ink);border-color:transparent;}
.tag.coral{background:var(--coral-tint);color:var(--coral-ink);border-color:transparent;}
.preset-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill);flex-shrink:0;}
.preset-row.easy .preset-badge{background:var(--mint-tint);color:var(--mint-ink);}
.preset-row.med  .preset-badge{background:var(--peach-tint);color:var(--peach-ink);}
.preset-row.hard .preset-badge{background:var(--coral-tint);color:var(--coral-ink);}
.easy .preset-ico-wrap{background:var(--mint-tint);}
.med  .preset-ico-wrap{background:var(--peach-tint);}
.hard .preset-ico-wrap{background:var(--coral-tint);}
.easy .preset-badge{background:var(--mint-tint);color:var(--mint-ink);}
.med  .preset-badge{background:var(--peach-tint);color:var(--peach-ink);}
.hard .preset-badge{background:var(--coral-tint);color:var(--coral-ink);}

.route-hazards{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0;}
.hazard-chip{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;}

/* ── ROUTE PREVIEW ── */
#route-screen{display:none;position:fixed;inset:0;z-index:19;pointer-events:none;}
#route-screen > *{pointer-events:auto;}

#route-top{
  position:fixed;top:0;left:0;right:0;z-index:21;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);
}
#back-btn{
  width:40px;height:40px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-md);border:.5px solid var(--hairline-2);
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ink);flex-shrink:0;
}
#route-label{
  flex:1;background:var(--surface);border-radius:var(--r-pill);
  box-shadow:var(--shadow-md);border:.5px solid var(--hairline-2);
  padding:10px 16px;font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;user-select:none;
  transition:background .12s;
}
#route-label:active{background:var(--surface-2);}

#route-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:21;
  background:var(--surface);border-top:.5px solid var(--hairline-2);
  box-shadow:0 -4px 24px rgba(31,41,55,.10);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  transition:background .3s, border-color .3s;
}
/* Dark tile mode — route card adapts */
body.dark-tiles #route-bottom{background:#1E2433;border-top-color:rgba(255,255,255,.08);}
body.dark-tiles #route-bottom .rs-val{color:#fff;}
body.dark-tiles #route-bottom .rs-lbl{color:rgba(255,255,255,.5);}
body.dark-tiles #route-bottom #route-label{color:rgba(255,255,255,.9);}
body.dark-tiles #route-bottom .route-mode-pill{color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);}
body.dark-tiles #route-bottom .route-mode-pill.active{background:#fff;color:#1E2433;}
body.dark-tiles #route-bottom #route-summary{background:#252C3A;border-color:rgba(255,255,255,.06);}
body.dark-tiles #route-bottom .route-summary-val{color:#fff;}
body.dark-tiles #route-bottom .route-summary-lbl{color:rgba(255,255,255,.45);}
body.dark-tiles #route-bottom #go-btn{background:#3A7BFF;}
body.dark-tiles #route-bottom #gpx-btn,body.dark-tiles #route-bottom #share-route-btn{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1);}
.route-stats{display:flex;justify-content:space-around;margin-bottom:8px;}
#walk-compare{
  font-size:11px;font-weight:600;color:var(--ink-muted);
  text-align:center;padding:4px 0 10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rs{text-align:center;}
.rs-val{font-size:24px;font-weight:800;color:var(--ink);line-height:1;font-family:var(--font-num);}
.rs-lbl{font-size:12px;color:var(--ink-muted);margin-top:3px;}

#route-mode-pills{
  display:flex;gap:6px;margin:0 0 14px;overflow-x:auto;
  background:var(--surface-2);border-radius:var(--r-pill);padding:4px;
  border:.5px solid var(--hairline-2);scrollbar-width:none;
}
#route-mode-pills::-webkit-scrollbar{display:none;}
.route-mode-pill{
  flex:0 0 auto;border:none;border-radius:var(--r-pill);padding:10px 12px;
  background:transparent;color:var(--ink-soft);font-size:13px;font-weight:700;
  cursor:pointer;font-family:var(--font-sans);transition:background .15s,color .15s,transform .15s;
  white-space:nowrap;
}
.route-mode-pill.active{background:var(--ink);color:#fff;animation:pill-select .25s ease;}
.route-mode-pill:active{transform:scale(.98);}
@keyframes pill-select{0%{transform:scale(.95);}60%{transform:scale(1.04);}100%{transform:scale(1);}}

/* ── Per-mode route card accent colors ── */
#route-bottom[data-mode="fastest"] #go-btn{background:#007AFF;}
#route-bottom[data-mode="safest"]  #go-btn{background:#34C759;}
#route-bottom[data-mode="smooth"]  #go-btn{background:#5856D6;}
#route-bottom[data-mode="chill"]   #go-btn{background:#30B0C7;}
#route-bottom[data-mode="delivery"]#go-btn{background:#FF9500;}
#route-bottom[data-mode="fastest"] .route-mode-pill.active{background:#007AFF;}
#route-bottom[data-mode="safest"]  .route-mode-pill.active{background:#34C759;}
#route-bottom[data-mode="smooth"]  .route-mode-pill.active{background:#5856D6;}
#route-bottom[data-mode="chill"]   .route-mode-pill.active{background:#30B0C7;}
#route-bottom[data-mode="delivery"].route-mode-pill.active{background:#FF9500;}

/* ── Mode ETA strip ── */
#mode-eta-strip{
  display:flex;gap:6px;margin:-4px 0 14px;overflow-x:auto;scrollbar-width:none;
}
#mode-eta-strip::-webkit-scrollbar{display:none;}
.mode-eta-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:background .15s, color .15s;white-space:nowrap;
}
.mode-eta-chip.active{background:var(--ink);color:#fff;}
.mode-eta-chip .eta-mins{font-size:13px;font-weight:800;}

/* ── Context chips ── */
#context-chips-wrap{padding:10px 14px 0;}
#context-chips{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
#context-chips::-webkit-scrollbar{display:none;}
.ctx-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:var(--r-pill);
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  box-shadow:var(--shadow);cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink);
  transition:background .12s, transform .12s;white-space:nowrap;
}
.ctx-chip:active{transform:scale(.96);}
.ctx-chip-ico{font-size:16px;}
.ctx-chip-hint{font-size:11px;color:var(--ink-muted);font-weight:600;}

#route-summary{
  background:linear-gradient(180deg,var(--surface-2),#fff);
  border:.5px solid var(--hairline-2);border-radius:18px;
  padding:14px 14px 12px;margin-bottom:14px;
  box-shadow:var(--shadow);
}
#route-summary-top{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
#route-summary-mode{font-size:14px;font-weight:800;color:var(--ink);}
#route-summary-reason{font-size:12px;line-height:1.4;color:var(--ink-soft);}
#route-summary-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;margin-bottom:10px;
}
.route-summary-metric{
  background:rgba(255,255,255,.82);border:.5px solid var(--hairline-2);
  border-radius:14px;padding:10px 6px;text-align:center;
}
.route-summary-val{font-size:18px;font-weight:800;color:var(--ink);font-family:var(--font-num);line-height:1;}
.route-summary-lbl{font-size:11px;color:var(--ink-muted);margin-top:4px;}
#route-summary-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
#bike-lane-bar-wrap{margin-top:4px;}
#bike-lane-bar-label{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--ink-muted);font-weight:600;margin-bottom:5px;
}
#bike-lane-bar-pct{font-weight:800;color:var(--ink);}
#bike-lane-bar-track{
  height:6px;background:var(--hairline-2);border-radius:4px;overflow:hidden;
}
#bike-lane-bar-fill{
  height:100%;width:0%;border-radius:4px;
  background:linear-gradient(90deg, #34C759, #30B050);
  transition:width .6s ease;
}
.route-summary-tag{
  display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
}
.route-summary-tag.good{background:var(--mint-tint);color:var(--mint-ink);}
.route-summary-tag.warn{background:var(--peach-tint);color:var(--peach-ink);}
.route-summary-tag.alert{background:var(--coral-tint);color:var(--coral-ink);}

#departure-advisor{
  font-size:12px;font-weight:700;padding:9px 14px;border-radius:12px;
  margin-bottom:10px;line-height:1.4;
}

#elev-bar{height:36px;margin-bottom:14px;position:relative;}
#elev-bar svg{width:100%;height:100%;}

#route-warns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
#route-quick-toggles{margin-bottom:12px;}
.rqt-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border-radius:14px;padding:10px 14px;
  cursor:pointer;border:.5px solid var(--hairline-2);
}
.rqt-icon{font-size:16px;flex-shrink:0;}
.rqt-label{flex:1;font-size:14px;font-weight:600;color:var(--ink);}
.rqt-toggle{flex-shrink:0;}
.rwarn{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
}
.rwarn--scooter-rec{border-radius:14px;padding:8px 12px;flex-wrap:wrap;}
.rwarn-cta{
  display:inline-block;padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(0,0,0,.10);color:inherit;text-decoration:none;
  font-size:12px;font-weight:800;flex-shrink:0;
}
.rwarn-cta:hover{background:rgba(0,0,0,.18);}

/* ── Weekly stats card ── */
#weekly-stats-card{padding:0 14px 10px;}
#weekly-stats-card .sheet-section-hdr{padding-left:0;padding-right:0;}
.weekly-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px;
}
.ws-cell{
  background:var(--surface-2);border-radius:12px;padding:10px 6px;
  text-align:center;border:.5px solid var(--hairline-2);
}
.ws-val{font-size:17px;font-weight:800;font-family:var(--font-num);color:var(--ink);}
.ws-lbl{font-size:10px;color:var(--ink-muted);font-weight:600;margin-top:3px;}
.ws-mode-row{
  font-size:12px;color:var(--ink-muted);font-weight:600;
  padding:6px 8px;background:var(--surface-2);border-radius:10px;
  border:.5px solid var(--hairline-2);
}

#steps-toggle{
  width:100%;border:none;background:none;
  color:var(--sky-ink);font-size:14px;font-weight:600;
  padding:0 0 12px;cursor:pointer;font-family:inherit;text-align:right;
}
#steps-preview{border-top:.5px solid var(--hairline-2);margin-bottom:0;}
#steps-preview:empty{display:none;}
#steps-list{display:none;margin-bottom:12px;}
#steps-list.open{display:block;}
.step-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:.5px solid var(--hairline-2);
}
.step-row:last-child{border-bottom:none;}
.step-row--tappable{cursor:pointer;transition:background .12s;}
.step-row--tappable:active{background:var(--surface-2);}
.step-map-hint{font-size:14px;opacity:.35;flex-shrink:0;align-self:center;}
.step-row--tappable:active .step-map-hint{opacity:.8;}
.step-arrow-box{
  width:36px;height:36px;border-radius:10px;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.step-info{flex:1;}
.step-label{font-size:14px;font-weight:600;color:var(--ink);}
.step-sub{font-size:12px;color:var(--ink-muted);margin-top:2px;}
.step-dist{font-size:13px;color:var(--ink-muted);margin-top:1px;font-family:var(--font-num);}
.step-progress-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--hairline-2);overflow:hidden;}
.step-progress-fill{height:100%;border-radius:1px;transition:width .4s ease;}
.step-row{position:relative;}

#go-btn{
  width:100%;padding:16px;border-radius:var(--r-lg);border:none;
  background:var(--ink);color:#fff;font-size:17px;font-weight:700;
  cursor:pointer;letter-spacing:-.2px;font-family:inherit;
}
#go-btn:active{filter:brightness(1.15);}
#route-util-row{
  display:flex;justify-content:center;gap:10px;margin-top:10px;
}
#gpx-btn{
  border:none;background:transparent;color:var(--ink-muted);
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  padding:4px 10px;border-radius:var(--r-pill);
  border:.5px solid var(--hairline-2);
  transition:background .12s, color .12s;
}
#gpx-btn:active{background:var(--surface-2);color:var(--ink);}

#share-eta-btn{
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .12s,color .12s;
}
#share-eta-btn:active{background:rgba(255,255,255,.25);color:#fff;}

/* ── NAVIGATION ── */
#nav-screen{display:none;position:fixed;inset:0;z-index:19;pointer-events:none;}
#nav-screen > *{pointer-events:auto;}

#turn-bar{
  position:fixed;top:0;left:0;right:0;z-index:21;
  background:var(--ink);
  padding:env(safe-area-inset-top,12px) 16px 16px;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  box-shadow:var(--shadow-pop);
}
#turn-bar.warn{background:linear-gradient(135deg,var(--peach-ink) 60%,var(--ink) 100%);}
#turn-bar.danger{background:linear-gradient(135deg,var(--coral-ink) 60%,#7B1A12 100%);animation:turn-danger-pulse 1.1s ease-in-out infinite;}
#turn-bar.success{background:linear-gradient(135deg,var(--mint-ink) 60%,#0E5A2A 100%);}
#turn-bar.bike{background:linear-gradient(135deg,#1A7A3C 60%,var(--ink) 100%);}
@keyframes turn-danger-pulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0);}50%{box-shadow:inset 0 0 0 4px rgba(255,255,255,.18);}}
#turn-bar.step-complete-flash{background:var(--mint-ink)!important;transition:background .1s;}
@keyframes step-complete{0%{opacity:1;}100%{opacity:0;}}

#turn-inner{display:flex;align-items:center;gap:14px;}
#voice-repeat-btn{
  background:rgba(255,255,255,.12);border:none;border-radius:10px;
  width:36px;height:36px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);transition:background .12s, color .12s;
}
#voice-repeat-btn:active{background:rgba(255,255,255,.25);color:#fff;}
#step-skip-btn{
  background:rgba(255,255,255,.12);border:none;border-radius:10px;
  width:36px;height:36px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);transition:background .12s, color .12s;
}
#step-skip-btn:active{background:rgba(255,255,255,.25);color:#fff;}
#turn-icon-box{
  width:64px;height:64px;border-radius:18px;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
#turn-icon-box svg{width:38px;height:38px;}
#turn-text-col{flex:1;min-width:0;}
#turn-in{font-size:13px;color:rgba(255,255,255,.65);margin-bottom:2px;font-weight:500;}
#turn-street{font-size:21px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#turn-then{font-size:13px;color:rgba(255,255,255,.6);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#hazard-card{
  position:fixed;top:110px;left:14px;right:14px;z-index:21;
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  transform:translateY(-150px);opacity:0;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s;
  pointer-events:none;
}
#hazard-card.show{transform:none;opacity:1;pointer-events:auto;}
#haz-icon-wrap{width:44px;height:44px;border-radius:12px;background:var(--peach-tint);color:var(--peach-ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;}
#haz-title{font-size:15px;font-weight:700;color:var(--ink);}
#haz-sub{font-size:12px;color:var(--ink-muted);margin-top:2px;}
#haz-close{background:none;border:none;color:var(--ink-muted);font-size:18px;cursor:pointer;padding:4px;flex-shrink:0;}

#nav-status-chip{
  position:fixed;top:188px;left:14px;right:14px;z-index:20;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
  border:.5px solid var(--hairline-2);border-radius:16px;
  box-shadow:var(--shadow-md);padding:10px 14px;
  transition:transform .25s ease,opacity .2s ease,background .2s ease,color .2s ease;
}
#nav-status-chip.hidden{opacity:0;transform:translateY(-8px);pointer-events:none;}
#nav-status-chip.pending{background:var(--sky-tint);color:var(--sky-ink);}
#nav-status-chip.warn{background:var(--peach-tint);color:var(--peach-ink);}
#nav-status-chip.alert{background:var(--coral-tint);color:var(--coral-ink);}
#nav-status-title{font-size:13px;font-weight:800;}
#nav-status-detail{font-size:12px;opacity:.8;margin-top:2px;}

/* ── Zone chip (live zone indicator during nav) ── */
#zone-chip{
  position:fixed;
  bottom:calc(182px + env(safe-area-inset-bottom,0px));
  right:14px;z-index:21;
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);
  border:.5px solid var(--hairline-2);box-shadow:var(--shadow-md);
  transition:opacity .2s, transform .2s;
  max-width:200px;
}
#zone-chip.hidden{opacity:0;transform:translateY(6px);pointer-events:none;}
#zone-chip.zone-slow{background:var(--peach-tint);color:var(--peach-ink);border-color:var(--peach);}
#zone-chip.zone-slow-viol{background:var(--coral-tint)!important;color:var(--coral-ink)!important;border-color:var(--coral)!important;animation:zone-viol-flash .4s ease 2;}
@keyframes zone-viol-flash{0%,100%{opacity:1;}50%{opacity:.4;}}
#zone-chip.zone-forbidden{background:var(--coral-tint);color:var(--coral-ink);border-color:var(--coral);}
#zone-chip.zone-noparking{background:var(--sky-tint);color:var(--sky-ink);border-color:var(--sky);}

/* ── Compass chip ── */
#compass-chip{
  position:fixed;
  bottom:calc(182px + env(safe-area-inset-bottom,0px));
  left:14px;z-index:21;
  display:flex;align-items:center;gap:5px;
  padding:7px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  background:rgba(31,41,55,.78);backdrop-filter:blur(10px);
  color:#fff;
  transition:opacity .2s, transform .2s;
}
#compass-chip.hidden{opacity:0;transform:translateY(6px);pointer-events:none;}
#compass-arrow{font-size:14px;line-height:1;transition:transform .3s ease;}
#compass-dir{letter-spacing:.04em;}

#nav-quick-report{
  position:fixed;bottom:calc(130px + env(safe-area-inset-bottom,0px));left:0;right:0;
  z-index:20;display:flex;justify-content:center;gap:8px;padding:0 14px;
  pointer-events:none;opacity:0;transform:translateY(10px);
  transition:opacity .25s, transform .25s;
}
#nav-quick-report.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.nqr-btn{
  flex:1;max-width:90px;border:none;border-radius:var(--r-pill);
  padding:9px 6px;font-size:12px;font-weight:700;font-family:var(--font-sans);
  background:var(--surface);box-shadow:var(--shadow-lg);
  border:.5px solid var(--hairline-2);cursor:pointer;
  color:var(--ink);transition:transform .12s, background .15s;
  white-space:nowrap;
}
.nqr-btn:active{transform:scale(.94);background:var(--surface-2);}

#nav-bottom{
  position:fixed;bottom:0;left:0;right:0;z-index:21;
  background:var(--surface);border-top:.5px solid var(--hairline-2);
  box-shadow:0 -1px 0 var(--hairline-2),var(--shadow-lg);
  display:flex;flex-direction:column;align-items:stretch;
  padding:0 0 calc(env(safe-area-inset-bottom,0px));gap:0;
}
#nav-dest-row{
  display:flex;align-items:center;gap:6px;
  padding:7px 18px 0;font-size:12px;font-weight:600;color:var(--ink-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#nav-dest-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#nav-bottom-stats{
  display:flex;align-items:center;
  padding:10px 16px 14px;gap:0;
  /* share-eta-btn lives at the end, doesn't take flex space from .nb cells */
}
#route-progress-bar{
  position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--hairline-2);overflow:hidden;
}
#route-progress-fill{
  height:100%;background:#007AFF;width:0%;
  transition:width .6s ease;border-radius:0 2px 2px 0;
}
#stop-btn{
  width:40px;height:40px;border-radius:50%;
  background:var(--coral);border:none;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;margin-left:10px;
}
.nb{flex:1;text-align:center;}
.nb-val{font-size:22px;font-weight:800;color:var(--ink);line-height:1;font-family:var(--font-num);}
.nb-lbl{font-size:11px;color:var(--ink-muted);margin-top:3px;}
.nb-sep{width:.5px;background:var(--hairline-2);height:34px;flex-shrink:0;}

/* ── FLOATING ELEMENTS ── */
#speed-badge{
  position:fixed;right:14px;bottom:110px;z-index:15;
  width:64px;height:64px;border-radius:50%;
  background:conic-gradient(var(--mint) 0deg, var(--hairline-2) 0deg);
  box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;
  padding:5px;
}
#speed-badge-inner{
  width:100%;height:100%;border-radius:50%;
  background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
#speed-num{font-size:20px;font-weight:800;color:var(--ink);line-height:1;font-family:var(--font-num);}
#speed-lbl{font-size:9px;color:var(--ink-muted);margin-top:1px;font-weight:600;letter-spacing:.3px;}
#gps-signal{
  display:flex;align-items:flex-end;gap:1.5px;height:10px;
  justify-content:center;margin-bottom:3px;
}
.gps-bar{
  width:3px;border-radius:1px;background:var(--ink-faint);
  transition:background .3s, height .3s;
}
.gps-bar:nth-child(1){height:25%;}
.gps-bar:nth-child(2){height:50%;}
.gps-bar:nth-child(3){height:75%;}
.gps-bar:nth-child(4){height:100%;}
.gps-bar.active{background:var(--mint-ink);}
.gps-bar.weak{background:var(--peach-ink);}

#speed-badge.warn #speed-badge-inner{background:var(--coral-tint);}
#speed-badge.warn #speed-num{color:var(--coral-ink);}
#speed-badge.fast #speed-badge-inner{background:#FF3B30;border-color:#FF3B30;}
#speed-badge.fast #speed-num{color:#fff;}
#speed-badge.fast #speed-lbl{color:rgba(255,255,255,.75);}

#fab-col{
  position:fixed;left:14px;bottom:110px;z-index:15;
  display:flex;flex-direction:column;gap:10px;
}
.fab{
  width:46px;height:46px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-lg);
  border:.5px solid var(--hairline-2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s;color:var(--ink);
}
.fab:active{transform:scale(.9);}
#report-fab{background:var(--coral);color:var(--coral-ink);border-color:transparent;}
#report-fab-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;border-radius:8px;
  background:#fff;color:var(--coral-ink);
  font-size:10px;font-weight:800;
  display:flex!important;align-items:center;justify-content:center;
  padding:0 3px;pointer-events:none;
  border:1.5px solid var(--coral);
}
#share-route-btn{
  border:none;background:transparent;color:var(--ink-muted);
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  padding:4px 10px;border-radius:var(--r-pill);
  border:.5px solid var(--hairline-2);
  transition:background .12s, color .12s;
}
#share-route-btn:active{background:var(--surface-2);color:var(--ink);}
#recenter-fab{
  position:fixed;bottom:170px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:16;display:none;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border:none;border-radius:var(--r-pill);
  padding:10px 20px;font-size:14px;font-weight:700;font-family:var(--font-sans);
  cursor:pointer;box-shadow:var(--shadow-pop);
  opacity:0;transition:opacity .22s, transform .22s;
}
#recenter-fab.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);}
#recenter-fab:active{transform:translateX(-50%) scale(.97);}

.inc-pin{
  background:var(--surface);border-radius:50%;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  box-shadow:var(--shadow-md);border:1.5px solid var(--hairline-2);cursor:pointer;
}

.pop-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px;}
.pop-sub{font-size:13px;color:var(--ink-muted);margin-bottom:10px;}
.pop-source{
  font-size:11px;color:var(--ink-muted);
  padding-top:8px;border-top:.5px solid var(--hairline-2);margin-top:8px;
}
.pop-btns{display:flex;gap:8px;}
.pop-btn{
  flex:1;padding:8px;border-radius:10px;border:none;background:var(--surface-2);
  font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink);
  border:.5px solid var(--hairline-2);
}
.pop-btn:active{opacity:.7;}

/* ── REPORT MODAL ── */
#rep-modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(0,0,0,.38);
  display:none;align-items:flex-end;
}
#rep-modal.open{display:flex;}
#rep-sheet{
  width:100%;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:0 0 calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:var(--shadow-pop);
  max-height:90vh;overflow-y:auto;
}
.rep-handle{width:40px;height:5px;border-radius:3px;background:var(--ink-faint);margin:12px auto 0;}
.rep-header{font-size:18px;font-weight:700;color:var(--ink);text-align:center;padding:10px 16px 0;}
#rep-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:4px 0;padding:16px 8px 8px;
}
.rep-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;padding:10px 6px;
  border-radius:16px;transition:background .12s;font-family:inherit;
}
.rep-btn:active{background:var(--surface-2);}
.rep-circle{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
  background:var(--surface-2);color:var(--ink-soft);
  border:.5px solid var(--hairline-2);
}
.rep-btn:active .rep-circle{transform:scale(.90);}
.rep-btn.sel .rep-circle{outline:3px solid var(--ink);outline-offset:3px;}
/* Incident-type tints on report circles */
.rep-circle.police    {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-circle.inspector {background:var(--sky-tint);     color:var(--sky-ink);     border-color:transparent}
.rep-circle.traffic_police{background:var(--mint-tint);color:var(--mint-ink);    border-color:transparent}
.rep-circle.accident  {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-circle.block     {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.hazard    {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.stairs    {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.camera    {background:var(--lavender-tint);color:var(--lavender-ink);border-color:transparent}
.rep-circle.pothole   {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.flood     {background:var(--sky-tint);     color:var(--sky-ink);     border-color:transparent}
.rep-circle.roadwork  {background:var(--peach-tint);   color:var(--peach-ink);   border-color:transparent}
.rep-circle.stopped   {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-circle.closure   {background:var(--coral-tint);   color:var(--coral-ink);   border-color:transparent}
.rep-lbl{font-size:13px;font-weight:600;color:var(--ink);text-align:center;line-height:1.2;}
#rep-note{
  width:calc(100% - 32px);margin:0 16px 12px;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--hairline-2);font-size:15px;color:var(--ink);
  font-family:inherit;background:var(--surface-2);outline:none;resize:none;display:block;
}
#rep-note:focus{border-color:var(--sky);}
#rep-submit{
  display:block;width:calc(100% - 32px);margin:0 16px;padding:15px;border-radius:var(--r-lg);border:none;
  background:var(--ink);color:#fff;font-size:16px;font-weight:700;
  cursor:pointer;font-family:inherit;
}
#rep-submit:active{filter:brightness(1.15);}
#rep-cancel{
  display:block;width:calc(100% - 32px);margin:6px 16px 0;padding:12px;border-radius:var(--r-lg);border:none;
  background:none;color:var(--sky-ink);font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
}

#safety-check-modal{
  position:fixed;inset:0;z-index:45;
  background:rgba(31,41,55,.42);
  display:none;align-items:flex-end;justify-content:center;
  padding:18px;
}
#safety-check-modal.open{display:flex;}
#safety-check-sheet{
  width:min(100%, 420px);
  background:var(--surface);border-radius:28px;
  box-shadow:var(--shadow-pop);
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
}
.safety-check-icon{
  width:58px;height:58px;border-radius:18px;
  background:var(--sky-tint);color:var(--sky-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:6px auto 10px;
}
.safety-check-title{
  text-align:center;font-size:22px;font-weight:800;color:var(--ink);
}
.safety-check-sub{
  margin-top:8px;text-align:center;font-size:13px;line-height:1.55;color:var(--ink-muted);
}
.safety-check-actions{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;
}
#safety-check-ok,#safety-check-help,#safety-check-dismiss{
  border:none;border-radius:16px;padding:14px 12px;font-family:inherit;cursor:pointer;
  font-size:15px;font-weight:800;
}
#safety-check-ok{background:var(--mint);color:var(--mint-ink);}
#safety-check-help{background:var(--coral-tint);color:var(--coral-ink);}
#safety-check-dismiss{
  display:block;width:100%;margin-top:8px;
  background:var(--surface-2);color:var(--ink-soft);font-weight:700;
}

/* ── RIDE SUMMARY ── */
#ride-summary-modal{
  position:fixed;inset:0;z-index:46;
  background:rgba(31,41,55,.42);
  display:none;align-items:flex-end;justify-content:center;
  padding:18px;
}
#ride-summary-modal.open{display:flex;}
#ride-summary-sheet{
  width:min(100%, 420px);
  background:var(--surface);border-radius:28px;
  box-shadow:var(--shadow-pop);
  padding:10px 16px calc(22px + env(safe-area-inset-bottom,0px));
}
#rs-header{display:flex;align-items:center;gap:12px;justify-content:center;margin:8px 0 14px;}
#rs-icon{font-size:32px;line-height:1;}
#rs-title{font-size:22px;font-weight:800;color:var(--ink);}
#rs-stats{
  display:flex;align-items:center;justify-content:center;gap:0;
  background:var(--surface-2);border-radius:18px;padding:16px 0;margin-bottom:12px;
}
.rs-stat{flex:1;text-align:center;}
.rs-stat-val{font-size:28px;font-weight:800;color:var(--ink);font-family:var(--font-num);}
.rs-stat-lbl{font-size:12px;color:var(--ink-muted);margin-top:3px;font-weight:600;}
.rs-stat-sep{width:1px;height:36px;background:var(--hairline-2);flex-shrink:0;}
#rs-mode-row{
  text-align:center;font-size:13px;color:var(--ink-soft);font-weight:600;
  margin-bottom:10px;
}
#rs-sparkline-wrap{
  margin:0 0 14px;padding:10px 12px 6px;
  background:var(--surface-2);border-radius:12px;
  border:.5px solid var(--hairline-2);
}
#rs-sparkline{width:100%;height:40px;display:block;}
#rs-sparkline-labels{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;color:var(--ink-muted);font-weight:600;margin-top:2px;
}
#rs-sparkline-wrap.hidden{display:none;}
#rs-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;}
#rs-share{
  border:none;border-radius:16px;padding:14px;
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:800;
  cursor:pointer;font-family:var(--font-sans);border:.5px solid var(--hairline-2);
}
#rs-dismiss{
  border:none;border-radius:16px;padding:14px;
  background:var(--ink);color:#fff;font-size:16px;font-weight:800;
  cursor:pointer;font-family:var(--font-sans);
}

/* ── HISTORY ROWS ── */
.history-row{
  display:flex;align-items:center;gap:12px;padding:10px 18px;
  border-bottom:.5px solid var(--hairline-2);
}
.history-row:last-child{border-bottom:none;}
.history-ico{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);border:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.history-body{flex:1;min-width:0;}
.history-dest{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.history-meta{font-size:11px;color:var(--ink-muted);margin-top:2px;}

/* ── Ambient mode overlay ── */
#ambient-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.92);
  display:flex;align-items:center;justify-content:center;
}
#ambient-inner{text-align:center;color:#fff;}
#ambient-street{font-size:28px;font-weight:800;margin-bottom:12px;padding:0 20px;}
#ambient-eta{font-size:56px;font-weight:900;font-family:var(--font-num);line-height:1;}
#ambient-remain{font-size:16px;color:rgba(255,255,255,.6);margin-top:8px;font-weight:600;}

/* ── Legend overlay ── */
#legend-overlay{
  position:fixed;inset:0;z-index:55;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 14px calc(220px + env(safe-area-inset-bottom,0px));
  pointer-events:none;opacity:0;
  transition:opacity .2s;
}
#legend-overlay.show{opacity:1;pointer-events:auto;}
#legend-card{
  background:var(--surface);border-radius:18px;
  box-shadow:var(--shadow-pop);padding:14px 16px;
  min-width:200px;border:.5px solid var(--hairline-2);
}
.legend-title{font-size:12px;font-weight:800;color:var(--ink-muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;}
.legend-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink);padding:4px 0;}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.legend-sep{height:.5px;background:var(--hairline-2);margin:6px 0;}

/* ── Pre-ride toast ── */
#preride-toast{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;
  transition:opacity .25s ease;
}
#preride-toast.show{opacity:1;}
#preride-toast-inner{
  background:rgba(31,41,55,.88);backdrop-filter:blur(20px);
  color:#fff;border-radius:24px;padding:20px 32px;
  display:flex;gap:20px;font-size:20px;font-weight:800;
  box-shadow:var(--shadow-pop);
}

/* ── MAP TAP CARD ── */
#map-tap-card{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--surface);border-radius:24px 24px 0 0;
  box-shadow:var(--shadow-pop);
  padding:0 18px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.32,1,.6,1);
  pointer-events:none;
}
#map-tap-card.open{transform:translateY(0);pointer-events:auto;}
#map-tap-handle{display:flex;justify-content:center;padding:10px 0 6px;}
#map-tap-body{
  display:flex;align-items:center;gap:14px;padding:10px 0 16px;
  border-bottom:.5px solid var(--hairline-2);
}
#map-tap-ico{font-size:26px;flex-shrink:0;}
#map-tap-info{flex:1;min-width:0;}
#map-tap-label{font-size:16px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#map-tap-sub{font-size:13px;color:var(--ink-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#map-tap-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;padding-top:14px;}
#map-tap-cancel{
  border:none;border-radius:16px;padding:14px;
  background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:700;
  cursor:pointer;font-family:var(--font-sans);border:.5px solid var(--hairline-2);
}
#map-tap-confirm{
  border:none;border-radius:16px;padding:14px;
  background:var(--ink);color:#fff;font-size:16px;font-weight:800;
  cursor:pointer;font-family:var(--font-sans);
}
#map-tap-confirm:active{opacity:.85;}
#map-tap-cancel:active{background:var(--surface-2);opacity:.7;}

/* ── Scooter reserve countdown chip ── */
#scooter-reserve-chip{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:14px;right:14px;z-index:202;
  background:var(--sky-tint);color:var(--sky-ink);border-radius:16px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:var(--shadow-md);font-size:13px;font-weight:700;
  border:.5px solid var(--sky);
}
#scooter-reserve-timer{
  font-size:20px;font-weight:800;font-family:var(--font-num);min-width:44px;
}
#scooter-reserve-label{flex:1;font-size:12px;}
#scooter-reserve-close{
  background:rgba(0,0,0,.08);border:none;border-radius:8px;
  width:28px;height:28px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}

/* ── Resume banner ── */
#resume-banner{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:14px;right:14px;z-index:201;
  background:var(--ink);color:#fff;border-radius:16px;
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  box-shadow:var(--shadow-pop);font-size:13px;font-weight:700;
}
#resume-text{flex:1;}
#resume-yes, #resume-no{
  border:none;border-radius:10px;padding:6px 12px;
  font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;
}
#resume-yes{background:var(--mint-tint);color:var(--mint-ink);}
#resume-no{background:rgba(255,255,255,.15);color:#fff;}

/* ── OFFLINE BANNER ── */
#offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:#FF3B30;color:#fff;
  font-size:13px;font-weight:700;text-align:center;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  transform:translateY(-100%);opacity:0;
  transition:transform .3s ease, opacity .3s ease;
  pointer-events:none;
}
#offline-banner.show{transform:translateY(0);opacity:1;}

/* ── SPLASH ── */
#splash{
  position:fixed;inset:0;z-index:100;
  background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .4s ease,transform .4s ease;
}
#splash.hide{opacity:0;transform:scale(1.04);pointer-events:none;}
#splash-logo{
  width:72px;height:72px;border-radius:22px;
  background:linear-gradient(135deg,var(--mint),var(--sky));
  display:flex;align-items:center;justify-content:center;
  font-size:36px;box-shadow:0 12px 40px rgba(0,0,0,.3);
}
#splash-title{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.5px;}
#splash-sub{font-size:15px;color:rgba(255,255,255,.55);font-weight:500;}
#splash-spinner{
  width:32px;height:32px;border:2.5px solid rgba(255,255,255,.15);
  border-top-color:var(--mint);border-radius:50%;
  animation:spin .8s linear infinite;position:absolute;bottom:60px;
}
@keyframes spin{to{transform:rotate(360deg)}}
/* ── Destination pin ── */
.dest-pin-wrap{
  display:flex;flex-direction:column;align-items:center;
  position:relative;width:40px;
}
.dest-pin{
  width:36px;height:36px;border-radius:50% 50% 50% 0;
  background:var(--coral);transform:rotate(-45deg);
  box-shadow:0 4px 14px rgba(0,0,0,.28),0 0 0 3px #fff;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;flex-shrink:0;
}
.dest-pin-pulse{
  position:absolute;top:0;left:50%;
  width:36px;height:36px;border-radius:50% 50% 50% 0;
  background:var(--coral);
  transform:translateX(-50%) rotate(-45deg);
  transform-origin:center center;
  animation:dest-pulse 2s ease-out infinite;
  z-index:1;pointer-events:none;
}
.dest-pin-label{
  margin-top:5px;
  background:rgba(255,255,255,.96);color:var(--ink);
  font-size:11px;font-weight:700;font-family:var(--font-sans);
  padding:3px 8px;border-radius:var(--r-pill);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  white-space:nowrap;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
@keyframes dest-pulse{
  0%{opacity:.55;transform:translateX(-50%) rotate(-45deg) scale(1);}
  100%{opacity:0;transform:translateX(-50%) rotate(-45deg) scale(2.2);}
}

/* ── Nearby scooters section ── */
#nearby-scooters-wrap{padding:0 0 4px;}
#nearby-scooters-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px 6px;cursor:pointer;user-select:none;
}
#nearby-scooters-hdr-title{
  font-size:12px;font-weight:700;color:var(--ink-muted);
  letter-spacing:.05em;text-transform:uppercase;
}
#nearby-scooters-toggle-arrow{
  font-size:12px;color:var(--ink-muted);
  transition:transform .2s;
}
#nearby-scooters-toggle-arrow.open{transform:rotate(180deg);}
#nearby-scooters-list{overflow:hidden;}
.nearby-scooter-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 18px;border-bottom:.5px solid var(--hairline-2);
  cursor:pointer;transition:background .12s;
}
.nearby-scooter-row:last-child{border-bottom:none;}
.nearby-scooter-row:active{background:var(--surface-2);}
.nearby-sc-ico{font-size:20px;flex-shrink:0;}
.nearby-sc-info{flex:1;min-width:0;}
.nearby-sc-name{font-size:14px;font-weight:700;color:var(--ink);}
.nearby-sc-meta{font-size:12px;color:var(--ink-muted);margin-top:2px;}
.nearby-sc-dist{
  font-size:13px;font-weight:800;color:var(--sky-ink);
  flex-shrink:0;
}

@keyframes scooter-pulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(2.4);opacity:0}
  100%{transform:scale(2.4);opacity:0}
}
.scooter-rec-pin{position:relative;width:40px;height:40px;}
.scooter-rec-pulse{
  position:absolute;inset:0;border-radius:50%;
  background:var(--c,#007AFF);opacity:.6;
  animation:scooter-pulse 1.6s ease-out infinite;
}
.scooter-rec-dot{
  position:absolute;inset:4px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  border:2.5px solid var(--c,#007AFF);
}

/* ── LAYERS PANEL ── */
#layers-panel{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--shadow-pop);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:0 0 calc(24px + env(safe-area-inset-bottom,0px));
  pointer-events:none;
  max-height:min(82vh, calc(100dvh - 18px));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
#layers-panel.open{transform:none;pointer-events:auto;}
#layers-panel-backdrop{
  position:fixed;inset:0;z-index:39;
  background:rgba(31,41,55,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
#layers-panel-backdrop.open{opacity:1;pointer-events:auto;}
#layers-handle{padding:8px 0 0;display:flex;flex-direction:column;align-items:center;}
#layers-handle .handle-pill{margin-bottom:0;}
#layers-title{
  font-size:17px;font-weight:700;color:var(--ink);
  padding:12px 18px 10px;border-bottom:.5px solid var(--hairline-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
#layers-close{
  width:34px;height:34px;border:none;border-radius:17px;
  background:var(--surface-2);color:var(--ink-muted);
  font-size:24px;line-height:1;cursor:pointer;flex-shrink:0;
}
#layer-presets-card{
  padding:14px 18px 12px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-bottom:.5px solid var(--hairline-2);
}
#layer-legend-card{
  padding:14px 18px 14px;
  background:var(--surface-2);
  border-bottom:.5px solid var(--hairline-2);
}
#safety-settings-card{
  padding:14px 18px 14px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-bottom:.5px solid var(--hairline-2);
}
#source-health-card{
  padding:14px 18px 14px;
  background:var(--surface-2);
  border-bottom:.5px solid var(--hairline-2);
}
.layer-presets-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.layer-presets-title{font-size:14px;font-weight:800;color:var(--ink);}
.layer-presets-sub{font-size:12px;color:var(--ink-muted);}
#layer-presets-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
#layer-presets-row::-webkit-scrollbar{display:none;}
.layer-preset-btn{
  border:none;border-radius:999px;padding:9px 12px;
  background:var(--surface);color:var(--ink-soft);
  border:.5px solid var(--hairline-2);box-shadow:var(--shadow);
  font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.layer-preset-btn.active{
  background:var(--ink);color:#fff;border-color:transparent;
}
.layer-preset-btn:active{transform:scale(.98);}
.legend-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.legend-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 11px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:.5px solid var(--hairline-2);
}
.legend-swatch{
  width:12px;height:12px;border-radius:50%;margin-top:4px;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.5);
}
.legend-swatch.mint{background:var(--mint);}
.legend-swatch.peach{background:var(--peach);}
.legend-swatch.coral{background:var(--coral);}
.legend-swatch.sky{background:var(--sky);}
.legend-copy{min-width:0;}
.legend-name{font-size:12px;font-weight:800;color:var(--ink);margin-bottom:2px;}
.legend-desc{font-size:11px;line-height:1.45;color:var(--ink-muted);}
.legend-tips{display:flex;flex-direction:column;gap:7px;}
.legend-tip{
  font-size:11.5px;line-height:1.45;color:var(--ink-soft);
  padding:8px 10px;border-radius:12px;
  background:rgba(255,255,255,.62);
  border:.5px solid var(--hairline-2);
}
.safety-settings-list{display:flex;flex-direction:column;gap:9px;}
.safety-setting-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:.5px solid var(--hairline-2);
}
.safety-setting-copy{flex:1;min-width:0;}
.safety-setting-name{font-size:13px;font-weight:800;color:var(--ink);}
.safety-setting-desc{font-size:11.5px;line-height:1.4;color:var(--ink-muted);margin-top:2px;}
#source-health-list{display:flex;flex-direction:column;gap:8px;}
.source-health-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 11px;border-radius:14px;
  background:rgba(255,255,255,.72);
  border:.5px solid var(--hairline-2);
}
.source-health-dot{
  width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.45);
}
.source-health-dot.ok{background:var(--mint);}
.source-health-dot.warn{background:var(--peach);}
.source-health-dot.error{background:var(--coral);}
.source-health-copy{flex:1;min-width:0;}
.source-health-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.source-health-name{font-size:12.5px;font-weight:800;color:var(--ink);}
.source-health-age{font-size:11px;color:var(--ink-muted);white-space:nowrap;}
.source-health-meta{font-size:11.5px;color:var(--ink-soft);line-height:1.45;margin-top:3px;}
.layer-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;border-bottom:.5px solid var(--hairline-2);
}
.layer-row:last-child{border-bottom:none;}
.layer-ico{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.layer-info{flex:1;}
.layer-name{font-size:15px;font-weight:600;color:var(--ink);}
.layer-desc{font-size:12px;color:var(--ink-muted);margin-top:2px;}
.layer-fresh{
  display:inline-block;margin-right:6px;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:20px;vertical-align:middle;
}
.layer-fresh.fresh{background:var(--mint-tint);color:var(--mint-ink);}
.layer-fresh.stale{background:var(--peach-tint,#FFF4E0);color:var(--peach-ink,#B65A00);}
.layer-fresh.error{background:var(--coral-tint);color:var(--coral-ink);}
.layer-toggle{position:relative;width:46px;height:28px;flex-shrink:0;}
.layer-toggle input{opacity:0;width:0;height:0;}
.layer-toggle .track{
  position:absolute;inset:0;border-radius:14px;
  background:var(--ink-faint);transition:background .2s;cursor:pointer;
}
.layer-toggle .thumb{
  position:absolute;top:3px;left:3px;
  width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);
  transition:transform .2s;pointer-events:none;
}
.layer-toggle input:checked + .track{background:var(--mint);}
.layer-toggle input:checked + .track + .thumb,
.layer-toggle input:checked ~ .thumb{transform:translateX(18px);}
.layer-expand-btn{
  background:none;border:none;padding:4px 6px;cursor:pointer;
  font-size:18px;color:var(--ink-muted);transition:transform .2s;line-height:1;flex-shrink:0;
}
.layer-expand-btn.open{transform:rotate(90deg);}
.layer-sub{display:none;background:var(--surface-2);}
.layer-sub.open{display:block;}
.layer-sub-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 18px 9px 42px;
  border-bottom:.5px solid var(--hairline-2);
}
.layer-sub-row:last-child{border-bottom:none;}
.layer-sub-ico{font-size:15px;flex-shrink:0;}
.layer-sub-name{flex:1;font-size:13px;color:var(--ink-soft);}
.layer-sub-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.layer-sub-info .layer-sub-name{flex:none;}
.layer-sub-meta{font-size:11px;color:var(--ink-muted);line-height:1.3;}
.layer-toggle-sm{width:36px;height:22px;}
.layer-toggle-sm .thumb{width:16px;height:16px;top:3px;left:3px;}
.layer-toggle-sm input:checked ~ .thumb{transform:translateX(14px);}
.layer-sub.parent-off .layer-sub-row{opacity:.45;pointer-events:none;}
.layer-sub.parent-off .layer-toggle .track{background:var(--ink-faint)!important;}
.layer-sub.parent-off .layer-toggle .thumb{transform:translateX(0)!important;}
.layer-expand-btn-sm{font-size:13px;width:20px;height:20px;flex-shrink:0;}
.layer-sub-row-zones{border-top:1px solid var(--hairline-2);margin-top:2px;}
.layer-sub-sub{display:none;}
.layer-sub-sub.open{display:block;}
.layer-sub-sub-row{
  display:flex;align-items:center;gap:12px;
  padding:7px 18px 7px 56px;
  border-bottom:.5px solid var(--hairline-2);
  background:rgba(0,0,0,.06);
}
.layer-sub-sub-row:last-child{border-bottom:none;}
.layer-sub-sub-row .layer-sub-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.layer-sub-sub-row .layer-sub-name{flex:none;font-size:12px;}
.layer-sub-sub-row .layer-sub-meta{font-size:10px;}
.layer-sub-sub-name{flex:1;font-size:12px;color:var(--ink-soft);}
.layer-sub-sub.parent-off .layer-sub-sub-row{opacity:.45;pointer-events:none;}
.layer-sub-sub.parent-off .layer-toggle .track{background:var(--ink-faint)!important;}
.layer-sub-sub.parent-off .layer-toggle .thumb{transform:translateX(0)!important;}
.layer-sub-sub-note{
  padding:8px 18px 10px 56px;
  font-size:11px;
  color:var(--ink-muted);
  line-height:1.45;
  background:rgba(0,0,0,.04);
  border-bottom:.5px solid var(--hairline-2);
}

.user-puck-outer{
  width:22px;height:22px;border-radius:50%;
  background:rgba(73,168,255,.2);
  display:flex;align-items:center;justify-content:center;
}
.user-puck{
  width:14px;height:14px;border-radius:50%;
  background:var(--sky);border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* ── DARK MODE ── */
/* ── Live data freshness bar ── */
#freshness-bar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:3px;background:transparent;pointer-events:none;
}
#freshness-bar-fill{
  height:100%;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,var(--mint),var(--sky));
  transition:width .6s ease, opacity .3s;
}

/* ── Tablet responsive layout (≥768px) ── */
@media (min-width: 768px) {
  #sheet {
    width: 380px;
    right: auto;
    left: 16px;
    border-radius: var(--r-xl) !important;
    bottom: 16px;
    height: calc(100vh - 32px);
  }
  #sheet-card { border-radius: var(--r-xl) !important; }
  #route-bottom {
    width: 380px;
    left: 16px;
    right: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  #fab-col { left: 412px; }
  #speed-badge { right: 16px; bottom: 110px; }
  #nav-screen > #turn-bar { border-radius: 0 0 var(--r-xl) var(--r-xl); max-width: 480px; margin: 0 auto; }
  #recenter-fab { left: calc(380px + 16px + 50%); }
  #hazard-card { max-width: 460px; left: 50%; transform: translateX(-50%); right: auto; }
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#111318;--surface:#1C1F26;--surface-2:#242830;
    --ink:#F0F2F5;--ink-soft:#A0A8B5;--ink-muted:#606878;--ink-faint:#353C4A;
    --hairline:rgba(240,242,245,.08);--hairline-2:rgba(240,242,245,.05);
    --mint-tint:color-mix(in oklch, var(--mint) 18%, var(--surface));
    --peach-tint:color-mix(in oklch, var(--peach) 18%, var(--surface));
    --lavender-tint:color-mix(in oklch, var(--lavender) 18%, var(--surface));
    --sky-tint:color-mix(in oklch, var(--sky) 18%, var(--surface));
    --coral-tint:color-mix(in oklch, var(--coral) 18%, var(--surface));
  }
  /* map tiles stay bright even in dark mode UI */
  /* CTA buttons: fixed dark bg in dark mode so white text stays readable */
  #go-btn,#rep-submit{background:#1F2937;color:#fff;}
  #stop-btn{background:var(--coral);color:#fff;}
  .route-mode-pill.active,.pill.active{background:#ECEEF2;color:#1A1D26;}
}

/* ═══ PROFILE SCREEN (full-page account hub) ═══════════════════════════════ */
.profile-topbar{display:flex;align-items:center;gap:10px;padding:14px 16px;position:sticky;top:0;
  background:var(--bg);border-bottom:.5px solid var(--hairline-2);z-index:1}
.profile-back{width:38px;height:38px;border:none;border-radius:50%;background:var(--surface-2);
  color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.profile-identity{text-align:center;padding:22px 16px 24px}
.profile-avatar{width:84px;height:84px;border-radius:50%;background:var(--surface-2);margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-size:42px;
  border:.5px solid var(--hairline-2);box-shadow:var(--shadow-lg,0 8px 24px rgba(0,0,0,.12))}
.profile-menu{padding:0 14px;display:flex;flex-direction:column;gap:1px;
  background:var(--surface);border-radius:16px;margin:0 14px;overflow:hidden;
  border:.5px solid var(--hairline-2)}
.profile-row{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;
  padding:15px 16px;border:none;border-bottom:.5px solid var(--hairline-2);background:var(--surface);
  color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:start;
  transition:background .12s}
.profile-row:last-child{border-bottom:none}
.profile-row:active{background:var(--surface-2)}
.profile-row-i{font-size:21px;line-height:1;flex-shrink:0;width:26px;text-align:center}
.profile-row-t{flex:1}
.profile-row-c{color:var(--ink-faint);font-size:22px;font-weight:400;transform:scaleX(-1)}

/* ═══ SETTINGS PANEL ═══════════════════════════════════════════════════════ */
.settings-group-title{font-size:12px;font-weight:700;color:var(--ink-muted);
  margin:16px 2px 8px;text-transform:none}
.settings-group-title:first-child{margin-top:0}
.settings-toggle{display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px;background:var(--surface-2);border-radius:12px;margin-bottom:8px;
  font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.settings-toggle input{width:20px;height:20px;accent-color:var(--mint);cursor:pointer}
.settings-link{display:flex;align-items:center;justify-content:space-between;width:100%;
  box-sizing:border-box;padding:13px 14px;background:var(--surface-2);border:none;border-radius:12px;
  margin-bottom:8px;font-size:14px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;
  text-align:start}
.settings-link span:last-child{transform:scaleX(-1);font-size:20px}