:root {
  --bar-height: 46px;
  --controls-height: 30px;
  /* 0 until a pin exists; the .has-pin rule below opens it up. */
  --pinstrip-height: 0px;
  /* Timeline + pin strip + controls form one header block; everything else
     offsets by this, so adding the strip pushes the map down automatically. */
  --header-height: calc(var(--bar-height) + var(--pinstrip-height) + var(--controls-height));
  --panel-bg: rgba(12, 14, 20, 0.78);
  --panel-fg: #f2f4f8;
  --panel-radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

/* ---- timeline bar ------------------------------------------------------ */

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 900;
  background: #0c0e14;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

#timebar {
  position: relative;
  height: var(--bar-height);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Standing label so each bar says what it is without needing a hover. Sits in
   the coloured band, which is otherwise empty at the left edge. */
.bar-caption {
  position: absolute;
  top: 3px;
  left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
}

.bar-caption .cap-hint { font-weight: 400; color: rgba(255, 255, 255, 0.62); }

/* The playhead readout also lives at the top of the timeline; hide the hint
   text on narrow screens so they can't collide. */
@media (max-width: 760px) {
  .bar-caption .cap-hint { display: none; }
}

#timebar-canvas { display: block; width: 100%; height: 100%; }

/* Must be on :root, not body. --header-height contains a var() and is resolved
   where it is *declared* (:root), so overriding --pinstrip-height further down the
   tree would never feed back into it - the map would keep its old top offset and
   the controls would overlap it. */
:root.has-pin { --pinstrip-height: 22px; }

#pinstrip {
  position: relative;
  height: var(--pinstrip-height);
  cursor: pointer;
  touch-action: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#pinstrip .bar-caption { top: 2px; }

#pinstrip-canvas { display: block; width: 100%; height: 100%; }

/* Controls butt straight up against the timeline they drive. */
#playbar {
  height: var(--controls-height);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--panel-fg);
  font-family: var(--font);
  font-size: 11px;
}

#playbar button {
  font: inherit;
  min-width: 30px;
  padding: 2px 6px;
  color: var(--panel-fg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.3;
}

#playbar button:hover { background: rgba(255, 255, 255, 0.2); }

#play-toggle {
  min-width: 36px;
  background: rgba(47, 111, 184, 0.9);
  border-color: #4d90dc;
}

#play-toggle:hover { background: #3f83cf; }

#playbar label { color: #a8b0c0; font-size: 10.5px; }

#playbar select {
  font: inherit;
  font-size: 10.5px;
  color: var(--panel-fg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 1px 4px;
}

#clock {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

#source-label { margin-left: 8px; }

#source-select { max-width: 160px; }

/* Experimental products get flagged in the control itself, not just in About. */
#source-select.experimental {
  border-color: #d9a34a;
  color: #ffd89b;
}

#opacity-label { margin-left: 8px; }

#opacity {
  width: 74px;
  accent-color: #4d90dc;
  cursor: pointer;
  margin: 0;
}

#opacity-value {
  min-width: 30px;
  font-variant-numeric: tabular-nums;
}

/* AQI-only: switch between the hourly approximation and a true 24-hour average. */
#aqi-window-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--panel-fg);
}

#aqi-window { accent-color: #4d90dc; cursor: pointer; margin: 0; }

#fire-toggles {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#fire-toggles label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--panel-fg);
  font-size: 10.5px;
}

#fire-toggles label.disabled { opacity: 0.45; cursor: default; }

#fire-toggles input { accent-color: #ff6a3d; cursor: pointer; margin: 0; }

/* Line samples matching how each kind is drawn on the map. */
.fire-swatch {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2px solid #ff3b1f;
  vertical-align: middle;
}

.fire-swatch.dashed {
  border-top-style: dashed;
  border-top-color: #ff8a3d;
}

/* ---- map -------------------------------------------------------------- */

#map {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: #aad3df;
}

/* Leaflet's own controls must clear the timeline bar. */
.leaflet-top { margin-top: 6px; }

/* ---- panels ----------------------------------------------------------- */

.panel {
  position: fixed;
  z-index: 800;
  background: var(--panel-bg);
  color: var(--panel-fg);
  border-radius: var(--panel-radius);
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.5;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

#legend {
  top: calc(var(--header-height) + 10px);
  left: 10px;
  /* Wide enough for the longest EPA category name ("Unhealthy for Sensitive
     Groups") without wrapping or clipping. */
  max-width: 390px;
}

.panel-head {
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.muted { color: #a8b0c0; font-weight: 400; font-size: 10.5px; }

.legend-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 1px 0;
}

.swatch {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* The index (what the scheme is actually about) leads; the concentration follows
   as secondary context. Long EPA category names like "Unhealthy for Sensitive
   Groups" are allowed to wrap rather than overflow the panel. */
.legend-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  min-width: 0;
}

.legend-primary { font-weight: 500; }

.legend-secondary {
  color: #a8b0c0;
  font-size: 10px;
}

/* Per-index swatches for AQHI+, so the graduation on the map is explained. */
.index-strip {
  display: flex;
  gap: 1px;
  margin: 2px 0 6px;
}

.index-cell {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 16px;
  height: 16px;
  color: #14181f;
  border-radius: 2px;
}

.index-cell.wide { flex: 1.6 1 0; }

/* ---- fire perimeters --------------------------------------------------- */

.fire-popup .leaflet-popup-content-wrapper {
  background: rgba(16, 18, 24, 0.94);
  color: var(--panel-fg);
  border-radius: 6px;
}

.fire-popup .leaflet-popup-tip { background: rgba(16, 18, 24, 0.94); }
.fire-popup .leaflet-popup-content { margin: 8px 10px; font-size: 11.5px; line-height: 1.5; }
.fire-popup a { color: #7fc4ff; }
.fire-popup .fire-name { font-weight: 600; margin-bottom: 2px; }
.fire-popup .fire-facts { color: #d6dcea; margin-bottom: 4px; }
.fire-popup .fire-source { margin-top: 4px; font-size: 10px; }

.fire-popup .fire-note {
  margin: 3px 0 4px;
  font-size: 10px;
  line-height: 1.4;
  color: #ffcda8;
}
.fire-popup .leaflet-popup-close-button { color: #aab3c4; }

/* checkerboard so a fully transparent band reads as "nothing here" */
.swatch.transparent {
  background-image:
    linear-gradient(45deg, #555 25%, transparent 25%, transparent 75%, #555 75%),
    linear-gradient(45deg, #555 25%, transparent 25%, transparent 75%, #555 75%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}

.scheme-switch {
  display: flex;
  gap: 4px;
  margin-top: 7px;
}

.scheme-switch button {
  flex: 1;
  font: inherit;
  font-size: 10.5px;
  padding: 3px 6px;
  color: var(--panel-fg);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
}

.scheme-switch button:hover { background: rgba(255, 255, 255, 0.18); }

.scheme-switch button.active {
  background: #2f6fb8;
  border-color: #4d90dc;
  font-weight: 600;
}

.note {
  margin-top: 6px;
  color: #c3cad8;
  font-size: 10px;
  line-height: 1.4;
  white-space: normal;
}

/* ---- about ------------------------------------------------------------ */

#about {
  max-width: 340px;
  padding: 6px 8px;
  /* Expanded, this panel is taller than a short window; keep it on screen and
     let it scroll rather than growing off the top edge. */
  max-height: calc(100vh - var(--header-height) - 40px);
  display: flex;
  flex-direction: column;
}

#about-body {
  overflow-y: auto;
  min-height: 0;
}

#about-toggle {
  font: inherit;
  font-size: 11px;
  color: var(--panel-fg);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

#about-body { margin-top: 4px; }
#about-body p { margin: 4px 0; }
#about-body ul { margin: 4px 0 4px 16px; padding: 0; }
#about-body li { margin: 2px 0; }

/* ---- playback --------------------------------------------------------- */

/* Everything along the bottom edge shares one wrapping flex row, so the panels
   can never overlap each other on a narrow window. The container ignores
   pointer events; its children take them back. */
#bottombar {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 800;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

#bottombar > * { pointer-events: auto; }

/* .panel is position:fixed by default; inside the flex row that would take the
   children out of flow entirely and stack them on top of each other. */
#bottombar > .panel { position: static; }

#bottombar #about { margin-right: auto; }
#bottombar #status { margin-left: auto; }

/* Narrow windows: one column, so the three panels stack instead of fighting for
   a single row's width. */
@media (max-width: 700px) {
  #bottombar {
    flex-direction: column;
    align-items: stretch;
  }
  #bottombar #about,
  #bottombar #status { margin: 0; }
  #about { max-width: none; }
}

/* Narrow header: let the controls wrap onto a second line rather than
   overflowing, and grow the header to match. */
@media (max-width: 560px) {
  :root { --controls-height: 56px; }
  #playbar { flex-wrap: wrap; padding: 2px 8px; row-gap: 2px; }
  #fires-toggle-label { margin-left: 0; }
}

/* ---- pinned location -------------------------------------------------- */

#pin-readout {
  top: calc(var(--header-height) + 10px);
  right: 10px;
  min-width: 190px;
  max-width: 260px;
  /* Clear of Leaflet's zoom control, which sits at the top-right. */
  margin-right: 46px;
}

#pin-readout .panel-head { justify-content: space-between; }

#pin-clear {
  font: inherit;
  font-size: 11px;
  line-height: 1;
  color: var(--panel-fg);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 3px;
  cursor: pointer;
  padding: 1px 5px;
}

#pin-clear:hover { background: rgba(255, 255, 255, 0.25); }

.pin-when { font-weight: 600; margin-bottom: 2px; }
.pin-value { margin-bottom: 3px; }
.pin-coords { font-size: 10px; }

/* ---- readouts --------------------------------------------------------- */

.readout {
  position: fixed;
  z-index: 950;
  background: rgba(0, 0, 0, 0.86);
  color: #fff;
  font-size: 11.5px;
  padding: 5px 8px;
  border-radius: 5px;
  pointer-events: none;
  white-space: nowrap;
}

#status {
  color: #c9d2e0;
  font-size: 10.5px;
  padding: 5px 8px;
  max-width: 260px;
}

#status.error { background: #7a1f1f; color: #fff; }

.readout .ok { color: #8fe6a3; }

#header-tip { z-index: 960; }

#header-tip b { font-weight: 600; }

.tip-sub {
  color: #b9c2d2;
  font-size: 10px;
  margin-left: 6px;
}

.nojs {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  color: #fff;
  font-family: var(--font);
}

@media (max-width: 620px) {
  #legend { max-width: 220px; font-size: 10.5px; }
  #pin-readout { min-width: 150px; max-width: 200px; }
}

/* Short windows: keep the legend from running into the bottom bar. */
@media (max-height: 620px) {
  #legend {
    max-height: calc(100vh - var(--header-height) - 110px);
    overflow-y: auto;
  }
}