/* Map screen: full bleed MapLibre, floating glass panels. Phones turn panels into bottom sheets. */
.shell--map .main { height: 100dvh; position: relative; }
.mapstage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--k-map-bg); }
.mapstage #map, .mapstage #map2 { position: absolute; inset: 0; }
#map2 { clip-path: inset(0 0 0 var(--split, 50%)); pointer-events: none; }
.shell--map .topbar { position: absolute; z-index: 20; top: 12px; left: 12px; right: 12px; border: 1px solid var(--k-glass-hairline); border-radius: var(--k-radius-xl);
  background: var(--k-surface); box-shadow: var(--k-shadow-3), inset 0 1px 0 var(--k-glass-edge); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .shell--map .topbar { background: var(--k-glass-tint); -webkit-backdrop-filter: blur(var(--k-glass-blur)) saturate(var(--k-glass-saturate)); backdrop-filter: blur(var(--k-glass-blur)) saturate(var(--k-glass-saturate)); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { .shell--map .topbar { background: var(--k-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.shell--map .topbar { padding: 6px 12px; min-height: 56px; }
.mapsearch { position: relative; flex: 1; min-width: 160px; max-width: 420px; }
.mapsearch input { width: 100%; min-height: 44px; padding: 0 14px 0 42px; border-radius: var(--k-radius-full); border: 1px solid var(--k-outline); background: var(--k-surface-lowest); }
.mapsearch .ico { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: var(--k-fg-muted); pointer-events: none; }
.mapsearch ul { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--k-surface); border: 1px solid var(--k-outline-variant); border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow-2); z-index: 5; }
.mapsearch li button { width: 100%; min-height: 44px; padding: 0 12px; border: 0; background: none; text-align: left; border-radius: var(--k-radius-md); cursor: pointer; font: var(--k-coord); }
.mapsearch li button:hover { background: var(--k-surface-high); }
.loadbar { position: absolute; z-index: 21; left: 24px; right: 24px; top: 72px; height: 3px; border-radius: var(--k-radius-full); background: var(--k-surface-highest); overflow: hidden; opacity: 0; transition: opacity var(--k-dur-effects); pointer-events: none; }
.loadbar.on { opacity: 1; }
.loadbar::after { content: ""; display: block; height: 100%; width: 35%; background: var(--k-accent); animation: slide 1.1s var(--k-ease-effects) infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

.glass { background: var(--k-surface); color: var(--k-fg); border: 1px solid var(--k-glass-hairline); border-radius: var(--k-radius-xl); box-shadow: var(--k-shadow-3), inset 0 1px 0 var(--k-glass-edge); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--k-glass-tint); -webkit-backdrop-filter: blur(var(--k-glass-blur)) saturate(var(--k-glass-saturate)); backdrop-filter: blur(var(--k-glass-blur)) saturate(var(--k-glass-saturate)); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) { .glass { background: var(--k-surface); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.glass .muted, .glass .sub { color: var(--k-fg-muted); }

.chipbar { position: absolute; z-index: 15; left: 12px; top: 80px; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 80px); }
.chipbar .chip { background: var(--k-warning-container); color: var(--k-on-warning-container); }
.tools { position: absolute; z-index: 15; right: 12px; bottom: 64px; display: grid; gap: 8px; }
.tools .icon-btn { background: var(--k-surface); border: 1px solid var(--k-glass-hairline); box-shadow: var(--k-shadow-2); }
.tools .icon-btn[aria-pressed="true"] { background: var(--k-primary); color: var(--k-on-primary); }
.readout { position: absolute; z-index: 15; left: 12px; bottom: 12px; padding: 8px 14px; display: grid; gap: 2px; border-radius: var(--k-radius-lg); font: var(--k-coord); font-variant-numeric: tabular-nums; max-width: calc(100% - 100px); }
.readout b { font-weight: 500; color: var(--k-fg-muted); margin-right: 6px; }
.attrib { position: absolute; z-index: 14; right: 12px; bottom: 12px; padding: 4px 12px; border-radius: var(--k-radius-full); font: var(--k-body-s); max-width: 60%; }

.panel { position: absolute; z-index: 16; display: flex; flex-direction: column; overflow: hidden; }
.panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 20px; }
.panel header h2 { font: var(--k-title-l); }
.panel .body { overflow-y: auto; padding: 0 20px 20px; display: grid; gap: 16px; align-content: start; }
.panel--layers { right: 12px; top: 80px; width: 340px; max-height: calc(100% - 156px); transition: transform var(--k-dur-spatial) var(--k-ease-spatial), opacity var(--k-dur-effects); }
.panel--layers[hidden] { display: none !important; }
.panel--peek { left: 12px; bottom: 88px; width: 380px; max-width: calc(100% - 24px); }
.panel--tool { left: 12px; top: 136px; width: 300px; padding-bottom: 12px; }
.panel--tool .body { padding-bottom: 8px; }
.grp { display: grid; gap: 4px; }
.grp > .k-label { padding-block: 4px; }
.lay { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 4px 0; }
.lay .name { display: flex; align-items: center; gap: 8px; min-height: 44px; font: var(--k-label-l); }
.lay input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--k-secondary); min-height: 28px; }
.lay .legend { grid-column: 1 / -1; font: var(--k-label-s); text-transform: none; letter-spacing: 0; color: var(--k-fg-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lay .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; background: var(--lc, var(--k-chart-1)); }
.lay .err { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font: var(--k-body-s); color: var(--k-error); }
.peek .big { font: var(--k-number-l); }
.sheet-handle { display: none; width: 40px; height: 4px; border-radius: var(--k-radius-full); background: var(--k-outline); margin: 8px auto 0; border: 0; padding: 0; }
.swipe-handle { position: absolute; z-index: 17; top: 0; bottom: 0; left: var(--split, 50%); width: 44px; margin-left: -22px; cursor: ew-resize; touch-action: none; display: grid; place-items: center; }
.swipe-handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: var(--k-accent); }
.swipe-handle i { position: relative; width: 36px; height: 36px; border-radius: var(--k-radius-md); background: var(--k-surface); border: 2px solid var(--k-accent); display: grid; place-items: center; }
.swipe-handle:focus-visible { outline: 2px solid var(--k-focus); }
.dates { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dates select { min-height: 44px; border-radius: var(--k-radius-sm); border: 1px solid var(--k-outline); background: var(--k-surface-lowest); padding: 0 10px; }

.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo { display: none !important; }
.maplibregl-canvas { outline: none; }
.maplibregl-popup-content { background: var(--k-surface); color: var(--k-fg); border-radius: var(--k-radius-lg); font: var(--k-body-m); }

@media (min-width: 600px) and (max-width: 1199px) {
  .panel--layers { top: 80px; bottom: 12px; max-height: none; width: 360px; }
  .panel--peek { width: 400px; }
}
@media (max-width: 599px) {
  .shell--map .topbar { left: 8px; right: 8px; top: 8px; }
  .chipbar { top: 72px; left: 8px; }
  .tools { right: 8px; bottom: calc(40dvh + 8px); }
  .tools.is-low { bottom: 64px; }
  .mapstage:has(#panel-layers:not([hidden])) .tools, .mapstage:has(#panel-layers:not([hidden])) .readout { bottom: calc(58dvh + 8px); }
  .mapstage:has(#panel-layers:not([hidden])) .tools { max-height: calc(100dvh - 58dvh - 8px - 80px); overflow-y: auto; scrollbar-width: none; } /* stay below the top bar (8px + 56px + gap) */
  .readout { left: 8px; bottom: calc(40dvh + 8px); }
  .panel { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-width: none !important; max-height: 58dvh !important;
    border-radius: var(--k-radius-xl) var(--k-radius-xl) 0 0; transform: translateY(0); }
  .panel--layers { height: 58dvh; }
  .panel--peek { max-height: 40dvh !important; }
  .panel--tool { max-height: 40dvh !important; }
  .sheet-handle { display: block; }
  .attrib { display: none; }
  .mapsearch { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .panel, .loadbar::after { transition: none; animation: none; } }

.readout.is-low { bottom: 12px; }
@media (max-width: 839px) { .shell--map .topbar .seg { display: none; } }
@media (max-width: 599px) { .shell--map .topbar .switcher span { max-width: 4.5em; } .shell--map .topbar > .grow { display: none; } }
@media (min-width: 600px) { .mapstage:has(#panel-layers:not([hidden])) .tools { right: 376px; } }
@media (min-width: 1200px) { .mapstage:has(#panel-layers:not([hidden])) .tools { right: 364px; } }
@media (max-width: 599px) { .shell--map .topbar .brand, .shell--map .topbar > details.menu:last-of-type { display: none; } .mapsearch { min-width: 96px; } }

/* Very narrow phones (360 px): the search box is too small for its placeholder, and the readout would wrap. */
.readout span { white-space: nowrap; }
@media (max-width: 420px) {
  .mapsearch input::placeholder { color: transparent; }
  .readout { font-size: 11px; padding: 6px 10px; }
  .readout > span:nth-child(2) { display: none; }
}