/* Critical above-the-fold loader styles. Kept as a static asset so the CSP
 * can drop `style-src 'unsafe-inline'` for inline <style> blocks while still
 * showing a spinner before React hydrates. Linked from index.html.
 *
 * Colours mirror tokens.css (page / muted text / accent) so the pre-hydration
 * frame matches the first React paint in both themes. */
:root {
  --loader-bg: #f2f6fa;
  --loader-color: #4a6883;
  --loader-track: rgba(10, 22, 34, 0.1);
  --loader-accent: #0284c7;
}
.app-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--loader-bg);
  color: var(--loader-color);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  gap: 16px;
}
.app-loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--loader-track);
  border-top-color: var(--loader-accent);
  border-radius: 50%;
  animation: app-spin 0.7s linear infinite;
}
@keyframes app-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --loader-bg: #0a1622;
    --loader-color: #84a5bd;
    --loader-track: rgba(234, 244, 250, 0.1);
    --loader-accent: #38bdf8;
  }
}
:root[data-theme='dark'] {
  --loader-bg: #0a1622;
  --loader-color: #84a5bd;
  --loader-track: rgba(234, 244, 250, 0.1);
  --loader-accent: #38bdf8;
}
@media (prefers-reduced-motion: reduce) {
  .app-loader-spinner {
    animation: none;
    border-top-color: var(--loader-track);
  }
}
.app-noscript {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: sans-serif;
}