/* Shared Clearline loading graphic. Kept dependency-free so it can paint before an app boots. */
.cl-loading {
  --cl-loading-background: rgba(255, 255, 255, 0.6);
  align-content: center;
  background: var(--cl-loading-background);
  box-sizing: border-box;
  color: var(--cl-loading-colour, #142774);
  display: grid;
  justify-items: center;
  min-block-size: 100%;
  min-inline-size: 100%;
  padding: 24px;
  text-align: center;
}

.cl-loading--bootstrap {
  inset: 0;
  min-block-size: 100svh;
  position: fixed;
  z-index: 2147483646;
}

.cl-loading--viewport {
  inset: 0;
  min-block-size: 100svh;
  min-inline-size: 100svw;
  position: fixed;
  z-index: 2147483601;
}

.cl-loading__graphic { display: grid; gap: 12px; justify-items: center; }
.cl-loading__logo {
  animation: cl-loading-breathe 1.6s ease-in-out infinite;
  block-size: 72px;
  display: block;
  inline-size: 72px;
  object-fit: contain;
}
.cl-loading__status { font: inherit; font-size: 0.875rem; line-height: 1.4; margin: 0; }

@keyframes cl-loading-breathe {
  0%, 100% { opacity: .56; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-loading__logo { animation: none; opacity: 1; transform: none; }
}

@media (prefers-color-scheme: dark) {
  .cl-loading {
    --cl-loading-dark-background: rgba(13, 17, 23, 0.6);
    background: var(--cl-loading-dark-background, var(--cl-loading-background));
  }
}