/* ---------------------------------------------------------------------- */
/*	ESZIR-D64-AUTH-SHELL - the unauthenticated shell and the two screens
/*	that render through it
/*
/*	WHAT THIS FILE IS. The ESZIR-owned presentation layer for
/*	Views\Shared\_UnAuthenticatedLayout.cshtml and the two views that use it:
/*	Views\Account\Login.cshtml and Views\Shared\Error.cshtml. It is the same
/*	shape as wwwroot/app/eszir-shell.css (D32, D80) and dashboard-buttons.css
/*	(D60) - a stylesheet written for Core, loaded AFTER the carried theme,
/*	and linked from exactly the layout it belongs to.
/*
/*	WHY IT IS A FILE OF OURS RATHER THAN AN EDIT TO main.css. The carried
/*	Clip-One theme paints this screen from `body.login.example2` and the
/*	`.box-login` block at main.css:3117. That file is legacy's byte for byte
/*	and D11 does not let this port edit it. So the shell does not override
/*	those rules - IT STOPS OPTING INTO THEM. The redesigned layout drops the
/*	`login example2` classes from <body>, which takes the whole 70-line
/*	`body.login` cascade out of play in one move, and everything below is
/*	written on a clean slate instead of fighting a 2013 theme for specificity.
/*	The two classes are the ONLY thing that selected it, measured: nothing
/*	else in the carried stylesheet set reads `.main-login`, `.box-login`,
/*	`.box-forgot` or `.box-register`.
/*
/*	EVERY LENGTH HERE IS IN px AND THAT IS NOT A STYLE PREFERENCE.
/*	Content/plugins/bootstrap/bootstrap.css sets `html { font-size: 62.5% }`,
/*	so 1rem is TEN pixels on every page that loads it - which is this one.
/*	FrontEnd/shared/eszirBrand.css corrects that to 13px, and it is compiled
/*	into the Vue bundles; the unauthenticated layout loads no bundle, so the
/*	correction is not here and a rem would render at 62.5% of its intended
/*	size. The same fact is written up at length in eszirBrand.css.
/*
/*	THE COLOURS ARE THE BRAND'S, READ OUT OF THE TREE RATHER THAN CHOSEN.
/*	--eszir-green #81a342 is Content/main.css's .btn-green, FrontEnd/iir/
/*	theme.js's primary.500 and eszirBrand.css's --eszir-green: one green,
/*	three places, and this is the fourth reading of the same value rather
/*	than a fifth green. 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
/*	derived from the ink - which is what keeps an enterprise login looking
/*	like one product rather than like a template.
/*
/*	NO WEB FONT AND NO NEW ORIGIN. FRONT_END_CONVENTIONS §8 makes a CDN tag
/*	a row in docs/SUBRESOURCE_INTEGRITY.md, and this page is the one screen
/*	in the application that renders BEFORE authentication - the last place to
/*	add a third-party origin for a typeface. The stack below is the system
/*	UI font on every platform this application is used on.
/* ---------------------------------------------------------------------- */

: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-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, AND THE BRAND ONE IS LIGHT. The layout view carries the full
/*	account of how it got here; the short version is that a DARK brand pane
/*	forces a choice between two things the owner ruled out - recolouring the
/*	ESZIR mark to sit on it, or leaving the pane empty - and a LIGHT one
/*	forces neither. The mark is dark ink on transparency, so a pale ground
/*	is the surface it was drawn for, and it goes on untouched.
/*
/*	THREE SURFACES, EACH A STEP LIGHTER THAN THE ONE BEFORE: the brand pane
/*	is the green wash, the stage is a near-white neutral, and the card is
/*	pure white. That ordering is what lets the card read as raised without
/*	spending a heavy shadow on it, and it is why the stage is NOT white -
/*	a white card on a white pane needs its border to do all the work.
/* ---------------------------------------------------------------------- */

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

body.eszir-auth {
	margin: 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. Four passes settled this and the
/*	three that were rejected each pinned down one constraint:
/*
/*	  1. Dark pane, mark made legible with a CSS filter. Rejected: THE ESZIR
/*	     MARK IS NEVER DISPLAYED MODIFIED, and no substitute is drawn for it.
/*	  2. Dark pane with the mark removed to honour that - which left 42% of
/*	     the viewport holding a copyright line. "Barely no content."
/*	  3. Light pane, mark laid straight onto it at 96px with a green rule.
/*	     Legible and honest, and too big: the mark stopped being a mark.
/*
/*	THE PLATE DISSOLVES ALL THREE AT ONCE. 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 rather than a wash, so the pane
/*	has a subject and is not empty; and the mark sits at 44px inside it
/*	rather than being scaled up to fill a pane on its own.
/*
/*	NO TAGLINE IS INVENTED and none is needed now - there is none in the
/*	tree, and writing product copy inside a presentation change is not this
/*	change's to make. The green separator rule that stood under the mark in
/*	pass 3 is gone with it: the plate's own edge is the only line the
/*	composition needs.
/* ---------------------------------------------------------------------- */
.eszir-auth-brand {
	position: relative;
	flex: 0 0 46%;
	max-width: 620px;
	display: flex;
	flex-direction: column;

	/*	A COLUMN, SO THESE TWO READ THE WAY ROUND YOU DO NOT EXPECT: `justify`
		is the vertical axis here and `align` is the horizontal one. Together
		they put the plate in the middle of the pane on both. `align-items`
		also shrink-wraps the block the inline-block plate sits in, which is
		what keeps its shadow under the white rather than under a full-width
		box. */
	justify-content: center;
	align-items: center;
	padding: 56px 56px 40px;
	overflow: hidden;

	/*	THE GROUND IS DARK BECAUSE THE LANDSCAPE ON TOP OF IT IS A SILHOUETTE.
		A mid-green field (#3f5127 -> #24301a -> #10150d) stood here while the
		pane was empty, and was darkened when the marketing site's landscape
		was built onto it: those ridges are drawn in #3a6b69..#070d09 and on a
		mid-green ground the near ones had nothing to be darker THAN. The
		landscape has since been cut in full - see the layout view - and the
		darker ramp is KEPT rather than reverted, because it is also what makes
		the white logo plate read as lit rather than as a panel: at #3f5127 the
		plate and its ground were close enough in value that its shadow did all
		the separating.

		The brand colour is the wash at the top - a #96bd4c glow behind the
		plate, which is where the pane is otherwise empty. */
	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 repeating hairline
	pattern was tried here and removed: a 1px diagonal at 7px pitch moirés
	against a fractionally-scaled display, and a texture that can read as a
	rendering artefact on somebody's monitor is worse than none. A radial
	falloff has no spatial frequency to alias. */
.eszir-auth-brand::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	/*	z-index 1, with the plate and the credit at 2. Nothing sits between
		them now that the landscape is gone, but the order is kept explicit:
		a vignette is only ever meant to be UNDER the pane's content and OVER
		its ground, and leaving that to paint order made it wrong once already. */
	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, and
	the mark's own proportions are what should set the shape. */
.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 ESZIR MARK, ORIGINAL AND UNMODIFIED - no filter, no recolouring, no
	substitute glyph, per the owner's ruling of 2026-09-06 after a first pass
	showed it inverted to sit on this pane. The plate above is what makes that
	ruling free rather than limiting: the asset gets the white ground it was
	drawn for, and the pane stays dark.

	44px, NOT THE 96px OF THE PASS BEFORE. On a light pane the mark was the
	pane's whole content and was scaled to fill it, which the owner read as too
	big - correctly: it is a wordmark, and a wordmark at 96px is a banner.
	Inside the plate it is an object at its natural weight.

	Sized in px because `html` is at 62.5% on this page - see the header. */
.eszir-auth-brand-mark {
	display: block;
	height: 44px;
	width: auto;
	max-width: 100%;
}

/*	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;
	height: 38px;
	width: auto;
	margin: 0 auto 30px;
}

/*	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);
	border-bottom-color: var(--eszir-auth-green);
}

/*	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
/*
/*	`.box-login` is the carried class name and it is KEPT rather than
/*	renamed, because Views\Shared\Error.cshtml also carries it and that view
/*	is not edited by this change - it renders through this layout and gets
/*	the same card for free. Renaming would have meant a second view edit for
/*	no gain.
/* ---------------------------------------------------------------------- */
.eszir-auth .box-login {
	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 .box-login 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 .box-login > p {
	margin: 0 0 26px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--eszir-auth-muted);
}

.eszir-auth .box-login fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------- */
/*	3. Fields
/*
/*	A LABEL PER FIELD, WHICH THE CARRIED SCREEN DID NOT HAVE. Both inputs
/*	were placeholder-only, so the field's name disappeared the moment
/*	somebody typed into it and a screen reader had nothing but the
/*	placeholder to announce (WCAG 3.3.2). The labels are real <label for>
/*	elements; the placeholders stay as the example they always were.
/* ---------------------------------------------------------------------- */
.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. `.input-icon` is the carried wrapper and it positions the
	glyph absolutely; the geometry below replaces the theme's, which was
	built for a 30px Bootstrap 3 control. */
.eszir-auth .input-icon {
	position: relative;
	display: block;
}

.eszir-auth .input-icon > [class*="fa-"] {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 16px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	font-size: 14px;
	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*="fa-"] {
	color: var(--eszir-auth-green-dark);
}

/*	`input.password` carries `padding-right: 130px` in the carried theme to
	make room for the forgot-password link that used to sit INSIDE the
	field. The link is now a control of its own under the field, so the
	reservation is cancelled here rather than left to indent the text. */
.eszir-auth .box-login .form-control,
.eszir-auth .box-login input.password {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 10px 14px 10px 40px;
	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 .box-login .form-control::placeholder {
	color: var(--eszir-auth-faint);
}

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

/*	THE FOCUS RING IS THE BRAND GREEN, NOT BOOTSTRAP'S BLUE. main.css:70
	paints an 8px rgba(82,168,236,.6) halo on fourteen bare element
	selectors; eszirBrand.css records the same finding for the Vue screens
	and settles on the field's own border recoloured. This is that decision
	on a page with no PrimeVue in it: a 1px green border plus a 3px ring at
	18% - enough to satisfy WCAG 2.4.7 on a form that is filled in by
	keyboard, and nothing like the halo. */
.eszir-auth .box-login .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 .box-login .form-control:disabled {
	background-color: #f2f4f0;
	border-color: var(--eszir-auth-border);
	color: var(--eszir-auth-faint);
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------- */
/*	4. The forgot-password link
/*
/*	It was absolutely positioned inside the password field at
/*	main.css:3150 - a link on top of an input, which is a click target
/*	overlapping a text caret. Here it is a row of its own under the field.
/* ---------------------------------------------------------------------- */
.eszir-auth-field-foot {
	display: flex;
	justify-content: flex-end;
	margin: -6px 0 22px;
}

.eszir-auth #link-forgot {
	position: static;
	top: auto;
	right: auto;
	padding: 2px 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--eszir-auth-muted);
	text-shadow: none;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

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

/* ---------------------------------------------------------------------- */
/*	5. Buttons
/*
/*	`.btn-bricky` is the carried red at main.css:803 and it is what both
/*	screens submitted with. THE PRIMARY ACTION BECOMES THE BRAND GREEN:
/*	red is this application's Vissza and its delete, everywhere else in the
/*	tree, and spending it on "Belépés" made the only affirmative control on
/*	the page read as the destructive one. The class is kept in the markup
/*	so Error.cshtml's Vissza - which is a real back button - keeps the
/*	carried red, and the two login buttons carry .eszir-auth-submit.
/* ---------------------------------------------------------------------- */
.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;
	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*="fa-"] {
	font-size: 13px;
	line-height: 1;
}

/*	Error.cshtml's Vissza keeps .btn-bricky and only gains the geometry. */
.eszir-auth .box-login .btn-bricky {
	height: 42px;
	padding: 0 20px;
	font-family: var(--eszir-auth-font);
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--eszir-auth-radius-sm);
	text-shadow: none;
}

/*	The carried `.form-actions` is a float clearfix with a top margin and a
	`pull-right` button inside it. Both buttons are full-width blocks now. */
.eszir-auth .box-login .form-actions {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.eszir-auth .box-login .form-actions .pull-right {
	float: none;
}

/* ---------------------------------------------------------------------- */
/*	6. The four banners
/*
/*	All four are toggled by .no-display and shown with jQuery's fadeIn,
/*	which writes `display: block` as an INLINE style. So nothing below may
/*	set `display` on them - a `display: flex` here would win against the
/*	class but lose to the inline value the moment they are shown, and the
/*	layout would differ between the hidden and the visible state. They are
/*	block containers, laid out with margin.
/*
/*	THE TWO ILLUSTRATED ONES LOSE THEIR IMAGE. `Content/images/_thumb_11115.png`
/*	is a 10 KB glossy warning triangle in the 2009 house style, floated in a
/*	`col-sm-4` beside its text. It is replaced by a Font Awesome glyph -
/*	already loaded by the layout, so nothing is fetched for it - and the
/*	`.row`/`.col-sm-*` grid inside the banner goes with it.
/* ---------------------------------------------------------------------- */
.eszir-auth .box-login .alert {
	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;

	/*	A BANNER MUST SURVIVE THE LONGEST THING THE SERVER CAN PUT IN IT, AND
		ON THIS SCREEN THAT IS A .NET STACK TRACE. Scripts\main.js binds a
		global $(document).ajaxError that parses the response as JSON and
		hands msg.Message to $.fn.showError, which writes it into
		#error-message and reveals #error-container. With
		ESZIR:AppSettings:ShowFullError = true - which appsettings.json sets,
		so every developer machine - that Message is the whole exception:
		type, text, and forty frames each carrying an ABSOLUTE source path.

		Two separate things then break the card, and both are fixed here
		rather than in main.js, which is a carried asset under w6's hash
		comparison and not this change's to edit.

		1. WIDTH. A path like /Users/.../ManagerProxy.Anonymous.cs is one
		   unbroken token with no space in it. Bootstrap's .alert does not
		   set overflow-wrap, so it cannot be broken, and it pushes the card
		   wider than the column - which is what "the whole error is dropping
		   out of the error card" is.
		2. HEIGHT. Wrapped, that trace is some 1200px tall and the login form
		   goes below the fold. The message is scrolled instead, below. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

/*	The message body scrolls once it is longer than a few lines. The cap is on
	the SPAN rather than on the banner so the heading, the icon and the close
	button stay put while the text under them moves - and it engages only when
	there is something to scroll, so a one-line "Hibás jelszó" is untouched.

	The two ids are the two the carried scripts write into: #error-message is
	$.fn.showError's target and #success-message is $.fn.successMessage's. */
.eszir-auth .box-login .alert > #error-message,
.eszir-auth .box-login .alert > #success-message {
	display: block;
	max-height: 168px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*	A trace is not prose: at 13px in a proportional face the frames run
	together. This only ever has a trace in it when the server sent one - a
	short message reads the same either way at this size. */
.eszir-auth .box-login .alert-danger > #error-message {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	line-height: 1.5;
}

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

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

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

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

.eszir-auth .box-login .alert-danger {
	color: #8a1f1f;
	background: #fdf1f1;
	border-color: rgba(224, 34, 34, 0.35);
}

.eszir-auth .box-login .alert-danger > [class*="fa-"]:first-child {
	color: #c62828;
}

.eszir-auth .box-login .alert .close {
	position: absolute;
	top: 10px;
	right: 12px;
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: inherit;
	opacity: 0.45;
	text-shadow: none;
	background: none;
	border: 0;
	cursor: pointer;
}

.eszir-auth .box-login .alert .close:hover {
	opacity: 0.9;
}

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

/* ---------------------------------------------------------------------- */
/*	7. The Elfelejtett jelszó card
/*
/*	IT STAYS A SECOND CARD RATHER THAN BECOMING A PANEL SWAP, and that is a
/*	constraint rather than a preference. Scripts\pages\account\login\login.js
/*	reveals it with `$("#forgottenpassword-container").fadeIn(500)` and hides
/*	it with fadeOut, and that file is a CARRIED asset that
/*	verify-chunk-w6.ps1 compares to legacy's BY HASH - unlike Content\, which
/*	D32 put on a names-only comparison. Swapping the two cards would mean
/*	editing it, which is a $ModifiedAssetFiles substitution and a behaviour
/*	change on the login screen; the card is styled to arrive well instead.
/*
/*	The `style="margin-top: 20px"` the carried view set inline is gone from
/*	the markup, so the spacing is here where it can answer to the layout.
/* ---------------------------------------------------------------------- */
#forgottenpassword-container.box-login {
	margin-top: 16px;
	border-color: rgba(129, 163, 66, 0.42);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.05),
		0 20px 46px -22px rgba(16, 24, 40, 0.30);
}

/* ---------------------------------------------------------------------- */
/*	8. Error.cshtml
/*
/*	The view is NOT edited by this change - it renders through this layout
/*	and carries `.box-login`, so it gets the card above. What it also
/*	carries is a <center> around its heading and its button, and two bare
/*	<div>s of message text with no spacing of their own.
/*
/*	`.box-login > div` REACHES ERROR.CSHTML AND NOT LOGIN.CSHTML, which is
/*	what lets one selector serve a view this change does not edit: the login
/*	card's direct children are an h3, a p and the <form>, and every div in it
/*	is inside that form. Measured rather than assumed - the banners, the
/*	fields and .form-actions are all form children.
/* ---------------------------------------------------------------------- */
.eszir-auth .box-login center h3 {
	margin: 0 0 20px;
	font-size: 19px;
	line-height: 1.4;
}

.eszir-auth .box-login center {
	text-align: left;
}

.eszir-auth .box-login > div {
	font-size: 13px;
	line-height: 1.6;
	color: var(--eszir-auth-muted);
}

/*	The details line reads as a label for the message under it. */
.eszir-auth .box-login > div:not(.form-actions) + div:not(.form-actions) {
	margin-top: 6px;
	padding: 12px 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--eszir-auth-text);
	background: #f6f7f4;
	border: 1px solid var(--eszir-auth-border);
	border-radius: var(--eszir-auth-radius-sm);
}

.eszir-auth .box-login > .form-actions {
	margin-top: 22px;
}

/* ---------------------------------------------------------------------- */
/*	9. validationEngine
/*
/*	The plugin absolutely positions a `.formError` bubble against the input
/*	it belongs to and draws it from
/*	Content/plugins/jquery-Validation-Engine/validationEngine.jquery.css.
/*	Only the two things that clash with the card are corrected: the bubble's
/*	own radius, and its z-index against the card's shadow.
/* ---------------------------------------------------------------------- */
.eszir-auth .formError .formErrorContent {
	border-radius: 7px;
	font-family: var(--eszir-auth-font);
	font-size: 12px;
	line-height: 1.45;
	box-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.4);
}

.eszir-auth .formError {
	z-index: 20;
}