/**
 * 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;
	}
}

/* --- show / hide (ITD-202) ----------------------------------------------- */

/* The wrapper exists only to give the button something to be positioned
   against. Block, so it occupies the same box in the layout flow that the bare
   input did - an inline wrapper would collapse the field's width on themes that
   set it to 100%. */
.gba-pw-field {
	position: relative;
	display: block;
}

/* Room for the button, so typed characters never run underneath it. The type
   swaps between password and text, so both must be covered. !important for the
   same reason the state colours need it: all three themes set input padding
   with higher specificity than a plain element selector can reach. */
.gba-pw-field input[type="password"],
.gba-pw-field input[type="text"] {
	padding-right: 2.9em !important;
}

.gba-pw-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.9em;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #6b6b6b;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.gba-pw-toggle:hover {
	color: #3a3a3a;
	background: none;
}

/* Pressed means the password is currently readable. Worth marking in more than
   the icon: somebody who tabbed here needs to know the state before they decide
   whether to type. */
.gba-pw-toggle[aria-pressed="true"] {
	color: #3a3a3a;
}

/* Never remove the focus ring. A button with no visible focus is unreachable in
   practice for a keyboard user, and this one changes whether a password is on
   screen. */
.gba-pw-toggle:focus {
	outline: 2px solid #3a3a3a;
	outline-offset: -2px;
}

@media ( prefers-color-scheme: dark ) {
	.gba-pw-toggle {
		color: #b0b0b0;
	}

	.gba-pw-toggle:hover,
	.gba-pw-toggle[aria-pressed="true"] {
		color: #e4e4e4;
	}
}