/* ==========================================================================
   Shared desktop shell
   --------------------------------------------------------------------------
   Phone-shaped funnel pages (Pip onboarding, finish-setup) are served to
   desktop browsers as well as to the native webview.

   These pages are conversational, and a conversation wants a narrow measure at
   any screen size — so desktop does NOT stretch the flow across the monitor.
   It also does not put the flow in a phone-sized card: a tall rounded
   rectangle floating in the middle of a monitor reads as a device emulator,
   which is exactly what it should not look like. Instead the surface goes
   full-bleed and the content sits in a generous centred column with desktop
   type and spacing — the layout desktop conversational UIs actually use.

   Opt a page in by adding `pp-desktop-shell` to its root full-height element
   (the `min-height: 100dvh` one that contains the page's position:fixed sheets
   and overlays), then constrain that page's own content to
   `--pp-desktop-measure` in its own desktop block.

   THE GATE IS WIDTH *AND* PLATFORM, DELIBERATELY.
   Width alone is not safe: an Android tablet running the native app can exceed
   768 logical px, which would re-skin the native experience.

   This used to be enforced with `(hover: hover) and (pointer: fine)`, on the
   reasoning that every native target is a touchscreen. That holds, but it is
   not specific enough: an iPad in Safari is also a touchscreen, so tablet web
   browsers fell out of the gate too and inherited the phone rules at 834px —
   which is what produced the five-line headline this file's `.step-shell`
   comment describes. It was also unstable on one device: attaching a Magic
   Keyboard flips an iPad to `pointer: fine` and swapped the layout mid-session.

   So the gate now excludes the native app by name. `html.pp-native` is set
   synchronously from `window.Capacitor.isNativePlatform()` in the auth_base
   head, above the stylesheet links, so it is present before the first paint.
   (`body.native-app` is still NOT usable here — auth_base only applies that
   class on non-auth pages, and the funnel pages are auth pages.)

   The `:where()` wrapper keeps these selectors at their original specificity,
   so the cascade inside this block behaves exactly as it did before.

   Do not move these declarations out of the media block, and do not edit a
   page's phone-first rules to accommodate desktop.
   ========================================================================== */

@media (min-width: 768px) {
    :root:not(.pp-native) {
        /* The conversation measure. Wider than a phone so the layout is not a
           phone, still narrow enough to keep bubbles readable. */
        --pp-desktop-measure: 560px;
        --pp-desktop-gutter: 40px;
    }

    html:not(.pp-native),
    html:not(.pp-native) body {
        background-attachment: fixed;
    }

    :where(html:not(.pp-native)) .pp-desktop-shell {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        /* Makes this the containing block for the page's position:fixed sheets
           and overlays. Each page then aligns its own sheets to its column —
           their positioning strategies differ (some centre with left:50% plus
           translateX(-50%), some stretch with left:0/right:0), so there is no
           single shared rule that fits them all. */
        transform: translateZ(0);
    }

}