/* 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; }