/*
 * The loading screen a reload shows BEFORE the app's bundle has arrived (index.html), and the
 * same screen while the session door checks the cookie and reads `/me` (`BootScreen.tsx`) — one
 * markup, one stylesheet, so the hand-over from the static page to React does not flicker.
 *
 * It is a plain file in `public/` because nothing else is loaded yet: the CSP is
 * `style-src 'self'`, so no inline <style>, and `src/ui/tokens.css` rides inside the bundle this
 * screen is waiting for. The colours are the tokens' own values, copied: the cream / night page,
 * the warm muted ink, the brand amber (owner 2026-10-12: "add loading or progress bar … just like
 * the mobile app" — Android's `RestoringDashboard` / `HistoryLoadingBar`).
 */
html {
  background: #fbf0da;
}

.eh-boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 16px;
  box-sizing: border-box;
  background: #fbf0da;
  color: #6b5c45;
  font: 400 14px/20px system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
}

.eh-boot-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.eh-boot-bar,
.eh-loading-bar {
  position: relative;
  overflow: hidden;
  width: 180px;
  max-width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #ead9b4;
}

.eh-boot-bar::after,
.eh-loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-radius: 2px;
  background: #d97706;
  animation: eh-boot-slide 1.2s ease-in-out infinite;
}

.eh-boot-text {
  margin: 0;
  text-align: center;
}

@keyframes eh-boot-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}

@media (prefers-color-scheme: dark) {
  html,
  .eh-boot {
    background: #15110b;
  }
  .eh-boot {
    color: #bfae92;
  }
  .eh-boot-bar,
  .eh-loading-bar {
    background: #3a3122;
  }
  .eh-boot-bar::after,
  .eh-loading-bar::after {
    background: #f59e0b;
  }
}

/* No sliding where motion is unwelcome: a still, part-filled bar still says "working". */
@media (prefers-reduced-motion: reduce) {
  .eh-boot-bar::after,
  .eh-loading-bar::after {
    animation: none;
    left: 30%;
  }
}