/* Matte surfaces keep the map from washing out the forecast text. */
:root{--muted:#aab2be;--side-bg:#17191d}
.side{background:var(--side-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
.side .stamp,.side .fine{color:#aab2be}
.panel h2{font-size:12px;font-weight:500;letter-spacing:.12em}
.head h1{font-size:26px;font-weight:450;line-height:1.2}
.head .sub{margin-top:5px;line-height:1.5}
.head .now{margin-top:12px}
.head .big{font-weight:300}
.chiphead{align-items:center;gap:12px;margin-bottom:12px}
.chiphead .home{min-height:36px;display:inline-flex;align-items:center}
.chiphead .stamp,.eyebrow .stamp{font-size:11.5px;line-height:1.5}
.chips button{min-height:42px}
.chips button[aria-pressed=true]{background:#393323;border-color:#bd9c42}
.panel .links{display:flex;flex-wrap:wrap;gap:8px 20px;line-height:1.6}
.stats{gap:16px 20px}
.stat dt{font-size:11px;letter-spacing:.08em}
.stat dd{font-variant-numeric:tabular-nums}
/* A flat control strip: no shadow box, and black text on the colour map. */
.foot,body.colour-basemap .foot{background:#17191d;border-top:1px solid #39404a;box-shadow:none;padding-top:14px;gap:9px}
.legend{font-size:12px;color:#d7dde6;gap:10px}
.legend .bar i{height:8px;width:30px}
.legend .ticks span{width:30px;line-height:1.5}
#status{font-size:12px;line-height:1.5;color:#b8c1cf;overflow-wrap:anywhere}
#status[data-state=error]{color:#f0c47c}
.tools{gap:8px}
.tools button,.tools .seg button{min-height:38px}
.tools button:disabled,.tools input:disabled{opacity:.4;cursor:not-allowed}
#radar-retry{width:auto;padding:0 12px;font-size:12px}
#radar-retry[hidden],body.wind #radar-retry{display:none}
body.colour-basemap .foot{background:#f3f5f6;border-top-color:#c3cbd2;--ink:#16232e;--muted:#41505d;--accent:#876b08;--ring:#667785;--sel-fill:#f3e7b8}
body.colour-basemap .foot :is(.legend,#status,.unit){color:#243746}
body.colour-basemap #status[data-state=error]{color:#70470a}
body.colour-basemap .foot :is(.tools button,.tools .seg,#wcolour){background:#fff;color:#16232e;border-color:#a7b2bc}
body.colour-basemap .foot .tools button[aria-pressed=true]{background:#f3e7b8;border-color:#876b08;box-shadow:inset 0 0 0 1px #876b08}
body.colour-basemap .foot .tools button:hover{background:#e3e8ec}
body.colour-basemap .foot .tools .sep{background:#a7b2bc}
body.colour-basemap .foot input{accent-color:#876b08}
/* Loading and unavailable views stay useful without pretending values exist. */
.weather-state,.outage{box-sizing:border-box;padding:24px;border:1px solid #404752;border-radius:8px;background:#1d2025}
.weather-state h1{margin:0 0 12px;font-size:26px;font-weight:450}
.weather-state p,.outage p{margin:8px 0 18px;max-width:52ch;color:#bac2ce;font-size:14px;line-height:1.65}
.weather-state .state-label{display:block;color:#edc775;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.weather-state button,.outage button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid #987b38;border-radius:6px;background:#373022;color:#f5d579;font:600 13px/1.4 system-ui;cursor:pointer}
.weather-state button:focus-visible,.outage button:focus-visible{outline:2px solid #f5cd62;outline-offset:3px}
.weather-state button:disabled{opacity:.6;cursor:wait}
.weather-state[aria-busy=true]{border-style:dashed}
.outage h4{font-size:17px;font-weight:500}
.outage p{margin-bottom:0}
@media(min-width:1800px){.side{padding:36px 48px}.panels{gap:32px}}
@media(max-width:900px){
 .foot,body.colour-basemap .foot{padding:12px 16px}
 .tools button,.tools .seg button{min-height:44px}
 .hours:not(details){grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
 .chiphead{align-items:flex-start}
 .weather-state,.outage{padding:20px}
}
@media(max-width:360px){.legend{font-size:11px;gap:7px}.legend .bar i,.legend .ticks span{width:25px}.head .big{font-size:48px}.head .big small{display:block;margin:8px 0;font-size:14px}}