.forecast-months{--calendar-sunday:#b43d52}
[data-theme="dark"] .forecast-months{--calendar-sunday:#f095a1}
.forecast-month-heading{display:flex;align-items:center;gap:18px;margin:0 0 20px}
.forecast-month-heading h3{margin:0;font-size:22px;letter-spacing:-.3px;line-height:1.4}
.forecast-month-calendar{flex:0 0 auto;width:64px;height:auto;overflow:visible;color:var(--accent)}
.month-calendar-paper{fill:var(--panel);stroke:color-mix(in srgb,var(--accent) 40%,var(--line));stroke-width:1.2}
.month-calendar-cap{fill:var(--accent-soft)}
.month-calendar-rule{fill:none;stroke:var(--line);stroke-width:1}
.month-calendar-binding{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.6}
.month-calendar-name{fill:currentColor;font:650 16px 'Segoe UI',sans-serif;letter-spacing:1px}
.month-calendar-dot{fill:var(--muted);opacity:.2}
.month-calendar-dot--forecast{fill:currentColor;opacity:.85}
.month-calendar-dot--sunday{fill:var(--calendar-sunday)}
.forecast-month-table thead th{padding:8px;color:var(--muted);font-size:11px;font-weight:500;background:var(--subtle)}
.forecast-month-table tbody th,.forecast-month-table tbody td{padding:10px 8px;font-size:14px;font-weight:400;vertical-align:middle}
.forecast-month-table .forecast-month-date{min-width:175px;max-width:270px;line-height:1.5}
.forecast-month-table .forecast-month-date--sunday{color:var(--calendar-sunday)}
@media(min-width:901px){
 .forecast-month-table--split-date.forecast-table--balanced[data-forecast-layout="daily"]{--forecast-label-width:160px}
 .forecast-month-table--split-date.forecast-table--balanced .forecast-month-date{min-width:0}
 .forecast-month-table--split-date .forecast-month-date time{display:block}
 .forecast-month-table--split-date :is(.forecast-date-name,.forecast-date-calendar){display:block;white-space:nowrap}
}
.forecast-month-table td.condition{min-width:140px;font-size:14px;font-weight:400}
.forecast-month-table .daily-condition{gap:12px;line-height:1.4}
.forecast-month-table .weather-symbol--daily-list{width:46px}
.forecast-temperature-pair{white-space:nowrap;font-variant-numeric:tabular-nums}
.forecast-temperature-min,.forecast-temperature-separator{color:var(--accent);color:color-mix(in srgb,var(--accent) 70%,var(--panel))}
.forecast-month-table--front-temperature .forecast-front-temperature{box-sizing:border-box;flex:0 0 176px;width:176px;text-align:center;white-space:nowrap;font-size:20px;font-weight:650;line-height:1.3;color:var(--accent)}
.daily-condition-copy{min-width:0;overflow-wrap:anywhere}
.monthly-metrics{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.monthly-metric{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.monthly-metric .measurement-symbol{width:19px;height:19px}
.monthly-precipitation .monthly-metric{color:var(--water-blue)}
.forecast-month-table .monthly-moon,.forecast-month-table .monthly-moon-heading{text-align:center;width:64px}
.monthly-moon-name{display:none}
@media(max-width:900px){
 .forecast-month-heading{gap:14px;margin-bottom:16px}
 .forecast-month-heading h3{font-size:20px}
 .forecast-month-calendar{width:56px}
 .forecast-month-table,.forecast-month-table tbody{display:block;width:100%}
 .forecast-month-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .forecast-month-table tbody tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"date date date date" "condition condition condition condition" "precipitation precipitation wind wind";gap:10px 8px;align-items:center;padding:16px 0;margin:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
 .forecast-month-table tbody th,.forecast-month-table tbody td{display:block;padding:0;border:0;font-size:14px;font-weight:400}
 .forecast-month-table .forecast-month-date{grid-area:date;min-width:0;max-width:none}
 .forecast-month-table td.condition{grid-area:condition;grid-row:auto;min-width:0;font-size:14px;font-weight:400}
 .forecast-month-table .monthly-precipitation{grid-area:precipitation}
 .forecast-month-table .monthly-wind{grid-area:wind;justify-self:end}
 .forecast-month-table--front-temperature.forecast-month-table--cloud tbody tr{grid-template-areas:"date date date date" "condition condition condition condition" "precipitation precipitation wind wind" "cloudiness cloudiness cloudiness cloudiness"}
 .forecast-month-table--front-temperature .daily-condition{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px}
 .forecast-month-table--front-temperature .forecast-front-temperature{justify-self:end;text-align:right}
 .forecast-month-table--front-temperature .daily-condition-copy{grid-column:1/-1}
 .forecast-month-table .monthly-cloudiness{grid-area:cloudiness}
 .forecast-month-table td::before{display:none}
 .forecast-month-table .weather-symbol--daily-list{width:36px}
 .monthly-metrics{gap:5px 10px}
 .monthly-metric{gap:4px}
 .monthly-metric .measurement-symbol{width:18px;height:18px}
 .forecast-month-table--moon tbody tr{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"date date date date" "condition condition condition condition" "precipitation precipitation wind wind" "moon moon moon moon"}
 .forecast-month-table--moon tbody .forecast-month-row--no-wind{grid-template-areas:"date date date date" "condition condition condition condition" "precipitation precipitation moon moon"}
 .forecast-month-table--moon .forecast-month-row--no-wind .monthly-wind{display:none}
 .forecast-month-table .monthly-moon{display:flex;grid-area:moon;align-items:center;gap:6px;padding-inline-start:8px;min-width:0;width:auto;justify-self:stretch;text-align:left}
 .monthly-moon-name{display:block;min-width:0;color:var(--muted);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
 .monthly-moon .moon-phase{flex:0 0 28px;width:28px;height:28px}
}

/* At narrow desktop widths keep the full temperature pair together and put its copy below. */
@media(min-width:901px) and (max-width:1100px){
 .forecast-month-table--front-temperature .daily-condition{display:grid;grid-template-columns:46px 176px;gap:6px 12px}
 .forecast-month-table--front-temperature .daily-condition-copy{grid-column:1/-1}
 .forecast-month-table--split-date .daily-condition{grid-template-columns:46px minmax(176px,1fr)}
}

.forecast-week-heading{gap:18px}
.forecast-week-heading h3{flex:1 1 auto;min-width:0}
.forecast-week-calendar{flex:0 0 auto;width:64px;height:auto;overflow:visible;color:var(--accent)}
.week-calendar-month{fill:currentColor;font:650 16px 'Segoe UI',sans-serif;letter-spacing:1px}
.week-calendar-month--range{font-size:10px;letter-spacing:.25px}
.week-calendar-day{color:var(--muted);opacity:.35}
.week-calendar-day--forecast{color:var(--accent);opacity:1}
.week-calendar-day--sunday{color:var(--calendar-sunday)}
.week-calendar-weekday{fill:currentColor;font:500 4.5px 'Segoe UI',sans-serif}
.week-calendar-cell{fill:currentColor;fill-opacity:0;stroke:none}
.week-calendar-day--forecast .week-calendar-cell{fill-opacity:.045}
.week-calendar-day--today .week-calendar-cell{fill-opacity:.09;stroke:currentColor;stroke-opacity:.2;stroke-width:.5}
.week-calendar-number{fill:currentColor;font:600 5.5px 'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}
.week-calendar-note{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-opacity:.27;vector-effect:non-scaling-stroke}
.week-calendar-month-divider{fill:none;stroke:var(--muted);stroke-width:.6;stroke-dasharray:1.5 2;opacity:.35}
@media(max-width:900px){
 .forecast-week-heading{gap:14px}
 .forecast-week-calendar{width:56px}
}