/*!
 * flat-2d.css — HK Navi Map 平面 2D 介面
 * 在 style.css 後載入；不修改地圖投影、底圖來源、GPS 或導航邏輯。
 * 以不透明表面、純色、細邊線及清晰 2D 標記代替 Aurora Glass 的漸變與立體投影。
 */
:root{
  color-scheme:light;
  --bg:#f5f7fa;
  --bg-soft:#eef2f6;
  --surface:#ffffff;
  --surface-2:#f1f5f9;
  --surface-3:#e2e8f0;
  --line:#dce3eb;
  --line-strong:#b9c7d8;
  --text:#182b41;
  --text-2:#33465c;
  --muted:#62758a;
  --muted-2:#697c90;
  --charger:#0a956a;
  --parking:#2563eb;
  --fuel:#bf7310;
  --carwash:#8955c6;
  --danger:#c83e53;
  --risk:#ba6500;
  --accent:#2563eb;
  --accent-2:#1d55c8;
  --accent-soft:#e8f0ff;
  --accent-line:#9abaf6;
  --accent-grad:#2563eb;
  --r-lg:14px;
  --r:12px;
  --r-sm:9px;
  --shadow-1:none;
  --shadow-2:none;
  --blur:none;
}
body[data-vehicle="ev"]{
  --accent:#047857;--accent-2:#046c50;--accent-soft:#e3f5ee;
  --accent-line:#99dac3;--accent-grad:#047857;
}
body[data-vehicle="fuel"]{
  --accent:#ae6208;--accent-2:#955509;--accent-soft:#fff1d8;
  --accent-line:#edc486;--accent-grad:#ae6208;
}
body{background:var(--bg);color:var(--text)}
body::before,.side::before{display:none}
::selection{background:#dbeafe;color:#102b4c}
a,.about-sources a,.flood-src li a,.flood-pending li a{color:#1259b4}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #2563eb;outline-offset:2px;border-radius:8px
}
/* Flat design never relies on shadows, perspective or frosted panels. */
.app,.side,.navPage,.start-screen,.arrival-scene{isolation:isolate}
.side{background:#ffffff;border-right:1px solid var(--line);box-shadow:none}
.map,.navMap{background:#e9f0f5}
.logo{background:#0b806e;color:#fff;border:0;border-radius:10px;box-shadow:none}
.brand-text h1{font-weight:800}
.brand-text p{color:var(--muted)}

/* Toolbar, search, filters and primary choices. */
.field input,.iconbtn,.panel-toggle,.origin-controls button,.filters select,
.navActions button,.gps-actions button,.navBack,.navVoice,.navStop{
  background:#ffffff;color:var(--text);border:1px solid var(--line);
  box-shadow:none;border-radius:9px;
}
.field input:focus{background:#fff;box-shadow:0 0 0 3px var(--accent-soft);border-color:var(--accent)}
.iconbtn:hover,.panel-toggle:hover,.origin-controls button:hover,.navActions button:hover,
.gps-actions button:hover,.navBack:hover,.navVoice:hover{
  transform:none;color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft);
}
.filters select{background-color:#fff}
.tabs{gap:6px}
.tab{background:var(--surface-2);border:1px solid transparent;border-radius:9px;color:var(--text-2);box-shadow:none}
.tab i{filter:none;opacity:1}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:none}
.tab:hover:not(.active){background:var(--accent-soft);color:var(--text);border-color:var(--accent-line)}
.nearestBox,.stat,.card,.wx-banner,.navPanel,.audit,.about,.flood-summary,.flood-live,.geocode-me,
.navNow,.compat-note,.risk-warning,.fuel-notice{
  background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:none;border-radius:11px;
}
.nearestBox:hover,.card:hover{transform:none;background:#f7faff;border-color:var(--accent-line);box-shadow:none}
.nearestBox:focus-visible,.card:focus-visible{outline-color:var(--accent)}
.nb-icon{border:0;border-radius:8px}
.nb-dist,.navMeta{color:var(--accent-2)}
.stat::after{top:0;left:0;right:0;height:3px;background:var(--stat-color,var(--accent));border-radius:0}
.stat b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--text)}
.stat[data-k="total"]{--stat-color:#64748b}.stat[data-k="free"]{--stat-color:#0a956a}
.stat[data-k="chargers"]{--stat-color:#2563eb}.stat[data-k="fuel"]{--stat-color:#bf7310}
.status::before{box-shadow:none;animation:none}
.risk-warning{background:#fff8ed;border-color:#f4d7a9}
.rw-icon{filter:none}
.rw-body b{color:#894800}.rw-body p{color:#76542b}
.list{gap:8px}
.card{padding:12px 13px 12px 16px}
.card::before{top:0;bottom:0;width:4px;border-radius:11px 0 0 11px;background:var(--card-accent,var(--accent))}
.card[data-type="charger"]{--card-accent:#0a956a}
.card[data-type="parking"]{--card-accent:#2563eb}
.card[data-type="fuel"]{--card-accent:#bf7310}
.card[data-type="carwash"]{--card-accent:#8955c6}
.card[data-vacancy="none"]{--card-accent:#c83e53}
.card.active{background:var(--accent-soft);border-color:var(--accent);box-shadow:none}
.card:hover::before,.card.active::before{top:0;bottom:0}
.title .ti{border:0;border-radius:7px}
.dist{background:#eff4f8;color:#425870;border-color:transparent;border-radius:6px}
.badge{background:#eef3f8;color:#3a4e65;border-color:transparent;border-radius:6px}
.badge.green{background:#dcfce7;color:#166534;border-color:transparent}
.badge.amber{background:#fef3c7;color:#92400e;border-color:transparent}
.badge.red{background:#fee2e2;color:#991b1b;border-color:transparent}
button.badge:hover{transform:none;filter:none}
button.badge.green{background:#047857;color:#fff;box-shadow:none}
button.badge.google-nav{background:#1d5bce;color:#fff;box-shadow:none}
.empty{background:#f8fafc}

/* Weather, source details and risk indications remain color-coded but non-glossy. */
.wx-banner[data-level="amber"]{background:#fff5dc;border-color:#edc46d}
.wx-banner[data-level="red"],.wx-banner[data-level="black"]{background:#fff0f0;border-color:#e69d9d;box-shadow:none}
.wx-banner[data-level="flood"]{background:#e7f7f3;border-color:#9ccfc4}
.wx-banner[data-level="thunder"]{background:#f2edfc;border-color:#c3b2ea}
.wx-ico{background:#e9eef5;border:0;border-radius:8px}
.wx-banner[data-level="amber"] .wx-ico{background:#ffe4a3;color:#77500b;border-color:transparent}
.wx-banner[data-level="red"] .wx-ico,.wx-banner[data-level="black"] .wx-ico{background:#f7b9b9;color:#8a1c1c;border-color:transparent}
.wx-banner[data-level="flood"] .wx-ico{background:#b5eadb;color:#075b4c;border-color:transparent}
.wx-banner[data-level="thunder"] .wx-ico{background:#d8c7fb;color:#5d329f;border-color:transparent}
.wx-warn,.wx-rain-grid div{background:#fff;border-color:var(--line);border-radius:7px}
.wx-warn b,.wx-rain-grid strong{color:var(--text)}
.wx-rain{background:#f0f7ff;border-color:#c9dff5}
.wx-rain>b,.wx-rain p{color:#264e78}
.wx-links a{color:#1259b4;background:#e8f0ff}
.flood-summary p,.flood-live-note,.flood-live-grid b{color:var(--text-2)}
.flood-live,.flood-live[data-level="none"]{background:#f0f7ff;border-color:#cadef1}
.flood-live[data-level="amber"]{background:#fff8e8;border-color:#ebcd8f}
.flood-live[data-level="red"],.flood-live[data-level="black"]{background:#fff0f0;border-color:#e8a8a8}
.flood-live[data-level="flood"]{background:#e8f8f5;border-color:#9bcfc4}
.flood-live-grid>div,.flood-live-zone{background:#fff;border-color:var(--line);color:var(--text-2)}
.flood-live-zone a{color:#1259b4}
.flood-advice,.flood-live-line,.flood-pending{color:var(--text-2)}
.flood-src{background:#f7fafc;border-radius:8px}
.flood-src summary:hover,.audit summary:hover,.about summary:hover{color:var(--accent)}
.flood-method b,.flood-src.ref summary{color:#245784}
.flood-card.lv-vhigh{--card-accent:#c83e53}
.flood-card.lv-high{--card-accent:#de6e28}
.flood-card.lv-mid{--card-accent:#db9b1b}
.flood-card.lv-low{--card-accent:#2382ba}
.flood-card .flood-rank,.flood-card .flood-chip{background:#e9eef5;box-shadow:none}
.flood-card.lv-vhigh .flood-rank,.flood-card .flood-chip.lv-vhigh{background:#fee2e2;color:#991b1b}
.flood-card.lv-high .flood-rank,.flood-card .flood-chip.lv-high{background:#ffedd5;color:#9a3412}
.flood-card.lv-mid .flood-rank,.flood-card .flood-chip.lv-mid{background:#fef3c7;color:#92400e}
.flood-card.lv-low .flood-rank,.flood-card .flood-chip.lv-low{background:#dbeafe;color:#1d4ed8}
.flood-alert{background:#fff0f0;border-color:#e99aa7}
.flood-alert b,.flood-alert span{color:#9b2339}
.flood-alert.lv-mid{background:#fff8e7;border-color:#edcf8b}
.flood-alert.lv-mid b,.flood-alert.lv-mid span{color:#855407}
.flood-alert.lv-low{background:#ecf6ff;border-color:#b8d5eb}
.flood-alert.lv-low b,.flood-alert.lv-low span{color:#1f547a}
.geocode-me{background:#eff6ff;border-color:#b8d6ff}
.gm-label,.geocode-me b,.nav-geo span,.nav-geo b,.geo-line b{color:#225282}
.geo-line b,.nav-code{background:#e5f1ff;color:#245784;border-color:#bad8f5}
.geo-copy,.gm-copy{background:#eff6ff;color:#245784;border-color:#bfdbfe;border-radius:7px}
.geo-copy:hover,.gm-copy:hover{background:#dbeafe;color:#163c70}
.geo-copy.copied,.gm-copy.copied{background:#047857;color:#fff}
.geo-pop{background:#eff6ff;border-color:#bfdbfe}
.geo-pop b{color:#245784}
.nav-geo{background:#eff6ff;border-color:#bfdbfe}
.navPanel{background:#effaf5;border-color:#b6ddcd}
.navNow{background:#fff}
.navNow span,.gps-help{color:var(--muted)}
.navActions .primary,.gps-actions .primary,.btn-primary{
  color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:none;
}
.navActions .primary:hover,.gps-actions .primary:hover,.btn-primary:hover{
  color:#fff;background:var(--accent-2);filter:none;transform:none
}
.voiceOn{color:#065f46!important;background:#e4f7ed!important;border-color:#a7dbc0!important}
.step{border-color:var(--line)}

/* Flat opaque tool overlays on top of Lands Department 2D base tiles. */
.map-deck,.panel-open,.legend,.native-zoom,.native-popup,.wx-map-badge,.map-attribution{
  background:#fff!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:10px!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.map-deck{border-radius:10px!important}
.deck-nav,.deck-option{color:var(--text-2)}
.deck-nav:hover,.deck-option:hover{color:var(--accent);background:#eff6ff}
.deck-dots i{background:#cbd5e1}.deck-dots i.on{background:var(--accent)}
.panel-open:hover{color:var(--accent);background:var(--accent-soft)}
.legend .lg{background:#f8fafc;color:var(--text-2);border-color:var(--line);border-radius:7px}
.legend .lg.wide{color:var(--text-2)}
.native-attribution{color:#42536b!important}
.native-attribution a{color:#1259b4!important}
.native-zoom button{background:#fff!important;color:var(--text)!important;border-color:var(--line)!important}
.native-zoom button:hover{background:#eef4ff!important}
.native-popup{background:#fff!important;color:var(--text)!important;border-radius:11px!important}
.native-popup::after,.native-popup-tip{background:#fff!important}
.popup p,.native-popup p{color:var(--text-2)}
.popup b,.native-popup b{color:var(--text)}
.popup a,.native-popup a{color:#1259b4}
.carwash-nav-btn{border-radius:8px}
.carwash-nav-btn:hover{transform:none;filter:none}
.carwash-nav-btn.internal{background:#047857;color:#fff;box-shadow:none}
.carwash-nav-btn.google,.badge.google-nav{background:#2563eb;color:#fff}
.nav-vehicle-icon{box-shadow:none}
.wx-map-badge{background:#fff9ec!important;color:#8c550e!important;border-color:#edc887!important}
.wx-map-badge[data-level="red"],.wx-map-badge[data-level="black"]{
  background:#fff0f0!important;color:#a52727!important;border-color:#e59c9c!important
}
.wx-map-badge[data-level="flood"]{background:#e6f8f3!important;color:#086c53!important;border-color:#a6d9c9!important}
.wx-map-badge[data-level="thunder"]{background:#f2edfc!important;color:#7044ad!important;border-color:#ccbeeb!important}
.wx-map-badge:hover{transform:none;filter:none}
.wx-map-badge[data-level="red"],.wx-map-badge[data-level="black"]{animation:none}
.district-tag,.geo2d{
  background:#fff!important;border:1px solid var(--line-strong);border-radius:7px;
  color:var(--text);box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.district-tag b,.geo2d b{color:var(--text)}
.district-tag span,.geo2d span{color:var(--text-2)}
.district-tag.lv-light{background:#e8f4ff!important}
.district-tag.lv-moderate{background:#fff1d0!important}
.district-tag.lv-heavy{background:#ffdfc6!important}
.district-tag.lv-vheavy{background:#ffe4e6!important}
.district-tag.lv-light b,.district-tag.lv-light span{color:#125b94}
.district-tag.lv-moderate b,.district-tag.lv-moderate span{color:#805000}
.district-tag.lv-heavy b,.district-tag.lv-heavy span{color:#98400b}
.district-tag.lv-vheavy b,.district-tag.lv-vheavy span{color:#ad243a}
.district-tag.active{border:2px solid #2563eb;box-shadow:none!important}

/* Compact, top-down 2D station icons: keep accessible names; reveal label on hover/focus. */
.marker2d{
  width:36px;height:36px;border-radius:9px;box-shadow:none;
  border:2px solid #fff;outline:2px solid var(--marker,#2563eb);
  background:var(--marker,#2563eb);color:#fff;
}
.marker2d::after{display:none}
.marker2d.parking{--marker:#2563eb;background:#2563eb}
.marker2d.charger{--marker:#0a956a;background:#0a956a}
.marker2d.fuel{--marker:#bb6b13;background:#bb6b13}
.marker2d.carwash{--marker:#8252b6;background:#8252b6}
.marker2d span{font-size:17px}
.marker2d small{
  display:none;top:calc(100% + 8px);padding:3px 7px;
  background:#fff;color:#203247;border:1px solid var(--line-strong);
  border-radius:6px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.native-ui [data-native-layer]:hover .marker2d small,
.native-ui [data-native-layer]:focus .marker2d small,
.native-ui [data-native-layer]:focus-within .marker2d small{display:block}
.vehicle2d{background:#fff;border:3px solid var(--vehicle-color);box-shadow:none}
.manual-marker{background:#f59e0b;box-shadow:none}
.flood2d,.flood2d:where(*){
  background:var(--flood,#c83e53);border:2px solid #fff;
  outline:2px solid var(--flood,#c83e53);border-radius:9px;box-shadow:none;
}

/* Driving mode: route and metrics have stable, opaque information surfaces. */
.navPage{background:var(--bg)}
.navBack,.navVoice,.navTopCard,.navBottom{
  background:#fff;color:var(--text);border:1px solid var(--line);
  border-radius:11px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
#navPageSummary,.navTurnText span{color:var(--muted)}
.gps-panel,.navMetrics .metric{background:#f2f6fa;border-color:var(--line);border-radius:8px}
.navTurnIcon{background:var(--accent);color:#fff;border-radius:9px;box-shadow:none}
.navProgress{background:#dbe4ee}.navProgress i{background:var(--accent);box-shadow:none}
.futureStep.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}
.futureStep.active i{color:var(--accent)}
.external-nav{background:#eaf2ff;color:#1255a5;border-color:#b9d2f8;border-radius:9px}
.external-nav:hover{background:#dbeafe;color:#124586;transform:none}
.navStop{background:#fff0f0;border-color:#efc1c7;color:#a62b42}
.navStop:hover{background:#ffe4e8;color:#9b2339;transform:none}
.nav-wx{background:#fff3d8;color:#775308}
.nav-wx[data-level="red"],.nav-wx[data-level="black"]{background:#fff0f0;color:#a62b42}
.nav-wx[data-level="flood"]{background:#e6f8f3;color:#066b55}

/* Onboarding and arrival — same flat 2D look. */
.start-screen,.arrival-scene{
  background:rgba(227,234,243,.97);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.start-panel,.arrival-card{
  background:#fff;color:var(--text);border:1px solid var(--line);
  border-radius:16px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.start-kicker,.start-eyebrow{color:var(--accent-2)}
.start-panel h2{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--text)}
.start-lead,.vehicle-choice small,.start-features span,.arrival-card p{color:var(--muted)}
.start-lead b,.start-features b{color:var(--text)}
.vehicle-choice{
  background:#f8fafc;color:var(--text);border:1px solid var(--line);
  border-radius:12px;box-shadow:none;
}
.vehicle-choice:hover{transform:none;border-color:var(--accent);background:var(--accent-soft);box-shadow:none}
.vehicle-choice:active{transform:none}
.vehicle-choice .vicon{border:0;border-radius:10px;box-shadow:none}
.vehicle-choice.fuel .vicon{background:#ffedd5}
.vehicle-choice.ev .vicon{background:#dcfce7}
.vehicle-choice .vgo{color:#047857}
.vehicle-choice.fuel .vgo{color:#a65b10}
.start-features li{background:#eff4f8;border-color:var(--line);color:var(--text-2);border-radius:8px}
.arrival-ring{display:none}
.arrival-model{animation:none}
.btn-primary{border-radius:9px}
/* Legacy 3D icons remain supported, rendered from directly above instead of tilted. */
.vehicle-marker-wrap,.dest3d{filter:none;perspective:none;animation:none}
.dest3d::after,.model3d .roof{display:none}
.vehicle-model,.model3d{
  transform:none;border-radius:9px;background:var(--accent);box-shadow:none;
}
.vehicle-model.fuel,.model3d.fuel{background:#bb6b13}
.model3d.charger{background:#0a956a}.model3d.parking{background:#2563eb}
.vehicle-model::before,.vehicle-model::after{display:none}
.dest-label{background:#fff;color:var(--text);border-color:var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}

/* Responsive: remove the sheet's floating elevation without changing its behavior. */
@media(max-width:980px){
  .side{background:#fff;border-top:1px solid var(--line);border-radius:12px 12px 0 0;box-shadow:none}
  .sheet-grab{background:#fff}
  .sheet-grab::after{background:#cad4df}
  .logo{border-radius:8px}
  .map-deck{border-radius:9px!important}
  .navBottom{border-radius:11px}
}
@media(orientation:landscape) and (max-height:560px){
  .side{border-radius:0;box-shadow:none}
}
/* Additional risk-details contrast for the light surface. */
.badge.flood.lv-vhigh,.wx-chip.lv-vhigh{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.badge.flood.lv-high,.wx-chip.lv-high{background:#ffedd5;color:#9a3412;border-color:#fed7aa}
.badge.flood.lv-mid,.wx-chip.lv-mid{background:#fef3c7;color:#92400e;border-color:#fde68a}
.badge.flood.lv-low,.wx-chip.lv-low{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.flood-advice{background:#fff1f2;color:#95283d;border-color:#fecdd3}
.flood-card.lv-mid .flood-advice,.flood-card.lv-low .flood-advice{
  background:#eff6ff;color:#255681;border-color:#bfdbfe
}
.flood-live-line{background:#eff6ff;color:#255681;border-color:#bfdbfe}
.flood-pop b{color:#a42843}
.flood-method{border-top-color:var(--line)}
.ev-chip{background:#f1f5f9;color:#475569}
.ev-chip.ev-carpark{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.ev-chip.ev-area{background:#fef3c7;color:#92400e;border-color:#fde68a}
.ev-chip.ev-unverified{background:#f1f5f9;color:#475569;border-color:#cbd5e1}
.flood-src summary{color:#28567e}
.flood-src.ref summary{color:#225282}
.flood-pending{background:#f8fafc}
.flood-pending li a{color:#1259b4}
.wx-chip{background:#eef3f8;color:var(--text-2);border-color:var(--line)}
.wx-level.lv-vhigh{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.wx-level.lv-high{background:#ffedd5;color:#9a3412;border-color:#fed7aa}
.wx-level.lv-mid{background:#fef3c7;color:#92400e;border-color:#fde68a}
.wx-level.lv-low{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.about-meta,.about-list b,.about-sources dt,.about-sources dd b,.audit-body b,.about-body code{
  color:#245784
}
.about-body code{background:#eff6ff;border-color:#bfdbfe}
.about-note{background:#fff7e7;color:#80500c;border-color:#efd4a3}
.source-note{color:var(--muted)}

/* GPS consent visibility on the flat, light onboarding screen. */
#locationConsentStatus{color:#215d8a;font-weight:600}
#allowLocationNow:disabled{opacity:.5;cursor:not-allowed;background:#edf2f7;border-color:var(--line)}