.password-requirements {
    margin: var(--space-1) 0 var(--space-5) var(--space-5); /* left edge lines up with .form-label */
    color: var(--prim-color);
    font-size: 14px; /* same as .form-error */
    line-height: 1.3;
}

    .password-requirements .pwr-title {
        margin: 0 0 var(--space-1);
        font-size: 10px; /* same treatment as .form-label */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    /* Two columns where there is room, one on narrow screens */
    .password-requirements .pwr-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: var(--space-1) var(--space-5);
    }

    .password-requirements .pwr-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-width: 0;
    }

    .password-requirements .pwr-text {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Round marker, contour of .form-check-input */
    .password-requirements .pwr-icon {
        position: relative;
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
        border: 1px solid var(--grey-color);
        border-radius: var(--radius-full);
        background-color: var(--white-color);
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    /* Met: filled with --success-color and a white check */
    .password-requirements .pwr-item.is-met .pwr-icon {
        border-color: var(--prim-color);
        background-color: var(--prim-color);
    }

        .password-requirements .pwr-item.is-met .pwr-icon::after {
            content: "";
            position: absolute;
            left: 3.5px;
            top: 1px;
            width: 5px;
            height: 8px;
            border: solid var(--white-color);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

    .password-requirements.pwr-attempted .pwr-item.is-unmet {
        color: var(--danger-color);
    }

        .password-requirements.pwr-attempted .pwr-item.is-unmet .pwr-icon {
            border-color: var(--danger-color);
        }

    /* Screen-reader-only state text */
    .password-requirements .pwr-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .password-requirements .pwr-icon {
        transition: none;
    }
}