/* Show/hide toggle for plain (non-Vue) password inputs.
   Markup: views/components/password-field-plain.ejs
   Behaviour: js/password-toggle.js

   Deliberately geometry-agnostic: /login-teacher and /teacher style their inputs
   differently (.register-panel-input vs .register-teacher-input), so this file
   owns only the overlay and never the input's own look.

   The Vue login fields are a separate implementation — .login-input-wrap /
   .password-toggle in login.css. Both files load together on /login-teacher,
   so the class names must stay distinct. */

.pw-field {
	position: relative;
}

/* Keep typed text clear of the button. Bootstrap's .form-control and the two
   register panels both set `padding` shorthand at (0,1,0); the child selector
   puts this at (0,1,1) so it wins regardless of load order. */
.pw-field > input {
	padding-right: 2.75rem;
}

.pw-field-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: #94a3b8;
	cursor: pointer;
	line-height: 0;
}

.pw-field-toggle:hover {
	color: #475569;
}

.pw-field-toggle:focus-visible {
	outline: 2px solid #ffa800;
	outline-offset: -2px;
	border-radius: 0.75rem;
}

.pw-field-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	display: none;
}

/* Which icon shows is derived from aria-pressed rather than tracked separately,
   so the icon and the announced state can never drift apart. */
.pw-field-toggle[aria-pressed="false"] .pw-icon-show,
.pw-field-toggle[aria-pressed="true"] .pw-icon-hide {
	display: block;
}