.weather-site-navigation { position:relative; z-index:5; width:100%; background:#4f78a7; box-shadow:inset 0 -1px 0 #204d7220; }
.weather-site-nav { width:min(1120px,calc(100% - 48px)); margin:0 auto; display:flex; justify-content:center; }
.weather-site-nav a { flex:0 1 160px; padding:13px 18px; text-align:center; font-size:17px; line-height:25px; color:#fff; white-space:nowrap; }
.weather-site-nav a:hover,.weather-site-nav a[aria-current="page"] { background:#386b98; }
.weather-site-nav a:focus-visible { outline-color:#fff; outline-offset:-4px; }
.topbar .brand>img { width:35px; height:35px; object-fit:contain; }
.top-actions { display:flex; align-items:center; gap:12px; }
.weather-breadcrumbs { display:flex; justify-content:center; align-items:center; gap:8px; margin:-8px 0 5px; color:#edf4fa; font-size:12px; }
.weather-breadcrumbs a { opacity:.88; }
.weather-breadcrumbs a:hover { text-decoration:underline; text-underline-offset:3px; }
.weather-location-line { margin:8px 0 0; color:#e5edf4; font-size:12px; }
.page-footer .weather-source { margin:5px 0; font-size:10px; }
.weather-detail-panel { padding:17px 18px; margin-bottom:12px; }
.weather-detail-panel h2 { margin:0 0 13px; font-size:15px; font-weight:500; }
.weather-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.weather-metric { min-width:0; padding:10px 12px; border-radius:11px; background:#d6e5f10b; }
.weather-metric h3 { margin:0 0 5px; color:#e0eaf3; font-size:11px; font-weight:450; }
.weather-metric p { margin:0; font-size:18px; font-weight:500; overflow-wrap:anywhere; }
.weather-metric small { display:block; margin-top:4px; color:#e3edf5; font-size:10px; }
.hour-value.wind-condition-value { max-width:100%; font-size:10px; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }
.weather-alerts { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:0 0 10px; }
.weather-alert { padding:5px 9px; border-radius:14px; color:#fff5e7; background:#9d572d69; font-size:11px; }
.weather-source { margin:12px 0 0; color:#e2ebf3; font-size:11px; line-height:1.7; }
.weather-source a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.weather-attribution { margin:10px auto 14px; }
.weather-attribution .weather-alerts { margin:0 0 8px; }
.weather-attribution .weather-source { margin:0; text-align:center; font-size:10px; line-height:1.6; }
.weather-unavailable { margin:32px auto; padding:24px 20px; text-align:center; }
.weather-unavailable h1 { margin:0 0 10px; font-size:21px; font-weight:500; }
.weather-unavailable p { margin:0; color:#e0eaf2; font-size:13px; line-height:1.8; }
.weather-unavailable a { display:inline-block; margin-top:15px; border:1px solid #dcecff36; border-radius:18px; padding:7px 14px; font-size:12px; }
.forecast-empty { margin:10px 0; color:#e0eaf3; font-size:12px; text-align:center; }
.daily-forecast-list { display:grid; }
.daily-forecast-row { display:grid; grid-template-columns:minmax(74px,1fr) minmax(84px,1.5fr) minmax(74px,1fr) minmax(82px,1.2fr); align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid #e1eaf025; }
.daily-forecast-row:last-child { border-bottom:0; }
.daily-forecast-row time { color:#e0eaf3; font-size:12px; }
.daily-forecast-row p { min-width:0; margin:0; font-size:12px; overflow-wrap:anywhere; }
.daily-forecast-row .day-range { white-space:nowrap; }
.forecast-weather-icon { width:28px; height:28px; flex:none; color:#e7f2fa; }
.forecast-weather-icon[data-symbol=sun] { color:#f9d66a; }
.forecast-weather-icon[data-symbol=rain],.forecast-weather-icon[data-symbol=thunder] { color:#a8e9fa; }
.day-conditions { display:flex; align-items:center; gap:8px; }
.day-conditions .forecast-weather-icon { width:22px; height:22px; }
.aqi-panel { position:relative; }
.aqi-scale { overflow:visible; }
.aqi-marker-layer { position:absolute; inset:-3px 0 0; display:block; width:100%; height:10px; overflow:visible; pointer-events:none; }
.aqi-marker-layer circle { fill:#fff; stroke:#26405c; stroke-width:2; }
.weather-prototype-detail .condition { display:flex; align-items:center; justify-content:center; gap:7px; }
.weather-prototype-detail .condition .forecast-weather-icon { width:22px; height:22px; }
.weather-prototype-detail .hourly-scroll { contain:paint; }
.hourly-temperature-trend { display:block; width:100%; height:150px; color:#9ceaff; }
.hourly-temperature-trend polyline { vector-effect:non-scaling-stroke; }
.weather-prototype-detail #trend-chart { display:block; width:100%; height:150px; overflow:visible; }
#trend-area-fill { pointer-events:none; }
#trend-axis { stroke:#dcefff22; stroke-width:1; }
#trend-line { vector-effect:non-scaling-stroke; }
#trend-markers circle { fill:#f4f8fc; }
#trend-labels text { fill:#f4f8fc; font-size:10px; text-anchor:middle; }
#trend-times text { fill:#e3eef5; font-size:10px; text-anchor:middle; }
#trend-labels .wind-grade-label { font-size:8px; }
@media(max-width:640px) {
    .weather-site-nav { width:100%; }
    .weather-site-nav a { flex:1 1 0; min-width:0; padding:11px 2px; font-size:13px; line-height:22px; }
    .topbar .brand>img { width:28px; height:28px; }
}
@media(max-width:520px) {
    .weather-breadcrumbs { font-size:11px; }
    .weather-detail-panel { padding:14px; }
    .weather-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .weather-metric p { font-size:16px; }
    .daily-forecast-row { grid-template-columns:minmax(68px,1fr) minmax(70px,1fr) minmax(64px,1fr); gap:6px; }
    .daily-forecast-row .day-wind { grid-column:2 / -1; color:#e0eaf3; }
    .daily-forecast-row time,.daily-forecast-row p { font-size:11px; }
}