/* ============================================================ Resonance — WO221, THE WHOLE PRODUCT IN FOUR PLACES. The shell's stylesheet. Matt's ruling, August 16 2026, after four rounds of mockups. THE SPECIFICATION IS THE MOCKUP. Every measurement, colour and word below is taken from 'mockups/WO212 mobile - option A with account panel.html' (the phone, signed off) and 'mockups/WO221 desktop - four sections.html' (the desktop), read line by line, and translated into this product's own palette variables rather than the mockup's hex codes — the mockup was drawn in isolation and had no access to assets/style.css, so its #E08A2B is this file's var(--orange) and its #B4451C is var(--orange-deep). A hex code copied out of a mockup is a second palette, and this product has one. NOTHING HERE APPLIES UNLESS assets/shell.js HAS PUT `rs-shell` ON , and it only does that when SHELL_V2 is true AND the page is carrying the member strip. So: * every marketing page is untouched at every width, for ever; * account.html signed OUT is untouched, because its nav is the marketing list until nav-state.js swaps it; * SHELL_V2 false leaves this file inert — it is downloaded and matches nothing, which is the same cost a stylesheet for a feature that is off has always had here. dvh AND NEVER vh, AND env(safe-area-inset-bottom) — the order (b), verified against 'mockups/WO212 mobile - browser vs installed, iOS vs Android.html'. `vh` on iOS Safari is the height of the window with the toolbar PRETENDING not to be there, so a bar positioned against it sits under the toolbar in the browser and floats above nothing in an installed app. `dvh` is the height that is actually there right now, and the safe-area inset is the space the browser (or the home indicator) is reserving. Together they are the one code path the order asks for: the bar drops into the space Safari's toolbar vacates when a member installs the app, and nothing branches on being installed. `100vh` is declared first as the fallback for a browser with no dvh, then overwritten. THE BREAKPOINT IS 840px, WHICH IS THE PRODUCT'S OWN. style.css collapses the nav there, member.css and network.css both hinge there, and WO212's rail/bar swap is there. A shell with its own breakpoint would be a second answer to "is this a phone". ============================================================ */ /* ============================================================ (a) THE OLD STRIP AND THE OLD HAMBURGER GO OUT OF SIGHT — AND STAY IN THE DOCUMENT. ------------------------------------------------------------ THIS IS THE LOAD-BEARING TRICK OF THE WHOLE ORDER, so it is written down rather than discovered. `