/* ============================================================ mobile.css — site-wide mobile hardening Linked LAST in every page's so these rules win. Conservative, low-risk rules that stop horizontal overflow and collapse over-wide grids on phones. Desktop is unaffected. ============================================================ */ /* 1. The page must never scroll sideways. overflow-x: clip is used (with hidden as fallback) because plain overflow-x: hidden on can break position: sticky headers. */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* 2. Media never overflows its container. (canvas is intentionally excluded — Chart.js sizes its own canvases) */ img, svg, video, iframe, picture, embed, object { max-width: 100%; } img { height: auto; } /* 3. Let flex/grid children shrink instead of forcing the page wider. */ * { min-width: 0; } /* 4. Wide tables scroll inside their own box rather than stretching the page. */ @media (max-width: 720px) { table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* 5. Collapse over-wide fixed-column grids on phones. Matches inline grid-template-columns: repeat(3..12, 1fr) at any spacing. */ @media (max-width: 600px) { [style*="repeat(3,"], [style*="repeat(3 ,"], [style*="repeat(4,"], [style*="repeat(4 ,"], [style*="repeat(5,"], [style*="repeat(5 ,"], [style*="repeat(6,"], [style*="repeat(6 ,"], [style*="repeat(7,"], [style*="repeat(7 ,"], [style*="repeat(8,"], [style*="repeat(8 ,"], [style*="repeat(9,"], [style*="repeat(9 ,"], [style*="repeat(10,"], [style*="repeat(11,"], [style*="repeat(12,"] { grid-template-columns: repeat(2, 1fr) !important; } } /* 6. Dashboard set-piece grid (12-col span system) → stack full-width on phones. */ @media (max-width: 720px) { .sp-grid { grid-template-columns: 1fr !important; } .sp-card[class*="span-"] { grid-column: auto !important; } } /* 7. Tame oversized headings on very small screens so they don't overflow. */ @media (max-width: 480px) { h1 { font-size: clamp(26px, 9vw, 44px); word-break: break-word; } }