:root { --nv-r: 6px; }
* { box-sizing: border-box; }
body.nv { margin: 0; background: #fff; color: #202020; }
.weather-page { width: min(100%, 1040px); margin: 0 auto; padding: 20px 16px 96px; }
.weather-page > section { margin-bottom: 32px; min-width: 0; }
.weather-page h1 { font-size: clamp(27px, 5vw, 40px); line-height: 1.14; font-weight: 650; margin: 18px 0 12px; max-width: 24ch; }
.weather-page h2 { font-size: 21px; margin: 0; }
.weather-page h3 { font-size: 16px; margin: 0 0 12px; }
.weather-page p { line-height: 1.5; overflow-wrap: anywhere; }
.answer { padding: 22px; background: #fafafa; border: 1px solid #dedede; border-top: 4px solid #e9b83a; border-radius: var(--nv-r); }
.answer-top, .section-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.answer-top svg { width: 36px; height: 36px; }
.muted, #updated { color: #606060; font-size: 13px; }
.stale { font-weight: 650; color: #202020 !important; text-decoration: underline; text-decoration-color: #e9b83a; text-underline-offset: 4px; }
.area-control { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; }
.area-control select { font: inherit; background: #fff; color: #202020; border: 1px solid #aaa; border-radius: var(--nv-r); min-height: 44px; padding: 8px 12px; max-width: 100%; }
.section-heading { margin-bottom: 14px; }
.forecast-strip { display: flex; overflow-x: auto; max-width: 100%; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.forecast-cell { flex: 1 0 180px; min-width: 0; padding: 16px; background: #fafafa; border: 1px solid #dedede; border-radius: var(--nv-r); scroll-snap-align: start; }
.forecast-cell svg { display: block; width: 32px; height: 32px; margin: 12px 0; }
.forecast-cell p { margin: 8px 0; font-size: 14px; }
.rain-layout { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid #dedede; border-radius: var(--nv-r); }
#map { min-width: 0; height: 300px; background: #f4f4f4; z-index: 0; }
.rain-sheet { padding: 18px; background: #fff; border-top: 1px solid #dedede; }
#rain-stations { list-style: none; margin: 0; padding: 0; }
.station-button { display: grid; grid-template-columns: minmax(0, 1fr) auto; text-align: left; gap: 8px; width: 100%; min-height: 52px; padding: 10px 0; border: 0; border-bottom: 1px solid #eee; background: #fff; color: #202020; cursor: pointer; font: inherit; }
.station-button small { display: block; color: #606060; margin-top: 4px; }
.station-button strong { white-space: nowrap; }
#locate { position: fixed; bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; width: 52px; height: 52px; background: #e9b83a; border: 1px solid #202020; border-radius: var(--nv-r); color: #202020; z-index: 1100; cursor: pointer; }
#locate svg { width: 26px; height: 26px; vertical-align: middle; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #e9b83a; outline-offset: 3px; }
.flood-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid #202020; border-left: 6px solid #e9b83a; border-radius: var(--nv-r); background: #fff8e5; }
.flood-alert p { margin: 6px 0 0; font-size: 14px; }
.flood-alert div { flex: 1; min-width: 0; }
.flood-alert button { min-width: 44px; min-height: 44px; border: 1px solid #aaa; border-radius: var(--nv-r); background: #fff; cursor: pointer; }
.weather-source { border-top: 1px solid #dedede; font-size: 12px; color: #606060; }
.weather-source a { color: #202020; }
.skeleton { display: block; width: 90%; height: 14px; margin: 8px 0; border-radius: var(--nv-r); background: #e5e5e5; animation: weather-pulse 1.5s ease-in-out infinite alternate; }
.skeleton-title { height: 62px; }
@keyframes weather-pulse { to { opacity: .45; } }
@media (min-width: 760px) { .weather-page { padding: 28px 24px 96px; } .rain-layout { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); } #map { height: 390px; } .rain-sheet { border-top: 0; border-left: 1px solid #dedede; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }