/* The SPA's "this is working" and "this did not arrive" panels
   (Widgets.Common.loadingPanel / failurePanel). Scoped to .loading_* and
   .load_failed, so it cannot reach the rest of the DOM. */

.loading_panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  color: var(--sp-muted, #566887);
  font-family: var(--sp-body, sans-serif);
}

.loading_spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 3px solid var(--sp-line, #DCE3EF);
  border-top-color: var(--sp-glow, #16B79C);
  border-radius: 50%;
  animation: loading_spin 0.9s linear infinite;
}

/* Its own name: the legacy search spinner declares `spin` in spinner.css,
   which this bundle does not load but a page-linked sheet still could. */
@keyframes loading_spin {
  to { transform: rotate(360deg); }
}

/* Anyone who asked not to be moved gets the same panel without the motion.
   The border stays, so the element is still visibly a busy marker. */
@media (prefers-reduced-motion: reduce) {
  .loading_spinner { animation: none; }
}

.loading_text {
  margin: 0;
}

.load_failed {
  padding: 24px 0;
  color: var(--sp-signal, #F0553F);
  font-family: var(--sp-body, sans-serif);
}

/* The chrome index.html draws while the bundle downloads. The measurements
   mirror layout.css — a 60px bar, a 70px rail that leaves the screen below
   1067px — so the shape the reader sees is the shape that arrives. Literal
   fallbacks throughout: the sheet declaring these variables is not loaded
   at this point. */

.boot_shell {
  min-height: 100vh;
  background: var(--sp-paper, #F4F6FB);
}

.boot_bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--sp-ink, #0C1526);
}

.boot_rail {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 70px;
  background: var(--sp-ink, #0C1526);
  box-shadow: 6px 0 0 -3px var(--sp-glow, #16B79C);
}

.boot_main {
  max-width: 900px;
  padding: 76px 16px 0 86px;
}

.boot_card {
  height: 96px;
  margin-bottom: 16px;
  border: 1px solid var(--sp-line, #DCE3EF);
  border-radius: 10px;
  background: var(--sp-card, #FFFFFF);
  animation: boot_pulse 1.8s ease-in-out infinite;
}

@keyframes boot_pulse {
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .boot_card { animation: none; }
}

@media (max-width: 1066px) {
  .boot_rail { display: none; }
  .boot_main { padding-left: 16px; }
}