/**
 * ITD-199. Password guidance styling.
 *
 * NEUTRAL BY DESIGN. Three storefronts and two themes load this, so it sets
 * structure, state and rhythm and stays out of typography and brand colour - it
 * inherits its font from whatever wraps it. The only colours are the semantic
 * pass/fail ones, which must read identically on every site.
 *
 * STATE IS NEVER SIGNALLED BY COLOUR ALONE. Around 1 in 12 men cannot reliably
 * distinguish red from green, and a forced password reset is not the place to
 * make someone guess. Every state carries a glyph as well as a colour, and the
 * same message is announced through an aria-live region.
 *
 * Sized in em throughout so it scales with whatever the theme sets, rather than
 * fighting three different base font sizes.
 */

.gba-pw {
	/* The panel follows a two-column field pair, so it must clear both or it
	   wraps beside them and the explanation drifts away from the red field. */
	clear: both;
	width: 100%;
	margin: 0.6em 0 1.4em;
	font-size: 0.875em;
	line-height: 1.5;
}

/* --- the requirement checklist: this is the RULE ------------------------- */

.gba-pw__reqs {
	list-style: none;
	margin: 0 0 0.6em;
	padding: 0;
}

.gba-pw__req {
	display: flex;
	align-items: baseline;
	gap: 0.55em;
	margin: 0 0 0.3em;
	color: #5c5c5c;
	transition: color 120ms ease;
}

/* A fixed-width glyph column so the labels stay aligned as states change.
   Without it, every tick and cross shifts the text by a pixel or two and the
   whole list appears to twitch while someone types. */
.gba-pw__req::before {
	content: "\2022";
	flex: 0 0 1em;
	text-align: center;
	font-weight: 700;
	color: #a5a5a5;
}

/* Neutral until touched. An unmet requirement is not a failure before the
   customer has typed anything, and marking it red on load reads as an error
   they have not made yet. */
.gba-pw__req.is-ok {
	color: #1b7f3b;
}

.gba-pw__req.is-ok::before {
	content: "\2713";
	color: #1b7f3b;
}

.gba-pw__req.is-bad {
	color: #b3261e;
}

.gba-pw__req.is-bad::before {
	content: "\2715";
	color: #b3261e;
}

.gba-pw__note {
	margin: 0 0 0.85em;
	color: #6b6b6b;
	font-size: 0.92em;
}

/* --- the strength meter: this is ADVICE, not a gate ---------------------- */

/* Segmented rather than one sliding bar. A continuous bar invites the reading
   "longer is passing"; five discrete steps read as a scale, and the filled
   count is legible at a glance without comparing widths. */
.gba-pw__meter {
	display: flex;
	gap: 3px;
	height: 5px;
	margin: 0;
	padding: 0;
	overflow: visible;
	background: none;
	border-radius: 0;
}

.gba-pw__meter-seg {
	flex: 1 1 0;
	border-radius: 2px;
	background: #e2e2e2;
	transition: background-color 140ms ease;
}

.gba-pw__meter[data-score="0"] .gba-pw__meter-seg.is-lit { background: #b3261e; }
.gba-pw__meter[data-score="1"] .gba-pw__meter-seg.is-lit { background: #cf5a25; }
.gba-pw__meter[data-score="2"] .gba-pw__meter-seg.is-lit { background: #bd9520; }
.gba-pw__meter[data-score="3"] .gba-pw__meter-seg.is-lit { background: #4c9a2a; }
.gba-pw__meter[data-score="4"] .gba-pw__meter-seg.is-lit { background: #1b7f3b; }

.gba-pw__strength {
	margin: 0.45em 0 0;
	color: #5c5c5c;
	font-size: 0.92em;
}

/* --- the fields themselves ----------------------------------------------- */

/* Fill as well as border and outline, per the brief. The fill is kept very
   light on purpose: a saturated background behind typed characters is hard to
   read, and a password field is the worst place to lose legibility.
   !important is regrettable but necessary - all three themes set input borders
   with higher specificity than a plain element selector can reach. */
input[type="password"].is-bad {
	border-color: #b3261e !important;
	background-color: #fdf3f2 !important;
	box-shadow: 0 0 0 3px rgba( 179, 38, 30, 0.14 ) !important;
}

input[type="password"].is-ok {
	border-color: #1b7f3b !important;
	background-color: #f4faf6 !important;
}

/* Keep the browser's own focus ring visible on top of our state colours rather
   than replacing it. Losing the focus ring is a keyboard-navigation regression
   that is easy to introduce and hard to notice. */
input[type="password"].is-bad:focus,
input[type="password"].is-ok:focus {
	outline-offset: 1px;
}

/* --- announced, not shown ------------------------------------------------ */

.gba-pw__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/* --- quiet until it has something to say --------------------------------- */

/* An optional field - My Account's change-password - shows no requirements
   until the customer starts typing. Rules for a change they have not chosen to
   make are noise, and on a field that is legitimately left empty they read as
   an error nobody has made. */
.is-dormant {
	display: none !important;
}

/* --- preferences --------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.gba-pw__req,
	.gba-pw__meter-seg {
		transition: none;
	}
}

/* The greys above assume a light field. On a dark theme they drop to near
   invisible, so lift the neutral text and the unlit segments only - the
   semantic colours stay put, because their meaning must not shift with the
   background. */
@media ( prefers-color-scheme: dark ) {
	.gba-pw__req {
		color: #c4c4c4;
	}

	.gba-pw__req::before {
		color: #8a8a8a;
	}

	.gba-pw__note,
	.gba-pw__strength {
		color: #b0b0b0;
	}

	.gba-pw__meter-seg {
		background: #4a4a4a;
	}
}