/* Afterlight Weather (Build 032). Dark weather-app look inside the site's page. Only used on weather.html. */
.wx-page{background:#0d1216;color:#eef2f5;padding:clamp(14px,3vw,30px) clamp(10px,2.5vw,30px) 30px;border-radius:24px;margin:8px 0 24px}
.wx{max-width:1240px;margin:0 auto;font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.wx *{box-sizing:border-box}
.wx h2,.wx h3{margin:0}
.wx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wx-card{background:linear-gradient(180deg,#18212a,#141b22);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.wx-card h3{font:600 11px/1.2 var(--mono,ui-monospace,monospace);letter-spacing:1.6px;color:#93a3b2;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.wx-card h3 .wx-icon{flex:none}
.wx-big{font:700 34px/1.05 system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;display:flex;flex-direction:column;gap:4px}
.wx-big small{font:500 13px/1.3 system-ui,sans-serif;color:#9fb0bf}
.wx-card p{margin:10px 0 0;color:#c3ced8;font-size:14px}
.wx-btn{border:0;border-radius:999px;padding:12px 20px;font:700 14px system-ui,sans-serif;background:linear-gradient(90deg,#ff8a3d,#ffb648);color:#1a1206;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.wx-btn:hover{filter:brightness(1.07)}
.wx-btn-ghost{background:rgba(255,255,255,.08);color:#eef2f5;border:1px solid rgba(255,255,255,.18)}
.wx-btn-small{padding:6px 12px;font-size:12px}
.wx-error{color:#ffb4a6;background:rgba(255,80,60,.12);border:1px solid rgba(255,80,60,.35);border-radius:12px;padding:10px 14px}
.wx-fine{font-size:12px;color:#8798a8}
/* setup */
.wx-setup{max-width:620px;margin:20px auto 30px;text-align:center;padding:30px 20px;border-radius:28px;background:radial-gradient(circle at 50% 0,#244a78,#121a24 70%);border:1px solid rgba(255,255,255,.08)}
.wx-setup h2{font:800 34px/1.1 system-ui,sans-serif;margin:8px 0}
.wx-setup p{color:#c3ced8}
.wx-setup-art{display:flex;justify-content:center}
.wx-loc-form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 10px}
.wx-loc-form input{width:150px;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;font:600 16px system-ui,sans-serif;letter-spacing:2px;text-align:center}
.wx-loc-form input::placeholder{color:#8798a8;letter-spacing:0}
/* top bar */
.wx-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.wx-place{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:9px 16px;cursor:pointer;font:15px system-ui,sans-serif}
.wx-place strong{font-weight:700}
.wx-place span{font:600 10px var(--mono,monospace);letter-spacing:1.4px;color:#ffb648}
.wx-loc-pop{width:100%}
.wx-loc-pop .wx-loc-form{justify-content:flex-start;margin:4px 0}
/* alerts */
.wx-alerts{display:grid;gap:8px;margin-bottom:14px}
.wx-alert{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.wx-alert summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.wx-alert summary::-webkit-details-marker{display:none}
.wx-alert summary strong{display:block;font-size:16px;color:#fff}
.wx-alert summary small{display:block;color:rgba(255,255,255,.8)}
.wx-alert summary b{margin-left:auto;font:600 10px var(--mono,monospace);letter-spacing:1.4px;color:#fff;opacity:.85}
.wx-alert-icon{width:30px;height:30px;border-radius:50%;background:#fff;color:#b51d1d;font:900 18px/30px system-ui;text-align:center;flex:none}
.wx-alert-extreme,.wx-alert-severe{background:linear-gradient(90deg,#9d1c1c,#c2392b)}
.wx-alert-moderate{background:linear-gradient(90deg,#9a4b10,#c96a1b)}
.wx-alert-minor,.wx-alert-unknown{background:linear-gradient(90deg,#6e5a12,#9a7f1c)}
.wx-alert-body{background:#141b22;padding:14px 16px;color:#d9e1e8}
.wx-alert-body pre{white-space:pre-wrap;font:14px/1.55 system-ui,sans-serif;margin:6px 0 12px}
.wx-alert-body h4{margin:8px 0 0;font:700 13px var(--mono,monospace);letter-spacing:1px;color:#ffb648}
.wx-alert-head{font-weight:700;color:#fff}
/* hero */
.wx-hero{position:relative;overflow:hidden;border-radius:28px;padding:clamp(20px,4vw,36px);display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 20px;margin-bottom:14px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.wx-hero>*{position:relative;z-index:1}
.wx-hero-glow{position:absolute!important;inset:0;z-index:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.22),transparent 45%)}
.wx-sky-clear{background:linear-gradient(160deg,#1f6fd1,#56a8ef 60%,#8cc8f7)}
.wx-sky-clear-night{background:linear-gradient(160deg,#08142f,#16285a 60%,#2a3f7c)}
.wx-sky-cloud{background:linear-gradient(160deg,#4f6378,#7b8fa4 60%,#9fb0c1)}
.wx-sky-cloud-night{background:linear-gradient(160deg,#151c27,#29364a 60%,#3b4a61)}
.wx-sky-rain{background:linear-gradient(160deg,#27394d,#46607b 60%,#61809e)}
.wx-sky-rain-night{background:linear-gradient(160deg,#0f1823,#213246 60%,#2f4762)}
.wx-sky-storm{background:linear-gradient(160deg,#1d1730,#3a2d5c 60%,#5a4a86)}
.wx-sky-snow{background:linear-gradient(160deg,#5c7894,#8ea9c4 60%,#bfd0e2)}
.wx-sky-snow-night{background:linear-gradient(160deg,#1b2638,#33465f 60%,#4c6382)}
.wx-sky-fog{background:linear-gradient(160deg,#5d6670,#848d97 60%,#a5adb5)}
.wx-hero-temp{font:200 clamp(84px,14vw,148px)/.9 system-ui,-apple-system,"Segoe UI Light","Segoe UI",sans-serif;color:#fff;letter-spacing:-4px;display:flex}
.wx-hero-temp span{font-size:.5em;margin-top:.12em;letter-spacing:0}
.wx-hero-desc{font:600 clamp(20px,3vw,28px)/1.2 system-ui,sans-serif;color:#fff;margin-top:6px}
.wx-hero-hilo{font:500 17px system-ui,sans-serif;color:rgba(255,255,255,.92);margin-top:4px}
.wx-hero-meta{font:12px/1.5 system-ui,sans-serif;color:rgba(255,255,255,.78);margin-top:10px}
.wx-hero-icon{justify-self:end;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.wx-hero-text{grid-column:1/-1;margin:6px 0 0;color:rgba(255,255,255,.92);font-size:15px;max-width:780px}
/* hourly */
.wx-hourly{margin-bottom:14px;padding-bottom:10px}
.wx-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#3a4855 transparent;padding-bottom:6px}
.wx-scroll:focus-visible{outline:2px solid #ffb648;outline-offset:2px;border-radius:10px}
.wx-hourly-inner{position:relative}
.wx-tline{display:block}
.wx-tline text{fill:#fff;font:600 12px system-ui,sans-serif}
.wx-hours{display:flex}
.wx-hour{position:relative;width:64px;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:4px;font-size:12px;color:#c3ced8}
.wx-h-time{font-weight:600;color:#fff}
.wx-h-pop{color:#7cc4ff;font-weight:700;font-size:11px}
.wx-h-wind{color:#9fb0bf;font-size:11px;display:flex;gap:2px;align-items:baseline}
.wx-h-wind small{font-size:9px}
.wx-daymark{position:absolute;left:-14px;top:-90px;font:700 10px var(--mono,monospace);letter-spacing:1px;color:#ffb648;background:#141b22;padding:2px 6px;border-radius:6px;border:1px solid rgba(255,182,72,.4)}
.wx-legend{display:flex;gap:16px;font-size:11px;color:#8798a8;margin-top:4px}
.wx-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.wx-dot-pop{background:#7cc4ff}.wx-dot-wind{background:#9fb0bf}
/* layout */
.wx-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:start}
.wx-col{display:grid;gap:14px}
@media (max-width:900px){.wx-grid{grid-template-columns:1fr}}
/* 7 days */
.wx-day{border-top:1px solid rgba(255,255,255,.07)}
.wx-day:first-of-type{border-top:0}
.wx-day summary{list-style:none;display:grid;grid-template-columns:62px 64px 38px 1fr 38px;align-items:center;gap:8px;padding:9px 0;cursor:pointer}
.wx-day summary::-webkit-details-marker{display:none}
.wx-d-name{font-weight:700;color:#fff}
.wx-d-icon{display:flex;flex-direction:column;align-items:center}
.wx-d-icon small{color:#7cc4ff;font-weight:700;font-size:11px;line-height:1}
.wx-d-lo{color:#9fb0bf;text-align:right}
.wx-d-hi{color:#fff;font-weight:700}
.wx-d-bar{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.1)}
.wx-d-bar i{position:absolute;top:0;bottom:0;border-radius:6px}
.wx-d-more{padding:2px 0 12px;color:#c3ced8;font-size:14px}
.wx-d-more p{margin:6px 0}
.wx-d-facts{color:#9fb0bf;font-size:13px}
/* radar */
.wx-radar h3{justify-content:space-between}
.wx-radar-time{color:#ffb648}
.wx-radar-map{height:clamp(300px,42vw,430px);border-radius:14px;overflow:hidden;background:#0a0f13}
.wx-radar-map .wx-basemap{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.6)}
.wx-radar-map .leaflet-control-attribution{font-size:9px;background:rgba(0,0,0,.55);color:#9fb0bf}
.wx-radar-map .leaflet-control-attribution a{color:#cfd8e0}
.wx-radar-bar{display:flex;align-items:center;gap:12px;margin-top:10px}
.wx-radar-steps{display:flex;gap:4px;flex:1}
.wx-radar-steps i{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.14);cursor:pointer}
.wx-radar-steps i.on{background:#ffb648}
.wx-radar-key{font-size:11px;color:#9fb0bf;display:flex;align-items:center;gap:6px;white-space:nowrap}
.wx-radar-key i{width:56px;height:8px;border-radius:4px;background:linear-gradient(90deg,#46d36a,#f5e642,#f39c2d,#e43a2a,#c331c9)}
/* tiles */
.wx-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wx-compass{display:flex;align-items:center;gap:14px}
.wx-compass svg{width:92px;height:92px;flex:none}
.wx-compass text{fill:#9fb0bf;font:600 10px system-ui,sans-serif}
.wx-compass strong{font:700 34px system-ui,sans-serif;color:#fff;display:block;line-height:1}
.wx-compass small{color:#9fb0bf}
.wx-arc{width:100%;max-width:420px;max-height:120px;display:block}
.wx-arc-times{display:flex;justify-content:space-between;max-width:420px;color:#ffd27a;font-weight:600;font-size:14px}
/* off-grid */
.wx-section{font:700 clamp(24px,3vw,34px)/1.1 var(--display,system-ui);color:#fff;margin:30px 0 14px;letter-spacing:.5px}
.wx-section span{color:#ffb648;font-size:.55em;letter-spacing:1.4px}
.wx-offgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.wx-og-solar,.wx-og-wind,.wx-og-moon{grid-column:span 2}
@media (max-width:1000px){.wx-offgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.wx-offgrid{grid-template-columns:1fr}.wx-og-solar,.wx-og-wind,.wx-og-moon{grid-column:auto}}
.wx-bars{display:flex;gap:8px;height:170px;align-items:flex-end}
.wx-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.wx-bar i{width:100%;max-width:46px;border-radius:10px 10px 4px 4px}
.wx-bar-good{background:linear-gradient(180deg,#ffd45a,#ff9a3d)}
.wx-bar-fair{background:linear-gradient(180deg,#e7c46a,#a98a3c)}
.wx-bar-poor{background:linear-gradient(180deg,#8796a6,#56626f)}
.wx-bar-v{font-weight:700;font-size:13px;color:#fff}
.wx-bar-l{font-size:12px;color:#c3ced8}
.wx-bar b{font:700 9px var(--mono,monospace);letter-spacing:1px}
.wx-rate-good{color:#ffc94a}.wx-rate-fair{color:#d9bb6a}.wx-rate-poor{color:#8f9daa}
.wx-minibars{display:flex;gap:6px;height:64px;align-items:flex-end;margin-top:12px}
.wx-minibars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.wx-minibars i{width:100%;max-width:26px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#7cc4ff,#2f7fd8)}
.wx-minibars span{font-size:10px;color:#9fb0bf}
.wx-inline input{width:80px;padding:3px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.3);color:#fff;font:600 14px system-ui}
.wx-frost{list-style:none;display:flex;gap:6px;padding:0;margin:14px 0 0}
.wx-frost li{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:12px;background:rgba(255,255,255,.05);font-size:11px;color:#9fb0bf}
.wx-frost li b{font-size:15px;color:#fff}
.wx-f-frost{background:rgba(124,196,255,.16)!important;outline:1px solid rgba(124,196,255,.45)}
.wx-f-freeze{background:rgba(90,140,255,.26)!important;outline:1px solid rgba(120,160,255,.6)}
.wx-f-hard{background:rgba(160,110,255,.3)!important;outline:1px solid rgba(180,140,255,.7)}
.wx-burn{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.wx-burn li{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:8px;font-size:14px;color:#c3ced8}
.wx-burn li span:first-child{font-weight:700;color:#fff}
.wx-burn b{font:700 10px var(--mono,monospace);letter-spacing:1px;padding:3px 8px;border-radius:999px}
.wx-burn-ok{background:rgba(70,211,106,.18);color:#7be39a}
.wx-burn-mid{background:rgba(255,182,72,.18);color:#ffc970}
.wx-burn-bad{background:rgba(228,58,42,.2);color:#ff8f82}
.wx-moon{display:flex;align-items:center;gap:16px}
.wx-moon .wx-big{font-size:24px}
.wx-source{margin:24px 0 0;font-size:12px;color:#7d8d9c;line-height:1.6}
/* loading */
.wx-skeleton{display:grid;gap:14px}
.wx-sk{height:160px;border-radius:20px;background:linear-gradient(90deg,#141b22 25%,#1c2630 50%,#141b22 75%);background-size:200% 100%;animation:wxShine 1.4s linear infinite}
.wx-sk-hero{height:300px;border-radius:28px}
.wx-sk-row{height:120px}
@keyframes wxShine{to{background-position:-200% 0}}
/* icon motion (off with Reduce Motion) */
.wx-anim .wx-rays{transform-origin:center;transform-box:fill-box;animation:wxSpin 18s linear infinite}
.wx-anim .wx-cloud{animation:wxDrift 6s ease-in-out infinite alternate}
.wx-anim .wx-drops line{animation:wxRain 1.1s linear infinite}
.wx-anim .wx-drops line:nth-child(2){animation-delay:.35s}.wx-anim .wx-drops line:nth-child(3){animation-delay:.7s}
.wx-anim .wx-flakes circle{animation:wxSnow 2.4s ease-in-out infinite}
.wx-anim .wx-flakes circle:nth-child(2){animation-delay:.8s}.wx-anim .wx-flakes circle:nth-child(3){animation-delay:1.6s}
.wx-anim .wx-bolt{animation:wxFlash 3s steps(1) infinite}
.wx-anim .wx-fog line{animation:wxDrift 5s ease-in-out infinite alternate}
@keyframes wxSpin{to{transform:rotate(360deg)}}
@keyframes wxDrift{from{transform:translateX(-1.5px)}to{transform:translateX(1.5px)}}
@keyframes wxRain{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(5px);opacity:0}}
@keyframes wxSnow{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(6px);opacity:0}}
@keyframes wxFlash{0%,88%{opacity:1}90%{opacity:.2}92%{opacity:1}94%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.wx-sk{animation:none}}
@media (max-width:560px){.wx-hero{grid-template-columns:1fr}.wx-hero-icon{position:absolute!important;right:10px;top:10px;opacity:.9}.wx-hero-icon svg{width:110px;height:110px}.wx-tiles{grid-template-columns:1fr}.wx-day summary{grid-template-columns:62px 44px 34px 1fr 34px;gap:6px}.wx-d-name{font-size:15px}}

/* App mode (weather.html?app=1): only the weather, full width, no site header, menus, ads or footer. */
html.wx-app,html.wx-app body{background:#0d1216}
html.wx-app body>*:not(main){display:none!important}
html.wx-app main{padding:0!important;margin:0!important;max-width:none!important}
html.wx-app main>*:not(.wx-page){display:none!important}
html.wx-app .wx-page{margin:0;border-radius:0;padding:12px 12px 28px}
html.wx-app .wx-source{font-size:11px}