/* ============================================================================ app-shell.css — App_Surface presentation rules (pwa-install-and-access, 15.1) Loaded by all three App_Surface shells (member `_app_base.html`, owner `_shell.html` + `owner_chrome.shell()`, trainer pages) and precached by `sw.js` at CACHE_VERSION v19. Plain CSS with custom properties only: no preprocessor, no build step, no bundler (Req 14.9, steering constraint 1). Every rule here is *additive* and keyed on generic `.app-*` hooks, so it layers on top of the existing `ma-*` / `o-*` / `t-*` shells without redefining any of their geometry. The generic hooks and the per-surface classes they sit alongside: .app-shell the outermost surface container .ma-app .o-app .t-app .app-scroll the scrolling container .ma-scroll .o-content .t-content .app-nav primary navigation .ma-bottom-nav .o-nav .t-nav .app-header top bar / command bar .ma-topbar .o-topbar .t-topbar .app-tabbar mobile tab bar .ma-bottom-nav .t-bottom-nav .app-action an action control in the chrome .o-burger .t-bottom-nav__more .app-content member/gym-authored text region .ma-scroll .o-content__inner `data-app-mode` on is written synchronously by app-mode.js (`standalone` | `browser`), which is why `.browser-only` can be hidden without a flash of in-app browser chrome. ========================================================================== */ /* --- Req 14.2: safe areas ------------------------------------------------- Requires — base.html, owner_chrome's document skeleton, gym_landing.html and offline.html all declare it. `env()` resolves to the 0px fallback everywhere else, so these properties are inert on desktop and in a browser tab. */ :root { --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); } .app-shell { padding-top: var(--safe-t); padding-bottom: var(--safe-b); } /* The tab bar is fixed to the bottom edge, so it clears the home indicator on its own rather than inheriting the shell's padding. */ .app-tabbar { padding-bottom: var(--safe-b); } /* --- Req 14.3: no overscroll / pull-to-refresh --------------------------- */ html, body { overscroll-behavior: none; } .app-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* --- Req 14.4: suppress long-press menu + selection on CHROME only ------- Navigation, headers, action controls and the tab bar are app furniture: a long press there should feel like a button, not like a web page offering "Copy link". Nothing member-authored or gym-authored lives in these regions. */ .app-nav, .app-header, .app-action, .app-tabbar { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* …and explicitly preserve selection in content regions. This is the second half of Req 14.4 and it is not redundant: `user-select` inherits, and a content region is always nested inside a shell, so the value has to be re-asserted rather than merely left unset. Member-authored notes and gym-authored copy stay selectable and copyable. */ .app-content, .app-content * { -webkit-touch-callout: default; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* Chrome nested INSIDE a content region is still chrome. This rule is load-bearing, not belt-and-braces. On the member surface the per-screen topbar renders inside the scrolling content region, so `.app-content *` (specificity 0-1-0, declared later) would otherwise beat `.app-header` (0-1-0) and hand the header back to the selection UI. Naming the descendant forms explicitly lifts the chrome rule to 0-2-0 so it wins on specificity, whatever the nesting order turns out to be. */ .app-content .app-nav, .app-content .app-header, .app-content .app-action, .app-content .app-tabbar, .app-content .app-nav *, .app-content .app-header *, .app-content .app-action *, .app-content .app-tabbar * { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* --- Req 14.1: no in-app chrome duplicating browser controls ------------- `.browser-only` marks anything that only makes sense in a browser tab: an in-page URL readout, a "back to site" affordance, an install banner. In a standalone window the OS already supplies those, so a duplicate is exactly the browser-flavoured artefact Req 14.1 forbids. */ html[data-app-mode="standalone"] .browser-only { display: none; }