/* Status wrapper */
.mc-docs-status{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-left:.5rem; font-size:.95rem; color:#0d6efd; /* starting color */
}

/* Bigger, clearer spinner that also changes color */
.mc-spinner{
  --mc-size: 20px;          /* size */
  --mc-thickness: 3px;      /* ring thickness */
  width:var(--mc-size); height:var(--mc-size);
  border-radius:50%;
  border: var(--mc-thickness) solid rgba(0,0,0,.12); /* muted track */
  border-top-color: currentColor;                    /* live segment */
  border-right-color: currentColor;                  /* second live segment for stronger cue */
  animation: mcspin .7s linear infinite, mchue 2.4s linear infinite;
  /* subtle glow for contrast on busy backgrounds */
  filter: drop-shadow(0 0 2px rgba(0,0,0,.15));
}

/* “Loading…” label */
.mc-text{ font-weight:500 }

/* Rotation */
@keyframes mcspin { to { transform: rotate(360deg) } }

/* Cycle the color smoothly */
@keyframes mchue {
  0%   { color:#0d6efd }   /* blue */
  25%  { color:#0dcaf0 }   /* cyan */
  50%  { color:#20c997 }   /* teal/green */
  75%  { color:#ffc107 }   /* amber */
  100% { color:#0d6efd }   /* back to blue */
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .mc-spinner{ animation: mchue 4s linear infinite } /* keep color pulse, no rotation */
}