/* Phone-deploy overrides. Loaded after styles.css. Hides the authoring chrome (topbar, sidebar, all non-Testing pages, settings panel) and stretches the testing-phone preview to fill the viewport. Mobile sizing uses the `dvh` (dynamic viewport height) unit so the phone UI accounts for iOS Safari's bottom toolbar as it slides in/out — using `100vh` would put the prev/Continue buttons under the address bar on first paint. Older browsers fall back to `100vh` via the cascade. */ html, body { width: 100%; height: 100vh; /* fallback */ height: 100dvh; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; background: #000; } body.phone-build .topbar, body.phone-build .global-sidebar, body.phone-build .global-sidebar-resize, body.phone-build .testing-controls, body.phone-build .play-status, body.phone-build .lab:not(.testing-lab) { display: none !important; } body.phone-build .app-main-row { display: block; height: 100vh; height: 100dvh; width: 100vw; } body.phone-build .main-pane { width: 100vw; height: 100vh; height: 100dvh; display: block; } body.phone-build .testing-lab { display: block !important; padding: 0 !important; margin: 0 !important; height: 100vh !important; height: 100dvh !important; width: 100vw !important; max-height: none !important; } body.phone-build .testing-phone { width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; max-width: 100vw !important; aspect-ratio: unset !important; border-radius: 0 !important; border: none !important; /* Respect notch / home-indicator safe areas so the banner doesn't tuck under the status bar and the nav buttons don't sit under the home line. */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; } /* Force the testing page to be visible regardless of any stale hidden attribute on initial paint. */ body.phone-build #pageTesting[hidden] { display: block !important; } /* Lessons overlay slides over the phone, no need for it to honor the (now absent) bounded testing-phone width. */ body.phone-build .testing-lessons-overlay { position: fixed; inset: 0; } /* Notes overlay same. */ body.phone-build .testing-notes-overlay { position: fixed; inset: 0; } /* Boot splash: while `phone-booting` is set on , an opaque cocoa panel covers the testing-phone so the user never sees empty placeholders, half-rendered content, or (on post-click reloads) the previous story bleeding through. app.js removes the class at the end of bootstrap, after the freshly-loaded story has rendered. */ body.phone-build.phone-booting::before { content: ""; position: fixed; inset: 0; background: #4d2214; z-index: 99999; pointer-events: none; }