/* 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);
}