/* ---------------------------------------------------------------------------
 * Vendor sign-in (task 108).
 *
 * A separate stylesheet rather than more of dashboard.css: the sign-in page is its own surface,
 * loaded for logged-OUT visitors, and the dashboard sheet exists to dress a logged-in
 * application. Keeping them apart means the login page does not pull ~16KB of table, KPI and nav
 * rules it never uses. dashboard.css is still enqueued alongside this one for the shared
 * .bld-dashboard--gate / .bld-btn vocabulary the already-signed-in branch reuses.
 *
 * Inputs are sized at 16px minimum on purpose — iOS Safari zooms the viewport on focus for
 * anything smaller, which on a login form drops the visitor into a zoomed, horizontally-scrolled
 * page at the exact moment they are typing a password.
 * ------------------------------------------------------------------------ */

.bld-login {
	max-width: 26rem;
	margin: 0 auto;
	padding: clamp(1.75rem, 5vw, 2.75rem);
	background: var(--panel, rgba(255, 255, 255, .04));
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	display: grid;
	gap: 1rem;
}

.bld-login__title {
	color: var(--white, #fff);
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.25;
	margin: 0;
}

.bld-login__intro {
	margin: 0;
	color: rgba(255, 255, 255, .72);
}

.bld-login__field {
	display: grid;
	gap: .4rem;
	margin: 0;
}

.bld-login__field label {
	color: rgba(255, 255, 255, .82);
	font-size: .9rem;
}

.bld-login__field input {
	width: 100%;
	min-height: 46px;
	padding: .65rem .85rem;
	font-size: 16px; /* see note above — smaller triggers iOS zoom-on-focus */
	color: var(--white, #fff);
	background: rgba(0, 0, 0, .25);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
}

.bld-login__field input:focus-visible,
.bld-login__submit:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.bld-login__remember {
	margin: 0;
	color: rgba(255, 255, 255, .72);
	font-size: .9rem;
}

.bld-login__remember label {
	display: flex;
	align-items: center;
	gap: .5rem;
	/* 44px keeps the checkbox row a real tap target rather than a 13px box (cf. BLD-008). */
	min-height: 44px;
	cursor: pointer;
}

.bld-login__submit {
	width: 100%;
	justify-content: center;
}

.bld-login__links,
.bld-login__apply {
	margin: 0;
	font-size: .9rem;
	color: rgba(255, 255, 255, .72);
}

.bld-login__links a,
.bld-login__apply a {
	color: var(--gold);
}

/* Shared notice styling for the sign-in states. role="alert" carries the semantics; this is
 * purely the visual, and it must not rely on colour alone to say "something went wrong" — hence
 * the border-inline-start rule, which also flips correctly under RTL. */
.bld-notice {
	padding: .75rem .9rem;
	border-radius: 10px;
	border-inline-start: 3px solid transparent;
	font-size: .92rem;
}

.bld-notice--error {
	background: rgba(220, 38, 38, .12);
	border-inline-start-color: #dc2626;
	color: #fecaca;
}