/* Loading screen shown while the app boots.
 *
 * Lives in public/ (served verbatim, never bundled) and is linked from
 * index.html, so it covers the [HTML served -> React mount] phase, when no
 * bundled stylesheet exists yet. <AppSplash> reuses the same classes for the
 * session-restoring phase, which makes the hand-over invisible. */
.app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
}

.app-splash .app-splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transform: translateY(-30px);
}

.app-splash .app-splash__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #101828;
}

.app-splash .app-splash__logo {
  width: 32px;
  height: 32px;
}

.app-splash .app-splash__bar {
  width: 240px;
  height: 6px;
  overflow: hidden;
  background: #f1f1f1;
  border-radius: 16px;
}

.app-splash .app-splash__bar-fill {
  width: 76px;
  height: 100%;
  background: #0b714c;
  border-radius: 99px;
  animation: app-splash-slide 1.4s ease-in-out infinite;
}

/* Visually hidden but announced by screen readers (aria-live region). */
.app-splash .app-splash__text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
}

@keyframes app-splash-slide {
  from {
    transform: translateX(-76px);
  }
  to {
    transform: translateX(240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-splash .app-splash__bar-fill {
    animation: none;
  }
}