.weather-date-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.weather-date-tabs [aria-pressed=true]{background:#d1ddbd;color:#253222;border-color:#d1ddbd}.weather-day-info{font-size:13px;line-height:1.8;color:var(--text);margin:0 0 5px}.weather-period-note{font-size:11px;color:var(--muted);line-height:1.7;margin:0 0 20px}.weather-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.weather-period{border:1px solid var(--line);border-radius:14px;background:#222a23;padding:22px;min-width:0}.weather-period-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.weather-period-heading h4{font-size:16px;margin:0}.weather-period-heading>span{color:var(--muted);font-size:12px}.weather-period-sky{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px 12px;margin:22px 0}.weather-period-sky>.weather-icon{width:36px;height:36px}.weather-period-sky>strong{font-size:36px;font-weight:500}.weather-period-sky>span:last-child{grid-column:1/-1;font-size:13px;color:var(--muted)}.weather-period-details{margin:0}.weather-period-details>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:11px;line-height:1.5}.weather-period-details dt{color:var(--muted)}.weather-period-details dd{margin:0;text-align:right;color:var(--text)}
@media(max-width:1100px){.weather-periods{grid-template-columns:repeat(2,minmax(0,1fr))}.weather-period{padding:16px}.weather-period-details>div{flex-wrap:wrap;gap:3px 10px}}
@media(max-width:700px){.weather-periods{grid-template-columns:1fr}.weather-period{padding:20px}.weather-period-sky{grid-template-columns:40px auto 1fr;margin:16px 0}.weather-period-sky>span:last-child{grid-column:auto;text-align:right}.weather-date-tabs .secondary{padding:9px 12px}}

.weather-day-link{width:100%;text-align:left;background:transparent;color:var(--text);border-radius:0;padding:10px 0}.weather-day-link:hover{background:#293328}.weather-day-link:focus-visible{outline:2px solid #d1ddbd;outline-offset:3px}.weather-overview-back{margin-top:20px}#weather-detail-title{scroll-margin-top:24px}

main:has(>#weather-section:not([hidden])){max-width:none;padding-inline:22px}
#weather-section{width:100%;max-width:none;margin-inline:0}
@media(max-width:700px){main:has(>#weather-section:not([hidden])){padding-inline:14px}}

.weather-day-extra,.weather-day-now{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-size:11px;line-height:1.7}.weather-day-now{color:#c4d3ba;font-size:11px}.weather-day-extra .weather-mobile-wind{display:none}.weather-day-link{padding-block:16px}#weather-content>.weather-forecast-title:first-child{margin-top:20px}@media(max-width:700px){.weather-day-extra .weather-mobile-wind{display:inline}.weather-day-extra,.weather-day-now{font-size:10px;gap:6px 14px}}

@media(min-width:1101px){.weather-day-link{grid-template-columns:85px minmax(150px,240px) 85px 55px 80px;justify-content:start;column-gap:20px}}


/* More readable weather text in both the overview and day details. */
#weather-section .weather-day{font-size:14px}
#weather-section .weather-day-sky span:last-child,#weather-section .weather-wind{font-size:13px}
#weather-section .weather-day-extra,#weather-section .weather-day-now{font-size:13px;line-height:1.7}
#weather-section .weather-legend,#weather-section .weather-period-note{font-size:12px;line-height:1.7}
#weather-section .weather-selected,#weather-section .weather-selected .text-button{font-size:14px}
#weather-section .weather-date-tabs .secondary{font-size:13px}
#weather-section .weather-day-info{font-size:14px}
#weather-section .weather-period-heading h4{font-size:18px}
#weather-section .weather-period-heading>span{font-size:13px}
#weather-section .weather-period-sky>span:last-child{font-size:14px}
#weather-section .weather-period-details>div{font-size:13px;line-height:1.6;flex-wrap:wrap;gap:4px 10px}
#weather-section .weather-update small{font-size:12px}
@media(max-width:700px){#weather-section .weather-day{grid-template-columns:65px minmax(0,1fr) 65px 40px;font-size:13px;gap:8px}#weather-section .weather-day-sky span:last-child{font-size:12px}#weather-section .weather-day-extra,#weather-section .weather-day-now{font-size:12px}#weather-section .weather-day-temperatures{gap:5px}}

/* Wrap at spaces, without clipping names or splitting words. */
#weather-section :is(h1,h2,h3,h4,p,span,dt,dd,button){word-break:normal;overflow-wrap:normal;hyphens:none}
#weather-section .weather-selected>span{white-space:normal;overflow:visible;text-overflow:clip}
#weather-section .weather-selected{flex-wrap:wrap}
#weather-section .weather-day-sky{min-width:0;align-items:flex-start}
#weather-section .weather-day-sky>span:last-child{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.6}
#weather-section .weather-period-heading{flex-wrap:wrap}
#weather-section .weather-period-details>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
#weather-section .weather-period-details dd{text-align:left}
@media(max-width:700px){#weather-section .weather-day{grid-template-columns:minmax(75px,1fr) auto auto;gap:10px 14px}#weather-section .weather-day-sky{grid-column:1/-1;grid-row:2}#weather-section .weather-day-temperatures{grid-column:2;grid-row:1}#weather-section .weather-rain{grid-column:3;grid-row:1}#weather-section .weather-period-sky{grid-template-columns:40px 1fr}#weather-section .weather-period-sky>span:last-child{grid-column:1/-1;text-align:left}}

/* Center forecast values and supporting details. */
#weather-section .weather-day-link{justify-content:center;text-align:center}
#weather-section .weather-day-sky,#weather-section .weather-day-temperatures,#weather-section .weather-day-extra,#weather-section .weather-day-now{justify-content:center;text-align:center}
#weather-section .weather-rain,#weather-section .weather-wind{text-align:center}
#weather-section .weather-period{text-align:center}
#weather-section .weather-period-heading{justify-content:center;gap:8px 14px}
#weather-section .weather-period-sky{grid-template-columns:auto auto;justify-content:center}
#weather-section .weather-period-sky>span:last-child{grid-column:1/-1;text-align:center}
#weather-section .weather-period-details dt,#weather-section .weather-period-details dd{text-align:center}
#weather-section .weather-day-info,#weather-section .weather-period-note{text-align:center}
#weather-section .weather-date-tabs{justify-content:center}

@media(min-width:1101px){
 #weather-section .weather-day-link{grid-template-columns:75px minmax(140px,190px) 75px 45px 75px 100px 100px;column-gap:14px}
 #weather-section .weather-day-extra{display:contents}
 #weather-section .weather-day-extra>span{font-size:13px;white-space:nowrap;text-align:center}
}

/* Give individual forecast values a little more breathing room. */
#weather-section .weather-day-link{row-gap:14px;padding-block:20px}
#weather-section .weather-day-extra,#weather-section .weather-day-now{gap:10px 24px}
#weather-section .weather-day-temperatures{gap:10px}
#weather-section .weather-period-details>div{padding-block:13px;gap:7px}
@media(min-width:1101px){#weather-section .weather-day-link{grid-template-columns:75px minmax(125px,190px) 75px 45px 75px 100px 100px;column-gap:24px}}
@media(max-width:700px){#weather-section .weather-day-link{column-gap:18px;row-gap:12px}}

/* Spread the overview across the full available page width. */
@media(min-width:1101px){#weather-section .weather-day-link{grid-template-columns:minmax(75px,1fr) minmax(125px,1.6fr) minmax(75px,1fr) minmax(45px,.7fr) minmax(75px,1fr) minmax(100px,1.2fr) minmax(100px,1.2fr);justify-content:stretch;column-gap:clamp(14px,1.5vw,28px)}}