/*!
 * StaticPress theme "Blocksy" - quickapp_app.css
 *
 * Layer 7: the full page quick app shell (the third mount mode, "app").
 *
 * Loaded by templates/quickapp_app.html and by nothing else: a document whose
 * quick app mount takes the whole page is rendered with that template instead
 * of post.html / page.html, so no other page of the site ever downloads this
 * file. The page has no site header, footer, sidebar or body text - the app
 * fills the viewport, which is exactly what this layer has to set up:
 *
 *   - the page paints black before the app is there, so a slow (or blocked)
 *     app never flashes a white screen;
 *   - the page itself does not scroll; the app is the only scroll container,
 *     which is what keeps a mobile browser from showing a rubber-band effect
 *     around a frame that already fills the screen.
 *
 * The black is a fixed baseline on purpose (see the plan, decision D7): the
 * theme option system of this project has no colour type yet, so there is no
 * option to add without inventing one. `--sp-app-bg` is the single knob a
 * theme variant can override.
 */

:root {
    --sp-app-bg: #000000;
}

html,
body {
    height: 100%;
    margin: 0;
    background-color: var(--sp-app-bg);
    overflow: hidden;
}

/* `position: fixed` instead of `height: 100%` so the shell ignores the
   viewport units of an old browser and cannot be pushed around by a stray
   margin of the app. */
.sp-app-shell {
    position: fixed;
    inset: 0;
}

/* 100dvh is the dynamic viewport height: on a phone it follows the address bar
   as it hides, where 100vh would leave a strip of black behind. The plain
   `height` line above is the fallback of every browser that does not know it. */
.sp-app-shell .sp-quickapp-frame {
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border: 0;
}