/* ============================================================ MOBILE SAFETY — zero-edit, drop in as-is. A native wrapper (a true installable PWA, or a WebView shell like Expo produces) does NOT solve any of this for you. It loads and displays your web content in the platform's rendering engine; it does not retroactively fix touch targets, safe-area handling, scroll physics, or accessibility in your own HTML/CSS. All of it still lives here, wrapped or not, Android or iOS. The one genuine exception: safe-area-inset-* values below only report real numbers if the wrapper is configured for edge-to-edge rendering. If they're reading as 0 on a real device despite this file being included, that's a wrapper config problem, not a CSS problem — check the wrapper's edge-to-edge / immersive setting. ============================================================ */ /* ---------- 1. Safe area padding ---------- Requires in — without viewport-fit=cover, these env() values are never populated regardless of device or wrapper config. */ :root { --safe-top-inset: env(safe-area-inset-top, 0px); --safe-bottom-inset: env(safe-area-inset-bottom, 0px); --safe-left-inset: env(safe-area-inset-left, 0px); --safe-right-inset: env(safe-area-inset-right, 0px); } /* Apply to any fixed/sticky header or bottom nav so it clears a notch, punch-hole, or gesture-nav bar instead of sitting under it. */ .safe-top { padding-top: max(var(--safe-top-inset), var(--pad, 16px)); } .safe-bottom { padding-bottom: max(var(--safe-bottom-inset), var(--pad, 16px)); } /* ---------- 2. Touch-friendly targets ---------- 44x44 CSS px is the WCAG 2.5.5 (AAA) minimum and matches both Apple's HIG and Android's Material 48dp guideline closely enough in practice. Apply to every tappable element. */ button, a, [role="button"], input[type="checkbox"], input[type="radio"], .tappable { min-height: 44px; min-width: 44px; } /* Icon-only buttons commonly get shrunk below this by accident -- keep the visual icon small, keep the tappable area at 44px via padding rather than shrinking the box itself. */ .icon-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } /* ---------- 3. No input zoom (iOS Safari specific, harmless on Android) ---------- iOS Safari auto-zooms the viewport when focusing an input below 16px font-size. Android's WebView does not have this behavior, so this rule is a no-op there -- but costs nothing to include and keeps behaviour consistent if the same web app is ever loaded in an iOS browser context too (Safari "Add to Home Screen", an iOS wrapper down the line, etc). */ input, textarea, select { font-size: max(16px, 1rem) !important; } /* ---------- 4. Focus indicators ---------- Never remove focus outlines without replacing them -- this affects keyboard users AND Android's TalkBack/switch-device navigation, not just desktop keyboard users. :focus-visible keeps mouse/touch clicks free of a visible ring while keeping it for keyboard/AT nav. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--forest, #104D1F); outline-offset: 2px; border-radius: 4px; } /* ---------- 5. Overscroll containment ---------- Duplicated here (also present in app-shell.css's .screen-scroll) as a general utility class, for any additional scroll container outside the main screen-scroll region -- a modal, a bottom sheet, a horizontally-scrolling chip row. */ .no-bounce { overscroll-behavior: contain; } /* ---------- 6. Basic loading skeleton ---------- Covers the "in-app loading state" half of the checklist item a wrapper's native splash screen does NOT cover -- API calls in flight, async content still resolving. The wrapper's splash only handles the very first paint, before any of your JS has run. */ @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .skeleton { background: var(--surface-alt, #eee); border-radius: 8px; animation: skeleton-pulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.75; } } /* ---------- 7. Smooth scrolling ---------- Momentum scrolling is the default in modern Android WebView and iOS Safari alike -- this is only needed for anchor-jump animation, not for general scroll feel. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- 8. Offline / fallback-data banner ---------- Styling for js/network-status.js. Uses this project's own CSS variables where they exist, with generic fallbacks so this file still renders sensibly even before an app's token system is wired up. Position assumes app-shell.css's --bottom-nav-height variable; adjust the bottom offset if this app has no bottom nav. */ .network-banner { position: absolute; left: 12px; right: 12px; bottom: calc(var(--bottom-nav-height, 0px) + var(--safe-bottom-inset, 0px) + 12px); z-index: 60; padding: 10px 13px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; box-shadow: 0 4px 14px rgba(0, 0, 0, .10); } .network-banner--warn { background: var(--warn-soft, #FDEBCF); border: 1px solid var(--warn-border, #F5D9AE); color: var(--warn-text, #8A5A15); } .network-banner--bad { background: var(--danger-soft, #F8DDD7); border: 1px solid var(--danger-border, #E9B6AA); color: var(--danger-text, #8A2B18); } .network-banner--ok { background: var(--success-soft, #E6EFE6); border: 1px solid var(--success-border, #C7DDC8); color: var(--success-text, #1F5C2A); }