/*
 * rxtm-login.css — OPTIONAL modern skin over the NATIVE wp-login.php screens.
 *
 * Design: a brand "split workspace" — the native form column on a brand-coloured
 * canvas (no card, centred) beside a floating dark identity panel (logo top,
 * tagline bottom, a soft bottom Aurora glow). Faint concentric rings sit behind
 * the form; the language switcher lives at the bottom of the form column. The
 * panel + rings are injected as decorative markup via the official login_footer
 * hook (see LoginBranding) — nothing touches the form, fields, nonces or auth.
 *
 * Safe by construction:
 *   - Scoped to `body.rxtm-login` — only applies when the overlay is enabled.
 *   - Targets WP's own structural selectors generically (`#login form …`) so the
 *     SAME identity skins every flow screen with no per-screen rules.
 *   - ADDITIVE: styles, never hides fields. 2FA / reCAPTCHA / SSO additions
 *     inherit the styling and stay visible & functional.
 *   - Logical properties + an `.rtl` hook → correct in both RTL and LTR.
 *   - No `!important`; the `body.rxtm-login #login …` scope outranks core's
 *     `.login …` rules. Brand colour reads from `--rxtm-primary` (injected
 *     inline) with an indigo fallback.
 */

/* ============================ layout (grid) ==================== */
body.rxtm-login {
	min-block-size: 100vh;
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: clamp(360px, 42%, 600px) minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	gap: 20px;
	position: relative;
	overflow: hidden;
	background-color: var(--rxtm-primary, #5b53ea);
	background-image: linear-gradient(150deg,
		var(--rxtm-primary, #5b53ea),
		color-mix(in srgb, var(--rxtm-primary, #5b53ea) 52%, #181233));
	background-attachment: fixed;
}
/* every direct child defaults to the form (inline-end) column … */
body.rxtm-login > * {
	grid-column: 2;
}
/* … except the identity panel, which is the inline-start column, full height. */
body.rxtm-login .rxtm-login-aside {
	grid-column: 1;
	grid-row: 1 / -1;
}
body.rxtm-login .clear {
	display: none;
}

/* faint concentric rings behind the form, centred on the form-side bottom corner */
body.rxtm-login .rxtm-login-rings {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	inline-size: 0;
	block-size: 0;
	z-index: 0;
	pointer-events: none;
}
body.rxtm-login .rxtm-login-rings span {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	border-radius: 50%;
	border: 1.5px solid #fff;
}
body.rxtm-login.rtl .rxtm-login-rings span {
	transform: translate(-50%, 50%);
}
body.rxtm-login:not(.rtl) .rxtm-login-rings span {
	transform: translate(50%, 50%);
}
body.rxtm-login .rxtm-login-rings span:nth-child(1) { inline-size: 180px; block-size: 180px; border-color: rgba(255, 255, 255, 0.17); }
body.rxtm-login .rxtm-login-rings span:nth-child(2) { inline-size: 340px; block-size: 340px; border-color: rgba(255, 255, 255, 0.11); }
body.rxtm-login .rxtm-login-rings span:nth-child(3) { inline-size: 500px; block-size: 500px; border-color: rgba(255, 255, 255, 0.065); }
body.rxtm-login .rxtm-login-rings span:nth-child(4) { inline-size: 660px; block-size: 660px; border-color: rgba(255, 255, 255, 0.035); }

/* form column — a centred, narrow block above the canvas + rings */
body.rxtm-login #login {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	inline-size: 100%;
	max-inline-size: 360px;
	justify-self: center;
	align-self: center;
	margin: 0;
	padding: 0;
}
/* NOTE: we deliberately do NOT force `#login > * { width:100% }` — block
 * children already fill the column, and width:100% on the padded `.message`
 * (which is content-box on wp-login) would add its 32px padding ON TOP of the
 * column width, overflowing it leftwards (wider than the fields/button). */

/* native logo H1 → screen-reader only (the logo lives in the panel) */
body.rxtm-login #login h1 {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* ====================== injected form intro ===================== */
body.rxtm-login .rxtm-login-intro {
	margin-block-end: 24px;
	text-align: center;
}
body.rxtm-login .rxtm-login-intro__title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 600;
	color: #fff;
}
body.rxtm-login .rxtm-login-intro__hint {
	margin: 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.72);
}

/* ===================== messages / errors ======================= */
body.rxtm-login #login .message,
body.rxtm-login #login .success,
body.rxtm-login #login #login_error {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 9px;
	box-sizing: border-box;
	margin: 0 0 22px;
	padding: 11px 16px;
	border: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.12);
	box-shadow: none;
	font-size: 13px;
	line-height: 1.4;
	color: #fff;
	/* The icon + text block are centred as a GROUP (justify-content:center), but the
	 * text itself is start-aligned so its first line sits flush against the icon with
	 * a fixed small gap — centring the text instead would float it away from the icon
	 * (a large phantom gap), worst on short single-line notices. */
	text-align: start;
}
/* WP wraps the notice text in a <p> with default margin AND padding (.notice p
 * { margin:.5em 0; padding:2px }) that push the text down, leaving the
 * flex-start icon floating above the first line — flatten both so the icon and
 * the first text line sit on exactly the same level. */
body.rxtm-login #login .message > *,
body.rxtm-login #login .success > *,
body.rxtm-login #login #login_error > * {
	margin: 0;
	padding: 0;
	/* match the icon box's line so the first text line and the icon share the
	 * exact same height → perfectly level (WP's .notice p sets line-height:1.5). */
	line-height: inherit;
}
body.rxtm-login #login .message::before,
body.rxtm-login #login .success::before,
body.rxtm-login #login #login_error::before {
	content: "";
	flex: none;
	inline-size: 17px;
	/* box height = one text line, so with align-items:flex-start the glyph is
	 * centred on the FIRST line whether the message is one line or many. */
	block-size: 1.4em;
	background: no-repeat center / 17px 17px;
}
body.rxtm-login #login .message::before,
body.rxtm-login #login .success::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
}
body.rxtm-login #login #login_error {
	background: rgba(255, 86, 74, 0.18);
}
body.rxtm-login #login #login_error::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffd4cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
}

/* ============================== form =========================== */
body.rxtm-login #login form {
	margin: 0;
	padding: 0;
	border: 0;
	/* fill the column regardless of any theme/plugin form padding or max-width,
	 * so the fields line up exactly with the message + button (which are direct
	 * #login children). Otherwise an inherited form inset makes the fields look
	 * narrower than the message box. */
	inline-size: auto;
	max-inline-size: none;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}
body.rxtm-login #login form label {
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.5;
}

/* underline-only inputs; the leading icon is drawn by a wrapper pseudo-element
 * (below) rather than a background-image, so it stays visible regardless of the
 * field's value or browser autofill. padding-inline-start reserves its space. */
body.rxtm-login #login form input[type="text"],
body.rxtm-login #login form input[type="email"],
body.rxtm-login #login form input[type="url"],
body.rxtm-login #login form input[type="tel"],
body.rxtm-login #login form input[type="password"] {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 46px;
	margin: 6px 0 20px;
	border: 0;
	border-block-end: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	background-color: transparent;
	/* latin credential fields → icon always on the physical LEFT */
	padding-left: 30px;
	padding-right: 0;
	font-size: 15px;
	color: #fff;
	transition: border-color 0.15s ease;
}

/* leading field icons (user / lock) as overlay pseudo-elements on the physical
 * LEFT (the fields are latin), anchored to the input row from the bottom so the
 * label height above is irrelevant. */
body.rxtm-login #login form p:has(> #user_login),
body.rxtm-login #login form .user-login-wrap,
body.rxtm-login #login form .wp-pwd {
	position: relative;
}
body.rxtm-login #login form p:has(> #user_login)::after,
body.rxtm-login #login form .user-login-wrap::after,
body.rxtm-login #login form .wp-pwd::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 20px;
	block-size: 46px;
	inline-size: 18px;
	background: no-repeat center / 18px 18px;
	pointer-events: none;
}
body.rxtm-login #login form p:has(> #user_login)::after,
body.rxtm-login #login form .user-login-wrap::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* the password input sits 6px down inside .wp-pwd (its top margin); span that
 * exact 46px input box so the lock is centred on the same line as the dots + eye */
body.rxtm-login #login form .wp-pwd::before {
	bottom: auto;
	top: 6px;
	transform: none;
	block-size: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
body.rxtm-login #login form input[type="text"]:focus,
body.rxtm-login #login form input[type="email"]:focus,
body.rxtm-login #login form input[type="url"]:focus,
body.rxtm-login #login form input[type="tel"]:focus,
body.rxtm-login #login form input[type="password"]:focus {
	outline: 0;
	box-shadow: none;
	border-block-end-color: #fff;
}
/* keep autofilled fields on-theme (Chrome/Safari force an opaque light fill) */
body.rxtm-login #login form input:-webkit-autofill,
body.rxtm-login #login form input:-webkit-autofill:hover,
body.rxtm-login #login form input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px transparent inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* show/hide password — swap WP's dashicon for a Lucide eye-closed / eye */
body.rxtm-login #login form .wp-pwd {
	position: relative;
}
/* lock on the left (base padding-left), eye on the physical right */
body.rxtm-login #login form .wp-pwd input[type="text"],
body.rxtm-login #login form .wp-pwd input[type="password"] {
	padding-right: 30px;
}
body.rxtm-login #login form .wp-pwd .button.wp-hide-pw {
	position: absolute;
	top: 6px;
	right: 0;
	left: auto;
	block-size: 46px;
	inline-size: 30px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	box-shadow: none;
}
body.rxtm-login #login form .wp-pwd .button.wp-hide-pw .dashicons {
	visibility: hidden;
	position: relative;
}
body.rxtm-login #login form .wp-pwd .button.wp-hide-pw .dashicons::after {
	content: "";
	position: absolute;
	inset: 0;
	visibility: visible;
	background: no-repeat center / 19px 19px;
}
/* password hidden → offer "eye-closed"; revealed → offer open "eye" */
body.rxtm-login #login form .wp-pwd .button.wp-hide-pw .dashicons-visibility::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8a10.6 10.6 0 0 0 20 0'/%3E%3Cpath d='m20 15-1.73-2.05'/%3E%3Cpath d='m4 15 1.73-2.05'/%3E%3Cpath d='m9 18 .72-3.25'/%3E%3Cpath d='m15 18-.72-3.25'/%3E%3C/svg%3E");
}
body.rxtm-login #login form .wp-pwd .button.wp-hide-pw .dashicons-hidden::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* remember-me row */
body.rxtm-login #login form .forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block: 4px 22px;
	font-weight: 400;
}
body.rxtm-login #login form .forgetmenot label {
	margin: 0;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
}
body.rxtm-login #login form input[type="checkbox"] {
	margin: 0;
	/* keep a consistent size — WP enlarges checkboxes to 1.5625rem on ≤782px
	 * (touch sizing), which made the "remember me" box jump on mobile. */
	inline-size: 17px;
	block-size: 17px;
	min-inline-size: 17px;
	min-block-size: 17px;
	border-radius: 5px;
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.12);
}
body.rxtm-login #login form input[type="checkbox"]:checked::before {
	/* match the smaller box (WP scales the checkmark up on mobile too) */
	inline-size: 17px;
	block-size: 17px;
	margin: -1px 0 0 -4px;
	font-size: 17px;
	line-height: 1;
}
body.rxtm-login #login form input[type="checkbox"]:checked {
	background: #fff;
	border-color: #fff;
}
body.rxtm-login #login form input[type="checkbox"]:checked::before {
	color: var(--rxtm-primary, #4f46e5);
}

/* primary submit — white pill, brand-coloured label */
body.rxtm-login #login .submit {
	margin: 0;
}
body.rxtm-login #login .button.button-primary,
body.rxtm-login #login #wp-submit {
	display: block;
	float: none;
	inline-size: 100%;
	block-size: 46px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: var(--rxtm-primary, #4f46e5);
	font-size: 15px;
	font-weight: 600;
	line-height: 46px;
	text-align: center;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
body.rxtm-login #login .button.button-primary:hover,
body.rxtm-login #login #wp-submit:hover {
	background: #f0f0fb;
}
body.rxtm-login #login .button.button-primary:active,
body.rxtm-login #login #wp-submit:active {
	transform: translateY(1px);
}

/* nav / back-to-blog links */
body.rxtm-login #login #nav,
body.rxtm-login #login #backtoblog {
	margin: 0;
	padding: 0;
	text-align: center;
	text-shadow: none;
	font-size: 12.5px;
}
body.rxtm-login #login #nav {
	margin-block-start: 22px;
}
body.rxtm-login #login #backtoblog {
	margin-block-start: 12px;
}
/* WP's leading text arrow is stripped server-side (see LoginBranding); here we
 * prepend a Lucide arrow-up-right icon at the link's inline-start. */
body.rxtm-login #login #backtoblog a::before {
	content: "";
	display: inline-block;
	inline-size: 14px;
	block-size: 14px;
	vertical-align: -2px;
	margin-inline-end: 6px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
}
body.rxtm-login #login #nav a,
body.rxtm-login #login #backtoblog a {
	color: rgba(255, 255, 255, 0.82);
	transition: color 0.15s ease;
}
body.rxtm-login #login #nav a:hover,
body.rxtm-login #login #backtoblog a:hover,
body.rxtm-login #login #nav a:focus,
body.rxtm-login #login #backtoblog a:focus {
	color: #fff;
}

/* ============ language switcher — modern, bottom of form column = */
/* WP wraps this as <div class="language-switcher"><form id="language-switcher">…>.
 * Placement targets the WRAPPER (the actual grid/flex child); the inner form
 * holds the controls. */
body.rxtm-login .language-switcher {
	grid-column: 2;
	grid-row: 2;
	justify-self: center;
	align-self: end;
	margin: 18px 0 2px;
}
body.rxtm-login #language-switcher {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}
/* globe as the leading flex item — independent of WP's screen-reader-only
 * <label> (which stays absolutely positioned/hidden), so the gaps globe↔select
 * and select↔button are equal. */
body.rxtm-login #language-switcher::before {
	content: "";
	flex: none;
	inline-size: 16px;
	block-size: 16px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}
/* hide WP's / a plugin's native language glyph — our globe (::before) replaces it */
body.rxtm-login .language-switcher .dashicons,
body.rxtm-login #language-switcher > svg,
body.rxtm-login #language-switcher > img {
	display: none;
}
body.rxtm-login #language-switcher select {
	appearance: none;
	-webkit-appearance: none;
	inline-size: auto;
	max-inline-size: 170px;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 12.5px;
	padding: 7px 14px;
	line-height: 1.4;
	cursor: pointer;
}
body.rxtm-login #language-switcher select option {
	color: #111;
}
body.rxtm-login #language-switcher .button {
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 12.5px;
	padding: 7px 14px;
	line-height: 1.4;
	box-shadow: none;
	text-decoration: none;
}
body.rxtm-login #language-switcher .button:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* ===================== floating identity panel ================== */
body.rxtm-login .rxtm-login-aside {
	box-sizing: border-box;
	min-block-size: calc(100vh - 40px);
	/* never shrink: it has overflow:hidden (for the glow), which would otherwise
	 * let it shrink below its content in a flex column and clip the tagline. */
	flex-shrink: 0;
	padding: 42px 38px;
	border-radius: 24px;
	/* dark panel derived from the brand colour: a deep brand tint → near-black */
	background: linear-gradient(150deg,
		color-mix(in srgb, var(--rxtm-primary, #5b53ea) 40%, #0c0e1a),
		color-mix(in srgb, var(--rxtm-primary, #5b53ea) 10%, #08090f));
	color: #fff;
	position: relative;
	z-index: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* soft Aurora glow — bottom only, wide spread (rises behind the tagline) */
body.rxtm-login .rxtm-login-aside::after {
	content: "";
	position: absolute;
	inset-inline: -14%;
	inset-block-end: -170px;
	block-size: 460px;
	pointer-events: none;
	background: radial-gradient(60% 100% at 50% 100%,
		color-mix(in srgb, var(--rxtm-primary, #5b53ea) 60%, transparent),
		transparent 72%);
}
body.rxtm-login .rxtm-login-aside__brand {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 11px;
}
body.rxtm-login .rxtm-login-aside__logo {
	display: block;
	max-block-size: 42px;
	inline-size: auto;
}
body.rxtm-login .rxtm-login-aside__name {
	font-size: 19px;
	font-weight: 600;
	color: #fff;
}
body.rxtm-login .rxtm-login-aside__pitch {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.55;
	color: #eceaff;
}
body.rxtm-login .rxtm-login-aside__pitch span {
	/* follows the brand colour, lightened for contrast on the dark panel */
	color: color-mix(in srgb, var(--rxtm-primary, #5b53ea) 55%, #ffffff);
}

/* ============ interim-login (re-auth modal in wp-admin) ======== */
/* The auth-check modal is a small fixed frame: drop the split entirely and
 * render a clean, COMPACT form on the brand canvas (white-on-brand still reads).
 * The panel/rings are not output here (see LoginBranding). We tighten spacing
 * and trim the secondary links/switcher so it fits the frame with no scrollbars
 * at any size. `background-attachment:scroll` avoids the fixed-layer overflow
 * that produced a stray horizontal scrollbar inside the iframe. */
body.interim-login.rxtm-login {
	display: block;
	min-block-size: auto;
	padding: 18px 20px;
	overflow-x: hidden;
	overflow-y: auto;
	/* reserve the scrollbar gutter on BOTH sides so content (esp. the message
	 * box) stays symmetric whether or not a vertical scrollbar appears — in RTL
	 * the bar sits on the left and was eating the left margin. */
	scrollbar-gutter: stable both-edges;
	background-attachment: scroll;
}
body.interim-login.rxtm-login #login {
	max-inline-size: none;
	inline-size: auto;
	justify-self: auto;
	align-self: auto;
	margin: 0;
	padding: 0;
}
/* trim the rhythm so the form fits the small frame WITHOUT a scrollbar (a
 * scrollbar in RTL sits on the left and made the message look off-centre).
 * Field metrics stay standard so the leading icons keep their alignment. */
body.interim-login.rxtm-login #login .message {
	margin: 0 0 14px;
	padding: 9px 13px;
}
body.interim-login.rxtm-login #login form .forgetmenot {
	margin-block: 2px 16px;
}
/* the modal is for re-auth only — hide the secondary nav + language switcher */
body.interim-login.rxtm-login #login #nav,
body.interim-login.rxtm-login #login #backtoblog,
body.interim-login.rxtm-login .language-switcher {
	display: none;
}

/* ============================ responsive ======================= */
/* Stack into a single flex column below the split's comfortable width. We
 * switch OFF the grid entirely (display:flex) and reset the grid-column the
 * desktop default forced, so nothing lands in a phantom second column. */
@media (max-width: 820px) {
	body.rxtm-login {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		min-block-size: 100vh;
		overflow: visible;
	}
	body.rxtm-login > * {
		grid-column: auto;
	}
	body.rxtm-login .rxtm-login-rings {
		display: none;
	}
	/* stacked: the panel becomes a banner — keep the SAME layout as the desktop
	 * column (logo at the inline-start top, tagline below). min-block-size:auto
	 * + the panel's own padding guarantee the logo + full tagline always show
	 * with even margins at every width (no clipping). */
	body.rxtm-login .rxtm-login-aside {
		order: 1;
		min-block-size: auto;
		justify-content: flex-start;
		gap: 20px;
		padding: 28px;
	}
	body.rxtm-login .rxtm-login-aside__logo {
		max-block-size: 34px;
	}
	body.rxtm-login .rxtm-login-aside__name {
		font-size: 17px;
	}
	body.rxtm-login .rxtm-login-aside__pitch {
		font-size: 21px;
	}
	body.rxtm-login #login {
		order: 2;
		inline-size: 100%;
		max-inline-size: 400px;
		margin-inline: auto;
		align-self: center;
		padding: 4px 4px 12px;
	}
	body.rxtm-login .language-switcher {
		order: 3;
		align-self: center;
		margin: 6px 0 8px;
	}
}

/* very small screens — trim the panel further */
@media (max-width: 480px) {
	body.rxtm-login {
		padding: 14px;
		gap: 14px;
	}
	body.rxtm-login .rxtm-login-aside {
		padding: 24px 22px;
	}
	body.rxtm-login .rxtm-login-aside__pitch {
		font-size: 19px;
	}
}