/**
 * PROJECT OUTLIER — Immersive Operating System
 * Storm Mode (Milestone II) — radar-first severe-weather environment.
 *
 * Amber accent language. Rebinds the shell accent tokens so the ENTIRE
 * immersive shell (ribbon, glows, ambient) shifts to storm posture.
 * Uses only real data supplied by storm.js.
 */
.im-storm-body {
  --im-accent: #ffb020;
  --im-accent-dim: #b8790f;
  --im-brand: #6a4400;
  --im-highlight: #ffc857;
  --phx-accent: #ffb020;
  --phx-brand-primary: #6a4400;
}

.im-storm {
  max-width: var(--im-shell-max);
  margin: 0 auto;
  padding: var(--im-gap-4) var(--im-gutter) var(--im-gap-6);
  position: relative;
  z-index: 1;
}
.im-storm-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--im-gap-3); flex-wrap: wrap;
  margin-bottom: var(--im-gap-4);
}
.im-storm-title {
  font-family: var(--im-font-display);
  font-size: var(--im-text-2xl); font-weight: 800; margin: 0;
  letter-spacing: var(--im-track-tight);
}
.im-storm-title small { display: block; font-size: var(--im-text-xs); font-weight: 600; letter-spacing: var(--im-track-wide); text-transform: uppercase; color: var(--im-accent); }
.im-storm-back { color: var(--phx-text-secondary); text-decoration: none; font-size: var(--im-text-sm); }
.im-storm-back:hover { color: var(--phx-text-primary); }

/* Radar-first hero: big radar + warning rail */
.im-storm-hero {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--im-gap-4);
}
@media (max-width: 979px) { .im-storm-hero { grid-template-columns: 1fr; } }

.im-storm-radar {
  position: relative;
  border-radius: var(--im-radius-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--im-accent) 30%, var(--im-hairline));
  background: var(--im-abyss);
  box-shadow: var(--im-shadow-3), 0 0 60px -30px var(--im-accent);
  min-height: 380px;
}
.im-radar-viewport { position: absolute; inset: 0; overflow: hidden; }
.im-radar-canvas { position: absolute; top: 0; left: 0; }
.im-radar-tile { position: absolute; width: 256px; height: 256px; image-rendering: auto; }
.im-radar-tile--base { opacity: 0.55; filter: grayscale(0.4) brightness(0.7); }
.im-radar-tile--rad { opacity: 0.85; mix-blend-mode: screen; }
.im-radar-crosshair {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--im-accent); border-radius: 50%;
  box-shadow: 0 0 12px var(--im-accent);
  pointer-events: none;
}
.im-radar-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,0.6), transparent 55%);
}
.im-radar-status {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--im-gap-2);
  padding: var(--im-gap-2) var(--im-gap-3);
  background: linear-gradient(0deg, rgba(4,6,10,0.92), transparent);
  font-size: var(--im-text-xs);
}
.im-radar-badge {
  position: absolute; top: var(--im-gap-2); left: var(--im-gap-2);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.35em 0.7em; border-radius: var(--im-radius-pill);
  background: rgba(4,6,10,0.7); border: 1px solid color-mix(in srgb, var(--im-accent) 40%, transparent);
  font-size: var(--im-text-xs); font-weight: 700; letter-spacing: var(--im-track-wide); text-transform: uppercase;
}

/* Warning rail */
.im-warnrail {
  display: flex; flex-direction: column; gap: var(--im-gap-2);
  padding: var(--im-gap-3);
  border-radius: var(--im-radius-xl);
  background: linear-gradient(180deg, rgba(255,176,32,0.08), rgba(255,255,255,0.012));
  border: 1px solid var(--im-hairline);
}
.im-warnrail h2 { margin: 0; font-size: var(--im-text-md); letter-spacing: var(--im-track-wide); text-transform: uppercase; }
.im-warnrail-empty { color: var(--phx-text-secondary); font-size: var(--im-text-sm); }

/* Storm panels grid */
.im-storm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--im-gap-3);
  margin-top: var(--im-gap-4);
}
.im-storm-brief { grid-column: 1 / -1; }
.im-storm-brief .im-panel-lead { font-size: var(--im-text-lg); font-weight: 600; line-height: 1.4; }

/* SPC targets */
.im-spc-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--im-gap-2);
  padding: var(--im-gap-2) 0; border-bottom: 1px solid var(--im-hairline);
}
.im-spc-item:last-child { border-bottom: none; }
.im-spc-city { font-weight: 700; }
.im-spc-city small { display: block; font-weight: 400; color: var(--phx-text-muted); font-size: var(--im-text-xs); }
.im-spc-risk { font-size: var(--im-text-xs); font-weight: 700; color: var(--im-accent); text-transform: uppercase; letter-spacing: var(--im-track-wide); }

/* Trend timeline */
.im-trend { display: flex; flex-direction: column; gap: var(--im-gap-2); }
.im-trend-row { display: flex; align-items: center; gap: var(--im-gap-3); }
.im-trend-when { flex: none; width: 74px; font-size: var(--im-text-xs); letter-spacing: var(--im-track-wide); text-transform: uppercase; color: var(--phx-text-muted); }
.im-trend-what { font-size: var(--im-text-sm); }
.im-river-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--im-gap-2); padding: var(--im-gap-2) 0; border-bottom: 1px solid var(--im-hairline); }
.im-river-row:last-child { border-bottom: none; }
.im-river-name { font-size: var(--im-text-sm); }
.im-river-name small { display: block; color: var(--phx-text-muted); font-size: var(--im-text-xs); }
.im-river-stage { font-family: var(--im-font-data); font-weight: 700; font-variant-numeric: tabular-nums; }
.im-river-stage small { color: var(--phx-text-muted); font-weight: 400; }

/* Storm briefing bullets — readable vs wall-of-text */
.im-brief-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  list-style: disc;
}
.im-brief-list li {
  font-size: var(--im-text-sm, 0.9rem);
  line-height: 1.35;
  color: var(--phx-text-secondary);
}