/* ============================================================
   QINTA MD3 — password requirement checklist (.pkt-pwd-rules)

   Shown under every "new password" field. Markup: /pages/common/passwordRules.xhtml,
   state: core/js/password-policy.js, rules: hr.ivuglec.core.security.PasswordPolicy.

   Ships as its own file rather than living in core-components.css because the widget
   also has to work on the PUBLIC login page, which deliberately loads only brand.css
   + login-md3.css and must not pull in the whole secured-app component layer.
   Colour tokens come from brand.css, which every page that uses this already loads.

   Untouched form = neutral grey circles; once typing starts (.touched) unmet rules
   turn red and met ones green. The mark GLYPH changes too, so the state never depends
   on colour alone (WCAG 1.4.1).
   ============================================================ */
.pkt-pwd-rules{margin-top:10px;padding:12px 14px;background:var(--surface-1);border-radius:12px;display:grid;gap:8px}
.pkt-pwd-rules .pwd-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-subtle)}
.pkt-pwd-rules .pwd-rule{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:9px;font-size:13px;line-height:1.4;color:var(--on-surface-muted)}
.pkt-pwd-rules .pwd-rule .mark{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--outline);display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;transition:background .15s,border-color .15s,color .15s}
.pkt-pwd-rules .pwd-rule .cnt{font-size:12px;font-weight:700;color:var(--on-surface-subtle);font-variant-numeric:tabular-nums}
/* met — styled the same in both states, so the first satisfied rule confirms itself at once */
.pkt-pwd-rules .pwd-rule.ok{color:var(--on-surface)}
.pkt-pwd-rules .pwd-rule.ok .mark{background:var(--t-50);border-color:var(--t-50);color:#fff}
.pkt-pwd-rules .pwd-rule.ok .mark::before{content:'\2713'}
.pkt-pwd-rules .pwd-rule.ok .cnt{color:var(--t-30)}
/* unmet, but only once the user has started typing */
.pkt-pwd-rules.touched .pwd-rule:not(.ok){color:var(--e-40)}
.pkt-pwd-rules.touched .pwd-rule:not(.ok) .mark{border-color:var(--e-40);color:var(--e-40)}
.pkt-pwd-rules.touched .pwd-rule:not(.ok) .mark::before{content:'\2715'}
.pkt-pwd-rules.touched .pwd-rule:not(.ok) .cnt{color:var(--e-40)}