/* Shared next-step cue. Keep all three packaged copies identical. */
@property --cma-cue-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cma-next-step {
  position: relative;
  isolation: isolate;
}
.cma-next-step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--cma-cue-angle), #126b58 0deg 250deg, #a0e5da 285deg, #fbffd2 315deg, #126b58 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: cma-next-step-shine 8s linear infinite;
}
@keyframes cma-next-step-shine {
  to { --cma-cue-angle: 360deg; }
}
.cma-next-step:disabled::before,
.cma-next-step[aria-disabled="true"]::before,
.cma-next-step[aria-busy="true"]::before,
.cma-next-step.is-working::before,
.cma-next-step.is-busy::before,
.cma-next-step.is-success::before,
.cma-next-step.was-clicked::before {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .cma-next-step::before {
    animation: none;
    background: #126b58;
  }
}
@media (forced-colors: active) {
  .cma-next-step::before {
    animation: none;
    background: none;
    padding: 0;
    border: 2px solid ButtonText;
    -webkit-mask: none;
    mask: none;
  }
}