/* Compact forecast hierarchy: readable labels, modest numbers, touch-sized controls. */
.home-maker-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0;font-size:14px;line-height:1.5;color:var(--site-ink,#173e47);max-width:440px}
.home-maker-note>span:first-child{font-size:20px;line-height:1.1;flex-shrink:0}
.home-maker-note strong{font-weight:700}
#forecast{--forecast-line:var(--site-border,#b4d0ca);scroll-margin-top:76px}
#forecast :is(h2,h3,h4,p){overflow-wrap:anywhere}
#forecast .section-heading h2{font-size:clamp(21px,3vw,27px);line-height:1.25}
#forecast :is(.hourly-head,.tide-head) h3{font-size:21px;line-height:1.3}
#forecast .forecast-tabs{gap:6px}
#forecast .forecast-tabs a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:15px;padding:8px 12px}
#forecast :is(button,summary,a):focus-visible{outline:3px solid #17888b;outline-offset:3px}
#forecast .section-actions{display:flex;flex-wrap:wrap;gap:8px}
#forecast .section-actions button{min-height:44px;padding:8px 12px;font-size:14px}
#forecast .forecast-overview{padding:16px;margin:12px 0;border-radius:14px}
#forecast .forecast-readings{gap:8px;margin:12px 0}
#forecast .forecast-readings>div{padding:10px 12px;border:1px solid var(--forecast-line)}
#forecast .forecast-readings dt{display:flex;align-items:center;gap:7px;font-size:14px;line-height:1.4}
#forecast .forecast-readings dd{font-size:19px;margin-top:7px;font-variant-numeric:tabular-nums}
.forecast-metric-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:#e1efea;color:#175762;font-size:21px;flex-shrink:0}
#forecast .forecast-overview-heading{font-size:16px;align-items:center}
#forecast .forecast-overview-heading span{font-size:14px}
#forecast .next-change{gap:12px;padding:14px;border-radius:12px}
#forecast .next-change strong{font-size:15px;line-height:1.5}
#forecast .next-change small{font-size:12px;letter-spacing:.04em}
#forecast .safety-banner{padding:14px;gap:12px}
#forecast .safety-banner strong{font-size:16px;line-height:1.4}
#forecast .safety-banner p{font-size:14px;line-height:1.5;margin:5px 0}
#forecast :is(.score-card,.window-card,.conditions-card,.hourly-card,.tide-card,.moon-panel){border-radius:16px;padding:18px}
#forecast .score-copy h3{font-size:23px;line-height:1.25}
#forecast .score-copy p{font-size:15px;line-height:1.5}
#forecast #windowTime{font-size:clamp(22px,3vw,28px);line-height:1.3}
#forecast #windowCopy{font-size:14px;line-height:1.5}
#forecast .condition{gap:10px;padding:12px 0}
#forecast .condition-icon{font-size:24px;width:32px;flex-shrink:0}
#forecast .condition strong{font-size:17px;line-height:1.4}
#forecast .condition p{font-size:14px;line-height:1.45}
#forecast .condition small{font-size:12px;letter-spacing:.04em}
#forecast .day-parts{gap:8px}
#forecast .day-part{padding:12px 10px;min-height:44px;border-radius:12px}
#forecast .day-part strong{font-size:20px}
#forecast .day-part span,#forecast .day-part small{font-size:13px}
#forecast .day-part p{font-size:13px;line-height:1.45;margin:6px 0 0}
#forecast .hour-detail{gap:8px}
#forecast .hour-detail>div{padding:12px;min-width:0;border-radius:10px}
#forecast .hour-detail strong{font-size:17px;line-height:1.4}
#forecast .hour-detail small{font-size:12px;letter-spacing:.04em}
#forecast .hour-detail span{font-size:14px;line-height:1.45}
#forecast .tide-summary strong{font-size:21px}
#forecast .tide-summary span{font-size:14px;line-height:1.5}
#forecast #airQuality h3{font-size:20px}
#forecast .air-number{font-size:27px}
#forecast .air-region-grid{gap:8px;margin:12px 0}
#forecast .air-region-card{padding:12px;border-radius:12px}
#forecast .air-region-card h4{font-size:16px;margin-bottom:8px}
#forecast .air-reading{font-size:14px;gap:4px;padding-left:9px;border-left-width:4px}
#forecast .air-reading+.air-reading{margin-top:10px}
#forecast .air-times p{font-size:14px}
@media(max-width:600px){
 #forecast .section-heading{align-items:stretch;gap:12px}
 #forecast .section-actions{width:100%}
 #forecast .section-actions button{flex:1;white-space:normal}
 #forecast .forecast-tabs a{flex:1;padding:8px 5px}
 #forecast .forecast-readings{grid-template-columns:repeat(2,minmax(0,1fr))}
 #forecast .hour-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #forecast .hour-detail :is(.detail-lead,.detail-cue){grid-column:1/-1}
 #forecast .hourly-head{align-items:stretch;gap:10px}
 #forecast .day-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #forecast :is(.score-card,.window-card,.conditions-card,.hourly-card,.tide-card,.moon-panel){padding:14px}
}
@media(max-width:440px){#forecast .air-reading+.air-reading{margin-top:0}}
@media(prefers-reduced-motion:reduce){#forecast *,#forecast *::before,#forecast *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}