:root {
  color-scheme: dark;
  --bg: #08111d;
  --panel: #101d2d;
  --panel-soft: #13243a;
  --text: #eef6ff;
  --muted: #9eb1c8;
  --accent: #63d5ff;
  --accent-2: #ffbe5c;
  --success: #6ee7a8;
  --danger: #ff7f86;
  --border: rgba(255,255,255,.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(31,112,170,.28), transparent 35rem),
    linear-gradient(180deg, #07101a, var(--bg));
  color: var(--text);
}
.hero, main, footer { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.hero {
  display: flex; justify-content: space-between; gap: 2rem; align-items: end;
  padding: 4rem 0 2rem;
}
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: .92; margin-bottom: .8rem; letter-spacing: -.05em; }
h2 { letter-spacing: -.02em; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .15em; }
.subtitle, .current-card p, footer { color: var(--muted); }

button, .section-heading a {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent);
  color: #00121c;
  padding: .85rem 1.2rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
button:disabled { opacity: .55; cursor: wait; }

input {
  min-width: 8rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: .8rem 1rem;
  font: inherit;
}
input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.location-panel,
.status-card,
.forecast-card,
.current-card,
.details-card,
.summary-card,
.chart-card {
  background: linear-gradient(145deg, rgba(19,36,58,.95), rgba(11,24,40,.95));
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 4rem rgba(0,0,0,.18);
}

.location-panel {
  margin-bottom: 1rem;
  padding: 1.5rem;
}
.location-actions {
  display: grid;
  grid-template-columns: auto minmax(17rem, 1fr) auto auto;
  gap: 1rem;
  align-items: end;
}
.location-actions button { white-space: nowrap; }
.zip-form label {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
}
.zip-form > div {
  display: flex;
  gap: .6rem;
}
.zip-form input { flex: 1; }
.location-details,
.details-card dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.location-details {
  margin: 1.5rem 0 0;
}
.location-details div,
.details-card dl div {
  border-top: 1px solid var(--border);
  padding-top: .8rem;
}

.status-grid, .forecast-grid { display: grid; gap: 1rem; }
.status-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 1rem; }
.status-card { padding: 1rem; }
.status-card span { display:block; color: var(--muted); font-size: .78rem; margin-bottom: .4rem; }
.status-card strong { font-size: 1.05rem; }

.current-card {
  padding: clamp(1.4rem, 5vw, 3rem);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  margin-bottom: 3rem;
}
.current-card h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: .5rem; }
.temperature { white-space: nowrap; color: var(--accent-2); }
.temperature span { font-size: clamp(4rem, 12vw, 8rem); font-weight: 850; letter-spacing: -.08em; }
.temperature sup { font-size: 1.4rem; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
.summary-card {
  position: relative;
  overflow: hidden;
  min-height: 8.5rem;
  padding: 1.2rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.summary-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.summary-card::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(99,213,255,.08);
}
.summary-card-header {
  display: flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.summary-card-header > span:first-child {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: var(--accent);
}
.summary-card strong {
  display: block;
  position: relative;
  z-index: 1;
  color: var(--accent-2);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.summary-status {
  display: inline-flex;
  position: relative;
  z-index: 1;
  margin-top: .85rem;
  padding: .35rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}
.summary-trend {
  max-width: calc(100% - 5rem);
  display: block;
  position: relative;
  z-index: 1;
  margin-top: .65rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}
.trend-up { color: var(--accent-2); }
.trend-down { color: var(--accent); }
.trend-steady, .trend-unavailable { color: var(--muted); }

.summary-normal { border-color: rgba(110,231,168,.35); }
.summary-normal .summary-status { color: var(--success); border-color: rgba(110,231,168,.35); }
.summary-watch { border-color: rgba(255,190,92,.5); }
.summary-watch .summary-status { color: var(--accent-2); border-color: rgba(255,190,92,.45); }
.summary-warning { border-color: rgba(255,127,134,.6); }
.summary-warning strong,
.summary-warning .summary-status { color: var(--danger); }
.summary-warning .summary-status { border-color: rgba(255,127,134,.5); }

.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1rem; }
.forecast-grid { grid-template-columns: repeat(4, 1fr); }
.forecast-card { padding: 1.2rem; min-height: 15rem; display:flex; flex-direction:column; }
.forecast-card h3 { margin: 0 0 .5rem; }
.forecast-card .temp { font-size: 2.5rem; font-weight: 800; color: var(--accent-2); }
.forecast-card .summary { color: var(--muted); line-height: 1.45; }
.forecast-card .meta { margin-top:auto; color: var(--accent); font-size:.83rem; }

.details-card { margin-top: 3rem; padding: 1.5rem; }
dt { color:var(--muted); font-size:.8rem; }
dd { margin:.3rem 0 0; font-weight:700; }
#message { min-height: 1.4rem; margin-top: 1rem; }
footer { padding: 3rem 0; font-size: .85rem; }
.good { color:var(--success); }
.bad { color:var(--danger); }

.analytics-section { margin-bottom: 3rem; }
.chart-status { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 700; }
.chart-card { overflow: hidden; padding: 1rem; }
.chart-container { width: 100%; min-height: 24rem; overflow-x: auto; }
.temperature-chart-svg { display: block; width: 100%; min-width: 52rem; height: auto; }
.chart-grid line { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.chart-axis-label, .chart-period-label { fill: var(--muted); font-family: inherit; font-size: 15px; }
.chart-period-label { font-size: 13px; }
.chart-value-label { fill: var(--text); font-family: inherit; font-size: 14px; font-weight: 800; }
.temperature-chart-area { fill: rgba(99,213,255,.12); }
.temperature-chart-line,
.wind-trend-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-point circle { fill: var(--panel-soft); stroke: var(--accent-2); stroke-width: 4; }
.precipitation-trend-area { fill: rgba(99,213,255,.18); }
.precipitation-trend-line,
.precipitation-trend-points .chart-point circle { stroke: #78bfff; }
.wind-trend-area { fill: rgba(90,160,210,.18); }
.wind-trend-line { stroke: #5aa0d2; }
.wind-trend-points .chart-point circle { fill: #5aa0d2; }
.chart-empty { display:grid; min-height:22rem; place-items:center; color:var(--muted); }

.chart-tooltip {
  position: absolute;
  z-index: 1000;
  max-width: 240px;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: rgba(25,35,50,.96);
  color: white;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.chart-tooltip.visible { opacity: 1; }
.tooltip-title { font-weight: 700; margin-bottom: .6rem; }
.tooltip-row { display:flex; gap:.6rem; margin:.35rem 0; }
.tooltip-summary { margin-top:.6rem; line-height:1.35; color:#e7eef8; }

@media (max-width: 980px) {
  .location-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
  .status-grid,
  .summary-grid,
  .forecast-grid,
  .location-details,
  .details-card dl { grid-template-columns: repeat(2, 1fr); }
  .hero, .current-card { align-items: flex-start; }
}
@media (max-width: 560px) {
  .hero, .current-card, .section-heading { flex-direction: column; }
  .status-grid,
  .summary-grid,
  .forecast-grid,
  .location-actions,
  .location-details,
  .details-card dl { grid-template-columns: 1fr; }
  .zip-form > div { flex-direction: column; }
  .hero { padding-top: 2rem; }
  .chart-card { padding: .5rem; }
  .chart-container { min-height: 20rem; }
  .temperature-chart-svg { min-width: 48rem; }
}

/* Sprint 6.1 - Location-aware radar */
.radar-section {
  margin-bottom: 3rem;
}

.radar-card {
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(19,36,58,.95), rgba(11,24,40,.95));
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 4rem rgba(0,0,0,.18);
}

.radar-toolbar,
.radar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
}

.radar-toolbar {
  border-bottom: 1px solid var(--border);
}

.radar-toolbar strong,
.radar-toolbar small {
  display: block;
}

.radar-toolbar small,
.radar-footer {
  color: var(--muted);
  font-size: .8rem;
}

.radar-actions {
  display: flex;
  gap: .65rem;
}

.radar-actions button {
  padding: .65rem .95rem;
}

.radar-map {
  width: 100%;
  height: min(64vh, 42rem);
  min-height: 28rem;
  background: var(--panel);
}

.radar-footer {
  border-top: 1px solid var(--border);
}

.radar-empty {
  display: grid;
  min-height: 28rem;
  margin: 0;
  padding: 2rem;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.leaflet-container {
  background: #0a1320;
  font-family: inherit;
}

.leaflet-control-attribution {
  background: rgba(8,17,29,.78) !important;
  color: var(--muted);
}

.leaflet-control-attribution a {
  color: var(--accent);
}

.leaflet-tooltip {
  background: rgba(8,17,29,.95);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
}

@media (max-width: 560px) {
  .radar-toolbar,
  .radar-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .radar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .radar-map {
    min-height: 24rem;
  }
}

/* Sprint 6.2 - Weather alerts and situational awareness */
.alerts-section {
  margin-bottom: 3rem;
}

.alerts-list {
  display: grid;
  gap: 1rem;
}

.alert-card,
.alert-empty {
  background:
    linear-gradient(145deg, rgba(19,36,58,.95), rgba(11,24,40,.95));
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 4rem rgba(0,0,0,.18);
  padding: 1.25rem;
}

.alert-clear {
  border-color: rgba(110,231,168,.4);
}

.alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.alert-header h3 {
  margin: 0;
  font-size: 1.25rem;
}

.alert-severity {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .3rem .65rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.alert-headline {
  margin: .8rem 0;
  font-weight: 700;
}

.alert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  color: var(--muted);
  font-size: .82rem;
}

.alert-area {
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .86rem;
}

.alert-details {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: .8rem;
}

.alert-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.alert-details p {
  margin: .85rem 0 0;
  white-space: pre-line;
  color: var(--muted);
}

.severity-extreme {
  border-color: rgba(255,127,134,.9);
  box-shadow: 0 0 0 1px rgba(255,127,134,.15),
              0 1rem 4rem rgba(0,0,0,.18);
}

.severity-severe {
  border-color: rgba(255,127,134,.65);
}

.severity-moderate {
  border-color: rgba(255,190,92,.65);
}

.severity-minor {
  border-color: rgba(99,213,255,.5);
}

.severity-unknown {
  border-color: var(--border);
}

.severity-extreme .alert-severity,
.severity-severe .alert-severity {
  color: var(--danger);
}

.severity-moderate .alert-severity {
  color: var(--accent-2);
}

.severity-minor .alert-severity {
  color: var(--accent);
}

.alert-empty strong {
  display: block;
  margin-bottom: .35rem;
}

.alert-empty p {
  margin-bottom: 0;
  color: var(--muted);
}

@media (max-width: 560px) {
  .alert-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Sprint 6.2 - Compact all-clear alert state */
.alerts-section.alerts-compact {
  margin-bottom: 1.5rem;
}

.alerts-section.alerts-compact .section-heading {
  margin-bottom: .5rem;
}

.alerts-section.alerts-compact .alert-empty {
  padding: .75rem 1rem;
  border-radius: .85rem;
  box-shadow: none;
}

.alerts-section.alerts-compact .alert-empty strong {
  display: inline;
  margin: 0;
}

.alerts-section.alerts-compact .alert-empty strong::before {
  content: "\2713\00a0";
}

.alerts-section.alerts-compact .alert-empty p {
  display: inline;
  margin: 0 0 0 .5rem;
}

@media (max-width: 560px) {
  .alerts-section.alerts-compact .alert-empty p {
    display: block;
    margin: .35rem 0 0;
  }
}

/* Sprint 6.3 - Observed radar history and animation */
.radar-animation {
  border-top: 1px solid var(--border);
  padding: 1rem 1.2rem;
}
.radar-time-heading, .radar-playback-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.radar-time-heading > div { display: grid; gap: .2rem; }
.radar-observed-label {
  color: var(--accent); font-size: .7rem; font-weight: 900; letter-spacing: .12em;
}
.radar-time-heading small { color: var(--muted); }
.radar-timeline { width: 100%; margin: 1rem 0; accent-color: var(--accent); }
.radar-playback-controls { justify-content: center; flex-wrap: wrap; }
.radar-playback-controls button { min-width: 4rem; padding: .6rem .85rem; }
.radar-playback-controls label { color: var(--muted); font-size: .8rem; }
.radar-playback-controls select {
  border: 1px solid var(--border); border-radius: .55rem; background: var(--panel);
  color: var(--text); padding: .5rem;
}
.radar-playback-controls button:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 560px) {
  .radar-time-heading { align-items: flex-start; flex-direction: column; }
  .radar-playback-controls { display: grid; grid-template-columns: repeat(2, 1fr); }
  .radar-playback-controls label { text-align: right; }
}


/* Sprint 6.3 playback polish - smooth observed-frame transitions */
#radar-map .leaflet-image-layer {
  transition: opacity 180ms linear;
}

/* Sprint 6.4 - Observed precipitation and wind layers */
.weather-layer-controls {
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.2rem;
  background: rgba(8, 17, 29, .32);
}

.weather-layer-heading,
.weather-layer-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.weather-layer-heading > div {
  display: grid;
  gap: .2rem;
}

.weather-layer-heading small,
.weather-layer-note {
  color: var(--muted);
}

.weather-layer-options {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: .9rem;
}

.weather-layer-toggle,
.weather-layer-period {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.6rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .5rem .75rem;
  background: rgba(12, 27, 45, .78);
  font-size: .84rem;
  font-weight: 700;
}

.weather-layer-toggle {
  cursor: pointer;
}

.weather-layer-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent);
}

.weather-layer-period {
  color: var(--muted);
}

.weather-layer-period select {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.weather-layer-period select:disabled {
  opacity: .45;
}

.weather-layer-note {
  margin: .8rem 0 0;
  font-size: .76rem;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .weather-layer-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .weather-layer-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .weather-layer-toggle:last-child {
    grid-column: 1 / -1;
  }
}


/* Sprint 6.5 - Lightning reports */
.weather-layer-options {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .weather-layer-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .weather-layer-options {
    grid-template-columns: 1fr;
  }
}


/* Sprint 6.5.3 - scalable map-layer foundation */
.map-layers-panel {
  display: grid;
  gap: .9rem;
}

.layer-groups {
  display: grid;
  gap: .75rem;
}

.layer-group {
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .8rem;
  background: rgba(12, 27, 45, .42);
}

.layer-group-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
}

.layer-group-title small,
.weather-insight-heading small {
  color: var(--muted);
}

.layer-foundation-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .7rem;
}

.layer-foundation-list span {
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: .35rem .6rem;
  color: var(--muted);
  font-size: .76rem;
}

.layer-coming-soon {
  cursor: default;
  opacity: .58;
}

.layer-coming-soon small {
  color: var(--muted);
  font-weight: 600;
}

.weather-layer-insights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.weather-insight-card {
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .8rem;
  background: rgba(8, 17, 29, .35);
}

.weather-insight-heading {
  display: grid;
  gap: .2rem;
}

.wind-legend-text {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  margin-top: .65rem;
  font-size: .78rem;
}

.wind-legend-text span {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .weather-layer-insights {
    grid-template-columns: 1fr;
  }

  .layer-group-title {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }
}


/* Sprint 6.5.3.1 - automatic official hazard map representation */
.hazard-summary-list span {
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease;
}

.hazard-summary-list span.hazard-active {
  border-style: solid;
  border-color: currentColor;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}

.hazard-summary-list span.hazard-active::before {
  content: "âš  ";
}

/* Sprint 6.5.3.2 - event-driven hazard UX */
.hazards-layer-group[hidden] {
  display: none !important;
}

.hazards-layer-group {
  border-color: rgba(255, 255, 255, .16);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .025),
      rgba(255, 255, 255, .01)
    );
}

.hazards-active-summary {
  color: var(--muted);
  font-size: .76rem;
}

.hazards-active-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .65rem;
  margin-top: .75rem;
}

.hazard-active-card {
  --hazard-color: #f59e0b;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 3.65rem;
  padding: .72rem .78rem;
  border: 1px solid color-mix(in srgb, var(--hazard-color) 70%, transparent);
  border-left: 5px solid var(--hazard-color);
  border-radius: .8rem;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--hazard-color) 13%, transparent),
      rgba(255, 255, 255, .015)
    );
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.hazard-active-card:hover,
.hazard-active-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--hazard-color);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hazard-color) 28%, transparent),
    0 8px 22px rgba(0, 0, 0, .16);
  outline: none;
}

.hazard-active-swatch {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  border: 3px solid var(--hazard-color);
  border-radius: .2rem;
  background:
    color-mix(in srgb, var(--hazard-color) 18%, transparent);
  box-shadow:
    0 0 .55rem color-mix(in srgb, var(--hazard-color) 45%, transparent);
}

.hazard-active-card-content {
  display: grid;
  gap: .14rem;
  min-width: 0;
}

.hazard-active-card-content strong {
  color: #fff;
  line-height: 1.15;
}

.hazard-active-card-content small {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .02em;
}

@media (max-width: 620px) {
  .hazards-active-list {
    grid-template-columns: 1fr;
  }
}

/* Sprint 6.5.3.3 - responsive interactive active-alert cards */
.alert-heading-row {
  align-items: flex-end;
}

.alert-click-hint {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .8rem;
}

.alert-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-color: color-mix(in srgb, var(--alert-accent, #42a5f5) 58%, var(--border));
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.alert-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .34rem;
  background: var(--alert-accent, #42a5f5);
}

.alert-card:hover,
.alert-card:focus-visible {
  transform: translateY(-1px);
  border-color: var(--alert-accent, #42a5f5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--alert-accent, #42a5f5) 35%, transparent);
  outline: none;
}

.alert-card:hover::after {
  content: "Click me, and I'll show you where";
  position: absolute;
  right: 1rem;
  top: .8rem;
  z-index: 3;
  max-width: 13rem;
  padding: .45rem .6rem;
  border: 1px solid color-mix(in srgb, var(--alert-accent, #42a5f5) 65%, var(--border));
  border-radius: .55rem;
  background: rgba(5, 12, 22, .96);
  color: #fff;
  font-size: .72rem;
  line-height: 1.35;
  pointer-events: none;
}

.alert-map-action {
  display: grid;
  gap: .15rem;
  width: 100%;
  margin-top: .9rem;
  padding: .75rem .9rem;
  border: 1px solid color-mix(in srgb, var(--alert-accent, #42a5f5) 55%, var(--border));
  border-radius: .7rem;
  background: color-mix(in srgb, var(--alert-accent, #42a5f5) 9%, transparent);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.alert-map-action:hover,
.alert-map-action:focus-visible {
  border-color: var(--alert-accent, #42a5f5);
  background: color-mix(in srgb, var(--alert-accent, #42a5f5) 15%, transparent);
  outline: none;
}

.alert-map-action-title {
  font-weight: 800;
}

.alert-map-action-subtitle {
  color: var(--muted);
  font-size: .72rem;
}

.alert-card .severity-badge,
.alert-card [class*="severity"] {
  border-color: var(--alert-accent, currentColor);
}

@media (min-width: 1000px) {
  .alert-card {
    padding-left: 1.25rem;
  }

  .alert-map-action {
    width: auto;
    min-width: 12rem;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
  }

  .alert-card {
    padding-right: 15rem;
  }
}

@media (max-width: 999px) {
  .alert-card:hover::after {
    display: none;
  }

  .alert-click-hint {
    display: block;
  }
}

@media (max-width: 700px) {
  .alert-heading-row {
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
  }

  .alerts-status {
    text-align: left;
  }

  .alert-card {
    padding: 1rem 1rem 1rem 1.15rem;
    border-radius: .9rem;
  }

  .alert-card h3 {
    padding-right: 4.8rem;
    line-height: 1.2;
  }

  .alert-map-action {
    min-height: 48px;
    margin-top: .85rem;
    padding: .8rem .9rem;
  }

  .alert-card details {
    margin-top: .7rem;
  }
}

@media (max-width: 460px) {
  .alert-click-hint {
    font-size: .75rem;
  }

  .alert-card h3 {
    font-size: 1.05rem;
    padding-right: 0;
  }

  .alert-map-action {
    border-radius: .65rem;
  }
}

/* Sprint 6.5.3.4 - one-to-one hazard card/map color identity */
.hazard-air-quality {
  --alert-accent: #26a69a;
}

.hazard-geometry-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  margin-top: .65rem;
  color: var(--muted);
  font-size: .72rem;
}

.hazard-geometry-legend[hidden] {
  display: none;
}

.hazard-geometry-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.hazard-line {
  display: inline-block;
  width: 1.6rem;
  border-top: 3px solid currentColor;
}

.hazard-line.dashed {
  border-top-style: dashed;
}

/*
  Alert cards derive their accent from JS via --alert-accent.
  Map polygons derive from the same hazardVisual() palette.
  Solid vs dashed now communicates geometry precision only.
*/

/* Sprint 6.5.3.5 - alert focus / cycle / show-all navigation */
.alert-map-navigator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-bottom: 0;
  background: rgba(8, 17, 29, .92);
}

.alert-map-navigator[hidden] {
  display: none;
}

.alert-map-navigator button {
  min-height: 40px;
  padding: .55rem .75rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: rgba(255, 255, 255, .04);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.alert-map-navigator button:hover,
.alert-map-navigator button:focus-visible {
  border-color: #7dd3fc;
  outline: none;
}

.alert-map-navigator button.secondary {
  color: var(--muted);
}

#alert-map-nav-status {
  min-width: 8.5rem;
  text-align: center;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.alert-card-selected {
  border-color: var(--alert-accent, #42a5f5);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--alert-accent, #42a5f5) 45%, transparent),
    0 0 1.2rem color-mix(in srgb, var(--alert-accent, #42a5f5) 15%, transparent);
}

@media (max-width: 700px) {
  .alert-map-navigator {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #alert-map-nav-status,
  #alert-map-show-all {
    grid-column: 1 / -1;
  }

  #alert-map-nav-status {
    order: -1;
    min-width: 0;
  }
}

/* Sprint 6.5.3.7 - active environmental alert summary */
.environment-alert-summary {
  margin-top: .7rem;
}

.environment-alert-summary[hidden] {
  display: none;
}

.environment-alert-chip {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 54px;
  padding: .65rem .85rem;
  border: 1px solid #26a69a;
  border-left: 5px solid #26a69a;
  border-radius: .75rem;
  background: rgba(38, 166, 154, .11);
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.environment-alert-chip[hidden] {
  display: none;
}

.environment-alert-chip:hover,
.environment-alert-chip:focus-visible {
  background: rgba(38, 166, 154, .17);
  box-shadow: 0 0 0 1px rgba(38, 166, 154, .25);
  outline: none;
}

.environment-alert-swatch {
  width: .85rem;
  height: .85rem;
  flex: 0 0 auto;
  border: 3px solid #26a69a;
  border-radius: .2rem;
}

.environment-alert-copy {
  display: grid;
  gap: .1rem;
}

.environment-alert-copy small {
  color: #7ddfd6;
  font-size: .72rem;
  font-weight: 800;
}

@media (max-width: 700px) {
  .environment-alert-chip {
    width: 100%;
  }
}

/* Sprint 6.5.3.8 - summary color consistency
   Hazard summary cards now inherit the same hazardVisual() palette used by
   active alert cards and map geometry. */

/* Sprint 6.5.4 - EPA AirNow current AQI */
.air-quality-current {
  margin-top: .8rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: rgba(8, 17, 29, .42);
}

.air-quality-current-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

.air-quality-current-heading > div {
  display: grid;
  gap: .15rem;
}

.air-quality-current-heading small,
.air-quality-status,
.air-quality-primary small,
.air-quality-disclaimer,
.air-quality-pollutant small {
  color: var(--muted);
}

.air-quality-current-heading > div > small {
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.air-quality-status {
  font-size: .72rem;
  font-weight: 800;
}

.air-quality-content {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .9rem;
  margin-top: .75rem;
}

.air-quality-aqi {
  display: grid;
  place-items: center;
  min-width: 5.4rem;
  min-height: 5.4rem;
  padding: .55rem;
  border: 3px solid var(--aqi-color);
  border-radius: 1rem;
  background: var(--aqi-color);
  color: var(--aqi-text-color, #fff);
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--aqi-color) 18%, transparent);
}

.air-quality-aqi span {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.air-quality-aqi small {
  margin-top: .25rem;
  color: inherit;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.air-quality-primary {
  display: grid;
  gap: .22rem;
  min-width: 0;
}

.air-quality-primary strong {
  font-size: 1.05rem;
}

.air-quality-primary span {
  font-weight: 750;
}

.air-quality-pollutants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}

.air-quality-pollutant {
  display: grid;
  gap: .12rem;
  min-width: 0;
  padding: .55rem .65rem;
  border: 1px solid color-mix(in srgb, var(--aqi-color) 65%, var(--border));
  border-left: 4px solid var(--aqi-color);
  border-radius: .65rem;
  background: color-mix(in srgb, var(--aqi-color) 7%, transparent);
}

.air-quality-pollutant span {
  font-weight: 800;
}

.air-quality-disclaimer {
  margin: .7rem 0 0;
  font-size: .68rem;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .air-quality-content {
    grid-template-columns: 1fr;
  }

  .air-quality-aqi {
    width: 100%;
    min-height: 4.6rem;
  }

  .air-quality-current-heading {
    flex-direction: column;
    gap: .25rem;
  }
}


/* Sprint 6.5.5 - EPA AirNow environmental map layers */
.environment-map-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .9rem;
  margin-top: .8rem;
}

.environment-map-controls .weather-layer-toggle {
  min-height: 38px;
}

.environment-map-controls small {
  color: var(--muted);
}

.air-quality-map-status {
  margin-top: .65rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
}

.aqi-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-top: .65rem;
}

.aqi-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  color: var(--muted);
}

.aqi-map-legend span::before {
  content: "";
  width: .72rem;
  height: .72rem;
  border-radius: .18rem;
  background: var(--aqi);
  border: 1px solid rgba(255, 255, 255, .5);
}

@media (max-width: 700px) {
  .environment-map-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .environment-map-controls .weather-layer-toggle {
    min-height: 46px;
  }
}


/* Sprint 6.5.6 - NOAA HMS smoke awareness */
.environment-smoke-chip .environment-alert-swatch {
  background: #7a7a7a;
}

.environment-smoke-chip {
  border-color: rgba(160, 160, 160, .48);
}

.environment-smoke-chip:hover,
.environment-smoke-chip:focus-visible {
  border-color: rgba(190, 190, 190, .9);
}

.hazard-popup small {
  line-height: 1.35;
}

/* Sprint 6.5.7 - Mobile experience and navigation foundation */
.mobile-only,
.mobile-location-bar,
.mobile-bottom-nav {
  display: none;
}

.travel-foundation {
  margin: 0 0 3rem;
}

.travel-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background:
    linear-gradient(145deg, rgba(19,36,58,.95), rgba(11,24,40,.95));
  box-shadow: 0 1rem 4rem rgba(0,0,0,.18);
}

.travel-card p {
  margin: .45rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.travel-route-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 800;
}

.travel-route-preview span {
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: rgba(255,255,255,.04);
}

.travel-badge {
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}

@media (max-width: 700px) {
  body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }

  .hero,
  main,
  footer {
    width: min(100% - 1rem, 1180px);
  }

  .hero {
    padding: 1rem 0 .7rem;
    align-items: center;
    flex-direction: row;
  }

  .hero .eyebrow,
  .hero .subtitle {
    display: none;
  }

  .hero h1 {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: -.035em;
  }

  .hero #refresh-button {
    padding: .55rem .75rem;
    font-size: .76rem;
  }

  .mobile-location-bar {
    position: sticky;
    top: .35rem;
    z-index: 850;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .65rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: .9rem;
    background: rgba(8,17,29,.94);
    backdrop-filter: blur(14px);
  }

  .mobile-location-bar > div {
    display: grid;
    gap: .12rem;
    min-width: 0;
  }

  .mobile-location-label {
    color: var(--accent);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .11em;
  }

  #mobile-location-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mobile-location-change {
    flex: 0 0 auto;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.06);
    color: var(--text);
  }

  .location-panel {
    display: none;
  }

  .location-panel.mobile-location-open {
    display: block;
    scroll-margin-top: 5rem;
  }

  .status-grid {
    display: none;
  }

  .current-card {
    margin-bottom: .8rem;
    padding: 1rem;
    flex-direction: row;
    align-items: center;
    gap: .8rem;
  }

  .current-card .eyebrow {
    font-size: .62rem;
  }

  .current-card h2 {
    font-size: 1.25rem;
  }

  .current-card p {
    margin-bottom: 0;
    font-size: .82rem;
    line-height: 1.4;
  }

  .temperature span {
    font-size: 3.35rem;
  }

  .temperature sup {
    font-size: .9rem;
  }

  .alerts-section {
    margin-bottom: .9rem;
  }

  .alerts-section .section-heading {
    margin-bottom: .45rem;
  }

  .alerts-section .section-heading h2 {
    margin-bottom: 0;
    font-size: 1.15rem;
  }

  .summary-grid {
    display: flex;
    gap: .65rem;
    margin: 0 0 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .summary-grid::-webkit-scrollbar {
    display: none;
  }

  .summary-card {
    flex: 0 0 76%;
    min-height: 7.6rem;
    scroll-snap-align: start;
  }

  .radar-section {
    margin-bottom: 1.2rem;
    scroll-margin-top: 4.5rem;
  }

  .radar-section > .section-heading {
    align-items: center;
    flex-direction: row;
    margin-bottom: .5rem;
  }

  .radar-section > .section-heading h2 {
    margin-bottom: 0;
    font-size: 1.2rem;
  }

  .radar-toolbar {
    padding: .7rem;
  }

  .radar-toolbar > div:first-child small {
    display: none;
  }

  .radar-actions {
    grid-template-columns: repeat(3, auto);
  }

  .radar-actions button {
    min-height: 42px;
    padding: .55rem .65rem;
    font-size: .72rem;
  }

  .mobile-only {
    display: inline-flex;
  }

  .map-layers-panel {
    display: none;
  }

  .map-layers-panel.mobile-layers-open {
    display: grid;
    position: fixed;
    inset: auto .5rem calc(4.55rem + env(safe-area-inset-bottom)) .5rem;
    z-index: 1200;
    max-height: 72vh;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 1rem;
    background: rgba(8,17,29,.98);
    box-shadow: 0 -1rem 3rem rgba(0,0,0,.45);
  }

  .radar-map {
    height: 52vh;
    min-height: 22rem;
  }

  .radar-animation {
    padding: .7rem;
  }

  .radar-time-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .radar-time-heading small {
    font-size: .68rem;
  }

  .radar-timeline {
    margin: .65rem 0;
  }

  .radar-playback-controls {
    display: grid;
    grid-template-columns: .75fr 1.2fr .75fr .9fr;
    gap: .4rem;
  }

  .radar-playback-controls button {
    min-width: 0;
    padding: .6rem .35rem;
    font-size: .72rem;
  }

  .radar-playback-controls label,
  .radar-playback-controls select {
    display: none;
  }

  .radar-footer {
    display: none;
  }

  .analytics-section {
    margin-bottom: 1.2rem;
    scroll-margin-top: 4.5rem;
  }

  .chart-container {
    min-height: 16rem;
  }

  .temperature-chart-svg {
    min-width: 40rem;
  }

  .forecast-grid {
    display: flex;
    gap: .65rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .forecast-grid::-webkit-scrollbar {
    display: none;
  }

  .forecast-card {
    flex: 0 0 72%;
    min-height: 13rem;
    scroll-snap-align: start;
  }

  .travel-foundation {
    margin-bottom: 1.2rem;
    scroll-margin-top: 4.5rem;
  }

  .travel-card {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .travel-route-preview {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .travel-route-preview span {
    white-space: nowrap;
  }

  .details-card {
    margin-top: 1.2rem;
    scroll-margin-top: 4.5rem;
  }

  footer {
    padding: 1.5rem 0 2rem;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 1500;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(7,16,26,.97);
    backdrop-filter: blur(16px);
  }

  .mobile-bottom-nav button {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 48px;
    padding: .35rem .2rem;
    border: 0;
    border-radius: .7rem;
    background: transparent;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
  }

  .mobile-bottom-nav button.mobile-nav-active {
    background: rgba(99,213,255,.1);
    color: var(--accent);
  }
}

@media (max-width: 390px) {
  .radar-actions button {
    padding-inline: .45rem;
    font-size: .68rem;
  }

  .summary-card {
    flex-basis: 84%;
  }

  .forecast-card {
    flex-basis: 82%;
  }

  .mobile-bottom-nav button {
    font-size: .62rem;
  }
}
/* Sprint 6.5.7a - mobile layer drawer close behavior */

.mobile-layers-backdrop {
  display: none;
}

@media (max-width: 700px) {
  .mobile-layers-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 1190;
    display: block;
    background: rgba(0, 0, 0, .48);
    backdrop-filter: blur(2px);
  }

  .mobile-layers-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -.15rem -.15rem .65rem;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--border);
    background: rgba(8, 17, 29, .98);
  }

  #mobile-layers-close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
  }
}
/* Sprint 6.5.7a.1 - force mobile Layers header full width */
@media (max-width: 700px) {
  .mobile-layers-header {
    grid-column: 1 / -1 !important;
    width: 100%;
    box-sizing: border-box;
  }

  .mobile-layers-header strong {
    display: block;
    flex: 1 1 auto;
  }

  #mobile-layers-close {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 2.5rem;
    position: relative;
    z-index: 10;
  }
}
/* Sprint 6.5.7a.2 - center mobile Layers header */
@media (max-width: 700px) {
  .mobile-layers-header {
    display: grid !important;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
  }

  .mobile-layers-header::before {
    content: "";
    grid-column: 1;
  }

  .mobile-layers-header strong {
    grid-column: 2;
    text-align: center;
  }

  #mobile-layers-close {
    grid-column: 3;
    justify-self: end;
  }
}

/* Sprint 6.5.7a.3 - center mobile radar action button labels */
@media (max-width: 700px) {
  .radar-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #mobile-layers-button {
    justify-content: center;
    text-align: center;
  }
}
/* Sprint 6.5.8 - clean Home dashboard + application navigation */
.desktop-app-nav {
  position: sticky;
  top: 0;
  z-index: 1400;
  display: flex;
  gap: .35rem;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto 1rem;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(7,16,26,.94);
  backdrop-filter: blur(16px);
}
.desktop-app-nav button {
  flex: 1 1 0;
  min-height: 2.7rem;
  padding: .55rem .75rem;
  border: 0;
  border-radius: .7rem;
  background: transparent;
  color: var(--muted);
}
.desktop-app-nav button.app-nav-active {
  background: rgba(99,213,255,.12);
  color: var(--accent);
}
.app-view-section { display: none !important; }
body[data-app-view="home"] .app-view-home,
body[data-app-view="forecast"] .app-view-forecast,
body[data-app-view="radar"] .app-view-radar,
body[data-app-view="travel"] .app-view-travel,
body[data-app-view="more"] .app-view-more {
  display: block !important;
}
.home-status-strip { display: none; }
body[data-app-view="home"] .home-status-strip {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: rgba(16,29,45,.78);
}
.home-status-strip > div { display: grid; gap: .12rem; }
.home-status-strip span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-status-strip strong { font-size: .9rem; }
#home-change-location {
  padding: .55rem .8rem;
  background: rgba(255,255,255,.06);
  color: var(--text);
}
body[data-app-view="home"] .current-card {
  margin-bottom: 1rem;
  min-height: 0;
  padding: 1.35rem 1.5rem;
}
body[data-app-view="home"] .current-card h2 {
  margin-bottom: .35rem;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
}
body[data-app-view="home"] .current-card #current-summary {
  max-width: 46rem;
  margin-bottom: 0;
  line-height: 1.45;
}
body[data-app-view="home"] .temperature span {
  font-size: clamp(3.5rem, 8vw, 5.5rem);
}
.today-overview {
  margin: 0 0 1.2rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  background: linear-gradient(145deg, rgba(19,36,58,.92), rgba(11,24,40,.92));
  box-shadow: 0 1rem 4rem rgba(0,0,0,.15);
}
.today-overview-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
}
.today-overview-heading h2 { margin-bottom: 0; }
.text-action {
  padding: .5rem .7rem;
  background: rgba(255,255,255,.05);
  color: var(--accent);
  font-size: .78rem;
}
body[data-app-view="home"] .summary-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
  margin: 0;
}
body[data-app-view="home"] .summary-card {
  min-height: 0;
  padding: .9rem;
  border-radius: .9rem;
  box-shadow: none;
}
body[data-app-view="home"] .summary-card:hover {
  transform: none;
  box-shadow: none;
}
body[data-app-view="home"] .summary-card::after { display: none; }
body[data-app-view="home"] .summary-card-header { margin-bottom: .35rem; }
body[data-app-view="home"] .summary-card-header > span:first-child { font-size: .65rem; }
body[data-app-view="home"] .summary-icon {
  width: 1.7rem;
  height: 1.7rem;
  font-size: .72rem;
}
body[data-app-view="home"] .summary-card strong {
  font-size: clamp(1.65rem, 3vw, 2.2rem);
}
body[data-app-view="home"] .summary-status {
  margin-top: .45rem;
  padding: .25rem .45rem;
  font-size: .62rem;
}
body[data-app-view="home"] .summary-trend { display: none; }
body[data-app-view="home"] .alerts-section { margin: 0 0 1rem; }
body[data-app-view="home"] .alerts-section .section-heading { margin-bottom: .55rem; }
body[data-app-view="home"] .alert-card { min-height: 0; }
@media (max-width: 700px) {
  .desktop-app-nav { display: none; }
  body[data-app-view="home"] .current-card {
    margin-bottom: .75rem;
    padding: 1rem;
  }
  body[data-app-view="home"] .summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
  }
  body[data-app-view="home"] .summary-card { flex: initial; }
  .today-overview { padding: .9rem; }
  .today-overview-heading { align-items: center; }
  .today-overview-heading h2 { font-size: 1.1rem; }
  .mobile-bottom-nav button.app-nav-active {
    background: rgba(99,213,255,.1);
    color: var(--accent);
  }
}

/* Sprint 6.5.8a - compact alert cards on Home */
body[data-app-view="home"] .alerts-list {
  gap: .65rem;
}

body[data-app-view="home"] .alert-card {
  min-height: 0;
  padding: .8rem 12.5rem .8rem 1rem;
  border-radius: .9rem;
}

body[data-app-view="home"] .alert-card::before {
  width: .25rem;
}

body[data-app-view="home"] .alert-header {
  gap: .65rem;
}

body[data-app-view="home"] .alert-header h3 {
  font-size: 1rem;
  line-height: 1.2;
}

body[data-app-view="home"] .alert-severity {
  padding: .2rem .5rem;
  font-size: .62rem;
}

body[data-app-view="home"] .alert-compact-expires {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .76rem;
}

body[data-app-view="home"] .alert-compact-details {
  margin-top: .45rem;
  padding-top: .45rem;
}

body[data-app-view="home"] .alert-compact-details summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .76rem;
}

body[data-app-view="home"] .alert-compact-details[open] {
  margin-top: .65rem;
}

body[data-app-view="home"] .alert-headline {
  margin: .7rem 0 .55rem;
  font-size: .82rem;
  line-height: 1.4;
}

body[data-app-view="home"] .alert-meta {
  gap: .35rem .8rem;
  font-size: .72rem;
}

body[data-app-view="home"] .alert-area {
  margin-top: .55rem;
  font-size: .76rem;
  line-height: 1.4;
}

body[data-app-view="home"] .alert-nws-heading {
  display: block;
  margin-top: .8rem;
  color: var(--text);
  font-size: .76rem;
}

body[data-app-view="home"] .alert-compact-details > p:not(.alert-headline):not(.alert-area) {
  margin-top: .5rem;
  font-size: .76rem;
  line-height: 1.45;
}

body[data-app-view="home"] .alert-map-action {
  right: .7rem;
  bottom: .65rem;
  min-width: 10.5rem;
  margin-top: 0;
  padding: .55rem .7rem;
}

body[data-app-view="home"] .alert-map-action-title {
  font-size: .78rem;
}

body[data-app-view="home"] .alert-map-action-subtitle {
  font-size: .65rem;
}

body[data-app-view="home"] .alert-card:hover::after {
  display: none;
}

@media (max-width: 999px) {
  body[data-app-view="home"] .alert-card {
    padding: .8rem .85rem .85rem 1rem;
  }

  body[data-app-view="home"] .alert-map-action {
    position: static;
    width: auto;
    min-width: 0;
    margin-top: .55rem;
    padding: .55rem .7rem;
  }
}

@media (max-width: 700px) {
  body[data-app-view="home"] .alerts-section .section-heading {
    margin-bottom: .45rem;
  }

  body[data-app-view="home"] .alerts-status {
    font-size: .7rem;
  }

  body[data-app-view="home"] .alert-card {
    padding: .72rem .75rem .78rem .9rem;
  }

  body[data-app-view="home"] .alert-header {
    align-items: flex-start;
  }

  body[data-app-view="home"] .alert-header h3 {
    padding-right: 0;
    font-size: .96rem;
  }

  body[data-app-view="home"] .alert-map-action {
    min-height: 40px;
  }
}

/* Sprint 6.5.8b - compact quick-reference forecast card */
body[data-app-view="home"] .home-forecast-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(22rem, .9fr);
  gap: 1.2rem;
  align-items: stretch;
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  overflow: hidden;
}

.home-forecast-primary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.home-forecast-icon {
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  flex: 0 0 auto;
  border: 1px solid rgba(99,213,255,.22);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,190,92,.22), transparent 62%),
    rgba(255,255,255,.035);
  color: var(--accent-2);
  font-size: 3rem;
  line-height: 1;
}

.home-forecast-temperature {
  min-width: 0;
}

body[data-app-view="home"] .home-forecast-temperature .eyebrow {
  margin-bottom: .25rem;
}

body[data-app-view="home"] .home-forecast-temperature .temperature {
  display: inline-flex;
  align-items: flex-start;
  margin-right: .8rem;
  vertical-align: middle;
}

body[data-app-view="home"] .home-forecast-temperature .temperature span {
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: .95;
}

body[data-app-view="home"] .home-forecast-temperature .temperature sup {
  margin-top: .35rem;
  font-size: .95rem;
}

body[data-app-view="home"] .home-forecast-temperature h2 {
  display: inline;
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  vertical-align: .55rem;
}

body[data-app-view="home"] .home-forecast-temperature #current-summary {
  display: block;
  max-width: 46rem;
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
}

.home-forecast-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(255,255,255,.025);
}

.home-forecast-facts > div {
  display: grid;
  align-content: center;
  gap: .2rem;
  min-width: 0;
  padding: .72rem .85rem;
}

.home-forecast-facts > div:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.home-forecast-facts > div:nth-child(-n+2) {
  border-bottom: 1px solid var(--border);
}

.home-forecast-facts span {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-forecast-facts strong {
  overflow: hidden;
  color: var(--text);
  font-size: .98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body[data-app-view="home"] .home-forecast-card {
    grid-template-columns: 1fr;
  }

  .home-forecast-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-forecast-facts > div {
    border-bottom: 0 !important;
    border-right: 1px solid var(--border);
  }

  .home-forecast-facts > div:last-child {
    border-right: 0;
  }
}

@media (max-width: 700px) {
  body[data-app-view="home"] .home-forecast-card {
    gap: .8rem;
    padding: .85rem;
  }

  .home-forecast-primary {
    grid-template-columns: 4.1rem minmax(0, 1fr);
    gap: .75rem;
  }

  .home-forecast-icon {
    width: 4.1rem;
    height: 4.1rem;
    border-radius: 1rem;
    font-size: 2.35rem;
  }

  body[data-app-view="home"] .home-forecast-temperature .temperature span {
    font-size: 3.15rem;
  }

  body[data-app-view="home"] .home-forecast-temperature h2 {
    display: block;
    margin-top: .2rem;
    font-size: 1.15rem;
  }

  body[data-app-view="home"] .home-forecast-temperature #current-summary {
    font-size: .78rem;
  }

  .home-forecast-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-forecast-facts > div {
    border-right: 0;
  }

  .home-forecast-facts > div:nth-child(odd) {
    border-right: 1px solid var(--border);
  }

  .home-forecast-facts > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border) !important;
  }
}

/* Sprint 6.5.8c v4 mobile active location */
.mobile-location-strip {
  display: none;
}

@media (max-width: 760px) {
  .mobile-location-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .75rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .035);
  }

  .mobile-location-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .12rem;
  }

  #mobile-location-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    line-height: 1.2;
  }
}


/* Sprint 6.6.3 - Unified observed / NOW / forecast timeline */
.radar-observed-label.forecast { color: #b86cff; }
.radar-timeline-shell { position: relative; padding-top: 1.55rem; }
.radar-timeline-shell .radar-timeline { margin-top: .45rem; }
.radar-now-marker {
  position: absolute; left: var(--radar-now-position, 50%); top: 0;
  transform: translateX(-50%); font-size: .66rem; font-weight: 900;
  letter-spacing: .08em; color: var(--text); z-index: 2;
}
.radar-now-marker::after {
  content: ""; position: absolute; left: 50%; top: 1rem; height: 2.1rem;
  border-left: 2px solid currentColor; opacity: .65;
}
.radar-zone-label {
  position: absolute; top: 0; font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; color: var(--muted);
}
.radar-zone-label.observed { left: 0; }
.radar-zone-label.forecast { right: 0; color: #b86cff; }
.radar-model-disclaimer {
  margin: .2rem 0 .8rem; padding: .55rem .7rem; border: 1px solid var(--border);
  border-radius: .55rem; color: var(--muted); font-size: .75rem;
}


/* Sprint 6.6.3a - timeline drag / viewport stability
   Keep the timeline region's height stable while crossing NOW and prevent
   browser scroll anchoring from moving the page during asynchronous frames. */
.radar-animation {
  overflow-anchor: none;
}

.radar-timeline-shell,
.radar-timeline {
  overflow-anchor: none;
}

.radar-model-disclaimer {
  min-height: 2.15rem;
  box-sizing: border-box;
  transition: opacity 120ms ease;
}

.radar-model-disclaimer.is-inactive {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* Sprint 6.6.3b - hard viewport stability during range interaction */
html.radar-timeline-interacting,
html.radar-timeline-interacting body {
  overflow-anchor: none !important;
}


/* Sprint 6.6.3f - Futurecast readiness / preload state */
.futurecast-readiness {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  margin-left: .7rem;
  padding: .18rem .48rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
  vertical-align: middle;
}

.futurecast-readiness[data-state="preparing"] {
  opacity: .82;
}

.futurecast-readiness[data-state="ready"] {
  color: #8de3b0;
}

.futurecast-readiness[data-state="unavailable"] {
  color: #ff9d9d;
}


/* Sprint 6.6.4 - Futurecast animation */
.radar-playback-phase {
  display: none;
  margin-left: 0.45rem;
  padding: 0.18rem 0.48rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1;
  vertical-align: middle;
}

.radar-animation.is-playing .radar-playback-phase {
  display: inline-flex;
  align-items: center;
}

.radar-playback-phase[data-phase="observed"] {
  opacity: 0.82;
}

.radar-playback-phase[data-phase="now"] {
  opacity: 1;
  transform: scale(1.06);
}

.radar-playback-phase[data-phase="forecast"] {
  opacity: 1;
}

.radar-animation[data-phase="now"] .radar-now-marker {
  font-weight: 900;
}

.radar-animation.is-playing[data-phase="now"] .radar-now-marker {
  animation: radar-now-pulse 0.85s ease-in-out 1;
}

@keyframes radar-now-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .radar-animation.is-playing[data-phase="now"] .radar-now-marker {
    animation: none;
  }
}


/* Sprint 6.6.4d - mobile radar layout stability.
   During direct timeline scrubbing the radar status text changes rapidly.
   On a narrow viewport, status strings can wrap from one line to two, changing
   the radar section height by roughly one line (~22 px) and visibly pushing the
   Travel section up/down. Keep the mobile radar status to one reserved line. */
@media (max-width: 720px) {
  .radar-section > .section-heading {
    min-width: 0;
  }

  .radar-section > .section-heading > div {
    flex: 0 0 auto;
    min-width: 0;
  }

  #radar-status {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 52vw;
    min-height: 1.4rem;
    line-height: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
}


/* Sprint 6.6.6 - publication-aware Futurecast status. */
.futurecast-readiness[data-state="partial"] {
  color: #ffd27d;
}


/* ==========================================================
   VALLEYWEATHER TRAVEL INTELLIGENCE 7.0.63
   ========================================================== */

.vw-route-intelligence {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(127, 127, 127, 0.28);
    border-radius: 0.8rem;
    background: rgba(127, 127, 127, 0.06);
}

.vw-route-intelligence[hidden] {
    display: none !important;
}

.vw-route-intelligence__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.vw-route-intelligence__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.vw-route-intelligence__secure {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    opacity: 0.78;
}

.vw-route-intelligence__grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(135px, 1fr)
    );
    gap: 0.7rem;
}

.vw-route-intelligence__item {
    min-width: 0;
    padding: 0.7rem;
    border-radius: 0.65rem;
    background: rgba(127, 127, 127, 0.08);
}

.vw-route-intelligence__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.68;
}

.vw-route-intelligence__value {
    display: block;
    font-size: 0.96rem;
    font-weight: 650;
    word-break: break-word;
}

.vw-route-intelligence__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.vw-route-intelligence__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.82;
}

.vw-route-intelligence__alert {
    margin-top: 0.8rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    background: rgba(127, 127, 127, 0.09);
}

.vw-route-intelligence__alert[hidden] {
    display: none !important;
}

.vw-route-intelligence__alert-title {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.vw-route-intelligence--on-route
.vw-route-intelligence__dot {
    color: #239b56;
}

.vw-route-intelligence--near-route
.vw-route-intelligence__dot {
    color: #c69214;
}

.vw-route-intelligence--off-route
.vw-route-intelligence__dot {
    color: #c0392b;
}

@media (max-width: 640px) {
    .vw-route-intelligence {
        padding: 0.8rem;
    }

    .vw-route-intelligence__grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }
}


/* ==========================================================
   VALLEYWEATHER TRAVEL PLANNER 7.0.66
   ========================================================== */

.vw-travel-planner {
    margin-top: 1rem;
    padding: 1.4rem;
    border: 1px solid rgba(127, 127, 127, 0.28);
    border-radius: 1rem;
    background: rgba(127, 127, 127, 0.06);
}

.vw-travel-planner__title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 750;
}

.vw-travel-planner__description {
    margin: 0 0 1.2rem;
    opacity: 0.78;
}

.vw-travel-planner__form {
    display: grid;
    grid-template-columns:
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        minmax(170px, 0.7fr)
        auto;
    gap: 0.85rem;
    align-items: end;
}

.vw-travel-planner__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.vw-travel-planner__label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.76;
}

.vw-travel-planner__input {
    box-sizing: border-box;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(127, 127, 127, 0.32);
    border-radius: 0.7rem;
    background: rgba(127, 127, 127, 0.08);
    color: inherit;
    font: inherit;
}

.vw-travel-planner__button {
    min-height: 3rem;
    padding: 0.7rem 1.2rem;
    border: 0;
    border-radius: 0.75rem;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.vw-travel-planner__button:disabled {
    cursor: wait;
    opacity: 0.6;
}

.vw-travel-planner__message {
    margin-top: 0.9rem;
    min-height: 1.2rem;
}

.vw-travel-planner__message[data-state="error"] {
    font-weight: 650;
}

.vw-travel-result {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(127, 127, 127, 0.22);
    border-radius: 0.8rem;
    background: rgba(127, 127, 127, 0.05);
}

.vw-travel-result[hidden] {
    display: none !important;
}

.vw-travel-result__route {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: baseline;
}

.vw-travel-result__route-title {
    font-size: 1.05rem;
    font-weight: 750;
}

.vw-travel-result__meta {
    opacity: 0.72;
}

@media (max-width: 900px) {
    .vw-travel-planner__form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .vw-travel-planner__form {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   VALLEYWEATHER TRAVEL RESULTS 7.0.68
   ========================================================== */

.vw-trip-dashboard {
    margin-top: 1rem;
}

.vw-trip-dashboard__grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(145px, 1fr)
        );
    gap: 0.75rem;
}

.vw-trip-dashboard__card {
    padding: 0.9rem;
    border: 1px solid rgba(127, 127, 127, 0.24);
    border-radius: 0.8rem;
    background: rgba(127, 127, 127, 0.055);
}

.vw-trip-dashboard__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    opacity: 0.65;
}

.vw-trip-dashboard__value {
    display: block;
    font-size: 1rem;
    font-weight: 750;
}

.vw-trip-dashboard__guidance {
    margin-top: 0.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(127, 127, 127, 0.22);
    border-radius: 0.8rem;
    background: rgba(127, 127, 127, 0.04);
}

.vw-trip-dashboard__guidance-title {
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    font-weight: 750;
    text-transform: uppercase;
    opacity: 0.65;
}

.vw-trip-dashboard__guidance-text {
    line-height: 1.45;
}

/* ==========================================================
   VALLEYWEATHER NAVIGATION CLIENT LIFECYCLE 7.0.74
   ========================================================== */

#vw-travel-planner[data-vw-navigation-freshness="stale"]
.vw-travel-planner__message {
    border-left: 3px solid currentColor;
    padding-left: 0.75rem;
}

.vw-travel-planner__message[data-state="stale"] {
    font-weight: 600;
}