:root{color-scheme:dark;--bg:#101217;--page:#090a0d;--text:#ebedf2;--secondary:#a9b0bc;--subtle:#929ba9;--dim:#777f8d;--line:#323640;--field:#1c2028;--border:#454b57;--blue:#59b5f4;--focus:#ABA9ED;--button:#262c37;--white-cloud-shadow:#555d6a;--period-morning:#62D4BE;--period-daytime:#EAC666;--period-evening:#F28A9C;--period-night:#ABA9ED;--alert-yellow:#E6BC48;--alert-orange:#F39B62;--alert-red:#F27474;--alert-grey:#B3BBC6}
:root[data-theme="light"]{color-scheme:light;--bg:#fff;--page:#eef0f4;--text:#222833;--secondary:#55616f;--subtle:#697786;--dim:#737d88;--line:#dce1e7;--field:#f2f4f8;--border:#bac3cf;--blue:#167cbf;--focus:#726dcc;--button:#e8ebf1;--white-cloud-shadow:#919aa8;--period-morning:#087B6B;--period-daytime:#87650D;--period-evening:#B43B59;--period-night:#6259AE;--alert-yellow:#826000;--alert-orange:#A94A14;--alert-red:#AF3038;--alert-grey:#54606F}
*{box-sizing:border-box}
html{min-height:100%;background:var(--page);scroll-behavior:smooth}
body{min-height:100vh;min-height:100dvh;margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--page);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,.hourly:focus-visible,.days-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a{color:var(--secondary)}
[hidden]{display:none!important}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.app{width:100%;max-width:460px;margin:0 auto;min-height:100dvh;padding:19px 16px 30px;background:var(--bg)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 18px;gap:12px}
.topbar-text{min-width:0}
h1,h2,p{margin:0}
.topbar h1{font-size:19px;line-height:1.3;font-weight:650;letter-spacing:-.5px;overflow-wrap:anywhere}
.topbar p{font-size:11px;color:var(--subtle);margin-top:3px}
.icon-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:none;border-radius:10px;background:transparent;color:var(--secondary)}
.icon-button:hover,.back-button:hover{background:var(--field)}
#open-settings{position:relative}
.settings-status-dot{position:absolute;top:5px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--alert-orange);box-shadow:0 0 0 2px var(--bg)}
.icon-button svg{height:21px;width:21px}
.tier{padding:20px 2px 19px;border-top:1px solid var(--line)}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:17px}
.tier h2{font-size:14px;font-weight:650;letter-spacing:-.15px}
.tier-note{font-size:10px;color:var(--subtle);white-space:nowrap}

.official-alerts{padding:3px 4px 17px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.official-alert-details{--alert-color:var(--alert-grey)}
.alert-yellow{--alert-color:var(--alert-yellow)}
.alert-orange{--alert-color:var(--alert-orange)}
.alert-red{--alert-color:var(--alert-red)}
.alert-grey{--alert-color:var(--alert-grey)}
.official-alert-details summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;outline-offset:4px}
.official-alert-details summary::-webkit-details-marker{display:none}
.official-alert-symbol{flex:0 0 22px;width:22px;height:22px;color:var(--alert-color)}
.official-alert-title{flex:1;min-width:0;display:grid;gap:3px}
.official-alert-title strong{color:var(--alert-color);font-size:13px;font-weight:650;line-height:1.4}
.official-alert-title small{color:var(--subtle);font-size:10px}
.official-alert-chevron{color:var(--subtle);font-size:21px;line-height:1}
.official-alert-details[open] .official-alert-chevron{transform:rotate(90deg)}
.official-alert-items{display:grid;gap:15px;padding:15px 0 1px 32px}
.official-alert-item{border-left:2px solid var(--alert-color);padding-left:10px}
.official-alert-item h3{margin:0 0 5px;color:var(--alert-color);font-size:12px}
.official-alert-area,.official-alert-timing{font-size:11px;color:var(--secondary);line-height:1.45;margin:4px 0}
.official-alert-description{font-size:11px;color:var(--text);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}
.official-alert-items>a,.official-alert-unavailable a{color:var(--secondary);font-size:11px;text-underline-offset:3px}
.official-alert-unavailable{font-size:11px;line-height:1.5;color:var(--subtle)}
.alert-marker{display:inline-block;margin-left:3px;line-height:1;color:var(--alert-color);font-size:13px;font-weight:800}

.hourly{display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px;min-height:108px}
.hourly::-webkit-scrollbar{display:none}
.hour-cell{flex:0 0 66px;scroll-snap-align:start;text-align:center}
.forecast-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;text-align:center;min-height:98px}
.days-scroll{display:flex;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:6px;min-height:108px}
.days-scroll::-webkit-scrollbar{display:none}
.days-scroll .daycell{flex:0 0 calc((100% - 12px) / 4);scroll-snap-align:start}
.days-scroll .placeholder{flex:1}
.forecast-cell{min-width:0}
.time{font-size:11px;color:var(--secondary);white-space:nowrap;margin-bottom:13px}
.time.period-morning{color:var(--period-morning)}
.time.period-daytime{color:var(--period-daytime)}
.time.period-evening{color:var(--period-evening)}
.time.period-night{color:var(--period-night)}
.wx{width:30px;height:30px;display:block;margin:0 auto 10px;overflow:visible}
.temp{font-size:16px;font-weight:570;letter-spacing:-.25px}
.rainprob{font-size:11px;color:var(--blue);margin-top:7px;min-height:15px}
.rainprob:empty{display:none}
.details{overflow-wrap:anywhere;font-size:10px;color:var(--subtle);line-height:1.5;margin-top:6px}
.details:empty{display:none}
.hi-lo{display:flex;gap:5px;align-items:center;justify-content:center;font-size:13px;white-space:nowrap}
.hi-lo .lo{color:var(--subtle)}
.daycell .wx{width:32px;height:32px;margin-bottom:10px}
.breakdown .wx{width:31px;height:31px}
.last-tier{padding-bottom:10px}
.placeholder{font-size:12px;color:var(--subtle);padding:26px 5px;grid-column:1/-1}
.notice{font-size:12px;line-height:1.5;padding:10px 12px;border:1px solid var(--border);border-radius:9px;margin:3px 0 12px;color:var(--secondary)}
.settings-view{padding:4px 2px 25px}
.settings-header{display:flex;align-items:center;gap:12px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.settings-header h1{font-size:20px;font-weight:650}
.diagnostics-group{padding-top:20px}
.diagnostics-sources{display:grid;gap:0}
.diagnostics-source{border-bottom:1px solid var(--line);padding:11px 0}
.diagnostics-source:last-child{border-bottom:0}
.diagnostics-source-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px}
.diagnostics-source-head strong{color:var(--text);font-weight:600}
.diagnostics-state{color:var(--secondary);font-size:11px}
.diagnostics-source.issue .diagnostics-state{color:var(--alert-orange)}
.diagnostics-source p{margin:6px 0 0;color:var(--subtle);font-size:11px;line-height:1.5}
.diagnostics-source .diagnostics-advice{color:var(--secondary)}
.diagnostics-source .diagnostics-checked{font-size:10px;color:var(--dim)}
.diagnostics-note{margin-top:11px;font-size:10px;line-height:1.5;color:var(--dim)}
.diagnostics-group .secondary-button{margin-top:12px}
.back-button{width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:25px}
.settings-group{padding:22px 2px;border-bottom:1px solid var(--line)}
.settings-group h2{font-size:14px;font-weight:650;margin-bottom:10px}
.setting-help{font-size:12px;color:var(--subtle);line-height:1.5;margin:8px 0 13px}
.location-form{display:flex;gap:8px;margin-bottom:10px}
.location-form input{width:100%;min-width:0;border:1px solid var(--border);border-radius:8px;padding:11px;background:var(--field);color:var(--text);font-size:14px}
.location-form button,.secondary-button{background:var(--button);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px}
.secondary-button{width:100%;margin-top:8px}
.location-results{display:grid;gap:5px}
.location-results button{padding:11px;text-align:left;border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:8px;font-size:13px}
.location-results button:hover{border-color:var(--focus)}
.location-results p{font-size:12px;color:var(--secondary);padding:5px}
.setting-line{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:49px;border-bottom:1px solid var(--line);font-size:13px}
.setting-line:last-of-type{border-bottom:none}
.setting-line select{padding:7px 10px;max-width:54%;border:1px solid var(--border);border-radius:7px;color:var(--text);background:var(--field)}
.setting-line input[type=checkbox]{appearance:none;width:38px;height:22px;border-radius:20px;background:var(--border);position:relative;flex-shrink:0;transition:background .12s}
.setting-line input[type=checkbox]::after{content:"";width:16px;height:16px;border-radius:50%;position:absolute;left:3px;top:3px;background:#fff;transition:transform .12s}
.setting-line input[type=checkbox]:checked{background:#6974ce}
.setting-line input[type=checkbox]:checked::after{transform:translateX(16px)}
.input-error{font-size:12px;color:#e69595;margin-top:8px}
.icon-legend{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;line-height:1.4}
.icon-legend tr{border-bottom:1px solid var(--line)}
.icon-legend tr:last-child{border-bottom:0}
.icon-legend td,.icon-legend th{padding:9px 4px;vertical-align:middle}
.icon-legend .legend-glyph{width:40px;padding-left:1px}
.legend-icon{display:block;width:27px;height:27px;overflow:visible}
.icon-legend th{width:37%;font-weight:550;color:var(--text);text-align:left}
.icon-legend td:last-child{color:var(--secondary)}
.refresh-button{margin-top:22px}
.settings-meta{display:grid;gap:6px;margin-top:22px;text-align:center;font-size:11px;color:var(--dim)}
.settings-meta a{color:var(--secondary);text-underline-offset:3px}
.settings-bottom{text-align:center;margin-top:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:410px){.app{padding-left:21px;padding-right:21px}.hour-cell{flex-basis:73px}}
@media(min-width:600px){.app{min-height:calc(100dvh - 40px);margin:20px auto;border:1px solid var(--line);border-radius:19px}.topbar{padding-top:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}