/* =========================================================================
   Mostra/nascondi password  ·  HOWAR MIRROR™
   Va in coppia con assets/js/mirror-password.js. Le due pagine di
   autenticazione (mirror-auth.css) e l'area riservata (mirror.css) hanno
   fogli di stile diversi e campi con misure diverse: queste regole stanno
   in un file loro perche' valgano in tutte e due senza essere copiate.
   Nessuna misura fissa di altezza: il bottone si adatta al campo che trova.
   ========================================================================= */

.pw-wrap { position: relative; }

/* Il testo digitato non deve mai finire sotto all'occhio, nemmeno lungo. */
.pw-wrap > input { padding-right: 46px; }

.pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  color: #9ca3af; transition: color .2s ease;
}
.pw-toggle:hover { color: #57A035; }
.pw-toggle:focus-visible { outline: 2px solid #57A035; outline-offset: -2px; border-radius: 8px; }
.pw-toggle svg { width: 19px; height: 19px; display: block; }

/* Un solo occhio visibile per volta, e lo stato lo detta aria-pressed:
   cosi' non c'e' una classe da tenere allineata a mano all'attributo. */
.pw-toggle .pw-off { display: none; }
.pw-toggle[aria-pressed="true"] .pw-on  { display: none; }
.pw-toggle[aria-pressed="true"] .pw-off { display: block; }

/* Edge e IE mettono il loro occhio nativo: due occhi sono uno di troppo. */
.pw-wrap > input::-ms-reveal,
.pw-wrap > input::-ms-clear { display: none; }

/* Requisiti della nuova password e confronto con la ripetizione (16/09/2026).
   Grigio finche' manca, verde con la spunta quando c'e'. */
.pw-regole { list-style: none; margin: 8px 0 0; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 12.5px; color: #6b7280; }
.pw-regole li { position: relative; padding-left: 18px; line-height: 1.4; }
.pw-regole li::before { content: "○"; position: absolute; left: 0; top: 0; color: #9ca3af; }
.pw-regole li.ok { color: #3f7826; }
.pw-regole li.ok::before { content: "✓"; color: #57A035; font-weight: 700; }
@media (max-width: 420px) { .pw-regole { grid-template-columns: 1fr; } }
.pw-uguali { margin: 6px 0 0; font-size: 12.5px; color: #b91c1c; }
.pw-uguali.ok { color: #3f7826; }
.pw-uguali[hidden] { display: none; }