/* ================================================================================
   RollRoom platform layer — rr-platform.css (T5 iOS readiness, Oct 7, 2026). Pairs with
   rr-platform.js. Load it in <head> BEFORE rr-chrome.css and the page's own <style>.
   Layout only — no colour, type or copy changes; on a desktop browser nothing here moves.

   1) Safe-area tokens. Every page asks for viewport-fit=cover, so it may paint under the
      iPhone's notch / Dynamic Island / home indicator (and an edge-to-edge Android screen).
      These four tokens are the ONE place that says how far in to stay. Capacitor's Android
      shell injects --safe-area-inset-* (its SystemBars "css" mode — Android WebViews before
      v140 report env() as 0); iOS Safari, the iOS app, home-screen installs and newer
      Android WebViews fill env(). Desktop: all four are 0.
   2) Landscape: body takes the left/right insets so text never runs under the sensor
      housing (backgrounds still bleed edge to edge). Top/bottom insets are applied by the
      elements that touch those edges — the sticky header, the mobile menu, the footer and
      the sticky drop-in bar (here and in rr-chrome.css).
   3) iOS zooms the whole page when a field with text under 16px is tapped, and leaves it
      zoomed after. On touch screens every field renders at 16px; desktop keeps the
      designed 13.5–15.5px. (maximum-scale=1 would also stop the zoom, but it blocks pinch
      zoom on Android — an accessibility failure — so it is not used.)
   4) html.rr-typing (set by rr-platform.js while a text field has focus): sticky bottom
      bars step aside, so they can't cover the field you're typing in when the keyboard
      pushes the viewport up.
   ================================================================================ */
:root{
  --rr-sat:var(--safe-area-inset-top,env(safe-area-inset-top,0px));
  --rr-sar:var(--safe-area-inset-right,env(safe-area-inset-right,0px));
  --rr-sab:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));
  --rr-sal:var(--safe-area-inset-left,env(safe-area-inset-left,0px));
}

/* 2) landscape side insets + the top inset on every page's own sticky header */
body{padding-left:var(--rr-sal);padding-right:var(--rr-sar)}
body > header{padding-top:var(--rr-sat)}

/* 3) no zoom-on-focus on touch screens */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),
  select,textarea{font-size:16px!important}
}

/* 4) + the gym profile's sticky "Drop in" bar (.mcta): side insets in landscape, and out of the way while typing */
html .mcta{padding-left:calc(16px + var(--rr-sal));padding-right:calc(16px + var(--rr-sar))}
html.rr-typing .mcta{display:none}