/* Layout: the whole screen is a hand-drawn canvas map. One floating card top-left holds the
   city's vital signs and the layer drawer; zoom controls bottom-right; a tooltip card follows the pointer.
   The map's own colors live in the JS PALETTES table and follow light/dark mode. */
html, body { height: 100%; overflow: hidden; }
body {
  padding: 0;
  --map-panel-width: 330px;
  --map-sources-left: max(16px, env(safe-area-inset-left, 0px));
}
canvas#map { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
canvas#map.dragging { cursor: grabbing; }

.panel {
  position: fixed; z-index: var(--z-controls);
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  width: min(var(--map-panel-width), calc(100vw - 32px));
  max-height: calc(100% - 92px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-4-5); display: grid; gap: var(--space-3-5); align-content: start;
}
.map-header { flex-wrap: wrap; }
.map-header-meta { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.map-header .clock { white-space: nowrap; }
.wx { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.air-credit { margin-top: calc(-1 * var(--space-2)); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.drawer { display: grid; gap: var(--space-2); }
.layers { display: grid; gap: var(--space-0-5); margin: 0 calc(-1 * var(--space-2)); }
.bus-controls { display: grid; gap: var(--space-3); min-width: 0; }
.bus-controls p { margin: 0; }
.bus-controls section { display: grid; gap: var(--space-2); }
.bus-controls ol { padding: 0; margin: 0; list-style: none; display: grid; gap: var(--space-2); }
.bus-controls li { display: grid; gap: var(--space-0-5); }

.alerts { display: grid; gap: var(--space-2); }
.collapse { display: none; padding-inline: var(--space-2); }
@media (max-width: 560px) {
  .panel { gap: var(--space-2-5); padding: var(--space-3-5); }
  .collapse { display: inline-flex; }
  .panel.min .more { display: none; }
}

.zoom {
  position: fixed; z-index: var(--z-controls); display: grid; gap: var(--space-2);
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.tip {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none; max-width: 290px;
  transform: translate(var(--space-3-5), var(--space-3-5));
}
.sources-toggle, .sources {
  position: fixed; left: var(--map-sources-left);
}
.sources-toggle {
  z-index: var(--z-controls); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.sources {
  top: auto; right: auto; bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  margin: 0; width: min(320px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100dvh - 92px - env(safe-area-inset-bottom, 0px));
}
@media (min-width: 561px) {
  body { --map-sources-left: calc(max(16px, env(safe-area-inset-left, 0px)) + var(--map-panel-width) + var(--space-4)); }
  .panel { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-height: none; }
  .sources { left: min(var(--map-sources-left), calc(100vw - 320px - max(16px, env(safe-area-inset-right, 0px)))); }
}

.location-button[data-state="pending"], .location-button[data-state="located"] { color: var(--accent); }
.location-status {
  position: fixed; z-index: var(--z-controls);
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(180px + env(safe-area-inset-bottom, 0px));
  width: min(280px, calc(100vw - 32px)); margin: 0; padding: var(--space-3);
}
.location-status[hidden] { display: none; }

.sources-title { margin-bottom: var(--space-2-5); }
.tip-metrics { display: flex; flex-wrap: wrap; gap: var(--space-3-5); margin-top: var(--space-1-5); }