/* Kennwortfelder: Augen-Button zum Einblenden, Anforderungs-Chips und
   Live-Status des Einladungscodes (Registrierung). Farben nur aus Tokens. */

.pw-field {
    position: relative;
}

.pw-field input {
    padding-right: 2.75rem;
}

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: var(--on-surface-variant);
    background: transparent;
    cursor: pointer;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
    color: var(--on-surface);
}

.pw-toggle .material-symbols-outlined {
    font-size: 20px;
}

/* Über dem Feld, nicht darunter: dort legen Passwort-Manager ihr Popup ab.
   min-height hält die Zeile auch leer (Bestätigungsfeld) - sonst springt das
   Feld beim Tippen nach unten. */
.pw-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    min-height: 1.25rem;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--on-surface-variant);
}

.pw-rules li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.15s ease;
}

.pw-rules li::before {
    content: "\2022";
    display: inline-block;
    width: 0.75rem;
    text-align: center;
    font-weight: 700;
}

.pw-rules li.is-met {
    color: var(--success);
}

.pw-rules li.is-met::before {
    content: "\2713";
}

.pw-rules li.is-unmet {
    color: var(--warning);
}

/* Nur sichtbar, wenn verletzt bzw. (Bestätigung) sobald etwas eingegeben ist */
.pw-rules li[data-rule="ascii"]:not(.is-unmet),
.pw-rules li[data-rule="match"]:not(.is-met):not(.is-unmet) {
    display: none;
}

.invite-status {
    margin-top: 0.375rem;
    min-height: 1.25rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--on-surface-variant);
}

.invite-status.is-valid {
    color: var(--success);
}

.invite-status.is-invalid {
    color: var(--warning);
}

/* Einladungscode: Feld und Hinweistext auf einer Linie, mobil untereinander */
.invite-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .invite-row {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .invite-row .cc-input {
        flex: 0 0 33%;
    }
}