/* ===========================================================================
   The sign-in page, and nothing else.
   Loaded only by index.html, on top of styles.css — the tokens, buttons,
   fields and error box it builds on all live there. The dashboard never
   downloads this file.
   =========================================================================== */

/*
 * The picture fills the page, under two scrims: a green tint on a darkening
 * wash. Both are needed — the artwork is busy enough to fight the card sitting
 * on it, and the tint is what keeps a grey-blue photograph inside the WhatsApp
 * palette. The colour underneath shows while the image loads and fills the
 * page if it ever goes missing.
 *
 * Swap the artwork by pointing `--login-art` at another file.
 */
.login-gate {
	--login-art: url('/images/loginBackground.png');

	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
	background-color: #04150f;
	background-image: linear-gradient(150deg, rgba(0, 168, 132, 0.2), rgba(0, 199, 156, 0.06) 58%, rgba(0, 120, 92, 0.18)),
		linear-gradient(180deg, rgba(3, 17, 13, 0.8), rgba(3, 17, 13, 0.9)),
		var(--login-art);
	background-size: cover;
	background-position: center;
}

/* Two halves in one frame: artwork on the left, the form on the right. */
.login-shell {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	width: min(1040px, 100%);
	/* The form alone is shorter than this; the floor is what keeps the card from
	   reading as a squat strip on the page-wide artwork behind it. Capped
	   against the viewport so a short window still fits. */
	min-height: min(600px, calc(100vh - 48px));
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: calc(var(--r-lg) + 6px);
	background: var(--surface);
	box-shadow: var(--shadow);
}

/* ------------------------------------------------------- artwork half */

/* The picture is behind the whole card now, so this half carries only the
   green wash that separates it from the form. */
.login-art {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 34px 34px 26px;
	color: #eafaf4;
	background-color: #04150f;
	background-image: linear-gradient(150deg, rgba(0, 168, 132, 0.3), rgba(0, 199, 156, 0.1) 58%, rgba(0, 120, 92, 0.26));
	overflow: hidden;
}

.login-art > * {
	position: relative;
}

.login-art-brand {
	display: flex;
	align-items: center;
	gap: 11px;
}

.login-art-brand .brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.login-art-brand .brand-mark svg {
	width: 19px;
	height: 19px;
}

.login-art-name {
	font-size: 14px;
	font-weight: 640;
	letter-spacing: 0.2px;
}

.login-art-title {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 680;
	line-height: 1.18;
	letter-spacing: -0.8px;
}

.login-art-title span {
	background: linear-gradient(92deg, var(--accent-strong), #7fe7c8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.login-art-sub {
	max-width: 34ch;
	margin: 14px 0 0;
	color: rgba(234, 250, 244, 0.74);
	font-size: 14px;
	line-height: 1.6;
}

.login-art-foot {
	margin: 0;
	color: rgba(234, 250, 244, 0.42);
	font-size: 11.5px;
}

/* ---------------------------------------------------------- form half */

.login-panel {
	display: grid;
	place-items: center;
	padding: 44px 40px;
	background: var(--surface);
}

.login-form {
	width: min(348px, 100%);
}

/* The mark only earns its place once the artwork half is gone. */
.login-mark-sm {
	display: none;
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	border-radius: var(--r-sm);
}

.login-mark-sm svg {
	width: 22px;
	height: 22px;
}

.login-form h1 {
	margin: 0;
	font-size: 23px;
	font-weight: 660;
	letter-spacing: -0.45px;
}

.login-row {
	display: flex;
	justify-content: flex-end;
	margin: -4px 0 18px;
	min-height: 18px;
}

.login-form .error {
	margin-bottom: 12px;
}

.login-signup {
	margin-top: 22px;
}

.login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	color: var(--text-faint);
	font-size: 11.5px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line);
}

/* An anchor wearing a button; it needs the centring a <button> gets free. */
.btn-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--accent-tint);
	border-color: var(--accent-edge);
	color: var(--accent-strong);
	text-decoration: none;
}

.btn-wa:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.btn-wa svg {
	width: 18px;
	height: 18px;
}

/* Under ~900px the artwork is the first thing to go: the form is the only
   part anybody came for, and it wants the full width. */
@media (max-width: 900px) {
	.login-shell {
		grid-template-columns: 1fr;
		width: min(420px, 100%);
		/* Nothing left to fill it — the card should be exactly as tall as the form. */
		min-height: 0;
	}

	.login-art {
		display: none;
	}

	.login-panel {
		padding: 34px 26px;
	}

	.login-mark-sm {
		display: grid;
	}
}