.weather-page{padding-bottom:60px}.weather-page .page-heading{padding-bottom:24px}.weather-search-panel{padding:24px;background:#fff;border:1px solid #dce3df;border-radius:12px;margin-bottom:32px}.weather-search-panel label{display:block;font-weight:700;margin-bottom:9px}.weather-search-row{display:flex;gap:10px}.weather-search-row input{flex:1;min-width:0;padding:14px;border:1px solid #a5b6ba;border-radius:6px;font:inherit;background:#f7f8f4;color:#122c43}.weather-page button{cursor:pointer;border-radius:6px;font:inherit;padding:12px 22px;background:#122c43;color:#fff;border:1px solid #122c43}.weather-page button:hover{background:#007d9c}.weather-page :focus-visible{outline:3px solid #007d9c;outline-offset:3px}#weather-search-help,.weather-source{font-size:13px;line-height:1.7;color:#526168}.weather-search-panel #weather-status{font-size:14px;margin-bottom:0}#weather-matches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}#weather-matches:empty{display:none}#weather-matches button{text-align:left;background:transparent;color:#122c43;border-color:#dce3df;font-size:14px;padding:10px}.weather-place-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.weather-place-heading h2{font-size:38px;margin:0}.weather-place-heading a{font-size:13px}.weather-overview{display:grid;grid-template-columns:1fr 1.5fr;gap:20px}.weather-current,.weather-today{padding:28px;border-radius:12px;border:1px solid #dce3df}.weather-current{background:#122c43;color:#fff}.weather-current h3,.weather-today h3,.weather-hourly-section h3,.weather-week-section h3{font-size:23px;margin:0 0 16px}.weather-temperature{font-size:64px;line-height:1.1;margin:15px 0;font-weight:600}.weather-current .weather-meta{color:#d0e6eb}.weather-meta{font-size:12px;line-height:1.6;color:#526168}.weather-today{background:#fff}.weather-today .weather-summary{font-size:24px;line-height:1.35;margin:10px 0}.weather-alert{border:1px solid #d6ac6f;border-left:5px solid #c87c35;background:#fff6e8;border-radius:7px;padding:18px;margin-bottom:16px}.weather-alert summary{font-weight:700;cursor:pointer}.weather-alert p{white-space:pre-line;font-size:14px;line-height:1.7}.weather-alert a{font-weight:600}.weather-no-alerts{padding:12px 16px;border-left:3px solid #007d9c;background:#eaf3f2;margin-bottom:20px;font-size:14px}.weather-hourly-section,.weather-week-section{margin-top:35px}.weather-hourly{display:flex;overflow-x:auto;gap:10px;padding:2px 2px 12px;scroll-snap-type:x proximity}.weather-hour{flex:0 0 110px;border:1px solid #dce3df;border-radius:8px;padding:15px 10px;background:#fff;text-align:center;scroll-snap-align:start}.weather-hour strong{display:block;font-size:23px;margin:8px 0}.weather-hour span{font-size:12px;display:block}.weather-week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.weather-day{padding:18px;background:#fff;border:1px solid #dce3df;border-radius:8px}.weather-day h4{font-size:15px;font-weight:600;line-height:1.4;margin:0 0 10px}.weather-day .weather-day-temp{font-size:26px;font-weight:600;margin:6px 0}.weather-day p{font-size:13px;line-height:1.6}.weather-day details{font-size:13px}.weather-day summary{cursor:pointer;color:#007d9c}.weather-source{border-top:1px solid #dce3df;padding-top:22px;margin-top:35px}.weather-error{color:#9b3d1c}.weather-page[aria-busy=true]{opacity:.8}@media(max-width:750px){.weather-week{grid-template-columns:repeat(2,minmax(0,1fr))}.weather-overview{grid-template-columns:1fr}.weather-place-heading{align-items:flex-start;flex-direction:column}.weather-current,.weather-today{padding:23px}}@media(max-width:480px){.weather-search-panel{padding:18px}.weather-search-row{flex-direction:column}#weather-matches{grid-template-columns:1fr}.weather-page .page-heading h1{font-size:36px}.weather-week{gap:9px}.weather-day{padding:14px}.weather-day h4{font-size:14px}}

/* Temperature badges keep bright colors readable on every weather panel. */
.weather-temp-color{display:inline-block;width:fit-content;max-width:100%;padding:3px 9px;border-radius:7px;color:#122c43;background:var(--temperature-color)}
.temp-aqua{--temperature-color:#a8e7ed}.temp-yellow{--temperature-color:#ffe27a}.temp-orange{--temperature-color:#ffb36a}.temp-red{--temperature-color:#b42318;color:#fff}
.weather-current .weather-temperature{padding:8px 15px;border-radius:10px}
.weather-hour strong.weather-temp-color{display:block;margin:8px auto}
/* A softer shape for temperature panels and readings. */
.weather-current{border-radius:30px}
.weather-temp-color,.weather-current .weather-temperature{border-radius:999px}
.weather-hour,.weather-day{border-radius:18px}

/* Forecast rows, one shared panel for each outlook. */
.weather-hourly-section,.weather-week-section{border:1px solid #dce3df;border-radius:26px;padding:22px;background:#fff;margin:24px 0}
.weather-scroll-hint,.weather-daily-note{font-size:13px;line-height:1.6;color:#526168;margin:0 0 15px}
.weather-hourly{scroll-snap-type:none;scrollbar-width:auto;scrollbar-color:#007d9c #dce9eb;padding-bottom:14px}
.weather-hourly::-webkit-scrollbar{height:16px}
.weather-hourly::-webkit-scrollbar-track{background:#dce9eb;border-radius:20px}
.weather-hourly::-webkit-scrollbar-thumb{background:#007d9c;border:3px solid #dce9eb;border-radius:20px}
.weather-hour-slider{display:block;width:100%;height:28px;margin:12px 0 0;accent-color:#007d9c;cursor:ew-resize}
.weather-hour-slider:disabled{opacity:.4;cursor:default}
.weather-week{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;align-items:stretch}
.weather-day{min-width:0;text-align:center;padding:14px 7px;border-radius:18px;background:#f7f8f4}
.weather-day h4{font-size:16px;line-height:1.3;margin-bottom:14px}
.weather-day h4 span{display:block;font-size:11px;font-weight:400;margin-top:3px;color:#526168}
.weather-day p{font-size:12px;line-height:1.5;margin-bottom:0;overflow-wrap:anywhere}
.weather-daily-temperatures{display:flex;flex-direction:column;gap:9px}
.weather-daily-reading{display:flex;align-items:center;justify-content:center;gap:5px}
.weather-daily-reading>span{font-size:11px;min-width:25px;text-align:left}
.weather-daily-reading strong{font-size:17px;white-space:nowrap;padding:3px 7px}
@media(max-width:950px){.weather-week{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.weather-hourly-section,.weather-week-section{padding:16px}.weather-week{grid-template-columns:repeat(2,minmax(0,1fr))}.weather-day{padding:16px 8px}.weather-daily-temperatures{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}}

/* Generated decorative sky photos, selected from the written NWS forecast. */
.wx-clear{--weather-photo:url('/assets/weather/clear.webp')}
.wx-cloudy{--weather-photo:url('/assets/weather/cloudy.webp')}
.wx-rain{--weather-photo:url('/assets/weather/rain.webp')}
.wx-snow{--weather-photo:url('/assets/weather/snow.webp')}
.wx-storm{--weather-photo:url('/assets/weather/storm.webp')}
.wx-night{--weather-photo:url('/assets/weather/night.webp')}
.wx-fog{--weather-photo:url('/assets/weather/fog.webp')}
.weather-photo{background-color:#122c43;background-image:linear-gradient(rgba(5,24,42,.6),rgba(5,24,42,.76)),var(--weather-photo);background-size:cover;background-position:center;color:#fff;border-color:#657887}
.weather-photo h4 span,.weather-photo .weather-meta,.weather-current.weather-photo .weather-meta{color:#eef6fa}
.weather-photo .weather-daily-reading>span{color:#fff}
.weather-photo .weather-temp-color{color:#122c43}
.weather-photo .temp-red{color:#fff}
.weather-photo .weather-summary,.weather-photo>p,.weather-photo>span{color:#fff}

/* Scope the approved landscape to content below the navigation only. */
.weather-backdrop{display:flow-root;background-color:#e9eeeb;background-image:url('/assets/weather/page-background.webp');background-size:cover;background-position:center;background-attachment:fixed}
.weather-backdrop .weather-page{padding-top:1px}
.weather-hour-place{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:400;line-height:1.5;margin-left:10px;color:#526168}
@media(max-width:750px){.weather-backdrop{background-attachment:scroll;background-position:center top}.weather-hour-place{display:block;margin:6px 0 0}}

/* Immediate outlook stays directly beneath the current temperature. */
.weather-next-three{margin:18px 0 22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.3)}
.weather-next-three h4{font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:600;margin:0 0 12px;color:#fff}
.weather-three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.weather-three-hour{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:1px solid rgba(255,255,255,.25);background:rgba(5,24,42,.35);padding:12px 5px;border-radius:16px}
.weather-three-hour time{font-size:11px;color:#fff}
.weather-three-hour strong{font-size:18px;white-space:nowrap;padding:3px 8px}
.weather-three-condition{font-size:11px;line-height:1.4;color:#fff;overflow-wrap:anywhere}
.weather-next-three>p{font-size:13px;color:#fff}

/* Show the landscape clearly; protect only the text areas. */
.weather-backdrop .page-heading{background:rgba(247,248,244,.94);border-radius:20px;padding:24px;margin-top:24px}
.weather-backdrop .weather-place-heading{background:rgba(247,248,244,.94);border-radius:18px;padding:18px 22px}
.weather-backdrop .weather-source{background:rgba(247,248,244,.94);border:0;border-radius:18px;padding:18px 22px}
@media(max-width:600px){.weather-backdrop .page-heading{padding:20px}.weather-backdrop .weather-place-heading,.weather-backdrop .weather-source{padding:16px}}