@import url('/assets/mobile-ux.css?v=1'); /* ============================================================================= mobile-safety.css — GLOBAL mobile safety net Managed by scripts/mobile-bot/ (the Mobile-Readiness Bot). Linked into every page's . Guarantees no page can scroll sideways on mobile (the "gap to the side" bug) and that media/code/long strings never force the viewport wider than the screen. The bot's scanner still reports the *root* offenders (via element geometry, which clip does not hide) so they can be fixed properly — this file is the guardrail, not an excuse to leave broken layouts. v1 — 2026-06-24 ============================================================================= */ /* 1. Predictable box model everywhere (padding/border never widen a box). */ *, *::before, *::after { box-sizing: border-box; } /* 2. The document itself must never scroll horizontally. `clip` kills the side-gap without creating a scroll container (unlike `hidden`, which can break position:sticky headers). Vertical scroll is untouched. */ html { overflow-x: clip; } body { max-width: 100%; overflow-x: clip; } /* 3. Media can never exceed its container. */ img, video, canvas { max-width: 100%; height: auto; } svg { max-width: 100%; } iframe, embed, object { max-width: 100%; } /* 4. Preformatted text / code wraps instead of forcing width. */ pre { max-width: 100%; white-space: pre-wrap; word-wrap: break-word; } code, kbd, samp { overflow-wrap: break-word; } /* 5. Wide data tables scroll INSIDE their own box on small screens instead of clipping or widening the page. `display:block` lets the browser keep the table laid out naturally inside a scrollable block (no clipped columns). */ @media (max-width: 600px) { table { display: block !important; width: 100%; max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } /* 6. Known non-wrapping pills/badges + label rows: allow them to wrap on small screens so they display fully instead of overflowing. */ @media (max-width: 600px) { .sl-badge { white-space: normal !important; } .section-label { flex-wrap: wrap !important; } }