/**
 * Password policy checklist (Views/Shared/_PasswordPolicyChecklist.cshtml).
 *
 * Loaded directly via <link> on every surface that hosts a password input —
 * the auth shell (Login/Register/Forgot/Reset) and the user-area Security
 * page. Plain CSS, no Tailwind directives, so it does not need to participate
 * in the PostCSS bundle freshness guards; the file is shipped as-is.
 *
 * AGENTS.md §9: tokens only (--tn-*), no hex, no inline styles. QA Audit
 * Q-005: replaces the misleading "At least 8 characters" placeholder with a
 * live-validating list of every rule Identity actually enforces server-side.
 */

.password-policy-list {
    list-style: none;
    margin: 0.125rem 0 0;
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 1px solid var(--tn-border-subtle);
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--tn-surface-panel) 72%, var(--tn-surface-inset));
    font-size: 0.8125rem;
    color: var(--tn-text-muted);
}

.password-policy-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.35;
    transition: color var(--tn-motion-fast, 120ms) ease;
}

.password-policy-rule[data-met="true"] {
    color: var(--tn-success, var(--tn-text-default));
}

.password-policy-rule__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--tn-border-strong);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--tn-text-muted);
    transition: background-color var(--tn-motion-fast, 120ms) ease,
        border-color var(--tn-motion-fast, 120ms) ease;
}

.password-policy-rule__icon::after {
    content: "";
    width: 0.34rem;
    height: 0.56rem;
    border: solid var(--tn-color-paper);
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: translateY(-1px) rotate(45deg);
    transition: opacity var(--tn-motion-fast, 120ms) ease;
}

.password-policy-rule__icon .material-symbols-outlined {
    display: none;
}

.password-policy-rule[data-met="true"] .password-policy-rule__icon {
    background: var(--tn-success, var(--tn-accent-primary));
    border-color: var(--tn-success, var(--tn-accent-primary));
}

.password-policy-rule[data-met="true"] .password-policy-rule__icon::after {
    opacity: 1;
}

.password-policy-rule__label {
    flex: 1;
}