/*
 * The ground, and the spinner on it, before the application exists.
 *
 * A file rather than an inline `<style>`, for the same reason `theme-boot.js`
 * is a file: `style-src 'self'` refuses an inline block, so none of this
 * applied in production and the first paint was white whatever anybody had
 * chosen.
 *
 * The worry that put it inline -- "the stylesheet is a separate request, and
 * the browser will happily paint the background before it arrives" -- is about
 * the *application's* stylesheet, which is large and hashed. A link in `<head>`
 * blocks the first paint, and this file is a few hundred bytes from the same
 * origin. Nothing is painted before it lands.
 */
/* The ground, and only the ground. Duplicated from styles.css on purpose:
   these three declarations are what stands between the choice above and
   a white flash, and they have to be here rather than one request away.
   `data-boot` is set by the script and never by anything else. */
html { background: #ffffff; color-scheme: light; scrollbar-gutter: stable; }
/* The script above already resolves `system` and stamps the attribute.
   This is the same answer reached without it — a belt for the braces, and
   what paints if the script is ever moved or fails. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) { background: #0a0a0b; color-scheme: dark; }
  html:not([data-theme='light']) .boot span {
    border-color: rgba(255, 255, 255, .1); border-top-color: #8b5cf6;
  }
}
html[data-boot='dark'] { background: #0a0a0b; color-scheme: dark; }
body { margin: 0; background: inherit; }

/* The same spinner React draws a moment later, at the same size in the
   same place, so the handover is invisible: the ring does not jump, it
   simply stops being this one. */
.boot { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; }
.boot span {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(26, 26, 46, .12); border-top-color: #7c3aed;
  animation: boot-spin .7s linear infinite;
}
html[data-boot='dark'] .boot span {
  border-color: rgba(255, 255, 255, .1); border-top-color: #8b5cf6;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
/* Slower rather than stopped: a still ring is not a wait, it is a bug. */
@media (prefers-reduced-motion: reduce) { .boot span { animation-duration: 2.4s; } }
