/*
 * iAlert Forecast centerpiece styles. v2 (photo-backed pass).
 *
 * Cohesion rules (binding across every section):
 *   - Single Raleway weight ladder (200-800).
 *   - Single eyebrow recipe (red rule + 11px / 0.22em uppercase).
 *   - Single card border treatment (square corners, hairline border, no shadows).
 *   - Single CTA recipe (--ialert-red fill, uppercase 13px / 0.16em).
 *   - 1140px container.
 *
 * Imagery (per 2026-05-08 brief):
 *   - Hero backdrop: photographic sky per location (assets/photos/hero-*.jpg).
 *     Clear-cumulus default, Arizona thunderstorm for Phoenix-with-alerts.
 *     Sits behind a navy linear-gradient scrim so the temp and headings
 *     hold contrast at AA without flattening the photo.
 *   - GOES-19 GeoColor sits in assets/photos/ unused. A satband prototype
 *     was pulled in review for breaking the data spine.
 *
 * Layout rhythm: navy(photo) -> cream -> white -> [red] -> white -> cream
 * -> navy. No two adjacent sections share grid shape.
 *
 * AI-tells disallow check (plan/ai-design-tells.md):
 *   - No indigo/purple, no blue-purple gradients. Scrim is straight navy
 *     (rgba on #0F1626) with no purple shift.
 *   - Type contrast = Raleway weight ladder only (no secondary mono face).
 *   - No 3-card or 4-card equal-weight grid below the hero.
 *   - No glassmorphism (no backdrop-filter blur), no fade-in-on-scroll,
 *     no max-w-7xl-everywhere shape.
 *   - 5-day card row is 5 cards (not 3 or 4); subscriptions are 2x2.
 */

.ialert-cp {
  --cp-content-w: 1140px;
  --cp-pad-y: 48px;
  --cp-pad-y-tight: 36px;
  --cp-pad-x: 24px;
  --cp-rule: rgba(23, 26, 31, 0.14);
  --cp-rule-soft: rgba(23, 26, 31, 0.08);
  --cp-rule-on-dark: rgba(244, 241, 234, 0.18);
  --cp-rule-on-dark-soft: rgba(244, 241, 234, 0.10);
  --cp-light-surface: #faf8f3;
  --cp-cream-surface: #f3efe5;
  font-family: var(--ialert-font-display);
  color: var(--ialert-text);
  background: var(--ialert-bg);
}
.ialert-cp *,
.ialert-cp *::before,
.ialert-cp *::after { box-sizing: border-box; }

.ialert-cp__inner {
  max-width: var(--cp-content-w);
  margin: 0 auto;
  padding: 0 var(--cp-pad-x);
}

/* SVG weather glyphs (proprietary, drawn in centerpiece.php <defs>). */
.wx-icon { width: 22px; height: 22px; flex-shrink: 0; }
.wx-icon svg { width: 100%; height: 100%; display: block; }

/* Universal eyebrow. */
.ialert-cp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ialert-text-muted);
  margin: 0 0 22px;
}
.ialert-cp__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ialert-red);
  flex-shrink: 0;
}
.ialert-cp__eyebrow--on-dark { color: rgba(244, 241, 234, 0.72); }
.ialert-cp__eyebrow--on-dark::before { background: var(--ialert-red); }
.ialert-cp__eyebrow--on-red { color: rgba(255, 240, 240, 0.85); }
.ialert-cp__eyebrow--on-red::before { background: rgba(255, 240, 240, 0.85); }

/* Shared CTA recipe. */
.ialert-cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ialert-red);
  color: var(--ialert-on-dark);
  font-family: var(--ialert-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 16px 28px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background 140ms;
}
.ialert-cp-btn:hover { background: #a91823; }
.ialert-cp-btn--ghost-on-dark {
  background: transparent;
  color: var(--ialert-on-dark);
  border: 1px solid rgba(244, 241, 234, 0.5);
}
.ialert-cp-btn--ghost-on-dark:hover {
  background: var(--ialert-on-dark);
  color: var(--ialert-navy);
}

/* Section heads (shared). */
.ialert-cp__sec-head { margin: 0 0 22px; }
.ialert-cp__sec-h {
  font-family: var(--ialert-font-display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ialert-text);
  margin: 0;
}
.ialert-cp__sec-h strong { font-weight: 700; }
.ialert-cp__sec-h--on-dark { color: var(--ialert-on-dark); }
.ialert-cp__sec-sub {
  margin: 12px 0 0;
  color: var(--ialert-text-muted);
  font-size: 15px;
  max-width: 56ch;
}
.ialert-cp__sec-head--inline { display: block; }
.ialert-cp__sec-head--with-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ialert-cp__sec-link {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ialert-red);
  text-decoration: none;
  border-bottom: 1px solid var(--ialert-red);
  padding-bottom: 4px;
}
.ialert-cp__sec-link:hover { color: #a91823; border-bottom-color: #a91823; }

/* =========================================================================
   1. Forecast Hero — photo-backed, on-dark. Photographic sky/storm backdrop
      per location, navy scrim for legibility, asymmetric grid kept.
      Left: location + alert pill. Right: aligned-right vital snapshot.
   ========================================================================= */
.ialert-cp__hero {
  position: relative;
  isolation: isolate;
  padding: 64px 0 56px;
  color: var(--ialert-on-dark);
  overflow: hidden;
}
.ialert-cp__hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ialert-cp__hero--emerald-isle .ialert-cp__hero-bg {
  background-image: url('assets/photos/hero-clear-cumulus.jpg');
  background-position: center 60%;
}
.ialert-cp__hero--phoenix .ialert-cp__hero-bg {
  background-image: url('assets/photos/hero-storm-arizona.jpg');
  background-position: center 55%;
}
.ialert-cp__hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(15, 22, 38, 0.78) 0%,
      rgba(15, 22, 38, 0.62) 45%,
      rgba(15, 22, 38, 0.85) 100%
    );
}
.ialert-cp__hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 56px;
  align-items: end;
  position: relative;
}
.ialert-cp__hero-h1 {
  font-family: var(--ialert-font-display);
  font-weight: 300;
  font-size: clamp(44px, 5.2vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0 0 16px;
  color: var(--ialert-on-dark);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.ialert-cp__hero-h1 strong { font-weight: 700; }
.ialert-cp__hero-sub {
  margin: 0 0 22px;
  font-size: 16px;
  color: rgba(244, 241, 234, 0.82);
  max-width: 48ch;
  line-height: 1.55;
}

/* Alert pill — IN-hero per project rule, on-dark variant. */
.ialert-cp__alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid rgba(244, 241, 234, 0.45);
  font-family: var(--ialert-font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(15, 22, 38, 0.55);
  color: var(--ialert-on-dark);
  text-decoration: none;
}
.ialert-cp__alert-pill--clear {
  color: #c8efd1;
  border-color: rgba(140, 220, 158, 0.55);
  background: rgba(28, 70, 42, 0.55);
}
.ialert-cp__alert-pill--clear .ialert-cp__alert-pill-check { color: #c8efd1; font-size: 13px; }
.ialert-cp__alert-pill--active {
  color: #fff;
  background: var(--ialert-red);
  border-color: var(--ialert-red);
  transition: background 140ms;
}
.ialert-cp__alert-pill--active:hover { background: #a91823; }
.ialert-cp__alert-pill-dot {
  width: 8px; height: 8px; background: #fff; display: inline-block;
  animation: pill-pulse 1.6s ease-in-out infinite;
}
@keyframes pill-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.ialert-cp__alert-pill-arrow { margin-left: 4px; }

/* Hero CTA row: alert pill (primary) + services pill (ghost). Wraps on
   narrow widths so the services CTA tucks under the pill instead of
   pushing the temp snapshot. */
.ialert-cp__hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Services pill — ghost on-dark, height-matched to the alert pill so the
   row reads as a paired set, not two unrelated chips. */
.ialert-cp__service-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(244, 241, 234, 0.55);
  font-family: var(--ialert-font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(15, 22, 38, 0.35);
  color: var(--ialert-on-dark);
  text-decoration: none;
  transition: background 140ms, border-color 140ms;
}
.ialert-cp__service-pill:hover {
  background: rgba(244, 241, 234, 0.92);
  border-color: rgba(244, 241, 234, 0.92);
  color: var(--ialert-navy);
}
.ialert-cp__service-pill-arrow { margin-left: 2px; }

/* Hero right (snapshot). */
.ialert-cp__hero-right { text-align: right; }
.ialert-cp__hero-station {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.72);
}
.ialert-cp__hero-station-name { font-weight: 700; color: #ffd6d6; letter-spacing: 0.18em; }
.ialert-cp__hero-station-id { color: rgba(244, 241, 234, 0.6); margin-left: 4px; }
.ialert-cp__hero-temp {
  margin: 0;
  font-family: var(--ialert-font-display);
  font-weight: 200;
  font-size: clamp(96px, 10.5vw, 144px);
  letter-spacing: -0.05em;
  line-height: 0.92;
  color: var(--ialert-on-dark);
  display: inline-flex;
  align-items: flex-start;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
  /* Raleway defaults to old-style figures: 4/7/9 drop below the baseline
   * of 2/8. Force lining + tabular numerals so the digits all sit on a
   * shared baseline and read as professional numerics. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
.ialert-cp__hero-temp-num { display: inline-block; }
.ialert-cp__hero-temp-unit {
  font-size: 36px;
  letter-spacing: -0.01em;
  font-weight: 300;
  color: rgba(244, 241, 234, 0.78);
  margin-top: 18px;
  margin-left: 4px;
}
.ialert-cp__hero-cond {
  margin: 6px 0 6px;
  font-size: 22px;
  font-weight: 500;
  color: var(--ialert-on-dark);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.ialert-cp__hero-cond .wx-icon { color: #ffd6d6; width: 28px; height: 28px; }
.ialert-cp__hero-time {
  margin: 0;
  font-size: 13px;
  color: rgba(244, 241, 234, 0.62);
  font-family: var(--ialert-font-display);
  letter-spacing: 0.04em;
}

/* =========================================================================
   2. Quick stats — cream band sitting under the photo hero. Heavier numbers
      so the data row stops feeling dropped after the hero pop. Single
      horizontal row of 7 cells with vertical hairline dividers.
   ========================================================================= */
.ialert-cp__quickstats {
  background: var(--cp-light-surface);
  padding: 32px 0 30px;
  border-bottom: 1px solid var(--cp-rule);
}
.ialert-cp__quickstats-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ialert-cp__quickstat {
  padding: 4px 22px;
  border-left: 1px solid var(--cp-rule-soft);
}
.ialert-cp__quickstat:first-child { border-left: 0; padding-left: 0; }
.ialert-cp__quickstat-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ialert-red);
  margin-bottom: 10px;
  font-weight: 700;
}
.ialert-cp__quickstat-value {
  display: block;
  font-family: var(--ialert-font-display);
  font-size: 30px;
  font-weight: 400;
  color: var(--ialert-navy);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
.ialert-cp__quickstat-unit {
  font-size: 13px;
  color: var(--ialert-text-muted);
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0;
}

/* =========================================================================
   3. 5-Day Forecast — white. 5 cards in a row, hairline dividers between,
      no card backgrounds (so it does not read as another card grid).
   ========================================================================= */
.ialert-cp__fiveday {
  background: var(--ialert-bg);
  padding: 40px 0 48px;
}
.ialert-cp__fiveday--beige.ialert-cp__fiveday { background: #f3efe5; }
.ialert-cp__alertsum--beige.ialert-cp__alertsum { background: #f3efe5; }
.ialert-cp__fiveday-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule);
}
.ialert-cp__day {
  position: relative;
  padding: 24px 22px 22px;
  border-left: 1px solid var(--cp-rule-soft);
}
.ialert-cp__day:first-child { border-left: 0; padding-left: 0; }

/* Photo-tile variant. Each day becomes a portrait card with a 1920px
 * Unsplash background photograph; day name, hi/lo and condition text
 * sit on top with a dark gradient veil for legibility. Photos chosen
 * by cp_wx_icon_id bucket; the Emerald Isle demo uses three sources
 * (sct = partly sunny, bkn = mostly cloudy, tsra = thunderstorms). */
.ialert-cp__day--photo {
  padding: 0;
  border-left: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
.ialert-cp__day-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ialert-cp__day-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 26%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.88) 100%);
}
.ialert-cp__day-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 22px;
}
.ialert-cp__day-name {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ialert-red);
}
.ialert-cp__day--photo .ialert-cp__day-name {
  margin: 0 0 auto;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.ialert-cp__day--photo .wx-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.ialert-cp__day--photo .ialert-cp__day-temps { margin-bottom: 6px; }
.ialert-cp__day--photo .ialert-cp__day-hi {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.ialert-cp__day--photo .ialert-cp__day-sep { color: rgba(255,255,255,.4); }
.ialert-cp__day--photo .ialert-cp__day-lo {
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.ialert-cp__day--photo .ialert-cp__day-cond {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.ialert-cp__day--photo .ialert-cp__day-cond--night {
  color: rgba(255,255,255,.78);
}
.ialert-cp__day--photo .ialert-cp__day-detail {
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 10px;
}
.ialert-cp__day--photo .ialert-cp__day-detail > summary { color: rgba(255,255,255,.7); }
.ialert-cp__day--photo .ialert-cp__day-detail[open] > summary { color: #fff; }
.ialert-cp__day--photo .ialert-cp__day-detail-period { color: rgba(255,255,255,.85); }
.ialert-cp__day--photo .ialert-cp__day-detail-text {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ialert-cp__day-temps {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.ialert-cp__day-hi {
  font-family: var(--ialert-font-display);
  font-weight: 300;
  font-size: 52px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ialert-navy);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}
.ialert-cp__day-sep { color: var(--cp-rule); font-weight: 200; font-size: 32px; }
.ialert-cp__day-lo {
  font-family: var(--ialert-font-display);
  font-weight: 300;
  font-size: 26px;
  color: var(--ialert-text-muted);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}
.ialert-cp__day-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  color: var(--ialert-red);
}
.ialert-cp__day-cond {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--ialert-text);
  line-height: 1.4;
}
.ialert-cp__day-cond--night {
  color: var(--ialert-text-muted);
  font-size: 13px;
  margin-top: 6px;
}
.ialert-cp__day-detail {
  margin-top: 14px;
  border-top: 1px solid var(--cp-rule-soft);
  padding-top: 10px;
}
.ialert-cp__day-detail > summary {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ialert-text-muted);
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}
.ialert-cp__day-detail > summary::-webkit-details-marker { display: none; }
.ialert-cp__day-detail > summary::after {
  content: " +";
  font-family: var(--ialert-font-display);
  letter-spacing: 0;
}
.ialert-cp__day-detail[open] > summary::after { content: " −"; }
.ialert-cp__day-detail[open] > summary { color: var(--ialert-red); }
.ialert-cp__day-detail-period {
  margin: 10px 0 4px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ialert-red);
}
.ialert-cp__day-detail-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ialert-text);
}
.ialert-cp__fiveday-source {
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ialert-text-muted);
}

/* =========================================================================
   4. Detailed Forecast — cream, sticky day-anchor sidebar + period list.
      ToC pattern lifted from baseball-reference + mayoclinic.
   ========================================================================= */
.ialert-cp__detailed {
  background: var(--cp-cream-surface);
  padding: var(--cp-pad-y) 0;
}
.ialert-cp__detailed-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}
.ialert-cp__detailed-toc {
  position: sticky;
  top: 24px;
  align-self: start;
  border-right: 1px solid var(--cp-rule);
  padding-right: 28px;
}
.ialert-cp__toc-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.ialert-cp__toc-list li { margin: 0; }
.ialert-cp__toc-link {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  text-decoration: none;
  color: var(--ialert-text);
  border-top: 1px solid var(--cp-rule-soft);
}
.ialert-cp__toc-list li:first-child .ialert-cp__toc-link { border-top: 0; }
.ialert-cp__toc-link:hover { color: var(--ialert-red); }
.ialert-cp__toc-link.is-active { color: var(--ialert-red); font-weight: 700; }
.ialert-cp__toc-source {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ialert-text-muted);
  margin: 0;
  line-height: 1.5;
}
.ialert-cp__detailed-body { padding-top: 0; }
.ialert-cp__periods {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
}
.ialert-cp__period {
  padding: 16px 0;
  border-top: 1px solid var(--cp-rule-soft);
}
.ialert-cp__period:first-child,
.ialert-cp__period:nth-child(2) { border-top: 0; padding-top: 0; }
.ialert-cp__period-name {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ialert-red);
  font-weight: 700;
}
.ialert-cp__period-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ialert-text);
  max-width: 56ch;
}

/* =========================================================================
   5. Active alert summary — cream surface, white cards with red left-bar.
      Lifted from the legacy ialert.com pattern: restrained, professional,
      doesn't break the cream/white rhythm of the data spine. Conditional
      render (only when $alerts_present).
   ========================================================================= */
.ialert-cp__alertsum {
  background: var(--ialert-bg);
  padding: var(--cp-pad-y-tight) 0;
  border-top: 1px solid var(--cp-rule-soft);
  border-bottom: 1px solid var(--cp-rule-soft);
  /* Force lining numerals across the whole alert section — meta lines
   * carry dates/times and the summary text often carries temperatures.
   * Raleway's default old-style figures drop 4/7/9 below the baseline. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}
.ialert-cp__alertsum-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(200, 32, 43, 0.22);
  border-bottom: 1px solid rgba(200, 32, 43, 0.22);
  background: #fff;
}
.ialert-cp__alertsum-item {
  border-bottom: 1px solid rgba(200, 32, 43, 0.12);
}
.ialert-cp__alertsum-item:last-child { border-bottom: 0; }

/* Compact row — single line of severity + preview + meta with a thin
 * red left-bar. <details> drives expand-in-place. */
.ialert-cp__alertsum-row { display: block; }
.ialert-cp__alertsum-row[open] { background: #fef6f6; }

.ialert-cp__alertsum-summary-row {
  display: grid;
  grid-template-columns: 4px minmax(160px, max-content) 1fr auto 18px;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 0;
  list-style: none;
  cursor: pointer;
  position: relative;
  outline: none;
}
.ialert-cp__alertsum-summary-row::-webkit-details-marker { display: none; }
.ialert-cp__alertsum-summary-row:hover { background: #fdf0f0; }
.ialert-cp__alertsum-summary-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ialert-red); }

.ialert-cp__alertsum-bar {
  background: var(--ialert-red);
  align-self: stretch;
  width: 4px;
  display: block;
}
.ialert-cp__alertsum-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ialert-red);
  white-space: nowrap;
}
.ialert-cp__alertsum-preview {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ialert-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ialert-cp__alertsum-meta {
  font-family: var(--ialert-font-display);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ialert-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ialert-cp__alertsum-chev {
  font-size: 18px;
  color: var(--ialert-red);
  font-weight: 700;
  transform: rotate(0deg);
  transition: transform 140ms ease;
  line-height: 1;
  text-align: center;
}
.ialert-cp__alertsum-row[open] .ialert-cp__alertsum-chev { transform: rotate(90deg); }

/* Per-severity row coloring. Row background picks up the same shade as
   the hero chip the user clicked from (matching alpha exactly). The
   thin 4px bar at the row edge stays the saturated severity color so
   it reads as a quick visual signal. Label / preview / chev colors
   remain neutral (default red on white) so the words stay legible. */
.ialert-cp__alertsum-row--warning  { background: rgba(200, 32, 43, 0.22); }
.ialert-cp__alertsum-row--warning  .ialert-cp__alertsum-bar { background: #c8202b; }

.ialert-cp__alertsum-row--watch    { background: rgba(229, 138, 28, 0.22); }
.ialert-cp__alertsum-row--watch    .ialert-cp__alertsum-bar { background: #e58a1c; }

.ialert-cp__alertsum-row--advisory { background: rgba(214, 179, 46, 0.20); }
.ialert-cp__alertsum-row--advisory .ialert-cp__alertsum-bar { background: #d6b32e; }

.ialert-cp__alertsum-row--alert    { background: rgba(155, 176, 224, 0.18); }
.ialert-cp__alertsum-row--alert    .ialert-cp__alertsum-bar { background: #9bb0e0; }

/* Zero-alert "All Clear" row. Same grid chrome as a real alert row so the
   slot height stays constant across locations. Color palette matches the
   hero --clear pill (soft green, rgba 143/219/162) so the at-a-glance and
   verbose states read as the same status, not two different signals. Not
   interactive — no <details>, no hover state, no expand. */
.ialert-cp__alertsum-row--clear { background: rgba(143, 219, 162, 0.18); }
.ialert-cp__alertsum-row--clear .ialert-cp__alertsum-bar { background: #4ba56a; }
.ialert-cp__alertsum-summary-row--clear { cursor: default; padding-right: 18px; }
.ialert-cp__alertsum-summary-row--clear:hover { background: transparent; }
.ialert-cp__alertsum-row--clear .ialert-cp__alertsum-label { color: #2f7a47; }
.ialert-cp__alertsum-row--clear .ialert-cp__alertsum-preview { color: var(--ialert-text); }

/* Hold the per-severity tint when the row is opened or hovered. Generic
   .ialert-cp__alertsum-row[open] and ...summary-row:hover above would
   wash the tint to neutral pink; these overrides keep the bucket color
   visible across all states. */
.ialert-cp__alertsum-row--warning[open],
.ialert-cp__alertsum-row--warning .ialert-cp__alertsum-summary-row:hover {
  background: rgba(200, 32, 43, 0.30);
}
.ialert-cp__alertsum-row--watch[open],
.ialert-cp__alertsum-row--watch .ialert-cp__alertsum-summary-row:hover {
  background: rgba(229, 138, 28, 0.30);
}
.ialert-cp__alertsum-row--advisory[open],
.ialert-cp__alertsum-row--advisory .ialert-cp__alertsum-summary-row:hover {
  background: rgba(214, 179, 46, 0.28);
}
.ialert-cp__alertsum-row--alert[open],
.ialert-cp__alertsum-row--alert .ialert-cp__alertsum-summary-row:hover {
  background: rgba(155, 176, 224, 0.26);
}

.ialert-cp__alertsum-detail {
  padding: 4px 22px 18px 22px;
  border-top: 1px solid rgba(200, 32, 43, 0.10);
}
.ialert-cp__alertsum-full {
  margin: 12px 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ialert-text);
  max-width: 78ch;
}
.ialert-cp__alertsum-source {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ialert-text-muted);
}

.ialert-cp__alertsum-overflow {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.ialert-cp__alertsum-overflow a {
  color: var(--ialert-red);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ialert-red);
  padding-bottom: 2px;
}
.ialert-cp__alertsum-overflow a:hover { color: #a91823; border-bottom-color: #a91823; }

/* "View N more alerts" expander. Sits below the top alert and, when [open],
 * reveals the remaining rows ABOVE itself. Styled as a quiet disclosure row
 * so it reads as a continuation of the list, not a CTA. */
.ialert-cp__alertsum-more {
  margin-top: -1px; /* fuse the toggle border with the list's bottom border */
  /* When [open], extras render ABOVE the summary toggle. <details> requires
     <summary> to be the first DOM child, so column-reverse handles the
     visual flip without breaking semantics. The toggle drops down with the
     expanded list pushing up against the top alerts list above. */
  display: flex;
  flex-direction: column-reverse;
}
.ialert-cp__alertsum-more[open] .ialert-cp__alertsum-more-chev {
  /* Points up when open — visual cue that the list collapses upward into
     the toggle, mirroring how it dropped down out of it. */
  transform: rotate(-90deg);
}

/* Closed/open label swap. Avoids JS by toggling display off the [open]
   attribute. Both labels stay in the DOM; screen readers announce the
   visible one. */
.ialert-cp__alertsum-more-toggle-text--open { display: none; }
.ialert-cp__alertsum-more[open] .ialert-cp__alertsum-more-toggle-text--closed { display: none; }
.ialert-cp__alertsum-more[open] .ialert-cp__alertsum-more-toggle-text--open { display: inline; }
.ialert-cp__alertsum-more-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid rgba(200, 32, 43, 0.22);
  border-top: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ialert-red);
  outline: none;
}
.ialert-cp__alertsum-more-toggle::-webkit-details-marker { display: none; }
.ialert-cp__alertsum-more-toggle:hover { background: #fdf0f0; }
.ialert-cp__alertsum-more-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ialert-red);
}
.ialert-cp__alertsum-more-chev {
  font-size: 18px;
  line-height: 1;
  transition: transform 140ms ease;
}
.ialert-cp__alertsum-list--more {
  border-top: 0;
}

@media (max-width: 920px) {
  .ialert-cp__alertsum-summary-row {
    grid-template-columns: 4px 1fr 18px;
    grid-template-rows: auto auto;
    row-gap: 6px;
    padding: 12px 16px 12px 0;
  }
  .ialert-cp__alertsum-bar { grid-row: 1 / span 2; }
  .ialert-cp__alertsum-label { grid-column: 2; grid-row: 1; }
  .ialert-cp__alertsum-preview {
    grid-column: 2;
    grid-row: 2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .ialert-cp__alertsum-meta {
    grid-column: 2;
    grid-row: 3;
    white-space: normal;
  }
  .ialert-cp__alertsum-chev { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}

/* =========================================================================
   5a. In-hero severity chips (2026-05-10 v2 reset).
       Quiet inline row: tiny severity dot + count + label. No border, no
       badge, no card. Reads as editorial metadata, not a button bar.
       Each item deep-links to /analysis.php?tab=alerts&severity=<key>.
       No body alert section on the forecast page — verbose NWS text
       lives on the analysis page only.
   ========================================================================= */
.ialert-cp__hero-severitychips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px 0;
  font-family: var(--ialert-font-display);
}
.ialert-cp__hero-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 13px 7px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, 0.22);
  background: rgba(244, 241, 234, 0.06);
  color: var(--ialert-on-dark);
  text-decoration: none;
  transition: background 140ms, border-color 140ms;
}
.ialert-cp__hero-chip:hover {
  background: rgba(244, 241, 234, 0.10);
}
.ialert-cp__hero-chip:focus-visible {
  outline: 2px solid rgba(244, 241, 234, 0.9);
  outline-offset: 3px;
}
.ialert-cp__hero-chip-count {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  line-height: 1;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
}
.ialert-cp__hero-chip-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.88);
  line-height: 1;
}

/* Severity-tinted pill backgrounds. The pill color carries the severity
   signal; no separate dot or badge. Border picks up the same hue at a
   stronger alpha so the chip reads cleanly on the navy hero scrim. */
.ialert-cp__hero-chip--warning {
  background: rgba(200, 32, 43, 0.22);
  border-color: rgba(200, 32, 43, 0.55);
}
.ialert-cp__hero-chip--warning:hover  { background: rgba(200, 32, 43, 0.34); }

.ialert-cp__hero-chip--watch {
  background: rgba(229, 138, 28, 0.22);
  border-color: rgba(229, 138, 28, 0.55);
}
.ialert-cp__hero-chip--watch:hover    { background: rgba(229, 138, 28, 0.34); }

.ialert-cp__hero-chip--advisory {
  background: rgba(214, 179, 46, 0.20);
  border-color: rgba(214, 179, 46, 0.50);
}
.ialert-cp__hero-chip--advisory:hover { background: rgba(214, 179, 46, 0.32); }

.ialert-cp__hero-chip--alert {
  background: rgba(155, 176, 224, 0.18);
  border-color: rgba(155, 176, 224, 0.45);
}
.ialert-cp__hero-chip--alert:hover    { background: rgba(155, 176, 224, 0.30); }

.ialert-cp__hero-chip--clear {
  background: rgba(143, 219, 162, 0.16);
  border-color: rgba(143, 219, 162, 0.42);
  color: #c8efd1;
  cursor: default;
}
.ialert-cp__hero-chip--clear:hover { background: rgba(143, 219, 162, 0.16); }
.ialert-cp__hero-chip--clear .ialert-cp__hero-chip-label {
  color: rgba(200, 239, 209, 0.92);
}

@media (max-width: 720px) {
  .ialert-cp__hero-chip { padding: 5px 11px 6px; }
  .ialert-cp__hero-chip-label { letter-spacing: 0.10em; }
}

/* =========================================================================
   5b. Active alert band — red on dark red.
       (Section preserved but unused; replaced on-page by alertsum above.)
   ========================================================================= */
.ialert-cp__alertband {
  background: var(--ialert-red);
  color: #ffffff;
  padding: 40px 0;
}
.ialert-cp__alertband-h {
  font-weight: 300;
  font-size: 38px;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #fff;
}
.ialert-cp__alertband-summary {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.5;
  max-width: 70ch;
  color: rgba(255, 240, 240, 0.92);
}
.ialert-cp__alertband-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 28px;
  border-top: 1px solid rgba(255, 240, 240, 0.28);
}
.ialert-cp__alertband-meta > div {
  flex: 1 1 220px;
  padding: 16px 24px 16px 0;
  border-right: 1px solid rgba(255, 240, 240, 0.28);
}
.ialert-cp__alertband-meta > div:last-child { border-right: 0; }
.ialert-cp__alertband-meta dt {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 240, 240, 0.7);
  margin-bottom: 4px;
}
.ialert-cp__alertband-meta dd {
  margin: 0;
  font-size: 14px;
  color: #fff;
  font-family: var(--ialert-font-display);
}
.ialert-cp__alertband-cta {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,240,240,0.6);
  padding-bottom: 4px;
}
.ialert-cp__alertband-cta:hover { border-bottom-color: #fff; }

/* Secondary alerts (compact rows, inside the lead band). */
.ialert-cp__alertband-others {
  list-style: none;
  margin: 32px 0 28px;
  padding: 0;
  border-top: 1px solid rgba(255, 240, 240, 0.28);
}
.ialert-cp__alertband-other {
  padding: 20px 0 18px;
  border-bottom: 1px solid rgba(255, 240, 240, 0.18);
}
.ialert-cp__alertband-other:last-child { border-bottom: 0; }
.ialert-cp__alertband-other-label {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.ialert-cp__alertband-other-summary {
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(255, 240, 240, 0.88);
  line-height: 1.55;
  max-width: 70ch;
}
.ialert-cp__alertband-other-meta {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 240, 240, 0.68);
  font-weight: 700;
}

/* =========================================================================
   6. Regional radar — navy, single panel (copy left, mock right).
   ========================================================================= */
.ialert-cp__radar {
  background: var(--ialert-navy);
  color: var(--ialert-on-dark);
  padding: var(--cp-pad-y) 0;
}
.ialert-cp__radar-panel {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
}
.ialert-cp__radar-h {
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--ialert-on-dark);
}
.ialert-cp__radar-sub {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244, 241, 234, 0.7);
  max-width: 50ch;
}
.ialert-cp__radar-frame {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ialert-cp__radar-mock {
  position: relative;
  aspect-ratio: 16 / 8;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(244,241,234,0.05) 0%, transparent 60%),
    var(--ialert-navy-deep);
  border: 1px solid var(--cp-rule-on-dark);
  overflow: hidden;
}
.ialert-cp__radar-mock-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(244,241,234,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,241,234,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ialert-cp__radar-mock-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* NEXRAD reflectivity colors. Discrete fills (no blur) read closer to a
 * real product than the previous gaussian-blur approach. */
.ialert-cp__radar-cell {
  position: absolute;
  opacity: 0.92;
}
.ialert-cp__radar-cell--g1 { background: #5fb35a; }   /* ~15-25 dBZ */
.ialert-cp__radar-cell--g2 { background: #3a8c3f; }   /* ~25-35 dBZ */
.ialert-cp__radar-cell--y1 { background: #d8c33c; }   /* ~35-45 dBZ */
.ialert-cp__radar-cell--r1 { background: #c8202b; }   /* ~50-60 dBZ */

/* Station crosshair with hairline label below. */
.ialert-cp__radar-cross {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--ialert-on-dark);
  background: transparent;
}
.ialert-cp__radar-cross::before,
.ialert-cp__radar-cross::after {
  content: ""; position: absolute; background: var(--ialert-on-dark);
}
.ialert-cp__radar-cross::before {
  left: 50%; top: -10px; bottom: -10px; width: 1px; transform: translateX(-50%);
}
.ialert-cp__radar-cross::after {
  top: 50%; left: -10px; right: -10px; height: 1px; transform: translateY(-50%);
}
.ialert-cp__radar-cross-label {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ialert-font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ialert-on-dark);
  white-space: nowrap;
  background: rgba(10, 12, 15, 0.72);
  padding: 2px 6px;
}

/* dBZ scale legend, bottom-right of the radar frame. */
.ialert-cp__radar-scale {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ialert-font-display);
  font-size: 10px;
  color: var(--ialert-on-dark);
  background: rgba(10, 12, 15, 0.72);
  padding: 5px 8px;
  border: 1px solid var(--cp-rule-on-dark);
}
.ialert-cp__radar-scale-label {
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(244, 241, 234, 0.7);
  margin-right: 2px;
}
.ialert-cp__radar-scale-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 4px;
  font-weight: 700;
  color: var(--ialert-navy-deep);
}
.ialert-cp__radar-scale-tick--g1 { background: #5fb35a; }
.ialert-cp__radar-scale-tick--g2 { background: #3a8c3f; color: #fff; }
.ialert-cp__radar-scale-tick--y1 { background: #d8c33c; }
.ialert-cp__radar-scale-tick--r1 { background: #c8202b; color: #fff; }

.ialert-cp__radar-caption {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(244, 241, 234, 0.55);
  text-align: right;
}

/* =========================================================================
   7. Observation history — white, dense table. Tiered disclosure via
      "View all 25 hours" link in header. Monospace timestamps + values.
      No zebra striping (avoids spreadsheet read).
   ========================================================================= */
.ialert-cp__obs {
  background: var(--ialert-bg);
  padding: var(--cp-pad-y) 0;
}
.ialert-cp__obs-expand {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ialert-red);
  text-decoration: none;
  border-bottom: 1px solid var(--ialert-red);
  padding-bottom: 4px;
}
.ialert-cp__obs-expand:hover { color: #a91823; border-bottom-color: #a91823; }
.ialert-cp__obs-tablewrap {
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule);
  overflow-x: auto;
}
.ialert-cp__obs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ialert-font-display);
  font-size: 13px;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
.ialert-cp__obs-table thead th {
  font-family: var(--ialert-font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ialert-text-muted);
  text-align: left;
  padding: 14px 12px;
  background: var(--cp-light-surface);
  border-bottom: 1px solid var(--cp-rule);
  white-space: nowrap;
}
.ialert-cp__obs-table tbody td,
.ialert-cp__obs-table tbody th {
  padding: 8px 12px;
  border-bottom: 1px solid var(--cp-rule-soft);
  color: var(--ialert-text);
  text-align: left;
  font-weight: 400;
  vertical-align: baseline;
}
.ialert-cp__obs-table tbody tr:last-child td,
.ialert-cp__obs-table tbody tr:last-child th { border-bottom: 0; }
.ialert-cp__obs-table tbody tr:hover td,
.ialert-cp__obs-table tbody tr:hover th { background: var(--cp-light-surface); }
.ialert-cp__obs-time {
  font-family: var(--ialert-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ialert-red);
  white-space: nowrap;
}

/* =========================================================================
   8. Regional observations — cream. 1 lead block (large) + 5 inline rows
      (horizontal-strip with hairline dividers, lifted from landing-page's
      "Our Network" pattern).
   ========================================================================= */
.ialert-cp__regional {
  background: var(--cp-light-surface);
  padding: var(--cp-pad-y) 0;
}
.ialert-cp__regional-lead {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 16px 56px;
  align-items: end;
  padding: 20px 0;
  border-top: 1px solid var(--cp-rule);
  border-bottom: 1px solid var(--cp-rule-soft);
  margin-bottom: 0;
}
.ialert-cp__regional-lead-eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ialert-text-muted);
}
.ialert-cp__regional-lead-name {
  margin: 0;
  font-family: var(--ialert-font-display);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ialert-text);
}
.ialert-cp__regional-lead-id {
  margin: 0;
  font-family: var(--ialert-font-display);
  font-size: 13px;
  color: var(--ialert-text-muted);
}
.ialert-cp__regional-lead-temp {
  grid-column: 3;
  grid-row: 2 / 4;
  justify-self: end;
  align-self: center;
  margin: 0;
  font-family: var(--ialert-font-display);
  font-weight: 300;
  font-size: 56px;
  letter-spacing: -0.025em;
  color: var(--ialert-red);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
.ialert-cp__regional-lead-cond {
  margin: 0;
  font-size: 14px;
  color: var(--ialert-text);
}

.ialert-cp__regional-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--cp-rule);
}
.ialert-cp__regional-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1.3fr 0.6fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--cp-rule-soft);
}
.ialert-cp__regional-item-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.ialert-cp__regional-item-station {
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ialert-text);
}
.ialert-cp__regional-item-id {
  font-family: var(--ialert-font-display);
  font-size: 12px;
  color: var(--ialert-text-muted);
}
.ialert-cp__regional-item-distance {
  font-family: var(--ialert-font-display);
  font-size: 12px;
  color: var(--ialert-text-muted);
}
.ialert-cp__regional-item-cond {
  font-size: 14px;
  color: var(--ialert-text);
}
.ialert-cp__regional-item-temp {
  font-family: var(--ialert-font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ialert-red);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
/* =========================================================================
   9b. Alert subscriptions — navy, 2x2.
       (Section preserved but unused; replaced on-page by Weather Analysis.)
   ========================================================================= */
.ialert-cp__subs {
  background: var(--ialert-navy);
  color: var(--ialert-on-dark);
  padding: var(--cp-pad-y) 0;
}
.ialert-cp__subs-grid {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--cp-rule-on-dark);
  border-bottom: 1px solid var(--cp-rule-on-dark);
}
.ialert-cp__subs-item {
  padding: 18px 24px;
  border-right: 1px solid var(--cp-rule-on-dark-soft);
  border-bottom: 1px solid var(--cp-rule-on-dark-soft);
}
.ialert-cp__subs-item:nth-child(2n) { border-right: 0; }
.ialert-cp__subs-item:nth-child(n+3) { border-bottom: 0; }
.ialert-cp__subs-item-label {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ialert-on-dark);
}
.ialert-cp__subs-item-desc {
  margin: 0;
  font-size: 14px;
  color: rgba(244, 241, 234, 0.7);
  line-height: 1.55;
  max-width: 42ch;
}

/* =========================================================================
   10. Email signup strip — cream, single-row inline form.
   ========================================================================= */
.ialert-cp__signup {
  background: var(--cp-light-surface);
  padding: 36px 0;
}
.ialert-cp__signup-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
}
.ialert-cp__signup-h {
  margin: 0;
  font-family: var(--ialert-font-display);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ialert-text);
  max-width: 36ch;
  line-height: 1.25;
}
.ialert-cp__signup-form {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.ialert-cp__signup-label { display: none; }
.ialert-cp__signup-input {
  font-family: var(--ialert-font-display);
  font-size: 15px;
  padding: 14px 18px;
  border: 1px solid var(--cp-rule);
  border-right: 0;
  background: #fff;
  min-width: 280px;
  color: var(--ialert-text);
}
.ialert-cp__signup-input:focus {
  outline: 2px solid var(--ialert-red);
  outline-offset: -2px;
}

/* =========================================================================
   Responsive — single shared breakpoint @ 920px. Sidebar collapses,
   asymmetric grids stack, hero numbers shrink.
   ========================================================================= */
@media (max-width: 920px) {
  .ialert-cp__hero { padding: 40px 0 32px; }
  .ialert-cp__hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .ialert-cp__hero-h1 { font-size: 44px; }
  .ialert-cp__hero-temp { font-size: 88px; }
  .ialert-cp__hero-right { text-align: left; }

  .ialert-cp__quickstats-row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 24px;
  }
  .ialert-cp__quickstat { border-left: 0; padding: 0; }

  .ialert-cp__fiveday-row { grid-template-columns: 1fr; }
  .ialert-cp__day { border-left: 0; border-top: 1px solid var(--cp-rule-soft); padding: 20px 0; }
  .ialert-cp__day:first-child { border-top: 0; }

  .ialert-cp__detailed-grid { grid-template-columns: 1fr; gap: 32px; }
  .ialert-cp__detailed-toc { position: static; border-right: 0; padding-right: 0; }

  .ialert-cp__radar-panel { grid-template-columns: 1fr; gap: 32px; }

  .ialert-cp__regional-lead { grid-template-columns: 1fr; }
  .ialert-cp__regional-lead-temp { grid-column: 1; grid-row: auto; justify-self: start; }
  .ialert-cp__regional-item { grid-template-columns: 1fr; gap: 4px; }
  .ialert-cp__regional-item-temp { text-align: left; }

  .ialert-cp__analysis--grid .ialert-cp__analysis-grid,
  .ialert-cp__analysis--strip .ialert-cp__analysis-grid { grid-template-columns: 1fr; gap: 12px; }
  .ialert-cp__analysis--strip .ialert-cp__analysis-link { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 12px; }
  .ialert-cp__analysis--strip .ialert-cp__analysis-thumb { width: 124px; aspect-ratio: 16 / 10; }
  .ialert-cp__analysis--strip .ialert-cp__analysis-meta { padding: 0; border-top: 0; }
  .ialert-cp__analysis--strip .ialert-cp__analysis-label { font-size: 16px; }

  .ialert-cp__subs-grid { grid-template-columns: 1fr; }
  .ialert-cp__subs-item { border-right: 0; border-bottom: 1px solid var(--cp-rule-on-dark-soft); }
  .ialert-cp__subs-item:last-child { border-bottom: 0; }

  .ialert-cp__signup-row { grid-template-columns: 1fr; }
  .ialert-cp__signup-form { flex-direction: column; }
  .ialert-cp__signup-input { border-right: 1px solid var(--cp-rule); }
}

/* =========================================================================
   Bottom-of-page subscribe prompt (anti-modal).
   Fixed bottom-right card. Never covers content, never traps focus, never
   blocks scroll. Fires once per session via IntersectionObserver on the
   footer (≥95% visible). Card recipe matches the rest of the centerpiece:
   square corners, hairline border, no shadow stack.
   ========================================================================= */
.ialert-cp__subprompt {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--ialert-bg);
  color: var(--ialert-text);
  border: 1px solid var(--cp-rule);
  padding: 22px 24px 20px;
  font-family: var(--ialert-font-display);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.ialert-cp__subprompt.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ialert-cp__subprompt-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--ialert-text-muted);
  cursor: pointer;
  font-family: var(--ialert-font-display);
}
.ialert-cp__subprompt-close:hover { color: var(--ialert-text); }
.ialert-cp__subprompt-eyebrow {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ialert-red);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ialert-cp__subprompt-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ialert-red);
  flex-shrink: 0;
}
.ialert-cp__subprompt-h {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ialert-navy);
}
.ialert-cp__subprompt-h strong { font-weight: 700; }
.ialert-cp__subprompt-sub {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ialert-text-muted);
}
.ialert-cp__subprompt-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ialert-cp__subprompt-cta {
  background: var(--ialert-red);
  color: var(--ialert-on-dark);
  font-family: var(--ialert-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 20px;
  text-decoration: none;
  transition: background 140ms;
}
.ialert-cp__subprompt-cta:hover { background: #a91823; }
.ialert-cp__subprompt-skip {
  background: transparent;
  border: 0;
  font-family: var(--ialert-font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ialert-text-muted);
  cursor: pointer;
  padding: 4px 0;
}
.ialert-cp__subprompt-skip:hover { color: var(--ialert-text); }

@media (max-width: 480px) {
  .ialert-cp__subprompt {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    padding: 18px 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ialert-cp__subprompt { transition: none; transform: none; }
}

/* =========================================================================
   Dev tools panel (localhost-only). Collapsible chip in the bottom-left,
   opposite the subscribe toast. Strip before production.
   ========================================================================= */
.ialert-cp__devpanel {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 31;
  font-family: var(--ialert-font-display);
}
.ialert-cp__devpanel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ialert-navy);
  color: var(--ialert-on-dark);
  border: 1px solid rgba(244, 241, 234, 0.2);
  font-family: var(--ialert-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 140ms;
}
.ialert-cp__devpanel-toggle:hover { background: #16223b; }
.ialert-cp__devpanel-toggle-dot {
  width: 7px;
  height: 7px;
  background: #4cd964;
  display: inline-block;
  border-radius: 0;
}
.ialert-cp__devpanel.is-open .ialert-cp__devpanel-toggle {
  background: var(--ialert-red);
  border-color: var(--ialert-red);
}
.ialert-cp__devpanel.is-open .ialert-cp__devpanel-toggle:hover { background: #a91823; }
.ialert-cp__devpanel-body {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 260px;
  background: var(--ialert-navy);
  color: var(--ialert-on-dark);
  border: 1px solid rgba(244, 241, 234, 0.2);
  padding: 16px 18px 18px;
}
.ialert-cp__devpanel-hint {
  margin: 0 0 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  font-weight: 700;
}
.ialert-cp__devpanel-action {
  display: block;
  width: 100%;
  background: transparent;
  color: var(--ialert-on-dark);
  border: 1px solid rgba(244, 241, 234, 0.4);
  font-family: var(--ialert-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 140ms, border-color 140ms;
}
.ialert-cp__devpanel-action:hover {
  background: rgba(244, 241, 234, 0.08);
  border-color: rgba(244, 241, 234, 0.7);
}
.ialert-cp__devpanel-action--seg {
  text-align: center;
  text-decoration: none;
  display: block;
}
.ialert-cp__devpanel-action--seg.is-active {
  background: var(--ialert-red);
  border-color: var(--ialert-red);
  color: #fff;
}
.ialert-cp__devpanel-action--seg.is-active:hover {
  background: #a91823;
  border-color: #a91823;
}
.ialert-cp__devpanel-grouplabel {
  margin: 4px 0 8px;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  font-weight: 700;
}
.ialert-cp__devpanel-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.ialert-cp__devpanel-group--three { grid-template-columns: 1fr 1fr 1fr; }
.ialert-cp__devpanel-group--three .ialert-cp__devpanel-action--seg {
  padding: 8px 6px;
  line-height: 1.2;
  font-size: 11px;
}
.ialert-cp__devpanel-segsub {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.14em;
  opacity: 0.7;
  font-weight: 700;
}

/* =========================================================================
   1b. Tools strip. 1×4 tile grid below the 5-day forecast. Replaces the
       prior full-bleed Leaflet radar (2026-05-11, Mark): the map dominated
       the page visually; demoted to a peer tile alongside the observation
       page, alert analysis and sign-up CTAs. The live map now lives only
       on /analysis.php?tab=radar.
   ========================================================================= */
.ialert-cp__tools {
  background: var(--cp-light-surface);
  color: var(--ialert-text);
  padding: var(--cp-pad-y-tight) 0 var(--cp-pad-y) 0;
}
.ialert-cp__tools--dark {
  background: var(--ialert-navy-deep);
  color: var(--ialert-on-dark);
  padding: var(--cp-pad-y) 0;
  border-bottom: 1px solid var(--ialert-red);
}
/* Light variants of Explore. Same chrome rhythm (hairline-cross grid,
 * red bottom rule) but a warm cream or pure-white surface with dark text. */
.ialert-cp__tools--beige,
.ialert-cp__tools--white {
  color: var(--ialert-text);
  padding: var(--cp-pad-y) 0;
  border-bottom: 1px solid var(--ialert-red);
}
.ialert-cp__tools--beige { background: #f3efe5; }
.ialert-cp__tools--white { background: #ffffff; }
.ialert-cp__tools--beige .ialert-cp__tools-grid,
.ialert-cp__tools--white .ialert-cp__tools-grid       { border-top-color: var(--cp-rule-soft); }
.ialert-cp__tools--beige .ialert-cp__tools-grid > li,
.ialert-cp__tools--white .ialert-cp__tools-grid > li  { border-bottom-color: var(--cp-rule-soft); }
.ialert-cp__tools--beige .ialert-cp__tools-grid > li + li,
.ialert-cp__tools--white .ialert-cp__tools-grid > li + li { border-left-color: var(--cp-rule-soft); }
.ialert-cp__tools--beige .ialert-cp__tool,
.ialert-cp__tools--white .ialert-cp__tool      { color: var(--ialert-text); }
.ialert-cp__tools--beige .ialert-cp__tool:hover,
.ialert-cp__tools--beige .ialert-cp__tool:focus-visible,
.ialert-cp__tools--white .ialert-cp__tool:hover,
.ialert-cp__tools--white .ialert-cp__tool:focus-visible { background: rgba(23, 26, 31, 0.04); }
.ialert-cp__tools--beige .ialert-cp__tool-thumb,
.ialert-cp__tools--white .ialert-cp__tool-thumb { border-color: var(--cp-rule-soft); background: #ffffff; }
.ialert-cp__tools--beige .ialert-cp__tool-h,
.ialert-cp__tools--white .ialert-cp__tool-h    { color: var(--ialert-navy); }
.ialert-cp__tools--beige .ialert-cp__tool-sub,
.ialert-cp__tools--white .ialert-cp__tool-sub  { color: var(--ialert-text-muted); }
.ialert-cp__tools-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--cp-rule-on-dark);
}
.ialert-cp__tools-grid > li {
  display: flex;
  border-bottom: 1px solid var(--cp-rule-on-dark);
}
.ialert-cp__tools-grid > li + li { border-left: 1px solid var(--cp-rule-on-dark); }
.ialert-cp__tools-grid > li:nth-child(2n + 1) { border-left: 0; }
.ialert-cp__tool {
  display: flex;
  align-items: stretch;
  gap: 24px;
  flex: 1;
  padding: 28px 32px;
  background: transparent;
  color: var(--ialert-on-dark);
  text-decoration: none;
  transition: background 140ms ease;
}
.ialert-cp__tool:hover,
.ialert-cp__tool:focus-visible {
  background: rgba(244, 241, 234, 0.04);
  outline: none;
}
.ialert-cp__tool:hover .ialert-cp__tool-arrow,
.ialert-cp__tool:focus-visible .ialert-cp__tool-arrow {
  transform: translateX(4px);
}
.ialert-cp__tool-thumb {
  display: block;
  width: 240px;
  height: 160px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--cp-rule-on-dark);
  background: #f4f5f7;
}
.ialert-cp__tool-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.ialert-cp__tool-text .ialert-cp__tool-arrow { margin-top: auto; }

/* Compact variant: thumb sets row height, title + sub sit next to it. */
.ialert-cp__tools--compact .ialert-cp__tool {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
}
.ialert-cp__tools--compact .ialert-cp__tool-thumb {
  width: 140px;
  height: 90px;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0;
}
.ialert-cp__tools--compact .ialert-cp__tool-text { min-width: 0; }
.ialert-cp__tools--compact .ialert-cp__tool-h    { margin: 0 0 4px; font-size: 17px; }
.ialert-cp__tools--compact .ialert-cp__tool-sub  { font-size: 12px; }
.ialert-cp__tools--compact .ialert-cp__tool-arrow { display: none; }
.ialert-cp__tool-h {
  margin: 0 0 10px;
  font-family: var(--ialert-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ialert-on-dark);
  line-height: 1.2;
}
.ialert-cp__tool-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.78);
}
.ialert-cp__tool-arrow {
  display: inline-block;
  padding-top: 12px;
  font-family: var(--ialert-font-display);
  font-size: 22px;
  font-weight: 300;
  color: var(--ialert-red);
  transition: transform 140ms ease;
}

@media (max-width: 540px) {
  .ialert-cp__tools-grid { grid-template-columns: 1fr; }
  .ialert-cp__tools-grid > li + li { border-left: 0; }
}