/* Bridge Taylor public authentication experience.
 *
 * Every selector is scoped to body[data-path="login"] so the LMS, careers and
 * portal pages keep their own presentation. Nothing here is global.
 *
 * The brand panel is real DOM injected by login.js, not CSS ``content``:
 * generated text cannot hold a logo, cannot be selected or translated, and is
 * read inconsistently by screen readers. If the script does not run, the form
 * still renders and still works - it simply loses the panel.
 */

body[data-path="login"] {
	/* Brand: the orange is Bridge Taylor's, kept as the accent. The panel is deep
	   ink rather than a full orange field - the accent carries further when it is
	   not competing with 40% of the screen. */
	--bt-ember: #f97316;
	--bt-ember-deep: #ea580c;
	--bt-ember-lift: #fb923c;
	--bt-ink: #0b1220;
	--bt-ink-2: #16202f;
	--bt-ink-3: #1f2b3d;

	--bt-page: #101828;
	--bt-surface: #ffffff;
	--bt-field: #f7f9fc;
	--bt-line: #e3e8f0;
	--bt-text: #101828;
	--bt-muted: #5a6577;
	--bt-faint: #8a94a6;

	--bt-panel-text: #f4f6fa;
	--bt-panel-muted: #a9b4c6;
	--bt-panel-line: rgba(255, 255, 255, 0.11);

	--bt-danger: #b42318;
	--bt-danger-soft: #fef3f2;
	--bt-danger-line: #fda29b;
	--bt-ok: #067647;
	--bt-ok-soft: #ecfdf3;

	--bt-radius: 22px;
	--bt-shadow: 0 40px 90px -28px rgba(11, 18, 32, 0.42), 0 12px 28px -14px rgba(11, 18, 32, 0.22);

	min-height: 100vh;
	background:
		radial-gradient(ellipse 60rem 34rem at 6% 4%, rgba(249, 115, 22, 0.16), transparent 70%),
		radial-gradient(ellipse 52rem 34rem at 96% 96%, rgba(37, 99, 235, 0.13), transparent 70%),
		linear-gradient(146deg, #fff8f1 0%, #f7f9fc 48%, #eef1f9 100%);
	color: var(--bt-text);
}

/* A faint plotting grid, faded out before it reaches the footer. */
body[data-path="login"]::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(16, 24, 40, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(16, 24, 40, 0.022) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: linear-gradient(to bottom, black, transparent 84%);
	-webkit-mask-image: linear-gradient(to bottom, black, transparent 84%);
}

body[data-path="login"] main.container {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: none;
	min-height: calc(100vh - 80px);
	padding: clamp(24px, 5vh, 64px) 24px;
}

body[data-path="login"] .page-header-wrapper,
body[data-path="login"] .page-breadcrumbs {
	display: none;
}

body[data-path="login"] .page_content,
body[data-path="login"] .page_content > div {
	width: 100%;
}

/* ---- The card ------------------------------------------------------------- */

body[data-path="login"] section.for-login,
body[data-path="login"] section.for-forgot,
body[data-path="login"] section.for-login-with-email-link,
body[data-path="login"] section.for-signup,
body[data-path="login"] section.for-email-login {
	position: relative;
	display: grid;
	/* Single column by default. The second column is claimed only once the brand
	   panel actually exists, so if the script does not run the form renders as a
	   normal centred card rather than squeezed into half a missing layout. */
	grid-template-columns: 1fr;
	width: min(100%, 1000px);
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--bt-radius);
	background: var(--bt-surface);
	box-shadow: var(--bt-shadow);
}

body[data-path="login"].bt-login-ready section.for-login {
	animation: bt-card-in 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

body[data-path="login"].bt-login-ready section.for-login,
body[data-path="login"].bt-login-ready section.for-forgot,
body[data-path="login"].bt-login-ready section.for-login-with-email-link,
body[data-path="login"].bt-login-ready section.for-signup,
body[data-path="login"].bt-login-ready section.for-email-login {
	grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
}

@keyframes bt-card-in {
	from { opacity: 0; transform: translateY(14px) scale(0.995); }
	to   { opacity: 1; transform: none; }
}

/* ---- Brand panel ---------------------------------------------------------- */

body[data-path="login"] .bt-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	box-sizing: border-box;
	padding: 44px 40px 38px;
	overflow: hidden;
	background: linear-gradient(158deg, var(--bt-ink) 0%, var(--bt-ink-2) 58%, var(--bt-ink-3) 100%);
	color: var(--bt-panel-text);
}

/* The one flourish, and it is slow enough to read as light rather than motion. */
body[data-path="login"] .bt-brand-aurora {
	position: absolute;
	inset: -35% -20% auto -20%;
	height: 78%;
	pointer-events: none;
	background:
		radial-gradient(ellipse 22rem 14rem at 22% 30%, rgba(249, 115, 22, 0.4), transparent 68%),
		radial-gradient(ellipse 18rem 12rem at 78% 12%, rgba(251, 146, 60, 0.22), transparent 66%),
		radial-gradient(ellipse 16rem 12rem at 55% 70%, rgba(56, 108, 235, 0.2), transparent 70%);
	filter: blur(6px);
	animation: bt-aurora 26s ease-in-out infinite alternate;
}

@keyframes bt-aurora {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(4%, 4%, 0) scale(1.1); }
}

body[data-path="login"] .bt-brand > *:not(.bt-brand-aurora) {
	position: relative;
	z-index: 1;
}

body[data-path="login"] .bt-brand-lockup {
	display: flex;
	align-items: center;
	gap: 13px;
}

body[data-path="login"] .bt-brand-mark {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 13px;
	box-shadow: 0 10px 26px -8px rgba(234, 88, 12, 0.7);
}

body[data-path="login"] .bt-brand-words {
	display: grid;
	gap: 1px;
	line-height: 1.2;
}

body[data-path="login"] .bt-brand-words strong {
	font-size: 16px;
	font-weight: 750;
	letter-spacing: -0.02em;
}

body[data-path="login"] .bt-brand-words small {
	color: var(--bt-panel-muted);
	font-size: 10.5px;
	font-weight: 650;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

body[data-path="login"] .bt-brand-body {
	display: grid;
	gap: 26px;
	margin-top: auto;
}

body[data-path="login"] .bt-brand-body h2 {
	margin: 0;
	max-width: 17ch;
	color: #fff;
	font-size: clamp(23px, 2.4vw, 29px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.032em;
	text-wrap: balance;
}

body[data-path="login"] .bt-brand-points {
	display: grid;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body[data-path="login"] .bt-brand-points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

body[data-path="login"] .bt-point-icon {
	display: grid;
	flex: 0 0 30px;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--bt-panel-line);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--bt-ember-lift);
}

body[data-path="login"] .bt-point-icon svg { width: 17px; height: 17px; }

body[data-path="login"] .bt-point-text { display: grid; gap: 2px; }

body[data-path="login"] .bt-point-text strong {
	font-size: 13px;
	font-weight: 650;
	letter-spacing: -0.008em;
}

body[data-path="login"] .bt-point-text small {
	color: var(--bt-panel-muted);
	font-size: 11.5px;
	line-height: 1.55;
}

body[data-path="login"] .bt-brand-foot {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding-top: 20px;
	border-top: 1px solid var(--bt-panel-line);
	color: var(--bt-panel-muted);
	font-size: 11.5px;
	line-height: 1.5;
}

body[data-path="login"] .bt-foot-icon { display: inline-grid; flex: 0 0 16px; color: #6ee7b7; }
body[data-path="login"] .bt-foot-icon svg { width: 16px; height: 16px; }

/* ---- Form side ------------------------------------------------------------ */

body[data-path="login"] .login-content.page-card {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 46px clamp(34px, 4.2vw, 58px) 42px;
	border: 0;
	border-radius: 0;
	background: var(--bt-surface);
	box-shadow: none;
}

body[data-path="login"] .page-card-head {
	display: block !important;
	margin-bottom: 26px;
	text-align: left !important;
}

/* The mark lives in the brand panel; repeating it above the form is noise. */
body[data-path="login"] .page-card-head .app-logo { display: none; }

body[data-path="login"] .page-card-head-text h4 {
	margin: 0 0 6px;
	color: var(--bt-text);
	font-size: 25px;
	font-weight: 720;
	letter-spacing: -0.032em;
}

body[data-path="login"] .page-card-subtitle {
	margin: 0;
	color: var(--bt-muted);
	font-size: 13.5px;
	line-height: 1.55;
}

body[data-path="login"] .page-card-body { padding: 0; }

/* ---- Microsoft ------------------------------------------------------------ */

body[data-path="login"] .bt-microsoft-panel {
	margin: 0 0 22px;
	padding: 15px;
	border: 1px solid var(--bt-line);
	border-radius: 15px;
	background: linear-gradient(150deg, #fcfdff, #f4f7fc);
}

body[data-path="login"] .bt-ms-kicker {
	margin: 0 0 10px;
	color: var(--bt-faint);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

body[data-path="login"] .bt-microsoft-login {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid #c2cbd9;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05);
	color: var(--bt-text);
	text-align: left;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body[data-path="login"] .bt-microsoft-login:hover {
	border-color: #7c8da8;
	background: #fff;
	color: var(--bt-text);
	box-shadow: 0 10px 22px -10px rgba(16, 24, 40, 0.32);
	transform: translateY(-1px);
}

body[data-path="login"] .bt-microsoft-login.is-last-used {
	border-color: rgba(249, 115, 22, 0.55);
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

body[data-path="login"] .bt-microsoft-login:disabled {
	cursor: not-allowed;
	opacity: 0.7;
	box-shadow: none;
	transform: none;
}

body[data-path="login"] .bt-ms-copy { display: grid; gap: 1px; }
body[data-path="login"] .bt-ms-copy strong { font-size: 13.5px; font-weight: 700; }
body[data-path="login"] .bt-ms-copy small { color: var(--bt-muted); font-size: 11px; }

body[data-path="login"] .bt-last-used {
	margin-left: auto;
	padding: 3px 8px;
	border-radius: 99px;
	background: #fff2e6;
	color: #9a3412;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

body[data-path="login"] .bt-ms-mark {
	display: grid;
	flex: 0 0 20px;
	grid-template-columns: repeat(2, 9px);
	grid-template-rows: repeat(2, 9px);
	gap: 2px;
	width: 20px;
	height: 20px;
}

body[data-path="login"] .bt-ms-mark i:nth-child(1) { background: #f25022; }
body[data-path="login"] .bt-ms-mark i:nth-child(2) { background: #7fba00; }
body[data-path="login"] .bt-ms-mark i:nth-child(3) { background: #00a4ef; }
body[data-path="login"] .bt-ms-mark i:nth-child(4) { background: #ffb900; }

body[data-path="login"] .bt-ms-setup-note {
	margin: 10px 2px 0;
	color: var(--bt-faint);
	font-size: 11px;
	line-height: 1.5;
}

body[data-path="login"] .bt-login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	color: var(--bt-faint);
	font-size: 9.5px;
	font-weight: 750;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

body[data-path="login"] .bt-login-divider::before,
body[data-path="login"] .bt-login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--bt-line);
}

body[data-path="login"] .social-logins:empty,
body[data-path="login"] .social-login-buttons:empty { display: none; }

/* ---- Fields --------------------------------------------------------------- */

body[data-path="login"] .form-signin { width: 100%; max-width: 100%; }
body[data-path="login"] .form-group { margin-bottom: 18px; }

body[data-path="login"] .form-label {
	margin-bottom: 7px;
	color: #344054;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

body[data-path="login"] .form-control {
	height: 48px;
	border: 1px solid var(--bt-line);
	border-radius: 11px;
	background: var(--bt-field);
	color: var(--bt-text);
	font-size: 14px;
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

body[data-path="login"] .form-control:hover { border-color: #cdd5e1; background: #fff; }

body[data-path="login"] .form-control:focus {
	border-color: var(--bt-ember);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.13);
}

body[data-path="login"] .field-icon { color: var(--bt-faint); }
body[data-path="login"] .toggle-password { cursor: pointer; color: var(--bt-faint); }
body[data-path="login"] .toggle-password:hover { color: var(--bt-ember-deep); }

body[data-path="login"] .bt-caps-warning {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 7px 0 0;
	color: #b54708;
	font-size: 11.5px;
	font-weight: 600;
}

body[data-path="login"] .bt-caps-warning::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f79009;
}

body[data-path="login"] .forgot-password-message {
	margin-top: 8px;
	font-size: 12.5px;
	text-align: right;
}

/* ---- Buttons -------------------------------------------------------------- */

body[data-path="login"] .page-card-actions { margin-top: 22px; }

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-signup,
body[data-path="login"] .btn-forgot {
	min-height: 48px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--bt-ember-deep), var(--bt-ember)) !important;
	box-shadow: 0 10px 22px -8px rgba(234, 88, 12, 0.55);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.005em;
	transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

body[data-path="login"] .btn-login:hover:not(:disabled),
body[data-path="login"] .btn-signup:hover:not(:disabled),
body[data-path="login"] .btn-forgot:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -8px rgba(234, 88, 12, 0.62);
	filter: saturate(1.06);
}

body[data-path="login"] .btn-login:active:not(:disabled) { transform: translateY(0); }

body[data-path="login"] .btn-login.is-working {
	position: relative;
	padding-left: 34px;
	cursor: progress;
	opacity: 0.92;
}

body[data-path="login"] .btn-login.is-working::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15px;
	height: 15px;
	margin: -7.5px 0 0 -58px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bt-spin 700ms linear infinite;
}

@keyframes bt-spin { to { transform: rotate(360deg); } }

body[data-path="login"] .btn-login-option {
	min-height: 44px;
	margin-top: 10px;
	border: 1px solid var(--bt-line);
	border-radius: 11px;
	background: var(--bt-field);
	color: #344054;
	font-weight: 600;
}

body[data-path="login"] .btn-login-option:hover {
	border-color: rgba(249, 115, 22, 0.4);
	background: #fff7ed;
	color: #9a3412;
}

body[data-path="login"] a,
body[data-path="login"] .forgot-password-message > * { color: var(--bt-ember-deep); }

body[data-path="login"] a:focus-visible,
body[data-path="login"] button:focus-visible,
body[data-path="login"] input:focus-visible {
	outline: 3px solid rgba(249, 115, 22, 0.34);
	outline-offset: 2px;
}

/* ---- Banners -------------------------------------------------------------- */

body[data-path="login"] .login-error-banner {
	border: 1px solid var(--bt-danger-line);
	border-radius: 11px;
	background: var(--bt-danger-soft);
	color: var(--bt-danger);
}

body[data-path="login"] .login-success-banner {
	border: 1px solid #abefc6;
	border-radius: 11px;
	background: var(--bt-ok-soft);
	color: var(--bt-ok);
}

body[data-path="login"] .page-footer { position: relative; z-index: 1; color: var(--bt-muted); }
body[data-path="login"] .sign-up-message { margin-top: 20px; color: var(--bt-muted); font-size: 13px; }

/* ---- Dark ----------------------------------------------------------------- */
/* Only the tokens are redefined; every component reads through them. */

@media (prefers-color-scheme: dark) {
	body[data-path="login"]:not([data-theme="light"]) {
		--bt-surface: #151a22;
		--bt-field: #1b2129;
		--bt-line: #2b333f;
		--bt-text: #e8ecf3;
		--bt-muted: #99a3b3;
		--bt-faint: #788394;
		--bt-danger-soft: #2a1512;
		--bt-danger-line: #7a2b22;
		--bt-danger: #fda29b;
		--bt-ok-soft: #0e2419;
		--bt-ok: #6ee7b7;
		background:
			radial-gradient(ellipse 60rem 34rem at 6% 4%, rgba(249, 115, 22, 0.14), transparent 70%),
			radial-gradient(ellipse 52rem 34rem at 96% 96%, rgba(37, 99, 235, 0.12), transparent 70%),
			linear-gradient(146deg, #0b0f16 0%, #101620 52%, #0d1219 100%);
		color: var(--bt-text);
	}

	body[data-path="login"]:not([data-theme="light"])::before {
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	}

	body[data-path="login"]:not([data-theme="light"]) section.for-login,
	body[data-path="login"]:not([data-theme="light"]) section.for-forgot,
	body[data-path="login"]:not([data-theme="light"]) section.for-login-with-email-link,
	body[data-path="login"]:not([data-theme="light"]) section.for-signup,
	body[data-path="login"]:not([data-theme="light"]) section.for-email-login {
		border-color: rgba(255, 255, 255, 0.07);
	}

	body[data-path="login"]:not([data-theme="light"]) .bt-microsoft-panel {
		background: linear-gradient(150deg, #1a212a, #161c24);
	}

	body[data-path="login"]:not([data-theme="light"]) .bt-microsoft-login {
		border-color: #38414f;
		background: #1e242d;
		color: var(--bt-text);
	}

	body[data-path="login"]:not([data-theme="light"]) .bt-microsoft-login:hover {
		border-color: #5a6678;
		background: #222932;
		color: var(--bt-text);
	}

	body[data-path="login"]:not([data-theme="light"]) .bt-last-used {
		background: #3a2413;
		color: #fdba74;
	}

	body[data-path="login"]:not([data-theme="light"]) .form-label { color: #b6c0cf; }
	body[data-path="login"]:not([data-theme="light"]) .btn-login-option { color: #cbd3e0; }
	body[data-path="login"]:not([data-theme="light"]) .btn-login-option:hover {
		background: #2a2118;
		color: #fdba74;
	}
	body[data-path="login"]:not([data-theme="light"]) .bt-caps-warning { color: #fdba74; }
}

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 880px) {
	body[data-path="login"] main.container { padding: 20px 16px; }

	body[data-path="login"] section.for-login,
	body[data-path="login"] section.for-forgot,
	body[data-path="login"] section.for-login-with-email-link,
	body[data-path="login"] section.for-signup,
	body[data-path="login"] section.for-email-login,
	body[data-path="login"].bt-login-ready section.for-login,
	body[data-path="login"].bt-login-ready section.for-forgot,
	body[data-path="login"].bt-login-ready section.for-login-with-email-link,
	body[data-path="login"].bt-login-ready section.for-signup,
	body[data-path="login"].bt-login-ready section.for-email-login {
		grid-template-columns: 1fr;
		width: 100%;
		max-width: 520px;
		border-radius: 20px;
	}

	/* On a phone the panel is a header, not a column: keep the identity and the
	   assurance, drop the feature list rather than making someone scroll past it
	   to reach the password field. */
	body[data-path="login"] .bt-brand {
		gap: 16px;
		padding: 26px 26px 22px;
	}

	body[data-path="login"] .bt-brand-body { gap: 0; margin-top: 0; }
	body[data-path="login"] .bt-brand-points { display: none; }

	body[data-path="login"] .bt-brand-body h2 {
		max-width: none;
		font-size: 19px;
	}

	body[data-path="login"] .bt-brand-foot { padding-top: 14px; }

	body[data-path="login"] .login-content.page-card { padding: 32px 26px 34px; }

	body[data-path="login"] .form-signin,
	body[data-path="login"] .page-card-body,
	body[data-path="login"] .form-group,
	body[data-path="login"] .form-control {
		box-sizing: border-box;
		min-width: 0;
		max-width: 100%;
	}
}

@media (max-width: 460px) {
	body[data-path="login"] .bt-brand-foot { display: none; }
	body[data-path="login"] .login-content.page-card { padding: 26px 20px 30px; }
	body[data-path="login"] .page-card-head-text h4 { font-size: 22px; }
}

/* ---- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] *,
	body[data-path="login"] *::before,
	body[data-path="login"] *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}