/* Sub-Etha PWA app shell -- mobile-first. A two-pane layout (conversation list + thread) that collapses to a single pane on phones (toggled by [data-view] on #app) and sits side-by-side from the tablet breakpoint up. Dark, system-font, safe-area aware. Responsive refinement continues in the mobile-first story; this establishes the shell structure + the phone single-pane behaviour. */ :root { color-scheme: dark; --bg: #0b0f14; --surface: #121821; --surface-2: #1a2330; --line: #243042; --text: #e6edf3; --muted: #8aa0b6; --accent: #4ea1ff; --danger: #ff6b6b; --radius: 12px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Fluid type: scales between phone and desktop without hard jumps. */ --fs-brand: clamp(17px, 1rem + 0.4vw, 20px); --fs-base: clamp(15px, 0.9rem + 0.2vw, 16px); /* Readable thread column cap on wide screens. */ --thread-max: 1100px; --navrail-w: 200px; --sidebar-w: clamp(240px, 22vw, 320px); --rightpanel-w: 300px; --dpanel-w: 0px; /* column D track width; 0 = closed. Set by .app.dpanel-open. */ --dpanel-w-open: min(460px, 40vw); /* user's chosen open width (resize handle) */ } /* ---- Themes (Padre msg 671): switchable via data-theme on , picked in the account menu, persisted in localStorage. A theme = a variable block (+ a few element tweaks). Default (no attribute) is the Sub-Etha dark above. Add a new theme by adding one block here and one