/* Password field with show toggle, and the live rules checklist under new-password fields */
.password-field { position: relative; }
.password-field input { padding-right: 52px; }
.password-field__toggle { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 48px; height: 100%; color: var(--stone); transition: color var(--dur-fast) ease; }
.password-field__toggle .icon { width: 18px; height: 18px; }
.password-field__toggle[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
	.password-field__toggle:hover { color: var(--ink); }
}

.password-rules { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.password-rules__meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.password-rules__segment { position: relative; height: 2px; overflow: hidden; background: var(--line); }
.password-rules__segment::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rules-tone, var(--ink));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 240ms var(--ease-out), background-color var(--dur-fast) ease;
}
.password-rules[data-met="1"] { --rules-tone: var(--clay); }
.password-rules[data-met="2"] { --rules-tone: var(--earth); }
.password-rules[data-met="3"] { --rules-tone: var(--olive); }
.password-rules[data-met="1"] .password-rules__segment:nth-child(-n+1)::after,
.password-rules[data-met="2"] .password-rules__segment:nth-child(-n+2)::after,
.password-rules[data-met="3"] .password-rules__segment::after { transform: scaleX(1); }

.password-rules__list { display: grid; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--body-text); }
.password-rules__rule { display: flex; align-items: center; gap: 10px; transition: color var(--dur-fast) ease; }
.password-rules__mark { display: grid; flex: none; place-items: center; width: 16px; height: 16px; border: 1px solid var(--sand); border-radius: 50%; color: var(--bone); transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.password-rules__mark .icon { width: 10px; height: 10px; clip-path: inset(0 100% 0 0); transition: clip-path 240ms var(--ease-out); }
.password-rules__rule[data-met="true"] { color: var(--ink); }
.password-rules__rule[data-met="true"] .password-rules__mark { border-color: var(--olive); background: var(--olive); }
.password-rules__rule[data-met="true"] .password-rules__mark .icon { clip-path: inset(0); }
.password-rules[data-attempted] .password-rules__rule[data-met="false"] { color: var(--clay); }
.password-rules[data-attempted] .password-rules__rule[data-met="false"] .password-rules__mark { border-color: var(--clay); }

@media (prefers-reduced-motion: reduce) {
	.password-rules__segment::after, .password-rules__mark .icon { transition: none; }
}