/* Wildfire intelligence dashboard — identity tokens applied to a
   standalone bundle. Obsidian canvas in all modes (identity §3.2). */
:root {
  --obsidian: #131211;
  --obsidian-raised: #1e1d1b;
  --obsidian-hairline: #2e2c29;
  --obsidian-ash: #94908a;
  --obsidian-smoke: #b5b1a8;
  --obsidian-text: #eceae5;
  --mirror-300: #5cd6c2;
  --mirror-500: #00bfa5;
  --ember-400: #e0632b;
  --ember-600: #bc3a2a;
  --ochre: #b98a2e;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--obsidian-text);
  font-family: var(--sans);
  font-size: 14px;
}
.app { display: flex; height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  flex: 0 0 300px;
  overflow-y: auto;
  border-right: 1px solid var(--obsidian-hairline);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mirror-300); margin: 0 0 6px;
}
h1 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
h2 {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--obsidian-ash); margin: 0 0 8px;
}
.freshness { font-size: 12px; color: var(--obsidian-smoke); line-height: 1.5; margin: 0; }
.freshness strong { color: var(--ember-400); }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card {
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-hairline);
  border-radius: 6px; padding: 10px 12px;
}
.num { font-family: var(--mono); font-size: 20px; font-weight: 500; margin: 0; }
.label { font-size: 11px; color: var(--obsidian-ash); margin: 4px 0 0; }

.panel {
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-hairline);
  border-radius: 6px; padding: 12px;
}
.panel label { display: block; font-size: 12px; color: var(--obsidian-smoke); margin-bottom: 8px; }
.panel input[type='date'], .panel select {
  display: block; width: 100%; margin-top: 4px;
  background: var(--obsidian); color: var(--obsidian-text);
  border: 1px solid var(--obsidian-hairline); border-radius: 4px;
  font: inherit; padding: 6px 8px;
}
.toggle { display: flex; align-items: center; gap: 8px; }
.toggle input { accent-color: var(--mirror-500); }

.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 0 0 6px; color: var(--obsidian-smoke); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.conf-h { background: var(--ember-600); }
.conf-n { background: var(--ember-400); }
.conf-l { background: var(--ochre); }
.swatch { width: 14px; height: 10px; display: inline-block; border-radius: 2px; }
.swatch.incident { background: transparent; border: 2px solid var(--mirror-500); border-radius: 50%; width: 10px; height: 10px; }
.swatch.perimeter { background: transparent; border: 2px solid var(--ember-400); }
.swatch.redflag { background: transparent; border: 2px dashed var(--ochre); }
.legend-note { font-size: 11px; color: var(--obsidian-ash); margin: 8px 0 0; }

.limitations summary {
  cursor: pointer; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-400);
}
.limitations ul { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.55; color: var(--obsidian-smoke); }
.limitations li { margin-bottom: 6px; }

.downloads a {
  display: inline-block; margin-right: 8px; margin-bottom: 4px;
  color: var(--mirror-300); font-size: 12px; font-weight: 500;
  border: 1px solid var(--mirror-300); border-radius: 4px;
  padding: 6px 10px; text-decoration: none;
}
.downloads a:hover { color: var(--mirror-500); border-color: var(--mirror-500); }

/* ---- Map ---- */
#map { flex: 1; background: var(--obsidian); }
.leaflet-container { font-family: var(--sans); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--obsidian-raised); color: var(--obsidian-text);
  border: 1px solid var(--obsidian-hairline);
}
.popup-title { font-weight: 600; margin: 0 0 4px; }
.popup-meta { font-family: var(--mono); font-size: 11px; color: var(--obsidian-ash); margin: 0; }

/* Responsive: sidebar stacks above the map under 760px. */
@media (max-width: 760px) {
  .app { flex-direction: column; height: auto; }
  .sidebar { flex: none; border-right: none; border-bottom: 1px solid var(--obsidian-hairline); max-height: 45vh; }
  #map { height: 55vh; }
}