/* TaskB · THEME-PACK D106 sign-in family (decision A, D-TaskB-0074): Frappe v16's OWN /login, /update-password and the
   expired-link message page, styled to `Sign In.dc.html` §0 + `THEME Sign-in and Session.dc.html`. Frappe's markup and
   flows are untouched. EVERY rule starts with body[data-path=…] — web_include_css reaches every website page, and
   Frappe's login.bundle.css loads after this sheet, so the prefix is also what wins. Values only var(--ft-…); logical
   properties only (Arabic is dir="rtl" from Frappe's base.html). State classes on <body> come from js/ft_signin.js:
   ft-signin · ft-sent (S5) · ft-2fa (S8) · ft-2fa-error (S9) · ft-locked (S11). Pinned by tests/test_signin_sheet.py. */

/* ── §0 frame: one centred column on the page ground ───────────────────────────────────────────────────────────── */
body[data-path="login"],
body[data-path="update-password"],
body[data-path="message"] {
	background: var(--ft-ground-page);
	color: var(--ft-ink);
}
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card,
body[data-path="message"] .page-card {
	max-inline-size: calc(var(--ft-form-field-w) + 2 * var(--ft-space-12));
	margin-inline: auto;
	padding-inline: var(--ft-space-12);
	padding-block-start: var(--ft-space-14);
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* the logo, centred and sized by HEIGHT (D-TaskB-0122 §2): the owner's file is 1627 × 1432, and a width (160 px) under
   Frappe's own `.page-card-head img.app-logo { max-height: 32px }` drew it 160 × 32. Height 120, 96 at ≤ 480 px (30rem),
   width auto, never stretched. Pinned by e2e/logo-aspect.spec.js (drawn vs file aspect ≤ 2 %). */
body[data-path="login"] .page-card-head,
body[data-path="update-password"] .page-card-head {
	align-items: center;
	text-align: center;
}
body[data-path="login"] .page-card-head .app-logo,
body[data-path="update-password"] .page-card-head .app-logo {
	block-size: var(--ft-logo-signin-h);
	max-block-size: none;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	margin-inline: auto;
	margin-block-end: var(--ft-space-12);
	border-radius: var(--ft-radius-3);
}

@media (max-width: 30rem) {
	body[data-path="login"] .page-card-head .app-logo,
	body[data-path="update-password"] .page-card-head .app-logo {
		block-size: var(--ft-logo-signin-h-sm);
	}
}

/* title: one line, no subtitle (the pack has none) */
body[data-path="login"] .page-card-head h4,
body[data-path="update-password"] .page-card-head h4 {
	font-size: var(--ft-text-7);
	line-height: var(--ft-line-heading);
	font-weight: 600;
	color: var(--ft-ink-strong);
}
body[data-path="login"] .page-card-subtitle,
body[data-path="login"] .for-login .sign-up-message {
	display: none;
}

/* fields: label above, 32 control, no placeholders */
body[data-path="login"] .form-group label,
body[data-path="update-password"] .form-group label {
	font-size: var(--ft-text-3);
	font-weight: 600;
	color: var(--ft-ink-strong);
}
body[data-path="login"] .form-control,
body[data-path="update-password"] .form-control {
	block-size: var(--ft-control-3);
	border: var(--ft-border-1) solid var(--ft-edge-strong);
	border-radius: var(--ft-radius-2);
	font-size: var(--ft-text-4);
	background: var(--ft-ground-page);
}
body[data-path="login"] .form-control::placeholder,
body[data-path="update-password"] .form-control::placeholder {
	color: transparent;
}

/* buttons: full width, 32, primary solid, the rest outlined */
body[data-path="login"] .page-card-actions .es-button,
body[data-path="update-password"] .page-card-actions .es-button,
body[data-path="login"] #verify_token {
	inline-size: 100%;
	block-size: var(--ft-control-3);
	border-radius: var(--ft-radius-2);
	font-weight: 600;
}
body[data-path="login"] .es-button[data-variant="solid"],
body[data-path="update-password"] .es-button[data-variant="solid"],
body[data-path="login"] #verify_token {
	background: var(--ft-action-primary);
	color: var(--ft-action-primary-ink);
	border: 0;
}
body[data-path="login"] .btn-login-option {
	background: var(--ft-ground-page);
	color: var(--ft-ink-strong);
	border: var(--ft-border-1) solid var(--ft-edge-strong);
}

/* S1 · «Forgot password?» and «Back to sign in» are links in the accent */
body[data-path="login"] a[href="#forgot"],
body[data-path="login"] a[href="#login"],
body[data-path="update-password"] a[href="/login"] {
	color: var(--ft-accent);
	font-size: var(--ft-text-3);
	text-decoration: none;
}

/* S3 · wrong email or password — Frappe's banner, restyled; the fields go red */
body[data-path="login"] .login-error-banner:not(.hidden),
body[data-path="update-password"] .login-error-banner:not(.hidden) {
	border: var(--ft-border-1) solid var(--ft-ink-status-negative);
	border-radius: var(--ft-radius-2);
	background: var(--ft-ground-status-negative);
	color: var(--ft-ink-status-negative);
	padding-block: var(--ft-space-5);
	padding-inline: var(--ft-space-6);
	font-size: var(--ft-text-3);
}
body[data-path="login"] .page-card-body.invalid .form-control,
body[data-path="login"] .form-group.invalid .form-control {
	border-color: var(--ft-ink-status-negative);
}
body[data-path="login"] .field-error {
	color: var(--ft-ink-status-negative);
	font-size: var(--ft-text-2);
}

/* S5 · link sent: the form steps back, the success banner is the message */
body[data-path="login"].ft-sent .for-forgot .form-group,
body[data-path="login"].ft-sent .for-forgot .btn-forgot {
	display: none;
}
body[data-path="login"] .login-success-banner:not(.hidden) {
	border: var(--ft-border-1) solid var(--ft-edge-field);
	border-radius: var(--ft-radius-2);
	padding-block: var(--ft-space-5);
	padding-inline: var(--ft-space-6);
	font-size: var(--ft-text-4);
}

/* S8 / S9 · two-factor code: Frappe empties .login-content, so the logo is drawn back on the verify box */
body[data-path="login"].ft-2fa #twofactor_div {
	max-inline-size: calc(var(--ft-form-field-w) + 2 * var(--ft-space-12));
	margin-inline: auto;
	padding-inline: var(--ft-space-12);
	padding-block-start: var(--ft-space-14);
}
body[data-path="login"].ft-2fa #login_token {
	block-size: var(--ft-control-3);
	border: var(--ft-border-1) solid var(--ft-edge-strong);
	border-radius: var(--ft-radius-2);
	font-size: var(--ft-text-5);
	letter-spacing: 0.08em;
}
body[data-path="login"].ft-2fa-error #login_token {
	border-color: var(--ft-ink-status-negative);
}
body[data-path="login"] .ft-signin-error {
	color: var(--ft-ink-status-negative);
	font-size: var(--ft-text-3);
}

/* S11 · too many attempts: the banner is the screen; the form waits */
body[data-path="login"].ft-locked .for-login .form-group,
body[data-path="login"].ft-locked .for-login .page-card-actions {
	opacity: 0.5;
	pointer-events: none;
}

/* S12 · the expired-link page is Frappe's message page (www/message.html) — same frame, our heading */
body[data-path="message"] .page-card-head {
	font-size: var(--ft-text-7);
	font-weight: 600;
	color: var(--ft-ink-strong);
	text-align: center;
}
body[data-path="message"] .btn-primary {
	background: var(--ft-action-primary);
	color: var(--ft-action-primary-ink);
	border-radius: var(--ft-radius-2);
	block-size: var(--ft-control-3);
}

/* S14 · signed out after inactivity: one fixed line above the form */
body[data-path="login"] .ft-signin-note {
	border: var(--ft-border-1) solid var(--ft-edge-field);
	border-radius: var(--ft-radius-2);
	background: var(--ft-ground-surface);
	padding-block: var(--ft-space-5);
	padding-inline: var(--ft-space-6);
	font-size: var(--ft-text-3);
	color: var(--ft-ink-strong);
	margin-block-end: var(--ft-space-6);
}