.weather-current{text-align:center;padding-top:28px;padding-bottom:28px}.weather-current h1{font-size:27px;margin-bottom:2px}.weather-location{font-size:11px!important;color:#999!important}.weather-temp{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:96px;font-weight:200;letter-spacing:-7px;line-height:1.2;margin:8px 0}.weather-temp span{font-size:37px;letter-spacing:-2px;vertical-align:top;display:inline-block;margin-top:19px}.weather-condition{font-size:16px!important;color:#333!important}.weather-range{margin-top:8px!important;font-size:13px!important}.weather-range span{color:#aaa;margin:0 6px 0 15px}.weather-range span:first-child{margin-left:0}.weather-label{font-size:12px!important;color:#888!important}.weather-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;gap:8px}.weather-heading h2{margin:0;font-size:15px}.weather-switch{display:flex;border-radius:20px;background:#f1f1f1;padding:3px;gap:2px}.weather-switch button{background:none;color:#888;font-size:11px;padding:5px 10px;border-radius:16px}.weather-switch button[aria-pressed=true]{background:white;color:#333;box-shadow:0 1px 4px #0001}.weather-hours{display:flex;gap:22px;overflow-x:auto;padding:1px 0 8px;scrollbar-width:thin;scrollbar-color:#ddd transparent}.weather-hour{flex:0 0 38px;text-align:center;font-size:12px;color:#777}.weather-icon{width:30px;height:30px;display:block;margin:13px auto 9px;color:#666}.weather-value{font-size:19px;color:#333;margin-top:8px;white-space:nowrap}.weather-prob{font-size:10px;color:#999;min-height:16px}.weather-day{display:grid;grid-template-columns:38px 34px 30px 1fr 30px;gap:10px;align-items:center;min-height:51px;border-top:1px solid #eee;font-size:13px}.weather-day .weather-icon{margin:0;width:25px}.weather-low{color:#aaa;text-align:right}.weather-high{text-align:right}.weather-track{height:4px;background:#f1f1f1;border-radius:4px;position:relative}.weather-track i{position:absolute;height:4px;background:linear-gradient(90deg,#bbb,#555);border-radius:4px}.weather-details{display:grid;grid-template-columns:1fr 1fr;gap:22px}.weather-detail strong{display:block;font-size:25px;font-weight:400;margin-top:8px}.weather-detail small{font-size:12px;color:#999}.weather-footer{text-align:center;font-size:10px;color:#777;line-height:2;padding:0 0 8px}.weather-footer a{color:inherit}.weather-footer button{color:#666;background:none;font-size:11px;text-decoration:underline;text-underline-offset:3px}.weather-message{padding:35px 0;text-align:center;color:#888;font-size:13px}.weather-demo-label{font-size:10px;color:#999;margin-bottom:15px;letter-spacing:2px}

/* Weather surfaces keep the shared card dimensions and navigation. */
body[data-weather]{--sky-top:#638db0;--sky-bottom:#c2d9dd;--sky-glow:#fff0bb;--weather-ink:#173148;--weather-muted:#425e71;color:var(--weather-ink);background:var(--sky-bottom)}
body[data-weather="cloudy"]{--sky-top:#657f94;--sky-bottom:#b5c7cf;--sky-glow:#e5ecdf}
body[data-weather="rain"]{--sky-top:#405b78;--sky-bottom:#8faebd;--sky-glow:#bfccd2}
body[data-weather="snow"]{--sky-top:#8ca7bf;--sky-bottom:#dbe5e9;--sky-glow:#fff}
body[data-weather="night"],body[data-weather="storm"]{--sky-top:#192b50;--sky-bottom:#526d92;--sky-glow:#91a2ba;--weather-ink:#fff;--weather-muted:#e0e9f4}
body[data-weather] .wallpaper{background:radial-gradient(ellipse at 85% 10%,color-mix(in srgb,var(--sky-glow) 65%,transparent),transparent 55%),linear-gradient(160deg,var(--sky-top),var(--sky-bottom));}
body[data-weather] .wallpaper::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 15% 30%,#ffffff2b,transparent 42%),radial-gradient(ellipse at 95% 70%,#ffffff38,transparent 40%)}
body[data-weather="rain"] .wallpaper::after{background:repeating-linear-gradient(105deg,transparent 0 38px,#ffffff0b 39px 40px,transparent 41px 80px)}
body[data-weather] .card{min-width:0;background:#ffffff29;color:var(--weather-ink);border:1px solid #ffffff38;box-shadow:0 8px 32px #172e4810,inset 0 1px 0 #ffffff20;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
body[data-weather] .card p{color:var(--weather-muted)!important}.weather-current{padding:28px 24px}.weather-current .weather-condition{color:var(--weather-ink)!important}.weather-temp{color:var(--weather-ink)}.weather-range span{color:var(--weather-muted)}
.weather-heading{justify-content:center;margin-bottom:20px}.weather-switch{background:#1b3c5818;padding:4px;gap:4px}.weather-switch button{display:grid;place-items:center;width:48px;height:32px;padding:5px;color:var(--weather-muted)}.weather-switch button svg{width:22px;height:22px}.weather-switch button[aria-pressed=true]{background:#ffffffad;color:#254c6c;box-shadow:0 2px 6px #183a5310}.weather-switch button:focus-visible{outline:2px solid #fff}
.weather-hours{width:100%;max-width:100%;gap:18px;scrollbar-color:#ffffff55 transparent}.weather-hour{flex:0 0 42px;min-width:0;color:var(--weather-muted)}.weather-value{font-size:19px;color:var(--weather-ink);height:40px;line-height:23px;white-space:normal;font-variant-numeric:tabular-nums}.weather-value small{display:block;font-size:9px;line-height:13px;color:var(--weather-muted)}.weather-prob{color:var(--weather-muted)}.weather-icon{color:#e9f3fa}.weather-icon.sun{color:#ffe19a;fill:#ffdb7c33}.weather-icon.rain{color:#d8f3ff;fill:#e5f4fa38}.weather-icon.cloud{color:#f4f8fb;fill:#ffffff40}
.weather-day{color:var(--weather-ink);border-color:#ffffff26}.weather-day:first-child{border-top:0}.weather-low{color:var(--weather-muted)}.weather-track{background:#24435d18}.weather-track i{background:linear-gradient(90deg,#79bad3,#f1ce91)}
.weather-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.weather-detail{padding:22px 20px 24px;min-width:0}.weather-detail strong{color:var(--weather-ink);font-size:28px;white-space:nowrap}.weather-detail small{color:var(--weather-muted)}.weather-footer{margin-top:-12px;color:var(--weather-muted);font-size:9px;opacity:.8}.weather-footer a{text-decoration:none}.weather-message{color:var(--weather-muted)}
@media(max-width:360px){.weather-hour{flex-basis:38px}.weather-hours{gap:16px}.weather-detail{padding:20px 16px}.weather-day{gap:7px;grid-template-columns:32px 28px 28px 1fr 28px}}

.weather-detail .weather-label{display:flex;align-items:center;gap:7px;white-space:nowrap}.weather-detail-icon{display:inline-flex;flex:none;width:16px;height:18px;align-items:center}.weather-detail-icon svg{width:16px;height:18px}.weather-detail-icon.thermo{color:#a95b45}.weather-detail-icon.humidity{color:#347492}.weather-detail-icon.wind{color:#486e80}.weather-detail-icon.sunset{color:#a36235}body[data-weather="night"] .weather-detail-icon,body[data-weather="storm"] .weather-detail-icon{color:#d7e8f7}

.weather-detail{display:grid;grid-template-columns:minmax(0,1fr) 26px;column-gap:6px;align-items:center}.weather-detail .weather-label{grid-column:1;grid-row:1;display:block;line-height:20px}.weather-detail strong{grid-column:1;grid-row:2;margin-top:8px;letter-spacing:-.7px}.weather-detail-icon{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;width:26px;height:30px;opacity:.85}.weather-detail-icon svg{width:26px;height:30px}
.weather-credit{align-self:center;text-align:center;padding:10px 15px;border-radius:18px;font-size:9px;line-height:18px;color:var(--weather-muted);max-width:100%}.weather-credit a{color:inherit;text-decoration:none;text-underline-offset:3px}.weather-credit a:hover{text-decoration:underline}
.content.entering .cards:has(.weather-loading){animation:none;transform:none}
.weather-loading{position:fixed;inset:0;min-height:100dvh;display:grid;place-items:center;pointer-events:none}
@supports not (backdrop-filter:blur(1px)){body[data-weather] .card{background:#dce5eb}}.weather-loader{width:64px;height:56px;overflow:visible}.loader-sun{color:#f7d995;transform-origin:39px 19px;animation:weather-sun-turn 12s linear infinite}.loader-cloud{color:#eff8ff;fill:#ffffff28;animation:weather-cloud-drift 2.5s ease-in-out infinite}
@keyframes weather-sun-turn{to{transform:rotate(360deg)}}@keyframes weather-cloud-drift{0%,100%{transform:translateX(-2px);opacity:.7}50%{transform:translateX(2px);opacity:1}}
@media(prefers-reduced-motion:reduce){.weather-loader *{animation:none!important}}
@media(max-width:360px){.weather-detail strong{font-size:25px}.weather-detail{column-gap:4px;grid-template-columns:minmax(0,1fr) 24px}.weather-detail-icon,.weather-detail-icon svg{width:24px}}

/* Only hourly values stack their units; other readings keep inline units. */
.weather-detail strong small{display:inline;margin-left:3px;font-size:12px;letter-spacing:0}
.weather-low small,.weather-high small{display:inline;font-size:9px;color:var(--weather-muted)}