/* ========================================================================= * Base — clean dark foundation. * Alternate skin chrome and theme backdrops are deferred to later phases. * ========================================================================= */ :root { /* Surfaces */ --u-bg: #0b0c0e; --u-bg-elev: #14161a; --u-bg-deep: #07080a; /* Accent */ --u-accent: #4fc1c9; --u-accent-soft: rgba(79,193,201,0.15); --u-accent-glow: rgba(79,193,201,0.40); /* Status */ --u-ok: #22cc44; --u-caution: #f0c040; --u-warn: #ff2222; /* Text */ --u-text: #d8d9da; --u-text-dim: #8b8c90; /* Borders */ --u-border: rgba(255,255,255,0.06); --u-border-accent:rgba(79,193,201,0.18); /* Type */ --u-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --u-sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif; /* Inset-panel spacing convention. * Matches the .section padding-bottom (12px) so any inset panel that * sits inside a section has equal breathing room on left / right / * bottom relative to the surrounding panel edge. Wrapper elements * around an inset (e.g. .powercons-layout) should apply * `padding: 0 var(--inset-gap)` to mirror the vertical gap * horizontally. Change here to adjust the convention globally. */ --inset-gap: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { /* NOTE: don't set `overflow-x: hidden` here — it silently breaks `position: sticky` on descendants (the sticky ancestor becomes the html/body scroll container instead of the viewport). If horizontal overflow ever becomes a problem, constrain it inside a child element. */ max-width: 100vw; } body { font-family: var(--u-sans); background: var(--u-bg); color: var(--u-text); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ========================================================================= * Layout * ========================================================================= */ .dashboard { padding: 24px 24px 48px 24px; min-height: calc(100vh - 80px); } /* Below-the-header font convention — collapse both --u-sans and --u-mono to Inter so every label, value, status line, tab name, drawer body, gauge readout etc. renders in one face. The

keeps the default vars (so the ERRATIC_DATACENTER title stays on Roboto Mono and picks up the glitch / neon-flicker effects that lean on that face). Scope covers the main dashboard AND the top/bottom drawer rails — those sit as siblings to .dashboard in the DOM (drawers.js injects them directly into ), so a single .dashboard scope wouldn't reach them. */ .dashboard, .drawer-rail--top, .drawer-rail--bottom { --u-mono: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif; --u-sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif; } .empty-shell { max-width: 720px; margin: 64px auto; padding: 28px 32px; text-align: center; border-radius: 6px; background: var(--u-bg-elev); border: 1px solid var(--u-border-accent); } .empty-shell-title { font-family: var(--u-mono); font-size: 14px; letter-spacing: 3px; color: var(--u-accent); text-transform: uppercase; margin-bottom: 6px; } .empty-shell-hint { font-size: 13px; color: var(--u-text-dim); letter-spacing: 0.5px; } /* ── mobile polish (≤768px) ─────────────────────────────────────────── * Broad tweaks that keep the shell usable on phones. Section-specific * rules live in the section's own CSS pane; this is for cross-cutting * stuff (typography, padding, touch targets). * -------------------------------------------------------------------- */ @media (max-width: 768px) { body { font-size: 13px; } /* Kill horizontal scroll no matter what. */ html, body { overflow-x: hidden; } img, canvas, video { max-width: 100%; height: auto; } /* Tighter gutters so widgets actually get room. */ .dashboard, main.dashboard { padding-left: 8px; padding-right: 8px; } /* Top-level drawer panels: edge-to-edge, rounded corners off. */ .drawer-rail--top .drawer-panel, .drawer-rail--bottom .drawer-panel { margin: 0; border-radius: 0; } /* Interactive targets stay ≥36px tall on touch. */ button, .btn { min-height: 36px; } /* Section headers less shouty on narrow screens. */ .section-name, .section-head { font-size: 12px; } /* Stats / gauges tighter padding. */ .gauge, .gauge-stat, .gauge-status-indicator, .ss-tile, .env-outdoor, .temp-widget, .chart-card { padding: 10px; } } /* ── very narrow (≤480px) — phones held portrait ─────────────────── */ @media (max-width: 480px) { .dashboard, main.dashboard { padding-left: 4px; padding-right: 4px; } .section-head { font-size: 11px; } }