/* Map controls are grouped by purpose: view choices at the top, navigation at the
   map edge, the data legend over the map, and time playback in the footer. */
.map-top-controls,
.map-side-controls,
.map-legend {
  position:absolute;
  z-index:4;
  color:var(--ink);
}

/* MapLibre's control wrapper has no height of its own in the bundled build.
   Give it the map's full box so "bottom-right" really is the lower-right
   corner rather than the wrapper's zero-height top edge. */
.maplibregl-control-container {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.maplibregl-control-container .maplibregl-ctrl-bottom-right {
  top:auto!important;
  bottom:0!important;
}

.map-top-controls {
  top:26px;
  right:calc(48% + 18px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.map-side-controls {
  top:72px;
  right:calc(48% + 14px);
  display:flex;
  flex-direction:column;
  gap:6px;
}

.map-legend {
  left:24px;
  bottom:16px;
  max-width:calc(52% - 72px);
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  background:rgba(20,22,26,.86);
  box-shadow:0 5px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(5px);
}

body:not(.city) .map-top-controls [data-city-only],
body:not(.city) .map-side-controls [data-city-only] { display:none; }

.map-control-button,
.map-top-controls .control-seg button,
.range-menu summary,
.range-options button {
  box-sizing:border-box;
  min-height:38px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(20,22,26,.88);
  color:var(--ink);
  font:12px/1 "Segoe UI",system-ui,sans-serif;
}

.map-control-button {
  width:40px;
  padding:0;
  border-radius:7px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.map-control-button svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.map-control-button:hover,
.map-top-controls .control-seg button:hover,
.range-menu summary:hover,
.range-options button:hover { background:#2a2e34; }
.map-control-button:focus-visible,
.map-top-controls button:focus-visible,
.range-menu summary:focus-visible,
.range-options button:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.map-control-button[aria-pressed=true],
.map-top-controls button[aria-pressed=true],
.range-options button[aria-pressed=true] { border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:rgba(200,159,13,.16); }
.map-control-button:disabled { opacity:.42;cursor:default; }

.map-top-controls .control-seg { display:inline-flex;border-radius:7px;overflow:hidden;box-shadow:0 5px 18px rgba(0,0,0,.22); }
.map-top-controls .control-seg button { min-width:58px;padding:0 11px;border-radius:0;cursor:pointer; }
.map-top-controls .control-seg button + button { border-left:0; }

.range-menu { position:relative; }
.range-menu summary {
  min-width:92px;
  padding:0 10px;
  border-radius:7px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  list-style:none;
  box-shadow:0 5px 18px rgba(0,0,0,.22);
}
.range-menu summary::-webkit-details-marker { display:none; }
.range-menu summary::after { content:'⌄';color:var(--muted);font-size:11px; }
.range-menu[open] summary::after { content:'⌃'; }
.range-options {
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  width:112px;
  padding:6px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:#17191d;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.range-options button { min-height:36px;border-radius:5px;cursor:pointer; }
#kmlbl { font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap; }

/* The footer is now a transport bar, not a home for every map option. */
.foot,
body.colour-basemap .foot {
  padding:9px 20px 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(230px,42%);
  align-items:center;
  gap:12px;
}
.foot #status {
  min-width:0;
  max-height:none;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.foot #tools { min-width:0;display:flex;flex-wrap:nowrap;gap:8px; }
.foot #tools input[type=range] { width:auto;min-width:100px;flex:1 1 auto; }
.foot #tools .sep { display:none; }

@media(max-width:900px) {
  .layout { grid-template-rows:minmax(520px,62vh) auto minmax(300px,1fr); }
  .map-top-controls { top:72px;right:14px; }
  .map-side-controls { top:124px;right:14px; }
  .map-legend { left:14px;bottom:12px;max-width:calc(100% - 76px);padding:7px 9px; }
  .map-control-button,
  .map-top-controls .control-seg button,
  .range-menu summary { min-height:44px; }
  .map-control-button { width:44px; }
  .foot,
  body.colour-basemap .foot {
    padding:8px 14px 10px;
    grid-template-columns:1fr;
    gap:6px;
  }
  .foot #status { white-space:normal;line-height:1.35;max-height:2.7em; }
  .foot #tools { width:100%; }
  .foot #tools button { min-width:44px;min-height:44px; }
}

@media(max-width:620px) {
  .map-side-controls #zoomOut,
  .map-side-controls #zoomIn { display:none; }
  .map-top-controls { gap:6px; }
  .map-top-controls .control-seg button { min-width:54px;padding:0 8px; }
  .range-menu summary { min-width:86px;padding:0 8px; }
  .map-legend .legend { font-size:11px;gap:7px; }
  .map-legend .legend .bar i,
  .map-legend .legend .ticks span { width:26px; }
  #legendWindRow { max-width:300px; }
}