/* ============================================================
   Palermo After Dark — design system + components
   Theme follows the map style: data-theme is set by the app.
   ============================================================ */
:root{
  color-scheme:light;
  --accent:#1565d6; --on-accent:#fff; --on-inverse-accent:#8fc0ff; --accent-soft:rgba(47,127,240,.12); --accent-soft-2:rgba(47,127,240,.24);
  --map-bg:#f8f4f0;
  --surface:#fff; --surface-2:#f2f3f5; --surface-3:#e6e8ec; --surface-inverse:#1f2125; --on-inverse:#f5f6f8;
  --fg:#1a1c1f; --fg-2:#5b6068; --fg-3:#6f757e;
  --line:rgba(20,22,26,.10); --line-strong:rgba(20,22,26,.18); --scrim:rgba(20,22,26,.42);
  --success:#1e9e5a; --danger:#d93036; --sos:#d93025; --on-sos:#fff;
  --route:#2f7ff0; --route-casing:#fff; --route-safer:#1e9e5a; --loc:#2f7ff0;
  --risk-aware:#5b8db8; --risk-caution:#e39a00; --risk-elevated:#ef5f1a; --risk-avoid:#d93036;
  --risk-aware-soft:rgba(91,141,184,.14); --risk-caution-soft:rgba(227,154,0,.16); --risk-elevated-soft:rgba(239,95,26,.14); --risk-avoid-soft:rgba(217,48,54,.14);
  --risk-aware-on:#274d6e; --risk-caution-on:#6b4a00; --risk-elevated-on:#8a3200; --risk-avoid-on:#9b1c22;
  --ok-soft:rgba(30,158,90,.12); --ok-on:#0f6b3b; --night-soft:#eef2fa;
  --shadow-k:rgba(20,22,26,.30); --shadow-a:rgba(20,22,26,.15);
  --shadow-1:0 1px 2px var(--shadow-k),0 1px 3px 1px var(--shadow-a);
  --shadow-2:0 1px 2px var(--shadow-k),0 2px 6px 2px var(--shadow-a);
  --shadow-3:0 1px 3px var(--shadow-k),0 4px 8px 3px var(--shadow-a);
  --shadow-4:0 2px 3px var(--shadow-k),0 6px 10px 4px var(--shadow-a);
  --shadow-5:0 4px 4px var(--shadow-k),0 8px 12px 6px var(--shadow-a);
  --hairline:0 0 0 1px var(--line);
  --shimmer:rgba(255,255,255,.55);
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --t-headline:600 24px/32px var(--font); --t-title-lg:600 22px/28px var(--font); --t-title-md:600 16px/24px var(--font); --t-title-sm:600 14px/20px var(--font);
  --t-body-lg:400 16px/24px var(--font); --t-body-md:400 14px/20px var(--font); --t-body-sm:400 12px/16px var(--font);
  --t-label-lg:500 14px/20px var(--font); --t-label-md:500 12px/16px var(--font); --t-label-sm:500 11px/16px var(--font);
  --tap:44px; --tap-lg:48px;
  --d-1:100ms; --d-2:200ms; --d-3:300ms; --d-4:400ms; --d-5:500ms;
  --e-standard:cubic-bezier(.2,0,0,1); --e-decel:cubic-bezier(.05,.7,.1,1); --e-accel:cubic-bezier(.3,0,.8,.15); --e-spring:cubic-bezier(.05,.7,.1,1);
  --z-map:0; --z-map-ui:10; --z-controls:20; --z-fab:30; --z-sheet:40; --z-search:50; --z-banner:60; --z-nav:70; --z-dialog:100; --z-toast:110; --z-nomap:2000;
  --sa-t:env(safe-area-inset-top,0px); --sa-b:env(safe-area-inset-bottom,0px); --sa-l:env(safe-area-inset-left,0px); --sa-r:env(safe-area-inset-right,0px);
  --sheet-h:0px; --kb:0px;
  --sheet-cap:50dvh; /* floating controls ride on top of the sheet up to here: the half sheet (≤ 50% of the sheet) always fits under it (app.js sheetPadding uses the same 0.5) */
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#5b9cff; --on-accent:#0b1a33; --on-inverse-accent:#1a5fcf; --accent-soft:rgba(91,156,255,.18); --accent-soft-2:rgba(91,156,255,.32);
  --map-bg:#0c0c0c;
  --surface:#1c1d21; --surface-2:#26282d; --surface-3:#30333a; --surface-inverse:#e9eaee; --on-inverse:#1a1c1f;
  --fg:#eceef1; --fg-2:#a9adb5; --fg-3:#8a8f98;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18); --scrim:rgba(0,0,0,.6);
  --success:#4cc38a; --danger:#ff6b6f; --sos:#d93025; --on-sos:#fff;
  --route:#5b9cff; --route-casing:#0c0c0c; --route-safer:#4cc38a; --loc:#5b9cff;
  --risk-aware:#7fb0dc; --risk-caution:#ffb020; --risk-elevated:#ff7a3d; --risk-avoid:#ff5a5f;
  --risk-aware-soft:rgba(127,176,220,.18); --risk-caution-soft:rgba(255,176,32,.18); --risk-elevated-soft:rgba(255,122,61,.18); --risk-avoid-soft:rgba(255,90,95,.18);
  --risk-aware-on:#cfe3f7; --risk-caution-on:#ffd27a; --risk-elevated-on:#ffb08a; --risk-avoid-on:#ffa3a6;
  --ok-soft:rgba(76,195,138,.16); --ok-on:#9be3bd; --night-soft:#22283a;
  --shadow-k:rgba(0,0,0,.55); --shadow-a:rgba(0,0,0,.35); --shimmer:rgba(255,255,255,.06);
}
@supports (animation-timing-function:linear(0,1)){:root{--e-spring:linear(0,.019,.067,.137,.219,.308,.4,.489,.574,.653,.724,.786,.841,.887,.926,.957,.982,1.002,1.016,1.026,1.033,1.037,1.038,1.037,1.031,1.024,1.017,1.012,1.007,1.003,1.001,1)}}
@media (prefers-reduced-motion:reduce){:root{--d-1:0ms;--d-2:0ms;--d-3:0ms;--d-4:0ms;--d-5:0ms}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:var(--t-body-md);color:var(--fg);background:var(--map-bg);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;color:inherit}
a{color:var(--accent)}
[hidden]{display:none!important}
#map{position:fixed;inset:0;z-index:var(--z-map);background:var(--map-bg)}
.ic{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.grow{flex:1}
.hairline{box-shadow:var(--hairline)}

/* ---------- components ---------- */
.btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 18px;border:0;border-radius:var(--r-full);font:var(--t-label-lg);color:var(--fg);background:var(--surface-2);position:relative;overflow:hidden;user-select:none;white-space:nowrap;text-decoration:none;transition:transform var(--d-1) var(--e-standard),background var(--d-2) var(--e-standard),color var(--d-2)}
.btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--d-2) var(--e-standard);pointer-events:none}
@media (hover:hover){.btn:hover::after{opacity:.08}}
.btn:active{transform:scale(.97)} .btn:active::after{opacity:.12}
.btn:disabled{opacity:.38;pointer-events:none}
.btn .ic{width:20px;height:20px;margin-left:-4px}
.btn-filled{background:var(--accent);color:var(--on-accent)}
.btn-tonal{background:var(--accent-soft);color:var(--accent)}
.btn-outlined{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-text{background:transparent;color:var(--accent);padding:0 12px;border:0;font:var(--t-label-lg);height:36px;border-radius:var(--r-full);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.btn-danger{color:var(--danger)}
.btn-sos{background:var(--sos);color:var(--on-sos);font-weight:700;letter-spacing:.4px}
.btn-lg{--h:48px;padding:0 24px;font-size:15px}
.btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.icon-btn{width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:transparent;color:var(--fg-2);display:grid;place-items:center;position:relative;overflow:hidden;transition:background var(--d-2),transform var(--d-1);flex:none}
@media (hover:hover){.icon-btn:hover{background:var(--surface-2)}}
.icon-btn:active{background:var(--surface-3);transform:scale(.94)}
.icon-btn.accent{color:var(--accent)}
.pressable{transition:transform var(--d-1) var(--e-standard)} .pressable:active{transform:scale(.96)}

.switch{position:relative;width:51px;height:31px;flex:none}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.switch .track{position:absolute;inset:0;border-radius:var(--r-full);background:var(--surface-3);transition:background var(--d-2) var(--e-standard)}
.switch .track::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:var(--r-full);background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform var(--d-3) var(--e-decel),width var(--d-2) var(--e-standard)}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::before{transform:translateX(20px)}
.switch input:active+.track::before{width:31px}
.switch input:checked:active+.track::before{transform:translateX(16px)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}

.row{display:flex;align-items:center;gap:var(--s-4);min-height:56px;padding:var(--s-2) 0;cursor:pointer;width:100%;border:0;background:none;text-align:left;color:inherit}
.row+.row,.row+label.row,label.row+.row{border-top:1px solid var(--line)}
.row-ic{width:40px;height:40px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--fg-2);flex:none}
.row-ic .ic{width:22px;height:22px}
.row-ic.tint{background:var(--accent-soft);color:var(--accent)}
.row-ic.sos{background:var(--sos);color:var(--on-sos)}
.row-tx{flex:1;min-width:0}
.row-tx b{display:block;font:var(--t-body-lg);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-tx small{display:block;font:var(--t-body-md);color:var(--fg-2);white-space:normal}
.row-trail{color:var(--fg-3);flex:none}
.row.compact{min-height:48px}
.row:active{background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box}
.eyebrow{font:var(--t-label-md);color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;margin:var(--s-4) 0 var(--s-1)}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:var(--r-full);font:var(--t-label-md)}
.divider{height:1px;background:var(--line);margin:var(--s-2) 0}
@media (-webkit-min-device-pixel-ratio:2){.row+.row,.step,.divider{border-top-width:.5px}.divider{height:.5px}}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border-radius:var(--r-full);background:var(--surface);color:var(--fg);font:var(--t-label-lg);border:0;box-shadow:var(--shadow-1),var(--hairline);scroll-snap-align:start;white-space:nowrap;position:relative;transition:background var(--d-2) var(--e-standard),color var(--d-2),transform var(--d-1)}
.chip::before{content:"";position:absolute;inset:-4px 0}
.chip .ic{width:18px;height:18px;color:var(--fg-2)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-1)} .chip[aria-pressed="true"] .ic{color:currentColor}
:root[data-theme="dark"] .chip{background:var(--surface-2)} :root[data-theme="dark"] .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.chip:active{transform:scale(.96)}
.tag{font:var(--t-label-md);padding:6px 10px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--fg-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.field{height:44px;border:0;border-radius:var(--r-md);background:var(--surface-2);padding:0 12px;font:var(--t-body-lg);color:var(--fg);width:100%;outline:2px solid transparent;outline-offset:-2px;transition:outline-color var(--d-2)}
.field:focus{outline-color:var(--accent)}
textarea.field{height:auto;min-height:72px;padding:10px 12px;resize:vertical}
select.field{appearance:none;-webkit-appearance:none;padding-right:36px;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%235b6068' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center/20px}
:root[data-theme="dark"] select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23a9adb5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.skel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:var(--r-sm);color:transparent}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--shimmer),transparent);animation:shimmer 1.4s var(--e-standard) infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel.line{display:block;height:12px;margin:10px 0} .w80{width:80%} .w60{width:60%}
.txt{margin:0;font:var(--t-body-md);color:var(--fg-2)}
.muted{color:var(--fg-3)}
.credit{font:var(--t-body-sm);color:var(--fg-3);margin:var(--s-3) 0 0;line-height:1.5}
.ext-links{margin:var(--s-2) 0 0} .ext-links .btn-text{padding:4px 0;min-height:40px}
/* an active explore chip (Sights / Food / Nightlife) filters the map, so it reads stronger than the on/off layer chips */
.chip[data-chip="sights"][aria-pressed="true"],.chip[data-chip="food"][aria-pressed="true"],.chip[data-chip="nightlife"][aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-1)}
.src-list{margin:6px 0 0;padding-left:18px;font:var(--t-body-sm);color:var(--fg-3)} .src-list li{margin:2px 0;word-break:break-all}
.note{display:flex;gap:10px;align-items:flex-start;padding:var(--s-3);border-radius:var(--r-md);font:var(--t-body-md);background:var(--risk-elevated-soft);color:var(--risk-elevated-on);margin:var(--s-2) 0}
.note.ok{background:var(--ok-soft);color:var(--ok-on)}
.note.info{background:var(--accent-soft);color:var(--accent)}
.note .ic{flex:none;width:20px;height:20px;margin-top:1px}
.empty{padding:var(--s-6) var(--s-2);text-align:center;color:var(--fg-3);font:var(--t-body-md)}

/* ---------- search + chips ---------- */
#topbar>*{pointer-events:auto}
#topbar{pointer-events:none;position:fixed;z-index:var(--z-search);left:calc(var(--s-3) + var(--sa-l));right:calc(var(--s-3) + var(--sa-r));top:calc(var(--sa-t) + var(--s-3));display:flex;flex-direction:column;gap:var(--s-2);transition:opacity var(--d-2) var(--e-standard)}
.searchbar{display:flex;align-items:center;height:52px;padding:0 var(--s-1);border-radius:var(--r-full);background:var(--surface);box-shadow:var(--shadow-2),var(--hairline);transition:box-shadow var(--d-2) var(--e-standard)}
.searchbar:focus-within{box-shadow:var(--shadow-3),0 0 0 2px var(--accent-soft-2)}
#searchInput{flex:1;min-width:0;height:100%;border:0;background:none;font:var(--t-body-lg);color:var(--fg);outline:0;-webkit-appearance:none;appearance:none}
#searchInput::placeholder{color:var(--fg-3)}
#searchInput::-webkit-search-cancel-button{display:none}
.chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);transition:opacity var(--d-2) var(--e-standard),transform var(--d-2) var(--e-standard)}
.chips::-webkit-scrollbar{display:none}
html[data-sheet="full"] .chips,html[data-mode="pick"] .chips,html[data-mode="nav"] .chips{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity var(--d-2) var(--e-standard),transform var(--d-2) var(--e-standard),visibility 0s linear var(--d-2)}
.chips::after{content:"";flex:none;width:28px}
html[data-mode="pick"] #topbar,html[data-mode="nav"] #topbar{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-2) var(--e-standard),visibility 0s linear var(--d-2)}

/* ---------- controls ---------- */
#topControls{position:fixed;right:calc(var(--s-3) + var(--sa-r));top:calc(var(--sa-t) + var(--s-3) + 52px + 8px + 44px + var(--s-3));z-index:var(--z-controls);display:flex;flex-direction:column;gap:var(--s-2)}
#controls{position:fixed;right:calc(var(--s-3) + var(--sa-r));bottom:calc(min(var(--sheet-h),var(--sheet-cap)) + var(--sa-b) + var(--s-4) + 56px + var(--s-3));z-index:var(--z-controls);display:flex;flex-direction:column;gap:var(--s-2);transition:bottom var(--d-4) var(--e-spring),opacity var(--d-2) var(--e-standard)}
#fab{position:fixed;right:calc(var(--s-3) + var(--sa-r));bottom:calc(min(var(--sheet-h),var(--sheet-cap)) + var(--sa-b) + var(--s-4));z-index:var(--z-fab);transition:bottom var(--d-4) var(--e-spring),opacity var(--d-2),transform var(--d-1)}
html.sheet-dragging #controls,html.sheet-dragging #fab,html.sheet-dragging #toast,html.sheet-dragging .legend-pill,html.sheet-dragging .maplibregl-ctrl-bottom-left{transition:none}
html[data-sheet="full"] #controls,html[data-sheet="full"] #fab,html[data-sheet="half"] #fab,html[data-mode="pick"] #fab,html[data-mode="nav"] #fab,html[data-mode="nav"] #controls,html[data-mode="pick"] #topControls{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-2) var(--e-standard),visibility 0s linear var(--d-2)}
html[data-sheet="half"] #controls{bottom:calc(min(var(--sheet-h),var(--sheet-cap)) + var(--sa-b) + var(--s-4))}
.ctl-group{display:flex;flex-direction:column;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-2),var(--hairline);overflow:hidden}
.ctl{width:var(--tap);height:var(--tap);border:0;background:transparent;color:var(--fg-2);display:grid;place-items:center;font:var(--t-title-lg)}
.ctl .ic{width:22px;height:22px}
.ctl+.ctl{border-top:1px solid var(--line)}
.ctl.single{border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-2),var(--hairline)}
.ctl:active{background:var(--surface-2)}
.ctl.sos{background:var(--sos);color:var(--on-sos);font:700 12px/1 var(--font);letter-spacing:.6px}
#locBtn[data-state="active"]{color:var(--accent)}
#locBtn[data-state="locating"] .ic{animation:spin 1s linear infinite}
#compassBtn{transition:opacity var(--d-2) var(--e-standard),transform var(--d-2) var(--e-standard)}
#compassBtn[hidden]{display:grid!important;opacity:0;visibility:hidden;transform:scale(.6);pointer-events:none;transition:opacity var(--d-2) var(--e-standard),transform var(--d-2) var(--e-standard),visibility 0s linear var(--d-2)}
#compassNeedle{transition:transform var(--d-1) linear}
@media (pointer:coarse){#zoomGroup{display:none}}
.fab{height:56px;min-width:56px;border:0;border-radius:var(--r-lg);background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-3);display:inline-flex;align-items:center;justify-content:center;gap:10px;font:var(--t-label-lg)}
.fab-extended{padding:0 20px 0 16px}
@media (max-width:360px){.fab-extended span{display:none}.fab-extended{padding:0}}

/* ---------- legend pill ---------- */
.legend-pill{position:fixed;left:calc(var(--s-3) + var(--sa-l));max-width:calc(100vw - 44px - var(--s-3)*3);overflow:hidden;bottom:calc(min(var(--sheet-h),var(--sheet-cap)) + var(--sa-b) + var(--s-4) + 56px + var(--s-3));z-index:var(--z-map-ui);display:flex;gap:10px;align-items:center;height:32px;padding:0 12px;border:0;border-radius:var(--r-full);background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-1),var(--hairline);font:var(--t-label-md);color:var(--fg-2);transition:bottom var(--d-4) var(--e-spring),opacity var(--d-2)}
.legend-pill span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .legend-pill i{width:14px;height:4px;border-radius:2px;display:inline-block}
.k-aware{background:var(--risk-aware)} .k-caution{background:var(--risk-caution)} .k-elevated{background:var(--risk-elevated)} .k-avoid{background:var(--risk-avoid)}
html[data-sheet="full"] .legend-pill,html[data-safety="off"] .legend-pill,html[data-mode="pick"] .legend-pill,html[data-mode="nav"] .legend-pill{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-2) var(--e-standard),visibility 0s linear var(--d-2)}

/* ---------- bottom sheet ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);height:calc(100dvh - var(--sa-t) - 8px);display:flex;flex-direction:column;background:var(--surface);color:var(--fg);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-3),var(--hairline);padding-bottom:max(var(--sa-b),var(--kb));transform:translate3d(0,100%,0);will-change:transform;touch-action:none;transition:transform var(--d-4) var(--e-spring),padding-top var(--d-4) var(--e-spring),visibility 0s linear var(--d-4)}
.sheet:not([data-state="hidden"]){transition:transform var(--d-4) var(--e-spring),padding-top var(--d-4) var(--e-spring),visibility 0s}
.sheet[data-state="hidden"]{visibility:hidden}
html.sheet-dragging .sheet{transition:none}
.sheet-grip{flex:none;height:24px;display:grid;place-items:center;cursor:grab}
.sheet-handle{width:32px;height:4px;border:0;padding:0;border-radius:2px;background:var(--fg-3);opacity:.55;position:relative}
.sheet-handle::before{content:"";position:absolute;inset:-22px -48px}
.sheet-head{flex:none;padding:0 var(--s-4) var(--s-3)}
.sheet-body{flex:1;min-height:0;overflow-y:hidden;overscroll-behavior:contain;padding:0 var(--s-4) var(--s-6);scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}

html[data-sheet="full"]:not([data-dirs="1"]) .sheet{padding-top:calc(52px + var(--s-3))}
html[data-dirs="1"] #topbar{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--d-2) var(--e-standard),visibility 0s linear var(--d-2)}
@media (min-width:900px) and (pointer:fine){html[data-sheet="full"]:not([data-dirs="1"]) .sheet{padding-top:0}html[data-dirs="1"] #topbar{opacity:1;visibility:visible;pointer-events:auto}}

/* ---------- place / risk cards ---------- */
.place-head{display:flex;align-items:flex-start;gap:var(--s-3)}
.place-title{flex:1;min-width:0}
.place-title h2{margin:0;font:var(--t-title-lg);letter-spacing:-.2px;text-wrap:balance}
.place-sub{margin:2px 0 0;font:var(--t-body-md);color:var(--fg-2)}
.sheet-close{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:var(--surface-2);color:var(--fg-2);display:grid;place-items:center;position:relative}
.sheet-close::before{content:"";position:absolute;inset:-6px}
.sheet-close .ic{width:18px;height:18px}
.actions{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:var(--s-3) calc(-1*var(--s-4)) 0;padding:2px var(--s-4) var(--s-2)}
.actions::-webkit-scrollbar{display:none}
.actions .btn{flex:none}
.photos{display:flex;gap:var(--s-2);height:150px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--s-4);scrollbar-width:none;margin:var(--s-2) calc(-1*var(--s-4)) 0;padding:0 var(--s-4)}
.photos::-webkit-scrollbar{display:none}
.photos img,.photos .ph{flex:none;width:200px;height:100%;border-radius:var(--r-md);object-fit:cover;scroll-snap-align:start;background:var(--surface-2)}
.photos img:first-child,.photos .ph:first-child{width:min(280px,72vw)}
.photos img{opacity:0;transition:opacity var(--d-3) var(--e-standard)} .photos img.loaded{opacity:1}
.photos.none{display:none}
.about{padding:var(--s-3) 0 var(--s-2)} .about:empty{display:none}
.about p.main{margin:0;font:var(--t-body-md);color:var(--fg-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.about.open p.main{-webkit-line-clamp:unset;display:block}
.about .btn-text{padding:0;height:40px;min-width:44px;justify-content:flex-start;margin:-2px 0 -4px}
.about .extra{margin-top:var(--s-2)} .about .summary{margin-top:var(--s-2)}
.about .src{margin:2px 0 0;font:var(--t-body-sm);color:var(--fg-3)} .about .src a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:2px;min-height:40px;margin:-8px 0}
.ic.sm{width:16px;height:16px}
/* place card: hours · contact chips · hero photo · captions · facts · empty state */
.status:empty{display:none} .status .skel.line{margin:6px 0 2px}
.hours{display:inline-flex;align-items:center;gap:6px;min-height:40px;max-width:100%;padding:0 4px 0 0;border:0;background:none;font:var(--t-label-lg);color:var(--fg-2);text-align:left;margin:-4px 0 0 -2px}
.hours span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hours .ic{width:20px;height:20px} .hours .chev{width:16px;height:16px;color:var(--fg-3);transition:transform var(--d-2) var(--e-standard)}
.hours[aria-expanded="true"] .chev{transform:rotate(90deg)} .hours:disabled{cursor:default}
.hours.open{color:var(--ok-on)} .hours.closed{color:var(--risk-avoid-on)}
.hours-raw{font:var(--t-body-sm);color:var(--fg-3);margin:-4px 0 6px 26px;word-break:break-word}
.cchips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--s-4));padding:2px var(--s-4) var(--s-2)} .cchips:empty{display:none} .cchips::-webkit-scrollbar{display:none}
.cchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:var(--r-full);background:var(--surface-2);color:var(--fg);font:var(--t-label-lg);text-decoration:none;max-width:min(240px,70vw)}
.cchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cchip .ic{width:18px;height:18px;color:var(--accent)} .cchip:active{background:var(--surface-3)}
.hero{margin:var(--s-3) 0 0;display:block} .hero .img{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;max-height:220px;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.hero img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity var(--d-3) var(--e-standard)} .hero img.loaded{opacity:1}
.hero figcaption,.photos figcaption{font:var(--t-body-sm);color:var(--fg-3);margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero figcaption a,.photos figcaption a{color:inherit;display:inline-block;padding:13px 0;margin:-13px 0}
.skel.ph-hero{aspect-ratio:16/9;max-height:220px;margin-top:var(--s-3);border-radius:var(--r-md)}
.photos.cap{height:auto;align-items:flex-start} .photos.cap figure{flex:none;width:200px;margin:0;scroll-snap-align:start} .photos.cap figure:first-child{width:min(280px,72vw)} .photos.cap img{width:100%;height:130px}
.facts{margin:var(--s-3) 0 var(--s-1)} .facts:empty{display:none} .facts .tag{display:inline-flex;align-items:center;gap:4px;min-height:32px}
.osm-empty .btn-text{flex:none;padding:0 10px;min-height:40px;text-decoration:none} .osm-empty .row-tx b{white-space:normal}
.retry{color:var(--fg-3);padding:0;min-height:40px;text-align:left;white-space:normal}
.credit a{color:inherit;display:inline-block;padding:13px 0;margin:-13px 0}
[data-risk="aware"]{--risk:var(--risk-aware);--risk-soft:var(--risk-aware-soft);--risk-on:var(--risk-aware-on)}
[data-risk="caution"]{--risk:var(--risk-caution);--risk-soft:var(--risk-caution-soft);--risk-on:var(--risk-caution-on)}
[data-risk="elevated"]{--risk:var(--risk-elevated);--risk-soft:var(--risk-elevated-soft);--risk-on:var(--risk-elevated-on)}
[data-risk="avoid-at-night"]{--risk:var(--risk-avoid);--risk-soft:var(--risk-avoid-soft);--risk-on:var(--risk-avoid-on)}
.risk-badge{background:var(--risk-soft);color:var(--risk-on);margin-bottom:6px}
.risk-badge i{width:8px;height:8px;border-radius:50%;background:var(--risk);display:inline-block}
.daynight{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3)}
.dn{padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-2)}
.dn.night{background:var(--night-soft)}
.dn h5{display:flex;align-items:center;gap:6px;margin:0 0 4px;font:var(--t-label-md);color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em}
.dn h5 .ic{width:16px;height:16px}
.dn p{margin:0;font:var(--t-body-md);color:var(--fg-2)}
.tips{margin:0;padding-left:18px;font:var(--t-body-md);color:var(--fg-2)} .tips li{margin:4px 0}
@media (max-width:360px){.daynight{grid-template-columns:1fr}}

/* ---------- directions ---------- */
.dir-top{display:flex;align-items:center;gap:var(--s-2)}
.seg{display:flex;flex:1;padding:3px;gap:2px;border-radius:var(--r-full);background:var(--surface-2)}
.seg-btn{flex:1;height:38px;border:0;border-radius:var(--r-full);background:transparent;color:var(--fg-2);display:inline-flex;align-items:center;justify-content:center;gap:6px;font:var(--t-label-lg);transition:background var(--d-2) var(--e-standard),color var(--d-2)}
.seg-btn[aria-selected="true"]{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-1)}
.seg-btn .ic{width:20px;height:20px}
.seg-btn .num{font:var(--t-label-md);color:inherit;opacity:.9}
.ab{display:flex;gap:var(--s-2);align-items:stretch;margin-top:var(--s-3)}
.ab-rail{display:flex;flex-direction:column;align-items:center;padding:17px 4px}
.ab-rail .dot{width:10px;height:10px;border-radius:50%;border:2.5px solid var(--fg-2);box-sizing:border-box;display:block}
.ab-rail .dot.b{border-radius:2px;background:var(--danger);border-color:var(--danger)}
.ab-rail .ln{flex:1;width:0;border-left:2px dotted var(--fg-3);margin:4px 0;display:block}
.ab-fields{flex:1;display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.ab-fields .field{padding-right:12px}
.route-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3)}
.route-cards.single{grid-template-columns:1fr}
.rcard{border:2px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);background:var(--surface);text-align:left;cursor:pointer;color:inherit;transition:border-color var(--d-2),background var(--d-2)}
.rcard[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.rcard .rc-t{font:var(--t-label-lg);display:flex;align-items:center;gap:6px}
.rcard .rc-time{font:var(--t-headline);font-variant-numeric:tabular-nums;margin:2px 0}
.rcard .rc-meta{font:var(--t-body-sm);color:var(--fg-2)}
.rcard .rc-flag{font:var(--t-label-md);margin-top:6px;display:flex;align-items:center;gap:6px}
.rcard .rc-flag.warn{color:var(--risk-elevated-on)} .rcard .rc-flag.ok{color:var(--ok-on)} .rcard .rc-flag.neutral{color:var(--fg-2)}
.rcard .rc-flag .ic{width:16px;height:16px}
.summary{display:flex;align-items:baseline;gap:var(--s-2);padding:var(--s-3) 0 var(--s-2);flex-wrap:wrap}
.summary .time{font:var(--t-headline);font-variant-numeric:tabular-nums}
.summary .time.safer{color:var(--route-safer)}
.summary .dist,.summary .via{font:var(--t-body-md);color:var(--fg-2)}
.steps{list-style:none;margin:var(--s-2) 0 0;padding:0}
.step{display:grid;grid-template-columns:32px 1fr auto;gap:var(--s-3);align-items:center;min-height:52px;padding:var(--s-2) 0;border-top:1px solid var(--line);font:var(--t-body-md)}
.step .ic{width:24px;height:24px;color:var(--fg-2)}
.step .dist{font:var(--t-label-md);color:var(--fg-3);font-variant-numeric:tabular-nums}
.step.flag .sd::after{content:" · flagged lane";color:var(--risk-caution-on);font:var(--t-label-md)}
.caption{font:var(--t-body-sm);color:var(--fg-3);margin:var(--s-2) 0 0;line-height:1.5}

/* ---------- layers ---------- */
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2)}
.style{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:var(--t-label-md);color:var(--fg-2)}
.style .thumb{width:100%;aspect-ratio:1;border-radius:var(--r-md);border:2px solid transparent;box-shadow:var(--hairline);transition:border-color var(--d-2),box-shadow var(--d-2);background-size:cover;position:relative;overflow:hidden}
.style .thumb::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 46%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.55) 53%,transparent 54%),linear-gradient(0deg,transparent 30%,rgba(255,255,255,.45) 31%,rgba(255,255,255,.45) 35%,transparent 36%),linear-gradient(35deg,transparent 60%,rgba(255,255,255,.4) 61%,rgba(255,255,255,.4) 64%,transparent 65%)}
.thumb.auto{background:linear-gradient(100deg,#f6f1ea 0 48%,#17181c 52% 100%)}
.thumb.std{background:linear-gradient(135deg,#f3efe8 0%,#e6e8dd 55%,#b7d8f0 100%)}
.thumb.drk{background:linear-gradient(135deg,#26282c 0%,#141517 55%,#183446 100%)}
.thumb.drk::after,.thumb.sat::after{opacity:.35}
.thumb.sat{background:linear-gradient(135deg,#3a4a2a 0%,#6b7a45 45%,#2c3e50 100%)}
.style[aria-pressed="true"]{color:var(--accent);font-weight:600}
.style[aria-pressed="true"] .thumb{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft-2)}
.riskkey{display:flex;gap:12px;flex-wrap:wrap;padding:6px 0 10px 56px;font:var(--t-label-md);color:var(--fg-2)}
.riskkey span{display:inline-flex;align-items:center;gap:5px} .riskkey i{width:16px;height:4px;border-radius:2px;display:inline-block}

/* ---------- SOS / tonight ---------- */
.sos-call{display:block;background:var(--sos);color:var(--on-sos);border-radius:var(--r-lg);padding:18px;font:600 24px/1.2 var(--font);text-align:center;text-decoration:none;min-height:56px;margin-top:var(--s-3)}
.sos-call small{display:block;font:var(--t-body-sm);margin-top:4px}
.sos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);margin-top:var(--s-2)}
.sos-grid .btn{width:100%;padding:6px 8px;--h:auto;min-height:48px;white-space:normal;line-height:18px;text-align:center}
.sos-loc{margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-2);font:var(--t-body-md);color:var(--fg-2);word-break:break-word}
.sos-loc b{color:var(--fg);font-variant-numeric:tabular-nums}
.fact{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-2) 0;border-top:1px solid var(--line);font:var(--t-body-md);color:var(--fg-2)}
.eyebrow+.fact{border-top:0}
.riskkey+.row,.riskkey+label.row{border-top:1px solid var(--line)}
.fact .ic{width:22px;height:22px;flex:none;color:var(--fg-3);margin-top:1px}
.fact b{color:var(--fg);display:block;font-weight:500}
.fact a.tel{font-variant-numeric:tabular-nums;font-weight:600}
.sun-row{display:flex;gap:var(--s-2);margin-top:var(--s-3)}
.sun-row .dn{flex:1}

/* ---------- navigation bar ---------- */
.navbar{position:fixed;left:calc(var(--s-3) + var(--sa-l));right:calc(var(--s-3) + var(--sa-r));bottom:calc(var(--sa-b) + var(--s-3));z-index:var(--z-nav);background:var(--surface);color:var(--fg);border-radius:var(--r-lg);box-shadow:var(--shadow-4),var(--hairline);padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.nav-step{display:flex;align-items:center;gap:var(--s-3)}
.nav-step .ic{width:32px;height:32px;color:var(--accent)}
.nav-tx b{display:block;font:var(--t-title-md)} .nav-tx small{display:block;font:var(--t-body-md);color:var(--fg-2)}
.nav-actions{display:flex;gap:var(--s-2)} .nav-actions .btn{flex:1}

/* ---------- banner + centre pin ---------- */
.banner{position:fixed;top:calc(var(--sa-t) + var(--s-3));left:50%;transform:translateX(-50%);z-index:var(--z-banner);display:flex;align-items:center;gap:10px;min-height:44px;height:auto;padding:6px 6px 6px 14px;white-space:normal;border-radius:var(--r-full);background:var(--surface-inverse);color:var(--on-inverse);font:var(--t-label-lg);box-shadow:var(--shadow-3);max-width:calc(100vw - 24px);white-space:nowrap}
.banner .btn-text{color:var(--on-inverse-accent);flex:none}
#bannerText{min-width:0}
.pick-pin{position:fixed;left:0;top:0;z-index:var(--z-banner);transform:translate(-50%,-100%);pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.3));transition:transform var(--d-1) var(--e-standard)}
html[data-dragging="1"] .pick-pin{transform:translate(-50%,-112%)}
.pick-bar{position:fixed;left:calc(var(--s-3) + var(--sa-l));right:calc(var(--s-3) + var(--sa-r));bottom:calc(var(--sa-b) + var(--s-3));z-index:var(--z-nav);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-4),var(--hairline);padding:var(--s-3) var(--s-4);display:flex;gap:var(--s-3);align-items:center}
.pick-addr{flex:1;min-width:0;font:var(--t-body-md);color:var(--fg-2)} .pick-addr b{display:block;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- dialog ---------- */
dialog.modal{border:0;padding:0;margin:auto;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--surface);color:var(--fg);border-radius:var(--r-xl);box-shadow:var(--shadow-5),var(--hairline);opacity:0;transform:translateY(12px) scale(.98);transition:opacity var(--d-2) var(--e-accel),transform var(--d-2) var(--e-accel),overlay var(--d-3) allow-discrete,display var(--d-3) allow-discrete;--scrim-c:var(--scrim)}
dialog.modal[open]{opacity:1;transform:none;transition:opacity var(--d-2) var(--e-decel),transform var(--d-3) var(--e-decel),overlay var(--d-3) allow-discrete,display var(--d-3) allow-discrete}
@starting-style{dialog.modal[open]{opacity:0;transform:translateY(12px) scale(.98)}}
dialog.modal::backdrop{background:var(--scrim-c);opacity:0;transition:opacity var(--d-3) var(--e-standard),overlay var(--d-3) allow-discrete,display var(--d-3) allow-discrete}
dialog.modal[open]::backdrop{opacity:1}
@starting-style{dialog.modal[open]::backdrop{opacity:0}}
@media (max-width:600px){dialog.modal{margin:auto 0 0;width:100%;max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;padding-bottom:max(var(--sa-b),var(--kb));transform:translateY(100%)}@starting-style{dialog.modal[open]{transform:translateY(100%)}}}
.modal-head{padding:var(--s-5) var(--s-5) var(--s-2)} .modal-head h3{margin:0;font:var(--t-title-lg)} .modal-head p{margin:6px 0 0;font:var(--t-body-md);color:var(--fg-2)}
.modal-body{padding:var(--s-2) var(--s-5);display:flex;flex-direction:column;gap:var(--s-4)}
.modal-actions{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-4) var(--s-5) var(--s-5)}
.fld{display:flex;flex-direction:column;gap:6px;position:relative}
.fld label{font:var(--t-label-md);color:var(--fg-2)}
.mini-sugg{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-3),var(--hairline);margin-top:4px;max-height:220px;overflow:auto;z-index:5;display:none;padding:4px 0}
.mini-sugg.show{display:block}
.mini-sugg .sugg{padding:8px 12px;min-height:48px}
.place-hint{font:var(--t-body-sm);color:var(--fg-2);background:var(--surface-2);border-radius:var(--r-sm);padding:8px 10px;line-height:1.45}

/* ---------- suggestions ---------- */
.sugg{display:flex;align-items:center;gap:var(--s-4);min-height:56px;padding:var(--s-2) 0;cursor:pointer;width:100%;border:0;background:none;text-align:left;color:inherit}
.sugg+.sugg{border-top:1px solid var(--line)}
.sugg .row-ic{width:40px;height:40px}
.sugg .sg-tx{flex:1;min-width:0}
.sugg b{display:block;font:var(--t-title-md);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg b mark{background:none;color:var(--accent)}
.sugg small{display:block;font:var(--t-body-md);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg .dist{margin-left:auto;font:var(--t-label-md);color:var(--fg-3);flex:none}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(min(var(--sheet-h),var(--sheet-cap)) + var(--sa-b) + var(--s-4));transform:translate(-50%,16px);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-3);min-height:48px;max-width:min(560px,calc(100vw - 32px));padding:12px 16px;border-radius:var(--r-sm);background:var(--surface-inverse);color:var(--on-inverse);font:var(--t-body-md);box-shadow:var(--shadow-3);opacity:0;visibility:hidden;transition:opacity var(--d-2) var(--e-decel),transform var(--d-2) var(--e-decel),visibility 0s var(--d-2),bottom var(--d-4) var(--e-spring)}
#toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--d-2) var(--e-decel),transform var(--d-2) var(--e-decel),bottom var(--d-4) var(--e-spring)}
#toast .btn-text{margin:-8px -8px -8px auto;height:36px;color:var(--on-inverse-accent)}
html[data-mode="nav"] #toast{bottom:calc(var(--sa-b) + 132px)}

/* ---------- map markers ---------- */
.me{width:18px;height:18px;border-radius:50%;background:var(--loc);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);position:relative}
.me::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:var(--loc);opacity:.25;animation:pulse 2.4s var(--e-standard) infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.4}100%{transform:scale(1.4);opacity:0}}
.pin-ab{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 14px/1 var(--font);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pin-ab.a{background:var(--success)} .pin-ab.b{background:var(--danger)}
.pin-selected{filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))} .pin-selected svg{display:block;animation:pop var(--d-3) var(--e-spring) both;transform-origin:50% 100%}
@keyframes pop{from{transform:scale(.6) translateY(6px);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.maplibregl-ctrl-bottom-left{bottom:calc(min(var(--sheet-h),var(--sheet-cap)) + var(--sa-b));left:var(--sa-l);transition:bottom var(--d-4) var(--e-spring)}
.maplibregl-ctrl-attrib.maplibregl-compact{background:color-mix(in srgb,var(--surface) 82%,transparent);color:var(--fg-2);border-radius:var(--r-full);font:var(--t-label-sm);backdrop-filter:blur(8px);margin:8px}
.maplibregl-ctrl-attrib a{color:inherit}
.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 24px 2px 8px}
html[data-mode="nav"] .maplibregl-ctrl-bottom-left{bottom:calc(var(--sa-b) + 120px)}

/* ---------- no-map panel ---------- */
.nomap{position:fixed;inset:0;z-index:var(--z-nomap);display:grid;place-items:center;padding:24px;background:var(--surface);color:var(--fg)}
.nomap-card{max-width:420px;text-align:center;line-height:1.5}
.nomap-card h1{font:var(--t-title-lg);margin:12px 0 6px}
.nomap-card p{color:var(--fg-2);font:var(--t-body-md)}
.nomap-actions{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.nomap-foot{font:var(--t-body-sm);color:var(--fg-3)}
.ip-steps{font:var(--t-body-md);line-height:1.7;color:var(--fg-2);background:var(--surface-2);border-radius:var(--r-md);padding:13px 15px;text-align:left}
.ip-steps b{color:var(--fg)}
body.nomap-open :is(#topbar,#topControls,#controls,#fab,.legend-pill,#sheet,#navBar){display:none!important}

/* ---------- desktop: sheet becomes a left panel ---------- */
@media (min-width:900px) and (pointer:fine){
  #topbar{width:400px;right:auto}
  .sheet{left:12px;right:auto;width:400px;top:calc(var(--sa-t) + 12px + 52px + 8px + 44px + 12px);bottom:12px;height:auto;border-radius:var(--r-lg);transform:translate3d(-120%,0,0)}
  .sheet:not([data-state="hidden"]){transform:none!important}
  .sheet-grip{display:none}
  .sheet-body{overflow-y:auto!important}
  #controls,#fab,.legend-pill{transition:none}
  #controls,html[data-sheet="half"] #controls{bottom:calc(var(--sa-b) + 24px + 56px + 12px)} #fab{bottom:calc(var(--sa-b) + 24px)} /* the side panel leaves the FAB visible: the stack stays above it in every panel state */
  .legend-pill{left:424px;right:auto;bottom:calc(var(--sa-b) + 48px);max-width:none}
  html[data-sheet="full"] #controls,html[data-sheet="full"] #fab,html[data-sheet="half"] #fab,html[data-sheet="full"] .chips,html[data-sheet="full"] .legend-pill{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .actions,.cchips{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .maplibregl-ctrl-bottom-left{bottom:var(--sa-b);left:424px}
  .navbar,.pick-bar{left:12px;right:auto;width:400px}
  #toast{bottom:calc(var(--sa-b) + 24px)}
}

@media (hover:hover){.cchip:hover{background:var(--surface-3)}.hero figcaption a:hover,.photos figcaption a:hover,.about .src a:hover,.credit a:hover,.osm-empty a:hover{color:var(--fg-2);text-decoration-thickness:2px}}

/* ---------- regions: city chip · cities · build progress · guide ---------- */
.region-chip{flex:none;display:inline-flex;align-items:center;gap:2px;height:36px;max-width:132px;margin:0 6px 0 0;padding:0 6px 0 12px;border:0;border-radius:var(--r-full);background:var(--accent-soft);color:var(--accent);font:var(--t-label-lg);font-weight:600;white-space:nowrap}
.region-chip span{overflow:hidden;text-overflow:ellipsis}
.region-chip .ic{width:18px;height:18px}
.region-chip:active{transform:scale(.96)}
.city-row{padding:0;gap:0}
.city-main{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-4);min-height:56px;padding:var(--s-2) 0;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
.city-del{color:var(--fg-3)}
.ai-badge{display:inline-block;vertical-align:2px;margin-left:4px;padding:0 6px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent);font:var(--t-label-sm);letter-spacing:.04em}
.city-search{position:relative;margin:var(--s-1) 0} .city-search>.ic{position:absolute;left:12px;top:10px;color:var(--fg-3);pointer-events:none} .city-search .field{padding-left:44px}
.city-search .field::-webkit-search-cancel-button{display:none}
.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--accent-soft-2);border-top-color:var(--accent);animation:spin .9s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.dot-p{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--line-strong)}
.bsteps{list-style:none;margin:var(--s-2) 0 0;padding:0}
.bstep{display:flex;gap:var(--s-3);align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)} .bstep:first-child{border-top:0}
.bs-ic{width:24px;height:24px;flex:none;display:grid;place-items:center;color:var(--fg-3);font-weight:700}
.bstep.done .bs-ic{color:var(--success)} .bstep.failed .bs-ic{color:var(--danger)} .bstep.pending .bs-tx b,.bstep.skipped .bs-tx b{color:var(--fg-3)}
.bs-tx b{display:block;font:var(--t-body-lg);font-weight:500} .bs-tx small{display:block;font:var(--t-body-md);color:var(--fg-2)}
.bc-err{display:flex;gap:8px;align-items:flex-start;margin:var(--s-3) 0 0;padding:var(--s-3);border-radius:var(--r-md);background:var(--risk-avoid-soft);color:var(--risk-avoid-on);font:var(--t-body-md)}
.bc-err .ic{flex:none;margin-top:2px}
.ic.sm{width:16px;height:16px}
.fld small{display:block;margin-top:4px;font:var(--t-body-sm)}
.guide-tabs{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding:var(--s-2) 0 var(--s-1);margin-top:var(--s-1)} .guide-tabs::-webkit-scrollbar{display:none}
.guide-tabs .chip{box-shadow:none;background:var(--surface-2);height:32px;padding:0 12px} .guide-tabs .chip small{color:var(--fg-3);font:var(--t-label-md)}
.guide-group .eyebrow{margin-top:var(--s-5)} .guide-group:first-child .eyebrow{margin-top:var(--s-2)}
.guide-row .row-tx small.one{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-row .dist{flex:none;font:var(--t-label-md);color:var(--fg-3)}
.about .seed-src{margin-top:4px}
.src-list.plain{word-break:normal}
.staysafe{margin-top:var(--s-4);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface-2)}
.staysafe summary{cursor:pointer;display:flex;align-items:center;gap:8px;font:var(--t-title-sm);color:var(--fg);list-style:none;min-height:28px} .staysafe summary::-webkit-details-marker{display:none}
.staysafe summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--fg-3);border-bottom:2px solid var(--fg-3);transform:rotate(45deg);transition:transform var(--d-2)} .staysafe[open] summary::after{transform:rotate(-135deg)}
.staysafe .txt{margin-top:var(--s-2)}
.adv-src{display:block;margin-top:2px}
.risk-dot{background:var(--risk-soft)} .risk-dot i{width:12px;height:12px;border-radius:50%;background:var(--risk);display:block}
/* structural paths: a dashed swatch, like the dashed line on the map */
.legend-pill i.k-struct,.riskkey i.k-struct{background:repeating-linear-gradient(90deg,var(--risk-caution) 0 4px,transparent 4px 7px)}
.legend-pill.two{flex-wrap:wrap;height:auto;row-gap:2px;padding-top:6px;padding-bottom:6px;border-radius:var(--r-lg)}
html[data-legend="none"] .legend-pill{display:none}
/* narrow phones: a tighter key that wraps onto a second row instead of clipping "Avoid late" */
@media (max-width:400px){.legend-pill{flex-wrap:wrap;height:auto;min-height:32px;column-gap:8px;row-gap:2px;padding:6px 10px;border-radius:var(--r-lg);font:var(--t-label-sm)}.legend-pill span{gap:4px}.legend-pill i{width:10px}}
.bq{display:flex;align-items:center;gap:8px;margin:var(--s-2) 0 0;font:var(--t-body-md);color:var(--fg-2)}
label.row:has(#bcAi) .row-tx b{white-space:normal}
@media (max-width:360px){.region-chip{max-width:96px;padding-left:10px}}

/* text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }