:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #536273;
  --page: #f4f8fc;
  --panel: #ffffff;
  --line: #d5e1ed;
  --blue: #155d92;
  --blue-pale: #e3f1fb;
  --green: #1d7045;
  --green-pale: #e6f6ec;
  --amber: #855500;
  --amber-pale: #fff4db;
  --red: #a62d3d;
  --red-pale: #fde9ec;
  --shadow: 0 8px 28px rgb(20 57 87 / 8%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button { font: inherit; }
.shell { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
.masthead { padding: 42px 0 35px; color: #fff; background: linear-gradient(125deg, #0c3f66, #126b96 58%, #149488); }
.masthead h1 { margin: 4px 0 7px; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.1; letter-spacing: -.03em; }
.lede { max-width: 720px; margin: 0; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.55; color: #e6f5fb; }
.eyebrow, .source-kind { margin: 0; font-size: .74rem; font-weight: 800; line-height: 1.3; letter-spacing: .095em; }
.eyebrow { color: #b8e8e3; }
.source-kind { color: var(--blue); }
.page-status { min-height: 1.35rem; margin: 22px 0 0; color: #e3f6ff; }
.page-status.error { color: #ffe5d0; }
.panel { margin-top: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.panel h2 { margin: 3px 0 0; font-size: clamp(1.18rem, 2vw, 1.45rem); line-height: 1.25; }
.map-product { margin-top: 25px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #f9fdff, #ecf7f5); box-shadow: var(--shadow); }
.map-product-heading { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.map-product-heading h2 { margin: 3px 0 0; font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.2; }
.map-product-heading .muted { max-width: 330px; margin: 3px 0 0; text-align: right; line-height: 1.45; }
.map-product-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .85fr); gap: 18px; margin-top: 17px; }
.station-context { display: grid; align-content: start; gap: 14px; min-width: 0; }
.station-selection { padding: 14px 15px; border: 1px solid #b9d7e2; border-radius: 13px; background: rgb(255 255 255 / 82%); }
.selected-station-name { margin: 5px 0 0; color: var(--ink); font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.selected-station-context { margin: 6px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.station-select-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.station-select-button, .station-history-action { min-height: 38px; padding: 7px 11px; cursor: pointer; border: 1px solid #afc8da; border-radius: 8px; color: #21445d; background: #fff; font-size: .84rem; font-weight: 750; line-height: 1.25; }
.station-select-button:hover, .station-history-action:hover { border-color: var(--blue); background: #f5fbff; }
.station-select-button.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.station-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / 88%); }
.station-card-primary { border-color: #8bcfc2; background: linear-gradient(140deg, #f4fffc, #eff9ff); }
.station-card-selected { box-shadow: 0 0 0 3px rgb(21 93 146 / 14%), var(--shadow); }
.station-card h3 { margin: 3px 0 0; font-size: 1.05rem; line-height: 1.28; }
.station-card .measurements { margin-top: 13px; gap: 8px; }
.station-card .measurement { padding: 9px 10px; }
.station-card .measurement dd { font-size: 1rem; }
.station-card .source-note { margin-top: 12px; }
.inline-weather-context { margin-top: 14px; padding: 11px 12px; border: 1px solid #d8c8eb; border-radius: 10px; background: #fbf8ff; }
.inline-weather-context .source-kind { color: #7551a4; }
.inline-weather-context .source-note { min-height: 0; margin: 5px 0 0; }
.station-history-action { width: 100%; margin-top: 14px; border-color: #79b5ce; color: #0f527c; background: #edf8fc; text-align: left; }
.introduction { margin-top: 20px; }
.introduction p { max-width: 930px; margin: 12px 0 0; line-height: 1.6; }
.muted, .source-note, .map-note, .chart-note { color: var(--muted); }
.card-heading, .section-heading { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.card-heading .status-badge { flex: 0 0 auto; }
.status-badge { display: inline-block; max-width: 170px; padding: 5px 9px; border-radius: 100px; color: #1e3b51; background: #e8eff5; font-size: .74rem; font-weight: 800; letter-spacing: .025em; text-align: center; }
.status-badge.current { color: var(--green); background: var(--green-pale); }
.status-badge.stale { color: var(--amber); background: var(--amber-pale); }
.status-badge.unavailable, .status-badge.error { color: var(--red); background: var(--red-pale); }
.measurements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.measurement { min-width: 0; padding: 11px 12px; border-radius: 10px; background: #f2f7fb; }
.measurement dt { color: var(--muted); font-size: .78rem; }
.measurement dd { margin: 4px 0 0; font-size: clamp(1rem, 2.4vw, 1.27rem); font-weight: 750; overflow-wrap: anywhere; }
.source-note { min-height: 1.35rem; margin: 15px 0 0; font-size: .9rem; line-height: 1.45; }
.map { height: min(540px, 62vw); min-height: 390px; overflow: hidden; border: 1px solid #b7d3e0; border-radius: 14px; background: #dbeaf2; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%); }
.map-empty { display: grid; height: 100%; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
.map-note, .chart-note { margin: 13px 0 0; font-size: .88rem; line-height: 1.45; }
.snapshot { margin: 9px 0 0; font-size: .88rem; }
.history-heading { align-items: flex-end; }
.history-heading .muted { margin: 0; text-align: right; }
.history-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.source-button, .period-button { min-height: 40px; padding: 8px 13px; cursor: pointer; border: 1px solid #afc8da; border-radius: 9px; color: #21445d; background: #fff; font-size: .9rem; font-weight: 700; }
.source-button:hover, .period-button:hover { border-color: var(--blue); background: #f5fbff; }
.source-button:focus-visible, .period-button:focus-visible, .station-select-button:focus-visible, .station-history-action:focus-visible, .skip-link:focus-visible { outline: 3px solid #efab28; outline-offset: 2px; }
.source-button.active, .period-button.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.history-status { min-height: 1.4rem; margin: 18px 0 0; line-height: 1.45; }
.history-status.error { color: var(--red); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 15px; }
.chart-panel { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fbfdff; }
.chart-panel h3 { margin: 0 0 8px; font-size: 1rem; }
.chart-host { min-height: 245px; }
.chart-empty { display: grid; min-height: 220px; place-items: center; color: var(--muted); text-align: center; }
.footer { margin-top: 43px; padding: 25px 0; color: #daeafa; background: #173a56; }
.footer p { margin: 0; font-size: .84rem; line-height: 1.55; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 12px; transform: translateY(-200%); color: #111; background: #fff; border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }
.leaflet-popup-content p { margin: 5px 0; }

@media (max-width: 730px) {
  .masthead { padding: 31px 0 28px; }
  .shell { width: min(100% - 24px, 1160px); }
  .panel { padding: 17px; border-radius: 13px; }
  .map-product { padding: 17px; border-radius: 14px; }
  .map-product-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .map-product-heading .muted { max-width: none; text-align: left; }
  .map-product-layout, .chart-grid { grid-template-columns: 1fr; gap: 14px; }
  .section-heading, .history-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .history-heading .muted { text-align: left; }
  .map { height: 360px; min-height: 0; }
}

@media (max-width: 400px) {
  .measurements { grid-template-columns: 1fr; }
  .status-badge { max-width: 130px; font-size: .68rem; }
  .source-button, .period-button { flex: 1 1 auto; padding-inline: 10px; }
}