/*
 * Champ mot de passe : bouton Afficher/Masquer et jauge de force à 4 niveaux.
 * Partagé par l'inscription (T56) et Mon compte (T60). `data-active` est posé par js/signup-form.js.
 */
.rb-auth__password-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.rb-auth__password-wrap > :first-child {
    flex: 1;
    min-width: 0;
}

.rb-auth__toggle {
    align-self: flex-start;
    padding: 7px 12px;
    font-family: var(--rb-font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--rb-text-muted);
    cursor: pointer;
    background-color: var(--rb-bg-inset);
    border: 1px solid var(--rb-border-chip);
    border-radius: 7px;
}

.rb-auth__password-wrap .rb-auth__toggle {
    align-self: center;
}

.rb-auth__toggle:hover {
    color: var(--rb-accent-cyan);
}

.rb-auth__gauge {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 4px;
    margin-top: 2px;
}

.rb-auth__gauge-bar {
    height: 3px;
    background-color: var(--rb-border-input);
    border-radius: 2px;
}

.rb-auth__gauge-label {
    grid-column: 1 / -1;
    min-height: 1lh;
    font-size: 12px;
    font-weight: 600;
    color: var(--rb-text-label);
}

/* Le niveau est celui de la dernière barre active ; le libellé texte double la couleur. */
.rb-auth__gauge-bar[data-active] {
    background-color: #F2788A;
}

.rb-auth__gauge:has(.rb-auth__gauge-bar:nth-child(2)[data-active]) .rb-auth__gauge-bar[data-active] {
    background-color: var(--rb-accent-gold);
}

.rb-auth__gauge:has(.rb-auth__gauge-bar:nth-child(3)[data-active]) .rb-auth__gauge-bar[data-active] {
    background-color: var(--rb-accent-cyan);
}

.rb-auth__gauge:has(.rb-auth__gauge-bar:nth-child(4)[data-active]) .rb-auth__gauge-bar[data-active] {
    background-color: var(--rb-accent-green);
}