:root {
  --bg-top: #0a1420;
  --bg-bottom: #040913;
  --panel: rgba(18, 28, 43, 0.88);
  --panel-soft: rgba(182, 204, 230, 0.045);
  --panel-strong: rgba(182, 204, 230, 0.065);
  --panel-secondary: rgba(12, 19, 31, 0.84);
  --stroke: rgba(173, 197, 228, 0.14);
  --stroke-soft: rgba(173, 197, 228, 0.09);
  --text: #f5f9ff;
  --muted: #98acc1;
  --blue: #63cbff;
  --teal: #4bc7ba;
  --gold: #d4ab67;
  --green: #66d7ab;
  --red: #ff7d5e;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  --chart-temp: #63cbff;
  --chart-temp-area: rgba(99, 203, 255, 0.1);
  --chart-temp-fill: rgba(99, 203, 255, 0.16);
  --chart-model: #d4ab67;
  --chart-wind: #4bc7ba;
  --chart-rain-chance: #43bea8;
  --chart-rain-bars: #49dbff;
  --chart-pressure: #d0ad72;
  --chart-humidity: #8fa6bc;
  --chart-visibility: #c8d4df;
  --chart-cloud: #8ea2bb;
  --chart-cloud-fill: rgba(142, 162, 187, 0.14);
  --chart-secondary: #8c9fb6;
  --chart-severe: #ff7d5e;
  --chart-point-fill: #0d1624;
  --chart-grid: rgba(255, 255, 255, 0.08);
  --chart-guide: rgba(214, 226, 242, 0.18);
  --card-label-size: 0.82rem;
  --card-label-spacing: 0.1em;
  --card-value-size: 1.32rem;
  --card-value-size-compact: 1.12rem;
  --card-helper-size: 0.96rem;
  --card-helper-line: 1.44;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(99, 203, 255, 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(75, 199, 186, 0.08), transparent 24%),
    linear-gradient(165deg, var(--bg-top), var(--bg-bottom));
}

.app-shell {
  max-width: 1760px;
  margin: 0 auto;
  padding: 14px 14px 18px;
}

.hero,
.card,
.settings-panel {
  border: 1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.008)),
    var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(560px, 0.88fr);
  gap: 8px 16px;
  align-items: start;
  padding: 8px 10px 9px;
  border-radius: 20px;
}

.hero-left {
  display: grid;
  gap: 6px;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.hero-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hero-right {
  display: grid;
  gap: 7px;
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-content: start;
}

.hero-side-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.hero-side-utility {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.hero-brandbar {
  display: block;
}

.eyebrow {
  margin: 0 0 4px;
  color: rgba(226, 240, 255, 0.76);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.hero h1,
.card h2,
.module-header h3 {
  margin: 0;
  line-height: 1.02;
}

.hero h1 {
  font-size: clamp(2.08rem, 3vw, 3rem);
  letter-spacing: -0.01em;
}

.hero-brandgroup {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.hero-brandcopy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.hero-brandmark {
  display: block;
  flex: 0 0 auto;
  height: auto;
  object-fit: contain;
}

.hero-brandmark-desktop {
  width: 96px;
  height: 74px;
  margin-right: -10px;
  object-fit: cover;
  object-position: center 24%;
}

.hero-brandmark-mobile {
  display: none;
  width: 42px;
}

.hero-tagline {
  margin: 0;
  color: rgba(158, 179, 205, 0.86);
  font-size: 0.8rem;
  line-height: 1.18;
  font-weight: 500;
}

.hero-tagline-dash {
  display: none;
}

.card h2 {
  font-size: 1.08rem;
}

.module-header h3 {
  font-size: 1.02rem;
}

.hero-text,
.narrative-copy,
.settings-panel p,
.status-label,
.radar-footer,
.provider-message,
.metric small,
.alerts-list p,
.confidence-item p,
.signal-chip small {
  color: var(--muted);
}

.provider-message {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.42;
}

.hero-text {
  max-width: 40rem;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.24;
}

.hero-solar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke-soft);
}

.hero-solar-desktop {
  display: none;
}

.hero-solar-status.is-unavailable {
  opacity: 0.8;
}

.hero-solar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.hero-solar-icon .weather-visual.tiny {
  transform: scale(0.94);
  transform-origin: center;
}

.hero-solar-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hero-solar-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.hero-solar-kicker,
.hero-solar-secondary {
  margin: 0;
}

.hero-solar-kicker {
  color: rgba(226, 240, 255, 0.72);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}

.hero-solar-copy strong {
  font-size: 0.94rem;
  line-height: 1.08;
}

.hero-mobile-alert-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.hero-solar-secondary {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.28;
}

.hero-actions,
.settings-actions,
.radar-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-actions {
  margin-top: 0;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: auto;
  padding-top: 0;
}

.hero-actions .hero-tool-button {
  gap: 6px;
  min-height: 28px;
  width: 100%;
  padding: 0 10px;
  border-color: var(--stroke-soft);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  line-height: 1;
}

.hero-actions .hero-icon-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
}

.hero-actions .hero-icon-button .hero-tool-icon {
  width: 15px;
  height: 15px;
}

.hero-actions .hero-icon-button .hero-tool-icon svg {
  width: 15px;
  height: 15px;
}

.hero-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  color: rgba(223, 243, 255, 0.86);
}

.hero-tool-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.hero-meta-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: end;
  gap: 3px 16px;
  min-width: 0;
  flex: 1 1 auto;
}

.hero-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  justify-self: end;
}

.hero-meta-label,
.hero-meta-value {
  margin: 0;
}

.hero-meta-label {
  color: rgba(210, 229, 248, 0.68);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.hero-meta-value {
  overflow: hidden;
  max-width: 16rem;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-switcher-wrap {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hero-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.hero-place-switcher {
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--stroke-soft);
}

.hero-place-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hero-mobile-shell,
.mobile-top-shell,
.mobile-header-row,
.mobile-solar-row,
.mobile-alert-row {
  display: contents;
}

@media (min-width: 821px) {
  .hero {
    gap: 8px 16px;
  }

  .hero-left {
    gap: 6px;
  }

  .hero-solar-mobile {
    display: none;
  }

  .hero-side-utility {
    grid-template-columns: minmax(210px, 1fr) minmax(250px, 1fr);
    align-items: stretch;
    gap: 7px;
  }

  .hero-meta-rail {
    align-items: center;
  }

  .hero-place-switcher {
    min-height: 54px;
    padding: 7px 8px;
    align-content: start;
  }

  .hero-place-switcher .place-switcher {
    min-height: 34px;
    align-items: center;
  }

  .hero-solar-desktop {
    display: flex;
    min-height: 54px;
    padding: 7px 8px;
    align-items: center;
  }

  .hero-solar-desktop .hero-solar-icon {
    width: 28px;
    height: 28px;
  }

  .hero-solar-desktop .hero-solar-icon .weather-visual.tiny {
    transform: scale(0.86);
  }

  .hero-solar-desktop .hero-solar-kicker {
    display: none;
  }

  .hero-solar-desktop .hero-solar-copy {
    gap: 1px;
  }

  .hero-solar-desktop .hero-solar-copy strong {
    font-size: 0.84rem;
    line-height: 1.06;
    white-space: nowrap;
  }

  .hero-solar-desktop .hero-solar-secondary {
    font-size: 0.72rem;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.hero-chip {
  white-space: nowrap;
}

.primary-button,
.secondary-button,
.secondary-link,
select,
input {
  border-radius: 999px;
  font: inherit;
}

.primary-button,
.secondary-button,
.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.88rem;
}

.primary-button:disabled,
.secondary-button:disabled,
.place-chip:disabled,
.frame-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.primary-button {
  background: linear-gradient(135deg, var(--blue), #b3e1ff);
  color: #08131f;
  font-weight: 700;
}

.secondary-button,
.secondary-link {
  background: rgba(255, 255, 255, 0.028);
  border-color: var(--stroke);
  color: var(--text);
}

.secondary-button.is-active {
  background: rgba(99, 203, 255, 0.14);
  border-color: rgba(99, 203, 255, 0.34);
  color: #dff3ff;
}

.place-switcher,
.saved-places-list,
.radar-frames,
.signal-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.place-chip,
.frame-button,
.signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
}

.place-chip,
.frame-button {
  cursor: pointer;
}

.place-chip.active,
.frame-button.active {
  background: rgba(99, 203, 255, 0.14);
  border-color: rgba(99, 203, 255, 0.32);
}

.place-chip .chip-home {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(245, 204, 116, 0.14);
  color: #ffe3a3;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.signal-ribbon {
  margin-top: 10px;
}

.signal-chip {
  align-items: flex-start;
  gap: 10px;
  min-height: auto;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.026);
}

.signal-chip strong {
  font-size: 0.86rem;
}

.signal-chip small {
  display: block;
  font-size: 0.77rem;
  line-height: 1.2;
}

.status-card {
  padding: 7px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
}

.status-label {
  margin: 0;
  font-size: 8px;
  letter-spacing: 0.16em;
}

.status-value {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.08;
  font-weight: 700;
  color: var(--text);
}

.settings-panel {
  margin-top: 20px;
  padding: 20px;
  border-radius: 24px;
}

.settings-block + .settings-block {
  margin-top: 24px;
}

.block-header h3 {
  margin: 0;
  font-size: 1.04rem;
}

.hidden {
  display: none !important;
}

.panel-header,
.card-header,
.module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.compact-header {
  margin-bottom: 8px;
}

.compact-header .eyebrow {
  margin-bottom: 4px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.settings-span-2 {
  grid-column: span 2;
}

.settings-grid label {
  display: grid;
  gap: 8px;
  font-size: 14px;
}

.local-override-grid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.toggle-card,
.override-selection-card,
.saved-place-override-note {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--panel-soft);
}

.toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.toggle-card-copy {
  display: grid;
  gap: 6px;
}

.toggle-card-copy strong,
.override-selection-card strong,
.saved-place-override-note strong {
  font-size: 0.94rem;
}

.toggle-card-copy small,
.override-selection-card p,
.saved-place-override-note p,
.override-selection-card small {
  color: var(--muted);
  line-height: 1.4;
}

.override-selection-card p,
.override-selection-card small,
.saved-place-override-note p {
  margin: 0;
}

.toggle-card input[type="checkbox"] {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}

.override-selection-card {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.override-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.saved-place-override-note {
  flex: 1 1 100%;
}

.settings-disclosure {
  margin-top: 24px;
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.settings-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure-summary-copy {
  display: grid;
  gap: 4px;
}

.settings-disclosure > summary small {
  color: var(--muted);
  line-height: 1.35;
  max-width: 420px;
  text-align: right;
}

.settings-disclosure-body {
  padding: 0 18px 18px;
}

.saved-place-item {
  flex: 1 1 280px;
  min-width: 0;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  background: var(--panel-soft);
}

.saved-place-header,
.saved-place-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.saved-place-item h4 {
  margin: 0;
  font-size: 0.98rem;
}

.saved-place-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.saved-place-actions {
  margin-top: 14px;
}

.saved-place-actions button {
  min-height: 36px;
  padding: 0 13px;
}

.settings-actions.compact {
  margin-top: 16px;
}

input,
select {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--stroke);
  color: var(--text);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  grid-auto-flow: dense;
  align-items: start;
}

.analysis-grid {
  order: 3;
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  grid-auto-flow: dense;
  align-items: start;
}

.analysis-main-stack,
.analysis-side-stack {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.analysis-main-stack > .analysis-media-grid {
  min-width: 0;
}

.analysis-main-stack > .card,
.analysis-media-grid > .card,
.analysis-side-stack > .card {
  grid-column: auto;
  align-self: start;
  min-width: 0;
}

.analysis-deck-grid {
  order: 3;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  grid-auto-flow: dense;
  align-items: start;
}

.analysis-lower-shell {
  order: 3;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.54fr) minmax(320px, 0.86fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.analysis-main-stack,
.analysis-ops-rail,
.analysis-utility-side {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.analysis-main-stack > .card,
.analysis-ops-rail > .card,
.analysis-utility-grid > .card,
.analysis-utility-side > .card,
.station-lab-grid > .module-panel {
  grid-column: auto;
  min-width: 0;
}

.station-lab-card {
  display: grid;
  gap: 8px;
}

.station-summary-panel {
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background: var(--panel-soft);
}

.station-summary-grid {
  margin-top: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.station-summary-text {
  margin-top: 8px;
}

.station-lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.station-context-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analysis-history-card {
  grid-column: auto;
}

.analysis-utility-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  gap: 8px;
  align-items: start;
}

.analysis-ops-rail .provider-message,
.analysis-main-stack .provider-message,
.analysis-utility-side .provider-message {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.decision-rail-card {
  display: grid;
  gap: 8px;
}

.decision-rail-grid {
  display: grid;
  gap: 8px;
}

.card {
  padding: 10px;
  border-radius: 16px;
  min-width: 0;
  grid-column: span 4;
  align-self: start;
}

.now-card {
  order: 2;
  grid-column: span 4;
}

.forecast-card {
  order: 2;
  grid-column: span 12;
}

.local-stage-card {
  order: 1;
  grid-column: span 6;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 612px;
}

.radar-card {
  order: 1;
  grid-column: span 8;
  display: grid;
  gap: 8px;
}

.deck-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.span-3 {
  grid-column: span 3;
}

.span-6 {
  grid-column: span 6;
}

.national-card {
  order: 1;
  grid-column: span 6;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.decision-card {
  order: 6;
  grid-column: span 4;
}

.station-card {
  order: 4;
  grid-column: span 8;
}

.history-card {
  order: 7;
  grid-column: span 12;
}

.support-rail-card {
  order: 9;
  grid-column: span 4;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(173, 197, 228, 0.16);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.pill-blue {
  color: #d7f1ff;
  background: rgba(99, 203, 255, 0.14);
}

.pill-gold {
  color: #f5e0b2;
  background: rgba(212, 171, 103, 0.14);
}

.pill-red {
  color: #ffe0d6;
  background: rgba(255, 125, 94, 0.14);
}

.pill-green {
  color: #d8fff0;
  background: rgba(102, 215, 171, 0.12);
}

.pill-slate {
  color: #d5deea;
  background: rgba(255, 255, 255, 0.045);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.metric,
.narrative-box,
.hourly-item,
.daily-item,
.confidence-item,
.alert-item,
.provider-item,
.trend-card,
.detail-item,
.launch-link,
.module-panel {
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background: var(--panel-soft);
}

.metric {
  padding: 12px;
}

.metric span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.metric strong {
  display: block;
  margin-top: 7px;
  font-size: 1.38rem;
}

.metric small {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.25;
}

.narrative-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.narrative-box {
  padding: 13px;
}

.narrative-title {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.74);
}

.forecast-lab,
.forecast-stack,
.forecast-top-grid,
.forecast-main-stack,
.forecast-side-stack,
.forecast-bottom-grid,
.analysis-media-grid,
.support-rail-stack,
.decision-grid,
.station-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  align-items: start;
}

.forecast-stack,
.support-rail-stack {
  grid-template-columns: 1fr;
}

.forecast-top-grid {
  grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.82fr);
  align-items: start;
}

.forecast-main-stack,
.forecast-side-stack {
  grid-template-columns: 1fr;
  align-content: start;
}

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

.analysis-media-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
}

.decision-grid,
.station-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.station-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.decision-grid > .module-panel:last-child {
  grid-column: 1 / -1;
}

.support-rail-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-rail-stack > .module-panel:first-child,
.support-rail-stack > .module-panel:last-child {
  grid-column: 1 / -1;
}

.media-card-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  align-items: start;
}

.history-deck-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(240px, 0.92fr);
  gap: 8px;
  align-items: start;
}

.analysis-history-card .history-deck-layout {
  grid-template-columns: minmax(0, 1.68fr) minmax(280px, 0.92fr);
}

.module-panel {
  padding: 8px;
  align-self: start;
}

.module-panel-wide {
  grid-column: span 2;
}

.daily-wide-panel,
.now-insights-panel {
  margin-top: 8px;
}

.history-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.54fr) minmax(280px, 0.92fr);
  gap: 8px;
  margin-top: 8px;
  align-items: start;
}

.history-panel > .module-header {
  grid-column: 1 / -1;
}

.history-header {
  align-items: center;
}

.history-chart-legend {
  margin-top: 0;
  justify-content: flex-end;
}

.mini-stack {
  margin-top: 10px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.72rem;
  color: var(--muted);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.radar-map {
  height: clamp(446px, 35vw, 522px);
  margin-top: 0;
  border-radius: 18px;
  overflow: hidden;
}

.radar-card-header {
  align-items: flex-start;
  gap: 10px 16px;
}

.radar-toolbar-main {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.radar-toolbar-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.radar-toolbar-main select {
  width: min(320px, 100%);
  min-width: 220px;
  flex: 0 0 220px;
}

.radar-map-shell {
  position: relative;
}

.radar-inspect-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.025);
}

.radar-inspect-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.radar-inspect-header h3 {
  margin: 0;
  font-size: 0.98rem;
}

.radar-inspect-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.radar-ops-panel {
  margin-top: 10px;
}

.radar-range-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radar-range-buttons .frame-button {
  margin-top: 0;
}

.radar-ops-legend {
  margin-top: 0;
}

.radar-map-overlay {
  position: absolute;
  top: 12px;
  left: 72px;
  right: 12px;
  z-index: 550;
  gap: 8px;
  margin-top: 0;
  pointer-events: none;
}

.radar-map-overlay > * {
  pointer-events: auto;
}

.radar-map-overlay .frame-button {
  backdrop-filter: blur(8px);
  background: rgba(11, 18, 32, 0.78);
  border-color: rgba(138, 155, 196, 0.28);
  color: rgba(244, 248, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(3, 10, 22, 0.26);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.radar-map-overlay .frame-button:hover {
  border-color: rgba(123, 174, 255, 0.4);
  background: rgba(18, 31, 56, 0.9);
}

.radar-map-overlay .frame-button.active,
.radar-map-overlay .frame-button[aria-pressed="true"] {
  color: #f8fbff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(2, 8, 18, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.radar-map-overlay .frame-button.active[data-overlay-key="satellite"],
.radar-map-overlay .frame-button[aria-pressed="true"][data-overlay-key="satellite"] {
  background: rgba(54, 116, 188, 0.46);
  border-color: rgba(94, 173, 255, 0.76);
}

.radar-map-overlay .frame-button.active[data-overlay-key="lightning"],
.radar-map-overlay .frame-button[aria-pressed="true"][data-overlay-key="lightning"] {
  background: rgba(156, 105, 24, 0.52);
  border-color: rgba(255, 201, 89, 0.78);
}

.radar-map-overlay .frame-button.active[data-overlay-key="spc"],
.radar-map-overlay .frame-button[aria-pressed="true"][data-overlay-key="spc"] {
  background: rgba(129, 43, 80, 0.56);
  border-color: rgba(255, 125, 182, 0.8);
}

.radar-map-overlay .frame-button.active[data-overlay-key="wpc"],
.radar-map-overlay .frame-button[aria-pressed="true"][data-overlay-key="wpc"] {
  background: rgba(31, 109, 76, 0.58);
  border-color: rgba(106, 240, 186, 0.78);
}

.radar-map-overlay .frame-button.active[data-overlay-key="warnings"],
.radar-map-overlay .frame-button[aria-pressed="true"][data-overlay-key="warnings"] {
  background: rgba(165, 46, 76, 0.58);
  border-color: rgba(255, 142, 154, 0.8);
}

.radar-map-overlay .frame-button.active[data-overlay-key="reports"],
.radar-map-overlay .frame-button[aria-pressed="true"][data-overlay-key="reports"] {
  background: rgba(146, 91, 18, 0.58);
  border-color: rgba(255, 200, 91, 0.78);
}

.radar-map.inspect-armed,
.radar-map.inspect-armed .leaflet-container {
  cursor: crosshair;
}

.future-radar-polygon {
  transition:
    fill-opacity 220ms linear,
    opacity 220ms linear,
    fill 220ms linear,
    stroke 220ms linear;
}

.national-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 8px;
  flex: 1;
  min-height: 0;
}

.national-summary-panel {
  display: grid;
  gap: 10px;
}

.national-status-stack {
  display: grid;
  gap: 6px;
}

.national-status-stack .provider-message,
.national-legend .provider-message {
  margin: 0;
}

.national-map {
  height: auto;
  min-height: 360px;
  border-radius: 16px;
  overflow: hidden;
}

.national-grid > .module-panel:first-child {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.national-grid > .module-panel:first-child .national-map {
  flex: 1;
}

.local-stage-shell {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  gap: 10px;
  margin-top: 8px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--stroke-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 197, 73, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.56), rgba(18, 31, 53, 0.86));
  min-height: 558px;
  height: 100%;
}

.local-stage-top {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(180px, 0.88fr);
  gap: 12px;
  align-items: center;
}

.local-stage-temp {
  font-size: clamp(4.2rem, 6vw, 5.8rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.local-stage-feels {
  margin-top: 10px;
  color: rgba(248, 251, 255, 0.88);
  font-size: 1.14rem;
}

.local-stage-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 18px;
}

.stage-stat {
  display: grid;
  gap: 4px;
}

.stage-stat span {
  color: var(--muted);
  font-size: 0.82rem;
}

.stage-stat strong {
  font-size: 1rem;
  font-weight: 600;
}

.local-stage-side {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.local-stage-visual {
  display: grid;
  place-items: center;
}

.local-stage-condition {
  font-size: 1.44rem;
  font-weight: 600;
}

.local-stage-dayline,
.local-stage-summary {
  color: rgba(219, 232, 247, 0.82);
  line-height: 1.4;
}

.local-stage-summary {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.92rem;
}

.local-stage-hourly {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  margin-top: 2px;
}

.local-stage-bottom {
  display: grid;
  grid-template-columns: minmax(260px, 0.84fr) minmax(0, 1.16fr);
  gap: 10px;
  min-height: 0;
  align-items: stretch;
}

.local-stage-panel {
  display: grid;
  gap: 10px;
  min-height: 100%;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.032);
}

.local-stage-panel-header {
  margin-bottom: 0;
}

.local-stage-pulse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

.stage-pulse-card {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.035);
}

.stage-pulse-card span {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.stage-pulse-card strong {
  font-size: 1.02rem;
}

.stage-pulse-card small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.28;
}

.local-stage-trend-chart {
  margin-top: 0;
  padding: 10px;
}

.local-stage-trend-chart .chart-legend {
  margin-top: 0;
  margin-bottom: 8px;
}

.local-stage-trend-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.32;
}

.forecast-chart-svg.local-stage-trend-svg {
  height: 190px;
}

.forecast-chart .stage-rain-bar {
  fill: rgba(73, 219, 255, 0.3);
}

.forecast-chart .stage-temp-area {
  fill: var(--chart-temp-area);
}

.forecast-chart .stage-temp-point {
  fill: var(--chart-point-fill);
  stroke: var(--chart-temp);
  stroke-width: 1.8;
}

.forecast-chart .stage-pressure-point {
  fill: var(--chart-point-fill);
  stroke: var(--chart-pressure);
  stroke-width: 1.6;
}

.stage-hour {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.stage-hour time,
.stage-hour small {
  color: var(--muted);
}

.stage-hour time {
  font-size: 0.76rem;
}

.stage-hour strong {
  font-size: 1rem;
}

.stage-hour small {
  display: block;
  font-size: 0.74rem;
  line-height: 1.28;
}

.weather-visual {
  position: relative;
  width: 128px;
  height: 96px;
}

.weather-visual-symbol {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 110px;
  height: 82px;
  transform: translate(-50%, -50%) scale(1.18);
  transform-origin: center;
}

.weather-visual.tiny {
  width: 42px;
  height: 30px;
}

.weather-visual.tiny .weather-visual-symbol {
  width: 34px;
  height: 24px;
  transform: translate(-50%, -50%) scale(1.18);
}

.weather-visual .orb {
  position: absolute;
  border-radius: 999px;
}

.weather-visual .sun {
  width: 38px;
  height: 38px;
  top: 4px;
  right: 8px;
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 247, 183, 0.95), rgba(255, 223, 109, 0.95) 36%, rgba(255, 196, 57, 0.98) 68%, rgba(255, 154, 26, 1) 100%);
  box-shadow:
    0 0 0 6px rgba(255, 208, 92, 0.08),
    0 0 24px rgba(255, 196, 57, 0.36),
    0 0 42px rgba(255, 169, 61, 0.18);
}

.weather-visual .sun::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 214, 87, 0.9) 0deg 14deg,
      transparent 14deg 44deg,
      rgba(255, 214, 87, 0.9) 44deg 58deg,
      transparent 58deg 88deg,
      rgba(255, 214, 87, 0.9) 88deg 102deg,
      transparent 102deg 132deg,
      rgba(255, 214, 87, 0.9) 132deg 146deg,
      transparent 146deg 176deg,
      rgba(255, 214, 87, 0.9) 176deg 190deg,
      transparent 190deg 220deg,
      rgba(255, 214, 87, 0.9) 220deg 234deg,
      transparent 234deg 264deg,
      rgba(255, 214, 87, 0.9) 264deg 278deg,
      transparent 278deg 308deg,
      rgba(255, 214, 87, 0.9) 308deg 322deg,
      transparent 322deg 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57% 65%, transparent 66%);
  mask: radial-gradient(circle, transparent 0 56%, #000 57% 65%, transparent 66%);
  opacity: 0.88;
}

.weather-visual .sun::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 32%, rgba(255, 252, 224, 0.96), rgba(255, 235, 140, 0.25) 42%, transparent 66%);
}

.weather-visual .moon {
  width: 34px;
  height: 34px;
  top: 6px;
  right: 10px;
  background: #d9ecff;
  box-shadow: inset -8px -2px 0 rgba(8, 16, 30, 0.28);
}

.weather-visual .cloud {
  position: absolute;
  background: linear-gradient(180deg, #f9fbff, #e1ebf5);
  border-radius: 999px;
  border: 4px solid rgba(183, 221, 255, 0.92);
  box-shadow:
    inset 0 -2px 0 rgba(173, 201, 228, 0.18),
    0 6px 14px rgba(6, 16, 34, 0.12);
}

.weather-visual .cloud-back {
  width: 60px;
  height: 32px;
  left: 24px;
  top: 22px;
}

.weather-visual .cloud-front {
  width: 48px;
  height: 26px;
  left: 48px;
  top: 36px;
}

.weather-visual .drop {
  position: absolute;
  width: 6px;
  height: 12px;
  bottom: 6px;
  border-radius: 999px 999px 999px 999px;
  background: linear-gradient(180deg, #6deeff, #1baeff);
  opacity: 0.9;
}

.weather-visual .drop-1 { left: 44px; transform: rotate(10deg); }
.weather-visual .drop-2 { left: 58px; transform: rotate(10deg); }
.weather-visual .drop-3 { left: 72px; transform: rotate(10deg); }

.weather-visual .bolt {
  position: absolute;
  left: 58px;
  bottom: 6px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 5px solid transparent;
  border-top: 20px solid #ffc93a;
  transform: skewX(-12deg);
  filter: drop-shadow(0 0 8px rgba(255, 198, 58, 0.28));
}

.weather-visual .snowflake,
.weather-visual .ice-mark,
.weather-visual .hail-dot,
.weather-visual .wind-mark,
.weather-visual .fog-line {
  position: absolute;
  display: none;
}

.weather-visual .snowflake {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  filter: drop-shadow(0 0 8px rgba(147, 230, 255, 0.22));
}

.weather-visual .snowflake::before,
.weather-visual .snowflake::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  border-radius: 999px;
  background: rgba(224, 249, 255, 0.96);
  transform: translateX(-50%);
}

.weather-visual .snowflake::after {
  transform: translateX(-50%) rotate(90deg);
}

.weather-visual .snowflake-1 {
  left: 42px;
  bottom: 8px;
  transform: rotate(45deg);
}

.weather-visual .snowflake-2 {
  left: 62px;
  bottom: 2px;
  transform: rotate(20deg);
}

.weather-visual .ice-mark {
  width: 11px;
  height: 15px;
  border-radius: 3px 3px 6px 6px;
  background: linear-gradient(180deg, #e6fbff, #78d9ff);
  border: 1px solid rgba(196, 245, 255, 0.92);
  box-shadow: 0 0 10px rgba(95, 216, 255, 0.22);
  transform: rotate(45deg);
}

.weather-visual .ice-mark-1 {
  left: 44px;
  bottom: 5px;
}

.weather-visual .ice-mark-2 {
  left: 64px;
  bottom: 0;
}

.weather-visual .hail-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 32%, #ffffff, #c9f4ff 54%, #74d9ff 100%);
  border: 1px solid rgba(218, 250, 255, 0.92);
  box-shadow: 0 0 10px rgba(117, 221, 255, 0.2);
}

.weather-visual .hail-dot-1 {
  left: 44px;
  bottom: 6px;
}

.weather-visual .hail-dot-2 {
  left: 68px;
  bottom: 0;
}

.weather-visual .wind-mark {
  left: 26px;
  width: 62px;
  height: 18px;
  border-top: 4px solid rgba(190, 235, 255, 0.92);
  border-radius: 999px;
  filter: drop-shadow(0 0 10px rgba(91, 211, 255, 0.2));
}

.weather-visual .wind-mark::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-top: 4px solid rgba(190, 235, 255, 0.92);
  border-right: 4px solid rgba(190, 235, 255, 0.92);
  border-radius: 999px;
}

.weather-visual .wind-mark-1 {
  top: 26px;
}

.weather-visual .wind-mark-2 {
  top: 44px;
  left: 18px;
  width: 54px;
  opacity: 0.72;
}

.weather-visual .fog-line {
  left: 28px;
  width: 62px;
  height: 4px;
  border-radius: 999px;
  background: rgba(193, 226, 249, 0.9);
  box-shadow: 0 0 10px rgba(185, 224, 249, 0.16);
}

.weather-visual .fog-line-1 {
  bottom: 16px;
}

.weather-visual .fog-line-2 {
  bottom: 6px;
  left: 36px;
  width: 50px;
  opacity: 0.72;
}

.weather-visual.sunny .cloud,
.weather-visual.clear .cloud,
.weather-visual.sunny .drop,
.weather-visual.clear .drop,
.weather-visual.sunny .bolt,
.weather-visual.clear .bolt {
  display: none;
}

.weather-visual.cloudy .orb,
.weather-visual.storm .orb,
.weather-visual.snow .orb,
.weather-visual.mix .orb,
.weather-visual.ice .orb,
.weather-visual.hail .orb,
.weather-visual.severe .orb {
  opacity: 0;
}

.weather-visual.rain .orb {
  opacity: 0;
}

.weather-visual.cloudy .drop,
.weather-visual.cloudy .bolt {
  display: none;
}

.weather-visual.partly .drop,
.weather-visual.partly .bolt {
  display: none;
}

.weather-visual.showers .bolt {
  display: none;
}

.weather-visual.showers .orb {
  opacity: 0.82;
}

.weather-visual.rain .bolt {
  display: none;
}

.weather-visual.snow .drop,
.weather-visual.snow .bolt,
.weather-visual.mix .bolt,
.weather-visual.ice .bolt,
.weather-visual.hail .drop,
.weather-visual.fog .drop,
.weather-visual.fog .bolt,
.weather-visual.wind .cloud,
.weather-visual.wind .drop,
.weather-visual.wind .bolt {
  display: none;
}

.weather-visual.snow .snowflake,
.weather-visual.mix .snowflake,
.weather-visual.ice .ice-mark,
.weather-visual.hail .hail-dot,
.weather-visual.wind .wind-mark,
.weather-visual.fog .fog-line {
  display: block;
}

.weather-visual.fog .orb {
  opacity: 0.28;
}

.weather-visual.fog .cloud {
  opacity: 0.82;
}

.weather-visual.severe .cloud {
  background: linear-gradient(180deg, #f8fbff, #d8e1ee);
  border-color: rgba(255, 142, 113, 0.86);
  box-shadow:
    inset 0 -2px 0 rgba(173, 201, 228, 0.18),
    0 8px 18px rgba(101, 18, 18, 0.22);
}

.weather-visual.severe .wind-mark,
.weather-visual.severe .hail-dot {
  display: block;
}

.weather-visual.severe .wind-mark {
  border-top-color: rgba(255, 126, 92, 0.88);
}

.weather-visual.severe .wind-mark::after {
  border-top-color: rgba(255, 126, 92, 0.88);
  border-right-color: rgba(255, 126, 92, 0.88);
}

.weather-visual.severe .hail-dot {
  background: radial-gradient(circle at 34% 32%, #ffffff, #ffd9d0 54%, #ff8d70 100%);
  border-color: rgba(255, 226, 217, 0.88);
}

.weather-visual.tiny .sun,
.weather-visual.tiny .moon {
  width: 12px;
  height: 12px;
  top: 0;
  right: 2px;
}

.weather-visual.tiny .sun::before {
  inset: -4px;
}

.weather-visual.tiny .sun::after {
  inset: 2px;
}

.weather-visual.tiny .cloud {
  border-width: 2px;
}

.weather-visual.tiny .cloud-back {
  width: 18px;
  height: 10px;
  left: 5px;
  top: 6px;
}

.weather-visual.tiny .cloud-front {
  width: 15px;
  height: 8px;
  left: 12px;
  top: 11px;
}

.weather-visual.tiny .drop {
  width: 3px;
  height: 6px;
  bottom: 0;
}

.weather-visual.tiny .drop-1 { left: 9px; }
.weather-visual.tiny .drop-2 { left: 15px; }
.weather-visual.tiny .drop-3 { left: 21px; }

.weather-visual.tiny .bolt {
  left: 16px;
  bottom: 0;
  border-left-width: 4px;
  border-right-width: 3px;
  border-top-width: 10px;
}

.weather-visual.tiny .snowflake {
  width: 5px;
  height: 5px;
}

.weather-visual.tiny .snowflake::before,
.weather-visual.tiny .snowflake::after {
  width: 1px;
}

.weather-visual.tiny .snowflake-1 {
  left: 9px;
  bottom: 2px;
}

.weather-visual.tiny .snowflake-2 {
  left: 18px;
  bottom: 0;
}

.weather-visual.tiny .ice-mark {
  width: 5px;
  height: 7px;
  border-radius: 2px 2px 4px 4px;
}

.weather-visual.tiny .ice-mark-1 {
  left: 10px;
  bottom: 1px;
}

.weather-visual.tiny .ice-mark-2 {
  left: 19px;
  bottom: -1px;
}

.weather-visual.tiny .hail-dot {
  width: 5px;
  height: 5px;
}

.weather-visual.tiny .hail-dot-1 {
  left: 10px;
  bottom: 2px;
}

.weather-visual.tiny .hail-dot-2 {
  left: 21px;
  bottom: 0;
}

.weather-visual.tiny .wind-mark {
  left: 6px;
  width: 20px;
  height: 7px;
  border-top-width: 2px;
}

.weather-visual.tiny .wind-mark::after {
  right: -3px;
  top: -4px;
  width: 7px;
  height: 7px;
  border-top-width: 2px;
  border-right-width: 2px;
}

.weather-visual.tiny .wind-mark-1 {
  top: 8px;
}

.weather-visual.tiny .wind-mark-2 {
  top: 15px;
  left: 3px;
  width: 17px;
}

.weather-visual.tiny .fog-line {
  left: 7px;
  width: 21px;
  height: 2px;
}

.weather-visual.tiny .fog-line-1 {
  bottom: 5px;
}

.weather-visual.tiny .fog-line-2 {
  bottom: 1px;
  left: 10px;
  width: 17px;
}

.weather-visual.sunny .sun,
.weather-visual.clear .moon {
  right: 32px;
}

.weather-visual.sunny .sun {
  top: 16px;
  width: 46px;
  height: 46px;
}

.weather-visual.clear .moon {
  top: 17px;
  width: 44px;
  height: 44px;
}

.weather-visual.sunny .sun::before {
  inset: -10px;
}

.weather-visual.sunny .sun::after {
  inset: 8px;
}

.weather-visual.tiny.sunny .sun,
.weather-visual.tiny.clear .moon {
  right: 9px;
}

.weather-visual.tiny.sunny .sun,
.weather-visual.tiny.clear .moon {
  top: 4px;
  width: 16px;
  height: 16px;
}

.weather-visual.tiny.sunny .sun::before {
  inset: -5px;
}

.weather-visual.tiny.sunny .sun::after {
  inset: 3px;
}

.forecast-chart {
  margin-top: 8px;
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.forecast-chart-svg {
  display: block;
  width: 100%;
  height: 264px;
}

.forecast-chart-svg.short-chart {
  height: 188px;
}

.forecast-chart-svg.atmosphere-chart-svg {
  height: 286px;
}

.forecast-chart-svg.history-chart-svg {
  height: 286px;
}

.forecast-chart .temp-line {
  fill: none;
  stroke: var(--chart-temp);
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.forecast-chart .comparison-line {
  fill: none;
  stroke: rgba(212, 171, 103, 0.92);
  stroke-width: 2.1;
  stroke-dasharray: 6 6;
}

.forecast-chart .apparent-line {
  fill: none;
  stroke: rgba(140, 159, 182, 0.82);
  stroke-width: 1.9;
  stroke-dasharray: 7 6;
}

.forecast-chart .wind-line {
  fill: none;
  stroke: var(--chart-wind);
  stroke-width: 2.5;
}

.forecast-chart .cloud-area {
  fill: var(--chart-cloud-fill);
}

.forecast-chart .cloud-line {
  fill: none;
  stroke: rgba(142, 162, 187, 0.88);
  stroke-width: 1.9;
  stroke-dasharray: 5 5;
}

.forecast-chart .range-band {
  fill: rgba(142, 162, 187, 0.12);
}

.forecast-chart .temp-area {
  fill: var(--chart-temp-area);
}

.forecast-chart .pop-bar {
  fill: rgba(67, 190, 168, 0.3);
}

.forecast-chart .wind-bar {
  fill: rgba(75, 199, 186, 0.32);
}

.forecast-chart .cloud-low-bar {
  fill: rgba(142, 162, 187, 0.18);
}

.forecast-chart .history-rain-bar {
  fill: rgba(73, 219, 255, 0.32);
}

.forecast-chart .history-temp-area {
  fill: var(--chart-temp-area);
}

.forecast-chart .history-temp-point {
  fill: var(--chart-point-fill);
  stroke: var(--chart-temp);
  stroke-width: 2.2;
}

.forecast-chart .history-pressure-point {
  fill: var(--chart-point-fill);
  stroke: var(--chart-pressure);
  stroke-width: 2;
}

.forecast-chart .history-latest-label {
  fill: rgba(248, 251, 255, 0.94);
  font-size: 10px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(8, 16, 30, 0.88);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.forecast-chart .period-band.night {
  fill: rgba(255, 255, 255, 0.035);
}

.forecast-chart .period-band.day {
  fill: rgba(255, 255, 255, 0.015);
}

.forecast-chart .grid-line {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.forecast-chart .chart-divider {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.forecast-chart .axis-label {
  fill: rgba(219, 232, 247, 0.72);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.forecast-chart .graph-label {
  paint-order: stroke;
  stroke: rgba(8, 16, 30, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
  font-weight: 700;
}

.forecast-chart .small-label,
.forecast-chart .chart-panel-label {
  font-size: 9px;
}

.forecast-chart .chart-point {
  fill: var(--chart-point-fill);
  stroke: currentColor;
  stroke-width: 2;
}

.forecast-chart .temp-point {
  color: var(--chart-temp);
}

.forecast-chart .daily-high-point {
  color: var(--chart-model);
}

.forecast-chart .daily-low-point {
  color: var(--chart-wind);
}

.forecast-chart .humidity-line {
  fill: none;
  stroke: var(--chart-humidity);
  stroke-width: 2.4;
}

.forecast-chart .visibility-line {
  fill: none;
  stroke: rgba(200, 212, 223, 0.78);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.forecast-chart .pressure-line {
  fill: none;
  stroke: var(--chart-pressure);
  stroke-width: 2.4;
}

.forecast-chart .atmosphere-point {
  fill: var(--chart-point-fill);
  stroke-width: 2;
}

.forecast-chart .humidity-point {
  stroke: var(--chart-humidity);
}

.forecast-chart .visibility-point {
  stroke: rgba(200, 212, 223, 0.92);
}

.forecast-chart .pressure-point {
  stroke: var(--chart-pressure);
}

.forecast-chart .atmosphere-axis-label-left {
  fill: rgba(143, 166, 188, 0.92);
}

.forecast-chart .atmosphere-axis-label-right {
  fill: rgba(208, 173, 114, 0.92);
}

.radar-frames {
  margin-top: 10px;
}

.frame-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.radar-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  font-size: 11px;
}

.hourly-strip,
.confidence-list,
.alerts-list,
.provider-list,
.webcam-grid,
.trend-cards,
.detail-grid,
.launch-board {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.hourly-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-strip {
  gap: 8px;
}

.hourly-item,
.daily-item,
.confidence-item,
.alert-item,
.provider-item,
.trend-card {
  padding: 9px;
}

.forecast-visual-grid {
  align-items: stretch;
}

.forecast-visual-grid .hourly-item {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  min-height: 146px;
  padding: 11px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.022);
}

.forecast-hour-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.forecast-hour-top .weather-visual.tiny {
  flex-shrink: 0;
  transform: scale(1.08);
  transform-origin: top right;
}

.forecast-visual-grid .hourly-item time {
  font-size: 0.74rem;
  letter-spacing: 0.03em;
}

.forecast-visual-grid .hourly-temp {
  margin-top: 0;
  font-size: 1.46rem;
  line-height: 0.94;
}

.forecast-visual-grid .hourly-item p {
  margin: 0;
  min-height: 2.45em;
}

.hourly-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.hourly-meta span {
  white-space: nowrap;
}

.hourly-item time,
.daily-item time {
  color: var(--muted);
  font-size: 10px;
}

.hourly-temp,
.daily-temp {
  margin-top: 4px;
  font-size: 1rem;
  font-weight: 700;
}

.hourly-item p {
  margin: 4px 0 0;
  min-height: 2.25em;
  font-size: 0.75rem;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hourly-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.daily-low {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.confidence-list {
  grid-template-columns: 1fr;
}

.confidence-item,
.provider-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.provider-copy,
.confidence-copy {
  min-width: 0;
}

.webcam-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-provider-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.visual-desk-card .webcam-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.visual-desk-card .media-provider-grid,
.video-desk-card .media-provider-grid {
  grid-template-columns: 1fr;
}

.media-provider-grid .provider-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  min-height: 100%;
  padding: 10px;
}

.media-provider-grid .pill {
  align-self: start;
}

.webcam-card {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background: var(--panel-soft);
  color: var(--text);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.webcam-card:hover {
  transform: translateY(-2px);
  border-color: rgba(86, 182, 255, 0.32);
  background: rgba(86, 182, 255, 0.08);
}

.webcam-card-live {
  align-content: start;
}

.webcam-thumb-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.04);
}

.webcam-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webcam-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
}

.webcam-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.webcam-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.webcam-card-actions {
  display: flex;
  justify-content: flex-start;
}

.webcam-copy {
  display: grid;
  gap: 4px;
}

.webcam-copy strong {
  font-size: 0.88rem;
}

.webcam-copy small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.28;
}

.alert-item h3,
.provider-copy h3,
.trend-card h3,
.confidence-copy h3 {
  margin: 0;
  font-size: 0.9rem;
}

.alert-item p,
.provider-item p,
.confidence-item p,
.trend-card p {
  margin: 7px 0 0;
  line-height: 1.36;
  font-size: 0.84rem;
}

.trend-note,
.history-chart-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.32;
}

.history-legend {
  margin-top: 8px;
}

.history-chart-shell {
  margin-top: 0;
}

.history-panel .trend-cards,
.history-deck-layout .trend-cards {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.compact-list .confidence-item {
  padding: 10px;
}

.alert-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}

.trend-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.station-trend-panel {
  grid-column: 1 / -1;
}

.station-trend-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

.national-detail-grid {
  margin-top: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.daily-detail-grid {
  margin-top: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.detail-item {
  padding: 10px;
}

.detail-item span {
  display: block;
  color: var(--muted);
  font-size: var(--card-label-size);
  letter-spacing: var(--card-label-spacing);
}

.detail-item strong {
  display: block;
  margin-top: 7px;
  font-size: var(--card-value-size);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.detail-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: var(--card-helper-line);
  font-size: var(--card-helper-size);
}

.detail-item strong.small-value {
  font-size: var(--card-value-size-compact);
  line-height: 1.26;
}

#sourceTrustGrid,
#forecastGuideGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.launch-board {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.launch-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 11px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.launch-link:hover {
  transform: translateY(-2px);
  border-color: rgba(86, 182, 255, 0.36);
  background: rgba(86, 182, 255, 0.08);
}

.compact-launch-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.launch-card .compact-launch-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analysis-utility-side .launch-card .compact-launch-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analysis-ops-rail #providerHealth {
  grid-template-columns: 1fr;
}

.analysis-utility-side .launch-link {
  min-height: 46px;
  padding: 10px;
}

.support-rail-card .module-panel {
  padding: 8px;
}

.support-rail-card .alerts-list,
.support-rail-card .provider-list,
.support-rail-card .launch-board {
  margin-top: 6px;
}

.support-rail-card .alert-item,
.support-rail-card .provider-item {
  padding: 8px;
}

.support-rail-card .launch-link {
  min-height: 42px;
  padding: 9px;
  font-size: 0.82rem;
}

.sparkline {
  width: 100%;
  height: 62px;
  margin-top: 8px;
}

.compact-chart {
  margin-top: 6px;
}

.compact-ribbon {
  margin-top: 6px;
  gap: 6px;
}

.compact-ribbon .signal-chip {
  padding: 6px 10px;
}

.chart-subheader {
  margin-top: 10px;
}

.search-results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.national-legend {
  margin-top: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.03);
}

.national-legend-row + .national-legend-row {
  margin-top: 10px;
}

.legend-title {
  display: block;
  margin-bottom: 6px;
  color: rgba(226, 240, 255, 0.78);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.national-temp-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.temp-swatch {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: white;
}

.temp-swatch.cold {
  background: linear-gradient(180deg, rgba(143, 121, 255, 0.96), rgba(79, 58, 182, 0.92));
}

.temp-swatch.cool {
  background: linear-gradient(180deg, rgba(89, 165, 255, 0.96), rgba(28, 86, 208, 0.92));
}

.temp-swatch.mild {
  background: linear-gradient(180deg, rgba(0, 224, 255, 0.96), rgba(0, 138, 193, 0.92));
}

.temp-swatch.warm {
  background: linear-gradient(180deg, rgba(255, 198, 73, 0.96), rgba(227, 125, 12, 0.92));
}

.temp-swatch.hot {
  background: linear-gradient(180deg, rgba(255, 117, 70, 0.96), rgba(196, 48, 0, 0.94));
}

.overlay-row .provider-message {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.search-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.03);
}

.search-result-card strong {
  display: block;
  font-size: 0.9rem;
}

.search-result-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.stack-label {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
}

textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border-radius: 18px;
  resize: vertical;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--stroke);
  color: var(--text);
  font: inherit;
}

.national-marker {
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  color: white;
  line-height: 1;
  white-space: nowrap;
}

.national-marker .city {
  display: block;
  font-size: 6px;
  margin-top: 0;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.58);
  text-shadow: 0 1px 2px rgba(8, 16, 30, 0.88);
}

.national-marker .value {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: currentColor;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  text-shadow:
    0 1px 2px rgba(8, 16, 30, 0.96),
    0 0 8px rgba(8, 16, 30, 0.72);
}

.national-marker .pop {
  display: none;
}

.national-marker.hot {
  color: #ff7e46;
}

.national-marker.warm {
  color: #ffc649;
}

.national-marker.mild {
  color: #00e0ff;
}

.national-marker.cool {
  color: #70b5ff;
}

.national-marker.cold {
  color: #ad84ff;
}

.national-map.night-frame {
  filter: saturate(0.92) brightness(0.78);
}

.radar-temp-marker {
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  color: white;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.radar-temp-marker .city {
  display: block;
  font-size: 5px;
  margin-top: 1px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.56);
  text-shadow: 0 1px 2px rgba(8, 16, 30, 0.92);
}

.radar-temp-marker .value {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: currentColor;
  text-shadow:
    0 1px 2px rgba(8, 16, 30, 0.96),
    0 0 8px rgba(8, 16, 30, 0.74);
}

.radar-temp-marker.hot {
  color: #ff7e46;
}

.radar-temp-marker.warm {
  color: #ffc649;
}

.radar-temp-marker.mild {
  color: #00e0ff;
}

.radar-temp-marker.cool {
  color: #70b5ff;
}

.radar-temp-marker.cold {
  color: #ad84ff;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 0 4px;
  color: rgba(226, 240, 255, 0.56);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.app-footer-copy {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}

.app-footer-legal,
.app-footer-brand {
  letter-spacing: normal;
}

.app-footer-brand {
  font-weight: 600;
}

.sparkline path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaflet-control-zoom,
.leaflet-bar {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

.leaflet-bar a {
  background: rgba(11, 18, 32, 0.84) !important;
  color: white !important;
}

@media (max-width: 1360px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(500px, 0.96fr);
  }

  .hero-left {
    grid-column: 1;
  }

  .hero-right {
    grid-column: 2;
  }

  .hero-meta-rail {
    justify-content: flex-end;
  }

  .analysis-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .now-card,
  .forecast-card,
  .local-stage-card,
  .national-card,
  .radar-card,
  .analysis-deck-grid {
    grid-column: span 12;
  }

  .analysis-deck-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .analysis-lower-shell {
    grid-template-columns: 1fr;
  }

  .analysis-ops-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .analysis-utility-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  }

  .station-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .station-context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .span-3 {
    grid-column: span 3;
  }

  .span-6 {
    grid-column: span 6;
  }

  .support-rail-stack,
  .national-grid {
    grid-template-columns: 1fr;
  }

  .forecast-top-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  }

  .media-card-stack,
  .analysis-media-grid,
  .forecast-bottom-grid,
  .decision-grid,
  .station-grid,
  .analysis-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-grid > .module-panel:last-child {
    grid-column: 1 / -1;
  }

  .history-deck-layout {
    grid-template-columns: 1fr;
  }

  .local-stage-top {
    grid-template-columns: 1fr;
  }

  .local-stage-hourly {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .local-stage-bottom {
    grid-template-columns: 1fr;
  }

  .module-panel-wide {
    grid-column: span 1;
  }
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-left,
  .hero-right,
  .hero-alerts {
    grid-column: 1;
  }

  .hero-side-top {
    display: grid;
    gap: 8px;
  }

  .hero-side-utility {
    grid-template-columns: 1fr;
  }

  .hero-meta-rail {
    justify-content: flex-start;
  }

  .hero-meta-item {
    justify-self: start;
  }

  .hero-right {
    grid-row: auto;
  }
}

@media (max-width: 980px) {
  .metrics-grid,
  .narrative-grid,
  .detail-grid,
  .daily-detail-grid,
  .national-detail-grid,
  .trend-cards,
  .webcam-grid,
  .media-provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-deck-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-lower-shell,
  .analysis-utility-grid,
  .station-lab-grid,
  .analysis-ops-rail {
    grid-template-columns: 1fr;
  }

  .span-3 {
    grid-column: span 1;
  }

  .span-6 {
    grid-column: span 2;
  }

  .hourly-strip,
  .forecast-visual-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-status {
    grid-template-columns: 1fr 1fr;
  }

  .forecast-ticker {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .history-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .history-chart-legend {
    justify-content: flex-start;
  }

  .history-panel {
    grid-template-columns: 1fr;
  }

  .history-deck-layout {
    grid-template-columns: 1fr;
  }

  .station-summary-grid,
  .station-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .local-stage-hourly {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .local-stage-pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .forecast-top-grid,
  .forecast-main-stack,
  .forecast-side-stack,
  .media-card-stack,
  .analysis-media-grid,
  .forecast-bottom-grid,
  .decision-grid,
  .station-grid,
  .analysis-side-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px 12px 26px;
  }

  .hero,
  .card,
  .settings-panel {
    padding: 16px;
    border-radius: 22px;
  }

  .app-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-footer-copy {
    justify-items: start;
    text-align: left;
  }

  .metrics-grid,
  .narrative-grid,
  .detail-grid,
  .daily-detail-grid,
  .national-detail-grid,
  .trend-cards,
  .webcam-grid,
  .media-provider-grid,
  .local-stage-metrics,
  .local-stage-pulse-grid,
  .local-stage-hourly,
  .hero-status {
    grid-template-columns: 1fr;
  }

  .hourly-strip,
  .forecast-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-deck-grid {
    grid-template-columns: 1fr;
  }

  .analysis-card-columns {
    grid-template-columns: 1fr;
  }

  .span-3,
  .span-6 {
    grid-column: span 1;
  }

  .history-panel .trend-cards {
    grid-template-columns: 1fr;
  }

  .launch-card .compact-launch-board {
    grid-template-columns: 1fr;
  }

  .settings-span-2 {
    grid-column: span 1;
  }

  .station-summary-grid,
  .station-context-grid {
    grid-template-columns: 1fr;
  }

  .analysis-support-stack .launch-card .compact-launch-board {
    grid-template-columns: 1fr;
  }

  .radar-footer,
  .card-header,
  .panel-header,
  .saved-place-header,
  .saved-place-actions,
  .module-header,
  .hero-title-row,
  .confidence-item,
  .provider-item,
  .search-result-card,
  .toggle-card,
  .settings-disclosure > summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-disclosure > summary small {
    text-align: left;
  }

  .forecast-ticker {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
  }

  .forecast-ticker-run {
    font-size: 0.8rem;
  }

  .radar-map {
    height: 380px;
  }

  .radar-map-overlay {
    left: 12px;
    right: 12px;
  }

  .national-map {
    height: 320px;
  }

  .forecast-chart-svg.atmosphere-chart-svg,
  .forecast-chart-svg.history-chart-svg {
    height: 286px;
  }
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.app-shell {
  max-width: 1880px;
}

.app-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.app-sidebar {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 14px;
  align-self: start;
  padding: 14px;
  min-height: calc(100vh - 28px);
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(99, 203, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(11, 20, 33, 0.94), rgba(8, 15, 26, 0.94));
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.app-main {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.sidebar-brand h2 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.06;
}

.sidebar-copy,
.sidebar-note p,
.section-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.42;
}

.section-nav {
  display: grid;
  gap: 8px;
}

.section-nav-link {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-decoration: none;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.section-nav-link:hover,
.section-nav-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(86, 182, 255, 0.34);
  background: rgba(86, 182, 255, 0.08);
  outline: none;
}

.section-nav-kicker {
  color: rgba(86, 182, 255, 0.88);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

.section-nav-link strong {
  font-size: 0.95rem;
  line-height: 1.1;
}

.section-nav-link small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.32;
}

.sidebar-note {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.028);
}

.content-workspace {
  display: grid;
  gap: 16px;
}

.dashboard-section {
  display: grid;
  gap: 10px;
  scroll-margin-top: 16px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.section-heading h2 {
  margin: 0;
  font-size: 1.22rem;
}

.section-copy {
  max-width: 46rem;
}

.hero-alerts {
  grid-column: 1;
  display: grid;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.032);
}

.hero-alerts.is-compact {
  align-self: start;
  gap: 0;
}

.hero-alerts.is-compact .hero-alerts-header {
  display: none;
}

.hero-alerts.is-compact .hero-alert-list {
  gap: 0;
}

.hero-alerts.is-compact .hero-alert-item {
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-alerts-header,
.hero-alert-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-alert-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

.hero-alerts-header h3 {
  font-size: 0.9rem;
}

.hero-alert-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.hero-alert-item {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid var(--stroke-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.025);
}

.hero-alert-idle {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.hero-alert-idle .hero-alert-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-alert-idle .hero-alert-copy strong {
  display: inline;
}

.hero-alerts.is-compact .hero-alert-idle .hero-alert-copy {
  gap: 8px;
}

.hero-alerts.is-compact .hero-alert-idle .hero-alert-copy p {
  display: none;
}

.hero-alert-copy {
  min-width: 0;
}

.hero-alert-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-self: end;
  align-self: start;
}

.hero-alert-copy strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.24;
}

.hero-alert-copy p,
.hero-alert-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.34;
}

.hero-alert-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.34;
}

.hero-alert-dismiss {
  min-height: 24px;
  padding-inline: 9px;
  border-color: var(--stroke-soft);
  background: rgba(255, 255, 255, 0.028);
  color: rgba(223, 243, 255, 0.8);
  font-size: 0.68rem;
}

.forecast-ticker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background:
    linear-gradient(90deg, rgba(99, 203, 255, 0.06), rgba(212, 171, 103, 0.04) 48%, rgba(75, 199, 186, 0.04)),
    rgba(8, 17, 31, 0.68);
  box-shadow: var(--shadow);
}

.forecast-ticker-head {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.forecast-ticker-head .eyebrow {
  margin-bottom: 0;
}

.forecast-ticker-head strong {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.forecast-ticker-viewport {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}

.forecast-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
}

.forecast-ticker-run {
  flex: 0 0 auto;
  min-width: max-content;
  padding-right: 34px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
}

.forecast-ticker-viewport.is-scrolling .forecast-ticker-track {
  animation: forecast-ticker-scroll 34s linear infinite;
}

.forecast-ticker-viewport:not(.is-scrolling) .forecast-ticker-track {
  width: 100%;
}

.forecast-ticker-viewport:not(.is-scrolling) .forecast-ticker-run {
  padding-right: 0;
}

.forecast-ticker-viewport:not(.is-scrolling) .forecast-ticker-run[aria-hidden="true"] {
  display: none;
}

.forecast-ticker:hover .forecast-ticker-track {
  animation-play-state: paused;
}

@keyframes forecast-ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .forecast-ticker-viewport {
    mask-image: none;
  }

  .forecast-ticker-viewport.is-scrolling .forecast-ticker-track {
    animation: none;
  }

  .forecast-ticker-viewport:not(.is-scrolling) .forecast-ticker-run[aria-hidden="true"] {
    display: none;
  }
}

.desk-hero-grid,
.desk-support-grid,
.network-support-grid,
.media-section-grid {
  display: grid;
  gap: 10px;
  align-items: start;
}

.desk-hero-grid {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
}

.desk-support-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
}

.desk-ops-stack,
.station-section-grid,
.media-side-stack {
  display: grid;
  gap: 10px;
  align-content: start;
}

.network-support-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.media-section-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
}

.content-workspace .card,
.desk-hero-grid > .card,
.desk-support-grid > .card,
.network-support-grid > .card,
.media-section-grid > .card,
.media-side-stack > .card,
.station-section-grid > .card {
  grid-column: auto;
  order: initial;
  min-height: 0;
  align-self: start;
}

.forecast-card,
.local-stage-card,
.national-card,
.radar-card,
.now-card,
.station-lab-card,
.analysis-history-card {
  grid-column: auto;
  order: initial;
  min-height: 0;
}

.local-stage-shell {
  min-height: 0;
  height: auto;
  padding: 12px;
  grid-template-rows: auto auto auto;
}

.station-lab-card {
  display: grid;
  gap: 10px;
}

.station-lab-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tempest-live-card {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.tempest-live-header {
  align-items: flex-start;
}

.tempest-live-summary {
  margin: 0;
  max-width: 78rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.38;
}

.tempest-live-grid {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.tempest-live-grid .detail-item {
  display: grid;
  align-content: start;
  min-height: 138px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.022);
}

.tempest-live-grid .detail-item span {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.tempest-live-grid .detail-item strong {
  margin-top: 10px;
  font-size: 1.18rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.tempest-live-grid .detail-item strong.small-value {
  font-size: 1rem;
  line-height: 1.28;
}

.tempest-live-grid .detail-item small {
  margin-top: 9px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.analysis-history-card .history-deck-layout {
  grid-template-columns: minmax(0, 1.78fr) minmax(240px, 0.82fr);
}

.forecast-top-grid {
  grid-template-columns: minmax(0, 1.52fr) minmax(260px, 0.68fr);
}

.forecast-chart-with-readout,
.history-chart-stack {
  display: grid;
  gap: 10px;
}

.history-chart-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.history-readout-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.history-readout {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.03);
}

.history-readout span,
.history-readout small {
  color: var(--muted);
}

.history-readout span {
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.history-readout strong {
  font-size: 1rem;
}

.history-readout small {
  font-size: 0.72rem;
  line-height: 1.3;
}

.forecast-chart .history-axis-label {
  font-size: 9px;
  font-weight: 600;
}

.forecast-chart .history-axis-label-left {
  fill: rgba(99, 203, 255, 0.9);
}

.forecast-chart .history-axis-label-right {
  fill: rgba(208, 173, 114, 0.92);
}

.section-nav-link strong,
.section-heading h2,
.sidebar-brand h2 {
  letter-spacing: -0.02em;
}

@media (max-width: 1460px) {
  .app-layout {
    grid-template-columns: 224px minmax(0, 1fr);
  }

  .desk-hero-grid,
  .desk-support-grid,
  .media-section-grid {
    grid-template-columns: 1fr;
  }

  .history-readout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .network-support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    min-height: 0;
  }

  .section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-alert-list {
    grid-template-columns: 1fr;
  }

  .radar-toolbar-main {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
  }
}

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

  .radar-inspect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radar-toolbar-actions {
    flex-wrap: wrap;
  }

  .station-lab-grid,
  .network-support-grid,
  .section-nav {
    grid-template-columns: 1fr;
  }

  .analysis-history-card .history-deck-layout {
    grid-template-columns: 1fr;
  }

  .history-readout-grid {
    grid-template-columns: 1fr;
  }

  .local-stage-hourly {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 12px 12px 18px;
  }

  .radar-inspect-header {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .app-sidebar {
    padding: 12px;
  }

  .local-stage-hourly {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-nav-link {
    padding: 10px;
  }
}

/* Minimal hierarchy pass */
.app-layout {
  grid-template-columns: 1fr;
}

.app-sidebar {
  display: none;
}

.app-main {
  gap: 14px;
}

.hero {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 10px 12px;
}

.content-workspace.minimal-workspace {
  gap: 14px;
}

.section-signal {
  display: grid;
  gap: 4px;
  padding: 0 2px;
}

.section-signal h2 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.landing-grid,
.forecast-core-grid,
.secondary-grid,
.advanced-forecast-grid,
.station-advanced-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}

.landing-grid {
  grid-template-columns: minmax(340px, 0.76fr) minmax(0, 1.24fr);
  align-items: stretch;
}

.primary-now-card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

.primary-radar-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.primary-radar-card .radar-map-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: clamp(446px, 35vw, 522px);
}

.primary-radar-card .radar-map {
  flex: 1 1 auto;
  height: auto;
  min-height: 100%;
}

.primary-now-card .local-stage-shell {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 14px;
}

.primary-now-card .local-stage-top {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.72fr);
}

.primary-now-card .local-stage-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.primary-now-card .stage-stat {
  padding-top: 10px;
  border-top: 1px solid var(--stroke-soft);
}

.primary-now-card .stage-stat span {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.primary-now-card .stage-stat strong {
  font-size: 0.95rem;
}

.primary-now-card .local-stage-condition {
  font-size: 1.3rem;
}

.primary-now-card .local-stage-summary {
  padding: 10px 12px;
  font-size: 0.84rem;
}

.local-stage-details {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-content: stretch;
}

.local-stage-details .detail-item {
  display: grid;
  align-content: start;
  min-height: 100%;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: rgba(255, 255, 255, 0.026);
}

.local-stage-details .detail-item strong {
  font-size: 1rem;
}

.local-stage-details .detail-item small {
  font-size: 0.8rem;
  line-height: 1.38;
}

.forecast-core-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.forecast-core-card,
.daily-overview-card,
.forecast-graph-card {
  display: grid;
  gap: 8px;
}

.impact-chart-svg .impact-precip-bar {
  fill: rgba(73, 219, 255, 0.28);
  stroke: rgba(73, 219, 255, 0.22);
  stroke-width: 1;
}

.impact-chart-svg .impact-gust-line {
  fill: none;
  stroke: var(--chart-wind);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-chart-svg .impact-thunder-line {
  fill: none;
  stroke: var(--chart-severe);
  stroke-width: 2.6;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-chart-svg .impact-point {
  stroke-width: 2.4;
}

.impact-chart-svg .gust-point {
  fill: var(--chart-point-fill);
  stroke: var(--chart-wind);
}

.impact-chart-svg .thunder-point {
  fill: var(--chart-point-fill);
  stroke: var(--chart-severe);
}

.forecast-graph-card {
  grid-template-rows: auto auto auto 1fr;
  height: 100%;
}

.forecast-primary-legend {
  min-height: 24px;
}

#forecastLegend {
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
}

#forecastLegend .legend-chip {
  white-space: nowrap;
}

.forecast-graph-note {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forecast-primary-chart {
  min-height: 0;
  height: 100%;
  background:
    radial-gradient(circle at top left, rgba(99, 203, 255, 0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(75, 199, 186, 0.06), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.016)),
    rgba(10, 18, 29, 0.36);
}

.ten-day-forecast-card {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.ten-day-header {
  align-items: flex-end;
}

.ten-day-legend {
  min-height: 22px;
}

.ten-day-forecast-strip {
  overflow-x: auto;
  padding-bottom: 2px;
}

.ten-day-forecast-strip::-webkit-scrollbar {
  height: 8px;
}

.ten-day-forecast-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(143, 185, 255, 0.3);
}

.ten-day-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(114px, 1fr));
  gap: 10px;
  min-width: 1160px;
}

.ten-day-item {
  min-height: 304px;
}

.ten-day-item-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 88px auto 1fr;
  gap: 10px;
  height: 100%;
  padding: 14px 12px 14px;
  border-radius: 24px;
  border: 1px solid rgba(162, 193, 227, 0.2);
  background:
    linear-gradient(180deg, rgba(84, 166, 255, 0.14), rgba(9, 20, 39, 0.96)),
    rgba(10, 18, 34, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.ten-day-item-shell::before,
.ten-day-item-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.ten-day-item-shell::after {
  mix-blend-mode: screen;
}

.ten-day-item-shell > * {
  position: relative;
  z-index: 1;
}

.ten-day-item.current-day .ten-day-item-shell {
  border-color: rgba(94, 194, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(94, 194, 255, 0.12);
}

.ten-day-item.tone-sunny .ten-day-item-shell,
.ten-day-item.tone-partly .ten-day-item-shell {
  background:
    linear-gradient(180deg, rgba(63, 148, 255, 0.34), rgba(18, 36, 78, 0.94)),
    rgba(10, 18, 34, 0.88);
}

.ten-day-item.tone-sunny .ten-day-item-shell::before,
.ten-day-item.tone-partly .ten-day-item-shell::before {
  opacity: 0.52;
  background:
    radial-gradient(circle at 30% 12%, rgba(255, 213, 105, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(113, 198, 255, 0.06), transparent 58%);
}

.ten-day-item.tone-clear .ten-day-item-shell,
.ten-day-item.tone-fog .ten-day-item-shell,
.ten-day-item.tone-wind .ten-day-item-shell {
  background:
    linear-gradient(180deg, rgba(95, 135, 186, 0.22), rgba(14, 24, 44, 0.95)),
    rgba(10, 18, 34, 0.88);
}

.ten-day-item.tone-clear .ten-day-item-shell::before {
  opacity: 0.38;
  background:
    radial-gradient(circle at 68% 10%, rgba(178, 218, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(89, 137, 205, 0.08), transparent 70%);
}

.ten-day-item.tone-fog .ten-day-item-shell::before,
.ten-day-item.tone-cloudy .ten-day-item-shell::before {
  opacity: 0.44;
  background:
    linear-gradient(155deg, rgba(221, 235, 255, 0.12), transparent 54%),
    radial-gradient(circle at 46% 10%, rgba(212, 229, 248, 0.12), transparent 44%);
}

.ten-day-item.tone-wind .ten-day-item-shell::before {
  opacity: 0.38;
  background:
    linear-gradient(135deg, transparent 18%, rgba(202, 225, 255, 0.12) 34%, transparent 58%),
    linear-gradient(180deg, rgba(99, 159, 220, 0.08), transparent 64%);
}

.ten-day-item.tone-cloudy .ten-day-item-shell {
  background:
    linear-gradient(180deg, rgba(88, 148, 218, 0.32), rgba(18, 38, 72, 0.94)),
    rgba(10, 18, 34, 0.88);
  border-color: rgba(151, 188, 230, 0.25);
}

.ten-day-item.tone-rain .ten-day-item-shell,
.ten-day-item.tone-mix .ten-day-item-shell,
.ten-day-item.tone-ice .ten-day-item-shell {
  background:
    linear-gradient(180deg, rgba(61, 128, 205, 0.28), rgba(10, 22, 46, 0.95)),
    rgba(10, 18, 34, 0.88);
}

.ten-day-item.tone-rain .ten-day-item-shell::before {
  opacity: 0.44;
  background:
    linear-gradient(115deg, transparent 10%, rgba(111, 220, 255, 0.16) 34%, transparent 60%),
    linear-gradient(180deg, rgba(78, 172, 255, 0.10), rgba(21, 64, 110, 0.08) 64%, transparent);
}

.ten-day-item.tone-mix .ten-day-item-shell::before,
.ten-day-item.tone-ice .ten-day-item-shell::before {
  opacity: 0.46;
  background:
    radial-gradient(circle at 50% 16%, rgba(213, 246, 255, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(142, 217, 255, 0.12), rgba(22, 62, 104, 0.08) 66%, transparent);
}

.ten-day-item.tone-storm .ten-day-item-shell,
.ten-day-item.tone-hail .ten-day-item-shell,
.ten-day-item.tone-severe .ten-day-item-shell {
  background:
    linear-gradient(180deg, rgba(74, 95, 172, 0.34), rgba(11, 18, 40, 0.96)),
    rgba(10, 18, 34, 0.88);
}

.ten-day-item.tone-storm .ten-day-item-shell::before,
.ten-day-item.tone-severe .ten-day-item-shell::before {
  opacity: 0.48;
  background:
    linear-gradient(135deg, rgba(255, 202, 88, 0.18) 0%, rgba(255, 202, 88, 0.06) 28%, transparent 50%),
    linear-gradient(180deg, rgba(43, 93, 176, 0.14), rgba(28, 38, 82, 0.12) 68%, transparent);
}

.ten-day-item.tone-hail .ten-day-item-shell::before {
  opacity: 0.46;
  background:
    radial-gradient(circle at 52% 14%, rgba(232, 248, 255, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(68, 136, 220, 0.12), transparent 70%);
}

.ten-day-item.tone-severe .ten-day-item-shell::after {
  opacity: 0.38;
  background:
    linear-gradient(92deg, rgba(255, 122, 76, 0.24), transparent 36%),
    linear-gradient(180deg, rgba(255, 199, 76, 0.10), transparent 58%);
}

.ten-day-item.tone-snow .ten-day-item-shell {
  background:
    linear-gradient(180deg, rgba(112, 161, 210, 0.24), rgba(16, 24, 42, 0.96)),
    rgba(10, 18, 34, 0.88);
}

.ten-day-item.tone-snow .ten-day-item-shell::before {
  opacity: 0.48;
  background:
    radial-gradient(circle at 52% 13%, rgba(244, 252, 255, 0.22), transparent 44%),
    linear-gradient(180deg, rgba(190, 229, 255, 0.12), rgba(50, 95, 143, 0.08) 68%, transparent);
}

.ten-day-topline {
  display: grid;
  gap: 2px;
  text-align: center;
}

.ten-day-day {
  color: rgba(241, 247, 255, 0.95);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ten-day-date {
  color: var(--muted);
  font-size: 0.76rem;
}

.ten-day-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-forecast-icon {
  width: 98px;
  height: 88px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

.ten-day-copy {
  display: grid;
  gap: 8px;
  min-height: 78px;
  align-content: start;
  text-align: center;
}

.ten-day-condition {
  font-size: 0.94rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ten-day-precip {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(89, 195, 255, 0.18);
  border: 1px solid rgba(115, 203, 255, 0.2);
  color: rgba(214, 246, 255, 0.98);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ten-day-precip-idle {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(179, 193, 211, 0.72);
}

.ten-day-temp-lane {
  display: grid;
  align-content: end;
  gap: 10px;
  margin-top: auto;
}

.ten-day-temp-scale {
  position: relative;
  height: 78px;
}

.ten-day-temp-track {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(212, 171, 103, 0.16), rgba(75, 199, 186, 0.12)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.ten-day-temp-range {
  position: absolute;
  left: 50%;
  width: 16px;
  transform: translateX(-50%);
  bottom: calc(var(--range-bottom) * 1%);
  height: calc(var(--range-size) * 1%);
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--chart-model) 0%, var(--chart-wind) 100%);
  box-shadow: 0 6px 14px rgba(10, 24, 44, 0.16);
}

.ten-day-temp-reading {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.ten-day-temp-primary {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.ten-day-temp-reading strong {
  font-size: 2.08rem;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.ten-day-temp-reading span {
  color: rgba(188, 207, 228, 0.92);
  font-size: 1.12rem;
  line-height: 1;
}

.ten-day-secondary-low {
  color: rgba(157, 177, 201, 0.82);
  font-size: 0.68rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.forecast-pulse-card {
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(99, 203, 255, 0.11), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(75, 199, 186, 0.08), transparent 20%),
    linear-gradient(180deg, rgba(75, 98, 134, 0.18), rgba(10, 17, 34, 0.96)),
    rgba(10, 18, 34, 0.9);
}

.forecast-pulse-board {
  display: grid;
}

.forecast-pulse-shell {
  display: grid;
  gap: 12px;
}

.forecast-pulse-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.forecast-pulse-current {
  display: grid;
  gap: 4px;
  align-content: start;
}

.forecast-pulse-current-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.forecast-pulse-temp {
  font-size: clamp(2.8rem, 4.9vw, 4.1rem);
  line-height: 0.84;
  letter-spacing: -0.07em;
}

.forecast-pulse-current-visual {
  transform: scale(1);
  transform-origin: center left;
}

.forecast-pulse-current-meta {
  color: rgba(199, 220, 242, 0.9);
  font-size: 0.86rem;
  line-height: 1.24;
}

.forecast-pulse-copy {
  display: grid;
  gap: 8px;
  align-content: start;
}

.forecast-pulse-headline {
  margin: 0;
  color: rgba(247, 251, 255, 0.97);
  font-size: clamp(1.12rem, 1.8vw, 1.66rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.forecast-pulse-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 12px;
  align-items: center;
}

.forecast-pulse-subhead {
  color: var(--chart-temp);
  font-size: clamp(0.86rem, 1.02vw, 1rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.forecast-pulse-strip-wrap {
  --forecast-pulse-strip-inset: 7px;
  display: grid;
  gap: 6px;
  justify-items: end;
  width: 100%;
}

.forecast-pulse-strip-header {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.forecast-pulse-strip-caption {
  color: rgba(187, 208, 234, 0.82);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.forecast-pulse-strip-meta {
  color: rgba(132, 205, 230, 0.94);
  font-size: 0.74rem;
  line-height: 1.15;
  font-weight: 600;
  text-align: right;
}

.forecast-pulse-strip {
  position: relative;
  min-width: 280px;
  width: 100%;
  padding: var(--forecast-pulse-strip-inset);
  border-radius: 999px;
  border: 1px solid rgba(167, 193, 229, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(14, 25, 51, 0.92);
  box-shadow: inset 0 0 0 1px rgba(99, 203, 255, 0.08);
}

.forecast-pulse-strip-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}

.forecast-pulse-strip-axis {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  margin-top: 5px;
  width: 100%;
  padding-inline: var(--forecast-pulse-strip-inset);
  box-sizing: border-box;
}

.forecast-pulse-strip-segment {
  min-height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid rgba(127, 156, 196, 0.22);
  background: rgba(63, 89, 127, 0.3);
  color: rgba(188, 207, 228, 0.88);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}

.forecast-pulse-strip-segment.level-dry {
  background: rgba(63, 89, 127, 0.22);
  border-color: rgba(114, 137, 171, 0.16);
}

.forecast-pulse-strip-segment.level-light {
  background: linear-gradient(180deg, rgba(53, 152, 160, 0.56), rgba(71, 175, 201, 0.48));
  border-color: rgba(91, 197, 213, 0.34);
  color: rgba(235, 247, 255, 0.96);
}

.forecast-pulse-strip-segment.level-moderate {
  background: linear-gradient(180deg, rgba(49, 168, 165, 0.76), rgba(75, 202, 217, 0.68));
  border-color: rgba(98, 214, 227, 0.42);
  color: rgba(246, 252, 255, 0.98);
}

.forecast-pulse-strip-segment.level-heavy {
  background: linear-gradient(180deg, rgba(36, 164, 179, 0.9), rgba(64, 210, 236, 0.82));
  border-color: rgba(132, 231, 247, 0.46);
  color: rgba(247, 251, 255, 1);
}

.forecast-pulse-strip-segment.is-focus {
  border-color: rgba(241, 248, 255, 0.72);
  box-shadow: 0 0 0 1px rgba(241, 248, 255, 0.22);
}

.forecast-pulse-strip-value {
  display: block;
  line-height: 1;
}

.forecast-pulse-strip-time {
  display: block;
  color: rgba(183, 203, 227, 0.74);
  font-size: 0.62rem;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.forecast-pulse-strip-time.is-focus {
  color: rgba(236, 245, 255, 0.96);
  font-weight: 700;
}

.forecast-pulse-chart-shell {
  position: relative;
  min-height: 304px;
  padding: 6px 6px 0;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
    rgba(15, 22, 40, 0.68);
  border: 1px solid rgba(145, 175, 218, 0.12);
  overflow: hidden;
}

.forecast-pulse-svg {
  width: 100%;
  height: 304px;
  display: block;
}

.forecast-pulse-day-band {
  fill: rgba(255, 255, 255, 0.032);
}

.forecast-pulse-guide {
  stroke: var(--chart-guide);
  stroke-width: 1.2;
}

.forecast-pulse-bar {
  opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(73, 219, 255, 0.12));
}

.forecast-pulse-temp-area {
  fill: url(#forecastPulseTempFill);
}

.forecast-pulse-temp-path {
  fill: none;
  stroke: url(#forecastPulseTempStroke);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(99, 203, 255, 0.12));
}

.forecast-pulse-wind-path {
  fill: none;
  stroke: url(#forecastPulseWindStroke);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 10 8;
  opacity: 0.86;
}

.forecast-pulse-temp-dot {
  fill: var(--chart-temp);
  filter: drop-shadow(0 0 4px rgba(99, 203, 255, 0.18));
}

.forecast-pulse-precip-label {
  fill: rgba(194, 246, 255, 0.92);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.forecast-pulse-time,
.forecast-pulse-day-label {
  fill: rgba(240, 246, 255, 0.92);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.forecast-pulse-day-label {
  fill: rgba(255, 247, 195, 0.95);
}

.forecast-pulse-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.forecast-pulse-marker {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 3px;
  transform: translateX(-50%);
  min-width: 52px;
}

.forecast-pulse-marker strong {
  color: rgba(250, 252, 255, 0.98);
  font-size: 0.98rem;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.forecast-pulse-marker-icon .weather-visual.tiny {
  transform: scale(1.12);
  transform-origin: center;
}

.forecast-graph-card .forecast-chart {
  margin-top: 0;
}

.forecast-graph-card .forecast-chart-svg {
  height: 286px;
}

.forecast-graph-card .chart-legend {
  margin-top: 0;
}

.daily-forecast-top,
.dashboard-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daily-forecast-top {
  align-items: flex-start;
}

.daily-forecast-day {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.11em;
}

.daily-forecast-highlow {
  display: block;
  margin-top: 4px;
  font-size: 1.02rem;
}

.daily-forecast-summary,
.forecast-graph-note,
.dashboard-disclosure > summary small {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.daily-forecast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 0.79rem;
}

.dashboard-disclosure {
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dashboard-disclosure > summary {
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
}

.dashboard-disclosure > summary::-webkit-details-marker {
  display: none;
}

.dashboard-disclosure > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  color: var(--muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.dashboard-disclosure[open] > summary::after {
  content: "-";
}

.dashboard-disclosure[open] > summary {
  border-bottom: 1px solid var(--stroke-soft);
}

.disclosure-summary-copy {
  display: grid;
  gap: 3px;
}

.disclosure-summary-copy strong {
  font-size: 1rem;
}

.disclosure-body {
  padding: 12px;
}

.disclosure-stack {
  display: grid;
  gap: 12px;
}

.data-section-layout {
  gap: 16px;
}

.data-row {
  display: grid;
  gap: 10px;
}

.data-row + .data-row {
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.data-row-header {
  display: grid;
  gap: 3px;
}

.data-row-header h3 {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.14;
}

.data-row-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}

.data-row-grid-analysis,
.data-row-grid-local {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-row-grid-network {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr) minmax(0, 1fr);
}

.data-row-grid > .card,
.data-row-grid > .deck-card,
.data-row-grid > .module-panel,
.data-row-grid > .national-card,
.data-row-grid > .data-stack {
  display: grid;
  gap: 8px;
  grid-column: auto;
  height: 100%;
  min-width: 0;
  width: 100%;
  align-self: stretch;
}

.data-stack {
  display: grid;
  align-content: start;
  gap: 10px;
}

.data-stack > .card,
.data-stack > .deck-card,
.data-stack > .module-panel {
  min-width: 0;
}

.module-divider {
  margin: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.data-subsection-header {
  margin-top: 0;
}

.data-card-wide {
  min-width: 0;
}

.data-observation-board {
  display: grid;
  gap: 10px;
}

#detailsGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#dailyForecastDetails {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#sourceTrustGrid,
#trendCards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#nationalHighlights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-observation-stacks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.data-observation-column {
  display: grid;
  align-content: start;
  gap: 8px;
}

.data-observation-column > .eyebrow {
  margin: 0;
}

.data-section-layout {
  gap: 18px;
}

.data-workspace-band {
  display: grid;
  gap: 12px;
}

.data-workspace-band + .data-workspace-band {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.data-band-header {
  display: grid;
  gap: 3px;
}

.data-band-header h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.14;
}

.data-workspace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.data-workspace-grid-forecast {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.97fr) minmax(0, 0.97fr);
}

.data-workspace-grid-local {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.93fr) minmax(0, 0.93fr);
}

.data-workspace-grid-network {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr) minmax(0, 0.97fr);
}

.data-surface {
  display: grid;
  gap: 14px;
  padding: 16px;
  min-width: 0;
  align-content: start;
}

.data-surface-anchor {
  gap: 16px;
}

.data-surface-header {
  display: grid;
  gap: 4px;
}

.data-surface-header .eyebrow {
  margin: 0;
}

.data-surface-header h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.15;
}

.data-surface-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.52;
}

.data-board-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.data-board-columns {
  display: grid;
  gap: 12px;
}

.data-board-columns.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-board-columns.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-board-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.data-board-title-row h4 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

.data-metric-matrix {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.data-metric-matrix.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-metric-matrix.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-metric-matrix.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-metric {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.data-metric-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
}

.data-metric-value {
  margin: 0;
  color: var(--text-strong);
  font-size: 1.26rem;
  line-height: 1.05;
  font-weight: 700;
}

.data-metric-value.is-compact {
  font-size: 1.08rem;
}

.data-metric-helper {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.data-note-list,
.data-feed-list {
  display: grid;
  gap: 8px;
}

.data-note-card,
.data-feed-item {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.data-note-top,
.data-feed-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.data-note-card h4,
.data-feed-item h4 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.24;
}

.data-note-card p,
.data-feed-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.data-feed-link {
  text-decoration: none;
}

.data-feed-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.data-feed-column {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.data-feed-column .eyebrow {
  margin: 0;
}

.data-history-chart-shell {
  min-height: 336px;
}

.data-history-trend-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.data-trend-chip {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.data-trend-chip strong {
  font-size: 0.92rem;
  line-height: 1.2;
}

.data-trend-chip p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.42;
}

.data-national-frame-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.data-frame-button {
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 0.92rem;
}

.data-frame-button.active {
  background: rgba(91, 191, 255, 0.18);
  border-color: rgba(91, 191, 255, 0.4);
  color: var(--text-strong);
}

.secondary-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.18fr) minmax(300px, 0.87fr);
}

.secondary-metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.secondary-air-quality-card .secondary-aqi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.secondary-current-card {
  align-self: stretch;
}

.secondary-current-card .metrics-grid {
  margin-top: 8px;
}

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

.advanced-decision-card {
  grid-column: 1 / -1;
}

.advanced-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.station-advanced-grid {
  grid-template-columns: 1fr;
}

.compact-station-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.simplified-network-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.simplified-media-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

.secondary-air-quality-card .provider-message,
.station-lab-card .provider-message,
.advanced-decision-card .provider-message {
  margin-top: 8px;
}

/* Readability uplift */

.hero h1 {
  font-size: clamp(1.5rem, 2.3vw, 2.25rem);
  line-height: 1.04;
}

.card h2 {
  font-size: 1.18rem;
}

.module-header h3 {
  font-size: 1.08rem;
}

.primary-button,
.secondary-button,
.secondary-link {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.96rem;
}

.frame-button,
.place-chip {
  min-height: 34px;
  padding: 0 13px;
  font-size: 0.94rem;
}

.status-card {
  padding: 9px 10px;
}

.status-label,
.metric span,
.narrative-title,
.legend-title,
.place-chip .chip-home {
  font-size: 12px;
  letter-spacing: 0.1em;
}

.status-value,
.signal-chip strong,
.section-nav-link strong {
  font-size: 1rem;
}

.signal-chip small,
.overlay-row .provider-message,
.section-nav-link small,
.app-footer {
  font-size: 0.88rem;
  line-height: 1.42;
}

.hero-text,
.provider-message {
  font-size: 0.9rem;
  line-height: 1.46;
}

.hero-alert-copy strong {
  font-size: 0.96rem;
}

.hero-alert-copy p,
.hero-alert-meta {
  font-size: 0.86rem;
  line-height: 1.4;
}

.forecast-ticker-head strong {
  font-size: 0.96rem;
}

.forecast-ticker-run {
  font-size: 0.96rem;
  line-height: 1.34;
}

.chart-legend {
  gap: 9px;
}

.legend-chip {
  min-height: 34px;
  padding: 0 14px;
  gap: 10px;
  font-size: 0.88rem;
}

.forecast-graph-note,
.history-chart-note,
.local-stage-trend-note,
.daily-forecast-summary,
.dashboard-disclosure > summary small,
.tempest-live-summary {
  font-size: 0.96rem;
  line-height: 1.5;
}

.primary-now-card .stage-stat span {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

.primary-now-card .stage-stat strong {
  font-size: 1.16rem;
}

.primary-now-card .local-stage-condition {
  font-size: 1.66rem;
}

.primary-now-card .local-stage-summary {
  padding: 12px 14px;
  font-size: 1.04rem;
  line-height: 1.5;
}

.local-stage-feels {
  font-size: 1.32rem;
}

.local-stage-details .detail-item {
  padding: 16px 18px;
}

.local-stage-details .detail-item span {
  font-size: var(--card-label-size);
  letter-spacing: var(--card-label-spacing);
}

.local-stage-details .detail-item strong {
  font-size: var(--card-value-size);
  line-height: 1.12;
}

.local-stage-details .detail-item small {
  font-size: var(--card-helper-size);
  line-height: var(--card-helper-line);
}

.tempest-live-grid .detail-item {
  min-height: 156px;
  padding: 18px 20px;
}

.tempest-live-grid .detail-item span {
  font-size: var(--card-label-size);
  letter-spacing: var(--card-label-spacing);
}

.tempest-live-grid .detail-item strong {
  font-size: var(--card-value-size);
  line-height: 1.12;
}

.tempest-live-grid .detail-item strong.small-value {
  font-size: var(--card-value-size-compact);
  line-height: 1.26;
}

.tempest-live-grid .detail-item small {
  font-size: var(--card-helper-size);
  line-height: var(--card-helper-line);
}

.history-readout span {
  font-size: var(--card-label-size);
  letter-spacing: var(--card-label-spacing);
}

.history-readout strong {
  font-size: calc(var(--card-value-size) - 0.1rem);
}

.history-readout small {
  font-size: calc(var(--card-helper-size) - 0.04rem);
  line-height: var(--card-helper-line);
}

.forecast-visual-grid .hourly-item time,
.hourly-item time,
.daily-item time {
  font-size: 0.86rem;
}

.hourly-item p {
  font-size: 0.86rem;
  line-height: 1.28;
}

.hourly-item small,
.hourly-meta {
  font-size: 0.84rem;
  line-height: 1.36;
}

.section-nav-kicker {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
}

.forecast-chart .history-latest-label,
.forecast-chart .axis-label {
  font-size: 12px;
}

.forecast-chart .small-label,
.forecast-chart .chart-panel-label,
.forecast-chart .history-axis-label {
  font-size: 11px;
}

.forecast-chart .graph-label {
  font-size: 12px;
}

@media (max-width: 1400px) {
  .landing-grid,
  .forecast-core-grid,
  .secondary-grid,
  .station-advanced-grid,
  .simplified-media-grid {
    grid-template-columns: 1fr;
  }

  .forecast-hourly-card {
    grid-column: auto;
  }

  .tempest-live-grid,
  .compact-station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advanced-decision-grid,
  .simplified-network-grid,
  .data-row-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .data-workspace-grid,
  .data-workspace-grid-forecast,
  .data-workspace-grid-local,
  .data-workspace-grid-network {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-workspace-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .data-row-header {
    gap: 4px;
  }
}

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .forecast-core-grid,
  .advanced-forecast-grid,
  .secondary-metrics-grid,
  .secondary-air-quality-card .secondary-aqi-grid,
  .advanced-decision-grid,
  .simplified-network-grid,
  .local-stage-details,
  .data-row-grid,
  .data-observation-stacks,
  .data-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-board-columns.two,
  .data-board-columns.three,
  .data-feed-columns,
  .data-history-trend-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-metric-matrix.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-metric-matrix.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #sourceTrustGrid,
  #forecastGuideGrid,
  .radar-inspect-grid {
    grid-template-columns: 1fr;
  }

  #dailyForecastDetails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tempest-live-grid,
  .compact-station-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ten-day-grid {
    grid-template-columns: repeat(10, minmax(108px, 1fr));
    min-width: 1080px;
  }

  .primary-now-card .local-stage-top {
    grid-template-columns: 1fr;
  }

  .primary-now-card .local-stage-metrics {
    grid-template-columns: 1fr;
  }

  .forecast-pulse-head,
  .forecast-pulse-copy-row {
    grid-template-columns: 1fr;
  }

  .forecast-pulse-strip-wrap {
    justify-items: start;
  }

  .forecast-pulse-strip {
    min-width: 0;
  }

  .forecast-pulse-marker {
    min-width: 42px;
  }

  .forecast-pulse-precip-label {
    font-size: 10px;
  }
}

@media (max-width: 720px) {
  .ten-day-item {
    min-height: 286px;
  }

  .ten-day-item-shell {
    padding-inline: 11px;
  }

  .ten-day-temp-reading strong {
    font-size: 1.8rem;
  }

  .forecast-pulse-shell {
    gap: 14px;
  }

  .forecast-pulse-current-main {
    gap: 12px;
  }

  .forecast-pulse-current-visual {
    transform: scale(1);
  }

  .forecast-pulse-headline {
    font-size: clamp(1.02rem, 4.8vw, 1.34rem);
  }

  .forecast-pulse-subhead {
    font-size: 0.86rem;
  }

  .forecast-pulse-chart-shell {
    min-height: 248px;
    padding: 8px 2px 0;
  }

  .forecast-pulse-svg {
    height: 248px;
  }

  .forecast-pulse-time,
  .forecast-pulse-day-label {
    font-size: 14px;
  }

  .forecast-pulse-marker strong {
    font-size: 0.82rem;
  }

  .forecast-pulse-precip-label {
    font-size: 9px;
  }
}

@media (max-width: 780px) {
  .dashboard-disclosure > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-disclosure > summary::after {
    display: none;
  }

  .hero-status {
    grid-template-columns: 1fr;
  }

  .tempest-live-grid,
  .compact-station-grid,
  .data-row-grid,
  .data-stack,
  .data-observation-stacks,
  .data-workspace-grid,
  .data-workspace-grid-forecast,
  .data-workspace-grid-local,
  .data-workspace-grid-network,
  .data-feed-columns,
  .data-board-columns.two,
  .data-board-columns.three,
  .data-history-trend-strip {
    grid-template-columns: 1fr;
  }

  .data-metric-matrix.cols-4,
  .data-metric-matrix.cols-3,
  .data-metric-matrix.cols-2 {
    grid-template-columns: 1fr;
  }

  #dailyForecastDetails,
  #trendCards,
  #nationalHighlights {
    grid-template-columns: 1fr;
  }
}

body.mobile-layout .app-shell {
  padding: 6px 6px 12px;
}

body.mobile-layout .app-main {
  gap: 10px;
}

body.mobile-layout .hero {
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 6px 10px;
  padding: 8px;
  border-radius: 16px;
}

body.mobile-layout .hero h1 {
  font-size: clamp(1.9rem, 7.2vw, 2.2rem);
}

body.mobile-layout .hero-text,
body.mobile-layout .provider-message,
body.mobile-layout .section-copy,
body.mobile-layout .forecast-ticker-run,
body.mobile-layout .hero-alert-copy p,
body.mobile-layout .hero-alert-meta {
  font-size: 0.78rem;
  line-height: 1.38;
}

body.mobile-layout .hero-title-row,
body.mobile-layout .hero-place-header,
body.mobile-layout .hero-alerts-header {
  flex-direction: column;
  align-items: flex-start;
}

body.mobile-layout .hero-left,
body.mobile-layout .hero-right,
body.mobile-layout .hero-alerts {
  gap: 6px;
}

body.mobile-layout .hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  width: 118px;
  justify-self: end;
  gap: 6px;
}

body.mobile-layout .hero-actions .secondary-link {
  grid-column: 1 / -1;
}

body.mobile-layout .hero-left {
  grid-column: 1;
  grid-row: 1;
}

body.mobile-layout .hero-solar-mobile {
  grid-column: 1;
  grid-row: 2;
}

body.mobile-layout .hero-right {
  grid-column: 2;
  grid-row: 1;
  align-content: start;
  justify-items: end;
  min-width: 0;
}

body.mobile-layout .hero-side-top {
  display: grid;
  gap: 6px;
  justify-items: end;
}

body.mobile-layout .hero-alerts {
  grid-column: 1;
  grid-column: 1 / -1;
  grid-row: 3;
}

body.mobile-layout .hero-status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.mobile-layout .status-card,
body.mobile-layout .hero-place-switcher {
  padding: 8px 10px;
}

body.mobile-layout .forecast-ticker {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 9px 10px;
}

body.mobile-layout .forecast-ticker-head strong {
  font-size: 0.82rem;
}

body.mobile-layout .content-workspace.minimal-workspace {
  gap: 10px;
}

body.mobile-layout .dashboard-section {
  gap: 8px;
}

body.mobile-layout .section-signal {
  gap: 3px;
  padding: 0 1px;
}

body.mobile-layout .section-signal h2 {
  font-size: 1.02rem;
  line-height: 1.08;
}

body.mobile-layout .card,
body.mobile-layout .hero,
body.mobile-layout .forecast-ticker {
  border-radius: 14px;
}

body.mobile-layout .card {
  padding: 10px;
}

body.mobile-layout .card-header,
body.mobile-layout .module-header,
body.mobile-layout .ten-day-header,
body.mobile-layout .tempest-live-header,
body.mobile-layout .compact-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

body.mobile-layout .module-header > .pill,
body.mobile-layout .card-header > .pill,
body.mobile-layout .ten-day-header > .pill,
body.mobile-layout .compact-header > .pill {
  align-self: flex-start;
}

body.mobile-layout .landing-grid,
body.mobile-layout .forecast-core-grid,
body.mobile-layout .advanced-forecast-grid,
body.mobile-layout .analysis-media-grid,
body.mobile-layout .secondary-grid,
body.mobile-layout .station-advanced-grid,
body.mobile-layout .data-workspace-grid,
body.mobile-layout .data-workspace-grid-forecast,
body.mobile-layout .data-workspace-grid-local,
body.mobile-layout .data-workspace-grid-network,
body.mobile-layout .data-row-grid,
body.mobile-layout .data-stack,
body.mobile-layout .data-observation-stacks,
body.mobile-layout .data-board-columns.two,
body.mobile-layout .data-board-columns.three,
body.mobile-layout .data-feed-columns,
body.mobile-layout .data-history-trend-strip,
body.mobile-layout .simplified-media-grid,
body.mobile-layout .webcam-grid {
  grid-template-columns: 1fr;
}

body.mobile-layout .primary-now-card .local-stage-shell {
  padding: 10px;
  gap: 10px;
}

body.mobile-layout .primary-now-card .local-stage-top {
  grid-template-columns: 1fr;
  gap: 10px;
}

body.mobile-layout .primary-now-card .local-stage-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body.mobile-layout .local-stage-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.mobile-layout .local-stage-details .detail-item {
  min-height: 0;
}

body.mobile-layout .radar-card,
body.mobile-layout .local-stage-card,
body.mobile-layout .forecast-pulse-card,
body.mobile-layout .daily-overview-card,
body.mobile-layout .visual-desk-card,
body.mobile-layout .tempest-live-card {
  min-height: 0;
}

body.mobile-layout .radar-card-header {
  gap: 10px;
}

body.mobile-layout .radar-card-header,
body.mobile-layout .radar-toolbar,
body.mobile-layout .radar-toolbar-main,
body.mobile-layout .radar-toolbar-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

body.mobile-layout .radar-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.mobile-layout .radar-toolbar-main {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  width: 100%;
}

body.mobile-layout .radar-toolbar-main select {
  width: auto;
  min-width: 110px;
  max-width: 118px;
  min-height: 34px;
  padding: 0 32px 0 12px;
  justify-self: start;
  align-self: start;
  flex: 0 0 auto;
}

body.mobile-layout .radar-map {
  height: clamp(250px, 78vw, 320px);
}

body.mobile-layout .radar-map-overlay {
  top: 10px;
  left: 10px;
  right: 10px;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

body.mobile-layout .radar-map-overlay .frame-button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.72rem;
  white-space: nowrap;
}

body.mobile-layout .radar-frames {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

body.mobile-layout .radar-footer {
  flex-direction: column;
  gap: 6px;
}

body.mobile-layout .forecast-core-card {
  gap: 7px;
}

body.mobile-layout .forecast-graph-note {
  min-height: 0;
  font-size: 0.78rem;
  line-height: 1.36;
}

body.mobile-layout .forecast-primary-legend,
body.mobile-layout .chart-legend {
  min-height: 0;
  gap: 5px;
}

body.mobile-layout .legend-chip {
  min-height: 22px;
  padding: 0 8px;
  font-size: 0.68rem;
}

body.mobile-layout .forecast-chart,
body.mobile-layout .history-chart-shell,
body.mobile-layout .forecast-pulse-chart-shell,
body.mobile-layout .ten-day-forecast-strip {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.mobile-layout .forecast-chart {
  margin-top: 0;
  border-radius: 16px;
}

body.mobile-layout .forecast-chart .axis-label,
body.mobile-layout .forecast-chart .history-axis-label {
  font-size: 10px;
}

body.mobile-layout .forecast-chart .graph-label,
body.mobile-layout .forecast-chart .chart-panel-label {
  font-size: 10px;
}

body.mobile-layout .forecast-graph-card .forecast-chart-svg {
  height: 228px;
}

body.mobile-layout .forecast-chart-svg.atmosphere-chart-svg,
body.mobile-layout .forecast-chart-svg.history-chart-svg {
  height: 236px;
}

body.mobile-layout .forecast-chart-svg.short-chart {
  height: 170px;
}

body.mobile-layout .forecast-pulse-head,
body.mobile-layout .forecast-pulse-copy-row {
  grid-template-columns: 1fr;
  gap: 8px;
}

body.mobile-layout .forecast-pulse-strip-wrap {
  justify-items: start;
  width: 100%;
}

body.mobile-layout .forecast-pulse-strip-header {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

body.mobile-layout .forecast-pulse-shell {
  gap: 10px;
}

body.mobile-layout .forecast-pulse-chart-shell {
  min-height: 0;
  padding: 0;
  border-radius: 18px;
  aspect-ratio: 352 / 248;
}

body.mobile-layout .forecast-pulse-temp {
  font-size: clamp(2.25rem, 15vw, 2.95rem);
}

body.mobile-layout .forecast-pulse-current-main {
  gap: 8px;
}

body.mobile-layout .forecast-pulse-current-visual {
  transform: scale(0.92);
  transform-origin: center left;
}

body.mobile-layout .forecast-pulse-current-meta,
body.mobile-layout .forecast-pulse-subhead {
  font-size: 0.78rem;
  line-height: 1.34;
}

body.mobile-layout .forecast-pulse-headline {
  font-size: 1.04rem;
  line-height: 1.1;
}

body.mobile-layout .forecast-pulse-strip {
  min-width: 0;
}

body.mobile-layout .forecast-pulse-strip-caption {
  font-size: 0.62rem;
}

body.mobile-layout .forecast-pulse-strip-meta {
  font-size: 0.66rem;
  text-align: left;
}

body.mobile-layout .forecast-pulse-strip-grid {
  gap: 3px;
}

body.mobile-layout .forecast-pulse-strip-segment {
  min-height: 24px;
  padding-inline: 2px;
  font-size: 0.56rem;
}

body.mobile-layout .forecast-pulse-strip-axis {
  gap: 3px;
  margin-top: 4px;
}

body.mobile-layout .forecast-pulse-strip-time {
  font-size: 0.52rem;
}

body.mobile-layout .forecast-pulse-svg {
  width: 100%;
  height: 100%;
}

body.mobile-layout .forecast-pulse-marker {
  min-width: 28px;
  gap: 2px;
  width: max-content;
}

body.mobile-layout .forecast-pulse-marker strong {
  font-size: 0.72rem;
}

body.mobile-layout .forecast-pulse-marker-icon .weather-visual.tiny {
  transform: scale(0.86);
  transform-origin: center;
}

body.mobile-layout .forecast-pulse-precip-label {
  font-size: 8px;
}

body.mobile-layout .forecast-pulse-time,
body.mobile-layout .forecast-pulse-day-label {
  font-size: 12px;
}

body.mobile-layout .tempest-live-grid,
body.mobile-layout .compact-station-grid {
  grid-template-columns: 1fr;
}

body.mobile-layout .history-readout-grid,
body.mobile-layout .secondary-metrics-grid,
body.mobile-layout .network-support-grid {
  grid-template-columns: 1fr;
}

body.mobile-layout .ten-day-header {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

body.mobile-layout .ten-day-header > div {
  width: 100%;
}

body.mobile-layout .ten-day-forecast-card {
  gap: 8px;
}

body.mobile-layout .ten-day-forecast-strip {
  margin-inline: -2px;
  padding-inline: 2px;
}

body.mobile-layout .ten-day-grid {
  min-width: 980px;
  gap: 8px;
}

body.mobile-layout .webcam-card,
body.mobile-layout .detail-item,
body.mobile-layout .history-readout {
  border-radius: 16px;
}

body.mobile-layout .webcam-thumb-wrap {
  border-radius: 14px;
}

body.mobile-layout .webcam-copy strong {
  font-size: 0.96rem;
}

body.mobile-layout .webcam-copy small {
  font-size: 0.78rem;
}

body.mobile-layout .dashboard-disclosure > summary {
  align-items: flex-start;
  gap: 8px;
}

body.mobile-layout .dashboard-disclosure > summary small {
  font-size: 0.78rem;
  line-height: 1.34;
}

/* Mobile product curation pass */
body.mobile-layout .app-shell {
  padding: max(8px, env(safe-area-inset-top)) 8px 14px;
}

body.mobile-layout .app-main,
body.mobile-layout .content-workspace.minimal-workspace,
body.mobile-layout .dashboard-section {
  gap: 8px;
}

body.mobile-layout .hero {
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 6px 10px;
  padding: 8px;
}

body.mobile-layout .hero-left,
body.mobile-layout .hero-right,
body.mobile-layout .hero-alerts {
  gap: 6px;
}

body.mobile-layout .hero-left {
  grid-column: 1;
  grid-row: 1;
}

body.mobile-layout .hero h1 {
  font-size: clamp(1.9rem, 7.2vw, 2.2rem);
  line-height: 1.02;
}

body.mobile-layout .hero-brandbar {
  display: block;
}

body.mobile-layout .hero-brandgroup {
  gap: 2px;
  align-items: center;
}

body.mobile-layout .hero-brandcopy {
  gap: 0;
}

body.mobile-layout .hero-brandmark-desktop {
  display: none;
}

body.mobile-layout .hero-brandmark-mobile {
  display: block;
  width: 80px;
  height: 62px;
  margin-right: -14px;
  object-fit: cover;
  object-position: center 24%;
}

body.mobile-layout .hero-solar-status {
  gap: 8px;
  padding: 7px 8px;
}

body.mobile-layout .hero-solar-mobile {
  display: flex;
}

body.mobile-layout .hero-solar-desktop {
  display: none;
}

body.mobile-layout .hero-solar-icon {
  width: 30px;
  height: 30px;
}

body.mobile-layout .hero-solar-kicker {
  font-size: 0.58rem;
}

body.mobile-layout .hero-solar-topline {
  gap: 6px;
  width: 100%;
}

body.mobile-layout .hero-solar-copy strong {
  font-size: 0.84rem;
}

body.mobile-layout .hero-solar-copy {
  flex: 1 1 auto;
  width: 100%;
}

body.mobile-layout .hero-mobile-alert-pill {
  padding: 3px 7px;
  font-size: 0.54rem;
  margin-left: auto;
}

body.mobile-layout .hero-solar-secondary {
  font-size: 0.72rem;
  line-height: 1.24;
}

body.mobile-layout .hero-text,
body.mobile-layout .hero-chip,
body.mobile-layout .hero-actions .secondary-link,
body.mobile-layout .section-signal,
body.mobile-layout .ten-day-legend,
body.mobile-layout .forecast-graph-note,
body.mobile-layout .tempest-live-summary,
body.mobile-layout #data-section,
body.mobile-layout #radarOpsButton,
body.mobile-layout #radarInspectButton,
body.mobile-layout #basemapSelect,
body.mobile-layout #radarOpsPanel,
body.mobile-layout #radarInspectPanel {
  display: none;
}

body.mobile-layout .hero-actions {
  grid-template-columns: 1fr;
  gap: 6px;
  width: 118px;
  padding-top: 0;
}

body.mobile-layout .hero-actions .hero-tool-button {
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  font-size: 0.74rem;
  justify-content: center;
}

body.mobile-layout .hero-tool-icon,
body.mobile-layout .hero-tool-icon svg {
  width: 12px;
  height: 12px;
}

body.mobile-layout .primary-button,
body.mobile-layout .secondary-button,
body.mobile-layout .secondary-link,
body.mobile-layout .place-chip,
body.mobile-layout .frame-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.82rem;
}

body.mobile-layout .hero-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(108px, 1fr));
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
  scroll-snap-type: x proximity;
}

body.mobile-layout .status-card {
  min-width: 108px;
  padding: 6px 8px;
  scroll-snap-align: start;
}

body.mobile-layout .status-label {
  font-size: 0.62rem;
}

body.mobile-layout .status-value {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-layout .hero-place-switcher {
  padding: 6px 8px;
}

body.mobile-layout .hero-side-utility {
  display: none;
}

body.mobile-layout .hero-meta-rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  justify-items: end;
  text-align: right;
}

body.mobile-layout .hero-meta-item {
  display: grid;
  gap: 1px;
  justify-items: end;
}

body.mobile-layout .hero-meta-item:nth-child(n + 3) {
  display: none;
}

body.mobile-layout .hero-meta-label {
  font-size: 0.58rem;
}

body.mobile-layout .hero-meta-value {
  max-width: none;
  font-size: 0.8rem;
}

body.mobile-layout .hero-place-header {
  display: none;
}

body.mobile-layout .place-switcher {
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
}

body.mobile-layout .place-chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.mobile-layout .hero-alerts {
  padding: 6px 8px;
}

body.mobile-layout .hero-alerts-header .eyebrow {
  display: none;
}

body.mobile-layout .hero-alerts-header h3 {
  font-size: 0.88rem;
}

body.mobile-layout .hero-alert-list {
  max-height: 116px;
  overflow-y: auto;
}

body.mobile-layout .hero-alerts.is-compact .hero-alert-list {
  max-height: none;
  overflow: visible;
}

body.mobile-layout .hero-alert-item {
  padding: 6px 8px;
}

body.mobile-layout .hero-alert-copy p,
body.mobile-layout .hero-alert-copy small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.mobile-layout .hero-alert-idle .hero-alert-copy p {
  display: none;
}

body.mobile-layout .forecast-ticker {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 8px;
}

body.mobile-layout .forecast-ticker-head {
  display: none;
}

body.mobile-layout .forecast-ticker-viewport {
  min-width: 0;
}

body.mobile-layout #forecastTickerBadge {
  align-self: center;
}

body.mobile-layout .card {
  padding: 9px;
  border-radius: 12px;
}

body.mobile-layout .card-header,
body.mobile-layout .module-header,
body.mobile-layout .ten-day-header,
body.mobile-layout .tempest-live-header,
body.mobile-layout .compact-header {
  gap: 6px;
}

body.mobile-layout .primary-now-card .card-header,
body.mobile-layout .ten-day-header {
  flex-direction: row;
  align-items: center;
}

body.mobile-layout .primary-now-card .card-header .pill,
body.mobile-layout .ten-day-header .pill {
  display: none;
}

body.mobile-layout .primary-now-card .local-stage-shell {
  gap: 8px;
  margin-top: 5px;
  padding: 8px;
  border-radius: 12px;
}

body.mobile-layout .primary-now-card .local-stage-top {
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  gap: 8px;
  align-items: center;
}

body.mobile-layout .local-stage-temp {
  font-size: 3.3rem;
}

body.mobile-layout .local-stage-feels {
  margin-top: 4px;
  font-size: 0.92rem;
}

body.mobile-layout .primary-now-card .local-stage-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

body.mobile-layout .primary-now-card .stage-stat {
  gap: 2px;
  min-width: 0;
  padding-top: 6px;
}

body.mobile-layout .primary-now-card .stage-stat span {
  font-size: 0.62rem;
}

body.mobile-layout .primary-now-card .stage-stat strong {
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-layout .local-stage-side {
  gap: 4px;
  justify-items: end;
  text-align: right;
}

body.mobile-layout .local-stage-side .weather-visual {
  margin: -8px -6px -10px 0;
  transform: scale(0.9);
  transform-origin: center right;
}

body.mobile-layout .primary-now-card .local-stage-condition {
  font-size: 0.98rem;
  line-height: 1.12;
}

body.mobile-layout .local-stage-dayline {
  max-width: 10rem;
  font-size: 0.74rem;
  line-height: 1.24;
}

body.mobile-layout .primary-now-card .local-stage-summary {
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.3;
}

body.mobile-layout .local-stage-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.mobile-layout .local-stage-details .detail-item {
  min-height: 0;
  padding: 7px 8px;
  border-radius: 10px;
}

body.mobile-layout .local-stage-details .detail-item:nth-child(3),
body.mobile-layout .local-stage-details .detail-item:nth-child(6),
body.mobile-layout .local-stage-details .detail-item:nth-child(7) {
  display: none;
}

body.mobile-layout .local-stage-details .detail-item span {
  font-size: 0.62rem;
}

body.mobile-layout .local-stage-details .detail-item strong {
  margin-top: 4px;
  font-size: 1rem;
}

body.mobile-layout .local-stage-details .detail-item small {
  display: none;
}

body.mobile-layout .radar-card-header {
  gap: 7px;
}

body.mobile-layout .radar-card-header h2 {
  font-size: 1rem;
}

body.mobile-layout .radar-toolbar-main,
body.mobile-layout .radar-toolbar-actions {
  gap: 6px;
}

body.mobile-layout .radar-toolbar-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.mobile-layout .radar-map {
  height: clamp(240px, 70vw, 300px);
  border-radius: 12px;
}

body.mobile-layout .radar-map-overlay {
  top: 8px;
  right: 8px;
  left: 8px;
}

body.mobile-layout .radar-map-overlay .frame-button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 0.68rem;
}

body.mobile-layout .radar-frames {
  gap: 6px;
  margin-top: 0;
}

body.mobile-layout .radar-footer {
  max-height: 54px;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.3;
}

body.mobile-layout #forecast-section .forecast-core-grid > .forecast-hourly-card {
  order: 1;
}

body.mobile-layout #forecast-section .forecast-core-grid > .forecast-secondary-card:nth-child(2) {
  order: 2;
}

body.mobile-layout #forecast-section .forecast-core-grid > .forecast-secondary-card:nth-child(3) {
  order: 3;
}

body.mobile-layout #forecast-section .forecast-core-grid > .forecast-secondary-card:nth-child(4) {
  order: 4;
}

body.mobile-layout .forecast-graph-card {
  grid-template-rows: auto auto 1fr;
}

body.mobile-layout .ten-day-forecast-card {
  gap: 6px;
  overflow: visible;
}

body.mobile-layout .ten-day-forecast-strip {
  margin-inline: -9px;
  padding: 0 9px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

body.mobile-layout .ten-day-grid {
  grid-auto-columns: minmax(132px, 42vw);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 8px;
  min-width: 0;
}

body.mobile-layout .ten-day-item {
  min-height: 232px;
  scroll-snap-align: start;
}

body.mobile-layout .ten-day-item-shell {
  grid-template-rows: auto 62px auto 1fr;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
}

body.mobile-layout .ten-day-topline {
  gap: 1px;
}

body.mobile-layout .ten-day-day {
  font-size: 0.7rem;
}

body.mobile-layout .ten-day-date {
  font-size: 0.7rem;
}

body.mobile-layout .daily-forecast-icon {
  width: 72px;
  height: 64px;
}

body.mobile-layout .ten-day-copy {
  gap: 5px;
  min-height: 0;
}

body.mobile-layout .ten-day-condition {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.mobile-layout .ten-day-precip {
  padding: 4px 7px;
  font-size: 0.62rem;
}

body.mobile-layout .ten-day-precip-idle {
  display: none;
}

body.mobile-layout .ten-day-temp-lane {
  gap: 4px;
  margin-top: 2px;
}

body.mobile-layout .ten-day-temp-scale {
  display: none;
}

body.mobile-layout .ten-day-temp-reading {
  display: grid;
  grid-template-rows: auto 0.72rem;
  justify-content: center;
  justify-items: center;
  gap: 1px;
  align-content: start;
}

body.mobile-layout .ten-day-temp-reading strong {
  font-size: 1.42rem;
}

body.mobile-layout .ten-day-temp-primary {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-height: 1rem;
  grid-row: 1;
}

body.mobile-layout .ten-day-temp-reading span {
  font-size: 0.9rem;
}

body.mobile-layout .ten-day-secondary-low {
  display: block;
  min-height: 0.72rem;
  margin-top: 0;
  font-size: 0.54rem;
  letter-spacing: 0.04em;
  text-align: center;
  grid-row: 2;
  align-self: start;
}

body.mobile-layout .tempest-live-grid .detail-item {
  min-height: 0;
  padding: 10px;
}

body.mobile-layout .tempest-live-grid .detail-item small,
body.mobile-layout .webcam-copy small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Mobile density and graph parity pass */
body.mobile-layout .hero {
  padding: 7px;
}

body.mobile-layout .hero-title-row {
  display: none;
}

body.mobile-layout .hero-brandline {
  display: block;
}

body.mobile-layout .hero h1 {
  font-size: 2.28rem;
}

body.mobile-layout .hero-tagline {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.28;
}

body.mobile-layout .hero-tagline-dash {
  display: none;
}

body.mobile-layout .hero-actions {
  gap: 6px;
}

body.mobile-layout .hero-status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}

body.mobile-layout .hero-status .status-card:nth-child(n + 3) {
  display: none;
}

body.mobile-layout .status-card {
  min-width: 0;
}

body.mobile-layout .hero-place-switcher.is-single-place,
body.mobile-layout .hero-place-switcher.is-single-place {
  display: none;
}

body.mobile-layout .forecast-ticker {
  margin-top: 5px;
}

body.mobile-layout .card-header,
body.mobile-layout .module-header,
body.mobile-layout .ten-day-header,
body.mobile-layout .tempest-live-header,
body.mobile-layout .compact-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 0;
  gap: 6px;
}

body.mobile-layout .radar-card-header {
  display: grid;
  grid-template-columns: 1fr;
}

body.mobile-layout .card-header .eyebrow,
body.mobile-layout .module-header .eyebrow,
body.mobile-layout .ten-day-header .eyebrow,
body.mobile-layout .tempest-live-header .eyebrow,
body.mobile-layout .compact-header .eyebrow {
  display: none;
}

body.mobile-layout .module-header h3,
body.mobile-layout .card h2,
body.mobile-layout .radar-card-header h2 {
  font-size: 0.96rem;
  line-height: 1.08;
}

body.mobile-layout .module-header > .pill,
body.mobile-layout .card-header > .pill,
body.mobile-layout .ten-day-header > .pill,
body.mobile-layout .compact-header > .pill,
body.mobile-layout .tempest-live-header > .pill {
  display: none;
}

body.mobile-layout .forecast-graph-card {
  gap: 5px;
  padding: 8px 6px 7px;
}

body.mobile-layout .forecast-graph-card .module-header {
  padding: 0 2px;
}

body.mobile-layout .forecast-primary-legend,
body.mobile-layout .chart-legend {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 1px;
}

body.mobile-layout .legend-chip {
  flex: 0 0 auto;
}

body.mobile-layout .forecast-graph-card .forecast-chart {
  width: calc(100% + 12px);
  margin-inline: -6px;
  border-radius: 12px;
}

body.mobile-layout .forecast-graph-card .forecast-chart-svg,
body.mobile-layout .forecast-chart-svg.atmosphere-chart-svg,
body.mobile-layout .forecast-chart-svg.history-chart-svg {
  height: 252px;
}

body.mobile-layout .forecast-chart-with-readout,
body.mobile-layout .history-chart-stack {
  gap: 6px;
}

body.mobile-layout .forecast-chart-with-readout .history-readout-grid,
body.mobile-layout .history-chart-stack .history-readout-grid {
  display: grid;
  grid-auto-columns: minmax(96px, 1fr);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 1px;
}

body.mobile-layout .forecast-chart-with-readout .history-readout,
body.mobile-layout .history-chart-stack .history-readout {
  min-width: 96px;
  padding: 7px 8px;
  border-radius: 10px;
}

body.mobile-layout .forecast-chart-with-readout .history-readout span,
body.mobile-layout .history-chart-stack .history-readout span {
  font-size: 0.58rem;
}

body.mobile-layout .forecast-chart-with-readout .history-readout strong,
body.mobile-layout .history-chart-stack .history-readout strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-layout .forecast-chart-with-readout .history-readout small,
body.mobile-layout .history-chart-stack .history-readout small {
  display: none;
}

body.mobile-layout .tempest-live-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.mobile-layout .tempest-live-grid .detail-item {
  padding: 8px;
  border-radius: 10px;
}

body.mobile-layout .tempest-live-grid .detail-item span {
  font-size: 0.6rem;
}

body.mobile-layout .tempest-live-grid .detail-item strong,
body.mobile-layout .tempest-live-grid .detail-item strong.small-value {
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.12;
}

body.mobile-layout .tempest-live-grid .detail-item small {
  display: none;
}

body.mobile-layout .media-webcam-grid {
  display: grid;
  grid-auto-columns: minmax(214px, 78vw);
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

body.mobile-layout .media-webcam-grid .webcam-card {
  scroll-snap-align: start;
}

body.mobile-layout .webcam-card {
  gap: 6px;
  padding: 7px;
  border-radius: 10px;
}

body.mobile-layout .webcam-thumb-wrap {
  border-radius: 8px;
}

body.mobile-layout .webcam-card-actions {
  display: none;
}

/* Mobile top section repair */
body.mobile-layout .hero {
  display: block;
  padding: 7px 8px 5px;
}

body.mobile-layout .hero-mobile-shell,
body.mobile-layout .mobile-top-shell {
  display: grid;
  --mobile-top-right-width: clamp(142px, 35vw, 154px);
  grid-template-columns: minmax(0, 1fr) var(--mobile-top-right-width);
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
  --mobile-top-right-inset: 0px;
}

body.mobile-layout .mobile-header-row {
  display: contents;
}

body.mobile-layout .mobile-brand-block {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

body.mobile-layout .mobile-brand-block .hero-copy {
  gap: 2px;
}

body.mobile-layout .hero-brandgroup {
  align-items: flex-start;
  gap: 5px;
}

body.mobile-layout .hero-brandcopy {
  min-width: 0;
  padding-top: 1px;
}

body.mobile-layout .hero h1 {
  font-size: clamp(1.58rem, 6vw, 1.82rem);
  line-height: 1;
}

body.mobile-layout .hero-brandmark-mobile {
  display: block;
  width: 60px;
  height: 48px;
  margin-right: 0;
  object-fit: cover;
  object-position: center 24%;
}

body.mobile-layout .hero-tagline {
  font-size: 0.72rem;
  line-height: 1.22;
}

body.mobile-layout .hero-text {
  display: none;
}

body.mobile-layout .mobile-meta-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  align-self: stretch;
  justify-self: stretch;
  justify-items: end;
  width: 100%;
  min-width: 0;
}

body.mobile-layout .mobile-meta-controls .hero-side-top {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 3px;
  width: 100%;
  height: 100%;
}

body.mobile-layout .mobile-meta-stack {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: end;
  align-content: start;
  gap: 0;
  width: 100%;
  min-width: 0;
  text-align: right;
}

body.mobile-layout .mobile-meta-stack .hero-meta-item {
  display: grid;
  justify-items: end;
  gap: 0;
  width: 100%;
}

body.mobile-layout .mobile-meta-stack .hero-meta-item:nth-child(n + 3) {
  display: none;
}

body.mobile-layout .mobile-meta-stack .hero-meta-label {
  font-size: 0.52rem;
}

body.mobile-layout .mobile-meta-stack .hero-meta-value {
  max-width: none;
  overflow: visible;
  font-size: 0.72rem;
  line-height: 1.02;
  text-align: right;
  text-overflow: clip;
  white-space: normal;
}

body.mobile-layout .mobile-control-stack {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  align-self: end;
  gap: 3px;
  width: 100%;
  justify-items: stretch;
}

body.mobile-layout .mobile-control-stack .hero-tool-button {
  width: 100%;
  min-height: 27px;
  padding: 0 10px;
  font-size: 0.73rem;
}

body.mobile-layout .mobile-solar-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

body.mobile-layout .hero-solar-mobile {
  display: inline-flex;
  width: auto;
  max-width: min(100%, 19.4rem);
  min-height: 52px;
  padding: 4px 7px 5px;
}

body.mobile-layout .hero-solar-status {
  gap: 5px;
}

body.mobile-layout .hero-solar-copy {
  width: auto;
  max-width: 14.9rem;
  gap: 0;
}

body.mobile-layout .hero-solar-copy strong {
  font-size: 0.76rem;
  line-height: 1.02;
  max-width: 14.9rem;
}

body.mobile-layout .hero-solar-secondary {
  overflow: hidden;
  font-size: 0.62rem;
  line-height: 1.04;
  max-width: 14.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-layout .hero-solar-kicker {
  font-size: 0.5rem;
  letter-spacing: 0.11em;
}

body.mobile-layout .hero-solar-icon {
  width: 23px;
  height: 23px;
}

body.mobile-layout .hero-mobile-alert-pill {
  padding: 3px 7px;
  font-size: 0.54rem;
}

body.mobile-layout .hero-mobile-alert-pill[hidden] {
  display: none !important;
}

body.mobile-layout .mobile-alert-row {
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
}

body.mobile-layout .hero-alerts {
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body.mobile-layout .hero-alerts.is-compact {
  padding: 0;
}

body.mobile-layout .hero-alert-list {
  max-height: none;
  overflow: visible;
}

body.mobile-layout .hero-alert-item {
  padding: 3px 0 2px 0;
}

body.mobile-layout .hero-alerts.is-compact .hero-alert-item {
  padding: 3px 0 2px 0;
}

body.mobile-layout .hero-alert-idle {
  grid-template-columns: minmax(0, 1fr) var(--mobile-top-right-width);
  align-items: end;
}

body.mobile-layout .hero-alert-idle .hero-alert-copy {
  gap: 6px;
}

body.mobile-layout .hero-alert-idle > .pill {
  justify-self: end;
}

body.mobile-layout .hero-alert-copy p,
body.mobile-layout .hero-alert-copy small {
  -webkit-line-clamp: 2;
}

@media (max-width: 430px) {
  body.mobile-layout .hero {
    padding: 6px 7px 4px;
  }

  body.mobile-layout .hero-mobile-shell,
  body.mobile-layout .mobile-top-shell {
    column-gap: 9px;
    row-gap: 3px;
  }

  body.mobile-layout .mobile-meta-controls {
    width: 100%;
  }

  body.mobile-layout .hero-brandmark-mobile {
    width: 56px;
    height: 45px;
  }

  body.mobile-layout .hero h1 {
    font-size: clamp(1.62rem, 6vw, 1.84rem);
  }

  body.mobile-layout .hero-tagline {
    font-size: 0.69rem;
  }

  body.mobile-layout .mobile-control-stack .hero-tool-button {
    min-height: 26px;
    font-size: 0.71rem;
  }

  body.mobile-layout .hero-solar-copy,
  body.mobile-layout .hero-solar-copy strong,
  body.mobile-layout .hero-solar-secondary {
    max-width: 14.2rem;
  }
}

/* Mobile top section source of truth */
@media (max-width: 820px) {
  body.mobile-layout .hero {
    padding: 6px 7px 2px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    --mobile-top-right-width: clamp(138px, 33vw, 148px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mobile-top-right-width);
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    width: 100%;
    min-width: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell > .mobile-header-row {
    display: contents;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-brand-block {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandgroup {
    align-items: flex-start;
    gap: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 72px;
    height: 54px;
    margin-right: -10px;
    margin-top: -8px;
    object-fit: cover;
    object-position: center 18%;
    align-self: flex-start;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy {
    min-width: 0;
    padding-top: 7px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: clamp(1.22rem, 4.7vw, 1.42rem);
    line-height: 1;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.67rem;
    line-height: 1.12;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-copy {
    gap: 1px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-text {
    display: none;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-controls {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    align-self: stretch;
    justify-self: stretch;
    justify-items: end;
    width: var(--mobile-top-right-width);
    min-width: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-controls .hero-side-top {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2px;
    width: var(--mobile-top-right-width);
    height: 100%;
    align-items: start;
    justify-items: end;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack {
    display: grid;
    gap: 1px;
    width: var(--mobile-top-right-width);
    justify-items: end;
    align-content: start;
    text-align: right;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-item {
    display: grid;
    gap: 0;
    width: 100%;
    justify-items: end;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-item:nth-child(n + 3) {
    display: none;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-label {
    font-size: 0.5rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-value {
    max-width: none;
    overflow: visible;
    font-size: 0.71rem;
    line-height: 1.01;
    text-align: right;
    text-overflow: clip;
    white-space: normal;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack {
    display: grid;
    gap: 2px;
    width: var(--mobile-top-right-width);
    align-self: end;
    justify-items: end;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-tool-button {
    width: auto;
    min-width: 88px;
    max-width: 100%;
    min-height: 25px;
    padding: 0 8px;
    font-size: 0.71rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-solar-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-mobile {
    display: inline-flex;
    width: auto;
    max-width: min(100%, 19.75rem);
    min-height: 44px;
    padding: 3px 8px 4px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-status {
    gap: 4px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-icon {
    width: 20px;
    height: 20px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-copy {
    width: auto;
    max-width: 15.35rem;
    gap: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-topline {
    gap: 0;
    width: 100%;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-kicker {
    font-size: 0.48rem;
    letter-spacing: 0.11em;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-copy strong {
    max-width: 15.35rem;
    font-size: 0.73rem;
    line-height: 1.02;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-secondary {
    max-width: 15.35rem;
    overflow: hidden;
    font-size: 0.57rem;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-mobile-alert-pill {
    padding: 3px 7px;
    font-size: 0.54rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-mobile-alert-pill[hidden] {
    display: none !important;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-alert-row {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
    width: 100%;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alerts {
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alerts.is-compact {
    padding: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-list {
    max-height: none;
    overflow: visible;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-item {
    padding: 1px 0 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle {
    grid-template-columns: minmax(0, 1fr) var(--mobile-top-right-width);
    column-gap: 10px;
    align-items: end;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle .hero-alert-copy {
    gap: 3px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle .hero-alert-copy strong {
    font-weight: 600;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle > .pill {
    justify-self: end;
    align-self: end;
    min-height: 20px;
    padding: 0 8px;
    font-size: 8px;
  }
}

@media (max-width: 430px) {
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    --mobile-top-right-width: clamp(136px, 36vw, 144px);
    column-gap: 8px;
    row-gap: 2px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 66px;
    height: 50px;
    margin-top: -7px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: clamp(1.14rem, 4.5vw, 1.32rem);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.65rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-tool-button {
    min-height: 24px;
    font-size: 0.69rem;
    min-width: 84px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-copy,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-copy strong,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-secondary {
    max-width: 14.5rem;
  }
}

/* Mobile resilience hardening source of truth */
@media (max-width: 820px) {
  body.mobile-layout {
    --mobile-page-pad: clamp(8px, 2.5vw, 10px);
    --mobile-card-pad: clamp(8px, 2.6vw, 11px);
    --mobile-tight-gap: clamp(4px, 1.35vw, 6px);
    --mobile-block-gap: clamp(6px, 1.8vw, 9px);
    --mobile-touch-height: 32px;
    --mobile-top-right-width: clamp(126px, 34vw, 144px);
  }

  body.mobile-layout .app-shell {
    min-height: 100svh;
    min-height: 100dvh;
    padding:
      max(var(--mobile-page-pad), env(safe-area-inset-top))
      max(var(--mobile-page-pad), env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(var(--mobile-page-pad), env(safe-area-inset-left));
  }

  body.mobile-layout .app-layout,
  body.mobile-layout .app-main,
  body.mobile-layout .hero,
  body.mobile-layout .card,
  body.mobile-layout .forecast-ticker,
  body.mobile-layout .forecast-core-grid,
  body.mobile-layout .forecast-chart-card,
  body.mobile-layout .forecast-chart-with-readout,
  body.mobile-layout .history-chart-stack,
  body.mobile-layout .ten-day-forecast-strip,
  body.mobile-layout .dashboard-disclosure > summary,
  body.mobile-layout .dashboard-disclosure .disclosure-body,
  body.mobile-layout .settings-panel,
  body.mobile-layout .settings-panel form,
  body.mobile-layout .settings-grid,
  body.mobile-layout .settings-actions,
  body.mobile-layout .panel-header {
    min-width: 0;
  }

  body.mobile-layout .hero,
  body.mobile-layout .card,
  body.mobile-layout .forecast-ticker {
    border-radius: 12px;
  }

  body.mobile-layout .module-header,
  body.mobile-layout .card-header,
  body.mobile-layout .compact-header,
  body.mobile-layout .ten-day-header,
  body.mobile-layout .tempest-live-header,
  body.mobile-layout .radar-card-header {
    min-width: 0;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mobile-tight-gap);
  }

  body.mobile-layout .module-header > div,
  body.mobile-layout .card-header > div,
  body.mobile-layout .compact-header > div,
  body.mobile-layout .ten-day-header > div,
  body.mobile-layout .tempest-live-header > div,
  body.mobile-layout .radar-card-header > div {
    min-width: 0;
    flex: 1 1 auto;
  }

  body.mobile-layout .hero h1,
  body.mobile-layout .module-header h3,
  body.mobile-layout .card h2,
  body.mobile-layout .radar-card-header h2,
  body.mobile-layout .hero-meta-value,
  body.mobile-layout .local-stage-condition,
  body.mobile-layout .forecast-pulse-headline,
  body.mobile-layout .ten-day-condition,
  body.mobile-layout .webcam-copy strong {
    overflow-wrap: anywhere;
  }

  body.mobile-layout .provider-message,
  body.mobile-layout .hero-alert-copy p,
  body.mobile-layout .hero-alert-copy small,
  body.mobile-layout .forecast-graph-note,
  body.mobile-layout .local-stage-summary,
  body.mobile-layout .local-stage-dayline,
  body.mobile-layout .detail-item small,
  body.mobile-layout .webcam-copy small,
  body.mobile-layout .forecast-ticker-run {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.mobile-layout .secondary-button,
  body.mobile-layout .primary-button,
  body.mobile-layout .secondary-link,
  body.mobile-layout .place-chip,
  body.mobile-layout .frame-button,
  body.mobile-layout .pill,
  body.mobile-layout .legend-chip,
  body.mobile-layout select {
    max-width: 100%;
  }

  body.mobile-layout .chart-legend,
  body.mobile-layout .forecast-primary-legend,
  body.mobile-layout .radar-frames,
  body.mobile-layout .radar-map-overlay,
  body.mobile-layout .history-readout-grid,
  body.mobile-layout .media-webcam-grid,
  body.mobile-layout .place-switcher,
  body.mobile-layout .ten-day-forecast-strip {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.mobile-layout .chart-legend::-webkit-scrollbar,
  body.mobile-layout .forecast-primary-legend::-webkit-scrollbar,
  body.mobile-layout .radar-frames::-webkit-scrollbar,
  body.mobile-layout .radar-map-overlay::-webkit-scrollbar,
  body.mobile-layout .history-readout-grid::-webkit-scrollbar,
  body.mobile-layout .media-webcam-grid::-webkit-scrollbar,
  body.mobile-layout .place-switcher::-webkit-scrollbar,
  body.mobile-layout .ten-day-forecast-strip::-webkit-scrollbar {
    display: none;
  }

  body.mobile-layout .forecast-ticker {
    align-items: center;
    min-width: 0;
    gap: var(--mobile-tight-gap);
    padding: 7px 8px;
  }

  body.mobile-layout .forecast-ticker-viewport,
  body.mobile-layout .forecast-ticker-track,
  body.mobile-layout .forecast-ticker-run {
    min-width: 0;
  }

  body.mobile-layout .forecast-ticker-run {
    font-size: clamp(0.74rem, 2.9vw, 0.84rem);
    line-height: 1.28;
  }

  body.mobile-layout #forecastTickerBadge {
    flex: 0 0 auto;
    min-height: 20px;
    font-size: 0.58rem;
    padding-inline: 8px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    grid-template-columns: minmax(0, 1fr) var(--mobile-top-right-width);
    column-gap: 8px;
    row-gap: 3px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandgroup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 2px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 66px;
    height: 50px;
    margin: 0;
    object-fit: cover;
    object-position: center 18%;
    align-self: start;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy {
    min-width: 0;
    padding-top: 4px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: clamp(1.12rem, 4.65vw, 1.34rem);
    line-height: 1.02;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.64rem;
    line-height: 1.18;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-controls,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-controls .hero-side-top,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack {
    width: var(--mobile-top-right-width);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack {
    gap: 2px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-item {
    width: 100%;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-label {
    font-size: 0.5rem;
    line-height: 1;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-value {
    font-size: clamp(0.72rem, 2.8vw, 0.82rem);
    line-height: 1.05;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack {
    gap: 4px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-tool-button {
    width: min(100%, 100px);
    min-width: 0;
    min-height: 24px;
    padding-inline: 8px;
    font-size: 0.69rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-solar-row {
    align-items: end;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-mobile {
    width: min(100%, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--mobile-top-right-width) - 32px));
    max-width: 100%;
    min-height: 42px;
    padding: 4px 8px;
    border-radius: 12px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-status {
    gap: 4px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-icon {
    width: 20px;
    height: 20px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-copy {
    width: auto;
    max-width: 100%;
    gap: 1px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-topline {
    gap: 4px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-kicker {
    font-size: 0.48rem;
    letter-spacing: 0.11em;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-copy strong {
    font-size: 0.72rem;
    line-height: 1.04;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-secondary {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle {
    grid-template-columns: minmax(0, 1fr) var(--mobile-top-right-width);
    column-gap: 8px;
    align-items: center;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle .hero-alert-copy {
    gap: 2px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle .hero-alert-copy strong {
    font-weight: 600;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-alert-idle > .pill {
    justify-self: end;
    align-self: center;
    min-height: 20px;
    padding-inline: 8px;
    font-size: 0.5rem;
  }

  body.mobile-layout .primary-now-card .local-stage-shell {
    gap: 8px;
    padding: 8px;
  }

  body.mobile-layout .primary-now-card .local-stage-top {
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
    gap: 8px;
    align-items: start;
  }

  body.mobile-layout .local-stage-big,
  body.mobile-layout .local-stage-side,
  body.mobile-layout .primary-now-card .stage-stat,
  body.mobile-layout .local-stage-details .detail-item,
  body.mobile-layout .tempest-live-grid .detail-item,
  body.mobile-layout .forecast-pulse-marker,
  body.mobile-layout .history-readout,
  body.mobile-layout .webcam-card {
    min-width: 0;
  }

  body.mobile-layout .local-stage-temp {
    font-size: clamp(3rem, 12.8vw, 3.34rem);
  }

  body.mobile-layout .local-stage-feels {
    font-size: 0.92rem;
  }

  body.mobile-layout .local-stage-dayline,
  body.mobile-layout .local-stage-summary {
    max-width: none;
    font-size: clamp(0.74rem, 2.9vw, 0.8rem);
    line-height: 1.28;
  }

  body.mobile-layout .primary-now-card .stage-stat strong,
  body.mobile-layout .local-stage-details .detail-item strong,
  body.mobile-layout .history-readout strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.mobile-layout .radar-card-header {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mobile-layout .radar-toolbar-main,
  body.mobile-layout .radar-toolbar-actions {
    gap: 6px;
  }

  body.mobile-layout .radar-toolbar-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.mobile-layout .radar-toolbar-actions > *,
  body.mobile-layout .radar-toolbar-main > * {
    min-width: 0;
  }

  body.mobile-layout .radar-map {
    height: clamp(236px, 68vw, 300px);
  }

  body.mobile-layout .radar-map-overlay {
    top: 8px;
    right: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 16px);
  }

  body.mobile-layout .radar-map-overlay .frame-button {
    min-height: 26px;
    min-width: 0;
    padding-inline: 8px;
    font-size: 0.68rem;
    flex: 0 0 auto;
  }

  body.mobile-layout .radar-footer {
    max-height: none;
    overflow: visible;
    font-size: 0.72rem;
    line-height: 1.3;
  }

  body.mobile-layout .forecast-graph-card {
    gap: 6px;
    padding: 8px 6px 7px;
    overflow: hidden;
  }

  body.mobile-layout .forecast-graph-card .module-header {
    padding-inline: 2px;
  }

  body.mobile-layout .forecast-primary-legend,
  body.mobile-layout .chart-legend {
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  body.mobile-layout .legend-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(0.64rem, 2.6vw, 0.72rem);
    padding: 4px 7px;
  }

  body.mobile-layout .forecast-graph-card .forecast-chart {
    width: calc(100% + 12px);
    margin-inline: -6px;
    border-radius: 12px;
  }

  body.mobile-layout .forecast-graph-card .forecast-chart-svg,
  body.mobile-layout .forecast-chart-svg.atmosphere-chart-svg,
  body.mobile-layout .forecast-chart-svg.history-chart-svg {
    height: clamp(220px, 62vw, 252px);
  }

  body.mobile-layout .forecast-chart-with-readout,
  body.mobile-layout .history-chart-stack {
    gap: 6px;
  }

  body.mobile-layout .forecast-chart-with-readout .history-readout-grid,
  body.mobile-layout .history-chart-stack .history-readout-grid {
    display: grid;
    grid-auto-columns: minmax(96px, 42vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  body.mobile-layout .forecast-chart-with-readout .history-readout,
  body.mobile-layout .history-chart-stack .history-readout {
    min-width: 96px;
    padding: 7px 8px;
    border-radius: 10px;
  }

  body.mobile-layout .ten-day-forecast-card {
    gap: 6px;
    overflow: visible;
  }

  body.mobile-layout .ten-day-forecast-strip {
    margin-inline: calc(-1 * var(--mobile-page-pad));
    padding: 0 var(--mobile-page-pad) 4px;
    min-width: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-layout .ten-day-grid {
    grid-auto-columns: minmax(124px, 39vw);
    gap: 8px;
    min-width: 0;
  }

  body.mobile-layout .ten-day-item {
    min-height: 236px;
    scroll-snap-align: start;
  }

  body.mobile-layout .ten-day-item-shell {
    grid-template-rows: auto 62px minmax(50px, auto) 1fr;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
  }

  body.mobile-layout .daily-forecast-icon {
    width: 70px;
    height: 62px;
  }

  body.mobile-layout .ten-day-copy {
    gap: 5px;
    min-height: 46px;
  }

  body.mobile-layout .ten-day-condition {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(0.82rem, 3vw, 0.9rem);
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.mobile-layout .ten-day-precip {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  body.mobile-layout .ten-day-temp-lane {
    gap: 4px;
    margin-top: auto;
  }

  body.mobile-layout .ten-day-temp-reading {
    grid-template-rows: auto 0.8rem;
    min-height: 2.24rem;
    gap: 2px;
    align-content: start;
  }

  body.mobile-layout .ten-day-temp-primary {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    grid-row: 1;
  }

  body.mobile-layout .ten-day-temp-reading strong {
    font-size: clamp(1.38rem, 6vw, 1.52rem);
    line-height: 0.96;
  }

  body.mobile-layout .ten-day-temp-reading span {
    font-size: clamp(0.88rem, 3.6vw, 0.98rem);
    line-height: 1;
  }

  body.mobile-layout .ten-day-secondary-low {
    min-height: 0.8rem;
    margin-top: 0;
    font-size: 0.56rem;
    letter-spacing: 0.035em;
    text-align: center;
    grid-row: 2;
  }

  body.mobile-layout .tempest-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.mobile-layout .tempest-live-grid .detail-item {
    min-height: 0;
    padding: 8px;
    border-radius: 10px;
  }

  body.mobile-layout .tempest-live-grid .detail-item strong,
  body.mobile-layout .tempest-live-grid .detail-item strong.small-value {
    overflow-wrap: anywhere;
    font-size: clamp(0.9rem, 3.4vw, 0.98rem);
    line-height: 1.12;
  }

  body.mobile-layout .media-webcam-grid {
    display: grid;
    grid-auto-columns: minmax(210px, 78vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  body.mobile-layout .media-webcam-grid .webcam-card {
    scroll-snap-align: start;
  }

  body.mobile-layout .webcam-card {
    gap: 6px;
    padding: 7px;
    border-radius: 10px;
  }
}

@media (max-width: 414px) {
  body.mobile-layout {
    --mobile-top-right-width: clamp(124px, 35vw, 140px);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 64px;
    height: 48px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: clamp(1.08rem, 4.5vw, 1.28rem);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.62rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-tool-button {
    width: min(100%, 96px);
  }
}

@media (max-width: 390px) {
  body.mobile-layout {
    --mobile-top-right-width: clamp(120px, 35vw, 136px);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    column-gap: 7px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 60px;
    height: 46px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: clamp(1.02rem, 4.35vw, 1.2rem);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.6rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-tool-button {
    width: min(100%, 92px);
    font-size: 0.67rem;
  }

  body.mobile-layout .local-stage-temp {
    font-size: clamp(2.92rem, 13.3vw, 3.12rem);
  }

  body.mobile-layout .local-stage-condition {
    font-size: 0.94rem;
  }

  body.mobile-layout .local-stage-dayline,
  body.mobile-layout .forecast-ticker-run,
  body.mobile-layout .provider-message,
  body.mobile-layout .forecast-graph-note {
    font-size: 0.74rem;
  }
}

@media (max-width: 360px) {
  body.mobile-layout {
    --mobile-top-right-width: clamp(114px, 34vw, 128px);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    column-gap: 6px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 56px;
    height: 42px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: clamp(0.98rem, 4.2vw, 1.12rem);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.58rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-tool-button {
    width: min(100%, 88px);
    min-height: 23px;
    font-size: 0.65rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-mobile {
    min-height: 40px;
    padding: 4px 7px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-copy strong {
    font-size: 0.69rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-secondary {
    font-size: 0.54rem;
  }

  body.mobile-layout .radar-toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mobile-layout .tempest-live-grid,
  body.mobile-layout .compact-station-grid {
    grid-template-columns: 1fr;
  }

  body.mobile-layout .ten-day-grid {
    grid-auto-columns: minmax(120px, 42vw);
  }
}

@media (max-width: 320px) {
  body.mobile-layout {
    --mobile-page-pad: 8px;
    --mobile-top-right-width: 108px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    column-gap: 6px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 50px;
    height: 38px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: 0.94rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.56rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack .hero-meta-value {
    font-size: 0.68rem;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-tool-button {
    width: min(100%, 82px);
    font-size: 0.62rem;
  }

  body.mobile-layout .forecast-ticker-run,
  body.mobile-layout .provider-message,
  body.mobile-layout .forecast-graph-note {
    font-size: 0.72rem;
  }

  body.mobile-layout .legend-chip {
    font-size: 0.62rem;
  }
}

/* Mobile resilience second pass source of truth */
@media (max-width: 820px) {
  body.mobile-layout .primary-now-card .local-stage-metrics {
    grid-template-columns: minmax(0, 1.18fr) repeat(2, minmax(0, 0.91fr));
    gap: 6px;
    align-items: start;
  }

  body.mobile-layout .primary-now-card .stage-stat {
    min-width: 0;
    gap: 3px;
  }

  body.mobile-layout .primary-now-card .stage-stat strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.12;
    font-size: clamp(0.76rem, 2.85vw, 0.86rem);
  }

  body.mobile-layout .primary-now-card .stage-stat-paired .stage-stat-pair {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 2px;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  body.mobile-layout .primary-now-card .stage-stat-paired .stage-stat-value {
    display: inline-block;
  }

  body.mobile-layout .primary-now-card .stage-stat-paired .stage-stat-divider {
    opacity: 0.64;
    font-size: 0.86em;
    line-height: 1;
  }

  body.mobile-layout .primary-now-card .stage-stat-paired .stage-stat-value-low {
    opacity: 0.92;
    font-size: 0.96em;
  }

  body.mobile-layout .hero-alert-item,
  body.mobile-layout .forecast-ticker,
  body.mobile-layout .hero-solar-topline,
  body.mobile-layout .chart-legend,
  body.mobile-layout .forecast-primary-legend,
  body.mobile-layout .radar-map-overlay,
  body.mobile-layout .module-header,
  body.mobile-layout .card-header,
  body.mobile-layout .compact-header,
  body.mobile-layout .tempest-live-header {
    min-width: 0;
  }

  body.mobile-layout .hero-alert-item,
  body.mobile-layout .forecast-ticker {
    overflow: hidden;
  }

  body.mobile-layout .pill,
  body.mobile-layout .legend-chip,
  body.mobile-layout .radar-map-overlay .frame-button {
    box-sizing: border-box;
    flex-shrink: 0;
    max-inline-size: 100%;
  }

  body.mobile-layout .hero-alert-idle > .pill,
  body.mobile-layout #forecastTickerBadge,
  body.mobile-layout .hero-solar-topline > .pill,
  body.mobile-layout .chart-legend .legend-chip,
  body.mobile-layout .forecast-primary-legend .legend-chip,
  body.mobile-layout .radar-map-overlay .frame-button,
  body.mobile-layout .ten-day-precip {
    align-self: center;
  }

  body.mobile-layout .hero-alert-idle > .pill,
  body.mobile-layout #forecastTickerBadge,
  body.mobile-layout .hero-solar-topline > .pill {
    justify-self: end;
  }

  body.mobile-layout .hero-alert-copy,
  body.mobile-layout .forecast-ticker-viewport,
  body.mobile-layout .hero-solar-copy,
  body.mobile-layout .hero-solar-topline,
  body.mobile-layout .module-header > div,
  body.mobile-layout .card-header > div,
  body.mobile-layout .compact-header > div,
  body.mobile-layout .tempest-live-header > div {
    min-width: 0;
  }

  body.mobile-layout .forecast-primary-legend,
  body.mobile-layout .chart-legend {
    padding-right: 1px;
  }

  body.mobile-layout .radar-map-overlay {
    align-content: flex-start;
    padding-right: 1px;
  }

  body.mobile-layout .ten-day-precip,
  body.mobile-layout .legend-chip,
  body.mobile-layout .hero-alert-idle > .pill,
  body.mobile-layout #forecastTickerBadge {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 390px) {
  body.mobile-layout .primary-now-card .local-stage-metrics {
    grid-template-columns: minmax(0, 1.22fr) repeat(2, minmax(0, 0.89fr));
  }

  body.mobile-layout .primary-now-card .stage-stat strong {
    font-size: clamp(0.74rem, 2.75vw, 0.82rem);
  }

  body.mobile-layout .primary-now-card .stage-stat-paired .stage-stat-pair {
    gap: 1px;
  }
}

@media (max-width: 360px) {
  body.mobile-layout .primary-now-card .local-stage-metrics {
    gap: 5px;
  }

  body.mobile-layout .primary-now-card .stage-stat span {
    font-size: 0.6rem;
  }

  body.mobile-layout .primary-now-card .stage-stat strong {
    font-size: clamp(0.71rem, 2.6vw, 0.78rem);
  }

  body.mobile-layout .primary-now-card .stage-stat-paired .stage-stat-value-low {
    font-size: 0.92em;
  }
}

@media (max-width: 320px) {
  body.mobile-layout .primary-now-card .local-stage-metrics {
    grid-template-columns: minmax(0, 1.28fr) repeat(2, minmax(0, 0.86fr));
  }

  body.mobile-layout .primary-now-card .stage-stat strong {
    font-size: 0.7rem;
  }

  body.mobile-layout .primary-now-card .stage-stat-paired .stage-stat-pair {
    gap: 0;
  }
}

/* Final hero and alert control source of truth */
@media (max-width: 820px) {
  body.mobile-layout .radar-map-overlay {
    top: 8px;
    left: 54px;
    right: 8px;
    max-width: calc(100% - 62px);
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    --mobile-top-right-width: clamp(126px, 31vw, 140px);
    grid-template-columns: minmax(0, 1fr) var(--mobile-top-right-width);
    grid-template-areas:
      "brand meta"
      "solar controls"
      "alerts alerts";
    column-gap: 8px;
    row-gap: 3px;
    align-items: start;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell > .mobile-header-row,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-controls,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-controls .hero-side-top {
    display: contents;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-brand-block {
    grid-area: brand;
    min-width: 0;
    margin-left: -20px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-solar-row {
    grid-area: solar;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-alert-row {
    grid-area: alerts;
    min-width: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandgroup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 86px;
    height: 66px;
    margin-left: -6px;
    margin-right: -16px;
    margin-top: -14px;
    object-position: center 11%;
    align-self: start;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy {
    min-width: 0;
    margin-left: -8px;
    padding-top: 11px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandcopy h1 {
    font-size: clamp(1.14rem, 4.45vw, 1.32rem);
    line-height: 1;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-tagline {
    font-size: 0.65rem;
    line-height: 1.1;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-meta-stack {
    grid-area: meta;
    width: var(--mobile-top-right-width);
    justify-self: end;
    align-self: start;
    justify-items: end;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack {
    grid-area: controls;
    width: var(--mobile-top-right-width);
    justify-self: end;
    align-self: center;
    justify-items: end;
    align-content: center;
    gap: 0;
    padding-top: 0;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-side-utility {
    display: none !important;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-icon-button {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 999px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-icon-button .hero-tool-icon,
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-icon-button .hero-tool-icon svg {
    width: 18px;
    height: 18px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-solar-mobile {
    max-width: min(100%, 20.35rem);
    min-height: 40px;
    padding: 3px 8px 4px;
  }

  body.mobile-layout .hero-alert-actions {
    gap: 5px;
  }

  body.mobile-layout .hero-alert-main {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  body.mobile-layout .hero-alert-actions {
    justify-self: end;
    align-self: start;
  }

  body.mobile-layout .hero-alert-dismiss {
    min-height: 22px;
    padding-inline: 8px;
    font-size: 0.58rem;
  }
}

@media (max-width: 414px) {
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    --mobile-top-right-width: clamp(122px, 31vw, 136px);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 82px;
    height: 62px;
  }
}

@media (max-width: 390px) {
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    --mobile-top-right-width: clamp(118px, 31vw, 132px);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 78px;
    height: 60px;
  }
}

@media (max-width: 360px) {
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    --mobile-top-right-width: clamp(112px, 31vw, 126px);
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 72px;
    height: 56px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-icon-button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 320px) {
  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell {
    --mobile-top-right-width: 108px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .hero-brandmark-mobile {
    width: 66px;
    height: 52px;
  }

  body.mobile-layout .hero > .hero-mobile-shell.mobile-top-shell .mobile-control-stack .hero-icon-button {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
  }
}