/* Weather icon styling adapted from weather.watch/obs/weather-watch-forecast. */
.local-forecast .weather-icon {
    position: relative;
    width: 116px;
    height: 92px;
}

.local-forecast .sun {
    position: absolute;
    left: 26px;
    top: 4px;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: radial-gradient(circle at 34% 30%, #fff4a6 0 10%, var(--ww-yellow) 36%, var(--ww-orange) 100%);
    box-shadow: 0 0 30px rgba(240, 208, 96, 0.46);
}

.local-forecast .sun::before {
    content: "";
    position: absolute;
    inset: -14px;
    background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 122, 48, 0.95) 8deg 18deg, transparent 18deg 45deg);
    -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 56%);
    mask: radial-gradient(circle, transparent 0 55%, #000 56%);
}

.local-forecast .cloud {
    position: absolute;
    left: 4px;
    right: 6px;
    bottom: 14px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(180deg, #dff5ff, #82adc0);
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.22);
}

.local-forecast .cloud::before,
.local-forecast .cloud::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: inherit;
}

.local-forecast .cloud::before {
    left: 18px;
    bottom: 16px;
    width: 42px;
    height: 42px;
}

.local-forecast .cloud::after {
    left: 48px;
    bottom: 11px;
    width: 48px;
    height: 48px;
}

.local-forecast .icon-sunny .cloud {
    display: none;
}

.local-forecast .icon-cloudy .sun,
.local-forecast .icon-rain .sun,
.local-forecast .icon-thunder .sun,
.local-forecast .icon-snow .sun,
.local-forecast .icon-fog .sun {
    display: none;
}

.local-forecast .rain-lines,
.local-forecast .snow-flakes,
.local-forecast .fog-lines,
.local-forecast .bolt {
    position: absolute;
    z-index: 2;
}

.local-forecast .rain-lines {
    left: 26px;
    right: 18px;
    bottom: 0;
    height: 28px;
    display: flex;
    justify-content: space-around;
}

.local-forecast .rain-lines span {
    width: 4px;
    height: 24px;
    border-radius: 999px;
    background: var(--ww-cyan);
    transform: skewX(-18deg);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.58);
}

.local-forecast .bolt {
    left: 46px;
    bottom: -2px;
    width: 30px;
    height: 46px;
    background: linear-gradient(180deg, var(--ww-yellow), var(--ww-orange));
    clip-path: polygon(38% 0, 86% 0, 58% 38%, 96% 38%, 22% 100%, 44% 52%, 10% 52%);
    filter: drop-shadow(0 0 12px rgba(240, 208, 96, 0.72));
}

.local-forecast .snow-flakes {
    left: 18px;
    right: 18px;
    bottom: -2px;
    height: 30px;
    display: flex;
    justify-content: space-around;
}

.local-forecast .snow-flakes span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #e9f7ff;
    box-shadow: 0 0 10px rgba(233, 247, 255, 0.5);
}

.local-forecast .fog-lines {
    left: 16px;
    right: 12px;
    bottom: 2px;
    display: grid;
    gap: 7px;
}

.local-forecast .fog-lines span {
    height: 4px;
    border-radius: 999px;
    background: rgba(223, 245, 255, 0.78);
}

.local-forecast .icon-rain .rain-lines,
.local-forecast .icon-thunder .rain-lines,
.local-forecast .icon-thunder .bolt,
.local-forecast .icon-snow .snow-flakes,
.local-forecast .icon-fog .fog-lines {
    display: flex;
}

.local-forecast .icon-sunny .rain-lines,
.local-forecast .icon-sunny .snow-flakes,
.local-forecast .icon-sunny .fog-lines,
.local-forecast .icon-sunny .bolt,
.local-forecast .icon-partly .rain-lines,
.local-forecast .icon-partly .snow-flakes,
.local-forecast .icon-partly .fog-lines,
.local-forecast .icon-partly .bolt,
.local-forecast .icon-cloudy .rain-lines,
.local-forecast .icon-cloudy .snow-flakes,
.local-forecast .icon-cloudy .fog-lines,
.local-forecast .icon-cloudy .bolt,
.local-forecast .icon-rain .snow-flakes,
.local-forecast .icon-rain .fog-lines,
.local-forecast .icon-rain .bolt,
.local-forecast .icon-thunder .snow-flakes,
.local-forecast .icon-thunder .fog-lines,
.local-forecast .icon-snow .rain-lines,
.local-forecast .icon-snow .fog-lines,
.local-forecast .icon-snow .bolt,
.local-forecast .icon-fog .rain-lines,
.local-forecast .icon-fog .snow-flakes,
.local-forecast .icon-fog .bolt {
    display: none;
}

.local-forecast{--ww-cyan:#00d4ff;--ww-yellow:#f0d060;--ww-orange:#ff7a30;background:#080f13;color:#f5f7fa;padding:52px 6vw 42px;border-bottom:1px solid #21343f}
.forecast-toolbar{margin-bottom:28px;display:flex;justify-content:space-between;align-items:end;gap:24px}.local-forecast .eyebrow{color:#75dce9;font-size:12px}.local-forecast h2{font-size:30px;text-transform:uppercase;margin:8px 0 0;font-weight:800}.local-forecast form label{display:block;font-size:14px;color:#b8cbd5;margin-bottom:6px}.local-forecast form>div{display:flex;gap:8px}.local-forecast input{width:240px;max-width:100%;border:1px solid #405762;background:#112029;color:#fff;border-radius:4px;padding:10px 12px;font:inherit;min-width:0}.local-forecast input::placeholder{color:#9bafb9}.local-forecast button{background:#12242d;color:#e5f3f7;border:1px solid #36505d;font-size:14px;padding:10px 14px;min-height:44px;border-radius:4px}.local-forecast button:hover,.local-forecast button[aria-pressed=true]{border-color:#00d4ff;color:#78e8ff;background:#123542}.forecast-results{display:flex;flex-wrap:wrap;gap:8px;padding:16px;border:1px solid #36505d;margin-bottom:18px}.forecast-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #243b45;border-radius:6px;overflow:hidden;background:linear-gradient(110deg,#082b37,#080f13 50%,#09251f);position:relative}.forecast-days:empty{display:none}.forecast-days:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#00d4ff,#00e5a0,#f0d060,#ff7a30)}.forecast-day{padding:15px 14px 12px;min-width:0;border-right:1px solid #ffffff14}.forecast-day:last-child{border:0}.forecast-day h3{font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#cbd8de;margin:0 0 10px}.forecast-visual{display:flex;align-items:center;gap:8px;min-height:94px}.forecast-temps{display:flex;flex-direction:column;line-height:1}.forecast-temps .high{font-size:40px;font-weight:800;color:#fff}.forecast-temps .low{font-size:27px;font-weight:800;color:#8b9da5}.forecast-condition{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;margin-top:10px;color:#adbec7}.forecast-pop{color:#00d4ff;white-space:nowrap}.forecast-credit{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;color:#9eb1bc;font-size:12px}.forecast-credit a{text-decoration:underline}.local-forecast #forecast-status{color:#b4ccd7;margin:10px 0;font-size:14px}.local-forecast #forecast-status:empty{display:none}.local-forecast .weather-icon{flex-shrink:0;zoom:.75}
@media(max-width:1100px){.forecast-day{padding:15px 10px 12px}.local-forecast .weather-icon{zoom:.6}.forecast-temps .high{font-size:34px}.forecast-temps .low{font-size:24px}}
@media(max-width:800px){.forecast-toolbar{align-items:start;flex-direction:column;gap:18px}.local-forecast form{width:100%}.local-forecast input{width:100%}.forecast-days{overflow-x:auto;grid-template-columns:repeat(5,minmax(180px,1fr));scroll-snap-type:x proximity}.forecast-day{scroll-snap-align:start}.local-forecast .weather-icon{zoom:.75}.forecast-temps .high{font-size:40px}.local-forecast{padding:36px 5vw}.local-forecast h2{font-size:26px}}

/* Replay the forecast reveal on city selection, without looping while reading. */
.forecast-enter{animation:forecast-card-in .65s ease both;animation-delay:var(--forecast-delay)}
.forecast-enter .weather-icon{animation:forecast-icon-in .85s ease both;animation-delay:calc(var(--forecast-delay) + .15s)}
.forecast-enter .forecast-temps{animation:forecast-card-in .6s ease both;animation-delay:calc(var(--forecast-delay) + .25s)}
@keyframes forecast-card-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes forecast-icon-in{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.forecast-enter,.forecast-enter .weather-icon,.forecast-enter .forecast-temps{animation:none}}

/* Gary's light newsroom palette, retaining the broadcast forecast graphics. */
.light-site .local-forecast{background:#e7eff6;color:#16334d;border-bottom-color:#c4d5e2}
.light-site .local-forecast .eyebrow{color:#006c9f}
.light-site .local-forecast form label{color:#425f75}
.light-site .local-forecast input{background:#f9fcff;color:#173751;border-color:#b5cbdc}
.light-site .local-forecast input::placeholder{color:#61798c}
.light-site .local-forecast button{background:#dceaf5;color:#16486b;border-color:#b3ccdf}
.light-site .local-forecast button:hover{background:#cce4f4;color:#005b8e;border-color:#087fba}
.light-site .local-forecast :is(button,input,a):focus-visible{outline-color:#006fa9}
.light-site .forecast-results{background:#f3f8fc;border-color:#bed1df}
.light-site .forecast-days{background:linear-gradient(110deg,#e2f2fa,#f8fbfd 50%,#eaf5f0);border-color:#bed2e0;box-shadow:0 6px 22px #183b5a09}
.light-site .forecast-day{border-right-color:#c8dbe7}
.light-site .forecast-day h3{color:#304f66}
.light-site .forecast-temps .high{color:#133955}
.light-site .forecast-temps .low{color:#5e7788}
.light-site .forecast-condition{color:#425e72}
.light-site .forecast-pop{color:#006d9f}
.light-site .forecast-credit{color:#526c80}
.light-site .local-forecast #forecast-status{color:#405f75}