/* STEAM Connect login — split-screen auth. Self-contained tokens so the page
   renders pre-session without /inc/assets/css/index.css. */

@font-face {
	font-family: 'Steam-font';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/inc/assets/fonts/Como/Como-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Steam-font';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/inc/assets/fonts/Como/Como-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Steam-font';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/inc/assets/fonts/Como/Como-ExtraBold.woff2') format('woff2');
}

/* Design tokens — light theme (default) */
:root {
	/* Brand anchors */
	--primary-100: #4C384D;
	--secondary-100: #ED6B43;
	--pearl: #B6C5C1;
	--white: #FFFFFF;
	--black: #000000;

	/* Primary scale */
	--primary-150: #261c26;
	--primary-140: #2e222e;
	--primary-110: #443245;
	--primary-90: #624863;
	--primary-25: #d7c8d7;
	--primary-20: #DFD3DF;
	--primary-10: #EFE9EF;
	--primary-5: #F7F4F7;

	/* Secondary scale */
	--secondary-110: #EA5527;
	--secondary-10: #fdf0ec;

	/* Neutral */
	--neutral-900: #212121;
	--neutral-850: #2d2d2d;
	--neutral-800: #323232;
	--neutral-700: #444444;
	--neutral-600: #666666;
	--neutral-500: #888888;
	--neutral-400: #AFAFAF;
	--neutral-300: #cccccc;
	--neutral-200: #e5e5e5;
	--neutral-150: #eeeeee;
	--neutral-100: #f5f5f5;
	--neutral-50: #FAFAFA;

	/* Status */
	--success: #4caf50;
	--warning: #ff9800;
	--danger: #f44336;
	--info: #2196f3;

	/* Semantic — light */
	--background-primary: var(--white);
	--background-secondary: var(--primary-5);
	--background-tertiary: var(--primary-10);
	--component-bg: var(--background-primary);
	--component-bg-hover: var(--primary-5);
	--overlay-bg-color: #ffffffb3;

	--text-primary: #343434;
	--text-secondary: var(--neutral-700);
	--text-muted: var(--neutral-500);
	--text-disabled: var(--neutral-400);
	--text-inverse: var(--white);

	--border-color: var(--neutral-200);
	--divider-color: var(--neutral-200);
	--icon-btn-hover: var(--secondary-10);

	/* Component — buttons */
	--btn-primary-bg: var(--white);
	--btn-primary-text: var(--secondary-100);
	--btn-primary-border: var(--secondary-100);
	--btn-primary-hover-bg: var(--secondary-100);
	--btn-primary-hover-text: var(--white);
	--btn-primary-active-bg: var(--secondary-110);

	/* Component — inputs */
	--input-bg: var(--white);
	--input-text: var(--text-primary);
	--input-placeholder: var(--text-muted);
	--input-border: var(--neutral-400);
	--input-focus-border: var(--primary-100);
	--input-focus-shadow: rgba(76, 56, 77, 0.25);

	/* Typography */
	--font-family: 'Steam-font', sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 28px;
	--font-size-4xl: 32px;
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-9: 36px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Radii */
	--border-radius-sm: 2px;
	--border-radius-md: 4px;
	--border-radius-lg: 8px;
	--border-radius-xl: 16px;
	--border-radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10);
	--shadow-xl: 0 20px 40px -8px rgba(76, 56, 77, 0.18);

	/* Motion */
	--transition-fast: 150ms;
	--transition-normal: 300ms;
	--transition-none: 0ms;
	--ease: cubic-bezier(0.42, 0.47, 0.45, 0.86);
}

/* Design tokens — dark theme */
[data-theme="dark"] {
	--background-primary: var(--neutral-850);
	--background-secondary: var(--neutral-800);
	--background-tertiary: #383838;
	--component-bg: var(--background-secondary);
	--component-bg-hover: var(--neutral-700);
	--overlay-bg-color: #353535c7;

	--text-primary: #c4c4c4;
	--text-secondary: var(--neutral-300);
	--text-muted: var(--neutral-400);
	--text-disabled: var(--neutral-500);
	--text-inverse: var(--neutral-900);

	--border-color: var(--neutral-700);
	--divider-color: var(--neutral-700);
	--icon-btn-hover: #444444;

	--btn-primary-bg: var(--background-primary);
	--btn-primary-hover-text: var(--black);

	--input-bg: var(--neutral-800);
	--input-border: var(--neutral-600);
	--input-focus-shadow: rgba(237, 107, 67, 0.25);

	--shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.6);
}

/* Base */
*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

/* html-prefixed selector bumps specificity so legacy per-page body
   background overrides can't win the cascade. */
html body {
	margin: 0;
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	color: var(--text-primary);
	background: var(--background-primary);
	background-image: none;
	line-height: var(--line-height-normal);
	-webkit-font-smoothing: antialiased;
	transition: var(--transition-none);
	text-align: left;
	overflow: auto;
}

a {
	color: var(--primary-100);
	text-decoration: none;
}

	a:hover {
		color: var(--secondary-100);
	}

button {
	font-family: inherit;
	cursor: pointer;
}

/* Scrollbar */
*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	border-radius: 5px;
}

*::-webkit-scrollbar-track {
	background: var(--background-secondary);
	border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
	background: var(--primary-100);
	border-radius: 5px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--primary-100) var(--background-secondary);
}

/* Page layout — split-screen auth */
.sc-auth {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	background: var(--background-primary);
}

@media (max-width: 992px) {
	.sc-auth {
		grid-template-columns: 1fr;
	}

	.sc-auth__brand {
		display: none;
	}
}

/* Left — brand panel */
.sc-auth__brand {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at 30% 20%, var(--primary-10) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, var(--secondary-10) 0%, transparent 50%), var(--background-secondary);
	padding: var(--space-9) var(--space-10);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background var(--transition-normal) var(--ease);
}

[data-theme="dark"] .sc-auth__brand {
	background: radial-gradient(ellipse at 30% 20%, rgba(76,56,77,0.45) 0%, transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(237,107,67,0.18) 0%, transparent 50%), var(--neutral-900);
}

/* Decorative wedges */
.sc-auth__shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.45;
}

	.sc-auth__shapes svg {
		width: 100%;
		height: 100%;
	}

/* STEAM Connect logo block */
.sc-auth__logo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.sc-auth__steam-logo {
	width: 220px;
	max-width: 70%;
	height: auto;
}

.sc-auth__tagline {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
	color: var(--secondary-100);
	margin-top: var(--space-1);
	letter-spacing: 0.02em;
}

/* Hero illustration / message block */
.sc-auth__hero {
	position: relative;
	z-index: 2;
	max-width: 520px;
	align-self: center;
	width: 100%;
	margin: var(--space-8) 0;
}

	.sc-auth__hero h1 {
		font-size: var(--font-size-4xl);
		font-weight: var(--font-weight-bold);
		color: var(--primary-100);
		line-height: 1.15;
		margin: 0 0 var(--space-4);
		letter-spacing: -0.01em;
	}

		.sc-auth__hero h1 em {
			font-style: normal;
			color: var(--secondary-100);
		}

	.sc-auth__hero p {
		font-size: var(--font-size-md);
		color: var(--text-secondary);
		margin: 0 0 var(--space-6);
		max-width: 44ch;
	}

[data-theme="dark"] .sc-auth__hero h1 {
	color: var(--text-primary);
}

/* Stats / feature pills */
.sc-auth__stats {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.sc-auth__stat {
	background: var(--background-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-full);
	padding: var(--space-2) var(--space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	box-shadow: var(--shadow-sm);
}

	.sc-auth__stat i {
		color: var(--secondary-100);
		font-size: 11px;
	}

/* Footer of brand panel */
.sc-auth__brand-footer {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--font-size-xs);
	color: var(--text-muted);
}

	.sc-auth__brand-footer a {
		color: var(--text-muted);
	}

		.sc-auth__brand-footer a:hover {
			color: var(--secondary-100);
		}

.sc-auth__brand-footer-links {
	display: flex;
	gap: var(--space-5);
}

/* Right — form panel */
.sc-auth__form-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-6) var(--space-10);
	background: var(--background-primary);
}

/* Top bar — theme toggle, language selector */
.sc-auth__topbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-2);
	min-height: 36px;
}

.sc-auth__lang-wrap {
	position: relative;
}

.sc-auth__lang {
	background: transparent;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	transition: all var(--transition-fast) var(--ease);
}

	.sc-auth__lang:hover,
	.sc-auth__lang-wrap.is-open .sc-auth__lang {
		border-color: var(--primary-100);
		color: var(--primary-100);
	}

.sc-auth__lang-menu,
.sc-auth__lang-menu li {
	list-style: none;
	list-style-type: none;
}

.sc-auth__lang-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 180px;
	margin: 0;
	padding: var(--space-1);
	background: var(--background-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-md);
	z-index: 20;
	display: none;
}

.sc-auth__lang-wrap.is-open .sc-auth__lang-menu {
	display: block;
}

.sc-auth__lang-menu li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--border-radius-sm);
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease);
}

	.sc-auth__lang-menu li::marker {
		content: "";
	}

	.sc-auth__lang-menu li:hover {
		background: var(--icon-btn-hover);
		color: var(--secondary-100);
	}

	.sc-auth__lang-menu li.is-active {
		color: var(--primary-100);
		font-weight: var(--font-weight-medium);
	}

		.sc-auth__lang-menu li.is-active .sc-auth__lang-code {
			background: var(--primary-100);
			color: var(--white);
			border-color: var(--primary-100);
		}

.sc-auth__lang-name {
	flex: 1;
}

.sc-auth__lang-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 26px;
	height: 18px;
	padding: 0 var(--space-1);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-sm);
	background: var(--background-secondary);
	font-size: 10px;
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.sc-btn-icons {
	width: 32px;
	height: 32px;
	border-radius: var(--border-radius-full);
	border: 1px solid var(--border-color);
	background: var(--background-primary);
	color: var(--text-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-fast) var(--ease);
}

	.sc-btn-icons:hover {
		background: var(--icon-btn-hover);
		color: var(--secondary-100);
		border-color: var(--secondary-100);
	}

/* Form body */
.sc-auth__form-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
	padding: var(--space-6) 0;
}

	.sc-auth__form-body form {
		display: flex;
		flex-direction: column;
	}

/* White-label tenant brand */
.sc-auth__tenant {
	margin-bottom: var(--space-8);
	text-align: left;
}

.sc-auth__tenant-img {
	max-width: 220px;
	max-height: 80px;
	display: block;
}

.sc-auth__tenant-tag {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sc-auth__title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--text-primary);
	margin: 0 0 var(--space-1);
	line-height: var(--line-height-tight);
}

.sc-auth__subtitle {
	font-size: var(--font-size-sm);
	color: var(--text-muted);
	margin: 0 0 var(--space-6);
}

/* Form — .sc-form-control adapted for narrow auth context (labels above inputs) */
.sc-form-group-control {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.sc-form-control--stacked {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.sc-form-control__label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	color: var(--text-secondary);
	letter-spacing: 0.02em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.sc-form-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

	.sc-form-input-wrap > i.fa-prefix {
		position: absolute;
		left: var(--space-3);
		color: var(--text-muted);
		font-size: 14px;
		pointer-events: none;
		transition: color var(--transition-fast) var(--ease);
	}

.sc-form-input {
	width: 100%;
	height: 44px;
	padding: 0 var(--space-3) 0 calc(var(--space-3) * 2 + 18px);
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--input-border);
	border-radius: var(--border-radius-md);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	transition: border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
	outline: none;
}

	.sc-form-input::placeholder {
		color: var(--input-placeholder);
	}

	.sc-form-input:hover {
		border-color: var(--neutral-500);
	}

	.sc-form-input:focus {
		border-color: var(--input-focus-border);
		box-shadow: 0 0 0 3px var(--input-focus-shadow);
	}

		.sc-form-input:focus ~ i.fa-prefix,
		.sc-form-input-wrap:focus-within > i.fa-prefix {
			color: var(--primary-100);
		}

	.sc-form-input--password {
		padding-right: 44px;
	}

.sc-form-input-action {
	position: absolute;
	right: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border-radius: var(--border-radius-md);
	border: 0;
	background: transparent;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--transition-fast) var(--ease);
}

	.sc-form-input-action:hover {
		background: var(--icon-btn-hover);
		color: var(--secondary-100);
	}

.sc-form-control__label-link {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
	color: var(--secondary-100);
	text-transform: none;
	letter-spacing: 0;
}

	.sc-form-control__label-link:hover {
		color: var(--secondary-110);
		text-decoration: underline;
	}

/* Inline status/error messages (login_manager.js sets login-message--{info|error|success}) */
.loginMessage {
	min-height: 22px;
	margin: var(--space-3) 0 0;
	font-size: var(--font-size-xs);
	text-align: center;
	color: var(--text-muted);
}

	.loginMessage:empty {
		margin: 0;
	}

.login-message {
	padding: var(--space-2) var(--space-3);
	border-radius: var(--border-radius-md);
	border: 1px solid transparent;
	font-size: var(--font-size-xs);
}

.login-message--info {
	background: var(--primary-5);
	color: var(--primary-100);
	border-color: var(--primary-20);
}

.login-message--success {
	background: #e8f5e9;
	color: #2e7d32;
	border-color: #c8e6c9;
}

.login-message--error {
	background: #ffebee;
	color: #c62828;
	border-color: #ffcdd2;
}

[data-theme="dark"] .login-message--info {
	background: rgba(76, 56, 77, 0.25);
	color: var(--primary-25);
	border-color: rgba(76, 56, 77, 0.4);
}

[data-theme="dark"] .login-message--success {
	background: rgba(76, 175, 80, 0.2);
	color: #81c784;
	border-color: rgba(76, 175, 80, 0.3);
}

[data-theme="dark"] .login-message--error {
	background: rgba(244, 67, 54, 0.2);
	color: #e57373;
	border-color: rgba(244, 67, 54, 0.3);
}

/* Pass-grid — diamond layout, server-rendered by GridGenerator (25 cells) */
.grid-login-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: var(--space-6);
}

.passGrid {
	display: inline-grid;
	grid-template-areas:
		".      .       .         .        pg1       .        .        .        ."
		".      .       .        pg2        .       pg6       .        .        ."
		".      .      pg3        .        pg7       .       pg11      .        ."
		".     pg4      .        pg8        .       pg12      .       pg16      ."
		"pg5    .      pg9        .        pg13      .       pg17      .      pg21"
		".     pg10     .        pg14       .       pg18      .       pg22      ."
		".      .      pg15       .        pg19      .       pg23      .        ."
		".      .       .        pg20       .       pg24      .        .        ."
		".      .       .         .        pg25       .       .        .        .";
}

#pg1 { grid-area: pg1; }
#pg2 { grid-area: pg2; }
#pg3 { grid-area: pg3; }
#pg4 { grid-area: pg4; }
#pg5 { grid-area: pg5; }
#pg6 { grid-area: pg6; }
#pg7 { grid-area: pg7; }
#pg8 { grid-area: pg8; }
#pg9 { grid-area: pg9; }
#pg10 { grid-area: pg10; }
#pg11 { grid-area: pg11; }
#pg12 { grid-area: pg12; }
#pg13 { grid-area: pg13; }
#pg14 { grid-area: pg14; }
#pg15 { grid-area: pg15; }
#pg16 { grid-area: pg16; }
#pg17 { grid-area: pg17; }
#pg18 { grid-area: pg18; }
#pg19 { grid-area: pg19; }
#pg20 { grid-area: pg20; }
#pg21 { grid-area: pg21; }
#pg22 { grid-area: pg22; }
#pg23 { grid-area: pg23; }
#pg24 { grid-area: pg24; }
#pg25 { grid-area: pg25; }

.passGridCircle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	font-family: var(--font-family);
	transition: transform var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}

.passGridCircleStyle1 {
	background-color: var(--background-primary);
	color: var(--text-secondary);
}

.passGridCircleStyle2 {
	background-color: var(--primary-90);
	color: var(--white);
	border-color: var(--primary-90);
}

.passGridCircle.selected {
	transform: scale(1.2);
	box-shadow: 0 4px 15px rgba(76, 56, 77, 0.5);
}

.passGridNumber {
	font-size: 14px;
}

/* Primary CTA — inverted steam-btn--primary (white, orange border, fills on hover) */
.steam-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.5rem;
	height: 36px;
	padding: 0 var(--space-5);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.02em;
	border-radius: var(--border-radius-md);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: all var(--transition-fast) var(--ease);
	text-decoration: none;
}

	.steam-btn:focus-visible {
		outline: 2px solid var(--secondary-100);
		outline-offset: 2px;
	}

.steam-btn--primary {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	border-color: var(--btn-primary-border);
}

	.steam-btn--primary:hover {
		background: var(--btn-primary-hover-bg);
		color: var(--btn-primary-hover-text);
	}

	.steam-btn--primary:active {
		background: var(--btn-primary-active-bg);
		border-color: var(--btn-primary-active-bg);
		color: var(--white);
	}

	.steam-btn--primary:disabled {
		background: var(--neutral-150);
		color: var(--neutral-500);
		border-color: var(--neutral-300);
		cursor: not-allowed;
	}

	.steam-btn--primary__active {
		background: var(--btn-primary-hover-bg);
		color: var(--btn-primary-hover-text);
	}

.steam-btn--block {
	width: 100%;
}

.steam-btn--lg {
	height: 48px;
	font-size: var(--font-size-md);
}

.sc-auth__submit {
	margin-top: var(--space-6);
}

/* Footer of form panel */
.sc-auth__form-footer {
	margin-top: auto;
	padding-top: var(--space-6);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--font-size-xs);
	color: var(--text-muted);
	flex-wrap: wrap;
}

.sc-auth__signup {
	color: var(--text-muted);
}

	.sc-auth__signup a {
		color: var(--secondary-100);
		font-weight: var(--font-weight-medium);
	}

		.sc-auth__signup a:hover {
			color: var(--secondary-110);
			text-decoration: underline;
		}

.sc-auth__socials {
	display: inline-flex;
	gap: var(--space-1);
}

.sc-auth__social {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	transition: all var(--transition-fast) var(--ease);
}

	.sc-auth__social:hover {
		background: var(--icon-btn-hover);
		color: var(--secondary-100);
	}

/* Subtle entrance animation */
@keyframes scAuthFadeUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sc-auth__form-body > * {
	animation: scAuthFadeUp 500ms var(--ease) both;
}

	.sc-auth__form-body > *:nth-child(1) { animation-delay: 50ms; }
	.sc-auth__form-body > *:nth-child(2) { animation-delay: 100ms; }
	.sc-auth__form-body > *:nth-child(3) { animation-delay: 150ms; }
	.sc-auth__form-body > *:nth-child(4) { animation-delay: 200ms; }
	.sc-auth__form-body > *:nth-child(5) { animation-delay: 250ms; }
	.sc-auth__form-body > *:nth-child(6) { animation-delay: 300ms; }
	.sc-auth__form-body > *:nth-child(7) { animation-delay: 350ms; }

/* Callscreen iframe mode — set by login_manager.js when login.aspx renders inside
   the belscherm re-auth iframe. Strips chrome to just credential fields + passgrid
   so the submit button stays visible at common iframe heights. */
body.sc-auth--callscreen {
	background: transparent;
}

	body.sc-auth--callscreen .sc-auth {
		min-height: auto;
		grid-template-columns: 1fr;
		background: transparent;
	}

	/* Hide all the surrounding chrome — only the form survives. */
	body.sc-auth--callscreen .sc-auth__brand,
	body.sc-auth--callscreen .sc-auth__topbar,
	body.sc-auth--callscreen .sc-auth__tenant,
	body.sc-auth--callscreen .sc-auth__title,
	body.sc-auth--callscreen .sc-auth__subtitle,
	body.sc-auth--callscreen .sc-auth__form-footer {
		display: none;
	}

	body.sc-auth--callscreen .sc-auth__form-panel {
		padding: var(--space-4) var(--space-6);
	}

	body.sc-auth--callscreen .sc-auth__form-body {
		padding: 0;
		max-width: 100%;
	}

	/* Drop the staggered entrance animation in the iframe — parent already
	   animates the modal open; a second slide-up reads as latency. */
	body.sc-auth--callscreen .sc-auth__form-body > * {
		animation: none;
	}