/* ============================================================
   GlbXpress — deploy.css
   Real, deployable layout: mobile UI fills the viewport (no device
   frame), desktop renders the full scrolling site. One URL, all devices.
   ============================================================ */

html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--paper); }

/* ---- DESKTOP mode: normal scrolling document ---- */
body.mode-desktop #root { position: static; }

/* ---- MOBILE mode: app shell pinned to the viewport ---- */
body.mode-mobile { position: fixed; inset: 0; width: 100%; overflow: hidden; overscroll-behavior: none; }
body.mode-mobile #root { position: fixed; inset: 0; }

/* The mobile components were built with a 56px top pad to clear the
   preview phone's status bar. On a real device, respect the safe-area
   instead so it sits flush under the system status bar. */
body.mode-mobile .mh-topbar { padding-top: max(14px, env(safe-area-inset-top)); }
body.mode-mobile .mt-header  { padding-top: max(14px, env(safe-area-inset-top)); }

/* bottom bars clear the home-indicator / gesture area */
body.mode-mobile .mh-bottombar { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
body.mode-mobile .mt-actions   { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

/* the canonical mobile app uses a 2-screen slider; keep it full-height */
body.mode-mobile .app-slider { position: absolute; inset: 0; display: flex; width: 200%; transition: transform .38s cubic-bezier(.4,0,.2,1); }
body.mode-mobile .app-screen { position: relative; width: 50%; height: 100%; flex: none; overflow: hidden; }

/* loading splash before React mounts */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); z-index: 999; }
.boot.gone { display: none; }
.boot-mark { width: 56px; height: 56px; border-radius: 17px; background: var(--orange-500); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-orange); animation: bootpulse 1.2s ease-in-out infinite; }
@keyframes bootpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }