/* Login is always ember. These variables are local to .auth-ember so a
   lavender (or light) app theme cannot recolor the brand surface.
   Do not reference --accent here. The mark is drawn bare — it already
   carries a 1.5px #3a3430 stroke, and a tile behind it doubles the border. */

.auth-ember {
	--ember: #ef7c26;
	--ember-hi: #ffa14d;
	--ember-hair: #3a3430;
	--on-accent: #1a0f06;
	--canvas: #010102;
	--s1: #0f1011;
	--s2: #141516;
	--ink: #f7f8f8;
	--ink-muted: #d0d6e0;
	--ink-subtle: #8a8f98;
	--ink-tertiary: #62666d;
	--hair: #23252a;
	--hair-strong: #34343a;
	--danger: #e5484d;
	box-sizing: border-box;
	min-height: 100vh;
	background: var(--canvas);
	color: var(--ink);
	font-family: Inter, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.auth-ember *,
.auth-ember *::before,
.auth-ember *::after {
	box-sizing: border-box;
}

.auth-ember .ground {
	position: relative;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 40px 24px;
	overflow: hidden;
}

.auth-ember .seam {
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--ember) 55%, transparent),
		transparent
	);
}

.auth-ember .grid {
	position: absolute;
	inset: 0;
	opacity: 0.55;
	background-image:
		linear-gradient(var(--hair) 1px, transparent 1px),
		linear-gradient(90deg, var(--hair) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(60% 50% at 50% 42%, #000 0%, transparent 78%);
	mask-image: radial-gradient(60% 50% at 50% 42%, #000 0%, transparent 78%);
	pointer-events: none;
}

.auth-ember .glow {
	position: absolute;
	left: 50%;
	top: 26%;
	width: 620px;
	height: 620px;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--ember) 17%, transparent) 0%,
		color-mix(in srgb, var(--ember) 5%, transparent) 38%,
		transparent 68%
	);
	pointer-events: none;
}

.auth-ember .shell {
	position: relative;
	width: 100%;
	max-width: 400px;
}

.auth-ember .brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
}

.auth-ember .brand:hover {
	color: var(--ink);
}

.auth-ember .brand svg {
	width: 36px;
	height: 36px;
	flex: none;
}

.auth-ember .wordmark {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.auth-ember .wordmark i {
	font-style: normal;
	font-weight: 500;
	color: var(--ink-subtle);
}

.auth-ember h1 {
	margin: 20px 0 0;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -0.025em;
	text-align: center;
}

.auth-ember .lede {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-subtle);
	text-align: center;
	text-wrap: pretty;
}

.auth-ember .card {
	margin-top: 24px;
	border: 1px solid var(--hair-strong);
	border-radius: 12px;
	background: rgba(15, 16, 17, 0.9);
	padding: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
}

.auth-ember .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 36px;
	border-radius: 8px;
	font:
		500 13px Inter,
		sans-serif;
	cursor: pointer;
	border: 1px solid transparent;
	transition:
		background 0.15s,
		border-color 0.15s;
}

.auth-ember .btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 18%, transparent);
}

.auth-ember .btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.auth-ember .btn-sso {
	background: var(--s1);
	border-color: var(--hair);
	color: var(--ink);
}

.auth-ember .btn-sso:hover {
	background: var(--s2);
	border-color: var(--hair-strong);
}

.auth-ember .btn-primary {
	background: var(--ember);
	color: var(--on-accent);
	font-weight: 600;
	margin-top: 16px;
}

.auth-ember .btn-primary:hover {
	background: var(--ember-hi);
}

.auth-ember .btn svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.auth-ember .or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
}

.auth-ember .or span {
	height: 1px;
	flex: 1;
	background: var(--hair);
}

.auth-ember .or b {
	font:
		400 11px Inter,
		sans-serif;
	color: var(--ink-tertiary);
	font-weight: 400;
}

.auth-ember .fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.auth-ember label {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.auth-ember .lab {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-muted);
}

.auth-ember .lab a {
	font-size: 11px;
	font-weight: 400;
	color: var(--ink-subtle);
	text-decoration: none;
}

.auth-ember .lab a:hover {
	color: var(--ink);
}

.auth-ember .inp {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--hair);
	border-radius: 8px;
	background: var(--s1);
}

.auth-ember .inp:focus-within {
	border-color: var(--ember);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 18%, transparent);
}

.auth-ember .inp.is-invalid {
	border-color: var(--danger);
}

.auth-ember .inp.is-invalid:focus-within {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.auth-ember .inp svg {
	width: 14px;
	height: 14px;
	flex: none;
	color: var(--ink-subtle);
}

.auth-ember .inp input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font:
		400 13px Inter,
		sans-serif;
	color: var(--ink);
}

.auth-ember .inp input::placeholder {
	color: var(--ink-tertiary);
}

.auth-ember .reveal {
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--ink-subtle);
	display: grid;
	place-items: center;
}

.auth-ember .reveal:hover {
	color: var(--ink);
}

.auth-ember .reveal svg {
	width: 14px;
	height: 14px;
}

.auth-ember .reveal svg.is-hidden {
	display: none;
}

.auth-ember .field-err,
.auth-ember .form-err {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--danger);
}

.auth-ember .foot {
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 11px;
	color: var(--ink-subtle);
	flex-wrap: wrap;
}

.auth-ember .foot svg {
	width: 12px;
	height: 12px;
	color: var(--ink-tertiary);
}

.auth-ember .foot .sep {
	color: var(--ink-tertiary);
}

.auth-ember .foot a {
	color: var(--ember-hi);
	text-decoration: none;
}

.auth-ember .foot a:hover {
	text-decoration: underline;
}