html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Shows through behind the canvas in areas the app doesn't paint - e.g. the system navigation bar
   inset in installed/standalone mode - so it must match the AuroraBackground base color instead of
   the browser's default white.

   On `html` only, never `body`: an opaque body background paints above negative-z-index children,
   which is where the landing page's `.aurora` gradients live (see landing.css). `html`'s background
   propagates to the canvas, so this still covers the whole viewport either way. */
html {
    background-color: #FBF8FF;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: #121318;
    }
}

/* Everything below only applies once the app has taken over the page (see turistico-landing.js).
   Before that the document is the landing page in index.html, which is an ordinary scrolling
   web page and needs the browser's default gesture and overflow handling. */

html.app-mode, html.app-mode body {
    height: 100%;
    overflow: hidden;
}

/* Takes the browser out of every touch gesture over the app.

   Compose only calls preventDefault() on a touchmove once something inside it has actually
   *consumed* scroll. A collapsing top app bar consumes through the nested-scroll connection
   instead, and that does not count - so while the trip screen's 250.dp header is open, every swipe
   opens with a move that scrolled nothing, the browser claims the pan, and Compose is handed a
   pointercancel one move in. The timeline cannot be dragged at all until the header has been closed
   some other way.

   Applied to the whole subtree rather than the canvas: the elements that actually receive the
   pointer events are divs Compose stacks over it, and those default to `touch-action: auto`.
   `!important` because Compose sets `pan-x pan-y` inline on the canvas itself. Nothing behind the
   app pans anyway - the page is `overflow: hidden` - so the browser has no use for the gesture. */
html.app-mode, html.app-mode body, html.app-mode body * {
    touch-action: none !important;
}