/*
 * Blue Team - Robert Breutzmann, Miguel Fernandez, Carolina Rodriguez, Sara White
 * Primary Author/Owner - Robert Breutzmann
 * src/main/webapp/css/passwordRules.css
 *
 * Styles for the "password must contain" checklist box
 * (WEB-INF/includes/passwordRules.jsp / js/passwordRules.js). Depends on
 * site.css being linked first - every color here comes from a
 * semantic variable, no hex values.
 */

.password-rules {
	/* Deliberately distinct from a form field: a warm coral/golden
	   accent instead of a form-field surface, smaller and centered
	   rather than a full-width bordered box that reads as another
	   entry. */
	background: color-mix(in srgb, var(--color-golden-hour) 18%, var(--color-surface-neutral));
	color: var(--color-charcoal-navy);
	border: 1px solid var(--color-sunset-coral);
	border-radius: var(--radius-inner);
	max-width: 80%;
	margin: 0.25rem auto 0;
	padding: 0.75rem 1rem;
	font-size: 0.78rem;
	text-align: center;
}

.password-rules p {
	margin: 0 0 0.4rem;
	font-weight: 600;
}

.password-rules ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	text-align: left;
}

.password-rules li {
	position: relative;
	padding-left: 1.2rem;
	margin-bottom: 0.3rem;
	color: var(--color-charcoal-navy);
}

.password-rules li::before {
	content: "\2022";
	position: absolute;
	left: 0.3rem;
	color: currentColor;
}

.password-rules li.met {
	color: var(--color-charcoal-navy);
}

.password-rules li.met::before {
	content: "\2713";
	color: var(--color-ocean-blue);
}