/* ARC UNIVERSAL MOBILE LAYER — presentation site One source, linked from every page. Never fork this per page. Loaded LAST in so it wins over page CSS; !important is used only where the target is an inline style or JS-generated markup. Everything is gated at max-width:640px — desktop is untouched. */ /* ---------- 1 · horizontal overflow guard ---------- */ @media (max-width:640px){ html,body{max-width:100%;overflow-x:hidden;} body{overflow-wrap:break-word;} img,svg,video{max-width:100%;height:auto;} } /* ---------- 2 · iOS focus-zoom kill ---------- Any field under 16px makes Safari zoom the viewport on focus and never zoom back. This is the single most-felt mobile fault on the forms. !important because several fields are inline-styled. */ @media (max-width:640px){ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-size:16px !important; min-height:48px; } textarea{min-height:80px;} } /* ---------- 3 · multi-column form grids collapse ---------- .stage is inert here on the decks (not a grid element) and only bites on facilitator-onboard, where it is a 3-column grid. */ @media (max-width:640px){ .frow,.two,.field-row,.stage,.op-layout{grid-template-columns:1fr !important;} [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important;} } /* ---------- 4 · tap targets ---------- */ @media (max-width:640px){ button,.btn,a.btn,input[type=submit],input[type=button]{min-height:44px;} } /* ---------- 5 · social row (profile) ---------- Fixed 130px select + 120px min input + icon + remove overflows a 360px screen. Select takes its own line. */ @media (max-width:640px){ .social-row{flex-wrap:wrap;} .social-platform-select{flex:1 1 100%;width:auto !important;} .social-input{flex:1 1 auto;min-width:0 !important;} } /* ---------- 6 · wide content scrolls instead of breaking ---------- */ @media (max-width:640px){ table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} } /* ---------- 7 · deck stage: dynamic viewport height ---------- height:100% is measured against the LARGE viewport on iOS, so the bottom of every deck card sits under the address bar. Scoped to html.arc-deck so the onboarding .stage grid is never touched. */ @supports (height:100dvh){ @media (max-width:640px){ .arc-deck,.arc-deck body{height:100dvh;} .arc-deck .stage{height:100dvh;max-height:100dvh;} } } /* ---------- 9 · index.html presentation cards ---------- The page's own @media(max-width:780px) block sits ABOVE the rules it targets, so every rule in it loses on source order and the whole block is inert. This revives it from here — a later stylesheet, so it wins — and stacks the cards one per row instead of three across. */ @media (max-width:780px){ .qr-grid{flex-direction:column;align-items:center;gap:12px;max-width:100%;} .qr-card{flex:1 1 auto !important;width:100%;max-width:420px;padding:20px 18px;border-radius:14px;} .qr-box,.qr-url,.scan-hint{display:none !important;} .qr-title{font-size:18px;margin-bottom:4px;} .qr-sub{font-size:12px;margin-bottom:12px;} .tap-btn{font-size:15px;padding:14px 20px;border-radius:9px;} .footer{font-size:11px;margin-top:8px;} } /* ---------- 8 · safe area for the fixed deck nav ---------- */ @media (max-width:640px){ #navControls{padding-bottom:env(safe-area-inset-bottom,0px);} #tapZones{padding-bottom:env(safe-area-inset-bottom,0px);} }