/* ===================================================================================================================== THE DASHBOARD ON A PHONE: the shell, and the conventions every section pass builds on. "Ruling 103" (owner ruling, 14 Oct 2026: "this one is huge"): the app on a phone is OPTIMIZED, not desktop shrunk; "mobile cant show as much informaiton at the same time", so a phone screen shows less at once. The sidebar gets a close/open control. Hover-only affordances gain a tap path; dialogs and popups fit the viewport; the empty-state and border laws hold at phone width. Section passes: read this block first, then write your phone CSS in your own file. 1. ONE BREAKPOINT. A phone is under 768px wide, or a touch screen under 501px tall (a phone on its side): @media (max-width:767px),(pointer:coarse) and (max-height:500px) in CSS, PlinthMobile.PHONE and PlinthMobile.phone() in JS (js/plinth-mobile.js). Use no other phone width. Up to 900px the page is drawn at true size (no interface-scale zoom) with touch ergonomics (44px targets, 16px inputs, dashboard-f27.css). 2. THE SHELL IS NOT YOURS. At phone width the sidebar is a drawer, closed on every load. It opens over the page and never squeezes it, from the Menu button, which sits in the top bar beside the zone's title and can be dragged anywhere (r144, 16 Oct 2026; js/plinth-menu-drag.js); the same button closes it (bottom-left while the drawer is open), and so do a tap on the dimmed page, Esc and picking a zone. From 768px up the sidebar docks with its own close control and the choice is remembered. Never hide, move or restyle .shell, #side, #view's padding or the Menu button; the state lives in . 3. NO CORNER TO KEEP CLEAR. The Menu button lives in the zone's top bar (r144, 16 Oct 2026), so the bottom-left corner is free: #view pads its bottom by 16px and the safe area only, sheets dock 12px from the screen's edge, and nothing declares a pinned bar (--m-fab-lift, data-m-bar and plinthPinnedBar are gone). Only the open drawer uses the corner: the same button is its Close there, and the drawer's foot band is var(--m-fab-clear) tall for it. While a text field has focus at phone width (the keyboard is up) the button hides, so it never covers the next field; it comes back on blur. 4. ONE COLUMN. At phone width content is one column: grids become minmax(0,1fr) and side-by-side panes stack. .m-cols is --cols columns above the breakpoint and one below. Show less at once: fold the secondary behind a tap (details/summary or a button), and drop what a phone does not need with .m-hide (.m-only is the reverse). 5. GUTTERS AND TAPS. The page gutter is --m-gutter (16px); stacked blocks are --m-gap apart (.m-stack). Anything tappable is at least --m-tap (44px) each way (.m-tap). Inputs are 16px so iOS never zooms. 6. NOTHING RUNS SIDEWAYS. The page never scrolls sideways. A row that cannot fit is a chip row (.m-chips): one line that scrolls inside itself and never wraps, its chosen chip kept in view, a fade at the edge where more chips sit. Tab rows and step bars in #view ([role=tablist] and the known tab classes) get this by default up to 900px wide and on a phone on its side: they never wrap. 7. HOVER BECOMES TAP. Nothing is hover-only. A "?" or a hint is a .tap-tip[data-tap-tip] holding a .tap-tip-pop: a mouse hover shows it beside the term; a tap opens it (at phone width as a bottom sheet drawn over everything); a tap anywhere else or Esc closes it. A floating layer you position yourself registers with PlinthMobile.tapAway(layer, { keep: '', close }) for the same closing (a tap on a modal dialog's backdrop counts as outside it), and carries .m-sheet. A