:root {
  --bg: #0a0f0a;
  --panel-bg: #0f1a10;
  --grid: #1a2e1c;
  --accent: #3ef27a;
  --text: #d6ffe0;
  --text-dim: #6b9a78;
  --green: #3ef27a;
  --orange: #ffb347;
  --red: #ff5d5d;
  --font: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  /* env(safe-area-inset-*) only has a nonzero value once viewport-fit=cover lets the page
     draw under a device's rounded corners / notch / home-indicator bar (installed PWAs
     render full-screen, unlike a browser tab, so this matters far more there). Falls back
     to 0px on anything that doesn't support env() at all. */
  padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px
    max(20px, env(safe-area-inset-left));
  background: rgba(10, 15, 10, 0.92);
  border-bottom: 1px solid var(--grid);
  backdrop-filter: blur(4px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.brand h1 {
  font-size: 15px;
  letter-spacing: 3px;
  margin: 0;
  font-weight: 600;
  color: var(--accent);
}

.help-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--text-dim);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.help-btn:hover { border-color: var(--accent); color: var(--accent); }

.lang-btn {
  width: auto;
  min-width: 20px;
  border-radius: 10px;
  padding: 0 6px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.filters, .alert-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-btn, .alert-btn {
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.5px;
  background: var(--panel-bg);
  color: var(--text-dim);
  border: 1px solid var(--grid);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover, .alert-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.filter-btn.active {
  background: var(--accent);
  color: #06170a;
  border-color: var(--accent);
  font-weight: 600;
}

.alert-btn[data-level="green"].active { background: var(--green); color: #06170a; border-color: var(--green); }
.alert-btn[data-level="orange"].active { background: var(--orange); color: #2a1600; border-color: var(--orange); }
.alert-btn[data-level="red"].active { background: var(--red); color: #2a0000; border-color: var(--red); }

#map {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
}

.leaflet-container {
  background: var(--bg) !important;
  font-family: var(--font);
}

/* Leaflet's own corner containers sit flush against the viewport edge (bottom:0/left:0/
   right:0), which is exactly where an installed PWA's rounded corners / home-indicator
   bar clip content — most visibly the attribution text's last word. Nudging the
   containers themselves in by the safe-area inset (rather than fighting Leaflet's
   already-fixed 10px control margins one by one) fixes every corner control at once. */
.leaflet-bottom { bottom: env(safe-area-inset-bottom, 0px); }
.leaflet-left { left: env(safe-area-inset-left, 0px); }
.leaflet-right { right: env(safe-area-inset-right, 0px); }

.leaflet-control-attribution {
  background: rgba(10, 15, 10, 0.8) !important;
  color: var(--text-dim) !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }

/* Once this text can't fit on one line, an unconstrained bottom-right control box doesn't just
   wrap — CSS shrink-to-fit stretches it to the full available width, running it into the
   bottom-left zoom control. Capping its width keeps it a narrow, wrapped column on the right
   instead. Below 700px the zoom control is hidden entirely, so this isn't needed there. */
@media (min-width: 701px) and (max-width: 960px) {
  .leaflet-control-attribution { max-width: 300px; }
}

.leaflet-control-zoom a {
  background: var(--panel-bg) !important;
  color: var(--accent) !important;
  border-color: var(--grid) !important;
}

.leaflet-popup-content-wrapper {
  background: var(--panel-bg) !important;
  color: var(--text) !important;
  font-family: var(--font);
  border: 1px solid var(--grid);
}
.leaflet-popup-tip { background: var(--panel-bg) !important; }

.disaster-marker {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 2px solid rgba(0,0,0,0.4);
  box-shadow: 0 0 8px currentColor;
}
.disaster-marker.level-green { background: var(--green); color: #06170a; }
.disaster-marker.level-orange { background: var(--orange); color: #2a1600; }
.disaster-marker.level-red { background: var(--red); color: #2a0000; }

.panel {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid var(--grid);
  border-radius: 6px;
  padding: 16px;
  z-index: 1001;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.panel.hidden {
  transform: translateX(20px);
  opacity: 0;
  pointer-events: none;
}

#panel-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
#panel-close:hover { color: var(--text); }

.panel-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px 0;
  padding-right: 20px;
}

.panel-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}
.panel-badge.level-green { background: var(--green); color: #06170a; }
.panel-badge.level-orange { background: var(--orange); color: #2a1600; }
.panel-badge.level-red { background: var(--red); color: #2a0000; }

.panel-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--grid);
  font-size: 12px;
}
.panel-row:last-child { border-bottom: none; }
.panel-row .k { color: var(--text-dim); white-space: nowrap; }
.panel-row .v { color: var(--text); font-weight: 500; text-align: right; }

.panel-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}

.panel-subheading {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 12px 0 6px 0;
}

.panel-impact {
  margin: 0 0 8px 0;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.5;
}
.panel-impact li { margin-bottom: 4px; }
.panel-impact-more { list-style: none; margin-left: -16px; color: var(--text-dim); font-style: italic; }

.help-content h3 {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 18px 0 8px 0;
}
.help-content h3:first-of-type { margin-top: 14px; }

.help-content p, .help-content li {
  font-size: 12px;
  line-height: 1.5;
}

.help-content ul {
  margin: 0;
  padding-left: 16px;
}
.help-content li { margin-bottom: 6px; }

.help-content a { color: var(--accent); }

.help-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px 0;
}
.help-row .panel-badge { margin-bottom: 0; flex-shrink: 0; }

.help-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.help-type-row .icon { width: 16px; text-align: center; }

.error-banner {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 93, 93, 0.15);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 12px;
  z-index: 1002;
  max-width: 80vw;
  text-align: center;
}

.loading-banner {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-bg);
  border: 1px solid var(--grid);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 11px;
  z-index: 1001;
}

.hidden { display: none !important; }

/* Below 700px the topbar wraps onto multiple rows, and how tall that ends up being shifts with
   viewport width (2 rows vs. 3) and even with the event data (nothing forces a fixed height).
   Rather than chase that with hardcoded offsets, body becomes a column flexbox: the topbar sits
   in normal flow (no more fixed+z-index trick needed) and #map simply fills whatever space is
   left, at any width, without knowing the topbar's height at all. */
@media (max-width: 700px) {
  body { display: flex; flex-direction: column; }
  .topbar { position: static; flex-shrink: 0; }
  #map { position: static; flex: 1 1 auto; min-height: 0; top: auto; }

  /* The 24px inter-group gap and full-size button padding are fine for one row on desktop,
     but get multiplied across 3-4 wrapped rows on mobile — tighten both so the topbar doesn't
     eat most of the screen. Still needs the safe-area padding from the base .topbar rule
     above (this is mobile, where an installed PWA's notch/rounded corners matter most), so
     it's repeated here rather than just overwritten with plain pixel values. */
  .topbar {
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px
      max(14px, env(safe-area-inset-left));
  }
  .filters, .alert-filters { gap: 5px; }
  .filter-btn, .alert-btn { padding: 5px 8px; font-size: 10px; }
  .brand h1 { font-size: 13px; letter-spacing: 2px; }

  /* .panel stays a fixed overlay regardless, so it still needs a top offset clearing the topbar —
     just less critical to get exact since, unlike #map, a few px of overlap here is cosmetic. */
  .panel { left: 12px; right: 12px; width: auto; top: 130px; }
  /* Pinch-to-zoom covers this on touch devices, and the control was overlapping the attribution text. */
  .leaflet-control-zoom { display: none; }
}

@media (max-width: 360px) {
  .panel { top: 165px; }
}