/* url-maestro: the app, not a picture of the app.

   styles.css draws a phone on a desktop page. Here the phone IS the viewport,
   so the chassis, the staging padding and the desktop ground all come off.
   This file loads after styles.css and overrides; the source is never forked. */

html, body { height: 100%; background: var(--surface); overscroll-behavior: none; }
body { margin: 0; }

main { height: 100%; }

.stage { min-height: 100dvh; height: 100dvh; padding: 0; display: block; }

.phone {
  width: 100%; height: 100dvh; max-height: none; min-height: 0;
  aspect-ratio: auto;
  border: 0; border-radius: 0;
  box-shadow: none;
}

/* The splash inherited the chassis radius. At full bleed there is no corner. */
.splash-screen { border-radius: 0; }

/* Real device insets rather than the 52/30 fallbacks the mock needed. */
:root { --safe-top: max(env(safe-area-inset-top), 14px);
        --safe-bottom: max(env(safe-area-inset-bottom), 12px); }

/* Installed, there is no browser chrome to pull against. */
.screen { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Above the fold on a small phone the hero should not eat the screen. */
@media (max-height: 700px) {
  .hero { height: calc(100dvh * 0.34); min-height: 240px; }
}

/* Full bleed at every width. A centred column on desktop is a frame by another
   name, and a Figma import reads the viewport: anything that is not the app
   arrives as a stray layer. So the app is the page, at any size. */
.stage { width: 100%; }

/* ---- Capture mode: ?full ------------------------------------------------
   A 100dvh screen with its own overflow imports clipped: html-to-design reads
   the laid-out DOM, so everything below the fold is simply absent. Under
   ?full the screens flow to their content height and every screen renders at
   once, stacked and labelled, so one capture carries the whole app.

   The app URL is unchanged. This is a second URL, not a second build. */
.capture, .capture body { height: auto; }
.capture main, .capture .stage { height: auto; min-height: 0; display: block; }
.capture .phone { height: auto; min-height: 0; overflow: visible;
  display: block; }
/* A fixed phone height, not 100dvh: the capture must not change shape with
   whatever viewport the design tool happens to render at. 874 is the height
   the app was drawn to. */
.capture .screen { position: static !important; display: block !important;
  height: auto; min-height: 874px; overflow: visible;
  border-bottom: 1px solid var(--line); }
.capture .screen[hidden] { display: block !important; }
.capture .phone, .capture .screen { overflow-x: clip; }
/* The splash image is height:100% against a parent that is now auto-height, so
   it collapses to nothing and the screen paints as a black box. Pinned. */
.capture .splash-screen { height: 874px; }
.capture .splash-screen > img { height: 874px; animation: none; }
/* The foot fade lifts content off the floating tab bar. There is no bar here,
   so it is a blur band across the middle of a stacked page. */
.capture .phone::after { display: none; }
.capture .bottom-nav, .capture .sheet, .capture .stage-over { display: none !important; }
.capture .screen::before { content: attr(data-screen);
  display: block; margin: 0 0 10px; font-family: var(--sans); font-size: 10px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--quiet); }
.capture .splash-screen::before { color: rgb(255 255 255 / .5); position: relative; z-index: 2; }
.capture .hero-chrome, .capture .pass-chrome { position: static; margin: 0; }