/*
 * Modale del rigger-auth. Riusa la chrome di `.settings` (stesso dialog); qui solo
 * le aggiunte: testo introduttivo, spinner accanto al campo, stati via data-state.
 */

.auth__intro {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.auth__row {
  align-items: center;
}

/*
 * Occhiolino per mostrare/nascondere la password: bottone piatto accanto al
 * campo, colore ereditato (currentColor dell'icona), enfasi solo su hover/focus.
 */
.auth__reveal {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease),
    color var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease);
}

.auth__reveal:hover {
  border-color: var(--border-soft);
  background: var(--surface-raised);
  color: var(--text-primary);
}

.auth__reveal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.auth__reveal[aria-pressed='true'] {
  color: var(--accent);
}

/* Durante il loading il campo è disabilitato: l'occhiolino segue e non si preme. */
.auth[data-state='loading'] .auth__reveal {
  pointer-events: none;
  opacity: 0.5;
}

/* Spinner: visibile solo in loading, occupa sempre lo spazio per non far saltare il layout. */
.auth__spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: auth-spin 0.7s linear infinite;
}

.auth[data-state='loading'] .auth__spinner {
  opacity: 1;
}

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

/* In errore il bordo del campo segnala il problema, oltre al testo di stato. */
.auth[data-state='error'] .auth__input {
  border-color: var(--danger);
}