/* First-paint splash (see index.html).
 *
 * A real stylesheet rather than inline styles, so the app can run under a CSP
 * with no `'unsafe-inline'` in `style-src` (#458). It lives in `public/` and is
 * linked directly from index.html rather than imported from `src/`: the app's
 * own styles.css is imported by main.jsx, which means in dev it is injected by
 * JS and would not exist until the module loads — precisely the window the
 * splash is here to cover. This way dev and prod behave the same.
 *
 * It costs no extra time to first paint. The built page already carries a
 * render-blocking <link> to the app stylesheet, and render-blocking CSS blocks
 * all painting, not just the elements it styles, so this small same-origin file
 * fetches in parallel with one the browser was already waiting on.
 *
 * Colors are the app's paper/terracotta tokens, hardcoded because this must
 * paint before any of the app's CSS variables are defined.
 */
.ft-splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fbf9f2;
  color: #a15a3a;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.ft-splash-word {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ft-splash-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid #e6d3c6;
  border-top-color: #a15a3a;
  border-radius: 50%;
  animation: ft-spin 0.7s linear infinite;
}

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

/* The spin is decoration, not information — respect a reduced-motion request. */
@media (prefers-reduced-motion: reduce) {
  .ft-splash-spinner {
    animation: none;
  }
}

/* Dark mode (DR-260930-889b): theme-boot.js sets data-theme before this paints. */
:root[data-theme="dark"] .ft-splash {
  background: #1b1a16;
  color: #d9926e;
}