/* Live password-complexity hints, driven by password_strength_controller.js. A rule is gray
   until it passes, then turns green and its check mark fades in. Colours are literal (not the
   site theme) since this shows on the chrome-free claim page. */

.pw-rule {
  color: #9ca3af; /* gray-400 */
  transition: color 0.15s ease;
}

.pw-rule.is-valid {
  color: #16a34a; /* green-600 */
}

.pw-rule .pw-rule-icon {
  flex: none;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.pw-rule.is-valid .pw-rule-icon {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pw-rule, .pw-rule .pw-rule-icon { transition: none; }
}