html body { flex-direction:column; }
html body > header { display:flex; width:100%; flex:0 0 auto; border-right:0; }
html body > main { min-height:0; height:auto; flex:1; }
html body > header nav { width:auto; flex:none; flex-direction:row; margin-top:0; }
html body > header .tab { width:auto; }
html body > header #station-name { display:none; }
html body > header #btn-settings { flex:none; }
html body > header .header-overflow-menu { top:calc(100% + 8px); bottom:auto; right:0; left:auto; }
/* Observatory: eight readings above a compact forecast, HookEcho, and local context. */
html body > header { min-height:78px; height:auto; padding:16px 30px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:none; gap:16px; }
html header #brand { width:44px; height:44px; border-radius:7px; box-shadow:none; }
html header h1 { color:var(--text); font:600 25px var(--num); text-transform:none; letter-spacing:.2px; }
html header nav { margin-left:auto; }
html header .tab { border-radius:8px; font-size:13px; }
#desk.active { display:block; overflow:auto; padding:24px max(24px,calc((100vw - 1680px)/2)); }
#desk #observatory-heading { display:flex; align-items:center; gap:24px; margin-bottom:22px; min-height:58px; }
#desk .observatory-place { min-width:150px; max-width:260px; }
#desk #hero-place { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 9px; max-width:none; }
#desk #clock-date { display:block; font:11px sans-serif; color:var(--muted); }
#desk .observatory-clock { padding-left:24px; border-left:1px solid var(--line); flex-shrink:0; }
#desk .observatory-clock > span { font-size:8px; letter-spacing:1.5px; color:var(--muted); }
#desk #hero-clock { position:static; margin:3px 0 0; display:block; padding:0; }
#desk #clock-time { font:34px/1.15 var(--num); color:var(--accent); }
#desk #hero-alerts { order:0; flex:1; min-width:0; margin:0; padding:12px 16px; min-height:56px; gap:12px; border-radius:6px; }
#desk #hero-alerts[data-state="clear"] { display:none; }
#desk #hero-alerts .alert-heading { display:block; min-width:0; }
#desk #hero-alerts .alert-heading strong { font-size:9px; letter-spacing:1px; }
#desk #hero-alerts .alert-summary { display:block; font-size:12px; margin-top:4px; }
#desk #hero-alerts button { white-space:nowrap; font-size:10px; }
#desk #desk-stack { display:block; max-width:none; }
#desk #gauges { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:0; margin:0 0 12px; padding:18px 8px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
#desk #gauges > .gauge { display:block!important; min-height:0; padding:0 17px; border:0; border-right:1px solid var(--line); border-radius:0; background:none; }
#desk #gauges > .gauge:last-child { border:0; }
#desk #gauges h3 { font-size:10px; margin:0 0 12px; color:var(--muted); }
#desk #gauges .gwrap { display:block; width:auto; height:auto; min-height:0; }
#desk #gauges .gwrap > span[aria-hidden] { display:none; }
#desk #gauges .ginner { position:static; display:flex; flex-wrap:wrap; flex-direction:row; align-items:baseline; justify-content:flex-start; transform:none; gap:3px; text-align:left; }
#desk #gauges .ginner b { font:30px/1 var(--num); color:var(--text); }
#desk #gauges .ginner small { font-size:9px; }
#desk #gauges .ginner > span { width:100%; margin-top:7px; font-size:9px; line-height:1.5; }
#desk #observatory-grid { display:grid; grid-template-columns:240px minmax(0,1fr) 280px; gap:12px; align-items:stretch; }
#desk #observatory-left { min-width:0; display:flex; flex-direction:column; gap:12px; }
#desk #hero { order:0; display:flex; flex-direction:column; min-height:0; padding:16px; border-radius:8px; gap:9px; background:var(--panel); }
#desk :is(#hero-sky,#hero-orb,#hero .hero-top,#hero-summary,#hero-normal,#desk-details,#hero .weather-more) { display:none!important; }
#desk .observatory-current-label { font-size:9px; letter-spacing:1.4px; }
#desk .hero-now { display:flex; align-items:center; gap:7px; flex-wrap:wrap; order:0; }
#desk #hero-temp { order:-1; font:54px/1 var(--num); color:var(--accent); letter-spacing:-1px; }
#desk #hero-icon,#desk #hero-icon :is(img,svg) { width:44px; height:44px; }
#desk .hero-now > div:last-child { flex:1; min-width:80px; }
#desk #hero-cond { font-size:12px; }
#desk #hero-hilo,#desk #hero-feels { font-size:10px; line-height:1.4; margin:0; }
#desk #observatory-forecast { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; min-width:0; }
#desk #observatory-forecast h2 { font-size:16px; margin:0 0 8px; }
#desk .observatory-note { color:var(--muted); font-size:9px; line-height:1.5; margin:0 0 10px; }
#desk #daycards { display:flex; flex-direction:column; gap:0; }
#desk #daycards > .daycard { display:grid; grid-template-columns:57px minmax(0,1fr); padding:10px 0; min-height:44px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
#desk #daycards > .daycard:last-child { border:0; }
#desk #daycards .dc-head { margin:0; display:flex; align-items:center; font-size:11px; }
#desk #daycards :is(.dc-date,.dc-cond,.temp-arc,.dc-body > svg) { display:none; }
#desk #daycards .dc-body { display:block; min-height:0; height:auto; }
#desk #daycards .dc-mid { position:static; display:grid; grid-template-columns:25px 1fr 27px; align-items:center; gap:4px; }
#desk #daycards .dc-icon :is(img,svg) { width:25px; height:25px; }
#desk #daycards .dc-temp { display:flex; align-items:baseline; justify-content:end; gap:3px; }
#desk #daycards .dc-temp b { font:16px var(--num); }
#desk #daycards .dc-temp span { font-size:10px; color:var(--muted); }
#desk #daycards .dc-pop { margin:0; font-size:9px; text-align:right; color:var(--accent); }
#desk #observatory-radar { position:relative; overflow:hidden; min-height:650px; border:1px solid var(--line); border-radius:8px; background:#091821; }
#desk .observatory-radar-heading { position:absolute; left:18px; top:18px; z-index:3; color:#f3f7fa; pointer-events:none; text-shadow:0 1px 6px #000; }
#desk .observatory-radar-heading > span { font-size:9px; letter-spacing:1.2px; }
#desk #desk-radar { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none; border:0; border-radius:0; }
#desk #desk-radar[hidden] { display:none!important; }
#desk #desk-radar-frame,#desk #desk-radar-still { width:100%; height:100%; object-fit:cover; }
#desk #desk-radar-caption { bottom:10px; font-size:10px; }
#desk .observatory-radar-off { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:25px; gap:12px; text-align:center; color:#b6c7d5; }
#desk .observatory-radar-off span { max-width:260px; font-size:12px; line-height:1.6; }
#desk #observatory-signals { min-width:0; padding:20px 17px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
#desk #observatory-signals > h2 { font-size:16px; margin:0 0 16px; }
#desk #observatory-signals > .card { padding:15px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; }
#desk #observatory-signals .card h2 { font-size:12px; margin:0 0 12px; }
#desk #observatory-signals .kv-rows { font-size:10px; }
#desk #observatory-signals .kv-rows > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; }
#desk #observatory-signals .kv-rows > div > :last-child { text-align:right; }
#desk #observatory-local { padding:12px 0; }
#desk #observatory-signals #aqi-val { display:inline; font:26px var(--num); }
#desk #aqi-detail { display:none; }
#desk #observatory-signals #aqi-label { font-size:10px; margin-top:5px; }
#desk .observatory-moon { margin-top:12px; font-size:11px; line-height:1.6; color:var(--accent); }
#desk #hero-moonset { color:var(--muted); font-size:9px; }
#desk #hero-live { display:block; background:none; border:0; padding:0; font-size:9px; }
#desk #hero-batt { font-size:10px; }
@media(max-width:1100px){#desk #observatory-grid{grid-template-columns:225px minmax(0,1fr)}#desk #observatory-signals{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#desk #observatory-signals>h2{grid-column:1/-1}#desk #gauges>.gauge{padding:0 9px}#desk #gauges .ginner b{font-size:25px}#desk #observatory-heading{flex-wrap:wrap}#desk #hero-alerts{flex-basis:100%}}
@media(max-width:700px){html body>header{padding:12px 16px;gap:10px;flex-wrap:wrap}html header h1{display:block;font-size:22px}html header nav{order:3;width:100%;margin:0;justify-content:space-between}html header #brand{width:38px;height:38px}#desk.active{padding:20px 16px}#desk #observatory-heading{gap:16px}#desk #observatory-heading .observatory-place{flex:1;min-width:0}#desk #observatory-clock{padding-left:12px}#desk #clock-time{font-size:28px}#desk #gauges{grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 8px;gap:24px 0}#desk #gauges>.gauge{border:0;padding:0 10px}#desk #observatory-grid{display:flex;flex-direction:column}#desk #observatory-radar{min-height:420px}#desk #observatory-signals{display:block}#desk #observatory-signals>.card{margin-top:12px}#desk #daycards>.daycard{grid-template-columns:80px 1fr}#desk #daycards .dc-mid{grid-template-columns:35px 1fr 45px}#desk #daycards .dc-temp b{font-size:18px}#desk #hero-alerts{gap:8px}#desk #hero-alerts button{font-size:10px;padding:7px}#desk #clock-date{font-size:10px}}

#desk #gauges .ginner, #desk #gauges .gwrap:has(svg.therm) .ginner { margin:0; padding:0; align-items:baseline; text-align:left; }
#desk #daycards { border:0; border-radius:0; }
#desk #daycards .dc-icon, #desk #daycards .dc-pop { grid-row:auto; grid-column:auto; }
#desk #daycards > .daycard:first-child { padding:10px 0; border:0; border-bottom:1px solid var(--line); }
#desk #hero-icon { order:0; margin:0; }
#desk:not(.desk-expanded) :is(#hero-moon,#hero-moonset,#hero-batt) { display:block; }
#desk #observatory-signals .card { min-height:0; height:auto; }
#desk #daycards > .daycard { cursor:pointer; text-align:left; color:var(--text); width:100%; font:inherit; }
#forecast-dialog { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; max-width:min(420px,90vw); }
#forecast-dialog::backdrop { background:#0009; }
#forecast-dialog p { line-height:1.7; }
#desk #observatory-signals .kv-rows > div { font-size:11px; line-height:1.4; padding:3px 0; }
#desk #observatory-signals .kv-rows span { font-size:inherit; line-height:inherit; }
#desk #observatory-signals > .card { padding:12px 0; }
#desk #observatory-signals [data-panel="alerts"] > summary { padding:0; }
#desk #observatory-signals [data-panel="alerts"] h2 { display:inline; }
#desk #observatory-signals [data-panel="alerts"] #alerts { margin-top:10px; font-size:11px; }
#desk #observatory-signals #observatory-local { font-size:11px; }
#desk #observatory-signals { padding:16px; }
#desk #daycards .dc-pop { overflow:hidden; white-space:nowrap; }
#desk #daycards > .daycard { background:transparent; box-shadow:none; }
#desk #daycards > .daycard:hover { background:var(--panel2); }
#desk #observatory-radar #desk-radar-still { object-fit:cover; max-width:none; }
#desk #desk-radar:not([hidden]) ~ .observatory-radar-off { display:none; }
#desk #observatory-radar:has(#desk-radar:not([hidden])) .observatory-radar-off { display:none; }
#desk #desk-radar-frame, #desk #observatory-radar #desk-radar-still { position:absolute; inset:0; width:100%; height:100%; }
@media(max-width:700px){html body>header #brand{display:block}html body>header nav{width:100%;order:3;justify-content:space-between}html body>header #btn-settings{margin-left:auto}#desk #observatory-clock{padding-left:12px}}
#desk #observatory-signals .card h2 { margin:0 0 8px; line-height:1.3; }
#desk #observatory-signals > .card { padding:9px 0; }
#desk #observatory-signals .kv-rows > div { padding:2px 0; }
#desk #observatory-local { padding:9px 0; }
#desk #observatory-signals .observatory-note { margin-bottom:6px; }
#desk #gauges { padding:14px 8px; }
#desk #observatory-heading { margin-bottom:16px; }

/* Field instruments: keep live values and detail targets, give every reading its own face. */
#desk #gauges { gap:9px; padding:0; border:0; border-radius:0; background:none; }
#desk #gauges > .gauge { padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); background:linear-gradient(145deg,var(--panel2),var(--panel)); --instrument:var(--accent); }
#desk #gauges > .gauge:last-child { border:1px solid var(--line); }
#desk #gauges > .gauge:hover { border-color:var(--instrument); }
#desk #gauges > [data-panel="g-rain"] { --instrument:#89c1dc; }
#desk #gauges > [data-panel="g-ltg"] { --instrument:#c5b4f0; }
#desk #gauges > [data-panel="g-wind"] { --instrument:#b6d1d3; }
#desk #gauges > [data-panel="g-wbgt"] { --instrument:#e3b78d; }
#desk #gauges > [data-panel="g-uv"] { --instrument:#ddcc8a; }
#desk #gauges > [data-panel="g-press"] { --instrument:#adb8cd; }
#desk #gauges > [data-panel="g-hum"] { --instrument:#9bcbbb; }
#desk #gauges > [data-panel="g-dew"] { --instrument:#8fc7ce; }
#desk #gauges h3 { margin-bottom:4px; font-size:11px; }
#desk #gauges .gwrap > span[aria-hidden] { display:block; color:var(--instrument); }
#desk #gauges .gwrap svg.field-instrument { width:80px; max-width:100%; height:64px; margin:0 auto 4px; overflow:visible; }
#desk #gauges .ginner, #desk #gauges .gwrap:has(svg.therm) .ginner { justify-content:center; align-items:baseline; text-align:center; margin:0; padding:0; }
#desk #gauges .ginner b { font:28px/1.2 var(--num); }
#desk #gauges .ginner > span { margin-top:4px; font-size:9px; line-height:1.4; }
#desk #gauges #g-ltg .ginner small { flex-basis:100%; }
.field-instrument .fi-outline { fill:var(--bg); stroke:var(--muted); stroke-width:1; opacity:.75; }
.field-instrument .fi-track { stroke:var(--line); stroke-width:6; fill:none; }
.field-instrument .fi-track.thin { stroke-width:1; }
.field-instrument .fi-tick { stroke:var(--muted); stroke-width:1; fill:none; opacity:.65; }
.field-instrument .fi-needle { stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.field-instrument .fi-fill { fill:currentColor; }
.field-instrument .fi-empty { fill:var(--line); }
.field-instrument .fi-arc { stroke:currentColor; stroke-width:6; fill:none; stroke-linecap:round; }
#desk #gauges .field-instrument text { font:8px sans-serif; fill:var(--muted); text-anchor:middle; }
#desk #gauges .field-instrument .fi-symbol { font-size:22px; fill:currentColor; }
#desk #gauges [data-unavailable="true"] .field-instrument { opacity:.35; }
html[data-theme="light"] #desk #gauges > .gauge, html[data-palette="eink"] #desk #gauges > .gauge, html[data-palette="contrast"] #desk #gauges > .gauge { --instrument:var(--accent); }
@media(max-width:1100px) { #desk #gauges { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:700px) { #desk #gauges { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #desk #gauges > .gauge { padding:12px; } }

/* Status cards: one primary fact per tile; full live readings remain in the details dialog. */
#desk #observatory-signals { display:block; }
#desk #observatory-signals > [data-panel="alerts"] { padding:0; border:0; margin-bottom:16px; }
#desk #observatory-signals > [data-panel="alerts"] > summary { display:none; }
#desk #observatory-signals #alerts { margin:0; }
#desk #observatory-signals #alerts .alert { background:color-mix(in srgb,var(--panel) 80%,#b89b52); color:var(--text); border:1px solid color-mix(in srgb,var(--line) 50%,#b89b52); border-radius:8px; padding:0; margin:0 0 8px; }
#desk #observatory-signals #alerts .alert summary { padding:13px; cursor:pointer; list-style:none; }
#desk #observatory-signals #alerts .alert summary::after { content:'›'; float:right; margin-top:-24px; font-size:20px; color:var(--muted); }
#desk #observatory-signals #alerts .alert[open] summary::after { transform:rotate(90deg); }
#desk #observatory-signals #alerts .alert-head { display:block; font-size:12px; font-weight:600; padding-right:12px; }
#desk #observatory-signals #alerts .alert-time { display:block; font-size:9px; color:var(--muted); margin-top:5px; }
#desk #observatory-signals #alerts .alert p { font-size:11px; line-height:1.7; white-space:pre-wrap; margin:0; padding:10px 13px; }
#desk #observatory-signals #alerts :is(.sev-severe,.sev-extreme) { background:color-mix(in srgb,var(--panel) 75%,#c35b48); border-color:#b56c5d; }
#desk .status-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
#desk .status-tile { display:flex; flex-direction:column; min-width:0; text-align:left; padding:14px; gap:6px; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:9px; cursor:pointer; }
#desk .status-tile:hover, #desk .status-device:hover { border-color:var(--accent); }
#desk .status-label { font-size:10px; color:var(--muted); }
#desk #status-aqi { font:38px/1.1 var(--num); margin-top:8px; }
#desk #status-aqi-label { font-size:10px; overflow-wrap:anywhere; }
#desk .status-meter { display:block; height:4px; background:var(--line); border-radius:4px; margin-top:7px; width:100%; }
#desk .status-meter i { display:block; height:100%; border-radius:4px; background:var(--accent); }
#desk .status-air[data-band="aqi-good"] .status-meter i { background:#9fceb5; }
#desk .status-air[data-band="aqi-mod"] .status-meter i { background:#dfc583; }
#desk .status-air[data-band="aqi-usg"] .status-meter i { background:#d49d78; }
#desk .status-air:is([data-band="aqi-bad"],[data-band="aqi-vbad"]) .status-meter i { background:#d5898b; }
#desk #status-moon-icon { margin-top:9px; display:block; }
#desk #status-moon-phase { font-size:12px; font-weight:500; }
#desk .status-tile small { font-size:9px; line-height:1.5; color:var(--muted); }
#desk .status-sun { grid-column:1/-1; background:linear-gradient(140deg,var(--panel2),var(--panel)); gap:5px; }
#desk #status-sunset { font:32px/1.2 var(--num); margin-top:6px; }
#desk .status-sun > span:not(.status-label) { font-size:10px; color:var(--muted); }
#desk .status-sun-curve { width:100%; height:58px; margin:0; fill:none; stroke:var(--muted); stroke-width:1; }
#desk .status-sun-curve path:first-child { stroke:var(--line); stroke-dasharray:3 4; }
#desk .status-sun-curve path:last-child { stroke:#c4aa7d; stroke-width:1.5; }
#desk #observatory-local { margin:14px 0 0; padding:0 0 13px; }
#desk #observatory-local > div { gap:8px; font-size:10px!important; padding:4px 0!important; }
#desk .status-device { border:0; border-top:1px solid var(--line); border-radius:0; width:100%; display:flex; align-items:center; gap:10px; margin:0; padding:16px 0 0; background:none; color:var(--text); text-align:left; cursor:pointer; }
#desk .status-device > span:first-child { font-size:25px; color:var(--muted); }
#desk .status-device > span:nth-child(2) { flex:1; min-width:0; }
#desk .status-device strong { display:block; font-size:11px; font-weight:500; }
#desk .status-device small { display:block; color:var(--muted); font-size:9px; margin-top:5px; line-height:1.6; }
#desk .status-device i { width:6px; height:6px; border-radius:50%; background:var(--muted); flex:none; }
#desk .status-device[data-state="reporting"] i { background:#9fceb5; }
#desk .status-device[data-state="attention"] :is(strong,i) { color:#e1b67a; }
#desk .status-device[data-state="attention"] i { background:#e1b67a; }
#signal-details { max-width:min(460px,calc(100% - 28px)); max-height:85dvh; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; }
#signal-details::backdrop { background:#000a; backdrop-filter:blur(3px); }
#signal-details > form { float:right; }
#signal-details > form button { font-size:22px; border:0; background:none; color:var(--muted); }
#signal-details > h2 { font-size:22px; margin:5px 28px 22px 0; }
#signal-details > .card { border:0; padding:0; background:none; box-shadow:none; }
#signal-details > .card > h2 { display:none; }
#signal-details .kv-rows > div { display:flex; justify-content:space-between; gap:16px; padding:8px 0; font-size:12px; border-bottom:1px solid var(--line); }
#signal-details .kv-rows > div > :last-child { text-align:right; }
#signal-details #aqi-val { font:46px var(--num); }
#signal-details #aqi-detail { margin-top:15px; line-height:1.6; }
#signal-details .observatory-moon { margin-top:20px; }
#signal-details .observatory-note { font-size:11px; color:var(--muted); line-height:1.7; margin-bottom:12px; }
#signal-details #hero-batt { display:none; }
#desk .status-full-moon { display:block; width:36px; height:36px; border-radius:50%; background:radial-gradient(circle at 32% 30%,#faf8f1,#bfc3ce 68%,#707b90); }

/* Selected forecast: Clear list. Shared columns make the high, low and rain easy to scan. */
#desk #observatory-grid { grid-template-columns:280px minmax(0,1fr) 280px; }
#desk .forecast-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
#desk #forecast-unit { font-size:10px; color:var(--muted); padding:3px 6px; border:1px solid var(--line); border-radius:5px; }
#desk .forecast-columns, #desk #daycards > .daycard { display:grid; grid-template-columns:minmax(44px,1fr) 30px 35px 31px 34px; gap:4px; align-items:center; font-variant-numeric:tabular-nums; }
#desk .forecast-columns { font-size:8px; letter-spacing:.6px; color:var(--muted); padding:6px 0; }
#desk .forecast-columns > :nth-child(n+3) { text-align:right; }
#desk #daycards > .daycard, #desk #daycards > .daycard:first-child { min-height:44px; padding:7px 0; }
#desk #daycards .dc-head { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:0; line-height:1.2; }
#desk #daycards .dc-name { font-size:12px; font-weight:500; }
#desk #daycards .dc-head .dc-date { display:block; font-size:9px; color:var(--muted); }
#desk #daycards :is(.dc-body,.dc-mid,.dc-temp) { display:contents; }
#desk #daycards .dc-icon { height:30px; margin:0; }
#desk #daycards .dc-icon :is(img,svg) { width:30px; height:30px; }
#desk #daycards .dc-temp b { font:22px/1 var(--num); text-align:right; }
#desk #daycards .dc-temp span { font:18px/1 var(--num); text-align:right; color:var(--muted); }
#desk #daycards .dc-pop { font-size:10px; line-height:1.3; color:var(--accent); }
#desk #daycards > .daycard:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(min-width:701px) and (max-width:1100px){#desk #observatory-grid{grid-template-columns:260px minmax(0,1fr)}}