.hourly-forecast{min-width:0;margin-top:8px;color:var(--text)}
.forecast-day-tabs{display:flex;gap:6px;width:fit-content;border:1px solid var(--line);background:var(--panel2);padding:4px;border-radius:16px}
.forecast-day-tabs button{border:0;background:transparent;color:var(--muted);padding:10px 20px;border-radius:12px;font:inherit;font-size:13px;font-weight:700;min-height:44px;cursor:pointer}
.forecast-day-tabs button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 2px 8px #0000000c}
.forecast-date{font-size:13px;color:var(--muted);margin:16px 0}
.forecast-summary{display:flex;align-items:center;gap:12px;padding:16px;border-radius:18px;background:var(--panel2);border:1px solid var(--line)}
.forecast-summary>span{font-size:28px;color:var(--accent);flex:none}.forecast-summary b{font-size:16px;line-height:1.5;display:block}.forecast-summary small{display:block;margin-top:4px;font-size:11px;color:var(--muted);line-height:1.6}
.forecast-section-label{font-size:11px;line-height:1.6;color:var(--muted);margin:18px 0 8px}.forecast-section-label span{font-weight:800;color:var(--text)}
.forecast-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;border-radius:12px}
.forecast-track{max-width:none}.forecast-pressure{display:block;overflow:visible;color:var(--accent)}.forecast-pressure-line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.forecast-pressure circle{fill:var(--panel);stroke:currentColor;stroke-width:2}.forecast-pressure text{fill:var(--muted);font-size:10px;font-family:inherit}.forecast-pressure-empty{height:98px;display:flex;align-items:center;color:var(--muted);font-size:12px;padding-left:12px}
.forecast-hours{display:flex;align-items:stretch}.forecast-hour{box-sizing:border-box;flex:0 0 68px;width:68px;padding:10px 3px 8px;border:1px solid transparent;border-radius:14px;display:flex;flex-direction:column;gap:8px;align-items:center;color:var(--text);background:transparent;font:inherit;font-size:12px;cursor:pointer;transition:background .18s,border-color .18s}
.forecast-hour[aria-pressed=true]{background:var(--panel2);border-color:var(--line)}.forecast-hour>b{font-size:11px;font-weight:600;white-space:nowrap}.forecast-weather{font-size:22px;line-height:30px}.forecast-hour strong{font-size:13px;line-height:16px}.forecast-hour small{font-size:9px;color:var(--muted);margin-top:-6px}
.forecast-bar-track{display:flex;align-items:flex-end;overflow:hidden;width:26px;height:62px;background:var(--panel2);border-radius:6px;flex:none}.forecast-bar-track>span{display:block;width:100%;background:var(--accent);border-radius:5px;min-height:0}.forecast-hour.caution .forecast-bar-track>span{background:#d89d38}.forecast-hour.excluded .forecast-bar-track{background:#d66b6426}.forecast-hour.excluded strong{color:#d66b64}.forecast-hour.missing .forecast-bar-track{border:1px dashed var(--line);box-sizing:border-box}
.forecast-hour-detail{margin-top:12px;padding:16px;background:var(--panel2);border:1px solid var(--line);border-radius:18px;animation:forecast-enter .22s ease-out}.forecast-detail-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}.forecast-detail-title b{font-size:13px}.forecast-detail-title>span{font-size:10px;color:var(--muted)}.forecast-hour-detail dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;margin:16px 0 0}.forecast-hour-detail dt{font-size:10px;color:var(--muted);margin-bottom:4px}.forecast-hour-detail dd{margin:0;font-size:13px;font-weight:700;white-space:nowrap}.forecast-hour-detail p,.forecast-boundary{font-size:11px;line-height:1.7;color:var(--muted);margin:14px 0 0}
.forecast-model-details{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}.forecast-model-details>summary{font-size:12px;font-weight:700;line-height:1.7;cursor:pointer;min-height:44px;display:list-item}.forecast-model-details>.pulse-quality{margin-top:12px}
.forecast-day-tabs button:focus-visible,.forecast-hour:focus-visible,.forecast-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes forecast-enter{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.forecast-hour{transition:none}.forecast-hour-detail{animation:none}}
@media(max-width:360px){.forecast-summary b{font-size:14px}.forecast-hour-detail{padding:12px}.forecast-hour-detail dd{font-size:12px}}