/* Password checklist (Views/Shared/_PasswordChecklist): grey until a rule is met, then green. */
.pw-checklist { font-size: .85rem; }
.pw-meter { height: 6px; border-radius: 3px; background: rgba(128, 128, 128, .3); overflow: hidden; }
.pw-meter > span { display: block; height: 100%; width: 0; background: #dc3545; transition: width .2s, background-color .2s; }
.pw-meter-label { margin-top: .25rem; opacity: .8; }
/* Two columns on every screen size; a rule that wraps keeps its text aligned under itself, not under the icon. */
.pw-rules { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .9rem; }
.pw-rules li { display: flex; align-items: flex-start; gap: .35rem; min-width: 0; line-height: 1.3; opacity: .7; }
.pw-rules li[hidden] { display: none; }
.pw-rules li.is-met { opacity: 1; color: #2fbf71; }
.pw-rules li i { flex: none; margin-top: .1em; }

/* Narrow phones: slightly smaller text so each rule still fits on one or two lines. */
@media (max-width: 400px) {
    .pw-checklist { font-size: .78rem; }
    .pw-rules { column-gap: .6rem; }
}