/* ========================================================================== APP SHELL — makes the site feel like a native app on a phone. Loaded by public/sms/index.html and public/quran-tracking/index.html. The Next.js app gets the same rules from src/app/globals.css. Fixes Jamal's "it moves and shrinks when I touch it" (10 Jul 2026): 1. pinch-zoom → touch-action: pan-x pan-y (+ app-shell.js for iOS) 2. double-tap zoom → touch-action (same rule) 3. rubber-band bounce → overscroll-behavior: none 4. pull-to-refresh → overscroll-behavior-y: none 5. grey flash on tap → -webkit-tap-highlight-color: transparent 6. notch / home bar → safe-area-inset padding NOTE: this deliberately disables zoom. That is an accessibility trade-off Jamal asked for explicitly — the page must feel fixed, like an app. ========================================================================== */ html { /* Allow scrolling in both directions, but NOT pinch-zoom or double-tap zoom. */ touch-action: pan-x pan-y; /* Kill the elastic scroll past the top/bottom of the page. */ overscroll-behavior: none; /* Stop iOS enlarging text when the phone is turned sideways. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overscroll-behavior-y: none; /* no pull-to-refresh */ -webkit-tap-highlight-color: transparent; /* no grey box on tap */ } /* Buttons and tappable things shouldn't show the text I-beam or a selection flash when a teacher taps quickly. Text content stays selectable. */ button, [role='button'], .tab, .chip, .pill { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; /* no "copy/look up" popup on long-press */ user-select: none; } /* iOS zooms the whole page in when you focus an input whose text is under 16px. Enforce the floor — but ONLY on touch devices, so desktop form layouts (which are tuned to 13–14px inputs) are untouched. */ @media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em); } } /* NOTE: no safe-area padding on . The status bar style is "default" (opaque), so iOS already reserves the notch area and the page starts below it. Padding here would also be ignored by the portals' position:fixed headers and double up elsewhere. If we ever go fully immersive (status-bar-style: black-translucent), add env(safe-area-inset-*) to those fixed headers directly — not to body. */