/* ───────────────────────────────────────────────────────────────────────── GFWS portal — shared mobile layer. Linked from every page's . Uses !important so it overrides inline grid/width styles on the HTML pages. Experts run this on their phones; the portal has to feel like a real app. ───────────────────────────────────────────────────────────────────────── */ /* Never let the page itself scroll sideways. Wide blocks scroll inside. */ html, body { max-width: 100%; overflow-x: hidden; } @media (max-width: 640px) { /* every multi-column grid collapses to a single column */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* any element given a fixed inline width shrinks to fit the screen. Harmless on already-small elements; rescues the 480–900px modals/cards. */ [style*="width"] { max-width: 100% !important; } /* media and embeds never overflow */ img, video, iframe, canvas { max-width: 100% !important; height: auto; } /* wide tables and code scroll within their own box, not the page */ table, pre { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* comfortable tap targets and edge padding for the main content area */ .main { padding: 16px 12px !important; } button, .btn, a.btn, input[type="submit"] { min-height: 42px; } /* modals/dialogs fit the viewport with a little breathing room */ .modal, .dialog, [class*="modal"], [class*="popup"] { max-width: calc(100vw - 20px) !important; } }