/*
 * The web's one global stylesheet, linked from app/+html.tsx.
 *
 * The document is the scroll surface: `Page` lays the main region out in the flow and pins its bars
 * with `position: sticky`, so `body` must never carry `overflow: hidden` (Expo Router's default root
 * would add it; this app's root does not). The root element fills the window so a short page still
 * puts its pinned bars at the bottom, and grows with a long one so the document scrolls.
 *
 * No colour, size or radius lives here: everything visual comes from src/ui/tokens.ts through the
 * components. This file only says how the page and the window relate.
 */
html,
body {
  min-height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/*
 * The app draws a dialog's dim itself, inside the dialog, so it can fade in (the motion spec); the
 * browser's own backdrop would sit under it and cannot be animated. No colour: `none` removes it.
 */
dialog::backdrop {
  background: none;
}

/*
 * The page's turn between light and dark is a view transition (src/ui/motion/useSchemeTurn.web.ts),
 * whose one movement is a circle of the new scheme spreading over a picture of the old. The
 * browser's own cross-fade between the two pictures is turned off, and so is the blend it mixes
 * them with, so the circle is all that moves. The pictures take no pointer: a press goes through to
 * the page beneath, so the switch can be turned back while the circle is still spreading.
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition {
  pointer-events: none;
}