/* ══════════════════════════════════════════════════════════════════════════ cpd-mobile.css — shared mobile pass for every ContentPad tool Built 2026-08-22 from the mobile readiness sweep. EVERYTHING here is inside @media (max-width:820px). Desktop and iPad landscape are never touched. Drop this in with one line in : Load it AFTER the app's own stylesheet so these win where they need to. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { /* ── 1 · Fields that made iOS zoom ─────────────────────────────────────── Safari zooms the whole page in when you focus a field under 16px, and it does not zoom back out. Everything below 16px is the reason the site felt unusable one-handed. 16px is the exact threshold, not a preference. */ /* :not(#cpdm) buys ID-level specificity. Without it an app rule like .fi { font-size:14px !important } outranks a bare `select` selector and the field still zooms iOS in. #cpdm matches nothing — it exists only to win. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(#cpdm), select:not(#cpdm), textarea:not(#cpdm) { font-size: 16px !important; } /* ── 2 · Controls a thumb can actually hit ─────────────────────────────── 44px is Apple's target. Buttons are inline-block so min-height applies directly; anchors and generic clickables need a flex box to grow. */ button, input[type="button"], input[type="submit"], input[type="reset"] { min-height: 44px; } a.btn, a.tab, a.chip, a.pill, [role="button"], .btn, .tab, .chip, .pill, [class*="-btn"], [class*="btn-"] { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* A control that only wraps an icon still needs a thumb-sized box. */ button:empty, button > svg:only-child, button > i:only-child { min-width: 44px; } /* Kill the 300ms tap delay and the grey flash on every tappable thing. */ button, a, [role="button"], [onclick], .btn, .tab, .chip, .pill, .card, .row, input[type="button"], input[type="submit"], input[type="reset"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Toolbars that were one tight row now wrap instead of squeezing. */ .toolbar, .tabs, .tabbar, .actions, .btn-row, .btns, .controls, [class*="toolbar"], [class*="tab-row"], [class*="btn-group"] { flex-wrap: wrap; row-gap: 8px; min-width: 0; } /* ── 3 · Nothing scrolls sideways, ever ────────────────────────────────── A backstop. Individual wide things (tables, timelines, ticker rails) scroll inside their own box instead of dragging the page with them. */ html, body { overflow-x: hidden; max-width: 100%; } table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } /* Grid and flex children default to min-width:auto, which is what lets one long unbreakable child push a whole page wide. This is the single most common cause of the layouts in this sweep. */ .grid > *, .row > *, .cols > *, .flex > *, [class*="grid"] > *, [class*="col-"] { min-width: 0; } /* ── 4 · Utilities the per-app patches lean on ─────────────────────────── Add these classes in an app's own patch rather than globally, so nothing changes shape unless we decided it should. */ .cpdm-stack { display: block !important; } .cpdm-stack > * { width: 100% !important; max-width: 100% !important; } .cpdm-onecol { grid-template-columns: minmax(0, 1fr) !important; } .cpdm-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .cpdm-scroll-x > * { flex-shrink: 0; } .cpdm-hide { display: none !important; } } /* ── Vault thumbnail overflow button ────────────────────────────────────── Measured 2026-08-23: 60 of these on one Vault screen at 25 x 40px. The height was fine; the WIDTH was the miss, and a 25px-wide target on a phone is a coin toss. Lives in the shared sheet because every tool loads it and the selector is harmless where it does not exist. */ @media (max-width: 820px) { .thumb-expand { min-width: 44px !important; min-height: 44px !important; } } /* ══════════════════════════════════════════════════════════════════════════ SCROLL CHAINING — every fixed overlay in the platform added 2026-08-23 Measured on 2026-08-23 at 390px with real MLB data loaded: the Sports Brief game modal is 2,179px inside a 760px fixed layer, and the page behind it is now 4,868px. Nothing set overscroll-behavior anywhere in the platform, so the moment the modal reached its own end the flick carried straight through to the page underneath. Close the modal and you are somewhere else entirely. That is a large part of what "scrolling gets stuck" actually felt like. contain stops the chain at the overlay. It cannot change layout or hide anything, and on an element that is not a scroller it does nothing at all, which is why a broad selector is safe here. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { .modal-bg, .modal, .drawer, .dbody, .sheet, .overlay, .lightbox, [role="dialog"], [class*="modal"], [class*="drawer"], [class*="sheet"], [class*="overlay"] { overscroll-behavior: contain; } } /* ══════════════════════════════════════════════════════════════════════════ CHIP RAILS added 2026-08-23 Vault's .filter-chips is a nowrap flex row 445px wide inside a 390px toolbar. The root clips sideways overflow, so the last chips were simply unreachable — not off-screen-but-scrollable, gone. Letting the rail scroll inside itself puts them back: measured 445px -> 366px box holding 380px, scrollable, and nothing else on the screen moves. min-width:0 is the load-bearing part — a flex child will not shrink below its content without it, which is why max-width alone does nothing here. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 820px) { [class*="filter-chips"], [class*="chip-row"], [class*="chip-rail"] { min-width: 0 !important; max-width: 100% !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } [class*="filter-chips"]::-webkit-scrollbar, [class*="chip-row"]::-webkit-scrollbar, [class*="chip-rail"]::-webkit-scrollbar { display: none; } }