/* =========================================================================== mobile-app.css — the MaraponeAI app shell, for the site in a phone browser --------------------------------------------------------------------------- Someone who has not installed the app still ends up on marapone.com from a phone, and until now they got the desktop site shrunk: a drop-down menu taller than the screen inside a sticky nav (so its last rows, Account and the trial CTA, could not be reached at all), 24px tap rows, and a workspace laid out for a 27" display. This file gives those visitors the app's chrome instead — the sheet-style drawer, the 44pt targets, the fixed bottom tab bar — using the same tokens the Capacitor app uses (MARAPONE-APP/mobile/www/css/marapone.css). The palette is already shared, so nothing here re-colours the site; what changes is geometry. Two breakpoints, and nothing outside them: ≤1023px the drawer. That is where the hamburger lives (`lg:hidden`), so tablets get the fix for the unreachable menu too. ≤767px the app shell proper — tab bar, app header, card rows. A phone. Desktop is deliberately untouched: there is not one rule in this file outside a max-width media query. =========================================================================== */ :root { /* Measured from the real nav by mobile-app.js — the fallback is only what the drawer uses for the frame before that first measurement lands. */ --mp-nav-h: 61px; --mp-tabbar-h: 56px; --mp-tap: 44px; --mp-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ═══════════════════════════════════════════════════════════════════════════ 1. The drawer (≤1023px) ═══════════════════════════════════════════════════════════════════════════ The bug this replaces: #mobile-menu was an ordinary block inside a `sticky top-0` nav. Once the menu made that nav taller than the viewport, the overflow had nowhere to go — a sticky box does not scroll its own overflow and the page cannot scroll it either, so every row past the fold, Account and "Start Free 7-Day Trial" included, was simply unreachable. It is now a fixed sheet under the nav bar with its own scroll region, and the two things you actually came to tap are pinned to the bottom of it so they never depend on scrolling at all. The sheet is only fixed to the viewport because mobile-app.js moves the node out to first. Left inside the nav it is fixed to *the nav*: an ancestor with `backdrop-filter` (the nav's `backdrop-blur`) becomes the containing block for fixed descendants, so `top: 61px; bottom: 0` resolved against a 61px-tall box and the drawer opened with zero height. Hence `.mp-drawer` on every selector below — the class JS adds when it makes the move. It also outranks the `#mobile-menu a` rules the pages carry in their own