/* ───────────────────────────────────────────────────────────────────── mobile.css — global mobile layer (Phase 1) Loaded LAST in on every page, AFTER chrome-mobile.css, so it wins the cascade for shared chrome. Per-page inline !important is handled in each page's own phase (style-extract); here we use raised specificity rather than an !important war wherever possible. Owns: • mobile hygiene (tap-highlight, overscroll, 16px inputs, focus ring) • top-chrome on ≤768px: hide nav LINKS, keep Search/Watch/Connect • bottom tab bar (.mnav) + More drawer (.mdrawer) styling • safe-area for bottom-nav + ops-pill reflow The single mobile boundary is 768px (--bp-md). 480px (--bp-sm) is the small-phone refinement. See tokens.css. ───────────────────────────────────────────────────────────────────── */ /* ── Mobile hygiene (all viewports; cheap + safe) ─────────────────────── */ * { -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } body { overscroll-behavior-y: none; } /* Fixed overlays (drawer/backdrop/bottom-nav) are off-canvas when closed but their box still counts toward document scrollWidth → phantom horizontal scroll. Pin them to the visual viewport width and stop the page from ever scrolling sideways on mobile. */ @media (max-width: 768px) { html, body { max-width: 100%; overflow-x: clip; } } .mnav, .mdrawer, .mdrawer-backdrop { width: 100vw; max-width: 100vw; box-sizing: border-box; } /* Visible keyboard focus without hurting mouse UX */ :focus-visible { outline: 2px solid var(--c-color-brand, #3861FB); outline-offset: 2px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* iOS: inputs <16px trigger auto-zoom on focus. Force ≥16px on phones. */ @media (max-width: 768px) { input, select, textarea { font-size: 16px; } } /* ── Bottom tab bar — hidden on desktop, shown ≤768px ─────────────────── */ .mnav { display: none; } /* The "More" tab is a