/*
 * BOOT INDICATOR — the phone's first paint (card 262).
 *
 * The PM saw «a white screen for minutes» after a deploy: the previous build's service worker was
 * still answering with a cached `index.html` whose hashed chunks the server no longer has, and this
 * front's `index.html` had nothing to show before its JavaScript ran. `index.html` now carries the
 * brand and a spinner from the first byte; the app removes them the frame after it paints.
 *
 * The web app carries the same stylesheet, duplicated ON PURPOSE: the two fronts share the
 * backend and the design system and never each other's files (PM 2026-09-04).
 *
 * WHY A FILE AND NOT AN INLINE <style>: the production Content-Security-Policy this front is served
 * with (deploy/nginx.conf, every location) is `style-src 'self'` — no `'unsafe-inline'`, no nonce —
 * so an inline <style> block, or a `style="…"` attribute, is REFUSED by the browser and the
 * indicator would be an unstyled pile of text at the top-left of a white page. An own-origin
 * stylesheet is allowed as it stands, so the rule that guards every other page keeps guarding this
 * one.
 *
 * WHY A STABLE NAME AND NOT A HASHED ASSET: the failure this card answers is a STALE index.html.
 * A content-hashed stylesheet is exactly the kind of file such an index.html names and the server
 * no longer has. `/boot.css` never changes name, so it is on the server after every deploy — and
 * nginx serves it `no-cache` (an entry document, beside `index.html`) so an edit here reaches a
 * returning browser instead of sitting in a year-long immutable cache.
 *
 * `index.html` cannot import the design system, so the token values are written as literal hex,
 * each named beside its token in canopy-design-system/src/styles/tokens.css. The theme follows the
 * device (`prefers-color-scheme`), which is what both fronts do until a person overrides it — the
 * override lives in localStorage and reading it would need the inline script the CSP also refuses.
 */

:root {
  --boot-bg: #f4f6fb; /* --background */
  --boot-fg: #0f172a; /* --foreground */
  --boot-ring: #e6eaf1; /* --border */
  --boot-spin: #1e3fa0; /* --brand */
  --boot-note: #64748b; /* --muted-foreground */
}

@media (prefers-color-scheme: dark) {
  :root {
    --boot-bg: #0b1220; /* dark --background */
    --boot-fg: #e8edf6; /* dark --foreground */
    --boot-ring: #26334c; /* dark --border */
    --boot-spin: #3b82f6; /* dark --primary */
    --boot-note: #8d9bb4; /* dark --muted-foreground */
  }
}

/* A sibling of #root, not a child: React clears its container on the first commit, and a boot
   element inside it would vanish in the gap between that commit and the browser's next paint. */
#boot {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  background: var(--boot-bg);
  color: var(--boot-fg);
  font-family: Vazirmatn, system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: center;
}

#boot-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid var(--boot-ring);
  border-top-color: var(--boot-spin);
  border-radius: 9999px;
  animation: boot-spin 0.8s linear infinite;
}

#boot-brand {
  font-size: 1.125rem;
  font-weight: 600;
}

#boot-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--boot-note);
}

#boot-note[hidden] {
  display: none;
}

@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #boot-spinner {
    animation-duration: 2.4s;
  }
}