/*
 * 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;
}