/* The loading screen's styles (index.html #boot), a file of its own so the
   Content-Security-Policy allows styles from 'self' only. */
/* Loading screen: plain HTML and CSS so it paints before any JavaScript. */
@font-face { font-family: 'Switzer'; src: url('/fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root { --boot-bg: #ffffff; --boot-fg: #1b1b1f; --boot-muted: #a3a3a8; --boot-accent: #5d64b7; --boot-track: #e6e7f1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --boot-bg: #15161b; --boot-fg: #ececf1; --boot-muted: #8a8b94; --boot-accent: #8a90e0; --boot-track: #24252c; }
}
:root[data-theme='dark'] { --boot-bg: #15161b; --boot-fg: #ececf1; --boot-muted: #8a8b94; --boot-accent: #8a90e0; --boot-track: #24252c; }
#boot {
  position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center;
  background: var(--boot-bg); color: var(--boot-fg);
  font-family: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: opacity 200ms ease;
}
#boot.boot-out { opacity: 0; pointer-events: none; }
/* The content waits 300ms, so a fast start never flashes the logo. */
#boot .boot-in { position: relative; opacity: 0; animation: boot-show 250ms ease 300ms forwards; }
/* The logo sits dead centre, like the native launch screens; the rest hangs below it. */
#boot svg { display: block; width: 44px; height: 58px; }
#boot .boot-below { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; width: 300px; }
#boot .boot-word { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
#boot .boot-bar { position: relative; width: 112px; height: 3px; overflow: hidden; border-radius: 3px; background: var(--boot-track); }
#boot .boot-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px; background: var(--boot-accent); animation: boot-slide 1.3s ease-in-out infinite; }
#boot .boot-error { display: none; max-width: 280px; text-align: center; font-size: 14px; color: var(--boot-muted); }
#boot .boot-error button {
  margin-top: 12px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--boot-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
#boot.boot-failed .boot-bar { display: none; }
#boot.boot-failed .boot-error { display: block; }
/* Signing in: one button, focused, so Enter signs in. */
#boot .boot-signin { display: none; max-width: 280px; text-align: center; font-size: 14px; color: var(--boot-muted); }
#boot .boot-signin-text:empty { display: none; }
#boot .boot-signin-text { margin-bottom: 12px; }
#boot .boot-signin button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--boot-accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
#boot .boot-signin button:focus-visible { outline: 2px solid var(--boot-accent); outline-offset: 3px; }
#boot .boot-signin button:disabled { opacity: 0.6; cursor: default; }
#boot.boot-signing-in .boot-bar { display: none; }
#boot.boot-signing-in .boot-signin { display: block; }
.boot-now #boot .boot-in { animation: none; opacity: 1; }
@keyframes boot-show { to { opacity: 1; } }
@keyframes boot-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  #boot, #boot .boot-in { transition: none; animation: none; opacity: 1; }
  #boot .boot-bar::after { animation: none; width: 100%; opacity: 0.5; }
}