/* Busy state for submit buttons. Deliberately neutral so it sits inside both
   the Bootstrap and Tailwind templates without being restyled per page. */

.dh-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .5em;
  vertical-align: -.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dh-spin .65s linear infinite;
  /* Inherits the button's text colour, so it works on any button style. */
  opacity: .9;
}

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

/* Motion sensitivity: keep an indicator, drop the rotation. */
@media (prefers-reduced-motion: reduce) {
  .dh-spinner { animation: none; opacity: .55; }
}

.dh-busy-label { vertical-align: middle; }

/* A button carrying a name/value cannot be disabled — it would stop being
   submitted — so it is visually and interactively locked instead. */
.dh-busy-locked {
  pointer-events: none;
  opacity: .75;
  cursor: progress;
}

button[aria-busy="true"],
a[aria-busy="true"] {
  cursor: progress;
  opacity: .85;
}

/* Links opted in with data-busy are usually styled as buttons already. */
a[aria-busy="true"] { pointer-events: none; }

/* Top progress bar — visible whenever the page is doing something in the
   background: navigating, submitting a form, or a fetch/XHR that takes
   longer than a blink. */
#dh-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20000;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
#dh-progress.on { opacity: 1; }
#dh-progress span {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, #4e66f8, #7c3aed, #4e66f8);
  border-radius: 0 3px 3px 0;
  animation: dh-progress 1.1s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(78,102,248,.6);
}
@keyframes dh-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  #dh-progress span { animation: none; width: 100%; opacity: .6; }
}