/* ==========================================================================
   Form enhancements
   --------------------------------------------------------------------------
   Paired with static/js/password-toggle.js. The wrapper is created at runtime,
   so these rules must not assume any particular template markup.
   ========================================================================== */

.pw-field {
  position: relative;
  display: block;
}

/* Keep the toggle clear of the text being typed. The padding is applied to the
   input rather than the wrapper so it works with whatever input styling the
   surrounding form already uses. */
.pw-field > input {
  width: 100%;
  padding-right: 2.75rem;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-slate-500, #6d736b);
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.pw-toggle:hover {
  color: var(--color-slate-950, #111411);
  background: var(--color-slate-100, #eae8de);
}

.pw-toggle:focus-visible {
  outline: 2px solid var(--color-orange-300, #dcff54);
  outline-offset: 1px;
}

.pw-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* The six-digit confirmation code input is centred and letter-spaced; a toggle
   would sit on top of the digits, and a one-time code is not a secret worth
   hiding from the person who just received it. */
input[autocomplete="one-time-code"] ~ .pw-toggle {
  display: none;
}

/* ==========================================================================
   Navigation progress
   --------------------------------------------------------------------------
   With boosted navigation the browser's own loading indicator never appears,
   so a slow request would otherwise look like nothing happened. htmx toggles
   .htmx-request on the indicator for the duration.
   ========================================================================== */

.nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.nav-progress.htmx-request { opacity: 1; }

.nav-progress span {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--color-orange-300, #dcff54);
  animation: nav-progress-slide 1.1s ease-in-out infinite;
}

@keyframes nav-progress-slide {
  0%   { margin-left: -30%; }
  100% { margin-left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-progress span { animation: none; width: 100%; }
}