/* P1.6 (D506-D508) - the screens a module shows before it runs or when it cannot: the boot screen in index.html, and the gate, embed
   and personal-link screens (Components/ModuleStateScreen.razor). On the module tokens (css/module-tokens.css), so they follow the
   viewer's light or dark choice and, on an embed link, the dealer's colour. The boot screen names no company (D508). */

.mod-host.mod-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--mod-space-6) var(--mod-space-4);
  box-sizing: border-box;
  color: var(--mod-text);
}
/* app.css pads the body (0 6px 6px); a screen that fills the window would overflow it and show the page behind at the edges. */
body:has(.mod-state-page),
body:has(.mod-boot) {
  padding: 0;
}
.mod-host.mod-state-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mod-bg);
}
.mod-host .mod-state-card {
  width: 100%;
  max-width: 28rem;
  padding: var(--mod-space-5);
  border: 1px solid var(--mod-border-strong);
  border-radius: var(--mod-radius-lg);
  background: var(--mod-surface);
  box-shadow: var(--mod-shadow-1);
  text-align: center;
}
.mod-host .mod-state-brand { display: flex; justify-content: center; margin-bottom: var(--mod-space-4); font-size: var(--mod-text-lg); font-weight: 600; color: var(--mod-text); }
.mod-host .mod-state-brand .mod-brand-logo { max-height: 3rem; max-width: 12rem; object-fit: contain; }
.mod-host .mod-state-title { margin: 0 0 var(--mod-space-3); font-size: var(--mod-text-xl); line-height: 1.25; }
.mod-host .mod-state-message { margin: 0 0 var(--mod-space-4); font-size: var(--mod-text-md); }
.mod-host .mod-state-muted { color: var(--mod-text-muted); font-size: var(--mod-text-sm); }
.mod-host .mod-state-body { text-align: left; }
.mod-host .mod-state-body > * + * { margin-top: var(--mod-space-3); }
.mod-host .mod-state-choice { display: block; width: 100%; margin-bottom: var(--mod-space-2); text-align: left; }
.mod-host .mod-state-input {
  width: 100%; box-sizing: border-box; padding: var(--mod-space-2) var(--mod-space-3);
  border: 1px solid var(--mod-border-strong); border-radius: var(--mod-radius-md);
  background: var(--mod-input-bg); color: var(--mod-text); font: inherit;
}
.mod-host .mod-state :focus-visible { outline: var(--mod-focus-width) solid var(--mod-focus); outline-offset: var(--mod-focus-offset); }

/* The spinner, shared by the boot screen and the "Getting ready" state. */
.mod-host .mod-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--mod-space-3);
  border: 3px solid var(--mod-border-strong);
  border-top-color: var(--mod-accent);
  border-radius: 50%;
  animation: mod-spin 0.9s linear infinite;
}
@keyframes mod-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mod-host .mod-spinner { animation: none; border-top-color: var(--mod-border-strong); }
}

/* The boot screen: what #app shows until Blazor draws the page. No card, no name: just the theme's surface and a line of text. */
.mod-host.mod-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mod-bg);
  color: var(--mod-text-muted);
  font-size: var(--mod-text-md);
}