/* Extracted from an inline <style> block so the page body stays valid HTML
   (issue #250). Linked with <link rel="stylesheet">, which is body-ok. */

/* Password Requirements */
.password-strength-container {
    font-size: 0.8rem;
}

.password-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
}

/* Desktop: 3 columns (left, middle, right blank) */
@media (min-width: 768px) {
    .password-requirements {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .password-requirements .req-col-right {
        display: block;
    }
}

/* Mobile: 2 columns only */
@media (max-width: 767px) {
    .password-requirements {
        grid-template-columns: 1fr 1fr;
    }
}

.password-requirements .req-column {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.password-requirements .requirement {
    color: #dc3545;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.password-requirements .requirement i {
    font-size: 0.9rem;
}

.password-requirements .requirement.met {
    color: #198754;
}

.password-requirements .requirement.met i {
    color: #198754;
}

.password-requirements .requirement.unmet {
    color: #dc3545;
}

.password-requirements .requirement.unmet i {
    color: #dc3545;
}

/* Password Match Indicator */
#passwordMatch {
    font-size: 0.8rem;
}

#passwordMatch.match {
    color: #198754;
}

#passwordMatch.no-match {
    color: #dc3545;
}