:root {
  --bg: #edf4f7;
  --panel: rgba(255, 255, 255, 0.92);
  --line: #d6e2eb;
  --ink: #173247;
  --muted: #62778a;
  --accent: #1d7db6;
  --accent-2: #116466;
  --warm: #f5a524;
  --alert: #d95d39;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(17, 100, 102, 0.10), transparent 30%),
    radial-gradient(circle at top right, rgba(29, 125, 182, 0.12), transparent 28%),
    linear-gradient(180deg, #f9fbfd 0%, var(--bg) 100%);
}

.page-shell {
  width: min(1400px, calc(100% - 28px));
  margin: 20px auto 32px;
}

a {
  color: inherit;
}

::selection {
  background: rgba(29, 125, 182, 0.18);
}


.hero-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
  padding: 8px 4px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 800;
}

h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  line-height: 1.05;
}

.lead {
  max-width: 880px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.period-chip {
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef6ff, #deecff);
  color: var(--accent);
  font-weight: 800;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(480px, 1.2fr) minmax(360px, 0.8fr);
  gap: 18px;
  align-items: start;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(23, 50, 71, 0.08);
  backdrop-filter: blur(8px);
}

.map-panel,
.stations-panel {
  overflow: hidden;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px 0;
}

.sticky-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 100%);
  border-bottom: 1px solid rgba(214, 226, 235, 0.9);
}

.panel-kicker {
  margin: 0 0 6px;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  font-weight: 800;
}

.panel-head h2 {
  margin: 0;
  font-size: 1.35rem;
}

.panel-note {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

.map-canvas {
  height: calc(100vh - 180px);
  min-height: 620px;
  margin: 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.stations-panel {
  height: calc(100vh - 120px);
  min-height: 700px;
  display: flex;
  flex-direction: column;
}

.feedback {
  margin: 18px 22px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #eef6fb;
  color: #335a75;
}

.feedback.is-error {
  background: #fff1ec;
  color: #8c3419;
}

.stations-list {
  padding: 18px 22px 22px;
  overflow: auto;
  display: grid;
  gap: 14px;
}

.station-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
}

.station-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.station-name {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
}

.station-id {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 800;
}

.badge.ok {
  background: #e8f7ef;
  color: #1a7040;
}

.badge.off {
  background: #fff1ec;
  color: #9d4628;
}

.badge.public {
  background: #edf4ff;
  color: #285f9f;
}

.station-meta {
  margin: 12px 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
}

.download-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 13px 14px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}

.download-btn:hover {
  filter: brightness(1.04);
}

.leaflet-container {
  font: inherit;
}

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

  .map-canvas,
  .stations-panel {
    height: auto;
    min-height: 520px;
  }

  .stations-panel {
    min-height: 0;
  }

  .stations-list {
    max-height: none;
  }
}

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 16px, 1400px);
  }

  .hero-bar,
  .panel-head {
    flex-direction: column;
  }

  .panel-note {
    text-align: left;
  }

  .map-canvas {
    margin: 12px;
  }

  .stations-list {
    padding: 14px;
  }
}.page-shell--wide {
  width: min(1800px, calc(100% - 24px));
}

.hero-bar--explorer {
  align-items: center;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.workspace--wide {
  grid-template-columns: minmax(720px, 1.6fr) minmax(360px, 0.72fr);
}

.map-canvas--wide {
  height: calc(100vh - 170px);
  min-height: 720px;
}

.stations-panel--wide {
  min-height: 760px;
}

.selection-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 22px 0;
}

.selection-summary > div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f9fc 100%);
}

.summary-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.station-card--interactive {
  padding: 0;
  overflow: hidden;
}

.station-open-btn {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 16px 16px 0;
  cursor: pointer;
}

.open-hint {
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 2200;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 29, 44, 0.58);
  backdrop-filter: blur(6px);
}

.modal-card {
  position: relative;
  width: min(1120px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  overflow: auto;
  border-radius: 26px;
  border: 1px solid rgba(214, 226, 235, 0.8);
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(245,250,252,0.98) 100%);
  box-shadow: 0 24px 70px rgba(12, 31, 49, 0.24);
  padding: 24px;
}

.modal-open {
  overflow: hidden;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #eff6fb;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.modal-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
}

.modal-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
  gap: 18px;
  margin-bottom: 18px;
}

.modal-panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  padding: 18px;
}

.modal-panel h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
}

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

.fact-card {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #eff7fd 0%, #f9fcfe 100%);
  border: 1px solid #d8e7f1;
}

.fact-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.fact-value {
  display: block;
  line-height: 1.35;
}

.details-grid {
  display: grid;
  gap: 10px;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(214, 226, 235, 0.75);
}

.detail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.detail-label {
  color: var(--muted);
  font-weight: 700;
}

.detail-value {
  line-height: 1.45;
  word-break: break-word;
}

.modal-panel--download {
  margin-top: 4px;
}

.modal-download-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.muted-copy {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.download-config {
  display: grid;
  gap: 18px;
}

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

.field-block {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

.field-block input[type="date"] {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0 12px;
  font: inherit;
}

.scope-switch {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.scope-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 700;
}

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

.variable-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f5fbfd 100%);
  cursor: pointer;
}

.variable-card input {
  margin: 0;
}

.variable-title {
  font-weight: 800;
}

.variable-text,
.variable-columns {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
}

.badge.type {
  background: #fff6e8;
  color: #9a5a00;
}

.popup-detail-btn {
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1280px) {
  .workspace--wide {
    grid-template-columns: 1fr;
  }

  .map-canvas--wide,
  .stations-panel--wide {
    height: auto;
    min-height: 560px;
  }
}

@media (max-width: 920px) {
  .modal-grid,
  .variable-groups,
  .date-grid,
  .fact-grid,
  .selection-summary {
    grid-template-columns: 1fr;
  }

  .modal-head,
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }
}
.map-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.switch-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-weight: 700;
}

.switch-card input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.panel-head--map {
  align-items: center;
}

@media (max-width: 920px) {
  .map-toolbar {
    align-items: flex-start;
  }
}
.recent-highlights {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 16px;
}

.modal-panel--recent {
  margin-top: 4px;
}

.modal-recent-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.recent-chart-shell {
  margin: 10px 0 16px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #f5fafc 100%);
}

.recent-chart {
  display: block;
  width: 100%;
  height: 220px;
}

.recent-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.recent-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.recent-table th,
.recent-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(214, 226, 235, 0.8);
  text-align: left;
  font-size: 0.92rem;
}

.recent-table thead th {
  position: sticky;
  top: 0;
  background: #eef6fb;
  color: var(--ink);
  font-weight: 800;
}

.recent-table tbody tr:nth-child(even) {
  background: #f9fcfe;
}

@media (max-width: 1100px) {
  .recent-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .modal-recent-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .recent-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.station-card--interactive {
  padding: 0;
  overflow: hidden;
}

.station-card--interactive .station-open-btn {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 16px 16px 0;
  cursor: pointer;
  color: var(--ink);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.station-card--interactive .station-open-btn * {
  color: inherit;
}

.station-card--interactive .badge-row,
.station-card--interactive .station-meta {
  padding-left: 16px;
  padding-right: 16px;
}

.station-card--interactive .station-meta {
  padding-bottom: 16px;
  margin-bottom: 0;
}

.station-card--interactive .station-name,
.station-card--interactive .station-id,
.station-card--interactive .open-hint {
  color: var(--ink);
}
.debug-banner {
  margin: 18px 22px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffe66d;
  color: #4f3b00;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.debug-station-card {
  border: 2px solid #ff9f1c;
  background: linear-gradient(180deg, #fffdf5 0%, #fff7e8 100%);
}
.simple-stations {
  display: grid;
  gap: 10px;
}

.simple-station-row {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #ffffff;
  color: var(--ink);
  padding: 14px 16px;
  cursor: pointer;
  font: inherit;
}

.simple-station-row strong {
  color: var(--ink);
  font-size: 1rem;
}

.simple-station-row span {
  color: var(--muted);
  font-size: 0.9rem;
}
.modal-mode-switch {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
}

.mode-btn,
.line-action-btn,
.popup-detail-btn--secondary {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.mode-btn.is-active {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border-color: transparent;
}

.station-line-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 14px 16px;
}

.station-line-main {
  display: grid;
  gap: 4px;
}

.station-line-main strong {
  color: var(--ink);
  font-size: 1rem;
}

.station-line-main span {
  color: var(--muted);
  font-size: 0.9rem;
}

.station-line-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.line-action-btn {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  border-color: transparent;
}

.line-action-btn--secondary,
.popup-detail-btn--secondary {
  background: #f7fbfd;
  color: var(--ink);
  border-color: var(--line);
}

.popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

@media (max-width: 920px) {
  .station-line-card {
    grid-template-columns: 1fr;
  }

  .station-line-actions,
  .modal-mode-switch {
    flex-direction: column;
    align-items: stretch;
  }
}
.mode-btn:nth-child(3).is-active,
.line-action-btn--download {
  background: linear-gradient(135deg, #f5a524, #d95d39);
  color: #fff;
  border-color: transparent;
}
.topbar-shell {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
  background: rgba(249, 251, 253, 0.78);
  border-bottom: 1px solid rgba(214, 226, 235, 0.75);
}

.topbar {
  width: min(1800px, calc(100% - 24px));
  margin: 0 auto;
  min-height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 28px rgba(29, 125, 182, 0.22);
}

.brand-eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.brand-title {
  display: block;
  color: var(--ink);
  font-size: 1.02rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar-badge {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(17, 100, 102, 0.08);
  color: var(--accent-2);
  font-size: 0.9rem;
  font-weight: 800;
}

.hero-card {
  position: relative;
  padding: 30px;
  border: 1px solid rgba(214, 226, 235, 0.8);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(29, 125, 182, 0.12), transparent 34%),
    radial-gradient(circle at 100% 20%, rgba(245, 165, 36, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(245,250,252,0.98) 100%);
  box-shadow: 0 22px 60px rgba(18, 42, 61, 0.1);
}

.hero-copy {
  max-width: 980px;
}

.hero-actions--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.hero-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(29, 125, 182, 0.12);
  background: rgba(255,255,255,0.72);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.hero-note-card {
  width: min(320px, 100%);
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(214, 226, 235, 0.85);
  background: rgba(255,255,255,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.hero-note-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 800;
}

.hero-note-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.hero-note-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

.site-footer {
  margin: 26px 0 0;
  padding: 0 0 28px;
}

.footer-inner {
  width: min(1800px, calc(100% - 24px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 26px;
  border: 1px solid rgba(214, 226, 235, 0.85);
  border-radius: 24px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 14px 38px rgba(23, 50, 71, 0.06);
}

.footer-title {
  margin: 0 0 8px;
  color: var(--ink);
  font-weight: 800;
}

.footer-copy {
  margin: 0;
  max-width: 820px;
  color: var(--muted);
  line-height: 1.6;
}

.footer-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.footer-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef6fb;
  color: var(--accent-2);
  font-size: 0.84rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .topbar,
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar-actions,
  .footer-meta,
  .hero-actions--stack {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .hero-card {
    padding: 22px;
  }
}


.panel {
  position: relative;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0));
}

.panel-head--map {
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0));
}

.map-toolbar {
  gap: 14px;
}

#stationsTitle {
  line-height: 1.15;
}

.stations-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 125, 182, 0.45) transparent;
}

.stations-list::-webkit-scrollbar {
  width: 10px;
}

.stations-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(29, 125, 182, 0.45), rgba(17, 100, 102, 0.42));
  border-radius: 999px;
}

.station-line-card {
  border: 1px solid rgba(214, 226, 235, 0.95);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(244,249,252,0.98) 100%);
  box-shadow: 0 14px 34px rgba(22, 50, 71, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.station-line-card:hover {
  transform: translateY(-2px);
  border-color: rgba(29, 125, 182, 0.22);
  box-shadow: 0 18px 38px rgba(22, 50, 71, 0.12);
}

.station-line-main strong {
  font-size: 1rem;
  line-height: 1.35;
}

.station-line-meta {
  color: var(--muted);
}

.line-action-btn,
.popup-detail-btn,
.download-btn,
.mode-btn,
.ghost-link {
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease, border-color 0.14s ease;
}

.line-action-btn:hover,
.popup-detail-btn:hover,
.download-btn:hover,
.mode-btn:hover,
.ghost-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(22, 50, 71, 0.12);
}

.ghost-link:hover {
  border-color: rgba(29, 125, 182, 0.25);
  background: rgba(255,255,255,0.96);
}

.hero-card h1 {
  max-width: 13ch;
  text-wrap: balance;
}

.hero-copy .lead {
  font-size: 1.02rem;
}

.footer-inner {
  position: relative;
  overflow: hidden;
}

.footer-inner::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -44px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 125, 182, 0.12) 0%, rgba(29, 125, 182, 0) 70%);
  pointer-events: none;
}

@media (max-width: 980px) {
  .hero-card h1 {
    max-width: none;
  }
}

/* Modern explorer theme */
:root {
  --bg: #eef3ef;
  --panel: rgba(255, 255, 255, 0.96);
  --line: #cddbd5;
  --ink: #132722;
  --muted: #64736f;
  --accent: #197c8f;
  --accent-2: #245f45;
  --warm: #d8902f;
  --alert: #c65337;
  --shadow-soft: 0 16px 40px rgba(22, 38, 34, 0.10);
  --shadow-lift: 0 22px 54px rgba(22, 38, 34, 0.16);
}

body {
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(36, 95, 69, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(36, 95, 69, 0.06) 1px, transparent 1px),
    linear-gradient(140deg, #f7faf7 0%, #eef5f2 46%, #e9f1ed 100%);
  background-size: 46px 46px, 46px 46px, auto;
}

.page-shell {
  margin-top: 14px;
}

.page-shell--wide {
  width: min(1880px, calc(100% - 28px));
}

.topbar-shell {
  background: rgba(12, 26, 23, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 14px 40px rgba(11, 24, 21, 0.18);
}

.topbar {
  min-height: 64px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, #66b878, #1b7a92 58%, #d99732);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.brand-eyebrow {
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.12em;
}

.brand-title {
  color: #ffffff;
  font-size: 1.06rem;
}

.ghost-link,
.topbar-badge {
  min-height: 38px;
  border-radius: 8px;
}

.ghost-link {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
}

.ghost-link:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.topbar-badge {
  background: rgba(216, 144, 47, 0.16);
  color: #ffd89f;
}

.hero-card {
  margin-bottom: 12px;
  padding: 18px 20px;
  border-radius: 8px;
  border: 1px solid rgba(36, 95, 69, 0.18);
  background:
    linear-gradient(90deg, rgba(19, 39, 34, 0.96) 0%, rgba(24, 71, 68, 0.94) 58%, rgba(41, 92, 67, 0.94) 100%);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.08) 42% 43%, transparent 43% 100%),
    linear-gradient(90deg, rgba(216, 144, 47, 0.16), transparent 28%);
  pointer-events: none;
}

.hero-copy,
.hero-actions--stack {
  position: relative;
  z-index: 1;
}

.eyebrow {
  color: #9de0c3;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.hero-card h1 {
  max-width: none;
  color: #ffffff;
  font-size: clamp(1.55rem, 2vw, 2.3rem);
  line-height: 1.08;
}

.hero-copy .lead,
.lead {
  color: rgba(255, 255, 255, 0.74);
  max-width: 760px;
  font-size: 0.98rem;
}

.hero-actions--stack {
  flex-direction: row;
  align-items: center;
}

.hero-stat {
  min-width: 138px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

.hero-stat span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-stat strong {
  display: block;
  font-size: 0.98rem;
}

.hero-stat--warm {
  border-color: rgba(216, 144, 47, 0.36);
  background: rgba(216, 144, 47, 0.16);
}

.workspace--wide {
  grid-template-columns: minmax(760px, 1.75fr) minmax(360px, 0.62fr);
  gap: 12px;
}

.panel {
  border-radius: 8px;
  border: 1px solid rgba(36, 95, 69, 0.16);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.panel::before {
  display: none;
}

.panel-head {
  padding: 16px 18px 0;
}

.panel-kicker {
  color: var(--accent-2);
  letter-spacing: 0.12em;
}

.panel-head h2 {
  font-size: 1.12rem;
}

.panel-note {
  font-size: 0.82rem;
}

.map-canvas,
.map-canvas--wide {
  height: calc(100vh - 172px);
  min-height: 700px;
  margin: 14px;
  border-radius: 6px;
  border: 1px solid rgba(36, 95, 69, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.52);
}

.stations-panel,
.stations-panel--wide {
  height: calc(100vh - 172px);
  min-height: 700px;
}

.sticky-head {
  background: rgba(255, 255, 255, 0.96);
}

.feedback {
  margin: 14px 18px 0;
  border-radius: 8px;
  background: #eaf3ef;
  color: #33564b;
}

.selection-summary {
  padding: 14px 18px 0;
}

.selection-summary > div {
  border-radius: 8px;
  border-color: rgba(36, 95, 69, 0.16);
  background: #f7faf8;
}

.selection-summary strong {
  font-size: 1.25rem;
  color: var(--accent-2);
}

.stations-list {
  padding: 14px 18px 18px;
  gap: 10px;
}

.station-line-card {
  border-radius: 8px;
  border-color: rgba(36, 95, 69, 0.15);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(22, 38, 34, 0.07);
}

.station-line-card:hover {
  border-color: rgba(25, 124, 143, 0.34);
  box-shadow: var(--shadow-lift);
}

.station-line-main strong {
  font-size: 0.98rem;
}

.station-line-main span,
.station-line-meta {
  font-size: 0.84rem;
}

.line-action-btn,
.popup-detail-btn,
.download-btn,
.mode-btn {
  border-radius: 8px;
  font-weight: 800;
}

.line-action-btn,
.popup-detail-btn,
.download-btn,
.mode-btn.is-active {
  background: linear-gradient(135deg, #245f45, #197c8f);
}

.line-action-btn--secondary,
.popup-detail-btn--secondary,
.mode-btn {
  background: #f7faf8;
  color: var(--ink);
  border-color: rgba(36, 95, 69, 0.18);
}

.mode-btn:nth-child(3).is-active,
.line-action-btn--download {
  background: linear-gradient(135deg, #d8902f, #c65337);
}

.switch-card {
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(36, 95, 69, 0.18);
  box-shadow: 0 8px 22px rgba(22, 38, 34, 0.06);
}

.modal-card {
  border-radius: 8px;
  border-color: rgba(36, 95, 69, 0.18);
  background: #f7faf8;
}

.modal-panel,
.fact-card,
.variable-card,
.recent-chart-shell,
.recent-table-wrap {
  border-radius: 8px;
  border-color: rgba(36, 95, 69, 0.16);
}

.modal-close {
  border-radius: 8px;
}

.site-footer {
  margin-top: 14px;
}

.footer-inner {
  border-radius: 8px;
  border-color: rgba(36, 95, 69, 0.16);
  background: rgba(19, 39, 34, 0.95);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-soft);
}

.footer-title {
  color: #ffffff;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.66);
}

.footer-pill {
  border-radius: 8px;
  background: rgba(255,255,255,0.09);
  color: #bce6d2;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(22, 38, 34, 0.18);
}

@media (max-width: 1280px) {
  .workspace--wide {
    grid-template-columns: 1fr;
  }

  .map-canvas--wide,
  .stations-panel--wide,
  .map-canvas,
  .stations-panel {
    height: auto;
    min-height: 560px;
  }
}

@media (max-width: 720px) {
  .page-shell--wide {
    width: min(100% - 16px, 1880px);
  }

  .hero-card {
    padding: 16px;
  }

  .hero-actions--stack {
    width: 100%;
    align-items: stretch;
  }

  .hero-stat {
    min-width: 0;
    flex: 1;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Keep the explorer as a two-column workstation on desktop widths. */
@media (min-width: 1101px) {
  .workspace--wide {
    grid-template-columns: minmax(760px, 1.75fr) minmax(360px, 0.62fr);
  }

  .map-canvas--wide,
  .stations-panel--wide,
  .map-canvas,
  .stations-panel {
    height: calc(100vh - 172px);
    min-height: 700px;
  }
}

/* Weather home */
.home-page {
  min-height: 100vh;
  color: #f7fbf9;
  background: #101d1d;
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", "Trebuchet MS", sans-serif;
}

.home-page a {
  color: inherit;
}

.home-shell {
  min-height: 100vh;
  padding: 0 0 34px;
}

.home-nav {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1120px, 100%);
  margin: 0 auto 26px;
}

.home-brand {
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Ciel Ouvert brand system. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo img {
  display: block;
  width: 174px;
  max-width: 100%;
  height: auto;
}

.home-brand.brand-logo img { width: 182px; }
.lightviz-logo.brand-logo img,
.atmo-logo.brand-logo img { width: 150px; }

/* Shared site footer. */
.site-footer {
  margin-top: 52px;
  padding: 0 24px 24px;
  color: #b7cfca;
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) minmax(300px, 1fr) minmax(230px, 1fr);
  gap: 30px;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: 27px 0 0;
  border-top: 1px solid rgba(142, 227, 213, 0.22);
}

.site-footer__brand { display: inline-flex; width: 174px; }
.site-footer__brand img { display: block; width: 100%; height: auto; }
.site-footer p { margin: 12px 0 0; font-size: 0.78rem; line-height: 1.55; }
.site-footer__identity p { max-width: 360px; }
.site-footer__nav { display: flex; flex-wrap: wrap; align-content: start; gap: 10px 20px; padding-top: 5px; }
.site-footer__nav a { color: #dffaf5; font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.site-footer__nav a:hover { color: #8ee3d5; }
.site-footer__source { max-width: 330px; color: #9ab9b5; }

.lightviz-page .site-footer { grid-column: 2; margin-top: 0; padding-top: 30px; background: #0b1c22; }
.lightviz-page:not(.darkviz-page) .site-footer { background: #102426; }
.home-page .site-footer { margin-top: 0; padding-top: 30px; background: #101d1d; }
.docs-page .site-footer { padding-top: 30px; background: #102426; }
.sources-page .site-footer { margin-top: 0; padding-top: 30px; background: #0d2024; }
.terms-page .site-footer { margin-top: 0; padding-top: 30px; background: #0c1d21; }
.download-page .site-footer { margin-top: 0; padding-top: 30px; background: #102426; }
.viz-page .site-footer, .atmo-page .site-footer { padding-top: 30px; background: rgba(5, 20, 26, 0.74); }

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .site-footer__source { max-width: none; }
}

@media (max-width: 760px) {
  .lightviz-page .site-footer { grid-column: 1 / -1; }
  .site-footer { margin-top: 34px; padding: 0 20px 20px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 20px; padding-top: 22px; }
  .site-footer__nav { padding-top: 0; }
}

.home-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-nav-links a {
  text-decoration: none;
  color: rgba(247, 251, 249, 0.84);
}

.home-nav-links a:hover {
  color: #ffffff;
}

.home-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(90deg, rgba(10, 19, 19, 0.78) 0%, rgba(10, 19, 19, 0.56) 47%, rgba(10, 19, 19, 0.24) 100%),
    linear-gradient(180deg, rgba(16, 29, 29, 0.05) 0%, rgba(16, 29, 29, 0.78) 100%),
    linear-gradient(125deg, #526b70 0%, #9ab0b8 34%, #536f75 57%, #182828 100%);
  box-shadow: 0 26px 80px rgba(5, 12, 12, 0.34);
}

.home-weather-scene,
.home-weather-scene::before,
.home-weather-scene::after {
  position: absolute;
  inset: 0;
}

.home-weather-scene {
  pointer-events: none;
}

.home-weather-scene::before {
  content: "";
  background:
    radial-gradient(ellipse at 68% 18%, rgba(238, 249, 255, 0.76) 0 9%, transparent 28%),
    radial-gradient(ellipse at 38% 24%, rgba(63, 80, 83, 0.54) 0 16%, transparent 34%),
    radial-gradient(ellipse at 18% 32%, rgba(24, 45, 44, 0.44) 0 16%, transparent 32%),
    linear-gradient(180deg, rgba(231, 244, 247, 0.64) 0%, rgba(65, 93, 95, 0.12) 48%, transparent 100%);
  filter: saturate(0.9);
}

.home-weather-scene::after {
  content: "";
  top: auto;
  height: 44%;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(233, 242, 240, 0.18) 8% 8.5%, transparent 8.5% 100%),
    linear-gradient(90deg, transparent 0 30%, rgba(227, 238, 235, 0.14) 30% 30.35%, transparent 30.35% 100%),
    linear-gradient(180deg, rgba(27, 46, 42, 0.08) 0%, rgba(10, 20, 18, 0.82) 100%),
    linear-gradient(105deg, transparent 0 13%, rgba(31, 55, 50, 0.82) 13% 36%, transparent 36% 100%),
    linear-gradient(90deg, rgba(20, 38, 34, 0.9), rgba(29, 55, 52, 0.86));
  clip-path: polygon(0 32%, 22% 20%, 40% 34%, 56% 14%, 79% 32%, 100% 21%, 100% 100%, 0 100%);
}

.home-sky-band {
  position: absolute;
  left: -8%;
  width: 116%;
  height: 30%;
  border-radius: 50%;
  opacity: 0.72;
  filter: blur(18px);
}

.home-sky-band--one {
  top: 12%;
  background: rgba(238, 245, 245, 0.46);
  transform: rotate(-6deg);
}

.home-sky-band--two {
  top: 24%;
  background: rgba(34, 54, 56, 0.38);
  transform: rotate(5deg);
}

.home-rain-field {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image: repeating-linear-gradient(
    103deg,
    rgba(255, 255, 255, 0) 0 18px,
    rgba(255, 255, 255, 0.34) 19px,
    rgba(255, 255, 255, 0) 21px
  );
  background-size: 120px 120px;
  animation: homeRain 16s linear infinite;
}

.home-map-grid {
  position: absolute;
  right: -4%;
  bottom: 4%;
  width: 52%;
  height: 46%;
  opacity: 0.28;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.28) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(600px) rotateX(58deg) rotateZ(-7deg);
  transform-origin: bottom right;
}

.home-hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: clamp(78px, 12vh, 138px) clamp(28px, 5vw, 68px) 0;
}

.home-kicker {
  margin: 0 0 18px;
  color: rgba(247, 251, 249, 0.74);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.home-hero h1 {
  margin: 0;
  max-width: 760px;
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 5.95rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.home-lead {
  max-width: 620px;
  margin: 24px 0 0;
  color: rgba(247, 251, 249, 0.88);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.55;
}

.home-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.home-source-mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 11px;
  color: rgba(247, 251, 249, 0.72);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(2, 12, 17, 0.8);
  text-transform: uppercase;
}

.home-source-mark__logo {
  display: block;
  width: 56px;
  height: 43px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 5px;
  box-shadow: 0 5px 16px rgba(2, 12, 17, 0.28);
}

.home-source-mark__logo img {
  display: block;
  width: 56px;
  height: auto;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.home-btn:hover {
  transform: translateY(-2px);
}

.home-btn--primary {
  background: #0f5c5a;
  color: #ffffff;
  border: 1px solid #8ee3d5;
  box-shadow: 0 8px 22px rgba(4, 26, 26, 0.28);
}

.home-btn--primary:hover {
  background: #13736f;
  color: #ffffff;
}

/* Dark visual system for the CSV download journey. */
.download-page {
  color: #e9f4f1;
  background:
    radial-gradient(circle at 8% 0%, rgba(38, 128, 123, 0.28), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgba(77, 174, 161, 0.12), transparent 26rem),
    #102426;
}

.download-header { border-bottom: 1px solid rgba(181, 226, 218, 0.14); }
.download-header nav a { color: #9ab9b5; }
.download-header nav a:hover, .download-header nav a.is-current { color: #ffffff; }
.download-eyebrow, .section-number { color: #8ee3d5; }
.download-intro > p:last-child, .section-heading p { color: #b7cfca; }

.download-workspace {
  border-color: rgba(181, 226, 218, 0.18);
  background: rgba(17, 45, 47, 0.94);
  box-shadow: 0 28px 75px rgba(2, 13, 15, 0.38);
}

.download-steps {
  border-color: rgba(181, 226, 218, 0.14);
  background: rgba(7, 28, 31, 0.72);
}

.steps-title, .download-steps li, .steps-help { color: #9bb8b4; }
.download-steps li > span { border-color: #527b76; }
.download-steps li.is-active { color: #f3fbf9; }
.download-steps li.is-active > span { border-color: #26a99b; background: #17877d; }
.download-section { border-color: rgba(181, 226, 218, 0.14); }

.department-map-wrap { border-color: #38635f; background: #16383a; }
#downloadMap { background: linear-gradient(145deg, #1c4545, #102e32); }
.download-page .leaflet-control-zoom { border-color: #47746f; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.28); }
.download-page .leaflet-control-zoom a { border-color: #47746f; background: #17383a; color: #effbf8; }
.map-status { color: #b7cfca; background: rgba(7, 28, 31, 0.8); }
.station-picker { background: rgba(7, 28, 31, 0.62); }
.station-picker > label, .date-fields label { color: #a9c7c2; }
.station-picker select, .date-fields input { border-color: #426c67; background: #102b2e; color: #f2fbf9; color-scheme: dark; }
.station-details { color: #b7cfca; }
.station-details strong { color: #f2fbf9; }

.choice-card, .variable-card { border-color: #426c67; background: #102b2e; }
.choice-card:hover { border-color: #75aaa1; }
.choice-card.is-selected, .variable-card:has(input:checked) { border-color: #35b7a8; background: rgba(28, 105, 98, 0.34); box-shadow: inset 0 0 0 1px #35b7a8; }
.choice-card small, .variable-card small { color: #b2cbc6; }
.variable-card::before { border-color: #6e9992; }
.variable-card:has(input:checked)::before { border-color: #35b7a8; background: #35b7a8; box-shadow: inset 0 0 0 3px #163c3d; }

.download-submit { background: #0b2528; border-top: 1px solid rgba(181, 226, 218, 0.14); }
.download-submit .download-eyebrow, .format-choice small { color: #8ee3d5; }
.format-choice label:has(input:checked) span { border-color: #8ee3d5; background: #8ee3d5; color: #102426; }
.download-submit button { background: #8ee3d5; color: #102426; }
.download-submit button:hover:not(:disabled) { background: #b8f1e7; }

.home-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.42);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.home-bottom {
  position: absolute;
  z-index: 3;
  left: clamp(28px, 5vw, 68px);
  right: clamp(28px, 5vw, 68px);
  bottom: clamp(24px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(420px, 1fr);
  gap: 36px;
  align-items: end;
}

.home-summary {
  margin: 0;
  max-width: 520px;
  color: rgba(247, 251, 249, 0.8);
  font-size: 1rem;
  line-height: 1.45;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 34px);
}

.home-stats div {
  color: #ffffff;
}

.home-stats strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: 1;
  font-weight: 700;
}

.home-stats span {
  color: rgba(247, 251, 249, 0.74);
  font-size: 0.96rem;
}

.home-feature-strip {
  width: min(1120px, 100%);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.home-feature-strip article {
  min-height: 156px;
  padding: 24px;
  background: rgba(247, 251, 249, 0.08);
}

.home-feature-number {
  display: block;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 800;
}

.home-feature-strip h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1.08rem;
}

.home-feature-strip p {
  margin: 0;
  color: rgba(247, 251, 249, 0.72);
  line-height: 1.5;
}

.home-latest-story {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(310px, .78fr);
  width: min(1120px, 100%);
  min-height: 410px;
  margin: 22px auto 0;
  overflow: hidden;
  border: 1px solid rgba(142, 227, 213, .2);
  border-radius: 2px;
  background:
    radial-gradient(circle at 100% 0, rgba(42, 117, 112, .16), transparent 20rem),
    #0c2225;
  box-shadow: 0 24px 70px rgba(3, 13, 14, .2);
}

.home-latest-story__visual {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background: #d7d7d7;
}

.home-latest-story__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 72%, rgba(7, 24, 27, .32));
}

.home-latest-story__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .55s ease, filter .55s ease;
}

.home-latest-story__visual:hover img { transform: scale(1.018); filter: saturate(1.06); }

.home-latest-story__visual > span {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 99px;
  color: #fff;
  background: rgba(7, 28, 31, .82);
  backdrop-filter: blur(8px);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.home-latest-story__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4.5vw, 54px);
}

.home-latest-story__eyebrow {
  margin: 0;
  color: #ff8b58;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-latest-story__content h2 {
  margin: 16px 0 18px;
  color: #f3faf7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 4vw, 3.7rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}

.home-latest-story__content h2 em { color: #ff7137; font-weight: inherit; }
.home-latest-story__content > p:not(.home-latest-story__eyebrow) { margin: 0; color: #a9c1bd; font-size: .9rem; line-height: 1.65; }
.home-latest-story__meta { display: flex; gap: 18px; margin-top: 23px; color: #718f8c; font-size: .66rem; }
.home-latest-story__meta span + span::before { content: "·"; margin-right: 18px; color: #466661; }

.home-latest-story__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: 27px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(142, 227, 213, .45);
  color: #effaf7;
  font-size: .76rem;
  font-weight: 900;
  text-decoration: none;
}

.home-latest-story__link span { color: #8ee3d5; transition: transform .2s ease; }
.home-latest-story__link:hover { border-color: #8ee3d5; }
.home-latest-story__link:hover span { transform: translateX(4px); }

@keyframes homeRain {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 240px 360px;
  }
}

@media (max-width: 900px) {
  .home-shell {
    padding: 0 0 18px;
  }

  .home-nav {
    align-items: flex-start;
    margin-bottom: 18px;
  }

  .home-nav-links {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 0.72rem;
  }

  .home-hero {
    min-height: 760px;
  }

  .home-hero-content {
    padding: 68px 24px 0;
  }

  .home-bottom {
    left: 24px;
    right: 24px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .home-stats,
  .home-feature-strip {
    grid-template-columns: 1fr;
  }
}

/* Drought and rainfall-deficit analysis. */
.drought-main,
.department-drought-main { width: min(1320px, calc(100% - 70px)); padding: 48px 0 70px; }
.drought-header h1,
.department-drought-header h1 { max-width: 850px; font-size: clamp(3.4rem, 6vw, 6.8rem); line-height: .84; }
.drought-aside-note,
.department-drought-aside { margin-top: auto; padding: 18px; border: 1px solid rgba(151,186,192,.14); border-radius: 12px; background: linear-gradient(145deg, rgba(255,119,56,.09), rgba(13,35,42,.3)); }
.drought-aside-note span,
.department-drought-aside > span { color: #ff8750; font-size: .65rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.drought-aside-note p,
.department-drought-aside p { margin: 9px 0 0; color: #93a9af; font-size: .7rem; line-height: 1.55; }
.normal-side #droughtResults { display: grid; gap: 5px; max-height: 180px; margin-top: 8px; overflow: auto; }
.normal-side #droughtResults button { padding: 8px; border: 1px solid transparent; border-radius: 7px; background: #0c2027; color: #a7bbc1; cursor: pointer; font: inherit; text-align: left; }
.normal-side #droughtResults button:hover { border-color: #ff7738; background: rgba(255,119,56,.09); }
.normal-side #droughtResults button strong,
.normal-side #droughtResults button small { display: block; }
.normal-side #droughtResults button strong { color: #eaf5f6; font-size: .72rem; }
.normal-side #droughtResults button small,
.normal-side #droughtResults > span { margin-top: 3px; color: #78939c; font-size: .62rem; }
.department-drought-aside .lightviz-open-map { margin-top: 16px; }
.drought-toolbar,
.department-drought-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto 190px auto; align-items: end; gap: 20px; margin-bottom: 14px; padding: 22px 24px; }
.department-drought-toolbar { grid-template-columns: minmax(0, 1fr) auto 230px 140px; }
.department-drought-toolbar > div:first-child { position: relative; z-index: 2; min-width: 250px; }
.drought-period-switch { align-self: end; margin-bottom: 1px; }
.drought-toolbar h2,
.department-drought-toolbar h2 { margin: 2px 0 0; color: #f1f6f6; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; font-weight: 500; white-space: normal; }
.drought-toolbar p,
.department-drought-toolbar p { margin: 7px 0 0; color: #91a7ae; font-size: .7rem; }
.drought-toolbar label,
.department-drought-toolbar label { display: grid; gap: 7px; color: #8fa7ae; font-size: .65rem; font-weight: 800; }
.drought-toolbar select,
.department-drought-toolbar select { width: 100%; padding: 11px 12px; border: 1px solid rgba(152,187,194,.18); border-radius: 9px; outline: 0; background: #0c2027; color: #e7f1f2; font: inherit; }
.drought-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
.drought-metric { position: relative; overflow: hidden; }
.drought-metric::after { position: absolute; right: -18px; bottom: -28px; width: 90px; height: 90px; border: 1px solid rgba(142,182,190,.1); border-radius: 50%; content: ""; }
.drought-metric strong { font-size: clamp(1.7rem, 2.3vw, 2.7rem); }
.drought-metric.is-dry strong,
.department-drought-table-panel td.is-dry { color: #ff7738; }
.drought-metric.is-wet strong,
.department-drought-table-panel td.is-wet { color: #45b8c7; }
.drought-cumulative-panel,
.department-drought-monthly-panel { margin-bottom: 14px; padding: 24px; }
.drought-large-chart { height: 390px; }
.drought-medium-chart { height: 330px; }
.drought-chart-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.drought-status { display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid rgba(155,190,197,.17); border-radius: 999px; color: #a8bcc1; font-size: .65rem; font-weight: 900; }
.drought-status.is-dry { border-color: rgba(255,119,56,.32); background: rgba(255,119,56,.08); color: #ff8b57; }
.drought-status.is-wet { border-color: rgba(69,184,199,.32); background: rgba(69,184,199,.08); color: #63c8d4; }
.drought-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.drought-chart-grid > .normal-panel { min-width: 0; padding: 22px; }
.drought-calendar-panel { margin-bottom: 14px; padding: 24px; overflow: hidden; }
.drought-calendar-chart { height: 210px; }
.drought-bottom-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.drought-bottom-grid > .normal-panel { padding: 22px; }
.drought-spells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-top: 18px; }
.drought-spells article { display: flex; gap: 10px; min-width: 0; padding: 13px; border: 1px solid rgba(145,184,192,.13); border-radius: 9px; background: rgba(9,28,34,.45); }
.drought-spells article > span { color: #ff7738; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.drought-spells strong { color: #edf5f5; font-size: .86rem; }
.drought-spells p { margin: 5px 0 0; color: #8fa6ad; font-size: .62rem; line-height: 1.4; }
.drought-records { display: grid; gap: 9px; margin-top: 18px; }
.drought-records article { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 14px; padding: 13px 14px; border: 1px solid rgba(145,184,192,.13); border-radius: 9px; background: rgba(9,28,34,.45); }
.drought-records article span { color: #9cb0b6; font-size: .67rem; }
.drought-records article strong { grid-row: span 2; color: #f0f5f5; font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; font-weight: 500; }
.drought-records article small { color: #7fb4c2; font-size: .68rem; }
.department-drought-overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .6fr); gap: 14px; margin-bottom: 14px; }
.department-drought-map-panel,
.department-drought-contrast { min-width: 0; padding: 22px; }
#departmentDroughtMap { height: 510px; margin-top: 15px; overflow: hidden; border: 1px solid rgba(145,184,192,.14); border-radius: 11px; background: #091a20; }
.department-drought-contrast > div:first-child h2 { margin: 4px 0 0; color: #eef5f5; font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 500; }
#departmentDroughtContrasts { display: grid; gap: 11px; margin-top: 22px; }
#departmentDroughtContrasts article { display: flex; gap: 13px; padding: 15px; border: 1px solid rgba(145,184,192,.13); border-radius: 10px; background: linear-gradient(135deg, rgba(16,43,51,.8), rgba(9,27,33,.8)); }
#departmentDroughtContrasts article > span { color: #ff7738; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; }
#departmentDroughtContrasts p { margin: 0 0 7px; color: #8fa6ad; font-size: .63rem; text-transform: uppercase; }
#departmentDroughtContrasts strong { display: block; color: #eef5f5; font-size: .82rem; }
#departmentDroughtContrasts small { display: block; margin-top: 5px; color: #61c1ce; font-size: .72rem; }
.department-drought-table-panel { margin-top: 14px; padding: 22px; }
.department-drought-table-panel td a { color: inherit; text-decoration: none; }
.department-drought-table-panel td a strong,
.department-drought-table-panel td a small { display: block; }
.department-drought-table-panel td a small { margin-top: 3px; color: #7f989f; font-size: .6rem; }
#departmentDroughtPickerMap { height: min(66vh, 620px); margin: 0 22px 22px; overflow: hidden; border: 1px solid rgba(145,184,192,.16); border-radius: 12px; background: #0a1b21; }
@media (max-width: 1120px) {
  .drought-metrics { grid-template-columns: 1fr 1fr; }
  .drought-spells { grid-template-columns: repeat(3, 1fr); }
  .department-drought-overview { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .drought-main, .department-drought-main { width: min(100% - 32px, 1320px); padding-top: 30px; }
  .drought-toolbar, .department-drought-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  .drought-chart-grid, .drought-bottom-grid { grid-template-columns: 1fr; }
  .drought-calendar-chart { min-width: 850px; }
  .drought-calendar-panel { overflow-x: auto; }
  .drought-spells { grid-template-columns: 1fr 1fr; }
  #departmentDroughtMap { height: 410px; }
}
@media (max-width: 560px) {
  .drought-metrics, .drought-spells { grid-template-columns: 1fr; }
  .drought-large-chart, .drought-medium-chart { height: 300px; }
  #departmentDroughtPickerMap { height: 62vh; margin: 0 12px 12px; }
}

/* Dark analysis journey and reusable period controls. */
.analysis-hub-page { background: radial-gradient(circle at 72% 0%, rgba(35,76,84,.26), transparent 38rem), linear-gradient(135deg,#071217,#0d1d23 55%,#10252a); }
.analysis-hub-page .analysis-hub-header h1,
.analysis-hub-page .analysis-stage-head h2 { color:#f2f6f6; }
.analysis-hub-page .analysis-hub-header > p { color:#a6bac0; }
.analysis-hub-page .analysis-stage { border-color:rgba(145,184,192,.14); background:linear-gradient(145deg,rgba(18,37,44,.96),rgba(10,27,33,.96)); box-shadow:0 18px 42px rgba(0,0,0,.2); }
.analysis-hub-page .analysis-theme-card,
.analysis-hub-page .analysis-path-card,
.analysis-hub-page .analysis-period-card { border-color:rgba(147,185,192,.15); background:#0d2027; color:#eaf3f4; }
.analysis-hub-page .analysis-theme-card:hover,
.analysis-hub-page .analysis-path-card:hover,
.analysis-hub-page .analysis-period-card:hover { border-color:rgba(255,103,32,.65); box-shadow:0 12px 25px rgba(0,0,0,.2); }
.analysis-hub-page .analysis-theme-card.is-selected,
.analysis-hub-page .analysis-path-card.is-selected,
.analysis-hub-page .analysis-period-card.is-selected { border-color:#ff6720; background:linear-gradient(135deg,rgba(255,103,32,.15),#10252c); box-shadow:inset 3px 0 #ff6720; }
.analysis-hub-page .analysis-theme-icon,
.analysis-hub-page .analysis-path-icon { background:#152d35; color:#9ec0ca; }
.analysis-hub-page .analysis-theme-card.is-selected .analysis-theme-icon { background:rgba(255,103,32,.16); color:#ff8249; }
.analysis-hub-page .analysis-theme-copy em,
.analysis-hub-page .analysis-path-card em,
.analysis-hub-page .analysis-period-card em { color:#91a8af; }
.analysis-hub-page .analysis-hub-aside-note { border-color:rgba(145,184,192,.14); background:#0d2027; }
.analysis-hub-page .analysis-hub-aside-note p { color:#91a8af; }
.analysis-hub-page .analysis-hub-footer { border:1px solid rgba(145,184,192,.14); background:linear-gradient(90deg,#0a1b21,#162d34); }
.analysis-period-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.analysis-period-grid.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analysis-period-card { display:grid; gap:8px; min-height:105px; padding:18px; border:1px solid #e1e7e7; border-radius:13px; background:#fff; color:#153244; cursor:pointer; font:inherit; text-align:left; transition:.18s ease; }
.analysis-period-card strong { font-size:.88rem; }
.analysis-period-card em { color:#708591; font-size:.7rem; font-style:normal; line-height:1.45; }
.analysis-period-stage.is-muted { opacity:.58; }
.analysis-season-fields { display:flex; align-items:end; gap:12px; margin-top:16px; padding:15px; border:1px solid rgba(146,184,191,.14); border-radius:12px; background:rgba(7,23,29,.55); }
.analysis-season-fields label,
.analysis-season-controls label { display:grid; gap:6px; color:#9db1b7; font-size:.65rem; font-weight:800; }
.analysis-season-fields select,
.analysis-season-controls select { min-width:135px; padding:9px 30px 9px 10px; border:1px solid rgba(151,190,197,.2); border-radius:8px; background:#0b1c22; color:#edf5f6; font:inherit; }
.analysis-season-fields p { margin:0 0 8px; color:#8fa7ae; font-size:.7rem; }
.is-hidden { display:none !important; }
.analysis-period-toolbar { display:flex; align-items:center; gap:18px; margin-top:26px; padding:17px 20px; }
.analysis-period-toolbar > div:first-child { margin-right:auto; }
.analysis-period-toolbar h2 { margin-top:4px; }
.analysis-period-switch { flex:0 0 auto; }
.analysis-season-controls { display:flex; align-items:end; gap:8px; }
.department-toolbar .department-period-control { display:grid; gap:7px; }
@media (max-width:900px) {
  .analysis-period-toolbar { align-items:flex-start; flex-wrap:wrap; }
  .analysis-period-toolbar > div:first-child { width:100%; }
}
@media (max-width:680px) {
  .analysis-period-grid,
  .analysis-period-grid.is-compact { grid-template-columns:1fr; }
  .analysis-season-fields,
  .analysis-season-controls { align-items:stretch; flex-direction:column; }
  .analysis-period-toolbar { align-items:stretch; flex-direction:column; }
}

/* Monthly climate report. */
.normal-side #monthlyReportResults { display:grid; gap:5px; max-height:180px; margin-top:8px; overflow:auto; }
.normal-side #monthlyReportResults button { padding:8px; border:1px solid transparent; border-radius:7px; background:#0c2027; color:#a7bbc1; cursor:pointer; font:inherit; text-align:left; }
.normal-side #monthlyReportResults button strong,
.normal-side #monthlyReportResults button small { display:block; }
.normal-side #monthlyReportResults button strong { color:#eaf5f6; font-size:.72rem; }
.normal-side #monthlyReportResults button small,
.normal-side #monthlyReportResults > span { margin-top:3px; color:#78939c; font-size:.62rem; }
.monthly-report-toolbar { display:flex; align-items:center; gap:22px; margin-top:27px; padding:18px 21px; }
.monthly-report-toolbar > div:first-child { margin-right:auto; }
.monthly-report-toolbar h2 { margin-top:4px; font-size:1.3rem; text-transform:capitalize; }
.monthly-report-toolbar label { display:grid; gap:7px; color:#9db1b7; font-size:.65rem; font-weight:900; }
.monthly-report-toolbar input { min-width:170px; padding:10px 12px; border:1px solid rgba(151,190,197,.2); border-radius:9px; background:#0a1b21; color:#eaf4f5; color-scheme:dark; font:inherit; }
.monthly-report-toolbar > p { max-width:190px; margin:0; color:#8fa7ae; font-size:.68rem; line-height:1.45; }
.monthly-period-open { display:flex; align-items:center; gap:12px; min-width:220px; padding:10px 13px; border:1px solid rgba(151,190,197,.22); border-radius:10px; background:#0a1b21; color:#edf6f5; cursor:pointer; font:inherit; text-align:left; transition:border-color .16s ease, background .16s ease, transform .16s ease; }
.monthly-period-open:hover:not(:disabled) { transform:translateY(-1px); border-color:#ff6720; background:#10272e; }
.monthly-period-open:disabled { cursor:not-allowed; opacity:.45; }
.monthly-period-open > span:nth-child(2) { display:grid; gap:3px; flex:1; }
.monthly-period-open small { color:#819ba2; font-size:.58rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.monthly-period-open strong { color:#eef6f5; font-size:.75rem; text-transform:capitalize; }
.monthly-period-open > b { color:#ff7b3d; font-size:1rem; }
.monthly-period-icon { display:grid; width:30px; height:30px; place-items:center; border-radius:8px; background:rgba(255,103,32,.14); color:#ff7b3d; font-size:1.05rem; }
.monthly-period-modal { position:fixed; z-index:1400; inset:0; display:none; place-items:center; padding:24px; background:rgba(2,10,14,.72); backdrop-filter:blur(9px); }
.monthly-period-modal.is-open { display:grid; }
.monthly-period-modal-open { overflow:hidden; }
.monthly-period-dialog { width:min(650px, 100%); overflow:hidden; border:1px solid rgba(151,190,197,.2); border-radius:18px; background:linear-gradient(145deg,#11272e,#08191f); box-shadow:0 30px 90px rgba(0,0,0,.48); }
.monthly-period-dialog > header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 26px 18px; border-bottom:1px solid rgba(151,190,197,.13); }
.monthly-period-dialog > header h2 { margin:3px 0 0; color:#f0f7f6; font-family:Georgia,"Times New Roman",serif; font-size:1.8rem; font-weight:500; letter-spacing:-.04em; }
.monthly-period-dialog > header button { display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(151,190,197,.2); border-radius:50%; background:#10272e; color:#dfecee; cursor:pointer; font-size:1.4rem; }
.monthly-year-nav { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:12px; padding:18px 26px 10px; }
.monthly-year-nav strong { color:#f4f8f7; font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-weight:500; text-align:center; }
.monthly-year-nav button { height:38px; border:1px solid rgba(151,190,197,.18); border-radius:9px; background:#0b2027; color:#dce9eb; cursor:pointer; font-size:1rem; }
.monthly-year-nav button:hover:not(:disabled) { border-color:#ff6720; color:#ff8a50; }
.monthly-year-nav button:disabled { cursor:not-allowed; opacity:.28; }
.monthly-picker-months { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:12px 26px 24px; }
.monthly-picker-months button { display:grid; gap:7px; min-height:72px; padding:11px; border:1px solid rgba(151,190,197,.14); border-radius:10px; background:#0b2027; color:#dce9eb; cursor:pointer; font:inherit; text-align:left; transition:border-color .15s ease, background .15s ease, transform .15s ease; }
.monthly-picker-months button:hover:not(:disabled) { transform:translateY(-2px); border-color:#ff6720; background:#132b32; }
.monthly-picker-months button span { color:#68858d; font-size:.58rem; font-weight:900; }
.monthly-picker-months button strong { font-size:.72rem; font-weight:850; text-transform:capitalize; }
.monthly-picker-months button.is-selected { border-color:#ff6720; background:rgba(255,103,32,.17); box-shadow:inset 0 0 0 1px #ff6720; color:#fff; }
.monthly-picker-months button.is-selected span { color:#ff9b6b; }
.monthly-picker-months button:disabled { cursor:not-allowed; opacity:.22; }
.monthly-period-dialog > footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 26px 20px; border-top:1px solid rgba(151,190,197,.13); background:rgba(4,18,23,.5); }
.monthly-period-dialog > footer p { max-width:340px; margin:0; color:#829ca3; font-size:.65rem; line-height:1.45; text-transform:capitalize; }
.monthly-period-dialog > footer button { flex:0 0 auto; padding:9px 12px; border:1px solid rgba(255,103,32,.5); border-radius:8px; background:rgba(255,103,32,.1); color:#ff9562; cursor:pointer; font:inherit; font-size:.66rem; font-weight:900; }
.monthly-report-metrics { margin-top:14px; }
.monthly-report-metric small,
.monthly-report-metric em { line-height:1.35; }
.monthly-report-chart-panel { min-height:415px; }
.monthly-report-main-chart { height:330px; margin-top:10px; }
.monthly-history-panel { margin-top:14px; }
.monthly-history-chart { height:390px; margin-top:10px; }
.monthly-report-lower-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(270px,.65fr); gap:14px; margin-top:14px; }
.monthly-decades-table-panel td strong,
.monthly-decades-table-panel td small { display:block; }
.monthly-decades-table-panel td small { margin-top:4px; color:#8fa8af; font-size:.62rem; }
.monthly-decades-table-panel td small.is-positive { color:#ff8150; }
.monthly-decades-table-panel td small.is-negative { color:#80b8df; }
.monthly-extremes-list { display:grid; gap:0; margin-top:14px; }
.monthly-extremes-list article { display:grid; grid-template-columns:34px 1fr; gap:11px; padding:13px 0; border-top:1px solid rgba(145,184,192,.11); }
.monthly-extremes-list article > span { display:grid; width:29px; height:29px; place-items:center; border:1px solid rgba(255,103,32,.45); border-radius:50%; color:#ff7b3d; font-size:.61rem; font-weight:900; }
.monthly-extremes-list p,
.monthly-extremes-list strong,
.monthly-extremes-list small { display:block; margin:0; }
.monthly-extremes-list p { color:#9fb2b8; font-size:.68rem; }
.monthly-extremes-list strong { margin-top:5px; color:#eef5f5; font-size:1.1rem; }
.monthly-extremes-list small { margin-top:3px; color:#ff8a52; font-size:.68rem; }
.monthly-absolute-records { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:8px; }
.monthly-absolute-record { padding:9px 10px; border:1px solid rgba(145,184,192,.14); border-radius:8px; background:rgba(5,20,26,.38); }
.monthly-absolute-record span,
.monthly-absolute-record strong,
.monthly-absolute-record small { display:block; margin:0; }
.monthly-absolute-record span { color:#9fb2b8; font-size:.68rem; }
.monthly-absolute-record strong { margin-top:4px; color:#eef5f5; font-size:1.12rem; line-height:1.1; }
.monthly-absolute-record small { margin-top:4px; color:#ff8a52; font-size:.67rem; }
.monthly-daily-panel { margin-top:14px; }
.monthly-daily-table-wrap { max-height:520px; overflow:auto; }
.monthly-daily-table-wrap thead { position:sticky; z-index:2; top:0; background:#10242b; }
.analysis-theme-icon--monthly { color:#7fa9bc; }
@media (max-width:1050px) {
  .monthly-report-lower-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .monthly-report-toolbar { align-items:stretch; flex-direction:column; }
  .monthly-report-toolbar > div:first-child { margin-right:0; }
  .monthly-report-toolbar input { width:100%; box-sizing:border-box; }
  .monthly-period-open { width:100%; box-sizing:border-box; }
  .monthly-period-modal { padding:12px; }
  .monthly-picker-months { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:52vh; overflow-y:auto; }
  .monthly-period-dialog > footer { align-items:stretch; flex-direction:column; }
  .monthly-period-dialog > footer button { width:100%; }
  .monthly-report-main-chart { height:290px; }
  .monthly-history-chart { height:350px; }
}

/* Department monthly report. */
.department-monthly-main { max-width:1380px; }
.department-monthly-aside { display:grid; gap:10px; margin:auto 8px 0; padding:16px; border:1px solid rgba(145,184,192,.14); border-radius:12px; background:linear-gradient(145deg,rgba(255,103,32,.09),rgba(12,34,41,.72)); }
.department-monthly-aside > span { color:#ff8a53; font-size:.61rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.department-monthly-aside p { margin:0; color:#8fa8af; font-size:.68rem; line-height:1.5; }
.department-monthly-toolbar { display:flex; align-items:end; gap:20px; margin-top:27px; padding:18px 21px; }
.department-monthly-toolbar > div:first-child { margin-right:auto; }
.department-monthly-toolbar h2 { margin-top:4px; font-size:1.3rem; text-transform:capitalize; }
.department-monthly-toolbar label { display:grid; gap:7px; min-width:190px; color:#9db1b7; font-size:.62rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.department-monthly-toolbar select,
.department-monthly-toolbar input { width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid rgba(151,190,197,.2); border-radius:9px; outline:none; background:#0a1b21; color:#eaf4f5; color-scheme:dark; font:inherit; }
.department-monthly-toolbar select:focus,
.department-monthly-toolbar input:focus { border-color:#ff6720; }
.department-monthly-toolbar > p { max-width:210px; margin:0 0 4px; color:#8fa7ae; font-size:.68rem; line-height:1.45; }
.department-monthly-metrics { margin-top:14px; }
.department-monthly-metrics .normal-metric small { margin-top:2px; color:#d8e5e7; font-size:.82rem; font-weight:850; line-height:1.3; }
.department-monthly-overview { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(320px,.72fr); gap:14px; }
.department-monthly-map-panel { min-width:0; }
#departmentMonthlyMap { height:535px; margin-top:16px; overflow:hidden; border:1px solid rgba(145,184,192,.14); border-radius:12px; background:radial-gradient(circle at 50% 45%,#17323a,#07161c 72%); }
.department-monthly-map-panel .leaflet-control-zoom a { border-color:#203942; background:#0b2027; color:#d8e7e9; }
.department-monthly-map-panel .leaflet-control-zoom a:hover { background:#173039; color:#ff8a53; }
.department-monthly-map-panel .leaflet-popup-content-wrapper,
.department-monthly-map-panel .leaflet-popup-tip { background:#0b2027; color:#c8d8dc; }
.department-monthly-map-panel .leaflet-popup-content { line-height:1.65; }
.department-monthly-map-panel .leaflet-popup-content strong { color:#fff; }
.department-monthly-map-panel .leaflet-popup-content a { color:#ff8750; font-weight:900; }
.department-monthly-podiums { min-width:0; }
.department-monthly-podiums section { margin-top:18px; padding-top:16px; border-top:1px solid rgba(145,184,192,.12); }
.department-monthly-podiums h3 { margin:0 0 6px; color:#91a8af; font-size:.62rem; letter-spacing:.07em; line-height:1.35; text-transform:uppercase; }
.department-monthly-podiums section > div { display:grid; }
.department-monthly-podiums a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 2px; border-bottom:1px solid rgba(145,184,192,.08); color:inherit; text-decoration:none; }
.department-monthly-podiums a > span { display:flex; align-items:center; min-width:0; gap:9px; }
.department-monthly-podiums a b { display:grid; flex:0 0 25px; width:25px; height:25px; place-items:center; border:1px solid rgba(255,103,32,.42); border-radius:50%; color:#ff8650; font-size:.55rem; }
.department-monthly-podiums a span span { min-width:0; }
.department-monthly-podiums a strong,
.department-monthly-podiums a small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.department-monthly-podiums a strong { color:#edf5f5; font-size:.7rem; }
.department-monthly-podiums a small { margin-top:3px; color:#718d95; font-size:.56rem; }
.department-monthly-podiums a em { flex:0 0 auto; color:#ff8a52; font-size:.78rem; font-style:normal; font-weight:900; }
.department-monthly-podiums a:hover strong { color:#ff9a70; }
.department-monthly-decadal-panel { min-height:410px; margin-top:14px; }
.department-monthly-decadal-chart { height:330px; margin-top:10px; }
.department-monthly-lower-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:14px; margin-top:14px; }
.department-monthly-station-chart { height:430px; margin-top:12px; }
.department-monthly-table-panel { min-width:0; }
.department-monthly-table-panel .normal-table-wrap { max-height:430px; overflow:auto; }
.department-monthly-table-panel th { position:sticky; z-index:1; top:0; background:#10242b; }
.department-monthly-table-panel td:first-child a { color:#eef5f5; text-decoration:none; }
.department-monthly-table-panel td:first-child strong,
.department-monthly-table-panel td:first-child small { display:block; }
.department-monthly-table-panel td:first-child small { margin-top:3px; color:#718d95; font-size:.56rem; }
.department-monthly-table-panel td:first-child a:hover strong { color:#ff8a52; }
.department-monthly-picker-dialog { max-width:820px; }
#departmentMonthlyPickerMap { height:min(66vh,620px); margin:0 22px 22px; overflow:hidden; border:1px solid rgba(145,184,192,.16); border-radius:12px; background:#0a1b21; }
@media (max-width:1100px) {
  .department-monthly-toolbar { align-items:stretch; flex-wrap:wrap; }
  .department-monthly-toolbar > div:first-child { width:100%; }
  .department-monthly-overview,
  .department-monthly-lower-grid { grid-template-columns:1fr; }
  .department-monthly-podiums section > div { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .department-monthly-podiums a { align-items:flex-start; flex-direction:column; border:1px solid rgba(145,184,192,.1); border-radius:9px; padding:10px; }
}
@media (max-width:680px) {
  .department-monthly-toolbar { flex-direction:column; }
  .department-monthly-toolbar label { width:100%; min-width:0; }
  .department-monthly-toolbar > p { max-width:none; }
  #departmentMonthlyMap { height:410px; }
  .department-monthly-podiums section > div { grid-template-columns:1fr; }
  .department-monthly-podiums a { align-items:center; flex-direction:row; }
  .department-monthly-decadal-chart { height:300px; }
  .department-monthly-station-chart { height:390px; }
  #departmentMonthlyPickerMap { height:62vh; margin:0 12px 12px; }
}

.normal-month-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:238px; gap:6px; }.normal-month-choices button { padding:7px 5px; border:1px solid rgba(151,190,197,.18); border-radius:999px; background:#0a1b21; color:#9fb2b8; cursor:pointer; font:inherit; font-size:.61rem; font-weight:900; text-align:center; white-space:nowrap; }.normal-month-choices button.is-active { border-color:#ff6720; background:rgba(255,103,32,.16); color:#ff986b; }.normal-history-chart { height:230px; margin-top:12px; }.normal-history-panel > p { margin:10px 0 0; padding:10px 12px; border-left:2px solid #ff6720; border-radius:0 8px 8px 0; background:rgba(255,103,32,.07); color:#d2e0e1; font-size:.79rem; font-weight:650; line-height:1.55; }
.normal-right-stack { display:grid; gap:14px; min-width:0; }.normal-records-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:17px; }.normal-records-list article { display:grid; grid-template-columns:26px 1fr; gap:9px; padding:10px 0; border-top:1px solid rgba(145,184,192,.1); }.normal-record-icon { width:20px; height:20px; margin-top:3px; border:2px solid #ff6b21; border-radius:50%; }.normal-record-icon--cold { border-color:#72b3d4; transform:rotate(45deg); border-radius:5px; }.normal-record-icon--rain { border-color:#72b3d4; border-radius:50% 50% 58% 58%; transform:rotate(45deg) scale(.78); }.normal-record-icon--wind { border-width:0; border-top:2px solid #b7c9cd; border-bottom:2px solid #b7c9cd; border-radius:0; height:13px; }.normal-records-list p,.normal-records-list small { margin:0; color:#9cb1b8; font-size:.62rem; }.normal-records-list strong { display:block; margin:3px 0; color:#f3f7f6; font-size:1.02rem; letter-spacing:-.04em; }.normal-records-empty { margin:16px 0 0; color:#8fa8af; font-size:.7rem; }
@media (max-width:680px) { .normal-records-list { grid-template-columns:1fr; } }

.lightviz-mid-grid--single { grid-template-columns: minmax(0, 1fr); }
.normal-main { width: min(1260px, calc(100% - 76px)); margin: 0 auto; padding: 46px 0 38px; }.normal-header { display:flex; align-items:end; justify-content:space-between; gap:28px; }.normal-header h1 { margin:0; color:#f2f5f4; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.2rem,6vw,5.8rem); font-weight:500; letter-spacing:-.07em; line-height:.9; }.normal-header > div > p:last-child { max-width:650px; margin:18px 0 0; color:#aebdc2; font-size:.96rem; line-height:1.55; }.normal-back { padding:11px 14px; border:1px solid rgba(155,190,197,.25); border-radius:9px; color:#dcebed; font-size:.72rem; font-weight:900; text-decoration:none; white-space:nowrap; }.normal-back:hover { border-color:#ff6720; color:#ff9162; }.normal-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:30px 0 14px; }.normal-metric,.normal-panel { border:1px solid rgba(139,179,187,.13); border-radius:15px; background:linear-gradient(145deg,#12252c,#0b1a20); box-shadow:0 15px 38px rgba(0,0,0,.18); }.normal-metric { display:grid; gap:7px; min-height:105px; padding:17px; box-sizing:border-box; }.normal-metric > span { color:#aebfc4; font-size:.67rem; font-weight:800; }.normal-metric strong { color:#f1f6f6; font-size:1.55rem; letter-spacing:-.06em; }.normal-metric strong.is-positive,.normal-table-wrap .is-positive { color:#ff7b3d; }.normal-metric strong.is-negative,.normal-table-wrap .is-negative { color:#79b8d6; }.normal-metric small,.normal-metric em { color:#8fa8af; font-size:.66rem; font-style:normal; }.normal-metric em { margin-top:auto; }.normal-metric--reference strong { font-size:1.25rem; letter-spacing:-.04em; }.normal-panel { padding:21px; }.normal-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }.normal-panel h2 { margin:0; color:#f2f7f7; font-size:1.1rem; letter-spacing:-.04em; }.normal-reference { margin:6px 0 0; color:#8fa8af; font-size:.68rem; }.normal-controls { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.normal-switch { display:flex; padding:3px; border:1px solid rgba(151,190,197,.17); border-radius:999px; background:#0a1b21; }.normal-switch button { padding:7px 9px; border:0; border-radius:999px; background:transparent; color:#91a9b0; cursor:pointer; font:inherit; font-size:.64rem; font-weight:900; }.normal-switch button.is-active { background:#ff6720; color:#fff; }.normal-chart-panel { min-height:370px; }.normal-deviation-chart { height:295px; margin-top:12px; }.normal-chart-note,.normal-daily-panel > p { margin:4px 0 0; color:#8fa8af; font-size:.67rem; line-height:1.45; }.normal-lower-grid { display:grid; grid-template-columns:1.45fr .95fr; gap:14px; margin-top:14px; }.normal-table-wrap { margin-top:17px; overflow-x:auto; }.normal-table-wrap table { width:100%; border-collapse:collapse; }.normal-table-wrap th { padding:0 8px 9px; color:#8ea7ae; font-size:.6rem; letter-spacing:.08em; text-align:right; text-transform:uppercase; }.normal-table-wrap td { padding:10px 8px; border-top:1px solid rgba(145,184,192,.1); color:#bbcbcf; font-size:.72rem; text-align:right; }.normal-table-wrap th:first-child,.normal-table-wrap td:first-child { color:#f1f6f6; font-weight:800; text-align:left; }.normal-daily-chart { height:230px; margin-top:12px; }.normal-side #normalResults { display:grid; gap:5px; max-height:180px; margin-top:8px; overflow:auto; }.normal-side #normalResults button { padding:8px; border:1px solid transparent; border-radius:7px; background:#0c2027; color:#a7bbc1; cursor:pointer; font:inherit; text-align:left; }.normal-side #normalResults button strong,.normal-side #normalResults button small { display:block; }.normal-side #normalResults button strong { color:#eaf5f6; font-size:.72rem; }.normal-side #normalResults button small,.normal-side #normalResults > span { margin-top:3px; color:#78939c; font-size:.62rem; }.normal-side #normalResults button.is-selected { border-color:#ff6720; background:rgba(255,103,32,.1); }
@media (max-width:1050px) { .normal-main { width:min(100% - 48px,1260px); }.normal-header { align-items:flex-start; flex-direction:column; }.normal-metrics { grid-template-columns:1fr 1fr; }.normal-lower-grid { grid-template-columns:1fr; } }
@media (max-width:680px) { .normal-main { width:min(100% - 32px,1260px); padding-top:28px; }.normal-header { gap:18px; }.normal-back { order:-1; }.normal-metrics { grid-template-columns:1fr; }.normal-panel { padding:17px; }.normal-panel-head { align-items:flex-start; flex-direction:column; }.normal-controls { justify-content:flex-start; }.normal-deviation-chart { height:270px; } }

/* Long-term climate evolution. */
.climate-main { max-width:1380px; }
.normal-side #climateResults { display:grid; gap:5px; max-height:180px; margin-top:8px; overflow:auto; }
.normal-side #climateResults button { padding:8px; border:1px solid transparent; border-radius:7px; background:#0c2027; color:#a7bbc1; cursor:pointer; font:inherit; text-align:left; }
.normal-side #climateResults button strong,
.normal-side #climateResults button small { display:block; }
.normal-side #climateResults button strong { color:#eaf5f6; font-size:.72rem; }
.normal-side #climateResults button small,
.normal-side #climateResults > span { margin-top:3px; color:#78939c; font-size:.62rem; }
.climate-aside-note { margin:auto 8px 0; padding:15px; border:1px solid rgba(145,184,192,.14); border-radius:12px; background:linear-gradient(145deg,rgba(255,103,32,.08),rgba(12,34,41,.72)); }
.climate-aside-note span { color:#ff8a53; font-size:.61rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.climate-aside-note p { margin:7px 0 0; color:#8fa8af; font-size:.68rem; line-height:1.5; }
.climate-context { display:flex; align-items:center; gap:24px; margin-top:28px; padding:17px 20px; }
.climate-context > div { margin-right:auto; }
.climate-context h2 { margin-top:4px; text-transform:capitalize; }
.climate-context > p { max-width:460px; margin:0; color:#9db1b7; font-size:.72rem; line-height:1.5; }
.climate-context > span { flex:0 0 auto; padding:8px 11px; border:1px solid rgba(151,190,197,.18); border-radius:999px; color:#d4e1e3; font-size:.65rem; font-weight:900; }
.climate-metrics { margin-top:14px; }
.climate-metric small { color:#d8e5e7; font-size:.75rem; font-weight:800; }
.climate-monthly-panel { min-height:510px; }
.climate-chart-controls { max-width: 500px; }
.climate-monthly-chart { height:420px; margin-top:10px; }
.climate-reading-note { margin:2px 0 0; padding:11px 14px; border-left:3px solid #ff6720; border-radius:0 9px 9px 0; background:rgba(255,103,32,.07); color:#d5e1e3; font-size:.76rem; font-weight:750; line-height:1.5; }
.climate-annual-panel { min-height:430px; margin-top:14px; }
.climate-annual-chart { height:345px; margin-top:10px; }
.climate-season-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.climate-season-grid > article { min-width:0; }
.climate-season-switch { flex-wrap:wrap; }
.climate-season-chart { height:330px; margin-top:12px; }
.climate-records-panel { margin-top:14px; }
.climate-records { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:18px; }
.climate-record { display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; padding:16px; border:1px solid rgba(145,184,192,.12); border-radius:11px; background:rgba(5,20,26,.34); }
.climate-record > span { display:grid; width:29px; height:29px; place-items:center; border:1px solid rgba(255,103,32,.45); border-radius:50%; color:#ff7b3d; font-size:.61rem; font-weight:900; }
.climate-record--cold > span,
.climate-record--rain > span { border-color:rgba(98,167,200,.55); color:#79b8d6; }
.climate-record p,
.climate-record strong,
.climate-record small { display:block; margin:0; }
.climate-record p { min-height:2.6em; color:#93abb2; font-size:.64rem; font-weight:800; line-height:1.35; text-transform:uppercase; }
.climate-record strong { margin-top:6px; overflow:hidden; color:#eef5f5; font-size:1.08rem; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }
.climate-record small { margin-top:5px; color:#ff8a52; font-size:.65rem; line-height:1.4; }
.climate-record--cold small,
.climate-record--rain small { color:#79b8d6; }
@media (max-width:1100px) {
  .climate-context { align-items:flex-start; flex-wrap:wrap; }
  .climate-context > div { width:100%; }
  .climate-season-grid { grid-template-columns:1fr; }
  .climate-records { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
  .climate-context { flex-direction:column; }
  .climate-context > p { max-width:none; }
  .climate-monthly-chart { height:350px; }
  .climate-annual-chart { height:310px; }
  .climate-season-chart { height:300px; }
  .climate-records { grid-template-columns:1fr; }
}

/* Department normal analysis */
.department-normal-main { max-width:1380px; }.department-normal-aside { margin:auto 8px 0; padding:15px; border:1px solid rgba(145,184,192,.14); border-radius:12px; background:linear-gradient(145deg,rgba(255,103,32,.09),rgba(12,34,41,.72)); }.department-normal-aside span { color:#ff8a53; font-size:.61rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.department-normal-aside p { margin:7px 0 0; color:#8fa8af; font-size:.68rem; line-height:1.5; }.department-toolbar { display:grid; grid-template-columns:minmax(210px,1.15fr) auto auto minmax(190px,.8fr); align-items:end; gap:18px; margin-top:30px; padding:16px 18px; }.department-toolbar label,.department-toolbar > div { display:grid; gap:7px; }.department-toolbar label > span,.department-toolbar > div > span { color:#8fa8af; font-size:.6rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }.department-toolbar select { width:100%; padding:10px 36px 10px 12px; border:1px solid rgba(151,190,197,.2); border-radius:9px; outline:none; background:#0a1b21; color:#edf5f5; font:inherit; font-size:.76rem; font-weight:800; }.department-toolbar select:focus { border-color:#ff6720; }.department-toolbar > p { justify-self:end; margin:0 0 8px; color:#c5d5d8; font-size:.7rem; font-weight:800; text-align:right; }.department-metrics { margin-top:14px; }.department-map-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(280px,.65fr); gap:14px; }.department-map-panel { min-width:0; }.department-map-legend { display:flex; gap:14px; color:#9eb1b7; font-size:.64rem; font-weight:800; }.department-map-legend span { display:flex; align-items:center; gap:6px; }.department-map-legend i { width:9px; height:9px; border-radius:50%; background:#ff6720; box-shadow:0 0 0 4px rgba(255,103,32,.12); }.department-map-legend i.is-negative { background:#62a7c8; box-shadow:0 0 0 4px rgba(98,167,200,.12); }.department-map-panel #departmentNormalMap { height:520px; margin-top:17px; overflow:hidden; border:1px solid rgba(145,184,192,.14); border-radius:12px; background:radial-gradient(circle at 50% 45%,#17323a,#07161c 72%); }.department-map-panel .leaflet-control-zoom a { border-color:#203942; background:#0b2027; color:#d8e7e9; }.department-map-panel .leaflet-control-zoom a:hover { background:#173039; color:#ff8a53; }.department-map-panel .leaflet-popup-content-wrapper,.department-map-panel .leaflet-popup-tip { background:#0b2027; color:#c8d8dc; }.department-map-panel .leaflet-popup-content { line-height:1.65; }.department-map-panel .leaflet-popup-content strong { color:#fff; }.department-map-panel .leaflet-popup-content a { color:#ff8750; font-weight:900; }.department-reading-panel { display:flex; flex-direction:column; min-width:0; }.department-summary { margin:18px 0 6px; padding:16px; border-left:3px solid #ff6720; border-radius:0 10px 10px 0; background:rgba(255,103,32,.08); color:#d7e4e6; font-size:.8rem; font-weight:700; line-height:1.65; }.department-reading-panel section { margin-top:18px; padding-top:17px; border-top:1px solid rgba(145,184,192,.12); }.department-reading-panel h3 { margin:0 0 7px; color:#8fa8af; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; }.department-reading-panel section div { display:grid; }.department-reading-panel section a { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 2px; border-bottom:1px solid rgba(145,184,192,.08); color:#cbdadd; font-size:.69rem; text-decoration:none; }.department-reading-panel section a:hover span { color:#ff8a53; }.department-reading-panel section a strong { color:#f3f8f8; font-size:.76rem; white-space:nowrap; }.department-lower-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:14px; margin-top:14px; }.department-station-chart { height:360px; margin-top:12px; }.department-table-panel { min-width:0; }.department-table-panel .normal-table-wrap { max-height:360px; overflow:auto; }.department-table-panel th { position:sticky; top:0; z-index:1; padding-top:8px; background:#0f2229; }.department-table-panel td:first-child a { display:block; color:#edf5f5; text-decoration:none; }.department-table-panel td:first-child a:hover { color:#ff8750; }.department-table-panel td:first-child small { display:block; margin-top:3px; color:#718d95; font-size:.58rem; font-weight:600; }
.department-rain-unit.is-hidden { display:none; }.department-month-choices { grid-column:1/-1; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px !important; padding-top:13px; border-top:1px solid rgba(145,184,192,.12); }.department-month-choices button { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; border:1px solid rgba(151,190,197,.14); border-radius:10px; background:#0a1b21; color:#b7c8cc; cursor:pointer; font:inherit; text-align:left; }.department-month-choices button:hover { border-color:rgba(255,103,32,.55); }.department-month-choices button.is-active { border-color:#ff6720; background:linear-gradient(120deg,rgba(255,103,32,.17),rgba(11,31,38,.94)); color:#fff; box-shadow:inset 3px 0 #ff6720; }.department-month-choices strong { font-size:.76rem; text-transform:capitalize; }.department-month-choices small { color:#819ba2; font-size:.61rem; font-weight:800; }.department-month-choices button.is-active small { color:#ff9a6b; }.department-timeline-panel { margin-top:14px; }.department-timeline-chart { height:330px; margin-top:8px; }.department-timeline-panel .normal-chart-note { margin-top:8px; padding-left:10px; border-left:2px solid rgba(255,103,32,.65); }
@media (max-width:1120px) { .department-toolbar { grid-template-columns:1fr 1fr; }.department-toolbar > p { justify-self:start; text-align:left; }.department-map-grid,.department-lower-grid { grid-template-columns:1fr; }.department-map-panel #departmentNormalMap { height:500px; }.department-reading-panel { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }.department-reading-panel > div,.department-summary { grid-column:1/-1; } }
@media (max-width:680px) { .department-toolbar { grid-template-columns:1fr; align-items:start; }.department-toolbar > p { margin:2px 0 0; }.department-month-choices { grid-template-columns:1fr; }.department-map-panel #departmentNormalMap { height:430px; }.department-reading-panel { display:block; }.department-map-legend { flex-wrap:wrap; }.department-station-chart,.department-timeline-chart { height:330px; } }

/* Heat and heatwave analysis */
.normal-side #heatwaveResults { display:grid; gap:5px; max-height:180px; margin-top:8px; overflow:auto; }.normal-side #heatwaveResults button { padding:8px; border:1px solid transparent; border-radius:7px; background:#0c2027; color:#a7bbc1; cursor:pointer; font:inherit; text-align:left; }.normal-side #heatwaveResults button strong,.normal-side #heatwaveResults button small { display:block; }.normal-side #heatwaveResults button strong { color:#eaf5f6; font-size:.72rem; }.normal-side #heatwaveResults button small,.normal-side #heatwaveResults > span { margin-top:3px; color:#78939c; font-size:.62rem; }.normal-side #heatwaveResults button.is-selected { border-color:#ff6720; background:rgba(255,103,32,.1); }
.heatwave-main { max-width:1380px; }.heatwave-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:14px; }.heatwave-metric { position:relative; overflow:hidden; }.heatwave-metric::after { position:absolute; right:-16px; bottom:-24px; width:76px; height:76px; border:1px solid rgba(255,103,32,.16); border-radius:50%; content:""; }.heatwave-metric--night::after { border-color:rgba(98,167,200,.2); }.heatwave-metric--warm strong { color:#e7b64b; }.heatwave-metric--combined { background:linear-gradient(145deg,#2b251f,#111c20); }.heatwave-metric--combined strong,.heatwave-metric--episode strong { color:#ff8050; }.heatwave-season-panel { min-height:440px; }.heatwave-threshold-badge { display:grid; gap:4px; min-width:230px; padding:11px 13px; border:1px solid rgba(255,123,61,.26); border-radius:10px; background:rgba(255,103,32,.08); text-align:right; }.heatwave-threshold-badge span { color:#ff8f5d; font-size:.59rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }.heatwave-threshold-badge strong { color:#eef5f4; font-size:.73rem; }.heatwave-season-chart { height:340px; margin-top:10px; }.heatwave-season-summary { margin:5px 0 0; padding:13px 15px; border-left:3px solid #ff6720; border-radius:0 9px 9px 0; background:rgba(255,103,32,.07); color:#b9cace; font-size:.76rem; line-height:1.65; }.heatwave-season-summary strong { color:#f3f8f7; }.heatwave-lower-grid { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(330px,.78fr); gap:14px; margin-top:14px; }.heatwave-right-stack { display:grid; align-content:start; gap:14px; min-width:0; }.heatwave-calendar-detail { display:flex; align-items:center; gap:18px; min-height:20px; margin:17px 0 12px; padding:11px 13px; border:1px solid rgba(145,184,192,.12); border-radius:9px; background:#0b1d23; color:#a8bcc1; font-size:.68rem; }.heatwave-calendar-detail strong { color:#f1f6f5; }.heatwave-calendar-detail span { margin-right:auto; }.heatwave-calendar-detail em { color:#ff9465; font-style:normal; font-weight:800; }.heatwave-calendar-legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; color:#899fa6; font-size:.6rem; }.heatwave-calendar-legend span { display:flex; align-items:center; gap:5px; }.heatwave-calendar-legend i { width:8px; height:8px; border-radius:2px; background:#ff8b52; }.heatwave-calendar-legend i.is-night { background:#5796b7; }.heatwave-calendar-legend i.is-warm { background:#e7b64b; }.heatwave-calendar-legend i.is-combined { background:#d95227; }.heatwave-calendar-legend i.is-episode { background:#ef392f; box-shadow:0 0 0 3px rgba(239,57,47,.13); }.heatwave-calendar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px; }.heatwave-calendar section { min-width:0; }.heatwave-calendar section:nth-child(n+4) { grid-column:span 1; }.heatwave-calendar h3 { margin:0 0 8px; color:#dce8e9; font-size:.72rem; text-transform:capitalize; }.heatwave-weekdays,.heatwave-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }.heatwave-weekdays { margin-bottom:4px; color:#637e87; font-size:.52rem; text-align:center; }.heatwave-day { display:grid; aspect-ratio:1; min-width:0; padding:0; place-items:center; border:1px solid rgba(145,184,192,.08); border-radius:4px; background:#0b1d23; color:#779099; cursor:pointer; font:inherit; font-size:.55rem; }.heatwave-day:hover,.heatwave-day.is-selected { border-color:#fff; color:#fff; }.heatwave-day.is-warm { border-color:rgba(231,182,75,.78); background:rgba(231,182,75,.14); color:#f3d78d; }.heatwave-day.is-day { border-color:rgba(255,139,82,.75); background:rgba(255,139,82,.14); color:#ffc2a3; }.heatwave-day.is-night { border-color:rgba(87,150,183,.75); background:rgba(87,150,183,.18); color:#b9dded; }.heatwave-day.is-combined { border-color:#d95227; background:#9f3d24; color:#fff; }.heatwave-day.is-episode { border-color:#ff746b; background:#e34636; color:#fff; box-shadow:0 0 8px rgba(227,70,54,.28); }.heatwave-day.is-missing { border-style:dashed; color:#526b73; }.heatwave-day.is-future { opacity:.27; cursor:default; }.heatwave-ranking-chart { height:270px; margin-top:12px; }.heatwave-ranking-panel > p { margin:9px 0 0; padding:10px 12px; border-left:2px solid #ff6720; background:rgba(255,103,32,.06); color:#bac9cc; font-size:.68rem; line-height:1.5; }.heatwave-episodes { display:grid; gap:8px; margin-top:15px; }.heatwave-episodes article { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 0; border-top:1px solid rgba(145,184,192,.1); }.heatwave-episodes article > span { display:grid; width:26px; height:26px; place-items:center; border-radius:50%; background:rgba(255,103,32,.12); color:#ff8550; font-size:.56rem; font-weight:900; }.heatwave-episodes strong { color:#eff6f5; font-size:.78rem; }.heatwave-episodes p { margin:3px 0 0; color:#849da4; font-size:.61rem; }.heatwave-episodes em { color:#b9cbce; font-size:.61rem; font-style:normal; line-height:1.55; text-align:right; }.heatwave-empty { margin:14px 0 0; padding:14px; border:1px dashed rgba(145,184,192,.16); border-radius:9px; color:#829ba2; font-size:.68rem; line-height:1.5; }
@media (max-width:1120px) { .heatwave-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }.heatwave-lower-grid { grid-template-columns:1fr; }.heatwave-right-stack { grid-template-columns:1fr 1fr; }.heatwave-calendar { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .heatwave-metrics { grid-template-columns:1fr; }.heatwave-threshold-badge { min-width:0; text-align:left; }.heatwave-calendar-detail { align-items:flex-start; flex-direction:column; gap:5px; }.heatwave-calendar-detail span { margin-right:0; }.heatwave-calendar { grid-template-columns:1fr 1fr; }.heatwave-right-stack { grid-template-columns:1fr; } }
@media (max-width:480px) { .heatwave-season-chart { height:300px; }.heatwave-calendar { grid-template-columns:1fr; } }
.heatwave-chart-actions { display:grid; justify-items:end; gap:8px; }
.heatwave-metric-switch { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.heatwave-day.is-very_hot { border-color:#ff7133; background:rgba(255,113,51,.32); color:#fff; }
.heatwave-calendar-legend i.is-very-hot { background:#ff7133; }
.heatwave-metric-switch button { padding:9px 12px; border:1px solid rgba(145,184,192,.18); border-radius:8px; background:#0b1d23; color:#91a8ae; cursor:pointer; font:inherit; font-size:.62rem; font-weight:800; transition:border-color .2s ease,background .2s ease,color .2s ease; }
.heatwave-metric-switch button:hover { border-color:rgba(255,155,66,.55); color:#edf6f5; }
.heatwave-metric-switch button.is-active { border-color:#ff8d3f; background:rgba(255,103,32,.14); color:#fff; box-shadow:inset 0 -2px 0 #ff6720; }
@media (max-width:760px) { .heatwave-chart-actions { justify-items:start; }.heatwave-metric-switch { justify-content:flex-start; }.heatwave-metric-switch button { flex:1 1 130px; } }

/* Analysis hub: a deliberate two-step entry point before opening a dashboard. */
.analysis-hub-main { width: min(1120px, calc(100% - 80px)); margin: 0 auto; padding: 58px 0 38px; }.analysis-hub-header { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 44px; }.analysis-hub-header h1 { margin: 0; color: #153244; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.2rem, 6vw, 6rem); font-weight: 500; letter-spacing: -.07em; line-height: .88; }.analysis-hub-header > p { max-width: 370px; margin: 0 0 4px; color: #5d7482; font-size: .98rem; line-height: 1.65; }.analysis-stage { padding: 28px; border: 1px solid #e5e7e5; border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: 0 14px 38px rgba(20,50,68,.045); }.analysis-stage + .analysis-stage { margin-top: 16px; }.analysis-stage-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }.analysis-stage-head > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #153244; color: #fff; font-size: .72rem; font-weight: 900; }.analysis-stage-head .lightviz-eyebrow { margin: 0 0 4px; }.analysis-stage-head h2 { margin: 0; color: #153244; font-size: 1.25rem; letter-spacing: -.045em; }.analysis-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.analysis-theme-card { display: grid; grid-template-columns: 42px minmax(0,1fr) 14px; align-items: start; gap: 12px; min-height: 148px; padding: 17px; border: 1px solid #e1e7e7; border-radius: 13px; background: #fff; color: #153244; cursor: pointer; font: inherit; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.analysis-theme-card:hover { transform: translateY(-3px); border-color: #ffb187; box-shadow: 0 12px 24px rgba(20,50,68,.08); }.analysis-theme-card.is-selected { border-color: #ff6720; box-shadow: inset 3px 0 #ff6720, 0 12px 24px rgba(255,103,32,.1); }.analysis-theme-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: #edf4f3; color: #153244; }.analysis-theme-icon svg, .analysis-path-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }.analysis-theme-card.is-selected .analysis-theme-icon { background: #fff0e8; color: #f15c1b; }.analysis-theme-icon--warm { color: #ef651f; }.analysis-theme-icon--cool { color: #6389ad; }.analysis-theme-icon--leaf { color: #527f69; }.analysis-theme-icon--climate { color: #4f728a; }.analysis-theme-copy { display: grid; gap: 7px; }.analysis-theme-copy small { color: #f06422; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.analysis-theme-card:not(.is-selected) .analysis-theme-copy small { color: #81949d; }.analysis-theme-copy strong { font-size: .91rem; letter-spacing: -.025em; }.analysis-theme-copy em { color: #708591; font-size: .7rem; font-style: normal; line-height: 1.45; }.analysis-arrow { align-self: center; color: #9aadB5; font-size: .85rem; }.analysis-path-stage { background: linear-gradient(120deg, rgba(255,255,255,.94), rgba(247,249,247,.86)); }.analysis-path-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }.analysis-path-card { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 19px; border: 1px solid #e1e7e7; border-radius: 13px; background: #fff; color: #153244; cursor: pointer; font: inherit; text-align: left; }.analysis-path-card.is-selected { border-color: #153244; box-shadow: inset 3px 0 #ff6720; }.analysis-path-card.is-muted { opacity: .56; cursor: not-allowed; }.analysis-path-icon { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 50%; background: #edf4f3; color: #24495d; }.analysis-path-card strong, .analysis-path-card em { display: block; }.analysis-path-card strong { margin: 2px 0 7px; font-size: .91rem; }.analysis-path-card em { color: #708591; font-size: .72rem; font-style: normal; line-height: 1.45; }.analysis-path-card i { position: absolute; top: 13px; right: 13px; padding: 4px 7px; border-radius: 999px; background: #fff0e8; color: #e85d20; font-size: .57rem; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }.analysis-path-card.is-muted i { background: #edf1f1; color: #71848d; }.analysis-hub-footer { display: flex; align-items: center; gap: 24px; margin-top: 16px; padding: 19px 22px; border-radius: 14px; background: #153244; color: #fff; }.analysis-hub-footer > div { margin-right: auto; }.analysis-hub-footer span { color: #ff9a69; font-size: .75rem; font-weight: 900; }.analysis-hub-footer p { margin: 5px 0 0; color: #c5d4da; font-size: .73rem; }.analysis-hub-footer a { padding: 12px 16px; border-radius: 9px; background: #ff6720; color: #fff; font-size: .74rem; font-weight: 900; text-decoration: none; white-space: nowrap; }.analysis-hub-footer a:hover { background: #e95819; }.analysis-hub-footer a.is-disabled { background: #657b87; cursor: default; }.analysis-hub-aside-note { margin: auto 9px 0; padding: 15px; border: 1px solid #e6e9e7; border-radius: 12px; background: #f8faf8; }.analysis-hub-aside-note span { color: #f06422; font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.analysis-hub-aside-note p { margin: 7px 0 0; color: #66808e; font-size: .7rem; line-height: 1.45; }

@media (max-width: 1050px) { .analysis-hub-main { width: min(100% - 48px, 1120px); }.analysis-theme-grid { grid-template-columns: 1fr 1fr; }.analysis-hub-header { align-items: flex-start; flex-direction: column; } }
@media (max-width: 680px) { .analysis-hub-main { width: min(100% - 32px, 1120px); padding-top: 30px; }.analysis-hub-header { margin-bottom: 28px; }.analysis-stage { padding: 19px; }.analysis-theme-grid, .analysis-path-grid { grid-template-columns: 1fr; }.analysis-hub-footer { align-items: flex-start; flex-direction: column; }.analysis-hub-footer > div { margin-right: 0; }.analysis-hub-footer a { width: 100%; box-sizing: border-box; text-align: center; } }

/* Guided CSV download page. */
.download-page {
  min-height: 100vh;
  color: #183137;
  background:
    radial-gradient(circle at 7% 4%, rgba(224, 112, 66, 0.14), transparent 24rem),
    linear-gradient(135deg, #f2f2ed 0%, #e9efeb 58%, #dce7e2 100%);
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", "Trebuchet MS", sans-serif;
}

.download-page a { color: inherit; }

.download-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0;
}

.download-brand {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.download-header nav { display: flex; gap: 26px; }
.download-header nav a { color: #55706e; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.download-header nav a.is-current { color: #183137; }

.download-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto 56px; }

.download-intro { max-width: 700px; padding: 48px 0 42px; }
.download-eyebrow { margin: 0 0 12px; color: #c5562b; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.download-intro h1 { max-width: 680px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 500; letter-spacing: -0.065em; line-height: 0.92; }
.download-intro > p:last-child { max-width: 610px; margin: 22px 0 0; color: #516a68; font-size: 1.08rem; line-height: 1.6; }

.download-workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; overflow: hidden; border: 1px solid rgba(43, 70, 70, 0.16); border-radius: 20px; background: rgba(255, 255, 252, 0.75); box-shadow: 0 28px 75px rgba(42, 70, 69, 0.12); }

.download-steps { min-height: 100%; padding: 34px 26px; border-right: 1px solid rgba(43, 70, 70, 0.13); background: rgba(220, 231, 226, 0.62); }
.steps-title { margin: 0 0 28px; color: #718582; font-size: 0.73rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.download-steps ol { display: grid; gap: 25px; margin: 0; padding: 0; list-style: none; }
.download-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; color: #718582; }
.download-steps li > span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #a7b8b4; border-radius: 50%; font-size: 0.72rem; font-weight: 900; }
.download-steps li strong, .download-steps li small { display: block; }
.download-steps li strong { font-size: 0.94rem; }
.download-steps li small { margin-top: 3px; font-size: 0.77rem; line-height: 1.35; }
.download-steps li.is-active { color: #183137; }
.download-steps li.is-active > span { border-color: #dc7042; background: #dc7042; color: white; }
.steps-help { margin: 38px 0 0; color: #637775; font-size: 0.8rem; line-height: 1.55; }

.download-form { min-width: 0; }
.download-section { padding: 36px 42px; border-bottom: 1px solid rgba(43, 70, 70, 0.13); }
.section-heading { display: grid; grid-template-columns: 34px 1fr; gap: 14px; max-width: 680px; margin-bottom: 25px; }
.section-number { color: #c5562b; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; }
.section-heading h2 { margin: 0; font-size: 1.38rem; letter-spacing: -0.03em; }
.section-heading p { margin: 6px 0 0; color: #718582; font-size: 0.92rem; line-height: 1.45; }

.location-grid { display: grid; grid-template-columns: minmax(300px, 1.45fr) minmax(230px, 0.8fr); gap: 24px; }
.department-map-wrap { overflow: hidden; border: 1px solid #cedad5; border-radius: 14px; background: #dfe8e3; }
#downloadMap { height: 320px; background: linear-gradient(145deg, #e8efeb, #d3e0da); }
.download-page .leaflet-control-zoom { border: 1px solid #b8c9c2; box-shadow: 0 5px 18px rgba(25, 49, 55, 0.14); }
.download-page .leaflet-control-zoom a { border-color: #c7d4ce; background: #fffefa; color: #183137; }
.download-page .station-map-tooltip { padding: 8px 10px; border: 0; border-radius: 7px; background: #183137; color: #ffffff; box-shadow: 0 8px 22px rgba(20, 45, 47, 0.24); font-family: "Aptos", "Segoe UI", sans-serif; font-size: 0.76rem; line-height: 1.45; }
.download-page .station-map-tooltip::before { border-top-color: #183137; }
.map-status { margin: 0; padding: 11px 14px; color: #59726e; background: rgba(255, 255, 252, 0.7); font-size: 0.8rem; line-height: 1.4; }
.station-picker { display: flex; flex-direction: column; padding: 20px; border-radius: 14px; background: #eff3ef; }
.station-picker > label, .date-fields label { color: #5d7471; font-size: 0.73rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.station-picker select { width: 100%; margin-top: 10px; padding: 13px 38px 13px 12px; border: 1px solid #bdcdc8; border-radius: 8px; outline: none; background: #fffefa; color: #183137; font: inherit; }
.station-picker select:focus, .date-fields input:focus { border-color: #dc7042; box-shadow: 0 0 0 3px rgba(220, 112, 66, 0.16); }
.station-details { margin-top: auto; padding-top: 22px; color: #58706d; font-size: 0.84rem; }
.station-details strong, .station-details span { display: block; }
.station-details strong { margin-bottom: 8px; color: #183137; font-size: 1rem; }
.station-details span { margin-top: 3px; }

.date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 18px; padding-left: 48px; }
.date-fields input { display: block; width: 100%; box-sizing: border-box; margin-top: 9px; padding: 12px; border: 1px solid #bdcdc8; border-radius: 8px; outline: none; background: #fffefa; color: #183137; font: inherit; }

.data-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-left: 48px; }
.scope-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.frequency-choice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice-card, .variable-card { position: relative; display: block; cursor: pointer; }
.choice-card { min-height: 112px; padding: 17px; border: 1px solid #cad7d2; border-radius: 12px; background: #f7f8f4; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease; }
.choice-card:hover { transform: translateY(-2px); border-color: #8ca5a0; }
.choice-card.is-selected { border-color: #dc7042; background: #fff7f1; box-shadow: inset 0 0 0 1px #dc7042; }
.choice-card input, .variable-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card strong, .choice-card small, .variable-card strong, .variable-card small { display: block; }
.choice-card strong { margin-bottom: 9px; font-size: 1rem; }
.choice-card small, .variable-card small { color: #617875; font-size: 0.8rem; line-height: 1.4; }
.variable-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0 48px; }
.variable-card { padding: 14px 16px 14px 40px; border: 1px solid #cad7d2; border-radius: 10px; background: #f7f8f4; }
.variable-card::before { position: absolute; top: 17px; left: 15px; width: 13px; height: 13px; border: 1px solid #9eafaa; border-radius: 3px; content: ""; }
.variable-card:has(input:checked) { border-color: #dc7042; background: #fff7f1; }
.variable-card:has(input:checked)::before { border-color: #dc7042; background: #dc7042; box-shadow: inset 0 0 0 3px #fff7f1; }
.variable-card strong { margin-bottom: 4px; font-size: 0.9rem; }

.download-submit { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 28px 42px; background: #183137; color: white; }
.download-submit .download-eyebrow { margin-bottom: 5px; color: #f3a57b; }
.download-submit strong { font-size: 1rem; }
.format-choice { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 0; border: 0; }
.format-choice legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.format-choice label { cursor: pointer; }
.format-choice input { position: absolute; opacity: 0; pointer-events: none; }
.format-choice span { display: block; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; color: #f4f3ea; font-size: 0.78rem; font-weight: 800; }
.format-choice small { margin-left: 4px; color: #f3a57b; font-size: 0.68rem; }
.format-choice label:has(input:checked) span { border-color: #f4f3ea; background: #f4f3ea; color: #183137; }
.format-choice label:has(input:checked) small { color: #c5562b; }
.download-submit button { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; padding: 15px 20px; border: 0; border-radius: 999px; background: #f5f5ee; color: #183137; cursor: pointer; font: inherit; font-weight: 900; transition: transform 0.18s ease, opacity 0.18s ease; }
.download-submit button:hover:not(:disabled) { transform: translateY(-2px); }
.download-submit button:disabled { cursor: not-allowed; opacity: 0.45; }

@media (max-width: 900px) {
  .download-workspace { grid-template-columns: 1fr; }
  .download-steps { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(43, 70, 70, 0.13); }
  .download-steps ol { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .steps-help { display: none; }
  .location-grid, .data-choice { grid-template-columns: 1fr; }
  .data-choice, .date-fields { padding-left: 48px; }
}

@media (max-width: 620px) {
  .download-header, .download-shell { width: min(100% - 32px, 1240px); }
  .download-header { padding: 20px 0; }
  .download-header nav { gap: 15px; }
  .download-header nav a { font-size: 0.69rem; }
  .download-intro { padding: 28px 0 30px; }
  .download-workspace { border-radius: 14px; }
  .download-steps, .download-section { padding: 26px 20px; }
  .download-steps ol { grid-template-columns: 1fr 1fr; }
  .section-heading { grid-template-columns: 28px 1fr; }
  .location-grid, .date-fields, .data-choice, .variable-choices { padding-left: 0; }
  .date-fields, .variable-choices { grid-template-columns: 1fr; }
  #downloadMap { height: 280px; }
  .download-submit { align-items: flex-start; flex-direction: column; padding: 25px 20px; }
  .format-choice { margin-left: 0; }
  .download-submit button { width: 100%; justify-content: center; }
}

/* Make the map the primary surface of the download journey. */
@media (min-width: 901px) {
  .download-section:has(.location-grid) {
    padding-bottom: 42px;
  }

  .location-grid {
    position: relative;
    display: block;
  }

  .department-map-wrap {
    min-height: 490px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 252, 0.72), 0 16px 32px rgba(32, 61, 61, 0.1);
  }

  #downloadMap {
    height: 448px;
  }

  .station-picker {
    position: absolute;
    z-index: 500;
    top: 20px;
    right: 20px;
    width: min(300px, calc(100% - 40px));
    min-height: 200px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 252, 0.88);
    background: rgba(250, 252, 248, 0.93);
    box-shadow: 0 16px 35px rgba(24, 49, 55, 0.17);
    backdrop-filter: blur(12px);
  }

  .station-picker::before {
    display: block;
    margin-bottom: 18px;
    color: #c5562b;
    content: "01 - SELECTION";
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 900px) {
  .department-map-wrap {
    min-height: 390px;
  }

  #downloadMap {
    height: 350px;
  }
}

/* Documentation catalogue. */
.docs-page { min-height: 100vh; color: #183137; background: #f5f4ef; font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; }
.docs-header, .docs-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.docs-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.docs-brand { color: inherit; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
.docs-header nav { display: flex; gap: 24px; }
.docs-header nav a { color: #637775; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.docs-header nav .is-current { color: #183137; }
.docs-intro { max-width: 800px; padding: 48px 0; }
.docs-eyebrow { margin: 0 0 12px; color: #c5562b; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.docs-intro h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.1rem, 6vw, 5.8rem); font-weight: 500; letter-spacing: -0.065em; line-height: 0.92; }
.docs-intro > p:last-child { max-width: 650px; margin: 23px 0 0; color: #607572; font-size: 1.06rem; line-height: 1.6; }
.document-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.document-card { min-height: 190px; padding: 24px; border: 1px solid #d6dfda; border-radius: 14px; background: #fffefa; }
.document-card > span { color: #c5562b; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.document-card h2 { margin: 14px 0 8px; font-size: 1.15rem; letter-spacing: -0.03em; }
.document-card p { margin: 0; color: #6b807d; font-size: 0.82rem; }
.document-card div { display: flex; gap: 14px; margin-top: 24px; }
.document-card a, .docs-download { color: #183137; font-size: 0.82rem; font-weight: 900; text-decoration: none; }
.document-card a:hover, .docs-download:hover { color: #c5562b; }
.docs-browser { margin-top: 56px; padding: 38px; border-radius: 20px; background: #e4ece7; }
.docs-browser-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.docs-browser h2, .quality-section h2 { margin: 0; font-size: 1.7rem; letter-spacing: -0.04em; }
.docs-download { padding: 12px 16px; border: 1px solid #9eb3ad; border-radius: 999px; }
.docs-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 32px 0 16px; }
.frequency-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,252,0.72); }
.frequency-tabs button { padding: 9px 13px; border: 0; border-radius: 999px; background: transparent; color: #617875; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 900; }
.frequency-tabs button.is-active { background: #183137; color: #fffefa; }
.docs-search { color: #617875; font-size: 0.73rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.docs-search input { width: 245px; margin-left: 8px; padding: 10px 12px; border: 1px solid #b9cac4; border-radius: 8px; outline: none; background: #fffefa; color: #183137; font: inherit; text-transform: none; }
.docs-search input:focus { border-color: #dc7042; box-shadow: 0 0 0 3px rgba(220,112,66,0.15); }
.docs-count { margin: 0 0 10px; color: #627976; font-size: 0.8rem; }
.variables-table { overflow: hidden; border: 1px solid #cbd8d2; border-radius: 12px; background: #fffefa; }
.variable-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) 76px 85px; gap: 16px; align-items: start; padding: 17px 18px; border-bottom: 1px solid #e1e8e3; }
.variable-row:last-child { border-bottom: 0; }
.variable-row code { width: fit-content; padding: 4px 6px; border-radius: 4px; background: #f2e6dd; color: #a64724; font-size: 0.78rem; font-weight: 900; }
.variable-row strong { font-size: 0.92rem; }
.variable-row p { margin: 5px 0 0; color: #617875; font-size: 0.82rem; line-height: 1.45; }
.variable-row > span { color: #617875; font-size: 0.78rem; }
.docs-empty { padding: 24px; color: #617875; }
.quality-section { padding: 58px 0; }
.quality-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.quality-cards article { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 18px; border: 1px solid #d6dfda; border-radius: 12px; background: #fffefa; }
.quality-cards strong { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #183137; color: white; }
.quality-cards h3 { margin: 2px 0 5px; font-size: 0.9rem; }
.quality-cards p { margin: 0; color: #627976; font-size: 0.79rem; line-height: 1.45; }
@media (max-width: 800px) { .document-cards, .quality-cards { grid-template-columns: 1fr; } .docs-controls, .docs-browser-head { align-items: flex-start; flex-direction: column; } .docs-search input { width: min(240px, 70vw); } .variable-row { grid-template-columns: 90px 1fr; } .variable-row > span { grid-column: 2; } }
@media (max-width: 560px) { .docs-header, .docs-shell { width: min(100% - 32px, 1240px); } .docs-header { align-items: flex-start; flex-direction: column; gap: 14px; } .docs-header nav { gap: 14px; } .docs-header nav a { font-size: 0.65rem; } .docs-browser { margin-top: 36px; padding: 22px; border-radius: 14px; } .frequency-tabs { width: 100%; } .frequency-tabs button { flex: 1; padding: 9px 5px; font-size: 0.68rem; } }

/* Data sources page. */
.sources-page { min-height: 100vh; color: #e6f5f1; background: #0d2024; font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; }
.sources-header, .sources-page main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.sources-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.sources-brand { display: inline-flex; width: 176px; }
.sources-brand img { display: block; width: 100%; height: auto; }
.sources-header nav { display: flex; gap: 24px; }
.sources-header nav a { color: #9dbbb6; font-size: .76rem; font-weight: 850; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.sources-header nav a:hover, .sources-header nav .is-current { color: #8ee3d5; }
.sources-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(270px, .75fr); gap: 70px; align-items: end; min-height: 510px; padding: 82px 0 92px; border-bottom: 1px solid rgba(142,227,213,.17); }
.sources-eyebrow { margin: 0 0 16px; color: #ef875d; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.sources-hero h1 { margin: 0; color: #f4fbf9; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.25rem, 6.4vw, 6.2rem); font-weight: 400; letter-spacing: -.07em; line-height: .92; }
.sources-hero h1 em { color: #8ee3d5; font-weight: 400; }
.sources-lead { max-width: 680px; margin: 28px 0 0; color: #b9d3ce; font-size: 1.1rem; line-height: 1.65; }
.sources-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.sources-button { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 8px; font-size: .82rem; font-weight: 900; text-decoration: none; }
.sources-button--primary { background: #8ee3d5; color: #0d2024; }
.sources-button--primary:hover { background: #b3f4e8; }
.sources-button--ghost { border: 1px solid rgba(170,226,216,.32); color: #dffaf5; }
.sources-button--ghost:hover { border-color: #8ee3d5; color: #8ee3d5; }
.mf-credit { position: relative; overflow: hidden; padding: 34px; border: 1px solid rgba(142,227,213,.24); border-radius: 18px; background: linear-gradient(145deg, rgba(31,74,78,.72), rgba(15,42,48,.8)); }
.mf-credit::after { position: absolute; right: -23px; bottom: -48px; color: rgba(142,227,213,.11); content: "MF"; font-family: Georgia, serif; font-size: 11rem; font-style: italic; line-height: 1; }
.mf-credit__logo { display: block; width: 86px; height: 86px; object-fit: contain; border-radius: 4px; }
.mf-credit p { margin: 22px 0 7px; color: #8ee3d5; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mf-credit strong { display: block; position: relative; z-index: 1; color: #fff; font-size: 1.72rem; letter-spacing: -.045em; }
.mf-credit small { display: block; max-width: 240px; margin-top: 12px; color: #a9c8c2; font-size: .8rem; line-height: 1.45; }
.sources-statement { display: grid; grid-template-columns: 180px minmax(0, 1fr) 185px; gap: 28px; align-items: start; padding: 74px 0; border-bottom: 1px solid rgba(142,227,213,.17); }
.sources-statement .sources-eyebrow { margin: 6px 0 0; }
.sources-statement h2, .sources-section-heading h2, .sources-scope h2, .sources-note h2, .sources-references h2 { margin: 0; color: #f4fbf9; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.2vw, 3.15rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.05; }
.sources-statement > p:not(.sources-eyebrow) { grid-column: 2; max-width: 680px; margin: 19px 0 0; color: #b4cfca; font-size: .98rem; line-height: 1.65; }
.sources-statement a { grid-column: 3; align-self: end; color: #8ee3d5; font-size: .78rem; font-weight: 850; line-height: 1.4; text-decoration: none; }
.sources-statement a:hover, .sources-access-card a:hover { color: #fff; }
.sources-how { padding: 85px 0; }
.sources-section-heading { max-width: 660px; }
.sources-access-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 42px; }
.sources-access-card { min-height: 450px; padding: 32px; border: 1px solid rgba(142,227,213,.19); border-radius: 18px; background: #11292e; }
.sources-access-card--accent { border-color: rgba(239,135,93,.34); background: linear-gradient(145deg, #1d3b3d, #142b30); }
.sources-number { color: #709a94; font-size: .75rem; font-weight: 900; letter-spacing: .13em; }
.sources-card-kicker { margin: 37px 0 10px; color: #ef875d; font-size: .69rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.sources-access-card h3 { margin: 0; color: #f1faf7; font-size: 1.45rem; letter-spacing: -.04em; }
.sources-access-card > p:not(.sources-card-kicker) { min-height: 75px; margin: 14px 0 20px; color: #afcbc5; font-size: .88rem; line-height: 1.55; }
.sources-access-card ol { margin: 0; padding-left: 20px; color: #c8dcd7; font-size: .8rem; line-height: 1.85; }
.sources-access-card a { display: inline-block; margin-top: 25px; color: #8ee3d5; font-size: .79rem; font-weight: 900; text-decoration: none; }
.sources-scope { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 64px; padding: 74px 0; border-top: 1px solid rgba(142,227,213,.17); }
.sources-scope-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(142,227,213,.2); }
.sources-scope-list article { padding: 18px 12px 18px 0; border-bottom: 1px solid rgba(142,227,213,.2); }
.sources-scope-list article:nth-child(odd) { margin-right: 28px; }
.sources-scope-list span { color: #dffaf5; font-size: .91rem; font-weight: 850; }
.sources-scope-list p { margin: 5px 0 0; color: #91afa9; font-size: .78rem; }
.sources-note { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 25px; align-items: center; padding: 40px; border-radius: 18px; background: #8ee3d5; color: #0d2024; }
.sources-note__mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: #0d2024; color: #8ee3d5; font-size: 1.4rem; }
.sources-note h2 { color: #0d2024; font-family: inherit; font-size: 1.25rem; font-weight: 900; letter-spacing: -.035em; }
.sources-note p { max-width: 680px; margin: 9px 0 0; color: #24524f; font-size: .88rem; line-height: 1.55; }
.sources-note a { padding: 11px 14px; border: 1px solid rgba(13,32,36,.42); border-radius: 7px; color: #0d2024; font-size: .77rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.sources-note a:hover { background: #0d2024; color: #8ee3d5; }
.sources-references { padding: 92px 0; }
.sources-references > div { margin-top: 34px; border-top: 1px solid rgba(142,227,213,.19); }
.sources-references a { display: grid; grid-template-columns: 230px 1fr auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(142,227,213,.19); color: inherit; text-decoration: none; }
.sources-references a:hover strong, .sources-references a:hover b { color: #8ee3d5; }
.sources-references span { color: #91afa9; font-size: .75rem; }
.sources-references strong { color: #e7f5f2; font-size: .9rem; }
.sources-references b { color: #ef875d; font-size: 1.1rem; }
@media (max-width: 800px) { .sources-hero, .sources-statement, .sources-scope { grid-template-columns: 1fr; gap: 28px; } .sources-hero { min-height: auto; padding: 55px 0 65px; } .sources-statement > p:not(.sources-eyebrow), .sources-statement a { grid-column: auto; } .sources-access-card { min-height: 0; } .sources-note { grid-template-columns: 54px 1fr; } .sources-note a { grid-column: 2; justify-self: start; } }
@media (max-width: 560px) { .sources-header, .sources-page main { width: min(100% - 32px, 1180px); } .sources-header { align-items: flex-start; flex-direction: column; gap: 16px; } .sources-header nav { flex-wrap: wrap; gap: 11px 16px; } .sources-header nav a { font-size: .64rem; } .sources-hero h1 { font-size: 3.45rem; } .sources-lead { font-size: .98rem; } .mf-credit { padding: 26px; } .sources-statement, .sources-how, .sources-scope, .sources-references { padding: 55px 0; } .sources-access-grid, .sources-scope-list { grid-template-columns: 1fr; } .sources-scope-list article:nth-child(odd) { margin-right: 0; } .sources-note { grid-template-columns: 1fr; padding: 28px; } .sources-note a { grid-column: auto; } .sources-references a { grid-template-columns: 1fr auto; gap: 8px; } .sources-references a strong { grid-column: 1; } .sources-references a b { grid-column: 2; grid-row: 1 / 3; } }

/* Terms and legal notice. */
.terms-page { min-height: 100vh; color: #d9ebe7; background: #0c1d21; font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; }
.terms-header, .terms-shell { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.terms-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.terms-brand { display: inline-flex; width: 176px; }.terms-brand img { display: block; width: 100%; height: auto; }
.terms-header nav { display: flex; gap: 24px; }.terms-header nav a { color: #91aca8; font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }.terms-header nav a:hover, .terms-header nav .is-current { color: #8ee3d5; }
.terms-intro { max-width: 750px; padding: 90px 0 72px; }.terms-eyebrow { margin: 0 0 17px; color: #ef875d; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }.terms-intro h1 { margin: 0; color: #f3faf8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem, 7vw, 6.5rem); font-weight: 400; letter-spacing: -.075em; line-height: .88; }.terms-intro h1 em { color: #8ee3d5; font-weight: 400; }.terms-intro > p:last-child { margin: 30px 0 0; color: #a9c4be; font-size: .93rem; }
.terms-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(142,227,213,.2); border-bottom: 1px solid rgba(142,227,213,.2); }.terms-summary article { min-height: 190px; padding: 25px 28px 25px 0; }.terms-summary article + article { padding-left: 28px; border-left: 1px solid rgba(142,227,213,.2); }.terms-summary span, .terms-number { color: #ef875d; font-size: .7rem; font-weight: 900; letter-spacing: .13em; }.terms-summary strong { display: block; margin-top: 25px; color: #f0faf7; font-size: .96rem; }.terms-summary p { margin: 8px 0 0; color: #96b3ad; font-size: .8rem; line-height: 1.5; }
.terms-content { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 70px; padding: 82px 0 98px; }.terms-index { align-self: start; position: sticky; top: 28px; display: grid; gap: 13px; }.terms-index a { color: #8faeaa; font-size: .78rem; font-weight: 750; text-decoration: none; }.terms-index a:hover { color: #8ee3d5; }.terms-articles { max-width: 730px; }.terms-articles article { padding: 0 0 48px; margin-bottom: 46px; border-bottom: 1px solid rgba(142,227,213,.18); }.terms-articles article:last-child { margin-bottom: 0; }.terms-articles h2 { margin: 13px 0 19px; color: #f1fbf8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.055em; }.terms-articles p:not(.terms-number) { color: #aec7c2; font-size: .95rem; line-height: 1.7; }.terms-articles a { color: #8ee3d5; text-decoration: none; }.terms-articles a:hover { color: #fff; }.terms-articles dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 27px 0 0; background: rgba(142,227,213,.19); }.terms-articles dl div { padding: 16px; background: #11272b; }.terms-articles dt { color: #83a6a0; font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.terms-articles dd { margin: 7px 0 0; color: #e0f0ec; font-size: .77rem; line-height: 1.45; }.terms-inline-link { display: inline-block; margin-top: 10px; font-size: .82rem; font-weight: 900; }
@media (max-width: 760px) { .terms-summary { grid-template-columns: 1fr; }.terms-summary article, .terms-summary article + article { min-height: 0; padding: 21px 0; border-left: 0; border-top: 1px solid rgba(142,227,213,.2); }.terms-summary article:first-child { border-top: 0; }.terms-summary strong { margin-top: 11px; }.terms-content { grid-template-columns: 1fr; gap: 34px; }.terms-index { position: static; grid-template-columns: repeat(3, 1fr); gap: 12px; }.terms-articles dl { grid-template-columns: 1fr; }.terms-articles dl div { padding: 14px; } }
@media (max-width: 560px) { .terms-header, .terms-shell { width: min(100% - 32px, 1080px); }.terms-header { align-items: flex-start; flex-direction: column; gap: 16px; }.terms-header nav { flex-wrap: wrap; gap: 11px 16px; }.terms-header nav a { font-size: .64rem; }.terms-intro { padding: 58px 0 52px; }.terms-intro h1 { font-size: 3.8rem; }.terms-content { padding: 55px 0 65px; }.terms-index { grid-template-columns: repeat(2, 1fr); } }

/* Data visualisation workspace. */
.viz-page { min-height: 100vh; overflow-x: hidden; color: #f4f5ff; background: radial-gradient(circle at 70% -10%, rgba(120, 92, 194, .54), transparent 34rem), radial-gradient(circle at 6% 85%, rgba(42, 104, 167, .42), transparent 32rem), linear-gradient(140deg, #15182e 0%, #232a54 54%, #1c2142 100%); font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; }
.viz-page::before { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .25; background-image: radial-gradient(rgba(228,236,255,.8) 1px, transparent 1px); background-size: 27px 27px; content: ""; mask-image: linear-gradient(130deg, transparent, black); }
.viz-header, .viz-shell { position: relative; z-index: 1; width: min(1360px, calc(100% - 48px)); margin: 0 auto; }
.viz-header { display: flex; align-items: center; justify-content: space-between; padding: 27px 0; }
.viz-brand { color: #f6f6ff; font-size: 1.24rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }
.viz-brand span { margin-left: 7px; color: #aeb7db; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.viz-header nav { display: flex; gap: 25px; }
.viz-header nav a { color: #aeb7db; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.viz-header nav a:hover, .viz-header nav .is-current { color: #ffffff; }
.viz-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 44px 0 35px; }
.viz-eyebrow { margin: 0 0 9px; color: #7ce7ef; font-size: .68rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.viz-intro h1 { max-width: 720px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5.7vw, 5.9rem); font-weight: 500; letter-spacing: -.065em; line-height: .91; }
.viz-intro > div > p:last-child { max-width: 620px; margin: 21px 0 0; color: #b4bddd; font-size: 1.02rem; line-height: 1.6; }
.viz-legend { display: flex; flex-wrap: wrap; justify-content: end; gap: 15px; max-width: 330px; color: #c7cde7; font-size: .77rem; }
.viz-legend span:last-child { width: 100%; color: #8792bc; text-align: right; }
.legend-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }.legend-dot--cyan { background: #7ce7ef; }.legend-dot--blue { background: #5a8cff; }
.viz-workspace { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: 18px; align-items: start; padding-bottom: 60px; }
.station-rail, .chart-panel, .data-panel, .metric-card { border: 1px solid rgba(204,215,255,.1); box-shadow: 0 20px 56px rgba(6,10,35,.22); }
.station-rail { position: sticky; top: 18px; overflow: hidden; padding: 24px; border-radius: 18px; background: rgba(28,34,70,.79); backdrop-filter: blur(18px); }
.rail-head h2 { margin: 0 0 21px; font-size: 1.3rem; letter-spacing: -.035em; }
.station-search { display: block; color: #aeb7db; font-size: .69rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.station-search input { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 13px 11px; border: 1px solid rgba(192,205,255,.17); border-radius: 9px; outline: none; background: rgba(6,10,30,.27); color: #ffffff; font: inherit; text-transform: none; }
.station-search input::placeholder { color: #7f8aae; }.station-search input:focus { border-color: #7ce7ef; box-shadow: 0 0 0 3px rgba(124,231,239,.11); }
.station-results { display: grid; gap: 7px; max-height: 292px; margin-top: 15px; overflow: auto; }
.station-result { width: 100%; padding: 11px; border: 1px solid transparent; border-radius: 9px; background: rgba(255,255,255,.035); color: #f5f6ff; cursor: pointer; font: inherit; text-align: left; transition: background .18s ease, border-color .18s ease; }.station-result:hover, .station-result.is-selected { border-color: rgba(124,231,239,.65); background: rgba(124,231,239,.1); }.station-result strong, .station-result span { display: block; }.station-result strong { font-size: .88rem; }.station-result span { margin-top: 4px; color: #98a4cb; font-size: .7rem; }
.rail-feedback { margin: 5px 0; color: #aeb7db; font-size: .82rem; }.rail-feedback--error { color: #ffad91; }
.selected-station { margin-top: 22px; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, rgba(115,92,202,.28), rgba(70,150,189,.17)); }.selected-station p { margin: 0 0 7px; color: #7ce7ef; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.selected-station strong, .selected-station span, .selected-station small { display: block; }.selected-station strong { font-size: 1rem; }.selected-station span { margin-top: 4px; color: #b9c4e5; font-size: .78rem; }.selected-station small { margin-top: 13px; color: #a5b0d1; font-size: .71rem; line-height: 1.5; }
.rail-link { display: flex; justify-content: space-between; margin-top: 22px; color: #cbd3ef; font-size: .79rem; font-weight: 800; text-decoration: none; }.rail-link span { color: #7ce7ef; }
.viz-content { min-width: 0; }.viz-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }.period-switch, .chart-toggles { display: flex; gap: 5px; padding: 4px; border-radius: 999px; background: rgba(5,9,28,.28); }.period-switch button { padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: #9da9ce; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 900; }.period-switch button.is-active { background: #f4f5ff; color: #1a2044; }
.chart-toggles label { position: relative; cursor: pointer; }.chart-toggles input { position: absolute; opacity: 0; }.chart-toggles span { display: block; padding: 8px 10px; border-radius: 999px; color: #aeb7db; font-size: .73rem; font-weight: 800; }.chart-toggles input:checked + span { background: rgba(124,231,239,.13); color: #a7f4fa; }
.toolbar-actions { display: flex; gap: 9px; margin-left: auto; }.toolbar-actions button, .toolbar-actions a { padding: 9px 12px; border: 1px solid rgba(205,215,255,.19); border-radius: 8px; background: rgba(16,21,52,.52); color: #eef0ff; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 900; text-decoration: none; }.toolbar-actions button:hover, .toolbar-actions a:hover { border-color: #7ce7ef; color: #7ce7ef; }
.metric-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }.metric-card { min-height: 126px; padding: 17px; border-radius: 15px; background: rgba(33,40,83,.75); }.metric-card p { margin: 0; color: #aeb7db; font-size: .75rem; }.metric-card strong { display: block; margin: 15px 0 7px; color: #fff; font-size: clamp(1.55rem, 2.8vw, 2.25rem); font-weight: 500; letter-spacing: -.055em; }.metric-card span { color: #8d99bf; font-size: .72rem; }.metric-card--coral strong { color: #ffad91; }.metric-card--violet strong { color: #bca9ff; }.metric-card--blue strong { color: #8daeff; }.metric-card--cyan strong { color: #7ce7ef; }
.chart-panel, .data-panel { overflow: hidden; border-radius: 18px; background: rgba(31,38,78,.77); backdrop-filter: blur(18px); }.chart-panel { padding: 24px 24px 12px; }.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }.panel-heading h2 { margin: 0; color: #f5f6ff; font-size: 1.2rem; letter-spacing: -.035em; }.panel-heading > p, .panel-heading > span { max-width: 290px; margin: 0; color: #94a0c6; font-size: .75rem; line-height: 1.4; text-align: right; }.weather-chart { width: 100%; height: 420px; }.data-panel { margin-top: 16px; padding: 24px; }.daily-table-wrap { margin-top: 19px; overflow-x: auto; }.daily-table-wrap table { width: 100%; border-collapse: collapse; }.daily-table-wrap th { padding: 0 11px 11px; color: #8e9ac0; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-align: right; text-transform: uppercase; }.daily-table-wrap th:first-child, .daily-table-wrap td:first-child { text-align: left; }.daily-table-wrap td { padding: 12px 11px; border-top: 1px solid rgba(203,214,255,.1); color: #dbe1f7; font-size: .82rem; text-align: right; }.daily-table-wrap td:first-child { color: #fff; font-weight: 800; }.daily-table-wrap tbody tr:hover { background: rgba(255,255,255,.035); }
@media (max-width: 1050px) { .viz-workspace { grid-template-columns: 1fr; }.station-rail { position: relative; top: auto; display: grid; grid-template-columns: minmax(190px,.7fr) minmax(230px,1.2fr); gap: 16px; }.rail-head h2 { margin-bottom: 0; }.station-results { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 155px; }.selected-station, .rail-link { margin-top: 0; }.metric-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .viz-header, .viz-shell { width: min(100% - 32px, 1360px); }.viz-header { align-items: flex-start; flex-direction: column; gap: 14px; }.viz-header nav { gap: 14px; flex-wrap: wrap; }.viz-header nav a { font-size: .64rem; }.viz-intro { align-items: flex-start; flex-direction: column; padding: 30px 0; }.viz-legend { justify-content: start; }.viz-legend span:last-child { text-align: left; }.station-rail { display: block; }.station-results { display: grid; grid-template-columns: 1fr; max-height: 220px; }.selected-station { margin-top: 16px; }.viz-toolbar { align-items: flex-start; flex-wrap: wrap; }.toolbar-actions { width: 100%; margin-left: 0; }.toolbar-actions button, .toolbar-actions a { flex: 1; text-align: center; }.metric-cards { grid-template-columns: 1fr 1fr; }.chart-panel, .data-panel { padding: 18px; border-radius: 14px; }.panel-heading { align-items: flex-start; flex-direction: column; }.panel-heading > p, .panel-heading > span { text-align: left; }.weather-chart { height: 330px; } }

/* Experimental atmosphere dashboard. */
.atmo-page { min-height: 100vh; padding: clamp(20px, 5vw, 76px); box-sizing: border-box; color: #eaf6f8; background: radial-gradient(circle at 50% 7%, rgba(62,93,120,.65), transparent 43%), linear-gradient(135deg, #172d3b 0%, #253e4f 55%, #4f6571 100%); font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; }
.atmo-page::before { position: fixed; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(5,15,23,.7), transparent 34%), url("images/hero-meteo.png") bottom center / cover no-repeat; opacity: .3; content: ""; }
.atmo-frame { position: relative; z-index: 1; display: grid; grid-template-columns: 198px minmax(0, 1fr); width: min(1440px, 100%); min-height: 960px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(158,222,234,.13); border-radius: 24px; background: rgba(5,20,31,.88); box-shadow: 0 35px 90px rgba(5,13,20,.52); backdrop-filter: blur(18px); }
.atmo-sidebar { display: flex; flex-direction: column; padding: 34px 16px 24px; border-right: 1px solid rgba(152,214,226,.1); background: linear-gradient(180deg, rgba(2,14,23,.78), rgba(5,30,43,.65)), url("images/hero-meteo.png") center bottom / auto 100% no-repeat; }
.atmo-logo { display: flex; align-items: center; gap: 12px; margin: 0 15px 52px; color: #eaf6f8; font-size: .82rem; font-weight: 900; letter-spacing: .12em; line-height: 1.25; text-decoration: none; }.atmo-cloud { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid #3de3ec; border-radius: 12px; color: #3de3ec; font-size: 1.5rem; letter-spacing: 0; transform: rotate(-7deg); }
.atmo-nav { display: grid; gap: 7px; }.atmo-nav a { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-left: 3px solid transparent; border-radius: 0 11px 11px 0; color: #96aeb7; font-size: .8rem; text-decoration: none; }.atmo-nav a span { color: #54727d; font-size: .62rem; }.atmo-nav a:hover, .atmo-nav a.is-current { border-left-color: #3de3ec; background: linear-gradient(90deg, rgba(32,193,204,.18), transparent); color: #eaffff; }.atmo-nav a.is-current span { color: #3de3ec; }
.atmo-side-foot { margin: auto 14px 0; padding: 16px; border: 1px solid rgba(130,194,207,.12); border-radius: 12px; background: rgba(8,30,42,.61); }.atmo-side-foot p { margin: 0 0 5px; color: #4edce7; font-size: .65rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.atmo-side-foot strong, .atmo-side-foot small { display: block; }.atmo-side-foot strong { font-size: .85rem; }.atmo-side-foot small { margin-top: 6px; color: #89a5af; font-size: .68rem; }
.atmo-main { min-width: 0; padding: 35px clamp(20px, 3vw, 38px) 38px; background: linear-gradient(135deg, rgba(10,29,41,.83), rgba(11,25,46,.76)); }.atmo-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.atmo-topbar p { margin: 0; font-size: 1.25rem; font-weight: 700; }.atmo-topbar > div > span { display: block; margin-top: 6px; color: #8ca9b5; font-size: .75rem; }.atmo-actions { display: flex; align-items: center; gap: 9px; }.atmo-search { padding: 7px 11px; border: 1px solid rgba(154,206,219,.14); border-radius: 9px; background: rgba(5,16,27,.42); color: #7897a1; font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }.atmo-search input { width: 158px; margin-left: 7px; border: 0; outline: none; background: transparent; color: #eaffff; font: inherit; text-transform: none; }.atmo-actions > a { padding: 10px 13px; border: 1px solid rgba(154,206,219,.22); border-radius: 8px; color: #eaffff; font-size: .72rem; font-weight: 900; text-decoration: none; }.atmo-actions > a:hover { border-color: #3de3ec; color: #3de3ec; }
.atmo-results { display: flex; gap: 8px; min-height: 31px; margin: 18px 0; overflow-x: auto; }.atmo-results button { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(136,195,208,.14); border-radius: 8px; background: rgba(9,29,43,.5); color: #a5c0c8; cursor: pointer; font: inherit; text-align: left; }.atmo-results button strong, .atmo-results button span { display: block; }.atmo-results button strong { color: #eaffff; font-size: .76rem; }.atmo-results button span { margin-top: 2px; font-size: .62rem; }.atmo-results button.is-selected { border-color: #3de3ec; background: rgba(30,191,202,.15); }.atmo-results > span { color: #88a5ae; font-size: .75rem; }
.atmo-grid { display: grid; grid-template-columns: 230px minmax(360px, 1.75fr) minmax(190px, .85fr); gap: 12px; }.atmo-grid > article { border: 1px solid rgba(130,194,207,.12); border-radius: 14px; background: linear-gradient(145deg, rgba(17,45,61,.82), rgba(7,25,39,.73)); box-shadow: inset 0 1px rgba(211,250,255,.025); }.atmo-kicker { margin: 0; color: #9eafbc; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.atmo-current-card { position: relative; min-height: 270px; padding: 20px; overflow: hidden; }.atmo-current-value { position: relative; z-index: 1; display: flex; align-items: start; margin-top: 27px; }.atmo-current-value strong { font-size: 4.45rem; font-weight: 400; letter-spacing: -.08em; line-height: .85; }.atmo-current-value span { margin: 6px 0 0 7px; font-size: 1.7rem; }.atmo-current-card > p:not(.atmo-kicker) { position: relative; z-index: 1; margin: 18px 0; font-size: .9rem; }.atmo-cloud-art { position: absolute; top: 76px; right: -15px; width: 132px; height: 78px; opacity: .84; filter: blur(.2px); }.atmo-cloud-art i { position: absolute; border-radius: 50%; background: linear-gradient(150deg, #e9f1f5, #8498aa); box-shadow: -16px 18px 29px rgba(0,0,0,.38); }.atmo-cloud-art i:nth-child(1) { width: 65px; height: 65px; right: 20px; bottom: 0; }.atmo-cloud-art i:nth-child(2) { width: 51px; height: 51px; right: 64px; bottom: 3px; }.atmo-cloud-art i:nth-child(3) { width: 42px; height: 42px; right: 2px; bottom: 3px; }.atmo-current-meta { position: absolute; right: 20px; bottom: 19px; left: 20px; display: flex; justify-content: space-between; }.atmo-current-meta small, .atmo-current-meta b { display: block; }.atmo-current-meta small { color: #839eaa; font-size: .67rem; }.atmo-current-meta b { margin-top: 5px; font-size: .85rem; }
.atmo-chart-card { min-height: 270px; padding: 20px; }.atmo-card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.atmo-card-head h1, .atmo-card-head h2 { margin: 7px 0 0; font-size: 1.05rem; }.atmo-segment { display: flex; padding: 3px; border-radius: 8px; background: rgba(2,15,25,.5); }.atmo-segment button { padding: 6px 7px; border: 0; border-radius: 6px; background: transparent; color: #7193a0; cursor: pointer; font: inherit; font-size: .65rem; font-weight: 900; }.atmo-segment button.is-active { background: #3dd9e4; color: #08202c; }.atmo-chart { height: 205px; }.atmo-chart-bottom { display: flex; justify-content: space-between; color: #7898a3; font-size: .68rem; }.atmo-chart-bottom button { border: 0; background: transparent; color: #52deea; cursor: pointer; font: inherit; font-size: .68rem; font-weight: 800; }
.atmo-rain-card, .atmo-stat-card, .atmo-station-card { min-height: 115px; padding: 18px; }.atmo-rain-card strong, .atmo-stat-card strong, .atmo-station-card strong { display: block; margin-top: 19px; font-size: 1.75rem; font-weight: 400; letter-spacing: -.05em; }.atmo-rain-card > span, .atmo-stat-card > span, .atmo-station-card > span { display: block; margin-top: 5px; color: #8ca9b4; font-size: .68rem; }.atmo-rain-chart { height: 55px; margin-top: 5px; }.atmo-wind-line { display: flex; align-items: end; gap: 5px; height: 32px; margin-top: 13px; }.atmo-wind-line i { width: 16%; border-radius: 999px; background: #3edbe6; }.atmo-wind-line i:nth-child(1) { height: 22%; }.atmo-wind-line i:nth-child(2) { height: 46%; }.atmo-wind-line i:nth-child(3) { height: 31%; }.atmo-wind-line i:nth-child(4) { height: 75%; }.atmo-station-card small { display: block; margin-top: 15px; color: #6f919b; font-size: .68rem; }
.atmo-table-card { grid-column: 1 / -1; padding: 20px; }.atmo-card-head > span { color: #7d9aa5; font-size: .68rem; }.atmo-table-wrap { margin-top: 17px; overflow-x: auto; }.atmo-table-wrap table { width: 100%; border-collapse: collapse; }.atmo-table-wrap th { padding: 0 9px 10px; color: #70909b; font-size: .61rem; letter-spacing: .08em; text-align: right; text-transform: uppercase; }.atmo-table-wrap td { padding: 10px 9px; border-top: 1px solid rgba(130,194,207,.1); color: #c4d7dc; font-size: .74rem; text-align: right; }.atmo-table-wrap th:first-child, .atmo-table-wrap td:first-child { color: #edfdfd; font-weight: 800; text-align: left; }
@media (max-width: 1080px) { .atmo-page { padding: 20px; }.atmo-frame { grid-template-columns: 1fr; }.atmo-sidebar { display: block; padding: 18px; border-right: 0; border-bottom: 1px solid rgba(152,214,226,.1); background: rgba(2,14,23,.8); }.atmo-logo { margin: 0 0 17px; }.atmo-nav { display: flex; overflow-x: auto; }.atmo-nav a { flex: 0 0 auto; }.atmo-side-foot { display: none; }.atmo-grid { grid-template-columns: 1fr 1.6fr 1fr; } }
@media (max-width: 720px) { .atmo-page { padding: 0; }.atmo-frame { min-height: 100vh; border: 0; border-radius: 0; }.atmo-main { padding: 22px 16px; }.atmo-topbar { align-items: flex-start; flex-direction: column; }.atmo-actions { width: 100%; }.atmo-search { flex: 1; }.atmo-search input { width: calc(100% - 80px); }.atmo-grid { grid-template-columns: 1fr; }.atmo-chart-card { min-height: 250px; }.atmo-current-card, .atmo-chart-card, .atmo-rain-card, .atmo-stat-card, .atmo-station-card { grid-column: auto; }.atmo-table-card { grid-column: auto; }.atmo-chart { height: 190px; } }

/* Experimental atmosphere documentation. */
.atmo-docs-main { padding-bottom: 48px; }.atmo-docs-toplink, .atmo-docs-download { padding: 10px 13px; border: 1px solid rgba(154,206,219,.22); border-radius: 8px; color: #8deaf0; font-size: .72rem; font-weight: 900; text-decoration: none; }.atmo-docs-toplink:hover, .atmo-docs-download:hover { border-color: #3de3ec; color: #eaffff; }
.atmo-doc-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0 12px; }.atmo-doc-sources article, .atmo-doc-stats article, .atmo-catalog-panel, .atmo-quality-panel { border: 1px solid rgba(130,194,207,.12); border-radius: 14px; background: linear-gradient(145deg, rgba(17,45,61,.82), rgba(7,25,39,.73)); }.atmo-doc-sources article { min-height: 148px; padding: 19px; }.atmo-doc-sources span { color: #3de3ec; font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.atmo-doc-sources h2 { margin: 12px 0 7px; font-size: .97rem; line-height: 1.3; }.atmo-doc-sources p { margin: 0; color: #829da8; font-size: .7rem; }.atmo-doc-sources div { display: flex; gap: 15px; margin-top: 20px; }.atmo-doc-sources a { color: #eaffff; font-size: .7rem; font-weight: 900; text-decoration: none; }.atmo-doc-sources a:hover { color: #3de3ec; }
.atmo-doc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.atmo-doc-stats article { padding: 16px; }.atmo-doc-stats p { margin: 0; color: #8da8b2; font-size: .68rem; }.atmo-doc-stats strong { display: block; margin-top: 13px; color: #eaffff; font-size: 1.9rem; font-weight: 400; letter-spacing: -.05em; }.atmo-doc-stats article:nth-child(1) strong { color: #7adff0; }.atmo-doc-stats article:nth-child(2) strong { color: #c7a0ff; }.atmo-doc-stats article:nth-child(3) strong { color: #f5ac55; }
.atmo-catalog-panel { margin-top: 12px; padding: 22px; }.atmo-catalog-panel .atmo-card-head h1 { font-size: 1.15rem; }.atmo-doc-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 24px 0 12px; }.atmo-doc-search { padding: 8px 11px; border: 1px solid rgba(154,206,219,.14); border-radius: 8px; background: rgba(5,16,27,.42); color: #7e9ca7; font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }.atmo-doc-search input { width: 230px; margin-left: 7px; border: 0; outline: none; background: transparent; color: #eaffff; font: inherit; text-transform: none; }.atmo-doc-count { margin: 0 0 9px; color: #7895a0; font-size: .69rem; }.atmo-doc-rows { overflow: hidden; border: 1px solid rgba(130,194,207,.1); border-radius: 10px; }.atmo-doc-rows article { display: grid; grid-template-columns: 112px minmax(0, 1fr) 76px 76px; gap: 12px; align-items: start; padding: 14px; border-bottom: 1px solid rgba(130,194,207,.09); background: rgba(3,18,30,.28); }.atmo-doc-rows article:last-child { border-bottom: 0; }.atmo-doc-rows code { width: fit-content; padding: 4px 6px; border-radius: 4px; background: rgba(56,210,221,.11); color: #51dce7; font-size: .7rem; font-weight: 900; }.atmo-doc-rows strong { color: #efffff; font-size: .82rem; }.atmo-doc-rows p { margin: 4px 0 0; color: #8ba7b1; font-size: .71rem; line-height: 1.45; }.atmo-doc-rows > article > span { color: #7d9ca6; font-size: .7rem; }.atmo-doc-empty { padding: 19px; color: #8ba7b1; font-size: .78rem; }
.atmo-quality-panel { display: grid; grid-template-columns: 190px 1fr; gap: 18px; margin-top: 12px; padding: 21px; }.atmo-quality-panel h2 { margin: 7px 0 0; font-size: 1.1rem; }.atmo-quality-rows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }.atmo-quality-rows article { display: grid; grid-template-columns: 29px 1fr; gap: 9px; }.atmo-quality-rows strong { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #3bd9e4; color: #07202b; font-size: .74rem; }.atmo-quality-rows h3 { margin: 1px 0 4px; font-size: .75rem; }.atmo-quality-rows p { margin: 0; color: #829fa9; font-size: .65rem; line-height: 1.4; }
@media (max-width: 920px) { .atmo-doc-sources { grid-template-columns: 1fr; }.atmo-quality-panel { grid-template-columns: 1fr; }.atmo-quality-rows { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .atmo-doc-stats { grid-template-columns: 1fr 1fr; }.atmo-doc-controls { align-items: flex-start; flex-direction: column; }.atmo-doc-search { width: 100%; box-sizing: border-box; }.atmo-doc-search input { width: calc(100% - 78px); }.atmo-doc-rows article { grid-template-columns: 84px 1fr; }.atmo-doc-rows > article > span { grid-column: 2; }.atmo-quality-rows { grid-template-columns: 1fr; } }

/* Experimental editorial light dashboard. */
.lightviz-page { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 100vh; color: #153244; background: #fbfaf7; font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; }.lightviz-side { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 26px 13px; box-sizing: border-box; border-right: 1px solid #e6e7e4; background: rgba(255,255,255,.88); }.lightviz-logo { display: flex; align-items: center; gap: 10px; margin: 0 11px 46px; color: #153244; font-size: .75rem; font-weight: 900; letter-spacing: .11em; line-height: 1.25; text-decoration: none; }.lightviz-mark { display: grid; width: 35px; height: 35px; place-items: center; border: 2px solid #ff6720; border-radius: 50% 50% 42% 42%; color: #ff6720; font-size: 1.5rem; transform: rotate(-8deg); }.lightviz-side nav { display: grid; gap: 6px; }.lightviz-side nav a { display: block; padding: 13px 14px; border-left: 3px solid transparent; border-radius: 0 9px 9px 0; color: #39556a; font-size: .8rem; font-weight: 700; text-decoration: none; }.lightviz-side nav a:hover, .lightviz-side nav a.is-current { border-left-color: #ff6720; background: linear-gradient(90deg, rgba(255,103,32,.13), transparent); color: #ec5d1e; }.lightviz-station-search { margin: auto 9px 0; }.lightviz-station-search label { color: #6d8492; font-size: .65rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }.lightviz-station-search input { width: 100%; box-sizing: border-box; margin-top: 7px; padding: 10px; border: 1px solid #dce3e5; border-radius: 8px; outline: none; background: #fbfcfb; color: #153244; font: inherit; text-transform: none; }.lightviz-station-search input:focus { border-color: #ff6720; box-shadow: 0 0 0 3px rgba(255,103,32,.12); }.lightviz-station-search #lightResults { display: grid; gap: 5px; max-height: 170px; margin-top: 8px; overflow: auto; }.lightviz-station-search #lightResults button { padding: 8px; border: 1px solid transparent; border-radius: 7px; background: #f5f6f3; color: #2b4b5d; cursor: pointer; font: inherit; text-align: left; }.lightviz-station-search #lightResults button strong, .lightviz-station-search #lightResults button small { display: block; }.lightviz-station-search #lightResults button strong { font-size: .72rem; }.lightviz-station-search #lightResults button small { margin-top: 3px; color: #77909c; font-size: .62rem; }.lightviz-station-search #lightResults button.is-selected { border-color: #ff6720; background: #fff5ef; }.lightviz-station-search #lightResults > span { color: #7a909c; font-size: .7rem; }
.lightviz-main { width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 44px 0 38px; }.lightviz-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; }.lightviz-eyebrow { margin: 0 0 10px; color: #ff6720; font-size: .67rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.lightviz-head h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5.8vw, 5.6rem); font-weight: 500; letter-spacing: -.07em; line-height: .9; }.lightviz-head > div > p:last-child { max-width: 600px; margin: 18px 0 0; color: #5d7482; font-size: .98rem; line-height: 1.55; }.lightviz-head-actions { display: flex; align-items: center; gap: 12px; }.lightviz-period { display: flex; padding: 4px; border: 1px solid #e1e5e6; border-radius: 999px; background: #fff; }.lightviz-period button { padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; color: #6f8490; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 900; }.lightviz-period button.is-active { background: #153244; color: #fff; }.lightviz-head-actions > a { padding: 11px 14px; border-radius: 9px; background: #ff6720; color: #fff; font-size: .72rem; font-weight: 900; text-decoration: none; }.lightviz-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0 14px; }.lightviz-metric, .lightviz-panel { border: 1px solid #e5e7e5; border-radius: 15px; background: rgba(255,255,255,.8); box-shadow: 0 12px 32px rgba(20,50,68,.045); }.lightviz-metric { display: flex; gap: 13px; min-height: 102px; padding: 18px; }.lightviz-icon { flex: 0 0 29px; width: 29px; height: 29px; border: 2px solid #ff6720; border-radius: 50% 50% 45% 45%; }.lightviz-icon--rain { border-color: #7896a6; border-radius: 50% 50% 55% 55%; transform: rotate(45deg) scale(.72); }.lightviz-icon--wind { border: 0; border-top: 2px solid #153244; border-bottom: 2px solid #153244; border-radius: 0; height: 18px; margin-top: 4px; }.lightviz-icon--amp { border-color: #153244; border-radius: 8px; }.lightviz-metric p { margin: 0; color: #294559; font-size: .75rem; font-weight: 800; }.lightviz-metric strong { display: block; margin: 11px 0 5px; font-size: 1.5rem; letter-spacing: -.05em; }.lightviz-metric small { color: #7b919b; font-size: .65rem; }.lightviz-top-grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(250px, .9fr); gap: 14px; }.lightviz-mid-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-top: 14px; }.lightviz-panel { padding: 20px; }.lightviz-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 13px; }.lightviz-panel h2 { margin: 0; font-size: 1.08rem; letter-spacing: -.04em; }.lightviz-panel-head button { padding: 8px 9px; border: 1px solid #d7dfe1; border-radius: 7px; background: #fff; color: #2c4b5d; cursor: pointer; font: inherit; font-size: .67rem; font-weight: 900; }.lightviz-main-chart { height: 305px; }.lightviz-small-chart { height: 210px; }.lightviz-insight-panel > .lightviz-eyebrow { margin-bottom: 21px; }.lightviz-insight { display: grid; grid-template-columns: 28px 1fr; gap: 11px; padding: 14px 0; border-bottom: 1px solid #edf0ee; }.lightviz-insight:last-child { border-bottom: 0; }.lightviz-insight > span { width: 23px; height: 23px; border: 2px solid #ff6720; border-radius: 50%; }.lightviz-insight--1 > span { border-color: #7799ad; }.lightviz-insight--2 > span { border-color: #153244; border-radius: 8px; }.lightviz-insight p, .lightviz-insight small { margin: 0; color: #6f8692; font-size: .69rem; }.lightviz-insight strong { display: block; margin: 6px 0 4px; font-size: 1.15rem; }.lightviz-donut-layout { display: flex; align-items: center; gap: 8px; height: 210px; }.lightviz-donut-chart { width: 50%; height: 190px; }.lightviz-donut-legend { display: grid; gap: 9px; flex: 1; }.lightviz-donut-legend span { display: flex; align-items: center; gap: 6px; color: #607987; font-size: .7rem; }.lightviz-donut-legend i { width: 8px; height: 8px; border-radius: 50%; }.lightviz-donut-legend b { margin-left: auto; color: #274658; }.lightviz-table-panel { margin-top: 14px; }.lightviz-table-wrap { margin-top: 16px; overflow-x: auto; }.lightviz-table-wrap table { width: 100%; border-collapse: collapse; }.lightviz-table-wrap th { padding: 0 9px 9px; color: #708591; font-size: .62rem; letter-spacing: .08em; text-align: right; text-transform: uppercase; }.lightviz-table-wrap td { padding: 10px 9px; border-top: 1px solid #e9edeb; color: #4e6875; font-size: .73rem; text-align: right; }.lightviz-table-wrap th:first-child, .lightviz-table-wrap td:first-child { color: #1f4053; font-weight: 900; text-align: left; }.lightviz-footer { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 18px 22px; border-radius: 13px; background: #153244; color: #fff; }.lightviz-footer > div { margin-right: auto; }.lightviz-footer span { color: #ff8a50; font-size: .72rem; font-weight: 900; }.lightviz-footer p { margin: 5px 0 0; color: #c6d6dd; font-size: .72rem; }.lightviz-footer button, .lightviz-footer a { padding: 11px 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 900; text-decoration: none; }.lightviz-footer a { border-color: #ff6720; background: #ff6720; }
.lightviz-station-line { display: flex; align-items: center; gap: 13px; margin-top: 18px; }.lightviz-station-line #lightSubtitle { max-width: 600px; margin: 0; color: #5d7482; font-size: .88rem; line-height: 1.5; }.lightviz-station-picker { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 7px; padding: 10px 13px; border: 1px solid #ff6720; border-radius: 9px; background: #ff6720; color: #fff; box-shadow: 0 8px 18px rgba(255,103,32,.22); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 900; white-space: nowrap; }.lightviz-station-picker:hover { background: #e95613; border-color: #e95613; transform: translateY(-1px); }.lightviz-station-picker span { font-size: 1rem; line-height: 1; }
.lightviz-normal-panel { min-height: 210px; }.lightviz-normal-badge { padding: 5px 7px; border: 1px solid #dbe3e3; border-radius: 999px; color: #657d89; font-size: .58rem; font-weight: 900; letter-spacing: .06em; }.lightviz-normal-content { display: grid; gap: 16px; margin-top: 16px; }.lightviz-normal-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }.lightviz-normal-section-head strong { color: #294758; font-size: .78rem; }.lightviz-normal-section-head span { color: #7c929c; font-size: .69rem; text-transform: capitalize; }.lightviz-normal-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.lightviz-normal-metric { display: grid; gap: 4px; min-width: 0; padding: 10px; border-radius: 8px; background: #f4f7f6; }.lightviz-normal-metric > span { color: #69808c; font-size: .67rem; font-weight: 800; }.lightviz-normal-metric strong { color: #183849; font-size: 1.08rem; letter-spacing: -.04em; }.lightviz-normal-metric small { overflow: hidden; color: #78909a; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.lightviz-normal-metric b { color: #788f99; font-size: .86rem; }.lightviz-normal-metric b.is-positive { color: #de5a1d; }.lightviz-normal-metric b.is-negative { color: #367aab; }.lightviz-normal-decades { padding-top: 12px; border-top: 1px solid #e6ecea; }.lightviz-decade-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }.lightviz-decade { overflow: hidden; border: 1px solid #e1e9e8; border-radius: 8px; }.lightviz-decade > header { padding: 6px 8px; background: #edf3f1; color: #365767; font-size: .66rem; font-weight: 900; }.lightviz-decade .lightviz-normal-metric { padding: 6px 8px; border-radius: 0; background: transparent; }.lightviz-decade .lightviz-normal-metric strong { font-size: .82rem; }.lightviz-decade .lightviz-normal-metric small { display: none; }.lightviz-decade .lightviz-normal-metric > span { font-size: .61rem; }.lightviz-decade .lightviz-normal-metric b { font-size: .68rem; }.lightviz-normal-empty, .lightviz-normal-unavailable { display: grid; gap: 5px; padding: 13px; border: 1px dashed #d8e2e1; border-radius: 9px; color: #718792; font-size: .68rem; }.lightviz-normal-empty strong, .lightviz-normal-unavailable strong { color: #405d6b; font-size: .72rem; }
@media (max-width: 1050px) { .lightviz-main { width: min(100% - 48px, 1200px); }.lightviz-page { grid-template-columns: 170px minmax(0,1fr); }.lightviz-metrics { grid-template-columns: 1fr 1fr; }.lightviz-head { align-items: flex-start; flex-direction: column; }.lightviz-top-grid, .lightviz-mid-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .lightviz-page { display: block; }.lightviz-side { position: relative; height: auto; padding: 17px; border-bottom: 1px solid #e6e7e4; border-right: 0; }.lightviz-logo { margin: 0 0 17px; }.lightviz-side nav { display: flex; overflow-x: auto; }.lightviz-side nav a { flex: 0 0 auto; }.lightviz-station-search { margin: 18px 0 0; }.lightviz-main { width: min(100% - 32px, 1200px); padding-top: 28px; }.lightviz-head-actions { width: 100%; justify-content: space-between; }.lightviz-station-line { align-items: flex-start; flex-direction: column; }.lightviz-metrics { grid-template-columns: 1fr; }.lightviz-footer { align-items: flex-start; flex-direction: column; }.lightviz-footer > div { margin-right: 0; }.lightviz-footer button, .lightviz-footer a { width: 100%; box-sizing: border-box; text-align: center; }.lightviz-main-chart { height: 260px; } }

.lightviz-theme-switch { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid #d7dfe1; border-radius: 9px; background: #fff; color: #29475a; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 900; white-space: nowrap; }.lightviz-theme-switch span { color: #ff6720; font-size: 1rem; line-height: 1; }.lightviz-theme-switch:hover { border-color: #ff6720; }
.lightviz-station-search { min-width: 0; }.lightviz-map-help { margin: 7px 0; color: #718895; font-size: .65rem; line-height: 1.35; }.lightviz-station-search #lightStationMap { height: 178px; border: 1px solid #dbe3e3; border-radius: 10px; background: #e8efed; overflow: hidden; }.lightviz-map-status { margin-top: 6px; color: #718895; font-size: .61rem; line-height: 1.3; }.lightviz-station-search #lightResults { max-height: 105px; }.lightviz-station-search .leaflet-control-zoom { border: 0; box-shadow: 0 2px 8px rgba(26,55,65,.16); }.lightviz-station-search .leaflet-control-zoom a { width: 23px; height: 23px; border-color: #d9e2e1; background: #fff; color: #254958; font-size: 16px; line-height: 23px; }.lightviz-map-tooltip { padding: 5px 7px; border: 0; border-radius: 6px; background: #173541; color: #fff; box-shadow: 0 3px 12px rgba(7,30,36,.2); font-size: .65rem; }.lightviz-map-tooltip:before { border-top-color: #173541; }
.lightviz-station-search #lightResults { max-height: 170px; }.lightviz-open-map { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 9px; padding: 10px; border: 1px solid #d8e1e2; border-radius: 8px; background: #f7f9f8; color: #294b5c; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 900; }.lightviz-open-map span { color: #ff6720; font-size: 1.1rem; }.lightviz-open-map:hover { border-color: #ff6720; background: #fff4ed; }.lightviz-map-modal { position: fixed; z-index: 1200; inset: 0; display: none; place-items: center; padding: 28px; background: rgba(6,19,25,.56); backdrop-filter: blur(7px); }.lightviz-map-modal.is-open { display: grid; }.lightviz-map-dialog { width: min(1050px, 100%); max-height: min(760px, calc(100vh - 56px)); overflow: hidden; border: 1px solid #dce4e3; border-radius: 18px; background: #fbfaf7; box-shadow: 0 26px 80px rgba(4,20,27,.34); }.lightviz-map-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 28px 18px; border-bottom: 1px solid #e5e9e7; }.lightviz-map-dialog h2 { margin: 0; color: #153244; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 500; letter-spacing: -.045em; }.lightviz-map-dialog header > div > p:last-child { margin: 8px 0 0; color: #66808d; font-size: .78rem; }.lightviz-map-dialog header > button { width: 34px; height: 34px; border: 1px solid #d6e0e0; border-radius: 50%; background: #fff; color: #355666; cursor: pointer; font-size: 1.45rem; line-height: 1; }.lightviz-picker-content { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, .75fr); min-height: 495px; }.lightviz-picker-content #lightDepartmentMap { min-height: 495px; background: #e8efed; }.lightviz-picker-stations { padding: 20px; border-left: 1px solid #e5e9e7; background: #fff; }.lightviz-picker-stations > p { margin: 0 0 14px; color: #607b87; font-size: .75rem; font-weight: 800; }.lightviz-picker-stations > div { display: grid; gap: 7px; max-height: 420px; overflow: auto; }.lightviz-picker-stations button { padding: 11px 10px; border: 1px solid #e2e9e8; border-radius: 8px; background: #f8faf9; color: #244555; cursor: pointer; font: inherit; text-align: left; }.lightviz-picker-stations button:hover { border-color: #ff6720; background: #fff5ef; }.lightviz-picker-stations button strong, .lightviz-picker-stations button small { display: block; }.lightviz-picker-stations button strong { font-size: .73rem; }.lightviz-picker-stations button small { margin-top: 4px; color: #718894; font-size: .63rem; }

/* Experimental editorial night dashboard. */
.darkviz-page { color: #e8edf0; background: radial-gradient(circle at 70% 0%, rgba(38,70,76,.23), transparent 36rem), linear-gradient(135deg, #071217, #0d1d23 55%, #10252a); }.darkviz-page .lightviz-side { border-color: rgba(151,182,188,.13); background: rgba(6,17,22,.94); }.darkviz-page .lightviz-logo { color: #f4f7f7; }.darkviz-page .lightviz-mark { border-color: #ff6720; }.darkviz-page .lightviz-side nav a { color: #aebcc1; }.darkviz-page .lightviz-side nav a:hover, .darkviz-page .lightviz-side nav a.is-current { border-left-color: #ff6720; background: linear-gradient(90deg, rgba(255,103,32,.18), transparent); color: #ff7b3d; }.darkviz-page .lightviz-station-search label { color: #9db0b6; }.darkviz-page .lightviz-station-search input { border-color: rgba(155,191,198,.16); background: #0b1c22; color: #eaf5f6; }.darkviz-page .lightviz-station-search #lightResults button { background: #0c2027; color: #a7bbc1; }.darkviz-page .lightviz-station-search #lightResults button strong { color: #eaf5f6; }.darkviz-page .lightviz-station-search #lightResults button.is-selected { border-color: #ff6720; background: rgba(255,103,32,.1); }.darkviz-page .lightviz-main { width: min(1260px, calc(100% - 76px)); }.darkviz-page .lightviz-eyebrow { color: #ff7b3d; }.darkviz-page .lightviz-head h1 { color: #f2f5f4; }.darkviz-page .lightviz-head > div > p:last-child { color: #aebdc2; }.darkviz-page .lightviz-period { border-color: rgba(150,184,190,.18); background: #0c1d23; }.darkviz-page .lightviz-period button { color: #90a7ae; }.darkviz-page .lightviz-period button.is-active { background: #ff6720; color: #fff; }.darkviz-page .lightviz-head-actions > a { background: #df5520; }.darkviz-page .lightviz-metric, .darkviz-page .lightviz-panel { border-color: rgba(139,179,187,.13); background: linear-gradient(145deg, #12252c, #0b1a20); box-shadow: 0 15px 38px rgba(0,0,0,.18); }.darkviz-page .lightviz-icon { border-color: #ff6720; }.darkviz-page .lightviz-icon--rain { border-color: #8aabcf; }.darkviz-page .lightviz-icon--wind { border-color: #b2c9d4; }.darkviz-page .lightviz-icon--amp { border-color: #77a7d0; }.darkviz-page .lightviz-metric p { color: #c3d0d3; }.darkviz-page .lightviz-metric strong, .darkviz-page .lightviz-panel h2 { color: #f2f7f7; }.darkviz-page .lightviz-metric small, .darkviz-page .lightviz-insight p, .darkviz-page .lightviz-insight small { color: #8fa8af; }.darkviz-page .lightviz-panel-head button { border-color: rgba(155,190,197,.22); background: #10252c; color: #dcebee; }.darkviz-page .lightviz-insight { border-color: rgba(149,188,195,.12); }.darkviz-page .lightviz-insight > span { border-color: #ff6720; }.darkviz-page .lightviz-insight--1 > span { border-color: #77a7d0; }.darkviz-page .lightviz-insight--2 > span { border-color: #c3d0d3; }.darkviz-page .lightviz-donut-legend span { color: #a7b8bd; }.darkviz-page .lightviz-donut-legend b { color: #e8f1f2; }.darkviz-page .lightviz-table-wrap th { color: #8ea7ae; }.darkviz-page .lightviz-table-wrap td { border-color: rgba(145,184,192,.1); color: #bbcbcf; }.darkviz-page .lightviz-table-wrap th:first-child, .darkviz-page .lightviz-table-wrap td:first-child { color: #f1f6f6; }.darkviz-page .lightviz-footer { background: linear-gradient(90deg, #0c1c22, #162c32); border: 1px solid rgba(154,191,198,.13); }.darkviz-page .lightviz-footer p { color: #a9bdc1; }.darkviz-page .lightviz-footer button { border-color: rgba(215,234,238,.35); }.darkviz-page .lightviz-footer a { background: #df5520; border-color: #df5520; }

.darkviz-page .lightviz-theme-switch { border-color: rgba(155,190,197,.22); background: #10252c; color: #dcebee; }.darkviz-page .lightviz-theme-switch span { color: #ff9a53; }
.darkviz-page .lightviz-map-help, .darkviz-page .lightviz-map-status { color: #94aab0; }.darkviz-page .lightviz-station-search #lightStationMap { border-color: rgba(155,190,197,.18); background: #0b1c22; }.darkviz-page .lightviz-station-search .leaflet-control-zoom a { border-color: rgba(155,190,197,.2); background: #10252c; color: #dcebee; }
@media (max-width: 720px) { .lightviz-map-modal { padding: 12px; }.lightviz-map-dialog { max-height: calc(100vh - 24px); }.lightviz-map-dialog > header { padding: 20px 18px 15px; }.lightviz-map-dialog h2 { font-size: 1.55rem; }.lightviz-picker-content { grid-template-columns: 1fr; min-height: 0; }.lightviz-picker-content #lightDepartmentMap { min-height: 330px; }.lightviz-picker-stations { min-height: 180px; border-top: 1px solid #e5e9e7; border-left: 0; }.lightviz-picker-stations > div { max-height: 190px; } }
.darkviz-page .lightviz-open-map { border-color: rgba(155,190,197,.2); background: #10252c; color: #dcebee; }.darkviz-page .lightviz-open-map:hover { border-color: #ff6720; background: rgba(255,103,32,.12); }.darkviz-page .lightviz-map-dialog { border-color: rgba(155,190,197,.18); background: #0c1d23; }.darkviz-page .lightviz-map-dialog > header, .darkviz-page .lightviz-picker-stations { border-color: rgba(155,190,197,.14); background: #0c1d23; }.darkviz-page .lightviz-map-dialog h2 { color: #eef6f7; }.darkviz-page .lightviz-map-dialog header > div > p:last-child, .darkviz-page .lightviz-picker-stations > p { color: #97aeb4; }.darkviz-page .lightviz-map-dialog header > button { border-color: rgba(155,190,197,.22); background: #10252c; color: #e4f0f1; }.darkviz-page .lightviz-picker-content #lightDepartmentMap { background: #10252c; }.darkviz-page .lightviz-picker-stations button { border-color: rgba(155,190,197,.15); background: #10252c; color: #e6f1f2; }.darkviz-page .lightviz-picker-stations button small { color: #9ab0b6; }

.darkviz-page .lightviz-station-line #lightSubtitle { color: #aebdc2; }.darkviz-page .lightviz-station-picker { background: #df5520; border-color: #df5520; box-shadow: 0 8px 20px rgba(0,0,0,.2); }.darkviz-page .lightviz-station-picker:hover { background: #ff6b21; border-color: #ff6b21; }
.darkviz-page .lightviz-normal-badge { border-color: rgba(155,190,197,.2); color: #a5b9be; }.darkviz-page .lightviz-normal-section-head strong, .darkviz-page .lightviz-normal-empty strong, .darkviz-page .lightviz-normal-unavailable strong { color: #e1edef; }.darkviz-page .lightviz-normal-section-head span, .darkviz-page .lightviz-normal-empty, .darkviz-page .lightviz-normal-unavailable { color: #91a8af; }.darkviz-page .lightviz-normal-metric { background: #10252c; }.darkviz-page .lightviz-normal-metric > span, .darkviz-page .lightviz-normal-metric small { color: #91a9b0; }.darkviz-page .lightviz-normal-metric strong { color: #edf5f5; }.darkviz-page .lightviz-normal-metric b { color: #a9bdc1; }.darkviz-page .lightviz-normal-metric b.is-positive { color: #ff8150; }.darkviz-page .lightviz-normal-metric b.is-negative { color: #80b8df; }.darkviz-page .lightviz-normal-decades { border-color: rgba(149,188,195,.14); }.darkviz-page .lightviz-decade { border-color: rgba(155,190,197,.16); }.darkviz-page .lightviz-decade > header { background: #102830; color: #c5d8dc; }.darkviz-page .lightviz-normal-empty, .darkviz-page .lightviz-normal-unavailable { border-color: rgba(155,190,197,.2); }

/* Shared geographic picker for station and department analysis pages. */
.normal-header .lightviz-station-line p { max-width: 660px; margin: 0; color: #aebdc2; font-size: .88rem; line-height: 1.5; }
.lightviz-station-line .station-identity {
  display: grid;
  gap: 4px;
  min-width: min(100%, 300px);
  max-width: 660px;
  box-sizing: border-box;
  padding: 8px 14px;
  border-left: 3px solid #ff6720;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(255, 103, 32, .1), transparent 88%);
  line-height: 1.2;
}
.lightviz-station-line .station-identity strong {
  color: #173f52;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.lightviz-station-line .station-identity span {
  color: #6d8491;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.darkviz-page .lightviz-station-line .station-identity {
  background: linear-gradient(90deg, rgba(255, 103, 32, .15), rgba(255, 103, 32, .025) 72%, transparent);
}
.darkviz-page .lightviz-station-line .station-identity strong { color: #f7fbfb; }
.darkviz-page .lightviz-station-line .station-identity span { color: #a9bcc1; }
.lightviz-picker-content #analysisStationPickerMap,
.lightviz-picker-content #departmentPickerMap { min-height: 495px; background: #10252c; }
.department-picker-search #departmentSearchResults { display: grid; gap: 6px; max-height: 190px; margin-top: 8px; overflow-y: auto; }
.department-picker-search #departmentSearchResults button { padding: 9px; border: 1px solid rgba(155,191,198,.15); border-radius: 7px; background: #0c2027; color: #eaf5f6; cursor: pointer; font: inherit; text-align: left; }
.department-picker-search #departmentSearchResults button:hover { border-color: #ff6720; background: rgba(255,103,32,.1); }
.department-picker-search #departmentSearchResults strong,
.department-picker-search #departmentSearchResults small { display: block; }
.department-picker-search #departmentSearchResults strong { font-size: .69rem; }
.department-picker-search #departmentSearchResults small { margin-top: 3px; color: #91a8af; font-size: .61rem; }
body.has-map-modal { overflow: hidden; }
@media (max-width: 720px) {
  .lightviz-picker-content #analysisStationPickerMap,
  .lightviz-picker-content #departmentPickerMap { min-height: 330px; }
}

@media (max-width: 560px) {

  .home-nav {
    flex-direction: column;
  }

  .home-nav-links {
    justify-content: flex-start;
  }

  .home-hero {
    min-height: 820px;
  }

  .home-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-btn {
    width: 100%;
  }

  .home-stats {
    gap: 14px;
  }

  .home-stats strong {
    font-size: 2rem;
  }
}

/* Photo-led art direction for the landing page. */
.home-hero {
  min-height: min(820px, calc(100vh - 68px));
  background: #1e2b2c;
}

.home-weather-scene {
  background: url("images/hero-meteo.webp") center center / cover no-repeat;
}

.home-weather-scene::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 15, 20, 0.73) 0%, rgba(7, 20, 25, 0.48) 39%, rgba(8, 19, 23, 0.1) 74%);
  filter: none;
}

.home-weather-scene::after {
  display: none;
}

.home-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 18, 23, 0.04) 28%, rgba(4, 12, 15, 0.74) 100%),
    radial-gradient(ellipse at 74% 24%, transparent 0%, rgba(2, 12, 17, 0.13) 64%, rgba(2, 10, 13, 0.4) 100%);
}

.home-nav {
  position: absolute;
  top: clamp(24px, 4vw, 42px);
  left: clamp(28px, 5vw, 68px);
  right: clamp(28px, 5vw, 68px);
  width: auto;
  margin: 0;
}

.home-hero h1 {
  letter-spacing: -0.045em;
}

.home-btn {
  border-radius: 999px;
}

.home-stats div {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.46);
}

@keyframes homeImageReveal {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Water-balance analysis. */
.water-balance-main { width: min(1280px, calc(100% - 76px)); padding-bottom: 70px; }
.water-balance-aside-note { margin: 16px 9px 0; padding: 13px; border: 1px solid rgba(130, 190, 198, .15); border-radius: 10px; background: rgba(34, 101, 110, .09); }
.water-balance-aside-note span { color: #69c2cc; font-size: .61rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.water-balance-aside-note p { margin: 7px 0 0; color: #8fa7ad; font-size: .66rem; line-height: 1.45; }
.lightviz-station-search #waterBalanceResults { display: grid; gap: 5px; max-height: 175px; margin-top: 8px; overflow: auto; }
.lightviz-station-search #waterBalanceResults button { padding: 8px; border: 1px solid transparent; border-radius: 7px; background: #0c2027; color: #a7bbc1; cursor: pointer; font: inherit; text-align: left; }
.lightviz-station-search #waterBalanceResults button:hover { border-color: #ff6720; background: rgba(255, 103, 32, .1); }
.lightviz-station-search #waterBalanceResults button strong,
.lightviz-station-search #waterBalanceResults button small { display: block; }
.lightviz-station-search #waterBalanceResults button strong { color: #eaf5f6; font-size: .72rem; }
.lightviz-station-search #waterBalanceResults button small,
.lightviz-station-search #waterBalanceResults > span { margin-top: 3px; color: #78939c; font-size: .62rem; line-height: 1.35; }
.water-balance-context { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; padding: 19px 22px; }
.water-balance-context h2 { margin: 4px 0 6px; }
.water-balance-context-values { display: grid; justify-items: end; gap: 7px; text-align: right; }
.water-balance-context-values span { color: #90a9af; font-size: .7rem; }
.water-balance-context-values strong { color: #65c6cf; font-size: .79rem; }
.water-balance-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.water-balance-metric { display: flex; align-items: flex-start; gap: 13px; min-height: 128px; }
.water-balance-metric-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(109, 197, 207, .3); border-radius: 10px; background: rgba(75, 181, 194, .08); color: #66ccd4; font-size: 1rem; font-weight: 900; }
.water-balance-metric > div { min-width: 0; }
.water-balance-metric p { margin: 1px 0 0; }
.water-balance-metric strong { margin: 11px 0 6px; font-size: clamp(1.45rem, 2vw, 2rem); }
.water-balance-metric strong sup { margin-left: 1px; font-size: .48em; }
.water-balance-metric small { display: block; color: #8ea6ac; font-size: .67rem; line-height: 1.35; }
.water-balance-metric.is-deficit strong { color: #ff805d; }
.water-balance-metric.is-surplus strong,
.water-balance-metric.is-rain strong { color: #63c9d4; }
.water-balance-metric.is-etp strong { color: #f1a161; }
.water-balance-main-panel { margin-top: 14px; }
.water-balance-chart-actions { display: flex; align-items: center; gap: 12px; }
.water-balance-main-chart { width: 100%; height: 510px; margin-top: 10px; }
.water-balance-secondary-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; margin-top: 14px; }
.water-balance-secondary-grid > article { min-width: 0; }
.water-balance-monthly-chart,
.water-balance-rank-chart { height: 330px; }
.water-balance-method { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 24px; }
.water-balance-method-icon { display: grid; flex: 0 0 78px; width: 78px; height: 78px; place-items: center; border: 1px solid rgba(94, 198, 208, .35); border-radius: 50%; background: radial-gradient(circle, rgba(67, 184, 195, .18), rgba(67, 184, 195, .03)); color: #68cbd3; font-size: .82rem; font-weight: 900; }
.water-balance-method h2 { margin: 4px 0 8px; }
.water-balance-method p:last-child { max-width: 940px; margin: 0; color: #9db0b5; font-size: .76rem; line-height: 1.6; }
.water-national-main { width: min(1420px, calc(100% - 64px)); padding-bottom: 70px; }
.water-national-header h1 { max-width: 820px; }
.water-national-header > div > p:last-child { margin: 16px 0 0; color: #98b0b4; font-size: .84rem; }
.water-national-aside { display: grid; gap: 7px; margin: 22px 9px 0; padding: 15px; border: 1px solid rgba(104, 199, 205, .18); border-radius: 12px; background: linear-gradient(145deg, rgba(55, 156, 166, .13), rgba(12, 36, 42, .42)); }
.water-national-aside span { color: #6fd1d8; font-size: .61rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.water-national-aside strong { color: #e5f3f3; font-size: .75rem; line-height: 1.35; }
.water-national-aside p { margin: 0; color: #849da3; font-size: .64rem; line-height: 1.5; }
.water-national-station-link { display: flex; align-items: center; justify-content: space-between; margin: 10px 9px; padding: 11px 14px; border-radius: 9px; color: #9eb4b8; background: rgba(9, 31, 37, .65); font-size: .68rem; text-decoration: none; }
.water-national-station-link:hover { color: #fff; background: rgba(53, 154, 164, .16); }
.water-national-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.water-national-metric { min-height: 126px; }
.water-national-metric strong { margin-top: 15px; font-size: clamp(1.65rem, 2.4vw, 2.35rem); }
.water-national-metric.is-dry strong { color: #f17455; }
.water-national-metric.is-wet strong { color: #58bfcc; }
.water-national-metric.is-count strong,
.water-national-metric.is-median strong { color: #eaf4f3; }
.water-national-map-panel { margin-top: 14px; padding: 22px; overflow: hidden; }
.water-national-map-head { margin-bottom: 18px; }
.water-national-date { display: grid; gap: 5px; justify-items: end; padding: 10px 14px; border: 1px solid rgba(125, 183, 189, .16); border-radius: 10px; background: rgba(6, 27, 33, .48); text-align: right; }
.water-national-date span { color: #7f9ba1; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.water-national-date strong { color: #dceced; font-size: .78rem; }
.water-national-map-wrap { position: relative; min-height: 670px; border: 1px solid rgba(138, 190, 195, .18); border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 45% 38%, rgba(39, 111, 119, .28), transparent 40%), #071c22; }
.water-national-map { width: 100%; height: 670px; background: transparent; }
.water-national-map .leaflet-control-zoom { border: 1px solid rgba(153, 200, 203, .22); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, .24); }
.water-national-map .leaflet-control-zoom a { border-color: rgba(153, 200, 203, .14); color: #dff0f0; background: rgba(7, 30, 36, .94); }
.water-national-map .leaflet-control-zoom a:hover { color: #fff; background: #16434a; }
.water-national-map .leaflet-tooltip { border: 1px solid rgba(148, 194, 198, .22); border-radius: 7px; color: #dbe9e9; background: rgba(5, 25, 31, .94); box-shadow: 0 8px 20px rgba(0, 0, 0, .28); font-size: .66rem; }
.water-national-map .leaflet-tooltip-top::before { border-top-color: rgba(5, 25, 31, .94); }
.water-national-map .leaflet-popup-content-wrapper,
.water-national-map .leaflet-popup-tip { color: #dceced; background: #0a252c; }
.water-national-map .leaflet-popup-content-wrapper { border: 1px solid rgba(132, 190, 195, .2); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .34); }
.water-national-popup { display: grid; gap: 6px; padding: 3px 1px; }
.water-national-popup > small { color: #6cc7ce; font-size: .6rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.water-national-popup > strong { color: #f2f8f8; font-size: .86rem; }
.water-national-popup p { margin: 2px 0 0; color: #a8bdc0; font-size: .7rem; }
.water-national-popup p b { color: #fff; }
.water-national-popup > span { color: #829da2; font-size: .62rem; }
.water-national-popup a { margin-top: 6px; padding: 8px 10px; border-radius: 7px; color: #071b20; background: #65c9cf; font-size: .65rem; font-weight: 900; text-align: center; text-decoration: none; }
.water-national-legend { position: absolute; z-index: 500; left: 18px; bottom: 18px; display: grid; gap: 6px; width: 205px; padding: 15px; border: 1px solid rgba(156, 202, 203, .18); border-radius: 13px; background: rgba(5, 25, 31, .92); box-shadow: 0 16px 38px rgba(0, 0, 0, .32); backdrop-filter: blur(10px); }
.water-national-legend p { margin: 0 0 4px; color: #e6f2f1; font-size: .69rem; font-weight: 800; }
.water-national-legend div { display: flex; align-items: center; gap: 8px; color: #a2b7ba; font-size: .61rem; }
.water-national-legend i { width: 22px; height: 6px; border-radius: 999px; background: var(--legend-color); box-shadow: 0 0 8px color-mix(in srgb, var(--legend-color) 50%, transparent); }
.water-national-legend small { margin-top: 5px; color: #718e94; font-size: .56rem; line-height: 1.4; }
.water-national-loading { position: absolute; z-index: 700; inset: 0; display: grid; place-items: center; color: #9db5b9; background: rgba(6, 26, 32, .86); font-size: .78rem; }
.water-national-loading.is-hidden { display: none; }
.water-national-loading.is-error { color: #ff9b82; }
.water-national-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.water-national-ranking { min-width: 0; padding: 22px; }
.water-national-ranking .normal-panel-head > span { color: #789399; font-size: .62rem; }
.water-national-ranking-list { display: grid; gap: 5px; margin-top: 15px; }
.water-national-ranking-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) 74px 76px; align-items: center; gap: 9px; min-height: 54px; padding: 7px 10px; border: 1px solid rgba(139, 184, 189, .1); border-radius: 9px; color: inherit; background: rgba(7, 28, 34, .43); text-decoration: none; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.water-national-ranking-row:hover { border-color: rgba(103, 199, 207, .32); background: rgba(23, 66, 72, .45); transform: translateX(3px); }
.water-national-ranking-row > b { color: #6e898f; font-size: .68rem; }
.water-national-ranking-row > span { min-width: 0; }
.water-national-ranking-row > span strong,
.water-national-ranking-row > span small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.water-national-ranking-row > span strong { color: #e4eeee; font-size: .7rem; }
.water-national-ranking-row > span small { margin-top: 3px; color: #718d93; font-size: .56rem; }
.water-national-ranking-row > em { color: #d9e8e8; font-size: .82rem; font-style: normal; font-weight: 800; text-align: right; }
.water-national-ranking-row > em sup { font-size: .58em; }
.water-national-ranking-row > em small { display: block; color: #6e898f; font-size: .48rem; font-weight: 600; }
.water-national-ranking-row > i { color: #93a9ad; font-size: .64rem; font-style: normal; text-align: right; }
.water-national-ranking.is-dry .water-national-ranking-row > em { color: #f08a68; }
.water-national-ranking.is-wet .water-national-ranking-row > em { color: #65c4cd; }
.water-national-method { margin-bottom: 0; }
.analysis-theme-icon--water { color: #63c8d1; }
.analysis-theme-card.is-selected .analysis-theme-icon--water { color: #83e2e8; }

/* National summer heat map. */
.heat-national-main { width: min(1420px, calc(100% - 64px)); padding-bottom: 70px; }
.heat-national-header h1 { max-width: 850px; }
.heat-national-aside { display: grid; gap: 7px; margin: 22px 9px 0; padding: 15px; border: 1px solid rgba(240, 112, 56, .22); border-radius: 12px; background: linear-gradient(145deg, rgba(209, 70, 38, .16), rgba(43, 31, 27, .42)); }
.heat-national-aside span { color: #ff8a52; font-size: .61rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.heat-national-aside strong { color: #fff0e8; font-size: .75rem; line-height: 1.35; }
.heat-national-aside p { margin: 0; color: #a99087; font-size: .64rem; line-height: 1.5; }
.heat-national-selector { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(620px, 1.35fr); align-items: center; gap: 30px; margin-bottom: 14px; padding: 22px; }
.heat-national-selector h2 { margin: 3px 0 0; color: #eff5f4; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 500; }
.heat-national-selector > div:first-child > p:last-child { margin: 8px 0 0; color: #839ba0; font-size: .67rem; line-height: 1.5; }
.heat-national-switch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.heat-national-switch button { display: grid; gap: 5px; min-height: 66px; padding: 10px 8px; border: 1px solid rgba(169, 184, 180, .14); border-radius: 9px; background: #0b1e23; color: #a7b7b8; cursor: pointer; font: inherit; font-size: .64rem; font-weight: 850; line-height: 1.25; text-align: center; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.heat-national-switch button span { color: #748b8e; font-size: .54rem; font-weight: 700; }
.heat-national-switch button:hover { transform: translateY(-2px); border-color: rgba(244, 129, 69, .5); color: #fff; }
.heat-national-switch button.is-active { border-color: #ef7137; background: linear-gradient(145deg, rgba(199, 58, 34, .32), rgba(238, 120, 52, .13)); color: #fff; box-shadow: inset 0 -2px 0 #ef6533, 0 10px 26px rgba(112, 32, 21, .18); }
.heat-national-switch button.is-active span { color: #ffc4a3; }
.heat-national-metric.is-record strong { color: #f15b42; }
.heat-national-metric.is-podium strong { color: #f39445; }
.heat-national-metric.is-top strong { color: #e5bd4f; }
.heat-national-map-wrap { background: radial-gradient(circle at 48% 36%, rgba(119, 61, 37, .23), transparent 42%), #101d21; }
.heat-national-map-panel .leaflet-popup-content-wrapper,
.heat-national-map-panel .leaflet-popup-tip { background: #172326; }
.heat-national-popup > small { color: #f18a56; }
.heat-national-popup > a { color: #24120c; background: #f29a5c; }
.heat-national-ranking.is-relative .heat-national-ranking-row > em { color: #f27b4b; }
.heat-national-ranking.is-absolute .heat-national-ranking-row > em { color: #e8bd54; }
.heat-national-ranking-row:hover { border-color: rgba(241, 113, 59, .36); background: rgba(90, 43, 29, .4); }
.heat-national-ranking-head { align-items: flex-start; gap: 16px; }
.heat-national-ranking-switch { display: flex; flex: 0 0 auto; gap: 4px; padding: 4px; border: 1px solid rgba(174, 191, 190, .14); border-radius: 10px; background: rgba(5, 19, 23, .72); }
.heat-national-ranking-switch button { min-height: 34px; padding: 7px 11px; border: 0; border-radius: 7px; color: #81999c; background: transparent; cursor: pointer; font: inherit; font-size: .59rem; font-weight: 850; white-space: nowrap; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.heat-national-ranking-switch button:hover { color: #f6fbfa; }
.heat-national-ranking-switch button.is-active { color: #fff5ef; background: linear-gradient(135deg, #d94d2b, #f18442); box-shadow: 0 5px 14px rgba(178, 57, 31, .25); }
.heat-national-department-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 88px 108px; align-items: center; gap: 9px; min-height: 57px; padding: 8px 10px; border: 1px solid rgba(157, 177, 176, .1); border-radius: 8px; background: rgba(6, 23, 27, .48); }
.heat-national-department-row > b { color: #587075; font-size: .66rem; text-align: center; }
.heat-national-department-row > span { display: grid; min-width: 0; gap: 3px; }
.heat-national-department-row > span strong { overflow: hidden; color: #dfe9e8; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.heat-national-department-row small { display: block; color: #71888b; font-size: .54rem; font-style: normal; line-height: 1.35; }
.heat-national-department-row > em { color: #f18a51; font-size: .72rem; font-style: normal; font-weight: 850; text-align: right; }
.heat-national-department-row > i { color: #d0dcda; font-size: .63rem; font-style: normal; font-weight: 750; text-align: right; }
.heat-national-department-row:hover { border-color: rgba(241, 113, 59, .3); background: rgba(90, 43, 29, .28); }
.heat-national-method-icon { display: grid; flex: 0 0 62px; width: 62px; height: 62px; place-items: center; border: 1px solid rgba(241, 119, 65, .28); border-radius: 50%; color: #f18a56; background: rgba(189, 59, 35, .11); font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
.heat-national-method { border-color: rgba(239, 119, 65, .17); background: linear-gradient(145deg, rgba(91, 40, 27, .2), rgba(10, 30, 35, .72)); }
@media (max-width: 1180px) {
  .heat-national-selector { grid-template-columns: 1fr; }
  .heat-national-switch { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
}
@media (max-width: 680px) {
  .heat-national-main { width: min(100% - 28px, 1420px); }
  .heat-national-header h1 { font-size: clamp(2.1rem, 12vw, 3.3rem); }
  .heat-national-selector { padding: 15px; }
  .heat-national-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .heat-national-switch button:last-child { grid-column: 1 / -1; }
  .heat-national-ranking-head { flex-direction: column; }
  .heat-national-ranking-switch { width: 100%; }
  .heat-national-ranking-switch button { flex: 1; }
  .heat-national-department-row { grid-template-columns: 20px minmax(0, 1fr) 72px; }
  .heat-national-department-row > i { display: none; }
  .heat-national-method { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 1180px) {
  .water-balance-secondary-grid { grid-template-columns: 1fr 1fr; }
  .water-balance-monthly-panel { grid-column: 1 / -1; }
  .water-national-map,
  .water-national-map-wrap { height: 600px; min-height: 600px; }
}
@media (max-width: 920px) {
  .water-balance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .water-balance-main-chart { height: 430px; }
  .water-national-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .water-national-rankings { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .water-balance-main { width: min(100% - 32px, 1280px); }
  .water-balance-context { align-items: flex-start; flex-direction: column; }
  .water-balance-context-values { justify-items: start; text-align: left; }
  .water-balance-metrics,
  .water-balance-secondary-grid { grid-template-columns: 1fr; }
  .water-balance-monthly-panel { grid-column: auto; }
  .water-balance-main-panel .normal-panel-head { align-items: flex-start; flex-direction: column; }
  .water-balance-chart-actions,
  .water-balance-chart-actions .normal-switch { width: 100%; }
  .water-balance-chart-actions .normal-switch button { flex: 1; }
  .water-balance-main-chart { height: 380px; }
  .water-balance-method { align-items: flex-start; flex-direction: column; }
  .water-national-main { width: min(100% - 28px, 1420px); }
  .water-national-header h1 { font-size: clamp(2.1rem, 12vw, 3.3rem); }
  .water-national-metrics { grid-template-columns: 1fr; }
  .water-national-map-panel { padding: 14px; }
  .water-national-map-head { align-items: flex-start; flex-direction: column; }
  .water-national-date { justify-items: start; width: 100%; text-align: left; }
  .water-national-map,
  .water-national-map-wrap { height: 540px; min-height: 540px; }
  .water-national-legend { left: 10px; bottom: 10px; width: 176px; padding: 11px; }
  .water-national-legend div { gap: 6px; font-size: .56rem; }
  .water-national-ranking { padding: 15px; }
  .water-national-ranking-row { grid-template-columns: 20px minmax(0, 1fr) 61px; }
  .water-national-ranking-row > i { display: none; }
}

@media (max-width: 900px) {
  .home-nav {
    top: 24px;
    left: 24px;
    right: 24px;
  }

  .home-hero-content {
    padding-top: 148px;
  }
}

/* Final overrides: dark download page. */
.download-page { color: #e9f4f1; background: radial-gradient(circle at 8% 0%, rgba(38,128,123,.28), transparent 30rem), radial-gradient(circle at 88% 8%, rgba(77,174,161,.12), transparent 26rem), #102426; }
.download-header { border-bottom: 1px solid rgba(181,226,218,.14); }
.download-header nav a, .steps-title, .download-steps li, .steps-help { color: #9ab9b5; }
.download-header nav a:hover, .download-header nav a.is-current { color: #fff; }
.download-eyebrow, .section-number { color: #8ee3d5; }
.download-intro > p:last-child, .section-heading p, .station-details { color: #b7cfca; }
.download-workspace { border-color: rgba(181,226,218,.18); background: rgba(17,45,47,.94); box-shadow: 0 28px 75px rgba(2,13,15,.38); }
.download-steps { border-color: rgba(181,226,218,.14); background: rgba(7,28,31,.72); }
.download-steps li > span { border-color: #527b76; }
.download-steps li.is-active, .station-details strong { color: #f3fbf9; }
.download-steps li.is-active > span { border-color: #26a99b; background: #17877d; }
.download-section { border-color: rgba(181,226,218,.14); }
.department-map-wrap { border-color: #38635f; background: #16383a; }
#downloadMap { background: linear-gradient(145deg, #1c4545, #102e32); }
.download-page .leaflet-control-zoom { border-color: #47746f; box-shadow: 0 5px 18px rgba(0,0,0,.28); }
.download-page .leaflet-control-zoom a { border-color: #47746f; background: #17383a; color: #effbf8; }
.map-status { color: #b7cfca; background: rgba(7,28,31,.8); }
.station-picker { background: rgba(7,28,31,.62); }
.station-picker > label, .date-fields label { color: #a9c7c2; }
.station-picker select, .date-fields input { border-color: #426c67; background: #102b2e; color: #f2fbf9; color-scheme: dark; }
.choice-card, .variable-card { border-color: #426c67; background: #102b2e; }
.choice-card:hover { border-color: #75aaa1; }
.choice-card.is-selected, .variable-card:has(input:checked) { border-color: #35b7a8; background: rgba(28,105,98,.34); box-shadow: inset 0 0 0 1px #35b7a8; }
.choice-card small, .variable-card small { color: #b2cbc6; }
.variable-card::before { border-color: #6e9992; }
.variable-card:has(input:checked)::before { border-color: #35b7a8; background: #35b7a8; box-shadow: inset 0 0 0 3px #163c3d; }
.download-submit { background: #0b2528; border-top: 1px solid rgba(181,226,218,.14); }
.download-submit .download-eyebrow, .format-choice small { color: #8ee3d5; }
.format-choice label:has(input:checked) span { border-color: #8ee3d5; background: #8ee3d5; color: #102426; }
.download-submit button { background: #8ee3d5; color: #102426; }
.download-submit button:hover:not(:disabled) { background: #b8f1e7; }
.download-section.is-disabled .date-fields { opacity: 0.58; }
.download-section.is-disabled .date-fields input { cursor: not-allowed; }

@media (max-width: 1100px) and (min-width: 901px) {
  .frequency-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .frequency-choice { grid-template-columns: 1fr; }
}

.map-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(181, 226, 218, 0.14);
  background: rgba(7, 28, 31, 0.88);
}

.station-activity-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e9f4f1;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.station-activity-switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; width: 40px; height: 22px; flex: 0 0 40px; border: 1px solid #527b76; border-radius: 999px; background: #17383a; transition: background 0.18s ease, border-color 0.18s ease; }
.switch-track span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #9ab9b5; transition: transform 0.18s ease, background 0.18s ease; }
.station-activity-switch input:checked + .switch-track { border-color: #35b7a8; background: #17877d; }
.station-activity-switch input:checked + .switch-track span { transform: translateX(18px); background: #ffffff; }
.station-activity-switch input:focus-visible + .switch-track { outline: 3px solid rgba(142, 227, 213, 0.35); outline-offset: 2px; }
.lightviz-station-search .monthly-station-activity {
  margin: 3px 0 1px;
  color: #b8c9cd;
  font-size: 0.67rem;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}
.department-monthly-toolbar .department-monthly-activity {
  display: inline-flex;
  min-width: 215px;
  align-self: center;
  color: #d9e7e8;
  font-size: 0.72rem;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
.map-filter-bar small { color: #8eaaa6; font-size: 0.7rem; text-align: right; }

@media (max-width: 620px) {
  .map-filter-bar { align-items: flex-start; flex-direction: column; gap: 7px; }
  .map-filter-bar small { padding-left: 50px; text-align: left; }
}

.download-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 17px;
  border: 1px solid rgba(142, 227, 213, 0.5);
  border-radius: 999px;
  background: rgba(23, 135, 125, 0.16);
  color: #dffaf5;
  font-size: 0.82rem;
  font-weight: 850;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.download-doc-link:hover {
  transform: translateY(-2px);
  border-color: #8ee3d5;
  background: rgba(23, 135, 125, 0.3);
  color: #ffffff;
}

.download-doc-link span { font-size: 1.05rem; }

@media (max-width: 900px) {
  .home-stats { grid-template-columns: 1fr; }
}

/* Stable responsive layout for the photo-led home page. */
.home-page *,
.home-page *::before,
.home-page *::after { box-sizing: border-box; }

@media (max-width: 900px) {
  .home-shell {
    min-height: 0;
    padding: 0 0 18px;
  }

  .home-hero {
    min-height: 0;
    padding: 0 24px 28px;
  }

  .home-nav {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    padding-top: 24px;
  }

  .home-brand.brand-logo img { width: 158px; }

  .home-nav-links {
    justify-content: flex-end;
    gap: 10px 18px;
  }

  .home-hero-content {
    max-width: 680px;
    padding: 76px 0 0;
  }

  .home-hero h1 {
    max-width: 650px;
    font-size: clamp(3.25rem, 9vw, 5.25rem);
  }

  .home-bottom {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 76px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }

  .home-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .home-stats div {
    min-width: 0;
    padding: 4px 10px 4px 14px;
  }

  .home-stats strong { font-size: clamp(1.75rem, 5vw, 2.3rem); }
  .home-stats span { font-size: .82rem; line-height: 1.3; }

  .home-feature-strip {
    width: min(1120px, calc(100% - 36px));
    grid-template-columns: 1fr;
    margin-top: 14px;
  }

  .home-feature-strip article { min-height: 0; }

  .home-latest-story {
    width: min(1120px, calc(100% - 36px));
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 14px;
  }

  .home-latest-story__visual { aspect-ratio: 1.83 / 1; }
  .home-latest-story__visual::after { background: linear-gradient(180deg, transparent 78%, rgba(7, 24, 27, .28)); }
}

@media (min-width: 901px) and (max-height: 719px) {
  .home-hero { min-height: 720px; }
}

@media (max-width: 620px) {
  .home-shell { padding: 0 0 10px; }

  .home-source-mark { display: none; }

  .home-hero {
    padding: 0 18px 22px;
    border-radius: 0;
  }

  .home-weather-scene { background-position: 62% center; }

  .home-hero-vignette {
    background:
      linear-gradient(180deg, rgba(4, 14, 18, .25) 0%, rgba(4, 13, 17, .48) 48%, rgba(4, 12, 15, .9) 100%),
      linear-gradient(90deg, rgba(4, 14, 18, .62), rgba(4, 14, 18, .12));
  }

  .home-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-top: 18px;
  }

  .home-brand.brand-logo img { width: 148px; }

  .home-nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    width: 100%;
    font-size: .66rem;
  }

  .home-nav-links a {
    display: grid;
    min-height: 40px;
    padding: 7px 9px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    background: rgba(5, 20, 24, .36);
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .home-hero-content { padding-top: 52px; }

  .home-kicker {
    margin-bottom: 14px;
    font-size: .68rem;
    line-height: 1.45;
  }

  .home-hero h1 {
    font-size: clamp(2.65rem, 13vw, 4rem);
    line-height: .96;
  }

  .home-lead {
    margin-top: 20px;
    font-size: .95rem;
    line-height: 1.52;
  }

  .home-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
  }

  .home-btn {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: 10px 16px;
    text-align: center;
  }

  .home-bottom {
    gap: 22px;
    margin-top: 52px;
    padding-top: 22px;
  }

  .home-summary {
    font-size: .9rem;
    line-height: 1.5;
  }

  .home-stats {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .home-stats div {
    display: grid;
    grid-template-columns: minmax(110px, .48fr) 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 10px 12px 15px;
    border-left-color: rgba(142, 227, 213, .7);
    background: rgba(4, 18, 21, .24);
  }

  .home-stats strong {
    margin: 0;
    font-size: 1.75rem;
    white-space: nowrap;
  }

  .home-stats span { font-size: .8rem; }

  .home-feature-strip article { padding: 21px 19px; }
  .home-feature-number { margin-bottom: 12px; }
  .home-feature-strip p { font-size: .88rem; }

  .home-latest-story__content { padding: 28px 21px 31px; }
  .home-latest-story__content h2 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .home-latest-story__content > p:not(.home-latest-story__eyebrow) { font-size: .86rem; }
  .home-latest-story__visual > span { top: 12px; left: 12px; }
  .home-feature-strip,
  .home-latest-story { width: calc(100% - 20px); }
}

@media (max-height: 650px) and (min-width: 621px) {
  .home-source-mark { display: none; }
}

@media (max-width: 360px) {
  .home-shell { padding: 0; }
  .home-hero { border-width: 0 0 1px; border-radius: 0; }
  .home-nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: .61rem; }
  .home-nav-links a { min-height: 38px; padding: 6px 5px; }
  .home-nav-links a:last-child { grid-column: 1 / -1; }
  .home-hero h1 { font-size: 2.55rem; }
}

/* Free-form analysis by variable. */
.home-feature-link { display:inline-flex; margin-top:14px; color:#ffae84; font-size:.74rem; font-weight:900; text-decoration:none; }
.home-feature-link:hover { color:#fff; }

/* Contact and private administration. */
.contact-page, .admin-page { min-height: 100vh; color: #e7f1ef; background: radial-gradient(circle at 8% 0%, rgba(45, 143, 134, .22), transparent 31rem), radial-gradient(circle at 89% 18%, rgba(255, 112, 47, .11), transparent 26rem), #09191e; font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif; }
.contact-header, .admin-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: min(1180px, calc(100% - 52px)); margin: 0 auto; padding: 28px 0; border-bottom: 1px solid rgba(163, 206, 200, .14); }
.contact-header .brand-logo img, .admin-header .brand-logo img { width: 170px; }
.contact-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; }
.contact-header nav a { color: #a9c0be; font-size: .76rem; font-weight: 850; text-decoration: none; }
.contact-header nav a:hover, .contact-header nav .is-current { color: #fff; }
.contact-shell { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(440px, 1.15fr); gap: clamp(44px, 9vw, 120px); width: min(1080px, calc(100% - 52px)); margin: 0 auto; padding: clamp(68px, 10vw, 132px) 0 86px; }
.contact-eyebrow, .contact-form-heading > p, .admin-overview p, .admin-inbox header p, .admin-message-card header p { margin: 0 0 12px; color: #79d9cb; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.contact-intro h1, .admin-overview h1, .admin-login-card h1, .admin-message-card h1 { margin: 0; color: #f1f6f4; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.1rem, 5.8vw, 5.6rem); font-weight: 500; letter-spacing: -.065em; line-height: .86; }
.contact-intro h1 em, .admin-overview h1 em, .admin-login-card h1 em { color: #ff7d43; font-style: normal; }
.contact-intro > p:not(.contact-eyebrow) { max-width: 400px; margin: 27px 0 0; color: #a9c0be; font-size: 1rem; line-height: 1.68; }
.contact-notes { display: grid; gap: 15px; margin-top: 44px; }
.contact-notes article { display: grid; grid-template-columns: 27px 1fr; gap: 12px; padding-top: 15px; border-top: 1px solid rgba(158, 200, 194, .15); }
.contact-notes article > span { color: #ff7d43; font-size: .68rem; font-weight: 900; }
.contact-notes strong { display: block; color: #ebf4f2; font-size: .84rem; }
.contact-notes p { margin: 6px 0 0; color: #8eaaa8; font-size: .78rem; line-height: 1.5; }
.contact-form-panel { align-self: start; padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(164, 207, 200, .16); border-radius: 20px; background: linear-gradient(145deg, rgba(20, 48, 53, .94), rgba(10, 29, 35, .94)); box-shadow: 0 28px 74px rgba(0, 0, 0, .25); }
.contact-form-heading h2 { margin: 0; color: #f4f7f5; font-size: 1.75rem; letter-spacing: -.045em; }
.contact-form-heading > span { display: block; margin-top: 9px; color: #8facaa; font-size: .75rem; }
.contact-form { display: grid; gap: 18px; margin-top: 30px; }
.contact-form label, .admin-login-card label { display: grid; gap: 8px; color: #dce9e6; font-size: .78rem; font-weight: 800; }
.contact-form label b { color: #ff7d43; }
.contact-form input, .contact-form textarea, .admin-login-card input { width: 100%; box-sizing: border-box; border: 1px solid rgba(160, 203, 198, .19); border-radius: 9px; outline: none; background: #0b2229; color: #eff7f5; font: inherit; font-size: .92rem; transition: border-color .16s ease, box-shadow .16s ease; }
.contact-form input, .admin-login-card input { height: 46px; padding: 0 13px; }
.contact-form textarea { min-height: 150px; padding: 13px; resize: vertical; line-height: 1.5; }
.contact-form input:focus, .contact-form textarea:focus, .admin-login-card input:focus { border-color: #6cdbcc; box-shadow: 0 0 0 3px rgba(108, 219, 204, .12); }
.contact-form small { margin-top: -2px; color: #819d9a; font-size: .68rem; }
.contact-form button, .admin-login-card button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; border: 1px solid #ff7940; border-radius: 9px; background: #ed652c; color: #fff; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 900; transition: transform .16s ease, background .16s ease; }
.contact-form button:hover, .admin-login-card button:hover { background: #ff7a3d; transform: translateY(-1px); }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-error, .admin-error { margin: 20px 0 0; padding: 12px 13px; border: 1px solid rgba(255, 122, 70, .45); border-radius: 8px; background: rgba(203, 72, 32, .13); color: #ffc2a8; font-size: .78rem; line-height: 1.45; }
.contact-privacy { margin: 20px 0 0; color: #829d9a; font-size: .69rem; line-height: 1.55; }
.contact-privacy a { color: #9de4da; }
.contact-success { display: grid; grid-template-columns: 48px 1fr; gap: 17px; align-items: start; padding: 12px 2px; }
.contact-success > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #45bcae; color: #083034; font-size: 1.25rem; font-weight: 900; }
.contact-success strong { color: #f3f8f6; font-size: 1.15rem; }
.contact-success p { margin: 8px 0 18px; color: #a8c0bd; line-height: 1.55; }
.contact-success a { color: #ff955f; font-size: .78rem; font-weight: 900; }
.contact-page .site-footer { margin-top: 0; padding-top: 28px; background: #09191e; }

.admin-page { background: radial-gradient(circle at 84% 0%, rgba(43, 102, 108, .24), transparent 35rem), #071217; }
.admin-header { width: min(1240px, calc(100% - 52px)); }
.admin-header > div { display: flex; align-items: center; gap: 17px; color: #91aaa9; font-size: .72rem; font-weight: 850; }
.admin-header form { margin: 0; }.admin-header button { border: 1px solid rgba(164, 206, 202, .22); border-radius: 7px; background: transparent; color: #dce9e6; cursor: pointer; padding: 8px 10px; font: inherit; font-size: .68rem; font-weight: 800; }
.admin-shell { width: min(1180px, calc(100% - 52px)); margin: 0 auto; padding: 58px 0 80px; }
.admin-overview { display: grid; grid-template-columns: minmax(300px, 1fr) 180px 180px; gap: 14px; align-items: end; margin-bottom: 35px; }
.admin-overview article { display: grid; gap: 5px; min-height: 116px; padding: 19px; border: 1px solid rgba(152, 199, 196, .15); border-radius: 13px; background: linear-gradient(145deg, #10262d, #0b1a20); }
.admin-overview article span { color: #8da9a7; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.admin-overview article strong { color: #ff7940; font-size: 2.1rem; letter-spacing: -.06em; }.admin-overview article small { color: #90a9a8; font-size: .66rem; }.admin-overview .admin-coming strong { color: #79d9cb; }
.admin-inbox { overflow: hidden; border: 1px solid rgba(153, 200, 196, .15); border-radius: 16px; background: rgba(11, 29, 35, .86); }
.admin-inbox > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 25px 28px 21px; border-bottom: 1px solid rgba(156, 202, 198, .13); }.admin-inbox header h2 { margin: 0; color: #edf6f4; font-size: 1.38rem; letter-spacing: -.04em; }.admin-inbox > header > span { color: #879f9d; font-size: .7rem; }
.admin-message-list { display: grid; }.admin-message-row { display: grid; grid-template-columns: 108px minmax(220px, .8fr) minmax(220px, 1fr) 75px; gap: 18px; align-items: center; padding: 17px 28px; border-bottom: 1px solid rgba(154, 201, 197, .1); color: inherit; text-decoration: none; transition: background .15s ease; }.admin-message-row:last-child { border-bottom: 0; }.admin-message-row:hover { background: rgba(103, 205, 192, .06); }.admin-message-row time { color: #839d9b; font-size: .68rem; }.admin-message-row strong, .admin-message-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.admin-message-row strong { color: #dcebe8; font-size: .8rem; }.admin-message-row span { margin-top: 5px; color: #839f9c; font-size: .68rem; }.admin-message-row p { display: -webkit-box; overflow: hidden; margin: 0; color: #a8bfbd; font-size: .72rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.admin-message-row b { color: #83dad0; font-size: .66rem; text-align: right; }.admin-message-row b i { color: #ff7940; font-size: .9rem; font-style: normal; }.admin-message-row.is-unread { background: rgba(255, 112, 47, .055); }.admin-message-row.is-unread strong { color: #fff; }
.admin-empty { padding: 75px 25px; color: #8ea6a5; text-align: center; }.admin-empty span { display: block; color: #76d8ca; font-size: 2rem; }.admin-empty strong { display: block; margin-top: 12px; color: #dceae7; font-size: .9rem; }.admin-empty p { margin: 8px 0 0; font-size: .75rem; }
.admin-login-shell { display: grid; place-items: center; min-height: 100vh; padding: 30px; }.admin-login-shell > .brand-logo { position: fixed; top: 28px; left: 40px; }.admin-login-shell > .brand-logo img { width: 170px; }.admin-login-card { width: min(390px, 100%); padding: 36px; border: 1px solid rgba(157, 205, 201, .17); border-radius: 17px; background: linear-gradient(145deg, #10262d, #09191e); box-shadow: 0 26px 80px rgba(0, 0, 0, .28); }.admin-login-card > p { margin: 0 0 12px; color: #75d8cb; font-size: .68rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }.admin-login-card h1 { font-size: 2.75rem; }.admin-login-card > span { display: block; margin: 20px 0 25px; color: #95adaa; font-size: .78rem; line-height: 1.5; }.admin-login-card form { display: grid; gap: 20px; }.admin-back { position: fixed; bottom: 30px; color: #89a4a1; font-size: .72rem; text-decoration: none; }.admin-back:hover { color: #eaf5f2; }
.admin-message-shell { max-width: 900px; }.admin-return { display: inline-flex; margin-bottom: 22px; color: #8ce0d5; font-size: .76rem; font-weight: 900; text-decoration: none; }.admin-message-card { overflow: hidden; border: 1px solid rgba(154, 202, 198, .15); border-radius: 17px; background: linear-gradient(145deg, #10262d, #0b1a20); }.admin-message-card > header { display: flex; align-items: start; justify-content: space-between; gap: 25px; padding: 34px; border-bottom: 1px solid rgba(153, 202, 197, .13); }.admin-message-card h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }.admin-message-card > header > a { flex: 0 0 auto; padding: 10px 12px; border: 1px solid rgba(147, 210, 202, .3); border-radius: 8px; color: #a4ece2; font-size: .72rem; font-weight: 900; text-decoration: none; }.admin-message-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 18px 34px; border-bottom: 1px solid rgba(153, 202, 197, .13); }.admin-message-card dl div { display: grid; gap: 5px; }.admin-message-card dt { color: #7d9997; font-size: .66rem; font-weight: 900; text-transform: uppercase; }.admin-message-card dd { margin: 0; color: #dbe9e6; font-size: .8rem; }.admin-message-card dd a { color: #98e6dc; }.admin-message-body { padding: 34px; color: #dce8e6; font-size: .93rem; line-height: 1.7; white-space: pre-wrap; }
@media (max-width: 760px) { .contact-header, .admin-header, .contact-shell, .admin-shell { width: min(100% - 34px, 600px); }.contact-header { align-items: flex-start; flex-direction: column; }.contact-header nav { justify-content: flex-start; gap: 12px 18px; }.contact-shell { grid-template-columns: 1fr; gap: 44px; padding-top: 58px; }.admin-overview { grid-template-columns: 1fr 1fr; }.admin-overview > div { grid-column: 1 / -1; }.admin-message-row { grid-template-columns: 1fr 52px; gap: 8px; padding: 16px 17px; }.admin-message-row time, .admin-message-row p { display: none; }.admin-message-row b { grid-column: 2; grid-row: 1; }.admin-message-card > header { align-items: flex-start; flex-direction: column; padding: 25px 22px; }.admin-message-card dl { grid-template-columns: 1fr; gap: 16px; padding: 18px 22px; }.admin-message-body { padding: 25px 22px; }.admin-login-shell > .brand-logo { position: static; margin-bottom: 32px; }.admin-login-shell { align-content: center; }.admin-back { position: static; margin-top: 28px; } }
.variable-hub-main { width:min(1120px,calc(100% - 80px)); margin:0 auto; padding:58px 0 42px; }
.variable-hub-header { display:flex; align-items:flex-end; justify-content:space-between; gap:42px; margin-bottom:38px; }
.variable-hub-header h1 { margin:0; color:#f2f6f6; font-family:Georgia,"Times New Roman",serif; font-size:clamp(3.3rem,6vw,5.9rem); font-weight:500; letter-spacing:-.07em; line-height:.88; }
.variable-hub-intro { max-width:420px; padding-bottom:5px; }
.variable-hub-intro p { margin:0 0 17px; color:#a9bcc1; font-size:.94rem; line-height:1.65; }
.variable-hub-intro a { color:#ff8350; font-size:.72rem; font-weight:900; text-decoration:none; }
.variable-picker-stage { padding:28px; border:1px solid rgba(145,184,192,.14); border-radius:18px; background:linear-gradient(145deg,#12252c,#0b1a20); box-shadow:0 18px 42px rgba(0,0,0,.2); }
.variable-picker-stage .analysis-stage-head > span { background:#ff6720; }
.variable-picker-stage .analysis-stage-head h2 { color:#eef6f6; }
.variable-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.variable-card { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) 16px; gap:13px; min-height:142px; padding:18px; border:1px solid rgba(145,184,192,.14); border-radius:14px; background:#10242b; color:#edf5f5; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.variable-card:hover { transform:translateY(-3px); border-color:#ff6720; background:#142b33; }
.variable-card-symbol { display:grid; width:40px; height:40px; place-items:center; border-radius:12px; background:rgba(255,103,32,.12); color:#ff7b42; font-size:1.25rem; font-weight:900; }
.variable-card.observed-only .variable-card-symbol { background:rgba(92,166,190,.12); color:#76b9ce; }
.variable-card div { display:grid; align-content:start; gap:7px; }
.variable-card small { color:#ff8350; font-size:.58rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.variable-card.observed-only small { color:#79b7ca; }
.variable-card strong { font-size:.9rem; line-height:1.25; }
.variable-card p { margin:0; color:#91a8af; font-size:.68rem; line-height:1.45; }
.variable-card i { align-self:center; color:#718d95; font-style:normal; }
.variable-hub-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:15px; overflow:hidden; border:1px solid rgba(145,184,192,.12); border-radius:14px; background:rgba(145,184,192,.12); }
.variable-hub-guide > div { padding:20px; background:#0d2027; }
.variable-hub-guide span { color:#ff6720; font-size:.62rem; font-weight:900; }
.variable-hub-guide strong { display:block; margin:8px 0; color:#edf5f5; font-size:.8rem; }
.variable-hub-guide p { margin:0; color:#8ea6ad; font-size:.68rem; line-height:1.45; }
.variable-toolbar { display:grid; grid-template-columns:minmax(250px,1.25fr) auto auto; align-items:end; gap:18px; margin:30px 0 14px; }
.variable-toolbar > div,.variable-toolbar label { display:grid; gap:8px; }
.variable-toolbar span { color:#8fa8af; font-size:.62rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.variable-toolbar select,.variable-range-dates input { min-height:38px; padding:8px 11px; border:1px solid rgba(151,190,197,.18); border-radius:9px; outline:none; background:#0a1b21; color:#e8f1f2; font:inherit; font-size:.72rem; }
.variable-range-panel { margin-bottom:14px; padding:23px 25px 19px; }
.variable-range-presets { display:flex; align-items:center; gap:7px; margin:-4px 0 20px; padding-bottom:16px; border-bottom:1px solid rgba(143,178,186,.12); }
.variable-range-presets > span { margin-right:5px; color:#718b93; font-size:.58rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.variable-range-presets button { min-height:32px; padding:6px 13px; border:1px solid rgba(151,190,197,.18); border-radius:999px; background:#0a1b21; color:#a8bbc0; cursor:pointer; font:inherit; font-size:.65rem; font-weight:800; transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease; }
.variable-range-presets button:hover { border-color:rgba(255,113,50,.55); color:#f2f7f7; transform:translateY(-1px); }
.variable-range-presets button.is-active { border-color:#ff7132; background:linear-gradient(135deg,#ff6720,#ff8248); color:#fff; box-shadow:0 6px 18px rgba(255,103,32,.18); }
.variable-range-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.variable-range-head h2 { font-size:1.22rem; }
.variable-range-dates { display:flex; align-items:flex-end; gap:10px; }
.variable-range-dates label { display:grid; gap:5px; color:#8fa8af; font-size:.59rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.variable-range-dates > span { padding-bottom:11px; color:#ff6720; }
.variable-date-entry { display:grid; justify-items:end; gap:6px; }
.variable-range-dates input { width:118px; font-variant-numeric:tabular-nums; }
.variable-range-dates > button { min-height:38px; padding:8px 13px; border:1px solid rgba(142,227,213,.38); border-radius:9px; background:rgba(142,227,213,.09); color:#bdf3e9; cursor:pointer; font:800 .66rem "Aptos","Segoe UI",sans-serif; }
.variable-range-dates > button:hover { background:#8ee3d5; color:#102426; }
.variable-range-dates input[aria-invalid="true"] { border-color:#ff7133; box-shadow:0 0 0 2px rgba(255,113,51,.13); }
.variable-date-hint { color:#78949b; font-size:.59rem; font-weight:700; }
.variable-date-hint.is-error { color:#ff9362; }
.dual-range { position:relative; height:36px; margin:20px 5px 0; }
.dual-range-track { position:absolute; top:15px; right:0; left:0; height:5px; border-radius:999px; background:#20343b; }
.dual-range-track span { position:absolute; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#ff6720,#ff9a5d); }
.dual-range input[type="range"] { position:absolute; top:5px; left:0; width:100%; height:25px; margin:0; appearance:none; pointer-events:none; background:transparent; }
.dual-range input[type="range"]::-webkit-slider-thumb { width:20px; height:20px; border:3px solid #0d1d23; border-radius:50%; appearance:none; background:#ff7132; box-shadow:0 0 0 2px rgba(255,113,50,.3),0 4px 12px rgba(0,0,0,.35); cursor:grab; pointer-events:auto; }
.dual-range input[type="range"]::-moz-range-thumb { width:16px; height:16px; border:3px solid #0d1d23; border-radius:50%; background:#ff7132; cursor:grab; pointer-events:auto; }
.variable-range-navigation { display:grid; grid-template-columns:145px minmax(220px,1fr) 145px; align-items:center; gap:14px; }
.variable-range-navigation > button { min-height:32px; padding:6px 10px; border:1px solid rgba(151,190,197,.16); border-radius:8px; background:#0a1b21; color:#91a8af; cursor:pointer; font:inherit; font-size:.62rem; font-weight:800; transition:border-color .2s ease,color .2s ease; }
.variable-range-navigation > button:hover:not(:disabled) { border-color:rgba(255,113,50,.5); color:#f0f6f6; }
.variable-range-navigation > button:disabled { opacity:.3; cursor:not-allowed; }
.variable-range-navigation > button span { color:#ff7132; font-size:.78rem; }
.variable-range-scale { display:flex; align-items:center; justify-content:space-between; gap:14px; color:#9ab0b6; font-size:.64rem; }
.variable-range-scale small { color:#6f8991; text-align:center; }
.variable-history-extent { margin:9px 0 0; color:#607c84; font-size:.59rem; text-align:center; }
.variable-chart-legend { display:flex; align-items:center; gap:16px; margin:4px 0 -3px; color:#9fb2b8; font-size:.75rem; }
.variable-chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.variable-chart-legend i { display:block; flex:0 0 auto; }
.variable-chart-legend-observed { width:16px; height:10px; border-radius:3px 3px 1px 1px; background:#ff7738; }
.variable-chart-legend-normal { width:20px; height:0; border-top:2px dashed #77a6b1; }
.variable-metric.is-positive strong { color:#ff7b3d; }
.variable-metric.is-negative strong { color:#79b8d6; }
.variable-record-metric > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.variable-record-metric p { margin:0; }
.variable-record-metric p + p { padding-left:10px; border-left:1px solid rgba(145,184,192,.13); }
.variable-record-metric p small,.variable-record-metric p strong,.variable-record-metric p b { display:block; }
.variable-record-metric p strong { margin:3px 0; font-size:1rem; letter-spacing:-.04em; }
.variable-record-metric p b { color:#ff8753; font-size:.66rem; }
.variable-chart-panel { min-height:470px; }
.variable-chart { height:390px; margin-top:10px; }
.variable-history-comparison { min-height:430px; margin-top:14px; overflow:hidden; }
.variable-history-chart { height:340px; margin-top:10px; }
.variable-rain-rankings { margin-top:14px; }
@media (max-width:680px) {
  .variable-history-comparison { min-height:390px; overflow-x:auto; }
  .variable-history-chart { min-width:760px; height:310px; }
}
.normal-side #variableResults { display:grid; gap:5px; max-height:180px; margin-top:8px; overflow:auto; }
.normal-side #variableResults button { padding:8px; border:1px solid transparent; border-radius:7px; background:#0c2027; color:#a7bbc1; cursor:pointer; font:inherit; text-align:left; }
.normal-side #variableResults button strong,.normal-side #variableResults button small { display:block; }
.normal-side #variableResults button strong { color:#eaf5f6; font-size:.72rem; }
.normal-side #variableResults button small,.normal-side #variableResults > span { margin-top:3px; color:#78939c; font-size:.62rem; }
.normal-switch button:disabled { opacity:.35; cursor:not-allowed; }
@media (max-width:1050px) { .variable-card-grid { grid-template-columns:1fr 1fr; }.variable-toolbar { grid-template-columns:1fr 1fr; }.variable-toolbar > div:last-child { grid-column:1/-1; }.variable-hub-header { align-items:flex-start; flex-direction:column; } }
@media (max-width:680px) { .variable-hub-main { width:min(100% - 32px,1120px); padding-top:30px; }.variable-card-grid,.variable-hub-guide,.variable-toolbar { grid-template-columns:1fr; }.variable-toolbar > div:last-child { grid-column:auto; }.variable-range-presets { align-items:stretch; flex-wrap:wrap; }.variable-range-presets > span { width:100%; }.variable-range-presets button { flex:1 1 calc(50% - 7px); }.variable-range-head,.variable-range-dates { align-items:stretch; flex-direction:column; }.variable-date-entry { justify-items:stretch; }.variable-range-dates input { width:100%; box-sizing:border-box; }.variable-range-dates > span { display:none; }.variable-range-dates > button { width:100%; }.variable-range-navigation { grid-template-columns:1fr 1fr; }.variable-range-navigation .variable-range-scale { grid-column:1/-1; grid-row:1; }.variable-range-navigation > button { grid-row:2; }.variable-range-scale small { display:none; }.variable-chart { height:310px; }.variable-record-metric > div { grid-template-columns:1fr 1fr; } }
/* Internal traffic dashboard */
.admin-nav-link { color: #a9dcd9; text-decoration: none; font-size: .82rem; margin-right: 1rem; }
.variable-ranking-station { color: #80aaa6; font-size: .58em; font-family: "Aptos", "Segoe UI", sans-serif; font-weight: 700; letter-spacing: .07em; white-space: nowrap; }
.variable-social-actions { display: grid; justify-items: end; gap: .55rem; text-align: right; }
.variable-social-actions button { border: 1px solid rgba(142, 227, 213, .45); border-radius: 999px; background: rgba(142, 227, 213, .08); color: #bdf3e9; padding: .42rem .72rem; font: 700 .68rem "Aptos", "Segoe UI", sans-serif; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.variable-social-actions button:hover { background: #8ee3d5; color: #102426; transform: translateY(-1px); }
.variable-social-actions button:disabled { cursor: wait; opacity: .65; }
@media (max-width: 620px) { .variable-social-actions { justify-items: start; text-align: left; margin-top: .6rem; } .variable-social-actions .normal-reference { max-width: 250px; } }
.admin-traffic-link { text-decoration: none; color: inherit; }
.admin-traffic-shell { max-width: 1180px; }
.traffic-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin: 1rem 0 2rem; }
.traffic-heading p, .traffic-panel header p { color: #6dd2c9; letter-spacing: .1em; text-transform: uppercase; font-size: .69rem; margin: 0 0 .45rem; }
.traffic-heading h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: .89; color: #f0f5f3; }
.traffic-heading h1 em { color: #75d5cf; font-weight: 400; }
.traffic-heading small { display: block; margin-top: 1rem; color: #8c9da4; max-width: 33rem; }
.traffic-periods { display: flex; padding: .35rem; border: 1px solid rgba(149, 188, 187, .16); border-radius: .8rem; background: rgba(7, 22, 31, .54); }
.traffic-periods a { color: #92a5aa; text-decoration: none; font-size: .78rem; padding: .55rem .7rem; border-radius: .55rem; }
.traffic-periods a.is-active { color: #062128; background: #75d5cf; font-weight: 700; }
.traffic-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.traffic-kpis article, .traffic-panel { border: 1px solid rgba(154, 193, 191, .14); background: linear-gradient(145deg, rgba(17, 39, 48, .86), rgba(7, 25, 34, .86)); border-radius: 1rem; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.traffic-kpis article { padding: 1.1rem 1.2rem; }.traffic-kpis span { display:block; color:#9aadb1; font-size:.76rem; }.traffic-kpis strong { display:block; margin:.45rem 0 .15rem; font-size:2rem; color:#f2f6f4; }.traffic-kpis small { color:#6dd2c9; font-size:.71rem; }
.traffic-panel { padding: 1.25rem; }.traffic-panel header { display:flex; justify-content:space-between; align-items:start; margin-bottom:1rem; }.traffic-panel h2 { margin:0; font-size:1.1rem; color:#f1f4f2; }.traffic-panel header > span { color:#8c9da4; font-size:.75rem; }
.traffic-timeline { margin-bottom:1rem; }.traffic-bars { height:150px; display:flex; align-items:end; gap:3px; padding-top:12px; border-bottom:1px solid rgba(157,189,188,.2); }.traffic-day { height:100%; flex:1; min-width:3px; display:flex; flex-direction:column; justify-content:end; align-items:center; }.traffic-columns { flex:1; width:100%; display:flex; align-items:end; gap:1px; }.traffic-columns i,.traffic-columns em,.traffic-columns b { width:33.333%; min-height:2px; border-radius:2px 2px 0 0; }.traffic-columns i { background:#66c9c1; }.traffic-columns em { background:#6f8eae; }.traffic-columns b { background:#ee8c45; }.traffic-day small { margin-top:.35rem; height:1rem; font-size:.58rem; color:#778b92; white-space:nowrap; }.traffic-legend { display:flex; gap:1rem; margin-top:.75rem; color:#96a9ad; font-size:.72rem; }.traffic-legend i,.traffic-legend em,.traffic-legend b { display:inline-block; width:8px; height:8px; border-radius:50%; background:#66c9c1; }.traffic-legend em { background:#6f8eae; }.traffic-legend b { background:#ee8c45; }
.traffic-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }.traffic-list { display:grid; gap:.66rem; }.traffic-list > div,.traffic-linked-list > a { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; padding-bottom:.55rem; border-bottom:1px solid rgba(149,188,187,.1); overflow:hidden; }.traffic-linked-list > a { color:inherit; text-decoration:none; transition:color .16s ease,background .16s ease,padding .16s ease; }.traffic-linked-list > a:hover { padding-inline:.45rem; color:#fff; background:rgba(255,255,255,.03); }.traffic-list span { position:relative; z-index:1; color:#c7d3d4; font-size:.82rem; }.traffic-list small { color:#768b91; margin-left:.3rem; }.traffic-list b { position:relative; z-index:1; color:#75d5cf; font-size:.8rem; }.traffic-list i { position:absolute; z-index:0; left:0; bottom:0; height:2px; background:linear-gradient(90deg,#4ca9a4,#75d5cf); }.traffic-none { color:#87999e; font-size:.82rem; }.traffic-downloads { display:flex; gap:.8rem; flex-wrap:wrap; }.traffic-downloads div { min-width:125px; padding:.9rem 1rem; border-radius:.7rem; background:rgba(117,213,207,.06); }.traffic-downloads strong { display:block; color:#f2f5f4; font-size:1.5rem; }.traffic-downloads span { display:block; color:#b5c5c5; margin-top:.2rem; font-size:.8rem; }.traffic-downloads small { color:#75d5cf; font-size:.68rem; }
.traffic-export-panel { margin-bottom:1rem; }.traffic-table-wrap { overflow-x:auto; }.traffic-table { width:100%; min-width:1020px; border-collapse:collapse; color:#c5d1d2; font-size:.75rem; }.traffic-table th { padding:.65rem .7rem; border-bottom:1px solid rgba(149,188,187,.2); color:#789097; font-size:.64rem; letter-spacing:.07em; text-align:left; text-transform:uppercase; }.traffic-table td { padding:.78rem .7rem; border-bottom:1px solid rgba(149,188,187,.08); vertical-align:top; }.traffic-table tbody tr:hover { background:rgba(117,213,207,.035); }.traffic-table td strong,.traffic-table td small { display:block; }.traffic-table td strong { color:#e2e9e8; font-size:.76rem; }.traffic-table td small { margin-top:.2rem; color:#71868c; font-size:.65rem; }.traffic-format { display:inline-block; padding:.2rem .42rem; border:1px solid rgba(117,213,207,.2); border-radius:.35rem; color:#75d5cf; font-size:.63rem; font-weight:700; }
.traffic-recent-panel { margin-top:1rem; margin-bottom:2rem; }.traffic-recent-list { display:grid; gap:.5rem; }.traffic-recent-item { display:grid; grid-template-columns:145px minmax(0,1fr) 84px; align-items:center; gap:1rem; padding:.72rem .8rem; border:1px solid rgba(149,188,187,.1); border-radius:.7rem; background:rgba(5,20,28,.28); }.traffic-activity-type { justify-self:start; padding:.28rem .48rem; border:1px solid rgba(111,158,170,.25); border-radius:999px; color:#9eb8bd; background:rgba(94,135,146,.1); font-size:.61rem; font-weight:800; letter-spacing:.03em; }.traffic-activity-type.is-download { color:#ffc284; border-color:rgba(238,140,69,.3); background:rgba(238,140,69,.1); }.traffic-activity-type.is-analysis { color:#75d5cf; border-color:rgba(117,213,207,.3); background:rgba(117,213,207,.1); }.traffic-activity-type.is-department { color:#a9b6e6; border-color:rgba(111,142,174,.3); background:rgba(111,142,174,.1); }.traffic-recent-item > div { min-width:0; }.traffic-recent-item strong,.traffic-recent-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.traffic-recent-item strong { color:#e5edeb; font-size:.78rem; }.traffic-recent-item small { margin-top:.18rem; color:#778e94; font-size:.67rem; }.traffic-recent-item time { color:#aebfc0; font-size:.69rem; text-align:right; white-space:nowrap; }.traffic-recent-item time small { color:#71878d; font-size:.61rem; }
.traffic-profile-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin:1rem 0 2rem; }.traffic-profile-heading p { margin:0 0 .45rem; color:#6dd2c9; font-size:.69rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.traffic-profile-heading h1 { margin:0; max-width:760px; color:#f0f5f3; font-size:clamp(2.3rem,5vw,4.3rem); line-height:.92; }.traffic-profile-heading span { display:block; max-width:520px; margin-top:.8rem; color:#8c9da4; line-height:1.55; }.traffic-profile-heading > a { flex:0 0 auto; }.traffic-columns--two i,.traffic-columns--two em,.traffic-columns--two b { width:50%; }.traffic-table-link { color:#e8f1ef; font-weight:750; text-decoration:none; }.traffic-table-link:hover { color:#75d5cf; }.traffic-profile-table { min-width:760px; }
@media (max-width: 760px) { .traffic-heading,.traffic-profile-heading { align-items:flex-start; flex-direction:column; }.traffic-profile-heading { gap:1rem; }.traffic-profile-heading h1 { font-size:clamp(2rem,12vw,3rem); }.traffic-kpis { grid-template-columns:repeat(2,1fr); }.traffic-grid { grid-template-columns:1fr; }.traffic-periods { width:100%; overflow:auto; }.traffic-periods a { white-space:nowrap; }.traffic-recent-item { grid-template-columns:1fr auto; gap:.5rem .75rem; }.traffic-activity-type { grid-column:1 / -1; }.traffic-recent-item time { align-self:end; } }