/* Hand-written overrides for the new-design login screens.
 *
 * style-scoped.css is generator output (scripts/newlogin/scope-css.py) and must
 * stay byte-reproducible, so anything the vendor sheet does not cover — and any
 * collision with the legacy css5/login.css the launcher intentionally keeps for
 * sibling screens (OTP/terms/authorize) — is corrected here. Loaded AFTER
 * style-scoped.css. Everything is scoped under .nl.
 */

/* 0. Wrapper top padding: the vendor's body{padding-top:190px} (fixed-masthead
 * offset, stepped down in media queries) translated onto .nl, but its
 * login-page cancellation - bare `.is-login-page{padding-top:0}`, which on the
 * vendor hits the SAME body element - became a descendant rule on the inner
 * wrapper div. So .nl kept an offset the vendor body never renders on login
 * screens (the hero carries its own padding via
 * .is-login-page .module-page-intro instead). Cancel it here; overrides.css
 * loads after style-scoped.css, so this wins over every media-query step. */
.nl {
	padding-top: 0;
}

/* 1. Password reveal chip: legacy `.main-form .pass` absolute-positions against
 * the wrong ancestor and hides the label via text-indent:101%. Neutralise and
 * restyle as a small text chip inside the right edge of the password field.
 * The .input-wrap carries pb1-5 (1.5em bottom padding), so the chip anchors
 * above that padding, not at the wrap's very bottom: the offset is the wrap's
 * own 1.5 x --g-size-body-sm padding (the chip's em is pinned at 12px and
 * cannot track it) plus ~half the leftover field height, which centres the
 * 22px chip in the field. Verified against rendered previews (T8/UAT).
 * Without these resets the legacy `.main-form [type=button]` rule
 * (height:40px, uppercase, bold, lime) and the theme button cascade inflate
 * the chip to 40px, overhanging the input. */
.nl .input-wrap {
	position: relative;
}
.nl .main-form button.pass {
	position: absolute;
	right: 10px;
	top: auto;
	bottom: calc(1.5 * var(--g-size-body-sm) + 13px);
	width: auto;
	height: auto; /* legacy .main-form [type=button] sets height:40px — the actual overhang cause */
	overflow: visible;
	text-indent: 0;
	white-space: nowrap;
	background: none;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	color: inherit;
	cursor: pointer;
}
.nl .main-form button.pass:hover {
	opacity: .7;
}

/* 2. Link boxes: the vendor sheet has no .link-box rules; make them
 * self-contained so the page never depends on legacy login.css:545
 * (which also indents links 34px for icons that no longer exist). */
.nl .link-box {
	font-size: 0.875rem;
	margin-bottom: 0;
}
.nl .link-box a {
	color: inherit;
	text-decoration: underline;
	padding-left: 0;
}
.nl .link-box a:hover {
	text-decoration: none;
}

/* 3. Legacy .main-form collisions on sizing: css5/login.css pins height:40px
 * and its own font sizes on the card's fields with higher specificity than
 * the theme's element rules. Neutralise with inherit/auto (no hardcoded
 * sizes) so the theme values flow through. The reveal chip keeps its own
 * 12px sizing via the more specific button.pass rule above.
 * The .main-form container rule itself needs !important to out-cascade the
 * legacy `font-size:12px!important / line-height:1.3!important`, and its
 * old-layout distortions (600px max-width, 65px right padding, 10% top
 * padding, overflow:hidden) are reset so the vendor card layout applies. */
.nl .main-form {
	font-size: inherit !important;
	line-height: inherit !important;
	max-width: none;
	padding: 0;
	overflow: visible;
}
.nl .main-form label,
.nl .main-form input[type="email"],
.nl .main-form input[type="password"],
.nl .main-form input[type="submit"] {
	font-size: inherit;
}
.nl .main-form input[type="email"],
.nl .main-form input[type="password"],
.nl .main-form input[type="submit"] {
	height: auto;
}
/* Legacy also stretches the submit to width:100%; vendor's button is
 * auto-width (theme .8em padding), left in the .flex-wrap.sb footer row
 * with the reset link right-aligned on the same line. */
.nl .main-form input[type="submit"] {
	width: auto;
	text-transform: none; /* legacy uppercases it; vendor renders "Login" */
}
/* Legacy `.main-form [type=button]` (width:100%, height:40px, lime fill,
 * white uppercase text) collides with the theme's .button variants used on
 * the password_update screen. Neutralise the layout distortions for all
 * theme buttons; background/color only where no filled variant supplies
 * them (an attribute selector outranks .button.button-lime-green, so the
 * :not() guards keep the filled variants intact). button.pass is a <button>
 * element, untouched by these input[] selectors. */
.nl .main-form input[type="button"] {
	width: auto;
	height: auto;
	text-transform: none;
}
.nl .main-form input[type="button"].button:not(.button-lime-green):not(.button-white) {
	background: none;
	color: inherit;
}

/* 4. Visible keyboard focus (spec accessibility requirement): legacy login.css
 * sets * { outline: 0 } which would make focus invisible inside the wrapper.
 * #96c33d is the theme lime-green (style-scoped.css text-lime-green/bg-lime-green). */
.nl a:focus-visible,
.nl button:focus-visible,
.nl input:focus-visible,
.nl [tabindex]:focus-visible {
	outline: 2px solid #96c33d;
	outline-offset: 2px;
}