/* ═══════════════════════════════════════════════════════════════════════════ OrgFoundry mobile foundation - Phase 0a ---------------------------------------------------------------------------- ADDITIVE-ONLY CONTRACT: every rule in this file is scoped to either - a max-width media query (≤ 1280px), OR - a `pointer: coarse` media query (touch-primary input), OR - a feature query that desktop browsers won't match so that desktop behavior at ≥ 1281px with a mouse is provably unchanged. No selector here is unscoped. No existing rule in any other CSS file is modified by this stylesheet - this is a pure layer-on. Three-zone responsive model: phone ≤ 640 px (iPhone SE/13/14, Pixel, Galaxy S) tablet 641–1280 px (iPad portrait/landscape, Galaxy Tab, Pixel Tablet, foldables open, Surface Pro portrait, browser zoom @ 200%, iPad Stage Manager / Android split-screen) desktop ≥ 1281 px (laptops, monitors - UNTOUCHED) The CSS variables are exposed for any later module (mobile shell, sheets, etc.) to reference instead of inlining magic numbers. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Three-zone breakpoint values - single source of truth for Phases 0–5. */ --bp-phone-max: 640px; --bp-tablet-min: 641px; --bp-tablet-max: 1280px; --bp-desktop-min: 1281px; /* Touch-friendly tap-target minimums, applied only when input is coarse. iOS HIG: 44×44 pt. Material: 48×48 dp. Splitting the difference at 44px because that's the more common ceiling and it satisfies both. */ --touch-target-min: 44px; --touch-spacing-min: 8px; /* between adjacent tap targets */ /* Safe-area inset shortcuts (default to 0 if device doesn't expose them). env() is supported by all modern mobile browsers; older browsers see 0. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* Sheet animation timing - tied to user motion preference below. */ --sheet-anim-duration: 220ms; --sheet-anim-ease: cubic-bezier(0.4, 0.0, 0.2, 1); } /* ── Reduced motion (a11y) ───────────────────────────────────────────────── Users with vestibular sensitivity disable motion in OS settings; honor it. Cuts every Phase 1+ slide animation down to a near-instant fade. */ @media (prefers-reduced-motion: reduce) { :root { --sheet-anim-duration: 1ms; } } /* ── Standalone PWA mode ────────────────────────────────────────────────── When the app is launched from the home-screen icon (not in a browser tab), `display-mode: standalone` is true. We use this elsewhere to hide any browser-only chrome (e.g. a "back to website" button if we ever add one). This file just exposes the signal as a CSS class on via the helper below, and reserves a flag for downstream rules. */ @media (display-mode: standalone) { :root { --is-pwa-installed: 1; } } /* ════════════════════════════════════════════════════════════════════════ TOUCH-INPUT scaling - only applies when pointer is coarse (touch primary). iPad with Magic Keyboard: pointer: fine → DESKTOP sizing (correct UX). iPad with finger: pointer: coarse → TOUCH sizing (correct UX). ════════════════════════════════════════════════════════════════════════ */ @media (pointer: coarse) { /* Apply to touch-friendly button shapes only - never to inline links inside prose, never to icon-only utilities that need to be tight. The .touch-tap opt-in class lets Phase 1 components participate. */ .touch-tap, button.touch-tap, a.touch-tap { min-height: var(--touch-target-min); min-width: var(--touch-target-min); } } /* ════════════════════════════════════════════════════════════════════════ SAFE-AREA UTILITIES - additive padding/margin classes for top nav, bottom tabs, modals, sheets. Phase 1+ components opt in by adding the class. No existing element gets these unless it explicitly opts in. ════════════════════════════════════════════════════════════════════════ */ .safe-area-top { padding-top: var(--safe-top); } .safe-area-bottom { padding-bottom: var(--safe-bottom); } .safe-area-x { padding-left: var(--safe-left); padding-right: var(--safe-right); } .safe-area-inset { padding-top: var(--safe-top); padding-right: var(--safe-right); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); } /* ════════════════════════════════════════════════════════════════════════ MOBILE-ONLY UTILITIES - hidden above tablet-max (i.e. only render on phone + tablet). Phase 1's bottom-tab nav uses .mobile-only. ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1281px) { /* Desktop: any element marked mobile-only is hidden. */ .mobile-only { display: none !important; } .phone-only { display: none !important; } .tablet-only { display: none !important; } .tablet-portrait-only { display: none !important; } .tablet-landscape-only { display: none !important; } } @media (max-width: 1280px) { /* Tablet + phone: any element marked .desktop-only is hidden. */ .desktop-only { display: none !important; } } @media (max-width: 640px) { /* Phone: hide anything tablet-or-larger. */ .tablet-up-only, .tablet-only, .desktop-only { display: none !important; } } @media (min-width: 641px) { /* Tablet + desktop: hide phone-only utilities. */ .phone-only { display: none !important; } } @media (min-width: 641px) and (max-width: 1280px) and (orientation: portrait) { .tablet-landscape-only { display: none !important; } } @media (min-width: 641px) and (max-width: 1280px) and (orientation: landscape) { .tablet-portrait-only { display: none !important; } } /* ════════════════════════════════════════════════════════════════════════ 100vh / dvh helpers iOS Safari's bottom-of-screen URL bar shrinks the viewport mid-scroll; 100vh causes content to jump under it. dvh (dynamic viewport height) fixes this in modern browsers. We provide a class with a fallback chain. ════════════════════════════════════════════════════════════════════════ */ .full-viewport-h { height: 100vh; /* fallback for older browsers */ height: 100dvh; /* modern: tracks visual viewport */ } .min-full-viewport-h { min-height: 100vh; min-height: 100dvh; } /* ════════════════════════════════════════════════════════════════════════ PHONE TYPOGRAPHY SCALE - only applies below tablet-min. Keeps text readable on small screens; existing 10–11px chrome text gets a 1px bump. Desktop font sizes are untouched. ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Body baseline up by one step on phone */ body { font-size: 14px; } } /* ════════════════════════════════════════════════════════════════════════ POINTER-COARSE LIST + ROW SPACING - when input is touch, stretch row targets in lists so a finger lands cleanly. Opt-in via .touch-list class so we don't mass-bump every existing list. ════════════════════════════════════════════════════════════════════════ */ @media (pointer: coarse) { .touch-list > * { padding-top: max(8px, var(--touch-spacing-min)); padding-bottom: max(8px, var(--touch-spacing-min)); } } /* ════════════════════════════════════════════════════════════════════════ INSTRUMENTATION HOOK Phase 0a doesn't ship the bottom tabs / sheets yet, but we expose a CSS class indicator so JS can detect "is the page being styled as mobile?" without re-doing media-query math: [will be set by Phase 1's JS] [default] For Phase 0a, the class is just reserved. Phase 1's nav module reads it. ════════════════════════════════════════════════════════════════════════ */