/* Weather is decorative and stays in the document's top sky, never over the feed. */
:root{--page-sky:#e4f2fc;--scene-top:#b9def7;--scene-bottom:#e4f2fc;--star-opacity:0;--cloud-color:#fff;--sun-x:85%;--sun-y:40%;--cloud-opacity:0}
body{background:var(--page-sky);background-attachment:scroll;transition:background-color 50s linear}
.topbar{background:#edf8ffdc}
.weather-header{position:relative;isolation:isolate;height:88px;min-height:0;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--scene-top),var(--scene-bottom))}
.weather-header+.app-layout{padding-top:2px}
.weather-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.weather-astral{position:absolute;z-index:1;left:var(--sun-x);top:var(--sun-y);width:44px;height:44px;transform:translate(-50%,-50%);transition:opacity 4s linear,top 60s linear;pointer-events:none}
.weather-sun{border-radius:50%;background:radial-gradient(circle,#fffef2 0 50%,#fff9d2 77%,#ffedb1 94%,#ffe8a888 100%);box-shadow:0 0 7px 2px #fff9dccc,0 0 24px 10px #fff0c478,0 0 62px 26px #ffe5ae38,0 0 110px 44px #ffedb813}
.weather-sun:before{content:'';position:absolute;inset:-120%;border-radius:50%;background:radial-gradient(circle,#fff8de16,transparent 66%);filter:blur(7px)}
.weather-moon{width:46px;height:46px;filter:drop-shadow(0 0 3px #e1edff38) drop-shadow(0 0 16px #d5e6ff24);display:none}
.weather-stars{position:absolute;inset:0;z-index:0;opacity:var(--star-opacity);background-image:radial-gradient(1.5px 1.5px at 5% 24%,#edf6ff 75%,transparent),radial-gradient(1px 1px at 12% 65%,#cde4ff 80%,transparent),radial-gradient(1.2px 1.2px at 19% 17%,#fff 80%,transparent),radial-gradient(1px 1px at 28% 58%,#e2edff 80%,transparent),radial-gradient(1.5px 1.5px at 34% 28%,#e9f5ff 80%,transparent),radial-gradient(1px 1px at 43% 74%,#fff 80%,transparent),radial-gradient(1.3px 1.3px at 51% 19%,#d6ebff 80%,transparent),radial-gradient(1px 1px at 62% 51%,#fff 80%,transparent),radial-gradient(1.6px 1.6px at 71% 22%,#e7f5ff 80%,transparent),radial-gradient(1px 1px at 79% 70%,#fff 80%,transparent),radial-gradient(1.3px 1.3px at 91% 17%,#e5f2ff 80%,transparent),radial-gradient(1px 1px at 96% 63%,#fff 80%,transparent);animation:weather-twinkle 7s ease-in-out infinite alternate}
.weather-stars-far{transform:translate(4%,-12px);animation-delay:-3s;filter:blur(.2px)}
.weather-horizon{position:absolute;inset:0;z-index:0;opacity:0;background:radial-gradient(ellipse at var(--sun-x) 100%,#ffe1a9b3,transparent 62%);transition:opacity 6s}
.weather-cloud{position:absolute;z-index:2;left:-30%;top:-22px;width:clamp(210px,29vw,430px);height:112px;opacity:var(--cloud-opacity);filter:blur(.6px);animation:weather-cloud-drift 125s linear infinite;animation-delay:-38s;will-change:transform}
.weather-cloud canvas{width:100%;height:100%;display:block}
.weather-cloud-b{top:9px;width:clamp(230px,34vw,520px);height:100px;animation-duration:165s;animation-delay:-95s;filter:blur(1.5px);opacity:calc(var(--cloud-opacity) * .7)}
.weather-cloud-c{top:-35px;width:clamp(190px,26vw,380px);height:110px;animation-duration:145s;animation-delay:-105s;filter:blur(.9px)}
.weather-haze{position:absolute;inset:0;z-index:0;opacity:0;background:linear-gradient(160deg,#8fa9bd55,#b5c8d033);transition:opacity 6s}
.weather-rain,.weather-snow,.weather-wind{position:absolute;inset:-35px 0;z-index:3;opacity:0;pointer-events:none}
.weather-rain{background:repeating-linear-gradient(102deg,transparent 0 27px,#b8d2e252 27.5px,transparent 28.3px 63px);background-size:97px 67px;mask-image:repeating-linear-gradient(transparent 0 14px,#000 16px 31px,transparent 34px 61px);animation:weather-rainfall .72s linear infinite}
.weather-rain:after{content:'';position:absolute;inset:-30px;background:inherit;background-size:137px 93px;opacity:.5;filter:blur(.4px);animation:weather-rainfall 1.1s linear infinite reverse}
.weather-snow{background-image:radial-gradient(2px 2px at 17px 14px,#ffffffe0 35%,transparent),radial-gradient(1.2px 1.2px at 54px 48px,#ffffffa0 40%,transparent),radial-gradient(1.7px 1.7px at 85px 24px,#fff 45%,transparent);background-size:127px 103px;filter:drop-shadow(0 1px 1px #3f627f22);animation:weather-snowfall 12s linear infinite}
.weather-snow:after{content:'';position:absolute;inset:-40px;background-image:radial-gradient(3px 3px at 35px 29px,#ffffffc0 25%,transparent),radial-gradient(2px 2px at 112px 75px,#ffffffb0 25%,transparent);background-size:191px 139px;filter:blur(.3px);animation:weather-snowfall 8s linear infinite}
.weather-wind{background:repeating-linear-gradient(0deg,transparent 0 29px,#8eafc444 30px,transparent 31px 60px);mask-image:repeating-linear-gradient(90deg,transparent 0 100px,#000 105px 175px,transparent 180px 300px);animation:weather-windflow 4s linear infinite}
[data-weather='partly'],[data-weather='wind']{--cloud-opacity:.72}
:is([data-weather='cloudy'],[data-weather='rain'],[data-weather='snow'],[data-weather='storm']){--cloud-opacity:.93}
:is([data-weather='cloudy'],[data-weather='rain'],[data-weather='snow'],[data-weather='storm'],[data-weather='fog']) .weather-haze{opacity:1}
:is([data-weather='rain'],[data-weather='storm']) .weather-rain{opacity:.8}[data-weather='snow'] .weather-snow{opacity:.95}[data-windy='true'] .weather-wind{opacity:1}[data-windy='true'] .weather-cloud{animation-duration:45s}
[data-sky-period='morning']{--page-sky:#e6f2fa;--scene-top:#c4e4fa;--scene-bottom:#e6f2fa;--sun-y:48%}
[data-sky-period='day']{--page-sky:#e4f2fc;--scene-top:#acd9f5;--scene-bottom:#e4f2fc;--sun-y:38%}
[data-sky-period='afternoon']{--page-sky:#e8eff5;--scene-top:#b7d8ee;--scene-bottom:#e8eff5;--sun-y:48%}
[data-sky-period='sunrise']{--page-sky:#eadfe8;--scene-top:#7e8dae;--scene-bottom:#f0c4a7;--cloud-color:#f5d6c9;--star-opacity:calc((1 - var(--twilight-progress,.5)) * .48);--sun-y:var(--sun-horizon-y,55%)}
[data-sky-period='sunset']{--page-sky:#d4c4ce;--scene-top:#6d779e;--scene-bottom:#efa77f;--cloud-color:#e7b8ae;--star-opacity:calc(var(--twilight-progress,.5) * .48);--sun-y:var(--sun-horizon-y,55%)}
:is([data-sky-period='sunrise'],[data-sky-period='sunset']) .weather-horizon{opacity:1}
:is([data-sky-period='sunrise'],[data-sky-period='sunset']) .weather-sun{background:radial-gradient(circle,#fff4ce 0 50%,#ffdda4 83%,#ffc58a);box-shadow:0 0 8px 2px #ffe8ba99,0 0 33px 14px #ffc78266,0 0 86px 34px #f6aa7133;mask-image:linear-gradient(#000 0 72%,#000b 89%,#0005)}
[data-sky-period='evening']{--page-sky:#17233c;--scene-top:#24355a;--scene-bottom:#17233c;--star-opacity:.75;--cloud-color:#748aab;--sun-y:44%}
[data-sky-period='night']{--page-sky:#101d31;--scene-top:#060f22;--scene-bottom:#101d31;--star-opacity:1;--cloud-color:#607793;--sun-y:40%}
[data-sky-period='predawn']{--page-sky:#1f2c43;--scene-top:#111c36;--scene-bottom:#1f2c43;--star-opacity:.75;--cloud-color:#8193ae;--sun-y:45%}
:is([data-sky-period='evening'],[data-sky-period='night'],[data-sky-period='predawn']) .weather-sun{display:none}
:is([data-sky-period='evening'],[data-sky-period='night'],[data-sky-period='predawn']) .weather-moon{display:block}
:is([data-sky-period='evening'],[data-sky-period='night'],[data-sky-period='predawn']) .weather-horizon{opacity:.35;background:radial-gradient(ellipse at var(--sun-x) 35%,#b9d9ff33,transparent 36%)}
[data-theme='dark'] .topbar{background:#0c172be6}[data-theme='dark'] .weather-rain{background-image:repeating-linear-gradient(105deg,transparent 0 31px,#accde077 32px,transparent 33px 66px)}
[data-theme='dark'] .weather-haze{background:linear-gradient(120deg,#55657d22,#a5b7cb12)}
[data-theme='dark'] .sidebar-profile:before{background:repeating-linear-gradient(125deg,#20344a,#20344a 20px,#36516a 21px,#36516a 22px)}
.sky-footer{display:block;font-size:10px;margin-top:8px;color:var(--muted)}.sky-footer a{text-decoration:underline;text-underline-offset:3px}.sky-footer button{font-size:inherit;padding:4px}
@keyframes weather-cloud-drift{from{transform:translateX(0)}to{transform:translateX(145vw)}}
@keyframes weather-rainfall{to{background-position:20px 104px}}
@keyframes weather-snowfall{to{background-position:40px 90px}}
@keyframes weather-windflow{to{background-position:300px 0;mask-position:300px 0}}
@keyframes weather-twinkle{from{filter:brightness(.72)}to{filter:brightness(1.12)}}
@media(max-width:700px){.weather-header{height:76px;--sun-x:80%}.weather-header+.app-layout{padding-top:0}.weather-astral{width:36px;height:36px}.weather-moon{width:42px;height:42px}.weather-cloud{height:85px;top:-16px}.weather-cloud-b{top:4px}.weather-cloud-c{top:-25px}.bottom-nav .nav-message{min-width:60px}}
@media(prefers-reduced-motion:reduce){body,.weather-astral{transition:none}.weather-cloud,.weather-rain,.weather-rain:after,.weather-snow,.weather-snow:after,.weather-wind,.weather-stars{animation:none}.weather-cloud{left:58%;transform:none}.weather-cloud-b{left:8%}.weather-cloud-c{left:35%}}
.offers-top{color:var(--clay)!important;background:var(--clay-soft)!important}.bottom-nav .nav-message{position:relative;color:var(--green);font-weight:800;min-width:78px}.bottom-nav .nav-message>svg{width:26px;height:26px;filter:drop-shadow(0 3px 6px #2b764433)}.bottom-nav .nav-message:before{content:'';position:absolute;z-index:-1;top:0;width:48px;height:38px;border-radius:15px;background:var(--green-light)}
.location-intro{text-align:center}.location-intro>svg{width:32px;height:32px;color:var(--green);margin:10px auto}.location-intro p{font-size:12px;color:var(--muted);line-height:2}.location-intro~.muted{font-size:11px;line-height:1.9;margin:16px 0}.location-intro~.admin-search{align-items:end;margin:24px 0 12px}.location-intro~.admin-search .field{flex:1;min-width:0;margin:0}.location-intro~.admin-search .secondary{flex-shrink:0;margin-bottom:0}.city-result{display:flex;align-items:center;justify-content:space-between;width:100%;border-bottom:1px solid var(--line);text-align:right;padding:15px 8px}.city-result>span{display:grid;gap:6px}.city-result b{font-size:13px}.city-result small{font-size:11px;color:var(--muted)}.city-result>svg{width:18px;color:var(--green)}.city-result:hover{background:var(--green-light)}.weather-explanation{font-size:10px;color:var(--muted);line-height:2;margin:20px 0 0}
.sidebar-profile>div{position:relative;z-index:1}.sidebar-profile>div b{display:block;font-size:13px}.sidebar-profile>div small{display:block;margin-top:8px;font-size:10px;color:var(--muted)}

.weather-header{pointer-events:auto;touch-action:pan-y;background:transparent}.weather-scene{background:linear-gradient(180deg,var(--scene-top),var(--scene-bottom));mask-image:linear-gradient(#000 0 53%,#000b 72%,transparent 100%)}.weather-particles{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.interactive-precipitation :is(.weather-rain,.weather-snow){display:none}

/* Overcast skies use overlapping, slower layers; loops wrap beyond both screen edges. */
.weather-cloud{left:-560px;animation-duration:220s;animation-delay:-105s;filter:blur(1px);transition:opacity 5s ease}
.weather-cloud-b{animation-duration:280s;animation-delay:-190s;filter:blur(2px)}
.weather-cloud-c{animation-duration:250s;animation-delay:-210s}
.weather-cloud-d,.weather-cloud-e,.weather-cloud-f,.weather-cloud-g,.weather-cloud-h,.weather-cloud-i{opacity:0;pointer-events:none}
.weather-cloud-d{top:-12px;width:clamp(300px,42vw,560px);animation-duration:260s;animation-delay:-135s;filter:blur(2px)}
.weather-cloud-e{top:14px;width:clamp(280px,38vw,520px);animation-duration:310s;animation-delay:-210s;filter:blur(2.5px)}
.weather-cloud-f{top:-26px;width:clamp(310px,43vw,560px);animation-duration:290s;animation-delay:-250s;filter:blur(1.6px)}
.weather-cloud-g{top:8px;width:clamp(260px,36vw,500px);animation-duration:270s;animation-delay:-75s;filter:blur(2px)}
.weather-cloud-h{top:-18px;width:clamp(300px,41vw,560px);animation-duration:330s;animation-delay:-310s;filter:blur(2px)}
.weather-cloud-i{top:18px;width:clamp(260px,35vw,500px);animation-duration:300s;animation-delay:-160s;filter:blur(2.5px)}
:is([data-weather='cloudy'],[data-weather='rain'],[data-weather='snow'],[data-weather='storm']) :is(.weather-cloud-d,.weather-cloud-e,.weather-cloud-f,.weather-cloud-g,.weather-cloud-h,.weather-cloud-i){opacity:.82}
[data-windy='true'] .weather-cloud{animation-duration:120s}
@keyframes weather-cloud-drift{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 1120px))}}
@media(prefers-reduced-motion:reduce){.weather-cloud{left:58%;transition:none}.weather-cloud-b,.weather-cloud-d{left:8%}.weather-cloud-c,.weather-cloud-e{left:35%}.weather-cloud-f{left:-15%}.weather-cloud-g{left:65%}.weather-cloud-h{left:20%}.weather-cloud-i{left:80%}}