/* SAWS Daily Rainfall — page styles.
 *
 * Extracted from the inline <style> block in
 * dataportal/templates/dataportal/daily_rainfall.html and extended with
 * the Storm Story Map additions: tab switcher, deck.gl layer-control
 * panel, methodology card, and measurement/derived disclaimer chips.
 */

:root {
  --rain-primary: #0c4a6e;
  --rain-accent: #0ea5e9;
  --rain-deep: #1e3a8a;
  --rain-text: #1f2937;
  --rain-text-muted: #475569;
  --rain-text-faint: #94a3b8;
  --rain-border: rgba(15, 23, 42, .08);
  --rain-surface: #fff;
  --rain-bg: #f8fafc;
  --rain-band-light:      #cbd5e1; /* <10 mm */
  --rain-band-moderate:   #93c5fd; /* 10-19 */
  --rain-band-heavy:      #3b82f6; /* 20-49 */
  --rain-band-very_heavy: #1d4ed8; /* 50-99 */
  --rain-band-extreme:    #6d28d9; /* 100+ */
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--rain-text); }
h1, h2, h3 {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--rain-primary); font-weight: 800; letter-spacing: -0.02em;
}

/* ── Layout ── */
.rain-page { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
@media (min-width: 768px) { .rain-page { padding: 2.25rem 2rem 5rem; } }

.rain-back { display: inline-flex; align-items: center; gap: .5rem; color: var(--rain-accent); text-decoration: none; font-weight: 500; margin-bottom: 1.25rem; font-size: .9rem; }
.rain-back:hover { text-decoration: underline; }

/* ── Editorial hero ── */
.rain-hero {
  position: relative; overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #0c4a6e 0%, #1e3a8a 45%, #2563eb 100%);
  color: #fff; padding: 2.25rem 1.75rem;
}
@media (min-width: 768px) { .rain-hero { padding: 2.75rem 2.5rem 3rem; } }
.rain-hero::after {
  content: "";
  position: absolute; right: -60px; bottom: -90px; width: 320px; height: 320px;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
}
.rain-hero__chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1rem;
}
.rain-hero__eyebrow,
.rain-hero__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: #fff;
  margin: 0;
}
.rain-hero__eyebrow { text-transform: uppercase; }
.rain-hero__chip--date { background: rgba(255,255,255,.20); }
.rain-hero__chip--meta { background: rgba(255,255,255,.08); }
.rain-hero__title {
  color: #fff; font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 .35rem; max-width: 760px;
}
.rain-hero__tagline {
  font-size: 1.05rem; font-weight: 600; line-height: 1.4;
  margin: 0 0 .75rem; color: rgba(255,255,255,.95);
  max-width: 720px;
}
.rain-hero__lead { font-size: 1rem; line-height: 1.55; opacity: .92; max-width: 680px; margin: 0; }
.rain-hero__lead strong { color: #fff; font-weight: 700; }
.rain-hero__meta {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1.25rem; font-size: .85rem; opacity: .8;
}
.rain-hero__meta-item { display: inline-flex; align-items: center; gap: .35rem; }

/* Condition-aware hero tint: each state shifts the gradient subtly so
   the hero reads differently for an extreme day vs a dry one without
   adding noise.  Keeps the same brand palette family. */
.rain-hero--extreme {
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #7c3aed 100%);
}
.rain-hero--very_heavy {
  background: linear-gradient(135deg, #1e1b4b 0%, #1e3a8a 45%, #1d4ed8 100%);
}
.rain-hero--heavy_widespread {
  background: linear-gradient(135deg, #0c4a6e 0%, #1e40af 45%, #2563eb 100%);
}
.rain-hero--heavy_local {
  background: linear-gradient(135deg, #0c4a6e 0%, #1e3a8a 45%, #3b82f6 100%);
}
.rain-hero--wet_active,
.rain-hero--wet_minimal {
  background: linear-gradient(135deg, #0c4a6e 0%, #1e3a8a 45%, #0ea5e9 100%);
}
.rain-hero--dry {
  background: linear-gradient(135deg, #0c4a6e 0%, #475569 45%, #64748b 100%);
}
.rain-hero--awaiting {
  background: linear-gradient(135deg, #1e293b 0%, #334155 45%, #475569 100%);
}

/* ── KPI strip ── */
.rain-kpis {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 1rem; position: relative; z-index: 2;
  padding: 0 .5rem;
}
@media (min-width: 768px) { .rain-kpis { padding: 0 .75rem; } }
.rain-kpi {
  background: var(--rain-surface); border-radius: 1rem;
  border: 1px solid var(--rain-border);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
  padding: 1rem 1.1rem; display: flex; gap: .85rem; align-items: flex-start;
}
.rain-kpi__icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: rgba(14, 165, 233, .12); color: var(--rain-accent);
}
.rain-kpi__icon--violet { background: rgba(109, 40, 217, .12); color: #6d28d9; }
.rain-kpi__icon--green  { background: rgba(22, 163, 74, .12); color: #16a34a; }
.rain-kpi__icon--amber  { background: rgba(217, 119, 6, .12); color: #d97706; }
.rain-kpi__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rain-text-faint); font-weight: 700; }
.rain-kpi__value { font-size: 1.65rem; font-weight: 800; color: var(--rain-primary); line-height: 1.1; margin-top: .35rem; letter-spacing: -.015em; }
.rain-kpi__unit { font-size: 1rem; font-weight: 600; color: var(--rain-text-muted); margin-left: .15rem; }
.rain-kpi__hint { font-size: .8rem; color: var(--rain-text-muted); margin-top: .3rem; line-height: 1.35; }

/* ── Generic section card ── */
.rain-card {
  background: var(--rain-surface);
  border: 1px solid var(--rain-border);
  border-radius: 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 768px) { .rain-card { padding: 1.85rem; } }
.rain-card__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.rain-card__title { font-size: 1.2rem; font-weight: 700; color: var(--rain-primary); margin: 0; }
.rain-card__subtitle { color: var(--rain-text-muted); font-size: .85rem; margin: .25rem 0 0; }
.rain-card__hint { font-size: .75rem; color: var(--rain-text-faint); }

/* ── Insight panel ── */
.rain-insight {
  background: linear-gradient(135deg, #ecfeff 0%, #eff6ff 100%);
  border: 1px solid rgba(14, 165, 233, .25);
  border-radius: 1.25rem;
  padding: 1.25rem 1.5rem; margin-top: 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
}
/* Quieter variant — used inside the 24h section, where a second
   blue-tinted block would compete with the hero. Warm neutral instead. */
.rain-insight--quiet {
  background: #fafaf7;
  border-color: #e7e5dc;
}
.rain-insight--quiet .rain-insight__icon {
  background: rgba(180, 83, 9, .12);
  color: #b45309;
}
.rain-insight__icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: rgba(14, 165, 233, .15); color: var(--rain-accent);
}
.rain-insight__title { margin: 0 0 .3rem; font-size: .85rem; font-weight: 700; color: var(--rain-primary); text-transform: uppercase; letter-spacing: .04em; }
.rain-insight__body { margin: 0; color: var(--rain-text); line-height: 1.55; font-size: .95rem; }

/* ── Map card (gradient header + canvas) ── */
.rain-card--map { padding: 0; overflow: hidden; }
.rain-map__header {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: 1.5rem 1.75rem 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, #0c4a6e 0%, #1d4ed8 60%, #2563eb 100%);
  position: relative;
}
.rain-map__header::after {
  content: "";
  position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
  pointer-events: none;
}
.rain-card__title--on-dark { color: #fff; margin: 0; font-size: 1.2rem; }
.rain-card__subtitle--on-dark { color: rgba(255,255,255,.85); margin: .25rem 0 0; font-size: .85rem; max-width: 460px; }
.rain-map__stats {
  display: flex; gap: .75rem; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.rain-map__stat {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  padding: .55rem .85rem; border-radius: .65rem;
  min-width: 130px;
}
.rain-map__stat-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; font-weight: 600; }
.rain-map__stat-value { font-weight: 700; font-size: .98rem; margin-top: .15rem; line-height: 1.1; }
.rain-map__stat-sub { font-size: .72rem; opacity: .85; margin-top: .1rem; }
.rain-map__canvas-wrap { padding: 1rem; position: relative; }

/* Latest-bulletin spotlight strip — top 3 stations from the most recent
 * 24h SAWS bulletin, surfaced next to the 5-day map so freshness stays
 * visible without competing with the wider rolling footprint.
 */
.rain-map__spotlight {
  margin: 0 1.5rem .25rem;
  padding: .65rem .9rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: .55rem;
  color: #f8fafc;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1.1rem;
  font-size: .82rem;
}
.rain-map__spotlight-label {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  opacity: .85;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.rain-map__spotlight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
}
.rain-map__spotlight-list li {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.rain-map__spotlight-mm {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: .95;
}
.rain-map__spotlight-prov { opacity: .65; font-size: .7rem; }
@media (max-width: 575px) {
  .rain-map__header { grid-template-columns: 1fr; padding: 1.25rem 1.25rem 1rem; }
  .rain-map__stat { min-width: 110px; }
}
.rain-legend--inline {
  padding: 0 1.5rem 1.25rem;
  margin-top: 0;
}
#rainfall-map,
#rainfall-storm-map {
  height: 500px; border-radius: .85rem; border: 1px solid var(--rain-border);
  position: relative;
}
#rainfall-storm-map { background: var(--rain-bg); }
@media (max-width: 575px) {
  #rainfall-map,
  #rainfall-storm-map { height: 360px; }
}

/* ── Pill tab strips (shared between map + analytics) ── */
.rain-pill-tabs {
  display: flex; gap: .25rem;
  margin: 1rem 0 0;
  padding: .25rem;
  background: var(--rain-bg);
  border-radius: 999px;
  border: 1px solid var(--rain-border);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
}
.rain-map-tabs { margin: 1rem 1.5rem 0; }
.rain-analytics-tabs { margin: .25rem 0 1rem; }
.rain-map-tab,
.rain-analytics-tab {
  border: 0;
  background: transparent;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--rain-text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.rain-map-tab[aria-selected="true"],
.rain-analytics-tab[aria-selected="true"] {
  background: var(--rain-surface);
  color: var(--rain-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.rain-map-tab:focus-visible,
.rain-analytics-tab:focus-visible {
  outline: 2px solid var(--rain-accent); outline-offset: 2px;
}
.rain-map-panel[hidden],
.rain-analytics-panel[hidden] { display: none; }

.rain-map__caption {
  margin: .65rem 1.5rem 0;
  font-size: .8rem;
  color: var(--rain-text-muted);
  line-height: 1.4;
}
.rain-map__caption [data-caption-for] { display: block; }

.rain-map__overlay {
  position: relative;
  margin: 0 1rem;
}
.rain-map__overlay .rain-empty {
  margin-bottom: 0;
}
.rain-regional-table th { font-weight: 700; color: var(--rain-primary); }
.rain-regional-table tbody tr:last-child td { border-bottom: 0 !important; }

.rain-compare-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem;
  background: var(--rain-bg);
  border: 1px solid var(--rain-border);
  border-radius: .85rem;
  margin: 0 1rem;
  font-size: .85rem;
  color: var(--rain-text-muted);
}
.rain-compare-toolbar__label {
  font-weight: 600;
  color: var(--rain-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .7rem;
}
.rain-compare-toolbar__group {
  display: inline-flex; gap: .2rem;
  padding: .2rem;
  background: var(--rain-surface);
  border-radius: 999px;
  border: 1px solid var(--rain-border);
}
.rain-compare-toolbar__btn {
  border: 0; background: transparent;
  padding: .3rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--rain-text-muted);
  cursor: pointer;
}
.rain-compare-toolbar__btn[aria-pressed="true"] {
  background: var(--rain-accent);
  color: #fff;
}
.rain-compare-toolbar__hint {
  font-size: .75rem;
  color: var(--rain-text-faint);
}

/* ── Analytics: Overview grid ── */
.rain-overview-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: .85rem;
}
.rain-overview-stat {
  background: var(--rain-bg);
  border: 1px solid var(--rain-border);
  border-radius: .85rem;
  padding: .85rem 1rem;
}
.rain-overview-stat__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rain-text-faint);
  font-weight: 700;
  margin-bottom: .3rem;
}
.rain-overview-stat__value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--rain-primary);
  line-height: 1.1;
}
.rain-overview-stat__hint {
  font-size: .75rem;
  color: var(--rain-text-muted);
  margin-top: .3rem;
}

/* ── Analytics: Timeline scope controls ── */
.rain-timeline-controls {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .85rem 0 .5rem;
  padding: .25rem;
  background: var(--rain-bg);
  border-radius: 999px;
  border: 1px solid var(--rain-border);
  width: max-content;
  max-width: 100%;
}
.rain-timeline-control {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  color: var(--rain-text-muted);
  cursor: pointer;
}
.rain-timeline-control:has(input:checked) {
  background: var(--rain-surface);
  color: var(--rain-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.rain-timeline-control input {
  /* The radio is the source of truth but we hide it visually for the
     pill UX.  Keyboard nav still works via the surrounding label. */
  position: absolute; opacity: 0; pointer-events: none;
}
.rain-timeline-control[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.rain-timeline-pickers {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-bottom: .85rem;
}
.rain-timeline-picker {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem;
  color: var(--rain-text-muted);
}
.rain-timeline-picker label { font-weight: 600; color: var(--rain-primary); }
.rain-timeline-picker select,
.rain-timeline-picker input[type="search"] {
  padding: .35rem .65rem;
  border-radius: .55rem;
  border: 1px solid var(--rain-border);
  font-size: .85rem;
  background: var(--rain-surface);
  color: var(--rain-text);
  min-width: 180px;
}
.rain-timeline-picker__hint { font-size: .75rem; color: var(--rain-text-faint); }

@media (max-width: 575px) {
  .rain-map-tabs { margin: 1rem 1rem 0; }
}

/* ── Layer-control panel (Storm view) ── */
.rain-layer-panel {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--rain-surface);
  border: 1px solid var(--rain-border);
  border-radius: .75rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
  padding: .65rem .75rem;
  min-width: 180px;
  z-index: 2;
  font-size: .8rem;
}
.rain-layer-panel__title {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rain-text-faint);
  margin: 0 0 .4rem;
  font-weight: 700;
}
.rain-layer-panel__row {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0;
  cursor: pointer;
  color: var(--rain-text);
}
.rain-layer-panel__row input { accent-color: var(--rain-accent); }
.rain-layer-panel__swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  background: var(--rain-band-heavy);
}
.rain-layer-panel__swatch--bubble { border-radius: 50%; background: var(--rain-accent); }

.rain-disclaimer-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: .75rem 1.5rem 0;
  padding: .35rem .65rem;
  background: rgba(217, 119, 6, .08);
  border: 1px solid rgba(217, 119, 6, .25);
  border-radius: 999px;
  font-size: .72rem;
  color: #b45309;
  font-weight: 500;
}

.rain-empty-history-note {
  margin: .75rem 1.5rem 0;
  padding: .65rem .85rem;
  background: rgba(14, 165, 233, .08);
  border: 1px solid rgba(14, 165, 233, .2);
  border-radius: .65rem;
  font-size: .82rem;
  color: var(--rain-text-muted);
}

/* ── Storm map tooltip (rendered by deck.gl) ── */
.rain-storm-tooltip {
  background: var(--rain-surface);
  color: var(--rain-text);
  border: 1px solid var(--rain-border);
  border-radius: .65rem;
  padding: .65rem .75rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .12);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  line-height: 1.35;
  max-width: 220px;
}
.rain-storm-tooltip strong { color: var(--rain-primary); font-size: .9rem; display: block; margin-bottom: .15rem; }
.rain-storm-tooltip__mm { font-weight: 800; color: var(--rain-primary); font-size: 1.1rem; }
.rain-storm-tooltip__sub { color: var(--rain-text-muted); font-size: .7rem; margin-top: .25rem; }
.rain-storm-tooltip__badge {
  display: inline-block;
  margin-top: .35rem;
  padding: .1rem .4rem;
  border-radius: 99px;
  background: rgba(217, 119, 6, .12);
  color: #b45309;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rain-storm-tooltip__badge--measured {
  background: rgba(22, 163, 74, .12);
  color: #166534;
}

/* ── Legend ── */
.rain-legend { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1rem; font-size: .8rem; color: var(--rain-text-muted); }
.rain-legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.rain-legend__dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rain-legend__dot--light      { background: var(--rain-band-light); }
.rain-legend__dot--moderate   { background: var(--rain-band-moderate); }
.rain-legend__dot--heavy      { background: var(--rain-band-heavy); }
.rain-legend__dot--very_heavy { background: var(--rain-band-very_heavy); }
.rain-legend__dot--extreme    { background: var(--rain-band-extreme); }

/* ── Top stations ranking ── */
.rain-rank { display: flex; flex-direction: column; gap: .65rem; margin-top: .25rem; }
.rain-rank__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: .75rem; align-items: center;
  padding: .55rem .75rem;
  border-radius: .65rem;
  background: var(--rain-bg);
}
.rain-rank__pos { font-size: .75rem; font-weight: 700; color: var(--rain-text-faint); text-align: center; }
.rain-rank__main { min-width: 0; }
.rain-rank__name { font-weight: 600; color: var(--rain-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.rain-rank__sub { display: flex; align-items: center; gap: .5rem; font-size: .7rem; color: var(--rain-text-muted); margin-top: .15rem; }
.rain-rank__province { color: var(--rain-text-muted); }
.rain-rank__bar { height: 6px; border-radius: 99px; background: rgba(15, 23, 42, .06); margin-top: .4rem; overflow: hidden; }
.rain-rank__bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.rain-rank__mm { font-weight: 800; color: var(--rain-primary); font-size: 1rem; min-width: 70px; text-align: right; }

.rain-band {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .45rem; border-radius: 99px;
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #fff;
}
.rain-band--light      { background: var(--rain-band-light);     color: #475569; }
.rain-band--moderate   { background: var(--rain-band-moderate);  color: #1e293b; }
.rain-band--heavy      { background: var(--rain-band-heavy); }
.rain-band--very_heavy { background: var(--rain-band-very_heavy); }
.rain-band--extreme    { background: var(--rain-band-extreme); }

/* ── Province summary ── */
.rain-provinces { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: .25rem; }
.rain-province {
  border: 1px solid var(--rain-border); border-radius: .85rem; padding: .85rem 1rem;
  background: var(--rain-surface);
}
.rain-province--top { background: linear-gradient(135deg, #ecfeff, #eff6ff); border-color: rgba(14,165,233,.3); }
.rain-province__row1 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.rain-province__name { font-weight: 700; color: var(--rain-primary); font-size: .95rem; }
.rain-province__mm { font-weight: 800; color: var(--rain-primary); }
.rain-province__bar { height: 6px; border-radius: 99px; background: rgba(15, 23, 42, .06); margin-top: .45rem; overflow: hidden; }
.rain-province__bar-fill { height: 100%; background: var(--rain-band-heavy); border-radius: 99px; }
.rain-province__sub { font-size: .75rem; color: var(--rain-text-muted); margin-top: .35rem; display: flex; gap: .5rem; align-items: center; }

/* ── Time series ── */
.rain-chart-wrap { position: relative; width: 100%; min-height: 280px; }
@media (max-width: 575px) { .rain-chart-wrap { min-height: 220px; } }
.rain-chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; font-size: .75rem; color: var(--rain-text-muted); }

/* ── Empty state ── */
.rain-empty {
  border: 1px dashed #cbd5e1; border-radius: 1rem;
  padding: 2rem 1.5rem; text-align: center; color: var(--rain-text-muted);
  background: var(--rain-bg); margin-top: 1.25rem;
}
.rain-empty i { font-size: 1.75rem; color: var(--rain-accent); }

/* ── How to read note ── */
.rain-howto {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .75rem 1rem;
  border-radius: .85rem;
  background: rgba(14, 165, 233, .08);
  color: var(--rain-text-muted);
  font-size: .82rem; line-height: 1.45;
  margin-top: 1rem;
}
.rain-howto i { color: var(--rain-accent); margin-top: .1rem; }

/* ── Methodology card ── */
.rain-methodology { display: grid; gap: 1rem; }
@media (min-width: 768px) { .rain-methodology { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.rain-methodology__item {
  background: var(--rain-bg);
  border: 1px solid var(--rain-border);
  border-radius: .85rem;
  padding: .85rem 1rem;
}
.rain-methodology__label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rain-text-faint);
  font-weight: 700;
  margin: 0 0 .35rem;
}
.rain-methodology__value {
  margin: 0;
  font-size: .9rem;
  color: var(--rain-text);
  font-weight: 600;
  line-height: 1.4;
}
.rain-methodology__value a { color: var(--rain-accent); text-decoration: none; }
.rain-methodology__value a:hover { text-decoration: underline; }
.rain-methodology__heading {
  font-size: .85rem;
  font-weight: 700;
  color: var(--rain-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 1.25rem 0 .5rem;
}
.rain-methodology__notes {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--rain-text-muted);
  font-size: .85rem;
  line-height: 1.5;
}
.rain-methodology__notes li + li { margin-top: .35rem; }

/* ── Source ── */
.rain-source { padding: 1rem 1.25rem; background: var(--rain-bg); border: 1px solid var(--rain-border); border-radius: 1rem; margin-top: 1.5rem; }
.rain-source__row { font-size: .85rem; color: var(--rain-text-muted); margin: 0; }
.rain-source__link { color: var(--rain-accent); text-decoration: none; font-weight: 500; }
.rain-source__link:hover { text-decoration: underline; }
.rain-source__row + .rain-source__row { margin-top: .35rem; }

/* Mobile tweaks */
@media (max-width: 575px) {
  .rain-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rain-kpi__value { font-size: 1.25rem; }
  .rain-rank__mm { font-size: .9rem; min-width: 60px; }
  .rain-layer-panel { font-size: .72rem; min-width: 150px; padding: .5rem .6rem; }
}

/* ── Overview scope toggle (Nation / Western Cape) ──────────────────── */
.rain-overview-scope {
  display: inline-flex; gap: 0; margin-bottom: 1rem;
  background: var(--rain-bg);
  border: 1px solid var(--rain-border);
  border-radius: .55rem; padding: .2rem;
}
.rain-overview-scope__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .85rem;
  background: transparent; border: 0; border-radius: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--rain-text-muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.rain-overview-scope__btn:hover:not(:disabled) { color: var(--rain-primary); }
.rain-overview-scope__btn.is-active {
  background: #fff; color: var(--rain-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.rain-overview-scope__btn:disabled { opacity: .45; cursor: not-allowed; }
.rain-overview-scope__btn i { font-size: .9rem; }

/* Active-scope colour: keep nation a neutral primary, mark WC amber so the
   user feels the lens switch even before reading the banner. */
.rain-overview-scope__btn[data-overview-scope="wc"].is-active {
  background: #fff7ed;            /* amber-50 */
  color: #92400e;                  /* amber-900 */
}
.rain-overview-scope__btn[data-overview-scope="wc"].is-active i { color: #d97706; }

.rain-overview-scope-panel { padding: .15rem 0; }

/* Global scope selector: any element marked data-scope-only="nation" hides
   when the analytics card sits in WC scope, and vice versa. Lets every
   analytics tab respect the same Nation / Western Cape toggle. */
[data-rain-scope="nation"] [data-scope-only="wc"] { display: none !important; }
[data-rain-scope="wc"] [data-scope-only="nation"] { display: none !important; }
[data-rain-scope="nation"] .rain-overview-scope-banner--wc { display: none !important; }
[data-rain-scope="wc"] .rain-overview-scope-banner--nation { display: none !important; }
.rain-overview-scope-banner {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .9rem; margin-bottom: .9rem;
  border-radius: .65rem;
  border-left: 4px solid var(--rain-accent);
  background: rgba(14, 165, 233, .08);
  font-size: .85rem; line-height: 1.45; color: var(--rain-text-muted);
}
.rain-overview-scope-banner strong { color: var(--rain-primary); margin-right: .25rem; }
.rain-overview-scope-banner i { color: var(--rain-accent); font-size: 1.05rem; margin-top: .1rem; }
.rain-overview-scope-banner span { display: inline; }

/* WC variant: amber palette so the visual swap is obvious */
.rain-overview-scope-banner--wc {
  border-left-color: #d97706;
  background: #fff7ed;
}
.rain-overview-scope-banner--wc strong { color: #92400e; }
.rain-overview-scope-banner--wc i { color: #d97706; }

/* ── Location search ───────────────────────────────────────────────── */
.rain-locsearch-card { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.rain-locsearch__header { margin-bottom: .85rem; }
.rain-locsearch__form {
  display: flex; gap: .5rem; align-items: stretch;
  position: relative;
}
.rain-locsearch__field { flex: 1; position: relative; }
.rain-locsearch__field::before {
  content: "\F52A"; /* bi-search */
  font-family: "bootstrap-icons";
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--rain-text-muted); pointer-events: none; font-size: 1rem;
}
.rain-locsearch__input {
  width: 100%; box-sizing: border-box;
  padding: .7rem .85rem .7rem 2.4rem;
  border: 1px solid var(--rain-border); border-radius: .65rem;
  background: #fff; font-size: 1rem; color: var(--rain-primary);
  transition: border-color .15s, box-shadow .15s;
}
.rain-locsearch__input:focus {
  outline: none;
  border-color: var(--rain-accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .18);
}
.rain-locsearch__clear {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--rain-bg); color: var(--rain-text-muted);
  border: 1px solid var(--rain-border); border-radius: .65rem;
  padding: 0 .85rem; font-size: .9rem; cursor: pointer;
}
.rain-locsearch__clear:hover { color: var(--rain-primary); }

.rain-locsearch__suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .25rem; list-style: none;
  background: #fff; border: 1px solid var(--rain-border);
  border-radius: .65rem; box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
  z-index: 30; max-height: 280px; overflow-y: auto;
}
.rain-locsearch__suggest li {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .75rem; border-radius: .45rem; cursor: pointer;
  color: var(--rain-primary); font-size: .95rem;
}
.rain-locsearch__suggest li i { color: var(--rain-accent); }
.rain-locsearch__suggest li.is-active,
.rain-locsearch__suggest li[aria-selected="true"] { background: rgba(14, 165, 233, .12); }

.rain-locsearch__status {
  margin: .55rem 0 0;
  font-size: .85rem; color: var(--rain-text-muted); min-height: 1.2em;
}
.rain-locsearch__status[data-kind="error"] { color: #b91c1c; }
.rain-locsearch__status[data-kind="loading"]::before {
  content: ""; display: inline-block; width: .65em; height: .65em;
  border: 2px solid var(--rain-accent); border-right-color: transparent;
  border-radius: 50%; margin-right: .45rem; vertical-align: -1px;
  animation: rain-spin .7s linear infinite;
}
@keyframes rain-spin { to { transform: rotate(360deg); } }

.rain-locsearch__result {
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px dashed var(--rain-border);
}
.rain-locsearch__result-head h3 {
  margin: 0; font-size: 1.05rem; color: var(--rain-primary); font-weight: 700;
}
.rain-locsearch__count { margin: .2rem 0 0; font-size: .85rem; color: var(--rain-text-muted); }

.rain-locsearch__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem; margin-top: .85rem;
}
.rain-locsearch__stat {
  background: var(--rain-bg);
  border: 1px solid var(--rain-border);
  border-radius: .75rem;
  padding: .75rem .9rem;
}
.rain-locsearch__stat-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--rain-text-muted); font-weight: 700;
}
.rain-locsearch__stat-value {
  font-size: 1.5rem; font-weight: 800; color: var(--rain-primary); line-height: 1.1;
  margin-top: .2rem;
}
.rain-locsearch__stat-sub {
  margin-top: .15rem; font-size: .78rem; color: var(--rain-text-muted);
}

.rain-locsearch__stations-heading {
  margin: 1.1rem 0 .5rem; font-size: .9rem; font-weight: 700; color: var(--rain-primary);
}
.rain-locsearch__table-wrap { overflow-x: auto; }
.rain-locsearch__table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.rain-locsearch__table thead th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; color: var(--rain-text-muted);
  padding: .4rem .55rem; border-bottom: 1px solid var(--rain-border);
}
.rain-locsearch__table tbody td {
  padding: .5rem .55rem; border-bottom: 1px solid var(--rain-border);
  color: var(--rain-primary);
}
.rain-locsearch__table tbody tr:last-child td { border-bottom: none; }
.rain-locsearch__cell-name { font-weight: 600; }
.rain-locsearch__cell-num { text-align: right; font-variant-numeric: tabular-nums; }

.rain-locsearch__caveat {
  margin: .9rem 0 0; padding: .65rem .85rem;
  background: rgba(14, 165, 233, .08);
  border-left: 3px solid var(--rain-accent);
  border-radius: .5rem;
  font-size: .82rem; color: var(--rain-text-muted); line-height: 1.5;
}
.rain-locsearch__caveat i { color: var(--rain-accent); margin-right: .3rem; }

/* Distant-data notice — surfaced when the only reporting stations are
   outside the local radius (50 km) but still within the regional one
   (250 km). Loud enough that the reader sees it before the numbers. */
.rain-locsearch__distant {
  margin: .85rem 0 0; padding: .7rem .9rem;
  background: #fef3c7;
  border-left: 3px solid #d97706;
  border-radius: .5rem;
  font-size: .85rem; color: #78350f; line-height: 1.5;
  display: flex; align-items: flex-start; gap: .45rem;
}
.rain-locsearch__distant i { color: #b45309; margin-top: .15rem; flex-shrink: 0; }

/* Empty state — no SAWS station within 250 km reported. */
.rain-locsearch__result-head--empty {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.1rem; margin: .9rem 0 0;
  background: #f1f5f9;
  border: 1px solid var(--rain-border);
  border-radius: .85rem;
  border-top: none;
}
.rain-locsearch__result-head--empty > i {
  font-size: 1.6rem; color: var(--rain-text-faint); margin-top: .1rem;
}
.rain-locsearch__result-head--empty h3 {
  margin: 0 0 .25rem; font-size: 1rem; color: var(--rain-primary); font-weight: 700;
}
.rain-locsearch__result-head--empty p {
  margin: 0; font-size: .88rem; line-height: 1.5; color: var(--rain-text-muted);
}

@media (max-width: 575px) {
  .rain-locsearch-card { padding: 1rem 1rem; }
  .rain-locsearch__form { flex-direction: column; }
  .rain-locsearch__stats { grid-template-columns: 1fr; }
}

/* Search pin marker on the MapLibre map */
.rain-search-pin {
  width: 18px; height: 18px;
  background: #f59e0b;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(245, 158, 11, .55);
  position: relative;
  pointer-events: none;
}
.rain-search-pin::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px;
  border-radius: 50%; transform: translate(-50%, -50%);
  border: 2px solid rgba(245, 158, 11, .35);
  animation: rain-pin-pulse 1.4s ease-out infinite;
}
@keyframes rain-pin-pulse {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   v2 daily-rainfall — premium hero, moved-up search, section headers,
   KPI scope chips, trust badges.
   All rules are additive: they only fire when the v2 variant classes
   are present, so legacy callers of .rain-hero / .rain-locsearch-card
   continue to render unchanged.
*/

/* ── Hero v2: single Cape Town-focused column ── */
.rain-hero--v2 {
  display: flex;
  align-items: stretch;
  padding: clamp(1.5rem, 2vw, 2.5rem);
}
@media (max-width: 860px) {
  .rain-hero--v2 { padding: 1.25rem; }
}

.rain-hero--v2 .rain-hero__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.rain-hero--v2 .rain-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 239, 222, .82);
  margin-bottom: .85rem;
}
.rain-hero--v2 .rain-hero__title {
  font-size: clamp(1.7rem, 2.6vw + .4rem, 2.65rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0 0 .55rem;
  max-width: 22ch;
}
.rain-hero--v2 .rain-hero__tagline {
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.5;
  opacity: .9;
  margin: 0 0 1rem;
  max-width: 52ch;
}
.rain-hero--v2 .rain-hero__status {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin-top: auto;
  padding-top: .35rem;
}
.rain-hero--v2 .rain-hero__status-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 500;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(245, 239, 222, .85);
  border: 1px solid rgba(255, 255, 255, .14);
}
.rain-hero--v2 .rain-hero__status-item--live {
  background: rgba(22, 163, 74, .22);
  border-color: rgba(22, 163, 74, .45);
  color: #d6f4e1;
}
.rain-hero--v2 .rain-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
  animation: rain-hero-pulse 2s ease-out infinite;
}
@keyframes rain-hero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .65); }
  70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}


/* ── Section header (sits at the top of a logical block) ── */
.rain-section {
  margin: 2rem .5rem 0;
}
@media (min-width: 768px) {
  .rain-section { margin: 2rem .75rem 0; }
}
.rain-section__head {
  margin: 0 0 1rem;
  padding: 0 .25rem;
}
.rain-section__title-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.rain-section__title {
  font-size: clamp(1.15rem, .9vw + .9rem, 1.45rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--rain-primary);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.rain-section__title::before {
  content: "";
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: #d97706;
  display: inline-block;
}
.rain-section--rolling .rain-section__title::before { background: #1d4ed8; }
.rain-section__chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .28rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rain-section__chip i { font-size: .85rem; }
.rain-section__chip--snapshot {
  background: #fffbeb;
  color: #92400e;
  border-color: rgba(217, 119, 6, .35);
}
.rain-section__chip--rolling {
  background: #eff6ff;
  color: #1e40af;
  border-color: rgba(29, 78, 216, .3);
}
.rain-section__subtitle {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--rain-text-muted);
  max-width: 70ch;
}

/* ── Locsearch v2: card with icon medallion on the left ── */
.rain-locsearch-card--v2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 1.6rem;
  margin: 1.5rem .5rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--rain-border);
  border-radius: 1.25rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  position: relative;
  /* No overflow:hidden here — the autocomplete <ul> is absolutely
     positioned inside this card and must be allowed to extend below
     the card edge while the user types. The decorative top ribbon
     handles its own corner-rounding via the ::before border-radius. */
}
@media (min-width: 768px) {
  .rain-locsearch-card--v2 { margin-left: .75rem; margin-right: .75rem; }
}
@media (max-width: 540px) {
  .rain-locsearch-card--v2 { grid-template-columns: 1fr; gap: .75rem; padding: 1.15rem 1.15rem; }
}
.rain-locsearch-card--v2::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%);
  border-top-left-radius: 1.25rem;
  border-top-right-radius: 1.25rem;
}
.rain-locsearch-card--v2 .rain-locsearch__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  color: #0c4a6e;
  border: 1px solid rgba(14, 165, 233, .25);
  flex-shrink: 0;
}
.rain-locsearch-card--v2 .rain-locsearch__content {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
}
.rain-locsearch-card--v2 .rain-locsearch__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rain-primary);
  margin: 0 0 .25rem;
  letter-spacing: -.005em;
}
.rain-locsearch-card--v2 .rain-locsearch__subtitle {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--rain-text-muted);
}

/* ── KPI card body (icon + text column inside the card) ── */
.rain-kpi__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* ── Trust badges (small row beneath the map) ── */
.rain-trust {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 1rem 1.5rem 1.5rem;
  padding: 0;
}
.rain-trust__badge {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem .85rem;
  background: #ffffff;
  border: 1px solid var(--rain-border);
  border-radius: .75rem;
  color: var(--rain-text);
}
.rain-trust__badge > i {
  font-size: 1.1rem;
  color: #1d4ed8;
  flex-shrink: 0;
  margin-top: .1rem;
}
.rain-trust__title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rain-text-faint);
  line-height: 1.2;
}
.rain-trust__sub {
  font-size: .88rem;
  font-weight: 600;
  color: var(--rain-primary);
  line-height: 1.35;
  margin-top: .15rem;
}
@media (max-width: 540px) {
  .rain-trust { margin: 1rem .85rem; }
}