:root {
  --navy: #073763;
  --blue: #0b5d91;
  --blue-bright: #087bb8;
  --sky: #e8f4fb;
  --ink: #142636;
  --muted: #586a78;
  --line: #cad7df;
  --paper: #ffffff;
  --canvas: #eef3f6;
  --warning: #bf331f;
  --warning-bg: #fff1ed;
  --focus: #f4bf1a;
  --shadow: 0 2px 9px rgba(7, 55, 99, .1);
  --radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display:none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; max-width: 100%; overflow-x: clip; color: var(--ink); background: var(--canvas); font-size: 16px; line-height: 1.45; }
a { color: var(--blue); text-underline-offset: 3px; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--focus); color: #111; transform: translateY(-150%); }
.skip-link:focus-visible { transform: translateY(0); }
.skip-link:focus:not(:focus-visible) { transform: translateY(-150%); }
:focus-visible { outline: 3px solid #111; outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus); }
.visually-hidden { position: absolute !important; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.print-only { display:none; }

.utility-bar { background: #052b4e; color: #dcebf5; font-size: .78rem; }
.utility-inner { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.utility-inner nav { display: flex; gap: 18px; align-items: center; }
.network-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #70ce88; }.network-status.offline::before { background: #ffbf47; }
.utility-inner a, .text-button { min-height: 24px; display: inline-flex; align-items: center; color: inherit; background: none; border: 0; padding: 3px 6px; }
.brand-row { min-height: 112px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--navy); text-decoration: none; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; background: var(--navy); color: white; border-radius: 50% 50% 48% 52% / 63% 63% 37% 37%; font-size: 2rem; font-weight: bold; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12); }
.brand strong { display: block; font-size: 2rem; letter-spacing: -.04em; line-height: 1; }
.brand small { display: block; margin-top: 7px; color: var(--muted); font-size: .76rem; }
.location-search { width: min(580px, 58%); }
.location-search label { display: block; font-weight: bold; color: var(--navy); font-size: .82rem; margin-bottom: 5px; }
.search-controls { display: flex; }
.search-controls input { min-width: 0; flex: 1; height: 44px; padding: 0 13px; border: 1px solid #8aa3b5; border-radius: var(--radius) 0 0 var(--radius); }
.search-controls button { min-height: 44px; padding: 0 18px; background: var(--blue); color: white; border: 1px solid var(--blue); font-weight: bold; }
.search-controls .secondary-button { margin-left: 8px; border-radius: var(--radius); }
.secondary-button { min-height: 36px; padding: 6px 11px; color: var(--blue); background: white; border: 1px solid #8aa3b5; border-radius: var(--radius); font-weight: bold; }
.secondary-button:hover { background: var(--sky); }.secondary-button:disabled { cursor: wait; opacity: .65; }
.search-status { min-height: 20px; font-size: .78rem; color: var(--muted); margin-top: 3px; }
.location-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }.location-choices > span { width: 100%; }.location-choice { min-height: 44px; padding: 6px 10px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; color: var(--blue); background: white; border: 1px solid var(--line); border-radius: 3px; text-align:left; }.location-choice small { color:var(--muted); font-weight:normal; }
.recent-locations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted); font-size: .78rem; }
.recent-location { min-height: 32px; padding: 4px 11px; color: var(--blue); background: white; border: 1px solid var(--line); border-radius: 16px; font-size: .78rem; font-weight: bold; }
.recent-location:hover { background: var(--sky); }
.recent-clear { min-height: 32px; padding: 3px 6px; color: var(--blue); background: none; border: 0; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.primary-nav { background: var(--navy); border-bottom: 4px solid #55add6; }
.nav-inner { display: flex; overflow-x: auto; scrollbar-width: thin; }
.nav-inner a { flex: 0 0 auto; padding: 15px 21px; color: white; text-decoration: none; font-weight: bold; font-size: .9rem; border-right: 1px solid rgba(255,255,255,.15); }
.nav-inner a:hover, .nav-inner a.active { background: #0c679d; }

.ad { contain: strict; overflow: hidden; display: grid; place-items: center; align-content: center; text-align: center; color: #55646c; border: 1px dashed #9eacb4; background: repeating-linear-gradient(135deg, #f9fafb, #f9fafb 8px, #f1f4f5 8px, #f1f4f5 16px); }
.ad span { text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; }
.ad strong { font-size: .86rem; color: #44535c; }
.ad small { font-size: .68rem; }
.ad-leaderboard { height: 96px; margin: 0 0 18px; }
.ad-strip { height: 94px; margin: 18px 0; }
.ad-rectangle { height: 250px; }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; margin-block: 18px 42px; align-items: start; }
.main-column, .side-column { min-width: 0; }
.side-column { display: grid; gap: 18px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: .78rem; margin: 4px 0 14px; }
.panel, .warning-panel { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); margin-bottom: 18px; }
.panel-heading { padding: 15px 18px 12px; border-bottom: 1px solid var(--line); }
.panel-heading h1, .panel-heading h2 { margin: 1px 0 0; color: var(--navy); font-size: 1.3rem; line-height: 1.15; }
.panel-heading p { margin: 0; }
.eyebrow { color: var(--blue); font-size: .68rem; font-weight: bold; text-transform: uppercase; letter-spacing: .1em; }
.inline-heading, .location-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.weather-actions { display: flex; align-items: center; gap: 9px; }.refresh-button, .share-button { white-space: nowrap; }.share-button:disabled { cursor: not-allowed; }
.inline-heading > p, .location-heading-row > div > p:last-child { color: var(--muted); font-size: .78rem; }

.warning-panel { min-height: 104px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border-left: 6px solid #d8a800; background: #fffaf0; }
.warning-panel.has-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.warning-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #d8a800; color: #231d00; font-size: 1.5rem; font-weight: bold; }
.has-warning .warning-icon { background: var(--warning); }
.warning-panel h2 { margin: 1px 0 3px; font-size: 1.15rem; color: #5d4700; }
.warning-panel p { margin: 0; font-size: .82rem; }
.warning-links { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }.warning-links a { white-space:nowrap; font-weight:bold; font-size:.82rem; }

.current-weather { min-height: 154px; padding: 22px; display: grid; grid-template-columns: 90px 1fr minmax(300px, 1.45fr); gap: 18px; align-items: center; }
.weather-symbol { width: 82px; height: 82px; display: grid; place-items: center; font-size: 3rem; color: #d58b00; background: var(--sky); border-radius: 50%; }
.current-temp { display: block; color: var(--navy); font-size: 3.3rem; font-weight: bold; letter-spacing: -.07em; line-height: 1; }
.current-weather > div:nth-child(2) strong { display: block; margin-top: 8px; }
.current-details { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-left: 1px solid var(--line); }
.current-details div { padding: 8px 16px; }
.current-details dt { color: var(--muted); font-size: .73rem; }
.current-details dd { margin: 1px 0 0; font-weight: bold; }
.unit-toggle { display: flex; }
.unit { width: 44px; height: 44px; background: white; border: 1px solid var(--line); color: var(--blue); }
.unit + .unit { border-left: 0; }
.unit.active { background: var(--navy); color: white; }
.data-notice { margin: 0 18px 16px; padding: 9px 12px; color: #674b00; background: #fff6d8; border-left: 4px solid #d8a800; font-size: .78rem; }
.is-loading { opacity: .62; animation: breathe 1.2s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .85; } }

.four-hour-summary { margin:0; padding:16px 18px 6px; color:var(--ink); font-size:1rem; font-weight:bold; }
.four-hour-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px 16px 14px; }
.four-hour-card { min-width:0; padding:13px; border:1px solid var(--line); border-top:4px solid var(--blue); background:#f7fafc; }
.four-hour-card time,.four-hour-card strong,.four-hour-card span,.four-hour-card small { display:block; }
.four-hour-card time { color:var(--navy); font-size:.78rem; font-weight:bold; }
.four-hour-card .four-hour-condition { min-height:2.9em; margin:7px 0; font-size:.78rem; }
.four-hour-card .four-hour-temp { color:var(--navy); font-size:1.65rem; line-height:1; }
.four-hour-card small { margin-top:8px; color:var(--muted); font-size:.69rem; }
.four-hour-source { margin:0; padding:9px 16px 12px; border-top:1px solid var(--line); color:var(--muted); font-size:.74rem; }
.four-hour-empty { grid-column:1/-1; margin:0; padding:16px; color:var(--muted); text-align:center; }

.forecast-cards { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); overflow-x: auto; }
.forecast-day { min-width: 92px; padding: 14px 8px; text-align: center; background: white; border: 0; border-right: 1px solid var(--line); color: var(--ink); }
.forecast-day:last-child { border-right: 0; }
.forecast-day:hover, .forecast-day.active { background: var(--sky); box-shadow: inset 0 -4px 0 var(--blue); }
.forecast-day strong, .forecast-day small, .forecast-day span { display: block; }
.forecast-day strong { color: var(--navy); }
.forecast-day .day-icon { font-size: 2rem; margin: 8px 0; color: #ce8500; }
.forecast-day .max { font-size: 1.2rem; font-weight: bold; }
.forecast-day .min { color: var(--muted); font-size: .8rem; }
.forecast-day .rain { color: var(--blue); font-size: .72rem; margin-top: 8px; }
.day-detail { padding: 16px 18px; background: #f3f8fb; border-top: 1px solid var(--line); }
.day-detail h3 { margin: 0 0 6px; color: var(--navy); }
.day-detail p { margin: 0; }
.day-detail-grid { display: grid; grid-template-columns: 1.7fr repeat(3, minmax(90px, .6fr)); gap: 14px; align-items: center; }.day-detail-stat { padding-left: 14px; border-left: 1px solid var(--line); }.day-detail-stat small, .day-detail-stat strong { display: block; }.day-detail-stat small { color: var(--muted); font-size: .7rem; }.day-detail-stat strong { margin-top: 3px; color: var(--navy); }

.chart-heading { display: grid; grid-template-columns: minmax(190px,1fr) auto; align-items: end; gap: 10px 18px; }
.chart-ranges, .chart-metrics { display: flex; flex-wrap: wrap; gap: 4px; }.chart-metrics { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }.chart-metrics legend { width: 100%; margin: 0 0 3px; padding: 0; color: var(--navy); font-size: .72rem; font-weight: bold; }
.chart-range, .chart-metric { min-height: 38px; padding: 7px 11px; color: var(--blue); background: white; border: 1px solid var(--line); border-radius: 3px; font-size: .74rem; font-weight: bold; }.chart-metric { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }.chart-metric input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--focus); }.chart-range.active, .chart-metric.active { color: white; background: var(--navy); }.chart-metric:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }.chart-metric:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.chart-metric-all { border-style: dashed; }.chart-metric-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .7rem; }
.chart-day-strip { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); background: #f5f8fa; }.chart-day-strip button { min-height: 54px; padding: 7px 4px; color: var(--blue); background: transparent; border: 0; border-right: 1px solid var(--line); }.chart-day-strip button:last-child { border-right: 0; }.chart-day-strip button[aria-selected="true"] { color: white; background: var(--blue); }.chart-day-strip strong, .chart-day-strip span { display: block; }.chart-day-strip span { margin-top: 2px; font-size: .65rem; }
.chart-selection { padding: 16px 18px 4px; display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: center; gap: 14px; text-align: center; }.chart-selected-summary { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; }.chart-selection span { color: var(--navy); font-weight: bold; }.chart-selection strong { grid-row: 1; grid-column: 2; color: var(--blue); font-size: 1.9rem; }.chart-selection small { grid-column: 1 / -1; color: var(--muted); }.selected-metric-values { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }.selected-metric-values[hidden] { display: none; }.selected-metric-values span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: #f6f9fb; color: var(--text); font-size: .7rem; font-weight: normal; }
.chart-legend { min-height: 0; margin: 0; padding: 0 18px 6px; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .68rem; list-style: none; }.chart-legend:empty { display: none; }.chart-legend li { display: inline-flex; align-items: center; gap: 5px; }.chart-legend i { width: 18px; height: 3px; display: inline-block; border-radius: 2px; background: var(--series-color, var(--blue)); }
.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; color: var(--blue); background: white; border: 1px solid #8aa3b5; border-radius: 50%; font-size: 1.35rem; font-weight: bold; }.icon-button:hover { background: var(--sky); }.icon-button:disabled { opacity: .45; cursor: not-allowed; }
.hourly-chart { min-height: 260px; margin: 0 12px; overflow: hidden; cursor: crosshair; touch-action: pan-y; }.hourly-chart:focus { outline: 3px solid var(--focus); outline-offset: -3px; }.hourly-chart svg { width: 100%; height: 260px; display: block; }.chart-grid-line { stroke: var(--line); stroke-width: 1; }.chart-day-band { fill: rgba(8,123,184,.025); }.chart-day-band.alternate { fill: rgba(8,123,184,.075); }.chart-day-label, .chart-unit-label { fill: var(--navy); font-size: 12px; font-weight: bold; }.chart-line { fill: none; stroke: var(--series-color, var(--blue)); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }.chart-line.metric-feels { stroke-dasharray: 7 5; }.chart-line.metric-rain { stroke-dasharray: 2 4; }.chart-line.metric-rainChance { stroke-dasharray: 9 4; }.chart-line.metric-wind { stroke-dasharray: 11 3 2 3; }.chart-line.metric-humidity { stroke-dasharray: 13 4; }.metric-temperature { --series-color:#087bb8; }.metric-feels { --series-color:#274e78; }.metric-rain { --series-color:#3182bd; }.metric-rainChance { --series-color:#52a9d2; }.metric-wind { --series-color:#76549d; }.metric-humidity { --series-color:#187f72; }.metric-uv { --series-color:#b05d00; }.chart-point { fill: white; stroke: var(--series-color, var(--blue)); stroke-width: 2; }.chart-point.selected { fill: var(--focus); stroke-width: 3; }.chart-bar { fill: #5aaed5; }.chart-bar.selected { fill: var(--navy); }.chart-cursor { stroke: var(--navy); stroke-width: 2; stroke-dasharray: 4 3; }.chart-hit-area { fill: transparent; pointer-events: all; }.chart-label { fill: var(--muted); font-size: 12px; }.chart-unavailable { min-height: 250px; display: grid; place-content: center; gap: 5px; text-align: center; color: var(--muted); }.chart-unavailable strong { color: var(--navy); }.timeline-label { display: block; margin: 0 18px 4px; color: var(--muted); font-size: .72rem; font-weight: bold; }.time-slider { width: calc(100% - 36px); margin: 0 18px; accent-color: var(--blue); }.chart-axis { display: flex; justify-content: space-between; padding: 4px 18px 16px; color: var(--muted); font-size: .68rem; }.chart-data-details, .daily-comparison { border-top: 1px solid var(--line); }.chart-data-details summary, .daily-comparison summary { min-height: 44px; padding: 11px 16px; color: var(--blue); font-size: .78rem; font-weight: bold; cursor: pointer; }.chart-data-details table { min-width: 760px; }.daily-comparison table { min-width: 720px; }
.capital-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.capital-card { min-height: 90px; padding: 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; text-align: left; color: var(--ink); background: white; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capital-card:hover { background: var(--sky); }.capital-card strong { color: var(--navy); }.capital-card .capital-temp { grid-row: 1 / 3; grid-column: 2; font-size: 1.55rem; font-weight: bold; color: var(--blue); }.capital-card small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capital-skeleton { height: 90px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(100deg, #f4f7f8 25%, #e4edf1 40%, #f4f7f8 58%); background-size: 220% 100%; animation: skeleton 1.2s ease-in-out infinite; }
.capital-error { grid-column: 1 / -1; margin: 0; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--muted); }
@keyframes skeleton { to { background-position-x: -220%; } }

.table-scroll { overflow-x: auto; }
.table-scroll-hint { display:none; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
th { text-align: left; color: white; background: var(--blue); }
th, td { padding: 10px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:nth-child(even) { background: #f4f8fa; }
.table-scroll th:first-child, .table-scroll td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: 1px 0 0 var(--line); }
.table-scroll thead th:first-child { z-index: 2; background: var(--blue); }
.table-scroll tbody th:first-child { color: white; background: var(--blue); }

.radar-summary { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f5f8fa; }
.status-pill { padding: 5px 8px; border: 1px solid #b9c8d1; border-radius: 999px; color: var(--muted); background: white; font-size: .7rem; }.status-pill strong { margin-right: 4px; color: var(--navy); }
.map-layer-picker { margin: 0; padding: 9px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; border: 0; border-bottom: 1px solid var(--line); background: #fbfcfd; }.map-layer-picker legend { float: left; margin-right: 12px; color: var(--navy); font-size: .72rem; font-weight: bold; }.map-layer-picker label { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-size: .75rem; font-weight: bold; }.map-layer-picker input { accent-color: var(--blue); }.map-layer-picker span { margin-left: auto; color: var(--muted); font-size: .7rem; }
.map-product-picker { margin:0; padding:10px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:7px; border:0; border-bottom:1px solid var(--line); background:#eaf4fa; }
.map-product-picker legend { float:left; margin-right:10px; color:var(--navy); font-size:.72rem; font-weight:bold; }
.map-product-picker label { position:relative; display:inline-flex; cursor:pointer; }
.map-product-picker input { position:absolute; opacity:0; pointer-events:none; }
.map-product-picker label span { min-height:38px; display:inline-flex; align-items:center; padding:7px 13px; border:1px solid #8aa3b5; border-radius:3px; color:var(--blue); background:white; font-size:.76rem; font-weight:bold; }
.map-product-picker label:has(input:checked) span { color:white; background:var(--navy); border-color:var(--navy); }
.map-product-picker label:focus-within span { outline:3px solid #111; outline-offset:2px; box-shadow:0 0 0 5px var(--focus); }
.map-product-picker small { margin-left:auto; color:var(--muted); font-size:.69rem; }
.map-range-picker { margin:0; padding:9px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; border:0; border-bottom:1px solid var(--line); background:#f4f8fa; }
.map-range-picker legend { float:left; margin-right:12px; color:var(--navy); font-size:.72rem; font-weight:bold; }
.map-range-buttons { display:flex; flex-wrap:wrap; gap:4px; }
.map-range-buttons button { min-height:36px; padding:6px 12px; border:1px solid #8aa3b5; border-radius:3px; color:var(--blue); background:white; font-size:.74rem; font-weight:bold; }
.map-range-buttons button[aria-pressed="true"] { color:white; background:var(--navy); border-color:var(--navy); }
.map-range-buttons button:disabled { cursor:wait; opacity:.55; }
.map-range-picker > span { margin-left:auto; color:var(--muted); font-size:.7rem; }
.map-overlay-picker { margin:0; padding:12px 14px; border:0; border-bottom:1px solid var(--line); background:#eef6fa; }
.map-overlay-picker legend { color:var(--navy); font-size:.76rem; font-weight:800; }.map-overlay-picker legend span { margin-left:6px; color:var(--muted); font-weight:normal; }
.overlay-actions { display:flex; justify-content:flex-end; gap:7px; margin:-28px 0 10px; }.overlay-actions button { min-height:36px; }
.overlay-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.overlay-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px 10px; border:1px solid #b7c9d4; border-radius:4px; background:white; }
.overlay-row > label:first-child { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:7px; min-height:36px; cursor:pointer; }.overlay-row input[type="checkbox"] { width:20px; height:20px; accent-color:var(--blue); }.overlay-row strong { color:var(--navy); font-size:.77rem; }.overlay-row small { color:var(--muted); font-size:.64rem; white-space:nowrap; }
.overlay-swatch { width:18px; height:18px; display:inline-grid; place-items:center; border:1px solid #5b7280; border-radius:3px; }.radar-swatch { background:linear-gradient(135deg,#4dc4ee 0 35%,#f0d94c 35% 66%,#c73555 66%); }.wind-swatch { border:0; color:#173b73; transform:rotate(-20deg); }.cloud-swatch { background:linear-gradient(135deg,#edf3f7,#7e919d); }.temperature-swatch { background:linear-gradient(90deg,#313695,#74add1,#ffffbf,#fdae61,#d73027); }.rain-model-swatch { background:linear-gradient(135deg,#d5f1fa,#2b79be,#693794,#a42f84); }.satellite-swatch { background:linear-gradient(135deg,#27554d,#8fb46b 45%,#d7d5bd 46% 65%,#3870a3 66%); }
.overlay-opacity { display:grid; grid-template-columns:auto auto; gap:2px 5px; color:var(--muted); font-size:.62rem; text-align:right; }.overlay-opacity output { color:var(--navy); font-weight:800; }.overlay-opacity input { grid-column:1 / -1; width:78px; accent-color:var(--blue); }.overlay-opacity input:disabled { opacity:.45; }
.overlay-status { margin:9px 0 0; color:var(--muted); font-size:.7rem; }
.overlay-information { display:grid; grid-template-columns:minmax(170px,.8fr) minmax(260px,1.2fr) minmax(240px,1fr); gap:10px; padding:11px 14px; border-top:1px solid var(--line); background:#fbfcfd; }.overlay-information h3 { margin:0; color:var(--navy); font-size:.82rem; }.overlay-information p,.overlay-information span { margin:4px 0 0; color:var(--muted); font-size:.68rem; line-height:1.45; }
.overlay-legend { display:flex; flex-wrap:wrap; align-items:flex-start; gap:5px; }.overlay-legend p { margin:0; }.legend-item { display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid #bccbd4; border-radius:3px; background:white; font-size:.66rem; }.legend-item b { color:var(--navy); }.legend-item-scale { width:min(100%,230px); display:grid; gap:3px; }.overlay-information .legend-item-scale > span { margin:0; }.legend-ramp { display:block; width:100%; height:9px; margin:0; border:1px solid #738691; border-radius:2px; }.temperature-ramp { background:linear-gradient(90deg,#313695 0%,#4575b4 17%,#74add1 33%,#e0f3f8 50%,#ffffbf 58%,#fdae61 67%,#d73027 83%,#7f0000 100%); }.cloud-ramp { background:linear-gradient(90deg,rgba(237,243,247,.12),#d1dce3 25%,#acbcc6 50%,#7e919d 75%,#4e606c); }.rain-ramp { background:linear-gradient(90deg,rgba(213,241,250,.2),#68b8e2 20%,#2b79be 38%,#374a9c 55%,#693794 72%,#a42f84 88%,#6c155d); }
.radar-ramp { background:linear-gradient(90deg,#88ddee 0%,#00a3e0 14%,#007fb4 27%,#0077aa 38%,#005588 50%,#ffe000 62%,#ffaa00 75%,#ff4400 88%,#c10000 100%); }.overlay-information .legend-range { display:flex; justify-content:space-between; gap:6px; margin:0; color:#425866; font-size:.6rem; }.legend-range em { color:var(--navy); font-style:normal; font-weight:700; }.overlay-inspector { display:grid; align-content:start; }.overlay-inspector strong { color:var(--navy); font-size:.73rem; }
.wind-field-marker { min-width:54px; display:flex; align-items:center; gap:3px; padding:2px 4px; border:1px solid rgba(23,59,115,.45); border-radius:10px; color:#173b73; background:rgba(255,255,255,.86); box-shadow:0 1px 3px rgba(0,0,0,.2); font-size:9px; font-weight:800; white-space:nowrap; }.wind-field-marker i { display:inline-block; font-style:normal; font-size:14px; line-height:1; transform:rotate(var(--wind-rotation)); }
.model-field-raster { pointer-events:none; image-rendering:auto; }
.map-visual { position: relative; width: calc(100% - 28px); height: clamp(420px, 58vw, 610px); margin: 14px; overflow: hidden; border: 1px solid #9db0bc; background:#dce6ea; }
.map-visual.no-radar { background:#edf2f4; }.map-visual.map-ready .radar-placeholder { display:none; }
.radar-placeholder { position:absolute; inset:50% auto auto 50%; z-index:1000; width:min(86%,360px); padding:18px; transform:translate(-50%,-50%); text-align:center; color:var(--muted); background:rgba(255,255,255,.94); border:1px solid var(--line); }.radar-placeholder strong, .radar-placeholder span { display:block; }.radar-placeholder strong { color:var(--navy); }.radar-placeholder span { margin-top:5px; font-size:.75rem; }
.selected-location-marker { width:18px; height:18px; border:3px solid white; border-radius:50%; background:var(--warning); box-shadow:0 0 0 5px rgba(191,51,31,.28),0 2px 7px rgba(0,0,0,.35); }.selected-location-marker::after { content:""; position:absolute; left:50%; top:100%; width:2px; height:10px; transform:translateX(-50%); background:var(--warning); }
.marine-grid-marker { width:30px; height:30px; display:grid; place-items:center; border:3px solid white; border-radius:50%; color:white; background:#087bb8; box-shadow:0 0 0 5px rgba(8,123,184,.25),0 2px 7px rgba(0,0,0,.35); font-size:1rem; font-weight:bold; }
.marine-grid-marker.wave-grid { background:#5f3c8a; box-shadow:0 0 0 5px rgba(95,60,138,.24),0 2px 7px rgba(0,0,0,.35); font-size:.72rem; }
.map-visual.flat-map .leaflet-tile-pane { filter:grayscale(1) contrast(.82) brightness(1.12); }.map-visual.satellite-map .leaflet-control-attribution { background:rgba(8,24,34,.78); color:white; }.map-visual.satellite-map .leaflet-control-attribution a { color:#bfe8ff; }
.leaflet-container { font-family:inherit; }.leaflet-control-zoom a { color:var(--blue); }.leaflet-control-attribution { max-width:72%; font-size:10px; }
.guidance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px 16px; }
.guidance-grid article { display:grid; gap:5px; padding:13px; border:1px solid var(--line); border-left:4px solid var(--gold); background:var(--soft-blue); }
.guidance-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; }
.guidance-grid h3 { margin:0; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.guidance-grid strong { line-height:1.35; }.guidance-grid small,.metric-provenance { color:var(--muted); }
.guidance-disclaimer,.metric-provenance { margin:0; padding:0 16px 14px; font-size:.82rem; }.metric-provenance { padding-top:8px; }
.official-map-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.official-map-grid a { display:grid; grid-template-columns:1fr auto; gap:4px 10px; min-height:86px; padding:14px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.official-map-grid a:hover,.official-map-grid a:focus-visible { background:var(--soft-blue); }.official-map-grid small { grid-column:1/-1; color:var(--muted); }
.product-badge { align-self:start; padding:3px 6px; border-radius:2px; font-size:.66rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:#dceaf3; color:var(--blue); }
.product-badge.official { background:#dceddf; color:#245b2d; }.product-badge.model { background:#f6e9c4; color:#694c00; }.product-badge.analysis { background:#e7e0f4; color:#4b3474; }
.data-pipeline { margin:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:9px 0; }.data-pipeline summary { cursor:pointer; font-weight:800; }.data-pipeline ol { padding-left:20px; }.data-pipeline li+li { margin-top:6px; }
.map-information-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 14px; border-top:1px solid var(--line); background:#f8fafb; }.map-information-bar > p { margin:0; color:var(--muted); font-size:.7rem; }
.map-key { display: flex; gap: 10px; padding: 5px 7px; background: white; border: 1px solid rgba(80,103,116,.28); font-size: .7rem; }
.map-key[hidden] { display: none; }
.map-key span { display: flex; align-items: center; gap: 4px; }.map-key i { width: 10px; height: 10px; display: inline-block; }.light { background:#8cd3ed; }.medium { background:#f1d34f; }.heavy { background:#d94a37; }
.map-layer-status { margin: 0; padding: 9px 14px; color: var(--muted); background: #f5f8fa; border-top: 1px solid var(--line); font-size: .75rem; }
.radar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.radar-actions span { min-width: 52px; text-align: center; color: var(--muted); font-size: .74rem; font-weight: bold; }.radar-playback { padding: 12px 14px 6px; display: grid; grid-template-columns: auto minmax(120px,1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--line); }.radar-playback .time-slider { width: 100%; margin: 0; }.radar-playback strong { min-width: 118px; color: var(--navy); font-size: .75rem; text-align: right; }
.radar-step-actions { display: flex; align-items: center; gap: 6px; }
.radar-range { display: flex; justify-content: space-between; padding: 0 14px 8px 118px; color: var(--muted); font-size: .68rem; }
.radar-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; border-top: 1px solid var(--line); background: #fbfcfd; }.radar-settings label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .72rem; font-weight: bold; }.radar-settings select { min-height: 36px; }.radar-settings input { accent-color: var(--blue); }.radar-settings input[type="range"] { width: 120px; }.radar-settings .radar-loop { min-height:36px; }.radar-loop input { width:18px; height:18px; }.radar-settings > a { margin-left: auto; font-size: .74rem; font-weight: bold; }
.radar-attribution { margin: 0; padding: 8px 14px; color: var(--muted); background: #f5f8fa; border-top: 1px solid var(--line); font-size: .68rem; }.radar-attribution a { font-weight: bold; }
.marine-panel { border-top:1px solid var(--line); background:white; }
.marine-heading { padding:14px 16px 9px; display:flex; align-items:start; justify-content:space-between; gap:12px; }.marine-heading h3 { margin:1px 0 0; color:var(--navy); font-size:1.1rem; }
.marine-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.marine-status { margin:0; padding:0 16px 12px; color:var(--muted); font-size:.78rem; }
.marine-current { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:0 16px 14px; }
.marine-current article { min-width:0; padding:12px; border:1px solid var(--line); border-top:4px solid var(--blue-bright); background:#f5fafd; }
.marine-empty { grid-column:1/-1; margin:0; padding:16px; color:var(--muted); text-align:center; }
.marine-current span,.marine-current strong,.marine-current small { display:block; }.marine-current span { color:var(--muted); font-size:.7rem; }.marine-current strong { margin-top:3px; color:var(--navy); font-size:1.1rem; }.marine-current small { margin-top:4px; color:var(--muted); font-size:.68rem; }
.marine-timeline { border-top:1px solid var(--line); }.marine-timeline summary { min-height:44px; padding:11px 16px; cursor:pointer; color:var(--blue); font-weight:bold; font-size:.8rem; }.marine-timeline .table-scroll { border-top:1px solid var(--line); }
.marine-links { padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 18px; border-top:1px solid var(--line); }.marine-links a { font-size:.76rem; font-weight:bold; }
.marine-disclaimer { margin:0; padding:11px 16px; color:#674b00; background:#fff6d8; border-top:1px solid #ead68e; font-size:.75rem; }
.marine-attribution { margin:0; padding:8px 16px; color:var(--muted); background:#f5f8fa; border-top:1px solid var(--line); font-size:.68rem; }.marine-attribution a { font-weight:bold; }

.compact-panel { margin: 0; }
.compact-panel .panel-heading h2 { font-size: 1.05rem; }
.quick-links nav { display: grid; }
.quick-links a { display: grid; grid-template-columns: 33px 1fr; gap: 8px; align-items: center; padding: 11px 14px; text-decoration: none; border-bottom: 1px solid var(--line); }
.quick-links a:last-child { border-bottom: 0; }
.quick-links a > span:first-child { color: var(--blue); font-size: 1.35rem; text-align: center; }
.quick-links strong, .quick-links small { display: block; }.quick-links small { color: var(--muted); font-size: .7rem; }
.state-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.state-grid button { min-height: 56px; padding: 8px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; background: white; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--blue); font-weight: bold; }.state-grid button small { margin-top:2px; color:var(--muted); font-size:.62rem; font-weight:normal; }
.state-grid button:hover { background: var(--sky); }
.source-panel > p, .source-panel > a { margin: 14px; font-size: .78rem; }
.source-panel .licence-note { padding: 9px; background: #fff6d8; border-left: 3px solid #d8a800; }
.service-status { margin: 14px; padding: 0; border: 1px solid var(--line); font-size: .75rem; }.service-status div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 9px; border-bottom: 1px solid var(--line); }.service-status div:last-child { border-bottom: 0; }.service-status dt { color: var(--muted); }.service-status dd { margin: 0; color: var(--navy); font-weight: bold; text-align: right; }
.ad-policy { margin: 14px; font-size: .78rem; }.ad-policy summary { color: var(--blue); font-weight: bold; cursor: pointer; }.ad-policy p { margin: 8px 0; }
.source-panel > a { display: inline-block; font-weight: bold; }

.site-footer { padding: 34px 0; background: #052b4e; color: #d8e6ef; }
.footer-grid { display: grid; grid-template-columns: 1.6fr .7fr 1fr; gap: 36px; }
.footer-grid strong, .footer-title { color: white; }.footer-title { margin:0; font-size:1rem; }.footer-grid p { margin: 7px 0; font-size: .78rem; }.footer-grid nav { display: grid; align-content: start; gap: 6px; }.footer-grid a { color: #d8e6ef; font-size: .78rem; }
.back-to-top { position:fixed; z-index:19; right:18px; bottom:18px; min-height:44px; padding:10px 14px; display:inline-flex; align-items:center; gap:7px; color:white; background:var(--navy); border:1px solid rgba(255,255,255,.65); border-radius:999px; box-shadow:0 4px 18px rgba(0,0,0,.24); text-decoration:none; font-size:.78rem; font-weight:bold; }.back-to-top:hover { background:#0c679d; }.back-to-top[hidden] { display:none; }
.toast { position: fixed; z-index: 20; right: 18px; bottom: 18px; max-width: 360px; padding: 12px 16px; color: white; background: #153c55; border-left: 5px solid #55add6; box-shadow: 0 5px 22px rgba(0,0,0,.25); }

[data-theme="contrast"] { --navy:#001d35; --blue:#004f7c; --ink:#050505; --muted:#343434; --line:#748591; --canvas:#e5ebee; --focus:#ffcf00; }
[data-theme="contrast"] .panel, [data-theme="contrast"] .warning-panel { box-shadow: none; border-width: 2px; }

@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: repeat(2, 1fr); }
  .ad-rectangle { height: 250px; }
  .source-panel { grid-column: 1 / -1; }
  .current-weather { grid-template-columns: 80px 1fr; }
  .current-details { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .table-scroll-hint { display:block; margin:0; padding:8px 13px; color:var(--muted); background:#f5f8fa; border-top:1px solid var(--line); font-size:.7rem; }
  .utility-inner { flex-wrap: wrap; padding-block: 6px; gap: 4px 12px; }
  .utility-inner > span { flex-basis: 100%; }
  .utility-inner nav { width:100%; justify-content:space-between; gap:4px; }
  .utility-inner nav > * { padding-inline:4px; font-size:.72rem; }
  .utility-inner a, .utility-inner button { min-height: 44px; display: inline-flex; align-items: center; }
  .shell { width: min(100% - 20px, 1180px); }
  .brand-row { padding: 16px 0; display: block; }
  .brand { margin-bottom: 16px; }.brand small { display: none; }
  .location-search { width: 100%; }.search-controls { flex-wrap: wrap; }.search-controls input { width: 65%; }.search-controls .secondary-button { width: 100%; margin: 7px 0 0; }
  .nav-inner { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; width:100%; }
  .nav-inner a { min-height:48px; padding:8px 5px; display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; font-size:.78rem; border-bottom:1px solid rgba(255,255,255,.15); }
  .ad-leaderboard { display: none; }
  .warning-panel { grid-template-columns: auto 1fr; }.warning-links { grid-column:2; align-items:stretch; }.warning-links a { min-height:44px; display:flex; align-items:center; white-space:normal; }.retry-capitals { min-height:44px; }
  .current-weather { padding: 16px; grid-template-columns: 62px 1fr; }.weather-symbol { width: 58px; height: 58px; font-size: 2rem; }.current-temp { font-size: 2.6rem; }
  .location-heading-row { align-items: flex-start; }.weather-actions { flex-direction: column-reverse; align-items: flex-end; }.refresh-button, .share-button { min-height: 44px; }.recent-location, .recent-clear { min-height: 44px; }
  .current-details { grid-template-columns: repeat(2, 1fr); }.current-details div { padding-left: 5px; }
  .four-hour-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .side-column { grid-template-columns: 1fr; }.source-panel { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .capital-grid { grid-template-columns: repeat(2, 1fr); }
  .inline-heading { align-items: flex-start; }.inline-heading > p { text-align: right; }
  .chart-heading { display: block; }.chart-ranges, .chart-metrics { margin-top: 10px; }.chart-range, .chart-metric { flex: 1 1 auto; min-height: 44px; }.chart-day-strip { overflow-x: auto; grid-template-columns: repeat(7, minmax(72px,1fr)); }
  .icon-button { width: 44px; height: 44px; }.radar-playback .secondary-button { min-height: 44px; }
  .time-slider { min-height: 44px; }
  .chart-selection { padding-inline: 10px; }.chart-selected-summary { display: block; }.chart-selection strong { display: block; margin-top: 3px; }.selected-metric-values { margin-top: 5px; }.hourly-chart { margin-inline: 2px; }
  .day-detail-grid { grid-template-columns: repeat(3, 1fr); }.day-detail-grid > div:first-child { grid-column: 1 / -1; }.day-detail-stat { padding-left: 8px; }
  .radar-playback { grid-template-columns: auto 1fr; }.radar-playback strong { grid-column: 1 / -1; text-align: center; }.radar-actions { margin-top: 8px; width: 100%; justify-content: flex-start; }
  .radar-range { padding-left: 14px; }
  .radar-settings { align-items: stretch; }.radar-settings label { min-height:44px; justify-content: space-between; flex: 1 1 210px; }.radar-settings input[type="range"] { min-height:44px; }.radar-settings > a { flex-basis: 100%; margin-left: 0; }
  .radar-summary { overflow-x: auto; flex-wrap: nowrap; }.status-pill { flex: 0 0 auto; }
  .map-visual { width:calc(100% - 16px); height:420px; margin:8px; }.map-layer-picker label { min-height:44px; padding-block:8px; }.map-layer-picker span { flex-basis:100%; margin-left:0; }.map-range-picker { align-items:flex-start; }.map-range-buttons { width:100%; display:grid; grid-template-columns:repeat(2,1fr); }.map-range-buttons button { min-height:44px; }.map-range-picker > span { flex-basis:100%; margin-left:0; }.leaflet-control-attribution { max-width:82%; font-size:9px; }
  .map-product-picker { align-items:flex-start; }.map-product-picker legend { width:100%; }.map-product-picker label { flex:1 1 0; }.map-product-picker label span { width:100%; min-height:44px; justify-content:center; }.map-product-picker small { flex-basis:100%; margin-left:0; }.marine-current { grid-template-columns:repeat(2,minmax(0,1fr)); }.marine-heading { align-items:flex-start; }.marine-actions .secondary-button, .marine-links a { min-height:44px; }.marine-links { display:grid; }.marine-links a { display:flex; align-items:center; }.radar-actions .secondary-button { min-height:44px; }
  .map-overlay-picker { padding:10px 8px; }.overlay-actions { margin:7px 0; justify-content:stretch; }.overlay-actions button { flex:1; min-height:44px; }.overlay-grid { grid-template-columns:1fr; padding:2px 4px 2px 2px; }.overlay-row { min-height:64px; grid-template-columns:minmax(0,1fr) 102px; }.overlay-row > label:first-child { min-height:44px; grid-template-columns:auto auto minmax(0,1fr); }.overlay-row small { grid-column:3; white-space:normal; }.overlay-opacity input { width:92px; min-height:44px; }.overlay-information { grid-template-columns:1fr; }.overlay-information > div { padding-bottom:8px; border-bottom:1px solid var(--line); }.legend-item-scale { width:100%; }
  .breadcrumbs a, .data-pipeline summary, .ad-policy summary, .site-footer nav a { min-height:44px; display:flex; align-items:center; }
  .guidance-grid,.official-map-grid { grid-template-columns:1fr; }.official-map-grid a { border-right:0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }
@media (forced-colors: active) {
  .ad { border-style: solid; }
  .weather-symbol, .location-pulse, .warning-icon { forced-color-adjust: none; }
  .chart-day-strip button[aria-selected="true"], .chart-range[aria-pressed="true"] { color:HighlightText; background:Highlight; outline:2px solid Highlight; outline-offset:-3px; }
  .chart-metric.active { outline:2px solid Highlight; outline-offset:-3px; }
}
@media print {
  :root { --canvas:#fff; --paper:#fff; --ink:#000; --navy:#000; --blue:#000; }
  .utility-bar, .location-search, .primary-nav, .ad, .side-column, .map-panel, .site-footer, .weather-actions, .skip-link, .back-to-top, .toast { display: none !important; }
  .brand-row { min-height: auto; padding: 10px 0; }.brand-mark { color:#000; background:#fff; border:2px solid #000; box-shadow:none; }
  .page-grid { display:block; margin:0; }.panel, .warning-panel { box-shadow:none; break-inside:avoid; }
  .forecast-cards { grid-template-columns:repeat(7,1fr); overflow:visible; }.forecast-day { min-width:0; padding-inline:3px; }
  .print-only { display:block; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid #777; font-size:9pt; }
  .daily-comparison summary { display:none; }.daily-comparison:not([open]) > .table-scroll { display:block !important; }
  .warning-links a::after { content:" (" attr(href) ")"; font-size:8pt; font-weight:normal; }
  a { color:#000; text-decoration:none; } body { font-size:11pt; }
}

/* Nearest radar return marker */
.echo-marker { width:16px; height:16px; display:block; border:3px solid white; border-radius:50%; background:#0b3d91; box-shadow:0 0 0 4px rgba(11,61,145,.22),0 2px 6px rgba(0,0,0,.35); }
@media (forced-colors: active) { .echo-marker { forced-color-adjust:none; border-color:CanvasText; background:Highlight; } }

/* Radar workspace: the map and replay stay together; optional controls disclose on demand. */
.map-panel, .official-maps-panel { grid-column: 1 / -1; min-width: 0; }
.map-panel { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 22px #07376312; }
.map-panel > .panel-heading { padding: 18px 20px; background: #f9fcfe; }
.map-panel .panel-heading h2 { font-size: 1.4rem; letter-spacing: -.025em; }
.map-panel button, .map-panel select, .map-product-picker label span { min-height: 44px; border-radius: 6px; }
.map-panel button:disabled { cursor: default; }
.map-product-picker { padding: 9px 20px; background: #fff; }
.map-product-picker legend { display: none; }
.map-product-picker small { font-size: .8rem; color: #425d70; }
.map-range-picker { padding: 8px 20px; background: #f3f7fa; gap: 8px; }
.map-range-picker legend { padding-top: 12px; }
.map-range-buttons { gap: 5px; }
.map-range-buttons button { min-width: 68px; }
.map-range-picker > span { font-size: .74rem; }
.map-visual { width: 100%; height: clamp(330px, 49vh, 600px); margin: 0; border: 0; border-radius: 0; isolation: isolate; }
.map-visual .leaflet-control-zoom { border: 0; box-shadow: 0 2px 12px #10394d35; border-radius: 8px; overflow: hidden; }
.map-visual .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; color: #073763; }
.map-visual .leaflet-control-attribution { max-width: 90%; }
.map-information-bar { padding: 7px 20px; min-height: 34px; background: #eaf2f7; }
.map-information-bar > p { color: #304f64; font-size: .76rem; }
.map-visual[aria-busy="true"]::after { content: 'Updating radar…'; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 900; padding: 8px 14px; background: #fff; border: 1px solid #acc0cd; border-radius: 20px; color: #073763; box-shadow: 0 2px 8px #17364926; pointer-events: none; font-size: .8rem; }
.radar-playback { grid-template-columns: auto minmax(120px, 1fr) auto; padding: 14px 20px 2px; gap: 18px; border: 0; }
.radar-playback .time-slider { height: 44px; accent-color: #087bb8; }
.radar-step-actions { gap: 5px; }
.radar-step-actions .icon-button { width: 44px; height: 44px; }
#radar-play { min-width: 108px; color: #fff; background: #073763; border-color: #073763; }
#radar-play:hover { background: #0b5d91; }
.radar-time-group { display: grid; gap: 3px; text-align: right; }
.radar-playback strong { font-size: .8rem; font-variant-numeric: tabular-nums; }
#radar-buffer { color: #526c7d; font-size: .72rem; }
.radar-range { padding: 0 20px 8px 246px; }
.radar-settings { padding: 7px 20px; gap: 8px 18px; background: #fff; }
.radar-settings label, .radar-settings .radar-loop { min-height: 44px; font-size: .77rem; }
.radar-summary { padding: 10px 20px; background: #f1f7fb; flex-wrap: wrap; overflow: visible; }
.radar-summary .status-pill { border: 0; border-radius: 0; background: transparent; font-size: .79rem; padding: 3px 12px 3px 0; }
.map-display-settings { border-block: 1px solid var(--line); }
.map-display-settings > summary, .radar-analysis-details > summary { min-height: 48px; padding: 13px 20px; color: #073763; font-size: .84rem; font-weight: bold; cursor: pointer; background: #fff; }
.map-display-settings > summary span { float: right; color: #586a78; font-size: .75rem; font-weight: normal; }
.map-display-settings[open] > summary { border-bottom: 1px solid var(--line); }
.map-display-settings .overlay-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.map-display-settings .overlay-actions { margin: 0 0 12px; }
.map-display-settings .overlay-row { padding: 10px 12px; }
.map-display-settings .overlay-row strong { font-size: .82rem; }
.map-display-settings .overlay-row small { font-size: .7rem; }
.map-display-settings .overlay-opacity input { min-height: 36px; width: 100px; }
.map-display-settings .overlay-status { font-size: .78rem; }
.overlay-information { grid-template-columns: 1fr 2fr 1fr; padding: 14px 20px; }
.overlay-information p, .overlay-information span { font-size: .76rem; }
.overlay-information .legend-range { font-size: .68rem; }
.radar-analysis-details { border-top: 1px solid var(--line); }
.radar-analysis-details > p { margin: 0; padding: 0 20px 8px; color: var(--muted); font-size: .76rem; }
.map-panel:fullscreen { width: 100%; height: 100%; overflow-y: auto; border: 0; border-radius: 0; background: #fff; }
.map-panel:fullscreen .map-visual { height: max(280px, calc(100dvh - 365px)); }
html[data-theme="contrast"] .map-panel { border-color: #152c3e; }
html[data-theme="contrast"] .map-panel :is(p,span,small,strong,label,summary) { color: #102e44; }
html[data-theme="contrast"] #radar-play span { color: white; }
@media (max-width: 760px) {
  .map-panel > .panel-heading { padding: 14px; gap: 10px; }
  .map-panel .panel-heading h2 { font-size: 1.16rem; }
  .radar-actions { width: auto; margin: 0; gap: 6px; }
  .radar-actions span { font-size: .7rem; }
  .radar-actions button { font-size: .76rem; padding-inline: 9px; }
  .map-product-picker, .map-range-picker { padding-inline: 12px; }
  .map-product-picker label { flex: initial; }
  .map-product-picker small { flex-basis: 100%; margin: 0; }
  .map-range-picker legend { width: 100%; padding: 0; }
  .map-range-buttons { width: 100%; display: grid; grid-template-columns: repeat(4,1fr); }
  .map-range-buttons button { min-width: 0; padding-inline: 6px; }
  .map-range-picker > span { flex-basis: 100%; margin: 0; font-size: .7rem; }
  .map-visual { height: 330px; }
  .radar-playback { padding: 9px 12px 0; grid-template-columns: auto 1fr; gap: 6px 12px; }
  .radar-time-group { text-align: right; min-width: 0; }
  .radar-playback strong { min-width: 0; font-size: .73rem; text-align: right; }
  .radar-playback .time-slider { grid-column: 1/-1; grid-row: 2; }
  .radar-range { padding-inline: 12px; font-size: .65rem; }
  .radar-settings { padding: 5px 12px; gap: 5px 12px; }
  .radar-settings label { flex: 0 1 auto; justify-content: start; }
  .radar-settings > a { flex-basis: auto; font-size: .73rem; }
  .radar-summary { padding: 8px 12px; display: grid; gap: 0; }
  .radar-summary .status-pill { white-space: normal; min-width: 0; }
  .map-display-settings > summary, .radar-analysis-details > summary { padding-inline: 12px; }
  .map-display-settings .overlay-grid { grid-template-columns: 1fr; }
  .map-display-settings .overlay-row > label:first-child { grid-template-columns: auto auto minmax(0,1fr); }
  .map-display-settings .overlay-row small { grid-column: 3; white-space: normal; }
  .overlay-information { grid-template-columns: 1fr; padding: 12px; gap: 6px; }
  .overlay-information > div { padding: 0; border: 0; }
  .overlay-information > div:first-child { display: none; }
  .overlay-legend .legend-item-scale { max-width: 100%; width: 100%; }
  .map-panel:fullscreen .map-visual { height: max(260px, calc(100dvh - 390px)); }
}
@media (prefers-reduced-motion: reduce) { .map-panel * { scroll-behavior: auto; } }

.map-wheel-option { display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:.75rem; color:#304f64; cursor:pointer; }.map-wheel-option input { width:18px; height:18px; accent-color:var(--blue); }

#radar-review { padding: 12px 20px; border-top:1px solid var(--line); } #radar-review pre { white-space:pre-wrap; font-size:12px; }

@media (max-width:760px) { .map-panel > .panel-heading { display:grid; grid-template-columns:1fr; gap:8px; } .map-panel .panel-heading .eyebrow { font-size:.6rem; letter-spacing:.08em; } .map-panel .radar-actions { justify-content:flex-end; } .map-panel .radar-actions > span { margin-right:auto; } }

@media (max-width:420px) { .map-panel .radar-actions { flex-wrap:nowrap; } .map-panel .radar-actions > span { flex:1; min-width:0; text-align:left; } .map-panel .radar-actions > button { flex:0 0 auto; } }

.selected-location-marker { display:block; position:relative; }

@media (max-width:420px) {
  .radar-step-actions { grid-column:1 / -1; justify-content:center; }
  .radar-time-group { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; }
  .radar-playback strong { text-align:left; }
  .radar-playback .time-slider { grid-row:3; }
}