/* ===================================================================== mobile.css — Phone form-factor layer for the Blazor admin WebApp --------------------------------------------------------------------- Loaded AFTER app.css and kiosk.css. Persona: a restaurant owner glancing at the admin app in portrait on their phone (read/monitor first). Navigation is the bottom tab bar in Layout/NavMenu.razor; this file owns the surrounding shell, the fixed slide-in panels that were hard-coupled to the 72px desktop rail, and portrait polish. ── REVERSIBILITY ────────────────────────────────────────────────── Every rule is gated behind `body.mobile-layout` (set in index.html only on phone-width + coarse-pointer devices). The single `if (isPhone)` block in index.html is the master kill-switch: remove it and this entire layer goes dormant — nothing here applies to any device that lacks the class. ── ISOLATION (why mesero + kiosk are safe) ──────────────────────── Rules are ALSO scoped under `.app-layout` — the root

of the AUTHENTICATED MainLayout branch (MainLayout.razor:17). Consequences: • Mesero /m/* pages use EmptyLayout (`.empty-layout`) → no match • CFD display uses CfdLayout → no match • Login/Register/Reset use MainLayout's `.public-layout`→ no match So even though the mesero pages share the `mobile-layout` body class (they run on phones), NOTHING in this file can reach them — verified they carry inputs at 0.8–0.85rem we must not touch. Kiosk modes (Elo PayTableShell, Samsung Tab landscape PWA) are >768px wide, so they never get `mobile-layout` in the first place. The two-class `.app-layout` ancestor also gives these rules (0,3,x) specificity, so they cleanly beat the per-page inline