/* initial-loading.css — boot preloader
   Colors/geometry are hardcoded (not var(--...)) because this paints before
   the app's real stylesheet is guaranteed loaded. Keep these in sync with
   the "paper"/"accent" tokens in src/styles/tokens.css and the height/track
   style of DeckoroProgressBar (src/components/ui/DeckoroProgressBar.tsx). */

#initial-loading.initial-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f4f3f7;
  opacity: 1;
  transition: opacity 0.35s ease;
}

html[data-app-ready="true"] #initial-loading {
  opacity: 0;
  pointer-events: none;
}

.initial-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* ── Progress bar loader ── */
.loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(280px, 60vw);
}

.loader-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #dcd9e6;
  overflow: hidden;
}

.loader-fill {
  height: 100%;
  width: 0%;
  background: #534ab7;
  border-radius: inherit;
  transition: width 220ms ease-in-out;
}

.loader-pct {
  font: 500 12px/1 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #6b6580;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ── Dark mode (app class) ── */
html.dark #initial-loading.initial-loading { background: #151320; }
html.dark .loader-bar { background: rgba(255, 255, 255, 0.14); }
html.dark .loader-fill { background: #8b82f0; }
html.dark .loader-pct { color: #a49eb8; }

/* ── Dark mode (system preference, before app class is set) ── */
@media (prefers-color-scheme: dark) {
  #initial-loading.initial-loading { background: #151320; }
  .loader-bar { background: rgba(255, 255, 255, 0.14); }
  .loader-fill { background: #8b82f0; }
  .loader-pct { color: #a49eb8; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript-message { padding: 16px; text-align: center; }