/* pwmeter.css - password strength feedback. Added 3 September 2026, WAPT observation 3.
   Paired with assets/js/pwmeter.js. Colour is a secondary cue: the reason text
   beside the bar is what actually tells someone what to change. */

.pwmeter {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 2px;
	font-size: 12px;
	line-height: 1.4;
	flex-wrap: wrap;
}

.pwmeter-bar {
	flex: 0 0 110px;
	height: 6px;
	border-radius: 3px;
	background: #e3e3e3;
	overflow: hidden;
}

.pwmeter-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: #bd362f;
	transition: width .15s linear, background .15s linear;
}

.pwmeter-text { flex: 1 1 180px; color: #666; }

.pwmeter[data-score="0"] .pwmeter-bar span { background: #bd362f; }
.pwmeter[data-score="1"] .pwmeter-bar span { background: #f89406; }
.pwmeter[data-score="2"] .pwmeter-bar span { background: #e0b400; }
.pwmeter[data-score="3"] .pwmeter-bar span { background: #51a351; }
.pwmeter[data-score="4"] .pwmeter-bar span { background: #2CD5C4; }

.pwmeter[data-score="0"] .pwmeter-text { color: #bd362f; }
.pwmeter[data-score="-1"] .pwmeter-bar { visibility: hidden; }