/*
	The PRE-ANGULAR boot plate, painted by assets/js/loading.js before the bundle runs and removed
	by its own MutationObserver once app-root changes.

	It used to be flat `white`, which is the one full-viewport white surface in the app and the
	only place a loader could sit on a white plate (TBL2-1713 P1). It takes the app's own paper
	surface now, and the espresso ground in dark mode, so the first paint belongs to the brand —
	with a literal fallback because this file is also read before tokens.css has done anything for
	a browser that fails to parse the custom property.
 */
#loading-container {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--surface, #f7f4ef);
	color: var(--gold-500, #cea05d);
}
/*
	The Lance mark, STILL — the glyph on the boot plate and inside both ngx-spinner overlays
	(TBL2-1713 P1 put it here, turning; TBL2-1928 / K-1029-6 stopped it: a page load is not Lance
	working, so a waiting page shows the Rest mark and the clip plays only where Lance thinks or
	executes — brand package § Motion). GLOBAL on purpose: the markup is injected into the
	library's own component through its `template` input (see LANCE_LOADER_TEMPLATE), where an
	encapsulated component style can never reach it. No animation here, ever.
 */
.lance-loader {
	display: block;
	width: 64px;
	height: 64px;
	/* The ink, in one place. The mark is inline SVG filled with currentColor, so it has no plate
	   of its own and nothing behind it to paint: gold reads on the dark scrims both overlays use. */
	color: var(--gold-500);
}

/*
	TBL2-1985 (Carlos, 2026-11-04) — on the public pages (/login, /apply, /portal: the shell marks
	<body> with .public-ground while it is mounted) the preloader is Deep Orange on the Warm Ambient
	Gradient, Almond to Orange, instead of gold on the dark scrim, which read poorly on the peach
	ground. The library paints the scrim as an inline background-COLOR (its bdColor input), so the
	gradient is a background-IMAGE layered over it: no !important, and every other page keeps its
	scrim.
*/
body.public-ground .ngx-spinner-overlay {
	background-image: linear-gradient(var(--surface-angle), var(--ambient-0), var(--ambient-1) 50%, var(--ambient-2));
	background-image: linear-gradient(var(--surface-angle) in oklab, var(--ambient-0), var(--ambient-1) 50%, var(--ambient-2));
}

body.public-ground .lance-loader {
	color: var(--accent);
}

/*
	Custom loading
	https://labs.danielcardoso.net/load-awesome/animations.html

	Left in place for assets/js/loading.js, the pre-Angular boot loader that paints this markup.
	The two ngx-spinner overlays no longer reach it: a `template` input suppresses the library's
	own ball-spin glyph entirely, so these rules are the boot loader's alone now.
 */
.la-ball-spin-clockwise,
.la-ball-spin-clockwise > div {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.la-ball-spin-clockwise {
	display: block;
	font-size: 0;
	color: #ff2d00;
}
.la-ball-spin-clockwise.la-dark {
	color: #333;
}
.la-ball-spin-clockwise > div {
	display: inline-block;
	float: none;
	background-color: currentColor;
	border: 0 solid currentColor;
}
.la-ball-spin-clockwise {
	width: 32px;
	height: 32px;
}
.la-ball-spin-clockwise > div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	margin-left: -4px;
	border-radius: 100%;
	-webkit-animation: ball-spin-clockwise 1s infinite ease-in-out;
	-moz-animation: ball-spin-clockwise 1s infinite ease-in-out;
	-o-animation: ball-spin-clockwise 1s infinite ease-in-out;
	animation: ball-spin-clockwise 1s infinite ease-in-out;
}
.la-ball-spin-clockwise > div:nth-child(1) {
	top: 5%;
	left: 50%;
	-webkit-animation-delay: -0.875s;
	-moz-animation-delay: -0.875s;
	-o-animation-delay: -0.875s;
	animation-delay: -0.875s;
}
.la-ball-spin-clockwise > div:nth-child(2) {
	top: 18.1801948466%;
	left: 81.8198051534%;
	-webkit-animation-delay: -0.75s;
	-moz-animation-delay: -0.75s;
	-o-animation-delay: -0.75s;
	animation-delay: -0.75s;
}
.la-ball-spin-clockwise > div:nth-child(3) {
	top: 50%;
	left: 95%;
	-webkit-animation-delay: -0.625s;
	-moz-animation-delay: -0.625s;
	-o-animation-delay: -0.625s;
	animation-delay: -0.625s;
}
.la-ball-spin-clockwise > div:nth-child(4) {
	top: 81.8198051534%;
	left: 81.8198051534%;
	-webkit-animation-delay: -0.5s;
	-moz-animation-delay: -0.5s;
	-o-animation-delay: -0.5s;
	animation-delay: -0.5s;
}
.la-ball-spin-clockwise > div:nth-child(5) {
	top: 94.9999999966%;
	left: 50.0000000005%;
	-webkit-animation-delay: -0.375s;
	-moz-animation-delay: -0.375s;
	-o-animation-delay: -0.375s;
	animation-delay: -0.375s;
}
.la-ball-spin-clockwise > div:nth-child(6) {
	top: 81.8198046966%;
	left: 18.1801949248%;
	-webkit-animation-delay: -0.25s;
	-moz-animation-delay: -0.25s;
	-o-animation-delay: -0.25s;
	animation-delay: -0.25s;
}
.la-ball-spin-clockwise > div:nth-child(7) {
	top: 49.9999750815%;
	left: 5.0000051215%;
	-webkit-animation-delay: -0.125s;
	-moz-animation-delay: -0.125s;
	-o-animation-delay: -0.125s;
	animation-delay: -0.125s;
}
.la-ball-spin-clockwise > div:nth-child(8) {
	top: 18.179464974%;
	left: 18.1803700518%;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}
.la-ball-spin-clockwise.la-sm {
	width: 16px;
	height: 16px;
}
.la-ball-spin-clockwise.la-sm > div {
	width: 4px;
	height: 4px;
	margin-top: -2px;
	margin-left: -2px;
}
.la-ball-spin-clockwise.la-2x {
	width: 64px;
	height: 64px;
}
.la-ball-spin-clockwise.la-2x > div {
	width: 16px;
	height: 16px;
	margin-top: -8px;
	margin-left: -8px;
}
.la-ball-spin-clockwise.la-3x {
	width: 96px;
	height: 96px;
}
.la-ball-spin-clockwise.la-3x > div {
	width: 24px;
	height: 24px;
	margin-top: -12px;
	margin-left: -12px;
}
/*
 * Animation
 */
@-webkit-keyframes ball-spin-clockwise {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		-webkit-transform: scale(0);
		transform: scale(0);
	}
}
@-moz-keyframes ball-spin-clockwise {
	0%,
	100% {
		opacity: 1;
		-moz-transform: scale(1);
		transform: scale(1);
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		-moz-transform: scale(0);
		transform: scale(0);
	}
}
@-o-keyframes ball-spin-clockwise {
	0%,
	100% {
		opacity: 1;
		-o-transform: scale(1);
		transform: scale(1);
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		-o-transform: scale(0);
		transform: scale(0);
	}
}
@keyframes ball-spin-clockwise {
	0%,
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	20% {
		opacity: 1;
	}
	80% {
		opacity: 0;
		-webkit-transform: scale(0);
		-moz-transform: scale(0);
		-o-transform: scale(0);
		transform: scale(0);
	}
}