:root {
  --localsky-deep-sky: #0B69D0;
  --localsky-navy: #0E1B28;
  --localsky-forest: #2E5D3A;
  --localsky-moss: #7FA43C;
  --localsky-sun: #F5A623;
  --localsky-stone: #E6EAF0;
  --localsky-slate: #74808C;
  --localsky-white: #FFFFFF;
  --localsky-off-white: #F5F8FA;
  --localsky-charcoal: #101418;
  --localsky-radius-card: 8px;
  --localsky-radius-control: 8px;
  --localsky-shadow-soft: 0 10px 30px rgba(14, 27, 40, 0.12);
  --app-bg: var(--localsky-off-white);
  --app-surface: var(--localsky-white);
  --app-surface-alt: #EEF6FC;
  --app-text: var(--localsky-navy);
  --app-text-muted: #557086;
  --app-primary: var(--localsky-deep-sky);
  --app-secondary: var(--localsky-forest);
  --app-accent: var(--localsky-sun);
  --app-border: rgba(14, 27, 40, 0.12);
  --sky: #2C9FE5;
  --sky-deep: var(--app-primary);
  --navy: var(--app-text);
  --green: var(--app-secondary);
  --green-deep: #234F32;
  --amber: var(--app-accent);
  --cloud: var(--app-bg);
  --paper: var(--app-surface);
  --line: var(--app-border);
  --soft-line: rgba(14, 27, 40, 0.08);
  --muted: var(--app-text-muted);
  --danger: #B42318;
  --surface: rgba(255, 255, 255, 0.96);
  --surface-strong: var(--app-surface);
  --shadow-soft: var(--localsky-shadow-soft);
  --shadow-lift: 0 14px 34px rgba(14, 27, 40, 0.16);
  --daypack-trail-sand: #E7DDC8;
  --daypack-granite-mist: #C8C1B3;
  --daypack-cloud-canvas: #F4EFE4;
  --daypack-summit: #252A24;
  --daypack-stone: #5F625A;
  --daypack-alpine-blue: #2F6F8F;
  --daypack-trail-orange: #D87932;
  --daypack-meadow: #6F8A4F;
  --daypack-glacier: #5FA8C8;
  --daypack-rescue: #E45F2B;
  --alpine-midnight: var(--daypack-summit);
  --alpine-granite: var(--daypack-granite-mist);
  --alpine-bone: var(--daypack-summit);
  --alpine-ember: var(--daypack-trail-orange);
  --alpine-teal: var(--daypack-alpine-blue);
  --alpine-moss: var(--daypack-meadow);
  --alpine-secondary: var(--daypack-stone);
  --alpine-muted: var(--daypack-stone);
  --hunting-charcoal: #121612;
  --hunting-forest: #172318;
  --hunting-olive: #2e3a24;
  --hunting-olive-muted: #58603f;
  --hunting-brown: #2a2118;
  --hunting-card: #1c2419;
  --hunting-card-alt: #20261d;
  --hunting-border: #465038;
  --hunting-text: #f0eadc;
  --hunting-muted: #c6baa2;
  --hunting-dim: #998d73;
  --hunting-accent: #ff7a1a;
  --hunting-amber: #d99a3d;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 14% -10%, rgba(46, 93, 58, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(11, 105, 208, 0.14), rgba(245, 248, 250, 0.32) 310px),
    var(--cloud);
  color: var(--navy);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
}

body[data-field-mode="normal"] {
  --app-bg: #EAF4FB;
  --app-surface: var(--localsky-white);
  --app-surface-alt: #F3FAFE;
  --app-text: var(--localsky-navy);
  --app-text-muted: #557086;
  --app-primary: var(--localsky-deep-sky);
  --app-secondary: var(--localsky-forest);
  --app-accent: #2C9FE5;
  --app-border: rgba(11, 105, 208, 0.18);
}

body[data-field-mode="hiking"] {
  --app-bg: #E7DDC8;
  --app-surface: #F4EFE4;
  --app-surface-alt: #EDE6D6;
  --app-text: #252A24;
  --app-text-muted: #5F625A;
  --app-primary: #2F6F8F;
  --app-secondary: #6F8A4F;
  --app-accent: #D87932;
  --app-border: rgba(95, 98, 90, 0.22);
}

body[data-field-mode="hunting"] {
  --app-bg: #121612;
  --app-surface: #1c2419;
  --app-surface-alt: #20261d;
  --app-text: #f0eadc;
  --app-text-muted: #c6baa2;
  --app-primary: #d99a3d;
  --app-secondary: #58603f;
  --app-accent: #ff7a1a;
  --app-border: #465038;
}

.brand-loading-screen {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(14, 27, 40, 0.2), rgba(14, 27, 40, 0.72)),
    url("/localsky-loading.png") center / cover no-repeat,
    var(--localsky-navy);
  color: var(--localsky-white);
  display: grid;
  inset: 0;
  justify-items: center;
  min-height: 100vh;
  opacity: 0;
  padding: 24px;
  pointer-events: none;
  position: fixed;
  transition: opacity 180ms ease, visibility 180ms ease;
  visibility: hidden;
  z-index: 100;
}

body[data-app-loading="true"] .brand-loading-screen {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.brand-loading-veil {
  backdrop-filter: blur(6px);
  background: rgba(14, 27, 40, 0.44);
  inset: 0;
  position: absolute;
}

.brand-loading-panel {
  align-items: center;
  background: rgba(14, 27, 40, 0.74);
  border: 1px solid rgba(230, 234, 240, 0.18);
  border-radius: var(--localsky-radius-card);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.36);
  display: grid;
  gap: 10px;
  justify-items: center;
  max-width: 420px;
  padding: 28px;
  position: relative;
  text-align: center;
  width: min(100%, 420px);
}

.brand-loading-mark {
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  height: 112px;
  width: 112px;
}

.brand-loading-kicker,
.brand-loading-panel span {
  color: var(--localsky-sun);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.brand-loading-panel h2 {
  color: var(--localsky-white);
  font-size: 30px;
  margin-top: 2px;
}

.brand-loading-panel p {
  color: var(--localsky-stone);
  font-size: 15px;
  font-weight: 800;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  margin: 0 auto;
  max-width: 1320px;
  min-height: 100vh;
  padding: 0 22px 34px;
}

.topbar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(216, 232, 242, 0.9);
  box-shadow: 0 8px 22px rgba(18, 50, 79, 0.05);
  display: flex;
  justify-content: space-between;
  margin: 0 -22px;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-status-banner {
  border: 1px solid rgba(11, 105, 208, 0.24);
  border-radius: var(--localsky-radius-card);
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
  margin: 12px 0;
  padding: 10px 12px;
}

.app-status-banner.degraded {
  background: rgba(245, 166, 35, 0.16);
  border-color: rgba(245, 166, 35, 0.42);
}

.app-status-banner.maintenance {
  background: rgba(180, 35, 24, 0.12);
  border-color: rgba(180, 35, 24, 0.28);
}

.premium-badge {
  background: rgba(46, 93, 58, 0.1);
  border: 1px solid rgba(46, 93, 58, 0.22);
  border-radius: 999px;
  color: var(--green-deep);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  margin-left: 6px;
  padding: 4px 7px;
  vertical-align: middle;
}

.premium-badge.beta {
  background: rgba(245, 166, 35, 0.16);
  border-color: rgba(245, 166, 35, 0.36);
}

.premium-badge.soft {
  background: rgba(11, 105, 208, 0.1);
  border-color: rgba(11, 105, 208, 0.22);
  color: var(--sky-deep);
}

.feature-banner,
.feature-gate-card {
  border-radius: var(--localsky-radius-card);
  display: grid;
  gap: 5px;
  margin: 8px 0;
  padding: 12px;
}

.feature-banner.degraded {
  background: rgba(245, 166, 35, 0.14);
  border: 1px solid rgba(245, 166, 35, 0.34);
  color: var(--app-text);
  font-size: 13px;
  font-weight: 800;
}

.feature-gate-card {
  background: var(--surface);
  border: 1px dashed rgba(14, 27, 40, 0.24);
  color: var(--app-text);
}

.feature-gate-card strong {
  font-size: 15px;
}

.feature-gate-card span,
.feature-gate-card em {
  color: var(--app-text-muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.launch-config-dev-panel {
  align-items: center;
  background: rgba(14, 27, 40, 0.92);
  border-radius: var(--localsky-radius-card);
  bottom: 12px;
  box-shadow: var(--shadow-lift);
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  left: 12px;
  max-width: calc(100vw - 24px);
  padding: 10px;
  position: fixed;
  z-index: 90;
}

.dev-control {
  align-items: center;
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  gap: 6px;
}

.dev-control select {
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  min-height: 28px;
  padding: 3px 6px;
}

.brand-lockup {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(18, 50, 79, 0.14);
  height: 48px;
  width: 48px;
}

.top-actions {
  display: flex;
  gap: 8px;
}

.field-mode-toggle {
  align-items: center;
  background: #eef6fb;
  border: 1px solid rgba(216, 232, 242, 0.95);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  display: flex;
  gap: 2px;
  padding: 2px;
  position: relative;
}

.field-mode-button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--green-deep);
  font-size: 12px;
  font-weight: 900;
  min-height: 34px;
  min-width: 74px;
  padding: 0 8px;
}

.field-mode-button.active {
  background: linear-gradient(180deg, #176494, var(--sky-deep));
  box-shadow: 0 4px 10px rgba(13, 77, 128, 0.18);
  color: #ffffff;
}

.kicker,
.module-title,
.metric span,
.air-aqi-group span,
.pollen-item span {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.02;
  margin: 2px 0 0;
}

h2 {
  font-size: 18px;
  line-height: 1.1;
  margin: 0;
}

p {
  margin: 0;
}

.icon-button,
.text-button,
.search-row button,
.tab,
.segment {
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}

.icon-button {
  background: #f4fbff;
  color: var(--green-deep);
  min-height: 42px;
  padding: 0 12px;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.primary-action,
.search-row button {
  background: linear-gradient(180deg, #176494, var(--sky-deep));
  border-color: var(--sky-deep);
  color: #fff;
}

.text-button {
  background: #f4fbff;
  color: var(--sky-deep);
  min-height: 32px;
  padding: 0 9px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.icon-button:hover,
.text-button:hover,
.search-row button:hover {
  box-shadow: 0 8px 18px rgba(18, 50, 79, 0.1);
  transform: translateY(-1px);
}

.icon-button:focus-visible,
.text-button:focus-visible,
.search-row button:focus-visible,
.field-mode-button:focus-visible,
.tab:focus-visible,
.segment:focus-visible,
.place-main:focus-visible,
.place-action:focus-visible {
  outline: 3px solid rgba(63, 164, 220, 0.28);
  outline-offset: 2px;
}

.location-action {
  white-space: nowrap;
}

.page-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 300px minmax(0, 1fr);
  padding-top: 18px;
}

.place-rail {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 86px;
}

.forecast-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.current-card,
.module,
.air-panel,
.day-detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.current-card {
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 255, 0.92)),
    var(--surface-strong);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 34%);
  min-height: 220px;
  padding: 22px;
}

.alert-banner {
  align-items: center;
  background: #fff3dc;
  border: 1px solid #eab95b;
  border-radius: 8px;
  color: inherit;
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
  justify-content: space-between;
  min-height: 46px;
  padding: 9px 12px;
  text-align: left;
}

.alert-banner:hover,
.inline-alert-link:hover,
.source-alert-link:hover {
  background: #ffe9b8;
}

.alert-banner span,
.alert-kicker,
.alert-facts dt {
  color: #8a6100;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.alert-banner strong {
  color: var(--danger);
  font-size: 14px;
}

.alert-banner em {
  background: #ffffff;
  border: 1px solid #eab95b;
  border-radius: 8px;
  color: var(--sky-deep);
  flex-shrink: 0;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  padding: 7px 9px;
}

.hail-risk-card {
  align-items: center;
  background: linear-gradient(135deg, #f7fcff 0%, #e4f4fb 60%, #fff4d8 100%);
  border: 1px solid #9fc8d6;
  border-radius: 8px;
  color: var(--navy);
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 10px 12px;
  text-align: left;
}

.hail-risk-card.elevated,
.hail-risk-card.severe {
  border-color: #d9a23b;
  box-shadow: inset 4px 0 0 #d9a23b;
}

.hail-risk-card.severe {
  background: linear-gradient(135deg, #f6fbff 0%, #d8edf7 45%, #ffe0b0 100%);
  box-shadow: inset 4px 0 0 var(--danger);
}

.hail-risk-icon {
  background:
    radial-gradient(circle at 35% 35%, #ffffff 0 28%, transparent 30%),
    radial-gradient(circle at 68% 58%, #f7fbff 0 22%, transparent 24%),
    #9fc8d6;
  border: 1px solid #759aaa;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(18, 50, 79, 0.18);
  height: 30px;
  width: 30px;
}

.hail-risk-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hail-risk-kicker,
.hail-alert-badge {
  color: #486778;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.hail-risk-copy strong {
  color: var(--danger);
  font-size: 15px;
}

.hail-risk-copy em,
.hail-risk-action {
  color: #486778;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.hail-risk-action {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(117, 154, 170, 0.45);
  border-radius: 8px;
  color: var(--sky-deep);
  padding: 7px 9px;
  white-space: normal;
}

.current-copy {
  align-self: end;
}

.condition {
  font-size: 19px;
  font-weight: 900;
}

.meta,
.module-header p,
.row-detail,
.source-footer,
.tooltip,
.air-panel p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.temperature-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.temperature {
  color: var(--sky-deep);
  font-size: clamp(76px, 10vw, 118px);
  font-weight: 900;
  line-height: 0.88;
}

.unit {
  color: var(--sky);
  font-size: 28px;
  font-weight: 900;
}

.comfort {
  color: var(--green-deep);
  font-size: 15px;
  font-weight: 900;
}

.current-metrics {
  background: #f8fbfd;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: grid;
  gap: 0;
}

.current-metrics div {
  align-content: center;
  border-bottom: 1px solid var(--soft-line);
  min-height: 70px;
  padding: 14px;
}

.current-metrics div:last-child {
  border-bottom: 0;
}

.current-metrics span {
  color: var(--green);
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.current-metrics strong {
  display: block;
  font-size: 19px;
  margin-top: 4px;
}

.tabs {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 4px;
  position: sticky;
  top: 73px;
  z-index: 8;
}

.tab {
  background: transparent;
  color: var(--muted);
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
}

.tab.active {
  background: linear-gradient(180deg, #ffffff, var(--app-surface-alt));
  border-color: #cfe8f6;
  box-shadow: 0 4px 12px rgba(13, 77, 128, 0.08);
  color: var(--sky-deep);
}

.tab-panel {
  display: grid;
  gap: 14px;
  scroll-margin-top: 126px;
}

body[data-active-tab="radar"] #currentCard {
  display: none;
}

.radar-view {
  min-width: 0;
}

.advanced-radar-shell {
  display: grid;
  gap: 8px;
  margin: -4px -2px 0;
}

.radar-map-stage {
  background: #d8e8f2;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: min(76vh, 760px);
  min-height: 540px;
  overflow: hidden;
  position: relative;
}

.radar-tile-layer {
  inset: 0;
  position: absolute;
}

.radar-tile-layer img {
  height: 256px;
  position: absolute;
  width: 256px;
}

.radar-overlay-layer {
  opacity: 0.72;
  z-index: 2;
}

.radar-viewport-base,
.radar-viewport-overlay {
  height: 100% !important;
  inset: 0;
  object-fit: fill;
  position: absolute;
  width: 100% !important;
}

.radar-viewport-base {
  z-index: 1;
}

.radar-viewport-overlay {
  z-index: 2;
}

.radar-marker {
  background: var(--danger);
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(18, 50, 79, 0.22), 0 8px 20px rgba(18, 50, 79, 0.3);
  height: 18px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  z-index: 4;
}

.radar-alert-polygons {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.radar-alert-polygon {
  fill: rgba(180, 35, 24, 0.18);
  outline: none;
  pointer-events: auto;
  stroke: rgba(180, 35, 24, 0.92);
  stroke-width: 2;
}

.radar-alert-polygon:focus,
.radar-alert-polygon:hover {
  fill: rgba(180, 35, 24, 0.28);
  stroke-width: 3;
}

.radar-summary-card,
.radar-map-controls,
.radar-timeline-panel,
.radar-layer-sheet,
.radar-alert-card {
  backdrop-filter: blur(7px);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(14, 27, 40, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(18, 50, 79, 0.1);
}

.radar-summary-card {
  display: grid;
  gap: 2px;
  left: 12px;
  max-width: min(390px, calc(100% - 24px));
  padding: 10px 12px;
  position: absolute;
  top: 12px;
  z-index: 6;
}

.radar-summary-card strong {
  color: var(--app-text);
  font-size: 17px;
}

.radar-summary-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.radar-map-controls {
  display: flex;
  gap: 6px;
  padding: 6px;
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 6;
}

.radar-round-control,
.radar-layer-toggle,
.radar-sheet-close,
.radar-alert-card-close {
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(14, 27, 40, 0.12);
  color: var(--sky-deep);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
}

.radar-round-control {
  border-radius: 50%;
  height: 40px;
  padding: 0;
  width: 40px;
}

.radar-layer-toggle {
  border-radius: 8px;
  min-height: 40px;
  padding: 0 12px;
}

.radar-marker::after {
  border: 2px solid rgba(143, 29, 29, 0.32);
  border-radius: 50%;
  content: "";
  inset: -13px;
  position: absolute;
}

.radar-fallback {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #f2b8b8;
  border-radius: 8px;
  color: var(--danger);
  display: grid;
  gap: 2px;
  left: 12px;
  max-width: min(340px, calc(100% - 24px));
  padding: 10px 12px;
  position: absolute;
  top: 86px;
  z-index: 7;
}

.radar-fallback[hidden] {
  display: none;
}

.radar-fallback span,
.radar-footer,
.radar-timeline-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.radar-layer-sheet {
  bottom: 88px;
  display: none;
  gap: 10px;
  max-width: min(340px, calc(100% - 24px));
  padding: 12px;
  position: absolute;
  right: 12px;
  z-index: 8;
  background: rgba(255, 255, 255, 0.68);
}

.radar-layer-sheet.open {
  display: grid;
}

.radar-sheet-heading,
.radar-layer-item,
.radar-timeline-panel {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.radar-sheet-close,
.radar-alert-card-close {
  border-radius: 50%;
  height: 30px;
  padding: 0;
  width: 30px;
}

.radar-layer-list {
  display: grid;
  gap: 8px;
}

.radar-layer-item {
  gap: 12px;
}

.radar-layer-item span {
  display: grid;
  gap: 2px;
}

.radar-layer-item strong {
  color: var(--app-text);
  font-size: 14px;
}

.radar-layer-item em,
.radar-sheet-note {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.35;
  margin: 0;
}

.radar-layer-item.unavailable {
  opacity: 0.62;
}

.radar-layer-item input {
  min-height: 24px;
  min-width: 24px;
}

.radar-alert-card {
  bottom: 88px;
  color: var(--app-text);
  display: grid;
  gap: 8px;
  left: 12px;
  max-width: min(410px, calc(100% - 24px));
  padding: 12px;
  position: absolute;
  z-index: 8;
  background: rgba(255, 255, 255, 0.72);
}

.radar-alert-card[hidden] {
  display: none;
}

.radar-alert-card-close {
  position: absolute;
  right: 10px;
  top: 10px;
}

.radar-alert-card strong {
  font-size: 18px;
  padding-right: 34px;
}

.radar-alert-card p,
.radar-alert-card details {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  margin: 0;
}

.radar-alert-facts {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.radar-alert-facts div {
  background: rgba(238, 246, 252, 0.62);
  border-radius: 8px;
  padding: 8px;
}

.radar-alert-facts dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.radar-alert-facts dd {
  color: var(--app-text);
  font-size: 12px;
  font-weight: 850;
  margin: 2px 0 0;
}

.radar-timeline-panel {
  gap: 10px;
  bottom: 12px;
  left: 12px;
  padding: 9px 10px;
  position: absolute;
  right: 12px;
  z-index: 6;
}

.radar-play-button,
.radar-provider-link {
  align-items: center;
  background: var(--sky-deep);
  border: 1px solid var(--sky-deep);
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  text-decoration: none;
}

.radar-play-button:disabled {
  background: rgba(238, 246, 252, 0.64);
  border-color: var(--line);
  color: var(--muted);
}

.radar-timeline-copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 150px;
}

.radar-timeline-copy strong {
  color: var(--app-text);
  font-size: 14px;
}

.radar-scrubber {
  accent-color: var(--sky-deep);
  flex: 2;
  min-width: 160px;
}

.radar-provider-link {
  background: rgba(255, 255, 255, 0.7);
  color: var(--sky-deep);
}

.radar-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  padding: 0 2px;
}

.radar-loading {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-weight: 850;
  min-height: 360px;
}

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

.daily-strip-module {
  grid-column: 1 / -1;
}

.source-footer {
  grid-column: 1 / -1;
  padding: 0 4px 2px;
}

.compact-module {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.flush-header {
  border-bottom: 0;
  padding: 0;
}

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

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

.forecast-card {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  min-height: 92px;
  padding: 12px;
  text-align: left;
}

.today-forecast-card {
  border-left: 4px solid var(--green);
  min-height: 90px;
  padding: 9px 11px;
}

.forecast-card:hover,
.data-row:hover,
.place-row:hover {
  background: var(--app-surface-alt);
}

.forecast-card,
.next-up-story,
.place-list-item,
.sky-note-card,
.smart-prep-card {
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

#smartPrepSlot:empty {
  display: none;
}

.mobile-guidance {
  display: none;
}

.sky-notes-module[hidden] {
  display: none;
}

.sky-notes-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  padding: 8px 10px 10px;
}

.sky-note-card {
  align-items: flex-start;
  background: #f8fbfd;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr);
  min-height: 58px;
  padding: 9px;
}

.sky-note-card.has-art {
  grid-template-columns: 58px minmax(0, 1fr);
}

.sky-note-art-frame {
  aspect-ratio: 1;
  background: #eef6fb;
  border: 1px solid rgba(44, 159, 229, 0.18);
  border-radius: 8px;
  display: block;
  height: 58px;
  overflow: hidden;
  width: 58px;
}

.sky-note-art-frame img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.sky-note-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sky-note-copy strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.1;
}

.sky-note-copy span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.app-promo-note {
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}

.smart-prep-card {
  align-items: center;
  background: linear-gradient(135deg, #fbfdff 0%, #f1f8fb 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  color: inherit;
  display: flex;
  gap: 14px;
  grid-column: 1 / -1;
  justify-content: space-between;
  min-height: 86px;
  padding: 13px 14px;
  text-decoration: none;
}

.smart-prep-card:hover {
  background: #f4fbff;
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.smart-prep-card strong {
  display: block;
  font-size: 17px;
  margin-top: 3px;
}

.smart-prep-card p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  margin-top: 4px;
}

.smart-prep-card .app-promo-note {
  color: var(--green-deep);
  font-size: 11px;
  margin-top: 7px;
}

.smart-prep-items {
  color: var(--green-deep) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: capitalize;
}

.smart-prep-card span {
  color: var(--sky-deep);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
}

.forecast-card .primary {
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.forecast-card-top {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.forecast-card .secondary {
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
  margin-top: 8px;
}

.today-forecast-card .secondary {
  font-size: 20px;
  margin-top: 5px;
}

.forecast-card .tertiary {
  color: var(--green-deep);
  font-size: 12px;
  font-weight: 800;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-forecast-card .tertiary {
  font-size: 12px;
  line-height: 1.25;
  margin-top: 4px;
  white-space: normal;
}

.daily-impact-badge {
  background: var(--app-surface-alt);
  border: 1px solid #cfe8f6;
  border-radius: 999px;
  color: var(--sky-deep);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.daily-impact-badge.good {
  background: #edf6e8;
  border-color: #cfe4c4;
  color: var(--green-deep);
}

.daily-impact-badge.moderate {
  background: #fff6df;
  border-color: #ead08d;
  color: #8a6100;
}

.daily-impact-badge.high {
  background: #fff0f0;
  border-color: #efc3c3;
  color: var(--danger);
}

.next-up-story {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
  min-height: 84px;
  overflow: hidden;
  padding: 8px 10px;
  text-align: left;
}

.next-up-story:hover {
  background: var(--app-surface-alt);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.next-up-copy {
  display: grid;
}

.next-up-copy strong {
  color: var(--navy);
  font-size: 18px;
  line-height: 1.12;
}

.next-up-copy span,
.impact-chip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.impact-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.impact-chip {
  background: #f8fbfd;
  border: 1px solid var(--soft-line);
  border-left: 3px solid var(--sky);
  border-radius: 8px;
  display: grid;
  gap: 2px;
  min-width: 100px;
  padding: 6px 8px;
}

.impact-chip.high {
  border-left-color: var(--danger);
}

.impact-chip.moderate {
  border-left-color: var(--amber);
}

.impact-chip strong {
  color: var(--green-deep);
  font-size: 12px;
  line-height: 1.15;
}

.next-up-links {
  align-items: center;
  border-top: 1px solid var(--soft-line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

.next-up-links span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.next-up-links a {
  color: var(--sky-deep);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.next-up-links a:hover {
  text-decoration: underline;
}

.inline-alert-link {
  background: #fff3dc;
  border: 1px solid #eab95b;
  border-radius: 8px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 900;
  min-height: 34px;
  padding: 0 10px;
  width: fit-content;
}

.module-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.daily-planner-shell {
  display: grid;
  gap: 10px;
  padding: 10px 12px 12px;
}

.daily-selector {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.daily-selector-card {
  background: #fbfdff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--sky);
  border-radius: 8px;
  color: inherit;
  flex: 0 0 76px;
  min-height: 58px;
  padding: 6px 7px;
  text-align: center;
}

.daily-selector-card.good {
  border-top-color: var(--green);
}

.daily-selector-card.moderate {
  border-top-color: var(--amber);
}

.daily-selector-card.high {
  border-top-color: var(--danger);
}

.daily-selector-card.active {
  background: var(--app-surface-alt);
  border-color: #9fd4ef;
  box-shadow: inset 0 -3px 0 rgba(13, 77, 128, 0.28), 0 4px 12px rgba(13, 77, 128, 0.08);
}

.daily-selector-top {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: center;
}

.daily-selector-top span,
.part-day-card span,
.daily-metric-grid span {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-selector-top b {
  color: var(--navy);
  font-size: 17px;
}

.daily-selector-top i {
  color: var(--sky-deep);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  max-width: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-selector-card > b {
  color: var(--navy);
  display: block;
  font-size: 16px;
  line-height: 1;
  margin-top: 4px;
}

.daily-selector-card strong {
  color: var(--green-deep);
  display: block;
  font-size: 10px;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.daily-selected-detail {
  min-width: 0;
}

.daily-detail-panel {
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
  touch-action: pan-y;
}

.daily-detail-heading {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.daily-detail-heading h3 {
  font-size: 21px;
  line-height: 1.1;
  margin: 7px 0 0;
}

.daily-detail-heading p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-top: 4px;
}

.daily-nav-button {
  background: #f4fbff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sky-deep);
  font-size: 22px;
  font-weight: 900;
  height: 36px;
  padding: 0;
  width: 36px;
}

.daily-nav-button:disabled {
  color: #9aa8b2;
  opacity: 0.6;
}

.daily-metric-grid,
.part-day-grid,
.daily-extra-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.daily-metric-grid div,
.part-day-card,
.daily-extra-card,
.daily-forecast-text {
  background: #ffffff;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  min-height: 0;
  padding: 8px 9px;
}

.daily-metric-grid strong,
.part-day-card strong,
.daily-extra-card strong {
  color: var(--navy);
  display: block;
  font-size: 15px;
  margin-top: 5px;
}

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

.daily-mini-timeline {
  background: #ffffff;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 10px 4px;
}

.daily-mini-timeline > div {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.daily-mini-timeline span {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-mini-timeline strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.daily-mini-timeline svg {
  display: block;
  min-width: 100%;
}

.daily-mini-bars rect {
  fill: rgba(63, 164, 220, 0.32);
}

.daily-mini-temp {
  fill: none;
  stroke: var(--danger);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.daily-mini-labels text {
  fill: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-anchor: middle;
}

.part-day-card p,
.daily-extra-card p,
.daily-forecast-text p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  margin-top: 5px;
}

.daily-extra-card span,
.daily-forecast-text span {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.daily-forecast-text {
  min-height: 0;
}

.daily-forecast-text p {
  font-size: 13px;
}

.daily-embedded-module {
  background: #ffffff;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  overflow: hidden;
}

.daily-embedded-header {
  align-items: center;
  border-bottom: 1px solid var(--soft-line);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
}

.daily-embedded-header strong {
  color: var(--navy);
  font-size: 15px;
}

.daily-embedded-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.daily-chart-scroll {
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 0;
}

.daily-chart-scroll .hourly-timeline {
  cursor: default;
}

.daily-detail-body {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.daily-detail-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.daily-hero-condition {
  color: var(--navy);
  display: block;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 8px;
}

.daily-hero-temps {
  color: var(--green-deep);
  display: block;
  font-size: 20px;
  font-weight: 900;
  margin-top: 7px;
}

.daily-weather-art {
  align-items: center;
  color: var(--sky-deep);
  display: flex;
  flex: 0 0 104px;
  height: 92px;
  justify-content: center;
  margin-top: 2px;
}

.daily-weather-art svg {
  display: block;
  fill: none;
  height: 88px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5.5;
  width: 104px;
}

.daily-weather-art.snow,
.daily-weather-art.rain,
.daily-weather-art.mixed {
  color: var(--sky-deep);
}

.daily-weather-art.storm {
  color: var(--danger);
}

.daily-weather-art.sun {
  color: #9a6a1f;
}

.daily-weather-art.wind,
.daily-weather-art.cloud {
  color: var(--green-deep);
}

.daily-weather-drops {
  fill: currentColor;
  stroke-width: 5.5;
}

.daily-weather-flash {
  fill: var(--amber);
  stroke: var(--danger);
  stroke-width: 2.5;
}

.daily-weather-sun {
  fill: rgba(242, 191, 97, 0.2);
}

#hourlyPanel .module-header {
  padding: 9px 14px;
}

#hourlyPanel .module-header h2 {
  font-size: 18px;
  line-height: 1.05;
}

#hourlyPanel .module-header p {
  line-height: 1.15;
}

.rail-header {
  padding: 12px;
}

.data-row,
.place-row,
.place-list-item {
  align-items: center;
  border-bottom: 1px solid var(--soft-line);
  color: inherit;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 58px;
  padding: 11px 14px;
  text-decoration: none;
  width: 100%;
}

.place-list-item {
  background: #ffffff;
  min-height: 62px;
  padding: 0;
}

.place-list-item.current {
  background: var(--app-surface-alt);
}

button.data-row,
button.place-row,
.place-main {
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left;
}

.place-main {
  align-items: center;
  border-bottom: 0;
  color: inherit;
  display: flex;
  flex: 1;
  gap: 10px;
  justify-content: space-between;
  min-height: 62px;
  min-width: 0;
  padding: 10px 12px;
}

.place-main:hover {
  background: var(--app-surface-alt);
}

.row-label {
  font-size: 15px;
  font-weight: 900;
}

.place-text-group {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.place-name {
  color: var(--navy);
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.place-detail {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.row-value {
  color: var(--green-deep);
  flex-shrink: 0;
  font-weight: 900;
  margin-left: 12px;
  text-align: right;
}

.place-status {
  color: var(--green-deep);
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 900;
}

.place-actions-inline {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  padding-right: 10px;
}

.place-action {
  background: #f4fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--sky-deep);
  font-weight: 900;
}

.place-action.small {
  min-height: 32px;
  padding: 0 9px;
}

.place-action.danger {
  background: #fff5f2;
  border-color: #f0c3ba;
  color: var(--danger);
}

.place-action:disabled {
  background: #f4f7f9;
  color: #9aa8b2;
  cursor: default;
}

.chart-scroll {
  overflow-x: auto;
  padding: 8px 0 8px;
  position: relative;
  scrollbar-width: none;
  touch-action: auto;
}

.chart-scroll::-webkit-scrollbar {
  display: none;
}

.chart-scroll::before,
.chart-scroll::after {
  bottom: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity 140ms ease;
  width: 34px;
  z-index: 5;
}

.chart-scroll::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
  left: 0;
}

.chart-scroll::after {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
  right: 0;
}

.chart-scroll.can-scroll-left::before,
.chart-scroll.can-scroll-right::after {
  opacity: 1;
}

.chart-scroll.dragging,
.chart-scroll.dragging .hourly-timeline {
  cursor: grabbing;
}

.chart-stage {
  min-width: 760px;
  padding: 0 10px;
  position: relative;
}

.hourly-selected-card {
  border-top: 1px solid var(--soft-line);
  padding: 10px 14px 0;
}

.selected-hour-content {
  align-items: center;
  background: #eef7fc;
  border: 1px solid #b9dff2;
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 10px 12px;
}

.selected-hour-content strong {
  color: var(--navy);
  display: block;
  font-size: 18px;
  margin-top: 2px;
}

.selected-hour-content p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}

.selected-hour-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.selected-hour-values span {
  background: #fff;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 6px 8px;
}

.selected-hour-values b {
  color: var(--sky-deep);
  display: block;
  font-size: 13px;
}

.hourly-timeline {
  cursor: pointer;
  position: relative;
  user-select: none;
}

.hourly-interaction-layer {
  bottom: 36px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 30px;
  z-index: 1;
}

.hour-column-band,
.day-boundary-line {
  bottom: 0;
  position: absolute;
  top: 0;
}

.hour-column-band {
  border-radius: 7px;
}

.hour-column-band.selected {
  background: rgba(238, 247, 252, 0.9);
  border-left: 3px solid var(--sky);
  border-right: 3px solid var(--sky);
  box-shadow: inset 0 0 0 1px rgba(13, 77, 128, 0.08);
}

.hour-column-band.hover {
  background: rgba(63, 164, 220, 0.08);
  border-left: 1px solid rgba(63, 164, 220, 0.28);
  border-right: 1px solid rgba(63, 164, 220, 0.28);
}

.day-boundary-line {
  border-left: 1px dashed rgba(104, 127, 88, 0.34);
}

.day-header {
  height: 30px;
  position: sticky;
  top: 0;
  z-index: 4;
}

.day-label {
  align-items: center;
  background: rgba(245, 251, 255, 0.94);
  border-bottom: 1px solid var(--soft-line);
  border-left: 1px solid rgba(216, 232, 242, 0.8);
  color: var(--green-deep);
  display: flex;
  font-size: 11px;
  font-weight: 900;
  height: 27px;
  justify-content: center;
  position: absolute;
  text-transform: uppercase;
  white-space: nowrap;
}

.chart-block {
  position: relative;
  z-index: 2;
  padding: 2px 0 2px;
}

.extended-hourly-endcap {
  background: #ffffff;
  border: 1px dashed rgba(14, 27, 40, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  position: absolute;
  top: 48px;
  width: 166px;
}

.extended-hourly-endcap strong,
.extended-hourly-row-endcap strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
}

.extended-hourly-endcap span,
.extended-hourly-row-endcap span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.extended-hourly-row-endcap {
  background: #ffffff;
  border: 1px dashed rgba(14, 27, 40, 0.2);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
}

.chart-title {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin: 0 8px 1px;
}

.chart-title strong {
  font-size: 14px;
}

.chart-title span,
.legend span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  left: 8px;
  margin: 0 8px;
  position: sticky;
  width: fit-content;
  z-index: 3;
}

.legend span {
  align-items: center;
  background: rgba(251, 253, 255, 0.94);
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: inline-flex;
  gap: 5px;
  padding: 3px 7px;
}

.legend-line {
  border-top: 3px solid currentColor;
  display: inline-block;
  width: 22px;
}

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

.legend-bar {
  border-radius: 3px;
  display: inline-block;
  height: 12px;
  opacity: 0.5;
  width: 10px;
}

.shared-time-axis {
  display: block;
  position: relative;
  z-index: 2;
}

.hourly-rows {
  display: grid;
}

.hourly-rows[hidden],
.chart-scroll[hidden] {
  display: none;
}

.segmented-control {
  background: #f4fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  padding: 2px;
}

.segment {
  background: transparent;
  border: 0;
  color: var(--muted);
  min-height: 30px;
  padding: 0 10px;
}

.segment.active {
  background: #fff;
  color: var(--sky-deep);
  box-shadow: 0 1px 4px rgba(18, 50, 79, 0.08);
}

.tooltip {
  background: rgba(18, 50, 79, 0.93);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  max-width: 240px;
  padding: 7px 9px;
  pointer-events: none;
  position: fixed;
  z-index: 8;
}

.air-panel {
  padding: 14px;
}

.air-top-line {
  align-items: center;
  display: flex;
  gap: 14px;
}

.air-aqi-group {
  border-right: 1px solid var(--soft-line);
  min-width: 78px;
  padding-right: 14px;
  text-align: center;
}

.air-aqi-group strong {
  color: var(--sky-deep);
  display: block;
  font-size: 38px;
  line-height: 1;
}

.air-pollen-row {
  border-top: 1px solid var(--soft-line);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
  padding-top: 12px;
}

.pollen-item strong {
  display: block;
  font-size: 14px;
  margin-top: 2px;
}

.pollen-item em {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.pollen-forecast-row {
  border-top: 1px solid var(--soft-line);
  margin-top: 12px;
  padding-top: 10px;
}

.pollen-forecast-title {
  color: var(--green);
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pollen-forecast-cards {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  margin-top: 8px;
}

.pollen-forecast-card {
  background: #f8fbfd;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 8px;
}

.pollen-forecast-card span,
.pollen-forecast-card em,
.pollen-forecast-card small {
  display: block;
}

.pollen-forecast-card span {
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 900;
}

.pollen-forecast-card strong {
  display: block;
  font-size: 14px;
  margin-top: 3px;
}

.pollen-forecast-card em,
.pollen-forecast-card small {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  margin-top: 2px;
}

.pollen-forecast-card small {
  margin-top: 6px;
}

.pollen-forecast-row,
#pollutantRows {
  position: relative;
}

.pollen-forecast-row.advanced-locked .pollen-forecast-cards,
#pollutantRows.advanced-locked {
  filter: blur(3px);
  opacity: 0.48;
  pointer-events: none;
  user-select: none;
}

.advanced-pollen-gate {
  background: #ffffff;
  border: 1px dashed rgba(14, 27, 40, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
}

.advanced-pollen-gate strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.advanced-pollen-gate span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.pollen-forecast-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  margin-top: 8px;
}

.allergy-relief-row {
  border-top: 1px solid var(--soft-line);
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding-top: 9px;
}

.allergy-relief-link {
  color: var(--sky-deep);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}

.allergy-relief-link:hover {
  text-decoration: underline;
}

.allergy-relief-link span,
.allergy-relief-row em {
  color: var(--muted);
  font-weight: 800;
}

.allergy-relief-row em {
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.search-module,
.saved-module,
.places-module {
  padding: 12px;
}

.search-row {
  display: flex;
  gap: 8px;
}

.search-location-button {
  justify-content: center;
  margin-top: 8px;
  width: 100%;
}

.search-row input {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--navy);
  flex: 1;
  font-weight: 800;
  min-height: 44px;
  min-width: 0;
  padding: 0 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.search-row input:focus {
  border-color: rgba(63, 164, 220, 0.72);
  box-shadow: 0 0 0 3px rgba(63, 164, 220, 0.14);
  outline: none;
}

.search-row button {
  min-height: 44px;
  padding: 0 12px;
}

.current-location-card {
  align-items: center;
  background: #f8fbfd;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin: 12px;
  padding: 12px;
}

.current-location-card strong,
.current-location-card span {
  display: block;
}

.current-location-card strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 3px;
}

.current-location-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  margin-top: 4px;
}

.location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 260px;
}

.location-status {
  color: var(--green-deep) !important;
}

.location-helper {
  flex-basis: 100%;
  text-align: right;
}

.places-search-block {
  display: none;
  padding: 0 12px 12px;
}

#searchResults,
#savedPlaces,
#placesSearchResults,
#placesSaved {
  margin-top: 10px;
}

.places-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  padding: 14px;
}

.day-detail {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.day-detail[hidden] {
  display: none;
}

.day-detail .stats-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-tile {
  background: #f8fbfd;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  min-height: 84px;
  padding: 12px;
}

.stat-tile span {
  color: var(--green);
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.stat-tile strong {
  display: block;
  font-size: 20px;
  margin-top: 10px;
}

.back-button {
  background: #f4fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--sky-deep);
  font-weight: 900;
  min-height: 38px;
  padding: 0 12px;
  width: fit-content;
}

.back-button:disabled {
  color: #9aa8b2;
  cursor: default;
  opacity: 0.65;
}

.day-detail-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.empty-state {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 12px 2px;
}

.alerts-page {
  grid-column: 1 / -1;
  margin: 0 auto;
  max-width: 860px;
  width: 100%;
}

.alerts-module {
  margin-top: 12px;
}

.alerts-page-content {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.alert-loading,
.alert-empty,
.alert-error {
  background: #fbfdff;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 16px;
}

.alert-empty strong,
.alert-error strong {
  color: var(--navy);
  font-size: 18px;
}

.alert-empty span,
.alert-error span,
.alert-loading {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.alert-detail-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 5px solid #eab95b;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.hail-alert-detail-card {
  border-color: #9fc8d6;
  border-left-color: #9fc8d6;
}

.hail-alert-badge {
  background: #e4f4fb;
  border: 1px solid #9fc8d6;
  border-radius: 999px;
  color: #486778;
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  margin-right: 8px;
  padding: 3px 7px;
  text-transform: uppercase;
  vertical-align: middle;
}

.alert-hail-callout {
  align-items: center;
  background: #f2f9fd;
  border: 1px solid #b8d7e4;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 9px 10px;
}

.alert-hail-callout strong {
  color: var(--danger);
  font-size: 13px;
}

.alert-hail-callout span {
  color: #486778;
  font-size: 12px;
  font-weight: 800;
}

.alert-card-heading {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.alert-card-heading h2 {
  color: var(--navy);
  font-size: 22px;
  margin-top: 3px;
}

.alert-status {
  background: #fff3dc;
  border: 1px solid #eab95b;
  border-radius: 999px;
  color: #8a6100;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
  text-transform: uppercase;
}

.alert-headline,
.alert-summary-text,
.alert-instructions p,
.alert-full-copy {
  color: var(--green-deep);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.42;
}

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

.alert-facts div {
  background: #f8fbfd;
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  padding: 9px;
}

.alert-facts dd {
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
  margin: 4px 0 0;
}

.alert-instructions {
  background: #fffaf0;
  border: 1px solid #f0d79d;
  border-radius: 8px;
  padding: 10px;
}

.alert-instructions strong {
  color: #8a6100;
  font-size: 12px;
  text-transform: uppercase;
}

.alert-full-detail {
  border-top: 1px solid var(--soft-line);
  padding-top: 10px;
}

.alert-full-detail summary {
  color: var(--sky-deep);
  cursor: pointer;
  font-weight: 900;
}

.alert-full-copy {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  white-space: pre-wrap;
}

.source-alert-link {
  background: #f4fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--sky-deep);
  font-size: 13px;
  font-weight: 900;
  justify-self: start;
  padding: 9px 10px;
  text-decoration: none;
}

.app-promo-footer {
  align-items: flex-start;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-top: 22px;
  padding: 18px 2px 0;
}

.app-promo-footer p {
  color: var(--navy);
  font-size: 14px;
  font-weight: 850;
  margin-top: 4px;
}

.app-promo-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  max-width: 620px;
  padding: 0;
}

.app-promo-footer li {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.gear-page {
  grid-column: 1 / -1;
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}

.gear-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 248, 252, 0.92)),
    var(--surface-strong);
  border: 1px solid #cfe3ee;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 32%);
  margin-top: 12px;
  overflow: hidden;
  padding: 22px;
}

.gear-hero-copy {
  display: grid;
  gap: 9px;
}

.gear-hero h2 {
  color: var(--navy);
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1;
}

.gear-hero p,
.gear-section-heading p {
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.gear-why {
  align-content: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.gear-why > span,
.gear-route-list > span {
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.gear-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gear-chip-row b {
  background: var(--app-surface-alt);
  border: 1px solid #cfe8f6;
  border-radius: 999px;
  color: var(--sky-deep);
  font-size: 12px;
  font-weight: 900;
  padding: 7px 9px;
}

.gear-section-heading {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 22px 2px 10px;
}

.gear-section-heading.compact {
  padding-top: 18px;
}

.gear-section-heading h3 {
  color: var(--navy);
  font-size: 22px;
  line-height: 1.1;
  margin: 4px 0 0;
}

.gear-section-heading p {
  color: var(--muted);
  max-width: 360px;
  text-align: right;
}

.gear-featured-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gear-feature-card {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  color: inherit;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 178px;
  padding: 14px;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.gear-feature-card:hover,
.gear-compact-row:hover,
.gear-route-list a:hover {
  background: var(--app-surface-alt);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.gear-visual {
  align-items: center;
  background: linear-gradient(180deg, var(--app-surface-alt), #dceff8);
  border: 1px solid #cfe8f6;
  border-radius: 8px;
  color: var(--sky-deep);
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.gear-feature-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.gear-feature-copy strong {
  color: var(--navy);
  font-size: 18px;
  font-weight: 950;
}

.gear-feature-copy em,
.gear-compact-row em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}

.gear-cta {
  align-items: center;
  background: linear-gradient(180deg, #176494, var(--sky-deep));
  border-radius: 8px;
  color: #ffffff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 950;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
}

.affiliate-disclosure {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 750;
  padding: 0;
}

.gear-disclosure {
  margin: 14px 2px 0;
}

.gear-secondary {
  display: grid;
}

.gear-compact-list {
  display: grid;
  gap: 8px;
}

.gear-compact-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--soft-line);
  border-radius: 8px;
  color: inherit;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 64px;
  padding: 11px 12px;
  text-decoration: none;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.gear-compact-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.gear-compact-row strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 950;
}

.gear-compact-row b {
  color: var(--green-deep);
  font-size: 12px;
  flex-shrink: 0;
  font-weight: 950;
}

.gear-empty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 14px 16px;
}

.gear-route-list {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 0 0;
}

.gear-route-list a,
.back-link {
  background: #f4fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--sky-deep);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 10px;
  text-decoration: none;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.gear-route-list a.active {
  background: var(--sky-deep);
  border-color: var(--sky-deep);
  color: #ffffff;
}

.back-link {
  display: inline-flex;
}

body[data-field-mode="hiking"] {
  background:
    linear-gradient(180deg, rgba(35, 37, 26, 0.98), rgba(108, 111, 102, 0.96)),
    #23251A;
  color: var(--alpine-bone);
}

body[data-field-mode="hiking"]::before {
  background:
    repeating-radial-gradient(ellipse at 18% 12%, rgba(180, 225, 254, 0.08) 0 1px, transparent 1px 34px),
    repeating-radial-gradient(ellipse at 78% 18%, rgba(225, 211, 192, 0.06) 0 1px, transparent 1px 42px),
    linear-gradient(135deg, transparent 0 58%, rgba(225, 211, 192, 0.04) 58.3% 58.8%, transparent 59%);
  content: "";
  inset: 0;
  opacity: 0.58;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

body[data-field-mode="hiking"] .topbar,
body[data-field-mode="hiking"] .tabs {
  background: rgba(43, 46, 30, 0.86);
  border-color: rgba(225, 211, 192, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

body[data-field-mode="hiking"] .current-card,
body[data-field-mode="hiking"] .module,
body[data-field-mode="hiking"] .air-panel,
body[data-field-mode="hiking"] .day-detail,
body[data-field-mode="hiking"] .forecast-card,
body[data-field-mode="hiking"] .next-up-story,
body[data-field-mode="hiking"] .daily-detail-panel,
body[data-field-mode="hiking"] .daily-embedded-module,
body[data-field-mode="hiking"] .daily-metric-grid div,
body[data-field-mode="hiking"] .part-day-card,
body[data-field-mode="hiking"] .daily-extra-card,
body[data-field-mode="hiking"] .daily-forecast-text,
body[data-field-mode="hiking"] .daily-mini-timeline,
body[data-field-mode="hiking"] .place-list-item,
body[data-field-mode="hiking"] .current-location-card,
body[data-field-mode="hiking"] .alert-detail-card,
body[data-field-mode="hiking"] .alert-facts div,
body[data-field-mode="hiking"] .selected-hour-content,
body[data-field-mode="hiking"] .selected-hour-values span,
body[data-field-mode="hiking"] .impact-chip,
body[data-field-mode="hiking"] .smart-prep-card {
  background: rgba(43, 46, 30, 0.78);
  border-color: rgba(225, 211, 192, 0.18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

body[data-field-mode="hiking"] .current-card,
body[data-field-mode="hiking"] .forecast-page > .module,
body[data-field-mode="hiking"] .overview-grid > .module {
  position: relative;
}

body[data-field-mode="hiking"] .current-card::before,
body[data-field-mode="hiking"] .forecast-page > .module::before,
body[data-field-mode="hiking"] .overview-grid > .module::before {
  background:
    linear-gradient(160deg, transparent 0 62%, rgba(180, 225, 254, 0.08) 62.5% 63%, transparent 63.5%),
    repeating-radial-gradient(ellipse at 20% 10%, rgba(225, 211, 192, 0.08) 0 1px, transparent 1px 30px);
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0.32;
  pointer-events: none;
  position: absolute;
}

body[data-field-mode="hiking"] .current-card > *,
body[data-field-mode="hiking"] .forecast-page > .module > *,
body[data-field-mode="hiking"] .overview-grid > .module > * {
  position: relative;
  z-index: 1;
}

body[data-field-mode="hiking"] h1,
body[data-field-mode="hiking"] h2,
body[data-field-mode="hiking"] h3,
body[data-field-mode="hiking"] .condition,
body[data-field-mode="hiking"] .temperature,
body[data-field-mode="hiking"] .forecast-card .secondary,
body[data-field-mode="hiking"] .next-up-copy strong,
body[data-field-mode="hiking"] .daily-selector-card > b,
body[data-field-mode="hiking"] .daily-detail-heading h3,
body[data-field-mode="hiking"] .daily-hero-condition,
body[data-field-mode="hiking"] .daily-metric-grid strong,
body[data-field-mode="hiking"] .part-day-card strong,
body[data-field-mode="hiking"] .daily-extra-card strong,
body[data-field-mode="hiking"] .selected-hour-content strong,
body[data-field-mode="hiking"] .place-name,
body[data-field-mode="hiking"] .row-label,
body[data-field-mode="hiking"] .alert-card-heading h2,
body[data-field-mode="hiking"] .alert-facts dd,
body[data-field-mode="hiking"] .current-location-card strong {
  color: var(--alpine-bone);
}

body[data-field-mode="hiking"] .meta,
body[data-field-mode="hiking"] .module-header p,
body[data-field-mode="hiking"] .row-detail,
body[data-field-mode="hiking"] .source-footer,
body[data-field-mode="hiking"] .tooltip,
body[data-field-mode="hiking"] .air-panel p,
body[data-field-mode="hiking"] .forecast-card .tertiary,
body[data-field-mode="hiking"] .daily-detail-heading p,
body[data-field-mode="hiking"] .daily-summary-text,
body[data-field-mode="hiking"] .daily-mini-timeline strong,
body[data-field-mode="hiking"] .part-day-card p,
body[data-field-mode="hiking"] .daily-extra-card p,
body[data-field-mode="hiking"] .daily-forecast-text p,
body[data-field-mode="hiking"] .place-detail,
body[data-field-mode="hiking"] .current-location-card span,
body[data-field-mode="hiking"] .empty-state,
body[data-field-mode="hiking"] .chart-title span,
body[data-field-mode="hiking"] .legend span,
body[data-field-mode="hiking"] .selected-hour-content p,
body[data-field-mode="hiking"] .selected-hour-values span {
  color: var(--alpine-secondary);
}

body[data-field-mode="hiking"] .kicker,
body[data-field-mode="hiking"] .module-title,
body[data-field-mode="hiking"] .metric span,
body[data-field-mode="hiking"] .current-metrics span,
body[data-field-mode="hiking"] .forecast-card .primary,
body[data-field-mode="hiking"] .daily-selector-top span,
body[data-field-mode="hiking"] .part-day-card span,
body[data-field-mode="hiking"] .daily-metric-grid span,
body[data-field-mode="hiking"] .daily-extra-card span,
body[data-field-mode="hiking"] .daily-forecast-text span,
body[data-field-mode="hiking"] .daily-mini-timeline span,
body[data-field-mode="hiking"] .air-aqi-group span,
body[data-field-mode="hiking"] .pollen-item span,
body[data-field-mode="hiking"] .alert-kicker,
body[data-field-mode="hiking"] .alert-facts dt {
  color: var(--alpine-teal);
}

body[data-field-mode="hiking"] .comfort,
body[data-field-mode="hiking"] .current-metrics strong,
body[data-field-mode="hiking"] .row-value,
body[data-field-mode="hiking"] .daily-selector-card strong,
body[data-field-mode="hiking"] .daily-hero-temps,
body[data-field-mode="hiking"] .selected-hour-values b,
body[data-field-mode="hiking"] .place-status,
body[data-field-mode="hiking"] .location-status {
  color: var(--alpine-teal) !important;
}

body[data-field-mode="hiking"] .unit,
body[data-field-mode="hiking"] .daily-weather-art.sun,
body[data-field-mode="hiking"] .daily-weather-art.storm,
body[data-field-mode="hiking"] .daily-impact-badge.moderate,
body[data-field-mode="hiking"] .daily-impact-badge.high {
  color: var(--alpine-ember);
}

body[data-field-mode="hiking"] .current-metrics,
body[data-field-mode="hiking"] .segmented-control,
body[data-field-mode="hiking"] .field-mode-toggle,
body[data-field-mode="hiking"] .search-row input {
  background: rgba(35, 37, 26, 0.72);
  border-color: rgba(225, 211, 192, 0.18);
  color: var(--alpine-bone);
}

body[data-field-mode="hiking"] .search-row input::placeholder {
  color: var(--alpine-muted);
}

body[data-field-mode="hiking"] .icon-button,
body[data-field-mode="hiking"] .text-button,
body[data-field-mode="hiking"] .back-button,
body[data-field-mode="hiking"] .daily-nav-button,
body[data-field-mode="hiking"] .place-action,
body[data-field-mode="hiking"] .segment.active {
  background: rgba(92, 98, 79, 0.56);
  border-color: rgba(225, 211, 192, 0.2);
  color: var(--alpine-bone);
}

body[data-field-mode="hiking"] .primary-action,
body[data-field-mode="hiking"] .search-row button,
body[data-field-mode="hiking"] .field-mode-button.active {
  background: var(--alpine-ember);
  border-color: var(--alpine-ember);
  color: #23251A;
}

body[data-field-mode="hiking"] .field-mode-button,
body[data-field-mode="hiking"] .tab,
body[data-field-mode="hiking"] .segment {
  color: var(--alpine-secondary);
}

body[data-field-mode="hiking"] .tab.active {
  background: rgba(180, 225, 254, 0.16);
  color: var(--alpine-teal);
}

body[data-field-mode="hiking"] .module-header,
body[data-field-mode="hiking"] .current-metrics div,
body[data-field-mode="hiking"] .sky-note-card,
body[data-field-mode="hiking"] .daily-embedded-header,
body[data-field-mode="hiking"] .data-row,
body[data-field-mode="hiking"] .place-row,
body[data-field-mode="hiking"] .air-pollen-row,
body[data-field-mode="hiking"] .hourly-selected-card,
body[data-field-mode="hiking"] .next-up-links {
  border-color: rgba(225, 211, 192, 0.16);
}

body[data-field-mode="hiking"] .forecast-card:hover,
body[data-field-mode="hiking"] .data-row:hover,
body[data-field-mode="hiking"] .place-row:hover,
body[data-field-mode="hiking"] .place-main:hover,
body[data-field-mode="hiking"] .next-up-story:hover,
body[data-field-mode="hiking"] .sky-note-card:hover,
body[data-field-mode="hiking"] .smart-prep-card:hover,
body[data-field-mode="hiking"] .place-list-item.current,
body[data-field-mode="hiking"] .daily-selector-card.active {
  background: rgba(180, 225, 254, 0.12);
}

body[data-field-mode="hiking"] .daily-selector-card {
  background: rgba(35, 37, 26, 0.74);
  border-color: rgba(225, 211, 192, 0.18);
  border-top-color: var(--alpine-teal);
}

body[data-field-mode="hiking"] .daily-selector-card.good,
body[data-field-mode="hiking"] .daily-impact-badge.good,
body[data-field-mode="hiking"] .impact-chip.good {
  border-color: rgba(92, 98, 79, 0.95);
  color: var(--alpine-bone);
}

body[data-field-mode="hiking"] .daily-selector-card.moderate,
body[data-field-mode="hiking"] .daily-impact-badge.moderate,
body[data-field-mode="hiking"] .impact-chip.moderate {
  border-color: rgba(188, 100, 46, 0.9);
}

body[data-field-mode="hiking"] .daily-selector-card.high,
body[data-field-mode="hiking"] .daily-impact-badge.high,
body[data-field-mode="hiking"] .impact-chip.high,
body[data-field-mode="hiking"] .alert-banner {
  border-color: rgba(188, 100, 46, 0.95);
}

body[data-field-mode="hiking"] .daily-impact-badge,
body[data-field-mode="hiking"] .alert-status,
body[data-field-mode="hiking"] .alert-banner,
body[data-field-mode="hiking"] .alert-instructions {
  background: rgba(188, 100, 46, 0.18);
  color: var(--alpine-ember);
}

body[data-field-mode="hiking"] .alert-banner em,
body[data-field-mode="hiking"] .source-alert-link,
body[data-field-mode="hiking"] .inline-alert-link {
  background: rgba(188, 100, 46, 0.24);
  border-color: rgba(188, 100, 46, 0.72);
  color: var(--alpine-bone);
}

body[data-field-mode="hiking"] .chart-scroll {
  background: rgba(35, 37, 26, 0.34);
}

body[data-field-mode="hiking"] .chart-scroll::before {
  background: linear-gradient(90deg, rgba(35, 37, 26, 0.96), rgba(35, 37, 26, 0));
}

body[data-field-mode="hiking"] .chart-scroll::after {
  background: linear-gradient(270deg, rgba(35, 37, 26, 0.96), rgba(35, 37, 26, 0));
}

body[data-field-mode="hiking"] .hour-column-band.selected {
  background: rgba(180, 225, 254, 0.14);
  border-left-color: var(--alpine-teal);
  border-right-color: var(--alpine-teal);
}

body[data-field-mode="hiking"] .hour-column-band.hover {
  background: rgba(225, 211, 192, 0.08);
  border-color: rgba(225, 211, 192, 0.24);
}

body[data-field-mode="hiking"] .day-boundary-line {
  border-left-color: rgba(180, 225, 254, 0.28);
}

body[data-field-mode="hiking"] .day-label,
body[data-field-mode="hiking"] .legend span {
  background: rgba(35, 37, 26, 0.92);
  border-color: rgba(225, 211, 192, 0.16);
  color: var(--alpine-secondary);
}

body[data-field-mode="hiking"] .daily-mini-bars rect {
  fill: rgba(180, 225, 254, 0.46);
}

body[data-field-mode="hiking"] .daily-mini-temp {
  stroke: var(--alpine-ember);
}

body[data-field-mode="hiking"] .daily-mini-labels text {
  fill: var(--alpine-secondary);
}

body[data-field-mode="hiking"] .daily-weather-art.snow,
body[data-field-mode="hiking"] .daily-weather-art.rain,
body[data-field-mode="hiking"] .daily-weather-art.mixed {
  color: var(--alpine-teal);
}

body[data-field-mode="hiking"] .daily-weather-art.wind,
body[data-field-mode="hiking"] .daily-weather-art.cloud {
  color: var(--alpine-bone);
}

body[data-field-mode="normal"] {
  background:
    radial-gradient(circle at 12% -8%, rgba(44, 159, 229, 0.26), transparent 30%),
    linear-gradient(180deg, #0B69D0 0, #2C9FE5 210px, #EAF4FB 520px),
    #EAF4FB;
}

body[data-field-mode="normal"]::before {
  background:
    repeating-radial-gradient(ellipse at 18% 6%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 42px),
    linear-gradient(155deg, transparent 0 64%, rgba(255, 255, 255, 0.18) 64.2% 64.6%, transparent 64.8%);
  content: "";
  inset: 0;
  opacity: 0.46;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

body[data-field-mode="normal"] .topbar {
  background: rgba(11, 63, 115, 0.94);
  border-color: rgba(199, 232, 255, 0.26);
  box-shadow: 0 12px 32px rgba(8, 43, 78, 0.24);
}

body[data-field-mode="normal"] .topbar h1,
body[data-field-mode="normal"] .topbar .location-status {
  color: #ffffff;
}

body[data-field-mode="normal"] .topbar .kicker,
body[data-field-mode="normal"] .topbar .meta {
  color: #C7E8FF;
}

body[data-field-mode="normal"] .field-mode-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(199, 232, 255, 0.3);
}

body[data-field-mode="normal"] .field-mode-button {
  color: #C7E8FF;
}

body[data-field-mode="normal"] .field-mode-button.active {
  background: linear-gradient(180deg, #2C9FE5, #0B69D0);
  border-color: rgba(199, 232, 255, 0.44);
  color: #ffffff;
}

body[data-field-mode="normal"] .topbar .icon-button,
body[data-field-mode="normal"] .topbar .text-button {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(199, 232, 255, 0.28);
  color: #C7E8FF;
}

body[data-field-mode="normal"] .current-card {
  background:
    linear-gradient(135deg, rgba(7, 59, 104, 0.96), rgba(11, 105, 208, 0.94)),
    #0B4F8E;
  border-color: rgba(199, 232, 255, 0.3);
  box-shadow: 0 18px 42px rgba(8, 43, 78, 0.26);
  color: #ffffff;
}

body[data-field-mode="normal"] .current-card .condition,
body[data-field-mode="normal"] .current-card .temperature {
  color: #ffffff;
}

body[data-field-mode="normal"] .current-card .unit,
body[data-field-mode="normal"] .current-card .comfort,
body[data-field-mode="normal"] .current-card .current-metrics span,
body[data-field-mode="normal"] .current-card .current-metrics strong {
  color: #C7E8FF;
}

body[data-field-mode="normal"] .current-card .meta {
  color: rgba(199, 232, 255, 0.86);
}

body[data-field-mode="normal"] .current-metrics {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(199, 232, 255, 0.22);
}

body[data-field-mode="normal"] .current-metrics div {
  border-color: rgba(199, 232, 255, 0.18);
}

body[data-field-mode="normal"] .module,
body[data-field-mode="normal"] .air-panel,
body[data-field-mode="normal"] .day-detail,
body[data-field-mode="normal"] .forecast-card,
body[data-field-mode="normal"] .next-up-story,
body[data-field-mode="normal"] .daily-detail-panel,
body[data-field-mode="normal"] .daily-embedded-module,
body[data-field-mode="normal"] .place-list-item,
body[data-field-mode="normal"] .current-location-card,
body[data-field-mode="normal"] .selected-hour-content,
body[data-field-mode="normal"] .smart-prep-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(11, 105, 208, 0.16);
}

body[data-field-mode="normal"] .tabs {
  background: rgba(246, 251, 255, 0.9);
  border-color: rgba(11, 105, 208, 0.18);
}

body[data-field-mode="normal"] .tab.active {
  background: linear-gradient(180deg, #ffffff, #E3F3FC);
  border-color: rgba(44, 159, 229, 0.38);
  color: #0B69D0;
}

body[data-field-mode="hiking"] {
  background:
    linear-gradient(180deg, rgba(231, 221, 200, 0.96), rgba(200, 193, 179, 0.9)),
    var(--daypack-trail-sand);
  color: var(--daypack-summit);
}

body[data-field-mode="hiking"]::before {
  background:
    repeating-radial-gradient(ellipse at 18% 18%, rgba(47, 111, 143, 0.09) 0 1px, transparent 1px 38px),
    repeating-radial-gradient(ellipse at 76% 22%, rgba(95, 98, 90, 0.08) 0 1px, transparent 1px 46px),
    linear-gradient(142deg, transparent 0 58%, rgba(47, 111, 143, 0.07) 58.25% 58.75%, transparent 59%);
  opacity: 0.42;
}

body[data-field-mode="hiking"] .topbar,
body[data-field-mode="hiking"] .tabs {
  background: rgba(244, 239, 228, 0.92);
  border-color: rgba(95, 98, 90, 0.2);
  box-shadow: 0 12px 28px rgba(37, 42, 36, 0.12);
}

body[data-field-mode="hiking"] .current-card,
body[data-field-mode="hiking"] .module,
body[data-field-mode="hiking"] .air-panel,
body[data-field-mode="hiking"] .day-detail,
body[data-field-mode="hiking"] .forecast-card,
body[data-field-mode="hiking"] .next-up-story,
body[data-field-mode="hiking"] .daily-detail-panel,
body[data-field-mode="hiking"] .daily-embedded-module,
body[data-field-mode="hiking"] .daily-metric-grid div,
body[data-field-mode="hiking"] .part-day-card,
body[data-field-mode="hiking"] .daily-extra-card,
body[data-field-mode="hiking"] .daily-forecast-text,
body[data-field-mode="hiking"] .daily-mini-timeline,
body[data-field-mode="hiking"] .place-list-item,
body[data-field-mode="hiking"] .current-location-card,
body[data-field-mode="hiking"] .alert-detail-card,
body[data-field-mode="hiking"] .alert-facts div,
body[data-field-mode="hiking"] .selected-hour-content,
body[data-field-mode="hiking"] .selected-hour-values span,
body[data-field-mode="hiking"] .impact-chip,
body[data-field-mode="hiking"] .smart-prep-card {
  background: rgba(244, 239, 228, 0.9);
  border-color: rgba(95, 98, 90, 0.18);
  box-shadow: 0 12px 30px rgba(37, 42, 36, 0.1);
}

body[data-field-mode="hiking"] .current-card::before,
body[data-field-mode="hiking"] .forecast-page > .module::before,
body[data-field-mode="hiking"] .overview-grid > .module::before {
  background:
    linear-gradient(160deg, transparent 0 62%, rgba(47, 111, 143, 0.08) 62.5% 63%, transparent 63.5%),
    repeating-radial-gradient(ellipse at 22% 10%, rgba(95, 98, 90, 0.08) 0 1px, transparent 1px 34px);
  opacity: 0.34;
}

body[data-field-mode="hiking"] h1,
body[data-field-mode="hiking"] h2,
body[data-field-mode="hiking"] h3,
body[data-field-mode="hiking"] .condition,
body[data-field-mode="hiking"] .forecast-card .secondary,
body[data-field-mode="hiking"] .next-up-copy strong,
body[data-field-mode="hiking"] .daily-selector-card > b,
body[data-field-mode="hiking"] .daily-detail-heading h3,
body[data-field-mode="hiking"] .daily-hero-condition,
body[data-field-mode="hiking"] .daily-metric-grid strong,
body[data-field-mode="hiking"] .part-day-card strong,
body[data-field-mode="hiking"] .daily-extra-card strong,
body[data-field-mode="hiking"] .selected-hour-content strong,
body[data-field-mode="hiking"] .place-name,
body[data-field-mode="hiking"] .row-label,
body[data-field-mode="hiking"] .alert-card-heading h2,
body[data-field-mode="hiking"] .alert-facts dd,
body[data-field-mode="hiking"] .current-location-card strong {
  color: var(--daypack-summit);
}

body[data-field-mode="hiking"] .temperature,
body[data-field-mode="hiking"] .unit,
body[data-field-mode="hiking"] .daily-weather-art.sun,
body[data-field-mode="hiking"] .daily-impact-badge.moderate {
  color: var(--daypack-trail-orange);
}

body[data-field-mode="hiking"] .meta,
body[data-field-mode="hiking"] .module-header p,
body[data-field-mode="hiking"] .row-detail,
body[data-field-mode="hiking"] .source-footer,
body[data-field-mode="hiking"] .tooltip,
body[data-field-mode="hiking"] .air-panel p,
body[data-field-mode="hiking"] .forecast-card .tertiary,
body[data-field-mode="hiking"] .daily-detail-heading p,
body[data-field-mode="hiking"] .daily-summary-text,
body[data-field-mode="hiking"] .part-day-card p,
body[data-field-mode="hiking"] .daily-extra-card p,
body[data-field-mode="hiking"] .daily-forecast-text p,
body[data-field-mode="hiking"] .place-detail,
body[data-field-mode="hiking"] .current-location-card span,
body[data-field-mode="hiking"] .empty-state,
body[data-field-mode="hiking"] .chart-title span,
body[data-field-mode="hiking"] .legend span,
body[data-field-mode="hiking"] .selected-hour-content p,
body[data-field-mode="hiking"] .selected-hour-values span,
body[data-field-mode="hiking"] .field-mode-button,
body[data-field-mode="hiking"] .tab,
body[data-field-mode="hiking"] .segment {
  color: var(--daypack-stone);
}

body[data-field-mode="hiking"] .kicker,
body[data-field-mode="hiking"] .module-title,
body[data-field-mode="hiking"] .metric span,
body[data-field-mode="hiking"] .current-metrics span,
body[data-field-mode="hiking"] .forecast-card .primary,
body[data-field-mode="hiking"] .daily-selector-top span,
body[data-field-mode="hiking"] .part-day-card span,
body[data-field-mode="hiking"] .daily-metric-grid span,
body[data-field-mode="hiking"] .daily-extra-card span,
body[data-field-mode="hiking"] .daily-forecast-text span,
body[data-field-mode="hiking"] .daily-mini-timeline span,
body[data-field-mode="hiking"] .air-aqi-group span,
body[data-field-mode="hiking"] .pollen-item span,
body[data-field-mode="hiking"] .alert-kicker,
body[data-field-mode="hiking"] .alert-facts dt,
body[data-field-mode="hiking"] .comfort,
body[data-field-mode="hiking"] .current-metrics strong,
body[data-field-mode="hiking"] .row-value,
body[data-field-mode="hiking"] .daily-selector-card strong,
body[data-field-mode="hiking"] .daily-hero-temps,
body[data-field-mode="hiking"] .selected-hour-values b,
body[data-field-mode="hiking"] .place-status,
body[data-field-mode="hiking"] .location-status {
  color: var(--daypack-alpine-blue) !important;
}

body[data-field-mode="hiking"] .current-metrics,
body[data-field-mode="hiking"] .segmented-control,
body[data-field-mode="hiking"] .field-mode-toggle,
body[data-field-mode="hiking"] .search-row input,
body[data-field-mode="hiking"] .chart-scroll {
  background: rgba(244, 239, 228, 0.72);
  border-color: rgba(95, 98, 90, 0.22);
  color: var(--daypack-summit);
}

body[data-field-mode="hiking"] .search-row input::placeholder {
  color: rgba(95, 98, 90, 0.74);
}

body[data-field-mode="hiking"] .icon-button,
body[data-field-mode="hiking"] .text-button,
body[data-field-mode="hiking"] .back-button,
body[data-field-mode="hiking"] .daily-nav-button,
body[data-field-mode="hiking"] .place-action,
body[data-field-mode="hiking"] .segment.active {
  background: rgba(47, 111, 143, 0.1);
  border-color: rgba(47, 111, 143, 0.28);
  color: var(--daypack-alpine-blue);
}

body[data-field-mode="hiking"] .primary-action,
body[data-field-mode="hiking"] .search-row button,
body[data-field-mode="hiking"] .field-mode-button.active {
  background: var(--daypack-alpine-blue);
  border-color: var(--daypack-alpine-blue);
  color: var(--daypack-cloud-canvas);
}

body[data-field-mode="hiking"] .tab.active {
  background: rgba(47, 111, 143, 0.12);
  color: var(--daypack-alpine-blue);
}

body[data-field-mode="hiking"] .module-header,
body[data-field-mode="hiking"] .current-metrics div,
body[data-field-mode="hiking"] .sky-note-card,
body[data-field-mode="hiking"] .daily-embedded-header,
body[data-field-mode="hiking"] .data-row,
body[data-field-mode="hiking"] .place-row,
body[data-field-mode="hiking"] .air-pollen-row,
body[data-field-mode="hiking"] .hourly-selected-card,
body[data-field-mode="hiking"] .next-up-links {
  border-color: rgba(95, 98, 90, 0.18);
}

body[data-field-mode="hiking"] .forecast-card:hover,
body[data-field-mode="hiking"] .data-row:hover,
body[data-field-mode="hiking"] .place-row:hover,
body[data-field-mode="hiking"] .place-main:hover,
body[data-field-mode="hiking"] .next-up-story:hover,
body[data-field-mode="hiking"] .sky-note-card:hover,
body[data-field-mode="hiking"] .smart-prep-card:hover,
body[data-field-mode="hiking"] .place-list-item.current,
body[data-field-mode="hiking"] .daily-selector-card.active {
  background: rgba(47, 111, 143, 0.1);
}

body[data-field-mode="hiking"] .daily-selector-card {
  background: rgba(244, 239, 228, 0.86);
  border-color: rgba(95, 98, 90, 0.18);
  border-top-color: var(--daypack-alpine-blue);
}

body[data-field-mode="hiking"] .daily-selector-card.good,
body[data-field-mode="hiking"] .daily-impact-badge.good,
body[data-field-mode="hiking"] .impact-chip.good {
  border-color: rgba(111, 138, 79, 0.68);
  color: var(--daypack-meadow);
}

body[data-field-mode="hiking"] .daily-impact-badge {
  background: rgba(47, 111, 143, 0.1);
  border-color: rgba(47, 111, 143, 0.28);
  color: var(--daypack-alpine-blue);
}

body[data-field-mode="hiking"] .daily-selector-card.moderate,
body[data-field-mode="hiking"] .daily-impact-badge.moderate,
body[data-field-mode="hiking"] .impact-chip.moderate {
  border-color: rgba(216, 121, 50, 0.7);
  color: var(--daypack-trail-orange);
}

body[data-field-mode="hiking"] .daily-selector-card.high,
body[data-field-mode="hiking"] .daily-impact-badge.high,
body[data-field-mode="hiking"] .impact-chip.high,
body[data-field-mode="hiking"] .alert-banner {
  border-color: rgba(228, 95, 43, 0.78);
}

body[data-field-mode="hiking"] .daily-impact-badge.high,
body[data-field-mode="hiking"] .alert-status,
body[data-field-mode="hiking"] .alert-banner,
body[data-field-mode="hiking"] .alert-instructions {
  background: rgba(228, 95, 43, 0.12);
  color: var(--daypack-rescue);
}

body[data-field-mode="hiking"] .alert-banner em,
body[data-field-mode="hiking"] .source-alert-link,
body[data-field-mode="hiking"] .inline-alert-link {
  background: rgba(228, 95, 43, 0.14);
  border-color: rgba(228, 95, 43, 0.38);
  color: var(--daypack-rescue);
}

body[data-field-mode="hiking"] .chart-scroll::before {
  background: linear-gradient(90deg, rgba(231, 221, 200, 0.95), rgba(231, 221, 200, 0));
}

body[data-field-mode="hiking"] .chart-scroll::after {
  background: linear-gradient(270deg, rgba(231, 221, 200, 0.95), rgba(231, 221, 200, 0));
}

body[data-field-mode="hiking"] .hour-column-band.selected {
  background: rgba(47, 111, 143, 0.12);
  border-left-color: var(--daypack-alpine-blue);
  border-right-color: var(--daypack-alpine-blue);
}

body[data-field-mode="hiking"] .hour-column-band.hover {
  background: rgba(244, 239, 228, 0.5);
  border-color: rgba(95, 98, 90, 0.24);
}

body[data-field-mode="hiking"] .day-boundary-line {
  border-left-color: rgba(47, 111, 143, 0.28);
}

body[data-field-mode="hiking"] .day-label,
body[data-field-mode="hiking"] .legend span {
  background: rgba(244, 239, 228, 0.92);
  border-color: rgba(95, 98, 90, 0.18);
  color: var(--daypack-stone);
}

body[data-field-mode="hiking"] .daily-mini-bars rect {
  fill: rgba(95, 168, 200, 0.48);
}

body[data-field-mode="hiking"] .daily-mini-temp {
  stroke: var(--daypack-trail-orange);
}

body[data-field-mode="hiking"] .daily-mini-labels text {
  fill: var(--daypack-stone);
}

body[data-field-mode="hiking"] .daily-weather-art.snow,
body[data-field-mode="hiking"] .daily-weather-art.rain,
body[data-field-mode="hiking"] .daily-weather-art.mixed {
  color: var(--daypack-glacier);
}

body[data-field-mode="hiking"] .daily-weather-art.wind,
body[data-field-mode="hiking"] .daily-weather-art.cloud {
  color: var(--daypack-stone);
}

body[data-field-mode="hunting"] {
  background:
    radial-gradient(circle at 18% -10%, rgba(255, 122, 26, 0.12), transparent 32%),
    linear-gradient(180deg, var(--hunting-forest), var(--hunting-charcoal));
  color: var(--hunting-text);
}

body[data-field-mode="hunting"]::before {
  background:
    repeating-linear-gradient(24deg, rgba(88, 96, 63, 0.08) 0 1px, transparent 1px 34px),
    repeating-radial-gradient(ellipse at 78% 16%, rgba(217, 154, 61, 0.07) 0 1px, transparent 1px 42px);
  content: "";
  inset: 0;
  opacity: 0.46;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

body[data-field-mode="hunting"] .topbar,
body[data-field-mode="hunting"] .tabs {
  background: rgba(18, 22, 18, 0.88);
  border-color: rgba(70, 80, 56, 0.66);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

body[data-field-mode="hunting"] .current-card,
body[data-field-mode="hunting"] .module,
body[data-field-mode="hunting"] .air-panel,
body[data-field-mode="hunting"] .day-detail,
body[data-field-mode="hunting"] .forecast-card,
body[data-field-mode="hunting"] .next-up-story,
body[data-field-mode="hunting"] .daily-detail-panel,
body[data-field-mode="hunting"] .daily-embedded-module,
body[data-field-mode="hunting"] .daily-metric-grid div,
body[data-field-mode="hunting"] .part-day-card,
body[data-field-mode="hunting"] .daily-extra-card,
body[data-field-mode="hunting"] .daily-forecast-text,
body[data-field-mode="hunting"] .daily-mini-timeline,
body[data-field-mode="hunting"] .place-list-item,
body[data-field-mode="hunting"] .current-location-card,
body[data-field-mode="hunting"] .alert-detail-card,
body[data-field-mode="hunting"] .alert-facts div,
body[data-field-mode="hunting"] .selected-hour-content,
body[data-field-mode="hunting"] .selected-hour-values span,
body[data-field-mode="hunting"] .impact-chip,
body[data-field-mode="hunting"] .smart-prep-card {
  background: rgba(28, 36, 25, 0.86);
  border-color: rgba(70, 80, 56, 0.58);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

body[data-field-mode="hunting"] .current-card::before,
body[data-field-mode="hunting"] .forecast-page > .module::before,
body[data-field-mode="hunting"] .overview-grid > .module::before {
  background:
    linear-gradient(160deg, transparent 0 62%, rgba(255, 122, 26, 0.07) 62.5% 63%, transparent 63.5%),
    repeating-radial-gradient(ellipse at 22% 10%, rgba(198, 186, 162, 0.08) 0 1px, transparent 1px 32px);
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  position: absolute;
}

body[data-field-mode="hunting"] h1,
body[data-field-mode="hunting"] h2,
body[data-field-mode="hunting"] h3,
body[data-field-mode="hunting"] .condition,
body[data-field-mode="hunting"] .temperature,
body[data-field-mode="hunting"] .forecast-card .secondary,
body[data-field-mode="hunting"] .next-up-copy strong,
body[data-field-mode="hunting"] .daily-selector-card > b,
body[data-field-mode="hunting"] .daily-detail-heading h3,
body[data-field-mode="hunting"] .daily-hero-condition,
body[data-field-mode="hunting"] .daily-metric-grid strong,
body[data-field-mode="hunting"] .part-day-card strong,
body[data-field-mode="hunting"] .daily-extra-card strong,
body[data-field-mode="hunting"] .selected-hour-content strong,
body[data-field-mode="hunting"] .place-name,
body[data-field-mode="hunting"] .row-label,
body[data-field-mode="hunting"] .alert-card-heading h2,
body[data-field-mode="hunting"] .alert-facts dd,
body[data-field-mode="hunting"] .current-location-card strong {
  color: var(--hunting-text);
}

body[data-field-mode="hunting"] .meta,
body[data-field-mode="hunting"] .module-header p,
body[data-field-mode="hunting"] .row-detail,
body[data-field-mode="hunting"] .source-footer,
body[data-field-mode="hunting"] .tooltip,
body[data-field-mode="hunting"] .air-panel p,
body[data-field-mode="hunting"] .forecast-card .tertiary,
body[data-field-mode="hunting"] .daily-detail-heading p,
body[data-field-mode="hunting"] .daily-summary-text,
body[data-field-mode="hunting"] .part-day-card p,
body[data-field-mode="hunting"] .daily-extra-card p,
body[data-field-mode="hunting"] .daily-forecast-text p,
body[data-field-mode="hunting"] .place-detail,
body[data-field-mode="hunting"] .current-location-card span,
body[data-field-mode="hunting"] .empty-state,
body[data-field-mode="hunting"] .chart-title span,
body[data-field-mode="hunting"] .legend span,
body[data-field-mode="hunting"] .selected-hour-content p,
body[data-field-mode="hunting"] .selected-hour-values span,
body[data-field-mode="hunting"] .field-mode-button,
body[data-field-mode="hunting"] .tab,
body[data-field-mode="hunting"] .segment {
  color: var(--hunting-muted);
}

body[data-field-mode="hunting"] .kicker,
body[data-field-mode="hunting"] .module-title,
body[data-field-mode="hunting"] .metric span,
body[data-field-mode="hunting"] .current-metrics span,
body[data-field-mode="hunting"] .forecast-card .primary,
body[data-field-mode="hunting"] .daily-selector-top span,
body[data-field-mode="hunting"] .part-day-card span,
body[data-field-mode="hunting"] .daily-metric-grid span,
body[data-field-mode="hunting"] .daily-extra-card span,
body[data-field-mode="hunting"] .daily-forecast-text span,
body[data-field-mode="hunting"] .daily-mini-timeline span,
body[data-field-mode="hunting"] .air-aqi-group span,
body[data-field-mode="hunting"] .pollen-item span,
body[data-field-mode="hunting"] .alert-kicker,
body[data-field-mode="hunting"] .alert-facts dt,
body[data-field-mode="hunting"] .comfort,
body[data-field-mode="hunting"] .current-metrics strong,
body[data-field-mode="hunting"] .row-value,
body[data-field-mode="hunting"] .daily-selector-card strong,
body[data-field-mode="hunting"] .daily-hero-temps,
body[data-field-mode="hunting"] .selected-hour-values b,
body[data-field-mode="hunting"] .place-status,
body[data-field-mode="hunting"] .location-status {
  color: var(--hunting-amber) !important;
}

body[data-field-mode="hunting"] .current-metrics,
body[data-field-mode="hunting"] .segmented-control,
body[data-field-mode="hunting"] .field-mode-toggle,
body[data-field-mode="hunting"] .search-row input,
body[data-field-mode="hunting"] .chart-scroll {
  background: rgba(18, 22, 18, 0.74);
  border-color: rgba(70, 80, 56, 0.6);
  color: var(--hunting-text);
}

body[data-field-mode="hunting"] .search-row input::placeholder {
  color: var(--hunting-dim);
}

body[data-field-mode="hunting"] .icon-button,
body[data-field-mode="hunting"] .text-button,
body[data-field-mode="hunting"] .back-button,
body[data-field-mode="hunting"] .daily-nav-button,
body[data-field-mode="hunting"] .place-action,
body[data-field-mode="hunting"] .segment.active {
  background: rgba(88, 96, 63, 0.42);
  border-color: rgba(198, 186, 162, 0.18);
  color: var(--hunting-text);
}

body[data-field-mode="hunting"] .primary-action,
body[data-field-mode="hunting"] .search-row button,
body[data-field-mode="hunting"] .field-mode-button.active {
  background: var(--hunting-accent);
  border-color: var(--hunting-accent);
  color: var(--hunting-charcoal);
}

body[data-field-mode="hunting"] .tab.active {
  background: rgba(255, 122, 26, 0.16);
  color: var(--hunting-accent);
}

body[data-field-mode="hunting"] .module-header,
body[data-field-mode="hunting"] .current-metrics div,
body[data-field-mode="hunting"] .sky-note-card,
body[data-field-mode="hunting"] .daily-embedded-header,
body[data-field-mode="hunting"] .data-row,
body[data-field-mode="hunting"] .place-row,
body[data-field-mode="hunting"] .air-pollen-row,
body[data-field-mode="hunting"] .hourly-selected-card,
body[data-field-mode="hunting"] .next-up-links {
  border-color: rgba(70, 80, 56, 0.48);
}

body[data-field-mode="hunting"] .forecast-card:hover,
body[data-field-mode="hunting"] .data-row:hover,
body[data-field-mode="hunting"] .place-row:hover,
body[data-field-mode="hunting"] .place-main:hover,
body[data-field-mode="hunting"] .next-up-story:hover,
body[data-field-mode="hunting"] .sky-note-card:hover,
body[data-field-mode="hunting"] .smart-prep-card:hover,
body[data-field-mode="hunting"] .place-list-item.current,
body[data-field-mode="hunting"] .daily-selector-card.active {
  background: rgba(46, 58, 36, 0.72);
}

body[data-field-mode="hunting"] .daily-selector-card {
  background: rgba(28, 36, 25, 0.86);
  border-color: rgba(70, 80, 56, 0.58);
  border-top-color: var(--hunting-amber);
}

body[data-field-mode="hunting"] .daily-impact-badge,
body[data-field-mode="hunting"] .alert-status,
body[data-field-mode="hunting"] .alert-banner,
body[data-field-mode="hunting"] .alert-instructions {
  background: rgba(255, 122, 26, 0.14);
  border-color: rgba(255, 122, 26, 0.5);
  color: var(--hunting-accent);
}

body[data-field-mode="hunting"] .chart-scroll::before {
  background: linear-gradient(90deg, rgba(18, 22, 18, 0.96), rgba(18, 22, 18, 0));
}

body[data-field-mode="hunting"] .chart-scroll::after {
  background: linear-gradient(270deg, rgba(18, 22, 18, 0.96), rgba(18, 22, 18, 0));
}

body[data-field-mode="hunting"] .hour-column-band.selected {
  background: rgba(255, 122, 26, 0.13);
  border-left-color: var(--hunting-accent);
  border-right-color: var(--hunting-accent);
}

body[data-field-mode="hunting"] .hour-column-band.hover {
  background: rgba(198, 186, 162, 0.08);
  border-color: rgba(198, 186, 162, 0.22);
}

body[data-field-mode="hunting"] .day-boundary-line {
  border-left-color: rgba(217, 154, 61, 0.34);
}

body[data-field-mode="hunting"] .day-label,
body[data-field-mode="hunting"] .legend span {
  background: rgba(18, 22, 18, 0.92);
  border-color: rgba(70, 80, 56, 0.58);
  color: var(--hunting-muted);
}

@media (max-width: 980px) {
  .app-shell {
    padding: 0 12px 24px;
  }

  .topbar {
    margin: 0 -12px;
    padding: 10px 14px;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .brand-mark {
    height: 40px;
    width: 40px;
  }

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

  .place-rail {
    position: static;
  }

  .current-card,
  .overview-grid,
  .air-grid,
  .places-grid {
    grid-template-columns: 1fr;
  }

  .current-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .current-metrics div {
    border-bottom: 0;
    border-right: 1px solid var(--soft-line);
    min-height: 76px;
  }

  .current-metrics div:last-child {
    border-right: 0;
  }

  .tabs {
    top: 61px;
  }
}

@media (max-width: 640px) {
  .topbar {
    align-items: flex-start;
    gap: 10px;
  }

  .top-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .icon-button {
    min-height: 36px;
    padding: 0 9px;
  }

  .location-action {
    font-size: 0;
    min-width: 42px;
    padding: 0;
  }

  .location-action::before {
    content: "GPS";
    font-size: 11px;
    font-weight: 900;
  }

  .field-mode-button {
    min-width: 62px;
    padding: 0 6px;
  }

  .temperature {
    font-size: 72px;
  }

  .card-grid,
  .current-metrics,
  .air-pollen-row,
  .day-detail .stats-grid,
  .daily-metric-grid,
  .part-day-grid,
  .daily-extra-grid {
    grid-template-columns: 1fr 1fr;
  }

  .daily-detail-heading {
    align-items: stretch;
    grid-template-columns: 1fr 1fr;
  }

  .daily-detail-heading > div {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .daily-detail-body {
    gap: 8px;
  }

  .daily-hero-condition {
    font-size: 18px;
  }

  .daily-weather-art {
    flex-basis: 86px;
    height: 78px;
  }

  .daily-weather-art svg {
    height: 74px;
    width: 86px;
  }

  .current-metrics div {
    border-right: 0;
    border-bottom: 1px solid var(--soft-line);
  }

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

  .gear-hero,
  .gear-featured-grid {
    grid-template-columns: 1fr;
  }

  .gear-hero {
    padding: 16px;
  }

  .gear-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .gear-section-heading p {
    max-width: none;
    text-align: left;
  }

  .app-promo-footer {
    display: grid;
    gap: 10px;
  }

  .app-promo-footer ul {
    justify-content: flex-start;
  }

  .place-list-item {
    align-items: stretch;
  }

  .current-location-card {
    align-items: stretch;
    flex-direction: column;
  }

  .location-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .location-helper {
    text-align: left;
  }

  .place-main {
    padding-right: 8px;
  }

  .place-status {
    display: none;
  }

  .place-actions-inline {
    padding-right: 8px;
  }
}

@media (max-width: 700px) {
  body {
    padding-bottom: 82px;
  }

  .app-shell {
    padding-bottom: 18px;
  }

  .page-layout {
    gap: 10px;
    padding-top: 10px;
  }

  .place-rail {
    display: none;
    gap: 10px;
  }

  .desktop-guidance {
    display: none !important;
  }

  .mobile-guidance {
    display: block;
    grid-column: 1 / -1;
  }

  .mobile-guidance:empty {
    display: none;
  }

  body[data-active-tab="places"] .places-search-block {
    display: block;
  }

  .forecast-page {
    gap: 10px;
  }

  .current-card {
    gap: 10px;
    min-height: 0;
    padding: 12px;
  }

  .alert-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .hail-risk-card {
    align-items: stretch;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .hail-risk-action {
    grid-column: 1 / -1;
  }

  .condition {
    font-size: 15px;
  }

  .meta {
    font-size: 11px;
  }

  .temperature-line {
    margin-top: 8px;
  }

  .temperature {
    font-size: 58px;
    line-height: 0.94;
  }

  .unit {
    font-size: 20px;
  }

  .comfort {
    font-size: 12px;
  }

  .current-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .current-metrics div {
    border-bottom: 0;
    border-right: 1px solid var(--soft-line);
    min-height: 58px;
    padding: 8px;
  }

  .current-metrics div:last-child {
    border-right: 0;
  }

  .current-metrics strong {
    font-size: 14px;
  }

  .tabs {
    border-radius: 0;
    border-width: 1px 0 0;
    bottom: 0;
    box-shadow: 0 -6px 18px rgba(18, 50, 79, 0.08);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    left: 0;
    padding: 7px 6px max(8px, env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    top: auto;
  }

  .tab {
    font-size: 12px;
    min-height: 46px;
    padding: 0 4px;
    white-space: normal;
  }

  .advanced-radar-shell {
    margin: -8px -14px 0;
  }

  .radar-map-stage {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    height: calc(100vh - 168px);
    min-height: 470px;
  }

  .radar-summary-card {
    left: 10px;
    right: 10px;
    top: 10px;
  }

  .radar-map-controls {
    bottom: 94px;
    left: 10px;
    right: 10px;
    top: auto;
  }

  .radar-round-control {
    height: 44px;
    width: 44px;
  }

  .radar-layer-toggle {
    flex: 1;
  }

  .radar-layer-sheet,
  .radar-alert-card {
    bottom: 146px;
    left: 10px;
    max-width: none;
    right: 10px;
  }

  .radar-timeline-panel {
    border-radius: 0;
    border-width: 1px;
    bottom: 10px;
    left: 10px;
    flex-wrap: wrap;
    position: absolute;
    right: 10px;
  }

  .radar-scrubber {
    flex-basis: 100%;
    min-width: 100%;
    order: 3;
  }

  .radar-provider-link {
    min-height: 42px;
  }

  .tab-panel {
    display: none;
  }

  .tab-panel.active {
    display: grid;
  }

  .overview-grid,
  .air-grid,
  .places-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .forecast-card {
    min-height: 74px;
    padding: 10px;
  }

  .forecast-card .secondary {
    font-size: 15px;
  }

  .chart-stage {
    min-width: 760px;
  }

  .hourly-selected-card {
    padding: 8px 10px 0;
  }

  .selected-hour-content {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .selected-hour-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .module-header {
    padding: 12px 14px;
  }

  #hourlyPanel .module-header {
    align-items: center;
    flex-direction: row;
    padding: 7px 10px;
  }

  #hourlyPanel .module-header h2 {
    font-size: 16px;
  }

  #hourlyPanel .module-header p {
    font-size: 11px;
  }

  #hourlyPanel .segment {
    min-height: 28px;
    padding: 0 8px;
  }
}