.page-loading-notice {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-content: center;
  gap: .75rem;
  color: var(--text, #212529);
  background: var(--bs-body-bg, #fff);
  font-size: .95rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

html.page-loading .page-loading-notice { opacity: 1; }

/* ── Unified spinner (single implementation for the whole web app) ──────
   Built on currentColor so every context keeps its own tint — a button
   inherits its text colour, `text-primary`/`text-danger` recolor it, etc.
   Only the colour may differ; the ring + rotation are identical everywhere. */
.lab-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin: auto;
  border: .2rem solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: lab-spin .7s linear infinite;
  vertical-align: -0.125em;
}

/* Inline / inside buttons — same implementation, smaller scale. */
.lab-spinner--sm {
  width: 1rem;
  height: 1rem;
  border-width: .15rem;
}

/* Preserve the existing page-loading overlay tint (blue); every other
   spinner inherits its context's colour through currentColor. */
.page-loading-notice .lab-spinner { color: var(--blue, #0d6efd); }

@keyframes lab-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading-notice { transition: none; }
  .lab-spinner { animation: none; }
}

@media print {
  .page-loading-notice { display: none; }
}