/* The active NWS flood warning layer (static/js/open_map_nws_alerts.js): its
 * map popup, and the block it contributes to every station card.
 *
 * Its own file for the reason the weather block's is: the JS that draws this is
 * loaded only by the open map, so the CSS that paints it should be too, and a
 * stylesheet that belongs to one feature can be removed with that feature.
 *
 * Palette is the page's own tokens with hard-coded fallbacks, and every colour
 * has a `body.dark-mode` partner — this page's dark mode is a class on <body>,
 * not a media query, so a `prefers-color-scheme` block would paint the wrong
 * thing for a reader who has chosen against their system setting.
 *
 * THE TIER COLOURS ARE DUPLICATED IN THE JAVASCRIPT, deliberately. MapLibre
 * paints the polygons from a `fill-color` expression built in JS and the DOM
 * paints the chips from here, and the two cannot share a value without putting
 * a colour in an inline style — which this deployment's CSP on `style-src-elem`
 * forbids. `test_nws_alerts.py` asserts the two tables are equal, so a change
 * to one that is not made in the other fails a test rather than shipping a
 * legend whose swatch does not match its polygon.
 */

.nh-fa {
  font-size: 0.86rem;
  line-height: 1.4;
}

.nh-fa--card {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--r-sm, 6px);
  background: var(--surface-2, #f8fafc);
}

body.dark-mode .nh-fa--card {
  border-color: #374151;
  background: #1f2937;
}

.nh-fa__title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-fa__title { color: #9ca3af; }

/* One alert. Several may stack on a card where warnings overlap. */
.nh-fa__alert { margin: 0 0 8px; }
.nh-fa__alert:last-child { margin-bottom: 0; }

.nh-fa__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.nh-fa__event { font-size: 0.9rem; }

/* The tier chip. The dashed border on a WATCH is the same second channel the
 * map uses for the same reason: a red/amber pair is the most common confusion
 * for a colour-blind reader, and this audience is being told the difference
 * between "flooding is happening" and "flooding is possible". */
.nh-fa__chip {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}

.nh-fa__chip--warning { background: #d0021b; border-color: #d0021b; }
.nh-fa__chip--statement { background: #7b61ff; border-color: #7b61ff; }

.nh-fa__chip--watch {
  background: transparent;
  border: 1px dashed #a86a00;
  color: #a86a00;
}

body.dark-mode .nh-fa__chip--watch { border-color: #f5a623; color: #f5a623; }

/* The fourth tier, and the faintest. Dotted rather than dashed, so the chip
 * carries the same outline distinction the map does: solid = a warning-class
 * product in force, dashed = a watch, dotted = nuisance flooding. */
.nh-fa__chip--advisory {
  background: transparent;
  border: 1px dotted #35707f;
  color: #35707f;
}

body.dark-mode .nh-fa__chip--advisory { border-color: #4a90a4; color: #7cbcd0; }

.nh-fa__sentence { margin: 0 0 3px; }

.nh-fa__area,
.nh-fa__instruction,
.nh-fa__note {
  margin: 0 0 3px;
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
}

body.dark-mode .nh-fa__area,
body.dark-mode .nh-fa__instruction,
body.dark-mode .nh-fa__note { color: #9ca3af; }

.nh-fa__instruction {
  /* NWS instruction prose is the actionable half of a warning and is worth the
   * room; the server already clips it, so this bounds the tall remainder. */
  max-height: 7.5em;
  overflow-y: auto;
}

/* "No warning covers this gauge" — a real answer, and it should not look like
 * an error or like a warning. */
.nh-fa__clear {
  margin: 0 0 3px;
  color: var(--ok, #15803d);
}

body.dark-mode .nh-fa__clear { color: #4ade80; }

/* "Current, but a tier is missing." Distinct from __unknown (nothing at all)
 * and from __note (an aside): the answer on screen is real and incomplete, and
 * the reader has to be able to see that at the same glance that shows them the
 * alerts which DID arrive. */
.nh-fa__partial {
  margin: 4px 0 0;
  padding: 5px 8px;
  border-left: 3px solid var(--warn, #b45309);
  background: rgba(180, 83, 9, 0.06);
  font-size: 0.8rem;
}

body.dark-mode .nh-fa__partial {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
}

/* "We could not check." The one state that must not read as "all clear". */
.nh-fa__unknown {
  margin: 0;
  padding: 6px 8px;
  border-left: 3px solid var(--warn, #b45309);
  background: rgba(180, 83, 9, 0.08);
  color: var(--warn, #b45309);
}

body.dark-mode .nh-fa__unknown {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
}

.nh-fa__link {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.8rem;
}

.nh-fa__qpe {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--line, #e5e7eb);
}

body.dark-mode .nh-fa__qpe { border-top-color: #374151; }

.nh-fa__qpe .nh-fa__note { display: block; margin: 0; }

/* The map popup. MapLibre's own container supplies the frame; this only has to
 * keep a multi-warning stack from growing past the map. */
.nh-fa--popup {
  max-height: 46vh;
  overflow-y: auto;
}

.maplibregl-popup.nh-fa__popup .maplibregl-popup-content {
  padding: 10px 12px;
  border-radius: var(--r-sm, 6px);
}

body.dark-mode .maplibregl-popup.nh-fa__popup .maplibregl-popup-content {
  background: #1f2937;
  color: #e5e7eb;
}

body.dark-mode .maplibregl-popup.nh-fa__popup .maplibregl-popup-tip {
  border-top-color: #1f2937;
  border-bottom-color: #1f2937;
}

/* The status line under the map, when this layer is the one talking. `stale`
 * and `error` are set by the JS as `data-state`; the default needs no rule. */
.flood-alerts-status[data-state="error"] { color: var(--warn, #b45309); }
.flood-alerts-status[data-state="stale"] { color: var(--muted, #6b7280); }
.flood-alerts-status[data-state="partial"] { color: var(--warn, #b45309); }

body.dark-mode .flood-alerts-status[data-state="error"] { color: #fbbf24; }
body.dark-mode .flood-alerts-status[data-state="stale"] { color: #9ca3af; }
body.dark-mode .flood-alerts-status[data-state="partial"] { color: #fbbf24; }