/* ---------------------------------------------------------------------- */
/*	ESZIR-D64-AUTH-SHELL, on the IDP - the unauthenticated shell and every
/*	page that renders through it
/*
/*	WHAT THIS FILE IS. The port of ESZIR Core's wwwroot/app/auth-shell.css
/*	(D64) to CortexIdentity: the presentation layer for
/*	Pages/Shared/_NoAuthLayout.cshtml and the Account pages that render
/*	through it - Login, ForgotPassword and its confirmation,
/*	ResendEmailConfirmation, ResetPassword and its confirmation, SignUp and
/*	SignUpSuccess, LoggedOut, AccessDenied, Lockout. It keeps Core's file
/*	name, its token names, its section order and its class names wherever
/*	the two applications share a part, so that the two files can be read
/*	side by side and a change to one can be carried to the other by hand.
/*	Where the IDP has a part Core does not (Razor's validation summary, the
/*	confirmation notices) the section says so.
/*
/*	WHY IT IS A FILE OF OURS RATHER THAN AN EDIT TO THE THEME. The IDP's
/*	carried theme is Qovex (wwwroot/assets/css/app.min.css over Bootstrap 5)
/*	and it paints the pre-auth pages from `.account-pages`, `.bg-login` and
/*	`.logo-admin`. Those files are the template vendor's and are not edited.
/*	The shell does not override them - IT STOPS OPTING INTO THEM: the layout
/*	drops the `.account-pages` wrapper and the pages drop `.bg-login`, and
/*	everything below is written on a clean slate that the theme's own
/*	selectors never reach. What still loads first is the part of the theme
/*	the pages keep using - Bootstrap's form and alert base and the Material
/*	Design Icons in icons.min.css (local fonts, no origin); app.min.css
/*	itself is not loaded by the pre-auth layout, for the reason the layout
/*	states: it is the one file that imports a web font from a third-party
/*	origin, and every page here renders pixel-identical without it.
/*
/*	EVERY LENGTH HERE IS IN px, AND ON THIS APPLICATION THAT IS A CHOICE
/*	RATHER THAN A NECESSITY. Core's file is px because its Bootstrap 3 sets
/*	`html { font-size: 62.5% }`, which makes a rem ten pixels on that page.
/*	The IDP's baseline was MEASURED before this file was written rather than
/*	assumed to be the same: wwwroot/assets/css/bootstrap.min.css sets no
/*	`html { font-size }` at all, `body` is `.875rem`, and the root renders at
/*	the browser default of 16px - so 1rem is 16px here and a rem would have
/*	been safe. The px values are KEPT regardless, for one reason: the two
/*	files are meant to be the same layer in two applications, and a length
/*	that is 44px in one and 2.75rem in the other cannot be compared by eye
/*	or by diff. Browser zoom scales px and rem alike; only a user font-size
/*	preference without zoom tells them apart, and this page's type is set in
/*	px on both applications already.
/*
/*	THE COLOURS ARE THE BRAND'S, READ OUT OF THE TREE RATHER THAN CHOSEN.
/*	--eszir-auth-green #81a342 is Core's .btn-green, its IIR theme's
/*	primary.500 and eszirBrand.css's --eszir-green; it is also the right-hand
/*	stop of this theme's own `.bg-login-overlay` gradient, so it was already
/*	on the IDP's login page. One green, and this is another reading of it,
/*	not a new one. The ink is the logo's own #1c1c1a. The two are the only
/*	hues with any saturation in the file; everything else is a neutral.
/*
/*	NO WEB FONT AND NO NEW ORIGIN. This is the pre-authentication screen of
/*	EVERY application behind the IDP - the last place to add a third-party
/*	origin for a typeface. The stack below is the system UI font. It is set
/*	explicitly on the body, the fields and the buttons rather than inherited,
/*	because the carried theme's --bs-font-sans-serif names "SF UI Text", a
/*	face app.min.css fetches from fonts.cdnfonts.com wherever it is loaded.
/* ---------------------------------------------------------------------- */

:root {
	--eszir-auth-green: #81a342;
	--eszir-auth-green-dark: #6d8a37;
	--eszir-auth-green-darker: #5b7430;

	/* The logo's ink, and the two neutrals the whole page is built from. */
	--eszir-auth-ink: #1c1c1a;
	--eszir-auth-text: #22262b;
	--eszir-auth-muted: #6b7280;
	--eszir-auth-faint: #98a1ac;

	--eszir-auth-surface: #ffffff;
	--eszir-auth-ground: #eef1ea;
	--eszir-auth-ground-top: #f4f6f1;
	--eszir-auth-border: #d8ded2;
	--eszir-auth-border-strong: #c3cbbc;

	--eszir-auth-danger: #8a1f1f;
	--eszir-auth-danger-icon: #c62828;
	--eszir-auth-danger-ground: #fdf1f1;
	--eszir-auth-danger-border: rgba(224, 34, 34, 0.35);

	--eszir-auth-radius: 12px;
	--eszir-auth-radius-sm: 9px;

	--eszir-auth-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ---------------------------------------------------------------------- */
/*	1. The shell
/*
/*	Two panes. Three surfaces, each a step lighter than the one before: the
/*	brand pane is dark, the stage is a near-white neutral, and the card is
/*	pure white - which is what lets the card read as raised without a heavy
/*	shadow, and why the stage is NOT white.
/* ---------------------------------------------------------------------- */

html,
body.eszir-auth {
	height: 100%;
}

body.eszir-auth {
	margin: 0;
	padding: 0;
	background: var(--eszir-auth-ground);
	color: var(--eszir-auth-text);
	font-family: var(--eszir-auth-font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.eszir-auth-shell {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
}

/* ---------------------------------------------------------------------- */
/*	1a. The brand pane
/*
/*	DARK, WITH THE MARK ON A WHITE PLATE. Core's D64 row records the four
/*	passes that settled this and the three that were rejected: a dark pane
/*	with the mark recoloured through a filter (THE ESZIR MARK IS NEVER
/*	DISPLAYED MODIFIED); the same pane with the mark removed ("barely no
/*	content"); a light pane with the mark laid on it at 96px ("too big").
/*	The plate dissolves all three: a white card is the surface the
/*	dark-inked asset was drawn for, so the pane can be dark AND carry the
/*	unmodified mark; the plate is an object, so the pane has a subject; and
/*	the mark sits at 44px inside it rather than being scaled up to carry a
/*	pane on its own. NO TAGLINE is invented - there is none in either tree.
/* ---------------------------------------------------------------------- */
.eszir-auth-brand {
	position: relative;
	flex: 0 0 46%;
	max-width: 620px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 56px 56px 40px;
	overflow: hidden;
	background:
		radial-gradient(88% 58% at 12% -6%, rgba(150, 189, 76, 0.34) 0%, rgba(150, 189, 76, 0) 62%),
		radial-gradient(70% 44% at 96% 8%, rgba(79, 195, 211, 0.12) 0%, rgba(79, 195, 211, 0) 60%),
		linear-gradient(168deg, #1d2a1e 0%, #101a15 42%, #080c0a 100%);
	color: #e8ece5;
}

/*	A vignette, and it is the whole of the texture: a radial falloff has no
	spatial frequency to alias, which a hairline pattern would. */
.eszir-auth-brand::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(
		78% 66% at 45% 44%,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.10) 80%,
		rgba(0, 0, 0, 0.24) 100%
	);
}

/*	The edge: a 1px line plus a short inward shade, so the seam between the
	two panes reads as a fold rather than as a border. */
.eszir-auth-brand::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 24px;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.16) 100%
	);
	border-right: 1px solid rgba(129, 163, 66, 0.55);
}

.eszir-auth-brand-body {
	position: relative;
	z-index: 2;
}

/*	THE WHITE PLATE. `inline-block` so it is exactly as wide as the mark plus
	its padding - a full-width bar would be a header rather than a sign. */
.eszir-auth-brand-plate {
	display: inline-block;
	padding: 26px 34px;
	background: #ffffff;
	border-radius: 14px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.18),
		0 26px 54px -26px rgba(0, 0, 0, 0.65);
}

/*	THE ATLAS MARK, ORIGINAL AND UNMODIFIED - no filter, no recolouring, no
	substitute glyph. This shell belongs to the Atlas IDP, so the plate leads
	with Atlas where Core's leads with ESZIR; the composition is otherwise
	Core's. 48px: a wordmark, at its natural weight inside the plate. */
.eszir-auth-brand-mark {
	display: block;
	height: 48px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

/*	THE THREE PRODUCTS UNDER IT, SMALLER - Atlas Work, the green ESZIR, the
	blue ESZIR - in a row behind a hairline, each the original asset. 20px is
	less than half the Atlas mark: a caption of marks, not a second row of
	equals. wwwroot/assets/images/eszir_logo.png is byte for byte the file
	Core serves as Content/images/logo.png (SHA-1 2bfe43e1...). */
.eszir-auth-brand-apps {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 22px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(28, 28, 26, 0.1);
}

.eszir-auth-brand-apps img {
	display: block;
	height: 20px;
	width: auto;
}

/*	THE WORK MARK IS SIZED BY ITS INK, NOT ITS FILE. Measured: eszir_logo.png
	and eszir_alp.png are cropped to the ink (280 of 281 rows), while
	workr_logo.png carries a third of its height as transparent padding (283
	ink rows of 421 - 67%). At one CSS height the Work wordmark therefore
	renders two thirds the size of its neighbours. 30px puts its ink at 20px,
	level with theirs. The file is not edited - a mark is never modified -
	the box around it is. */
.eszir-auth-brand-apps img.eszir-auth-app-work {
	height: 30px;
}

/*	Out of the flow, so the mark centres against the PANE rather than against
	the space the credit leaves it. */
.eszir-auth-brand-foot {
	position: absolute;
	left: 56px;
	right: 56px;
	bottom: 40px;
	z-index: 2;
	text-align: center;
	font-size: 12px;
	line-height: 1.7;
	color: rgba(232, 236, 229, 0.62);
}

.eszir-auth-brand-foot img {
	display: block;
	margin: 0 auto 10px;
	opacity: 0.8;
}

.eszir-auth-brand-foot a {
	color: rgba(232, 236, 229, 0.88);
	text-decoration: none;
	border-bottom: 1px solid rgba(129, 163, 66, 0.55);
}

.eszir-auth-brand-foot a:hover,
.eszir-auth-brand-foot a:focus {
	color: #ffffff;
	border-bottom-color: var(--eszir-auth-green);
}

/* ---------------------------------------------------------------------- */
/*	1b. The stage - the pane the body renders into
/* ---------------------------------------------------------------------- */
.eszir-auth-stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	background: linear-gradient(
		180deg,
		var(--eszir-auth-ground-top) 0%,
		var(--eszir-auth-ground) 100%
	);
}

.eszir-auth-column {
	width: 100%;
	max-width: 416px;
}

/*	The mark for the single-column layout, which has no brand pane. Same
	asset, same untouched colours, smaller. It is in the markup
	unconditionally and hidden here, so the two layouts are one document. */
.eszir-auth-mark {
	display: none;
	margin: 0 auto 30px;
	text-align: center;
}

.eszir-auth-mark > img {
	display: block;
	height: 38px;
	width: auto;
	margin: 0 auto;
}

.eszir-auth-mark-apps {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.eszir-auth-mark-apps img {
	display: block;
	height: 16px;
	width: auto;
}

.eszir-auth-mark-apps img.eszir-auth-app-work {
	height: 24px;
}

/*	The credit under the card, shown only when the brand pane is not. */
.eszir-auth-foot {
	display: none;
	margin-top: 28px;
	text-align: center;
	font-size: 12px;
	color: var(--eszir-auth-muted);
}

.eszir-auth-foot a {
	color: var(--eszir-auth-text);
	text-decoration: none;
	border-bottom: 1px solid var(--eszir-auth-border-strong);
}

.eszir-auth-foot a:hover,
.eszir-auth-foot a:focus {
	color: var(--eszir-auth-green-dark);
}

/*	Below 900px the brand pane is REMOVED rather than stacked above the
	form. A login is a single task and a phone should open on it, not
	scroll past a decoration to reach it. */
@media (max-width: 900px) {
	.eszir-auth-brand {
		display: none;
	}

	.eszir-auth-mark,
	.eszir-auth-foot {
		display: block;
	}

	.eszir-auth-stage {
		padding: 40px 20px;
	}
}

/* ---------------------------------------------------------------------- */
/*	2. The card
/*
/*	Core's card keeps the carried class name `.box-login` because a view it
/*	does not edit carries it. Nothing on the IDP carries that name, so the
/*	card is `.eszir-auth-card` here - the one class the two files do not
/*	share, and the only reason is that Core had a constraint this side
/*	does not.
/* ---------------------------------------------------------------------- */
.eszir-auth-card {
	background: var(--eszir-auth-surface);
	border: 1px solid var(--eszir-auth-border);
	border-radius: var(--eszir-auth-radius);
	padding: 34px 32px 30px;
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.05),
		0 20px 46px -22px rgba(16, 24, 40, 0.30);
}

.eszir-auth-card + .eszir-auth-card {
	margin-top: 16px;
}

.eszir-auth-card h1,
.eszir-auth-card h2,
.eszir-auth-card h3 {
	margin: 0 0 6px;
	font-family: var(--eszir-auth-font);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--eszir-auth-ink);
}

.eszir-auth-card > p,
.eszir-auth-lead {
	margin: 0 0 26px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--eszir-auth-muted);
}

.eszir-auth-card fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.eszir-auth-card form {
	margin: 0;
}

/* ---------------------------------------------------------------------- */
/*	3. Fields
/*
/*	A LABEL PER FIELD, ABOVE IT. The carried pages put the <label> AFTER the
/*	input inside a `.form-floating` wrapper that never had the markup
/*	Bootstrap's floating label needs, so the label sat under the field as a
/*	caption. It is a real <label asp-for> either way; here it goes above the
/*	field, where a label reads as one (WCAG 3.3.2), and the placeholder stays
/*	as the example it always was.
/* ---------------------------------------------------------------------- */
.eszir-auth-field {
	margin-bottom: 18px;
}

.eszir-auth-field > label {
	display: block;
	margin: 0 0 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--eszir-auth-text);
}

/*	The icon well. The <i> FOLLOWS its input in the markup, because the
	sibling selector below is what tints the glyph on focus - the same
	relationship Core keeps for its Font Awesome glyphs; the IDP's glyphs
	are Material Design Icons out of icons.min.css, served locally. */
.eszir-auth-input-icon {
	position: relative;
	display: block;
}

.eszir-auth-input-icon > [class*="mdi-"] {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 16px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	font-size: 16px;
	line-height: 1;
	text-align: center;
	color: var(--eszir-auth-faint);
	pointer-events: none;
	transition: color 0.15s ease;
}

.eszir-auth-input-icon > input:focus + [class*="mdi-"] {
	color: var(--eszir-auth-green-dark);
}

.eszir-auth-card .form-control {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 10px 14px;
	box-sizing: border-box;
	font-family: var(--eszir-auth-font);
	font-size: 14px;
	line-height: 22px;
	color: var(--eszir-auth-text);
	background-color: var(--eszir-auth-surface);
	background-image: none;
	border: 1px solid var(--eszir-auth-border-strong);
	border-radius: var(--eszir-auth-radius-sm);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eszir-auth-input-icon > .form-control {
	padding-left: 40px;
}

.eszir-auth-card .form-control::placeholder {
	color: var(--eszir-auth-faint);
}

.eszir-auth-card .form-control:hover:not(:disabled) {
	border-color: #aab4a2;
}

/*	THE FOCUS RING IS THE BRAND GREEN. Bootstrap 5's is a blue halo and this
	theme's is a grey border with no ring at all; this is a 1px green border
	plus a 3px ring at 18% - enough for WCAG 2.4.7 on a form that is filled
	in by keyboard, and nothing like a halo. */
.eszir-auth-card .form-control:focus {
	border-color: var(--eszir-auth-green);
	box-shadow: 0 0 0 3px rgba(129, 163, 66, 0.18);
	outline: 0 none;
}

.eszir-auth-card .form-control:disabled {
	background-color: #f2f4f0;
	border-color: var(--eszir-auth-border);
	color: var(--eszir-auth-faint);
	cursor: not-allowed;
}

/*	The class jquery-validation-unobtrusive writes onto a failed input, and
	the one the server writes when it re-renders a page with a model error. */
.eszir-auth-card .form-control.input-validation-error {
	border-color: var(--eszir-auth-danger-icon);
}

.eszir-auth-card .form-control.input-validation-error:focus {
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.16);
}

/* ---------------------------------------------------------------------- */
/*	4. Links under and around the form
/*
/*	`.eszir-auth-field-foot` is the row the forgot-password link sits in,
/*	under the password field - a control of its own rather than a link on
/*	top of an input. `.eszir-auth-link` is the same treatment for any
/*	secondary link a card carries.
/* ---------------------------------------------------------------------- */
.eszir-auth-field-foot {
	display: flex;
	justify-content: flex-end;
	margin: -6px 0 22px;
}

.eszir-auth-link,
.eszir-auth .eszir-auth-link {
	display: inline-block;
	padding: 2px 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--eszir-auth-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.eszir-auth-link:hover,
.eszir-auth-link:focus,
.eszir-auth .eszir-auth-link:hover,
.eszir-auth .eszir-auth-link:focus {
	color: var(--eszir-auth-green-dark);
	border-bottom-color: var(--eszir-auth-green);
	outline: 0 none;
}

.eszir-auth-link > [class*="mdi-"] {
	margin-right: 4px;
	font-size: 14px;
	vertical-align: -1px;
}

/*	The row under a notice or a form that offers the way back or on. */
.eszir-auth-links {
	margin-top: 22px;
	text-align: center;
}

/* ---------------------------------------------------------------------- */
/*	5. Buttons
/*
/*	THE PRIMARY ACTION IS THE BRAND GREEN. This theme's `.btn-primary` is
/*	its cyan #5bc0de, and red is Vissza and delete everywhere in this
/*	estate, so neither is spent on the affirmative control. Every submit on
/*	these pages carries `.btn.eszir-auth-submit`; `.btn` is kept so
/*	Bootstrap's reset still applies under it.
/* ---------------------------------------------------------------------- */
.eszir-auth-submit,
.eszir-auth .btn.eszir-auth-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 18px;
	font-family: var(--eszir-auth-font);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #ffffff;
	background: var(--eszir-auth-green);
	background-image: none;
	border: 1px solid var(--eszir-auth-green-dark);
	border-radius: var(--eszir-auth-radius-sm);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
	text-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.eszir-auth .btn.eszir-auth-submit:hover,
.eszir-auth .btn.eszir-auth-submit:focus {
	color: #ffffff;
	background: var(--eszir-auth-green-dark);
	border-color: var(--eszir-auth-green-darker);
}

.eszir-auth .btn.eszir-auth-submit:focus {
	box-shadow: 0 0 0 3px rgba(129, 163, 66, 0.28);
	outline: 0 none;
}

.eszir-auth .btn.eszir-auth-submit:active {
	background: var(--eszir-auth-green-darker);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
}

.eszir-auth .btn.eszir-auth-submit[disabled],
.eszir-auth .btn.eszir-auth-submit[disabled]:hover {
	background: #b9c7a2;
	border-color: #b9c7a2;
	box-shadow: none;
	cursor: not-allowed;
	opacity: 1;
}

.eszir-auth .btn.eszir-auth-submit > [class*="mdi-"] {
	font-size: 17px;
	line-height: 1;
}

/*	THE SECONDARY BUTTON - Vissza, and the way back to the application. It
	is a neutral outline in the ink, deliberately NOT red: the carried
	pages painted it `.btn-warning`, and in this estate red is delete. A
	way back is not a destructive act and does not get the destructive
	colour. */
.eszir-auth-secondary,
.eszir-auth .btn.eszir-auth-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	font-family: var(--eszir-auth-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--eszir-auth-text);
	background: var(--eszir-auth-surface);
	border: 1px solid var(--eszir-auth-border-strong);
	border-radius: var(--eszir-auth-radius-sm);
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.eszir-auth .btn.eszir-auth-secondary:hover,
.eszir-auth .btn.eszir-auth-secondary:focus {
	color: var(--eszir-auth-ink);
	background: #f6f8f3;
	border-color: #aab4a2;
}

.eszir-auth .btn.eszir-auth-secondary:focus {
	box-shadow: 0 0 0 3px rgba(129, 163, 66, 0.18);
	outline: 0 none;
}

.eszir-auth .btn.eszir-auth-secondary > [class*="mdi-"] {
	font-size: 17px;
	line-height: 1;
}

.eszir-auth-actions {
	margin: 0;
}

.eszir-auth-actions + .eszir-auth-actions {
	margin-top: 10px;
}

/* ---------------------------------------------------------------------- */
/*	6. Banners and validation
/*
/*	THE IDP HAS NO login.js WRITING INTO #error-message; ITS MESSAGES ARE
/*	RAZOR'S. `asp-validation-summary` renders a <div> carrying
/*	`validation-summary-errors` with a <ul> in it when there is something to
/*	say and `validation-summary-valid` when there is not, and
/*	`asp-validation-for` renders a <span> carrying `field-validation-error`
/*	or `field-validation-valid`. The disabled-account message on Login and
/*	the invalid-credentials one both arrive through the summary, so it is
/*	styled as the danger banner Core's #error-container is. The `.alert`
/*	rules cover the banners the pages write by hand and _StatusMessage.
/* ---------------------------------------------------------------------- */
.eszir-auth-card .alert,
.eszir-auth-card .validation-summary-errors {
	position: relative;
	margin: 0 0 20px;
	padding: 14px 16px 14px 44px;
	font-size: 13px;
	line-height: 1.55;
	border: 1px solid transparent;
	border-radius: var(--eszir-auth-radius-sm);
	text-shadow: none;
	box-shadow: none;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*	The summary is a banner with no icon in its markup, so the glyph is
	drawn here - the Material Design Icons face is already loaded for the
	fields, and this is its "alert-circle-outline" code point (MDI 4.7.95). */
.eszir-auth-card .validation-summary-errors::before {
	content: "\F5D6";
	font: normal normal normal 16px/1 "Material Design Icons";
	position: absolute;
	top: 14px;
	left: 16px;
}

.eszir-auth-card .validation-summary-errors,
.eszir-auth-card .alert-danger {
	color: var(--eszir-auth-danger);
	background: var(--eszir-auth-danger-ground);
	border-color: var(--eszir-auth-danger-border);
}

.eszir-auth-card .validation-summary-errors::before,
.eszir-auth-card .alert-danger > [class*="mdi-"]:first-child {
	color: var(--eszir-auth-danger-icon);
}

.eszir-auth-card .validation-summary-errors ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eszir-auth-card .validation-summary-errors li + li {
	margin-top: 4px;
}

.eszir-auth-card .validation-summary-valid {
	display: none;
}

.eszir-auth-card .alert-success {
	color: #3f5225;
	background: #f1f6e8;
	border-color: rgba(129, 163, 66, 0.45);
}

.eszir-auth-card .alert-success > [class*="mdi-"]:first-child {
	color: var(--eszir-auth-green-dark);
}

.eszir-auth-card .alert > [class*="mdi-"]:first-child {
	position: absolute;
	top: 14px;
	left: 16px;
	font-size: 16px;
	line-height: 1;
}

.eszir-auth-card .alert strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
}

.eszir-auth-card .alert .btn-close {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 0;
	width: 14px;
	height: 14px;
	opacity: 0.45;
}

.eszir-auth-card .alert .btn-close:hover {
	opacity: 0.9;
}

.eszir-auth-card .alert a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

/*	The per-field message, under its field. */
.eszir-auth-field .field-validation-error {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--eszir-auth-danger);
}

.eszir-auth-field .field-validation-valid {
	display: none;
}

/*	The theme's `.text-danger` is `#ff715b !important`, a coral that reads
	as decoration rather than as an error. The validation elements keep the
	class so a page still colours its message if this file is not loaded,
	and this rule takes the colour back when it is. */
.eszir-auth-card .text-danger {
	color: var(--eszir-auth-danger) !important;
}

/* ---------------------------------------------------------------------- */
/*	7. The notice - the confirmation and refusal pages
/*
/*	ForgotPasswordConfirmation, ResetPasswordConfirmation, SignUpSuccess and
/*	LoggedOut say one thing and offer one way on; AccessDenied and Lockout
/*	say one thing and offer the way back. The carried pages built these
/*	out of a card inside an alert inside a card; this is one block - a
/*	glyph in a tinted disc, a heading, a paragraph, and the action.
/* ---------------------------------------------------------------------- */
.eszir-auth-notice {
	text-align: center;
	padding-top: 4px;
}

.eszir-auth-notice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 0 18px;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
	color: var(--eszir-auth-green-dark);
	background: #f1f6e8;
	border: 1px solid rgba(129, 163, 66, 0.45);
}

.eszir-auth-notice-icon.is-danger {
	color: var(--eszir-auth-danger-icon);
	background: var(--eszir-auth-danger-ground);
	border-color: var(--eszir-auth-danger-border);
}

.eszir-auth-notice-icon.is-neutral {
	color: var(--eszir-auth-muted);
	background: #f3f5f0;
	border-color: var(--eszir-auth-border);
}

.eszir-auth-notice h1,
.eszir-auth-notice h2,
.eszir-auth-notice h3 {
	margin: 0 0 8px;
	font-size: 20px;
}

.eszir-auth-notice p {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--eszir-auth-muted);
}

.eszir-auth-notice p:last-child {
	margin-bottom: 0;
}

.eszir-auth-notice .eszir-auth-actions {
	margin-top: 4px;
}

/* ---------------------------------------------------------------------- */
/*	8. Pages that render through the layout without being restyled
/*
/*	_ViewStart hands every anonymous page to this layout - Home/Error,
/*	Redirect, Ciba/Index and the Duende templates. They are not this
/*	change's, and the rules above never reach them because they carry none
/*	of the classes. They get the card's surface and nothing else - a
/*	centred, legible page rather than the old one, and enough.
/*
/*	ONE THEME RULE IS TAKEN OFF Home/Error. Duende's template names its
/*	root `.error-page`, and the theme has a rule of the same name for ITS
/*	404 template: 60px uppercase at line-height .7 - which is what the
/*	IdentityServer error page has rendered in on this application until
/*	now. Inside the shell it is put back to the page's own type.
/* ---------------------------------------------------------------------- */
.eszir-auth-column > .error-page,
.eszir-auth-column > .redirect-page,
.eszir-auth-column > .ciba-page {
	background: var(--eszir-auth-surface);
	border: 1px solid var(--eszir-auth-border);
	border-radius: var(--eszir-auth-radius);
	padding: 34px 32px 30px;
}

.eszir-auth-column > .error-page {
	text-transform: none;
	font-size: 14px;
	line-height: 1.5;
}

.eszir-auth-column > .error-page h1,
.eszir-auth-column > .redirect-page h1,
.eszir-auth-column > .ciba-page h1 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--eszir-auth-ink);
}

.eszir-auth-column > .error-page .row > [class*="col-"] {
	width: 100%;
}

/* ---------------------------------------------------------------------- */
/*	9. The second factor - LoginWith2fa and LoginWithRecoveryCode (T15)
/*
/*	Two more pages under this layout, restyled when 2FA started working
/*	(T15): the same card, the same field, plus the two things the login
/*	never needed - a code field that reads as digits, and a checkbox row
/*	("Ezt a böngészőt jegyezze meg").
/* ---------------------------------------------------------------------- */
.eszir-auth-card .form-control.eszir-auth-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 18px;
	letter-spacing: 0.18em;
}

.eszir-auth-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: -4px 0 18px;
	font-size: 13px;
	color: var(--eszir-auth-text);
}

.eszir-auth-check > input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--eszir-auth-green);
	cursor: pointer;
}

.eszir-auth-check > label {
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

/* ---------------------------------------------------------------------- */
/*	9. The enforced two-factor setup (T17, RequireTwoFactor)
/*
/*	THE ONE PRE-AUTH PAGE THAT SHOWS A QR. EnableAuthenticator lives in the
/*	signed-in shell (identity-shell.css 9.6); the enforced setup happens
/*	BEFORE the sign-in completes, so it renders here, in the card, with the
/*	same three steps: the QR on a white plate, the key in fours, the code.
/*	The warning banner is the shell's .alert with a third colour, beside
/*	danger and success.
/* ---------------------------------------------------------------------- */
.eszir-auth-card .alert-warning {
	color: #6b4a06;
	background: #fff7e6;
	border-color: rgba(214, 141, 0, 0.40);
}

.eszir-auth-card .alert-warning > [class*="mdi-"]:first-child {
	color: #c47f00;
}

.eszir-auth-steps {
	margin: 0 0 18px;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--eszir-auth-text);
}

.eszir-auth-steps > li {
	margin-bottom: 16px;
}

.eszir-auth-steps > li > p {
	margin: 0 0 8px;
}

.eszir-auth-steps a {
	color: var(--eszir-auth-green-dark);
}

.eszir-auth-qr {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin: 8px 0 4px;
}

/*	The server-drawn QR: a data: PNG the CSP's img-src allows. */
.eszir-auth-qr > img {
	display: block;
	width: 160px;
	height: 160px;
	padding: 6px;
	background: #ffffff;
	border: 1px solid var(--eszir-auth-border);
	border-radius: var(--eszir-auth-radius-sm);
	image-rendering: pixelated;
}

.eszir-auth-qr-key {
	flex: 1 1 160px;
	min-width: 0;
}

.eszir-auth-qr-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--eszir-auth-text);
}

.eszir-auth-key {
	display: inline-block;
	margin: 4px 0 0;
	padding: 8px 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 14px;
	letter-spacing: 0.08em;
	word-spacing: 0.3em;
	color: var(--eszir-auth-ink);
	background: #f5f7f2;
	border: 1px solid var(--eszir-auth-border);
	border-radius: var(--eszir-auth-radius-sm);
	overflow-wrap: anywhere;
}

.eszir-auth-qr-help {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--eszir-auth-muted);
}