.forecast-climate-context{--climate-accent:#19756d;--climate-accent-soft:#d9f0eb;position:relative;margin:0 0 24px;padding:20px;border:1px solid #c7d8d3;border-radius:19px;background:linear-gradient(145deg,#fffdfa 0%,#f3f8f5 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 9px 22px rgba(30,70,61,.08);overflow:hidden}
.forecast-climate-context::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--climate-accent)}
.forecast-climate-context.climate-tone-warm{--climate-accent:#bf6c24;--climate-accent-soft:#fae6c8}
.forecast-climate-context.climate-tone-cold{--climate-accent:#397caf;--climate-accent-soft:#dcecf7}
.forecast-climate-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:16px}
.forecast-climate-intro>div{min-width:0}
.forecast-climate-kicker{margin:0 0 4px;color:var(--climate-accent);font-size:.66rem;font-weight:900;letter-spacing:.09em}
.forecast-climate-intro h2{margin:0;color:#183749;font-size:clamp(1.2rem,2.1vw,1.65rem);letter-spacing:-.025em;line-height:1.16}
.forecast-climate-summary{max-width:780px;margin:7px 0 0;color:#4f6572;font-size:.82rem;line-height:1.5}
.forecast-climate-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.forecast-climate-metric{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:12px;border:1px solid #d5e1dd;border-radius:13px;background:rgba(255,255,255,.72)}
.forecast-climate-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:var(--climate-accent-soft);color:var(--climate-accent)}
.forecast-climate-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.forecast-climate-metric>div{display:grid;min-width:0;gap:2px}
.forecast-climate-label{color:#687c86;font-size:.61rem;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.forecast-climate-metric strong{overflow:hidden;color:#193a4b;font-size:.82rem;font-weight:850;line-height:1.22;text-overflow:ellipsis}
.forecast-climate-metric small{overflow:hidden;color:#627782;font-size:.65rem;font-weight:650;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.forecast-climate-detail.is-truncated{cursor:help;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:rgba(25,58,75,.42);text-underline-offset:3px}
.forecast-climate-detail:focus-visible{outline:2px solid var(--climate-accent);outline-offset:3px;border-radius:3px}
.forecast-climate-tooltip{position:fixed;z-index:10000;max-width:min(320px,calc(100vw - 24px));padding:9px 11px;border:1px solid rgba(22,57,70,.28);border-radius:10px;background:#173a49;color:#fff;box-shadow:0 8px 24px rgba(9,34,44,.22);font-size:.75rem;font-weight:700;line-height:1.38;text-align:left;white-space:normal;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .14s ease,transform .14s ease}
.forecast-climate-tooltip::after{content:"";position:absolute;left:var(--tooltip-arrow-left,50%);width:9px;height:9px;background:#173a49;transform:translateX(-50%) rotate(45deg)}
.forecast-climate-tooltip[data-placement="top"]::after{bottom:-5px;border-right:1px solid rgba(22,57,70,.28);border-bottom:1px solid rgba(22,57,70,.28)}
.forecast-climate-tooltip[data-placement="bottom"]::after{top:-5px;border-left:1px solid rgba(22,57,70,.28);border-top:1px solid rgba(22,57,70,.28)}
.forecast-climate-tooltip.is-visible{opacity:1;transform:translateY(0)}
.forecast-climate-note{margin:12px 2px 0;color:#74858c;font-size:.62rem;line-height:1.45}
@media(max-width:760px){.forecast-climate-context{margin-bottom:20px;padding:16px 14px 14px;border-radius:16px}.forecast-climate-intro{display:grid;gap:9px;margin-bottom:13px}.forecast-climate-summary{font-size:.77rem}.forecast-climate-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.forecast-climate-metric{grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px}.forecast-climate-icon{width:31px;height:31px;border-radius:9px}.forecast-climate-icon svg{width:20px;height:20px}.forecast-climate-precipitation:last-child{grid-column:1/-1}.forecast-climate-metric strong{font-size:.75rem}.forecast-climate-metric small{font-size:.59rem}.forecast-climate-note{font-size:.58rem}}
@media(max-width:390px){.forecast-climate-metrics{grid-template-columns:1fr}.forecast-climate-precipitation:last-child{grid-column:auto}.forecast-climate-metric strong{white-space:normal}}
@media(prefers-reduced-motion:reduce){.forecast-climate-context *,.forecast-climate-tooltip{transition:none!important}}