/*
 * 前台登入頁（工單 plan-nexus-shell-login-page §2-B）。
 *
 * 不吃主題：只有這支 + 站台 design token 的 CSS 變數（tokens-default.css）。
 * 顏色一律讀 token（--hz-color-NN），站台沒有 token 時退回系統色（Canvas / CanvasText / GrayText），⛔ 寫死色碼。
 * 字級 / 間距用 rem。手機優先：單欄、不用 100vh / position:fixed（鍵盤彈出時表單不被蓋）、不出橫向捲軸。
 */

.hz-login {
	--lp-bg: var(--hz-color-01, Canvas);
	--lp-card: var(--hz-color-01, Canvas);
	--lp-ink: var(--hz-color-07, CanvasText);
	--lp-body: var(--hz-color-09, CanvasText);
	--lp-muted: var(--hz-color-10, GrayText);
	--lp-line: var(--hz-color-20, color-mix(in srgb, CanvasText 14%, Canvas));
	--lp-soft: var(--hz-color-02, color-mix(in srgb, CanvasText 4%, Canvas));
	--lp-accent: var(--hz-color-14, CanvasText);
	--lp-on-accent: var(--hz-color-11, Canvas);
	--lp-error: var(--hz-color-17, CanvasText);
	--lp-font: var(--hz-font-noto-sans, system-ui, -apple-system, "Noto Sans TC", sans-serif);

	margin: 0;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background: var(--lp-soft);
	color: var(--lp-body);
	font-family: var(--lp-font);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.hz-login *,
.hz-login *::before,
.hz-login *::after {
	box-sizing: border-box;
}

.hz-login a {
	color: var(--lp-accent);
	text-decoration: none;
}

.hz-login a:hover,
.hz-login a:focus-visible {
	text-decoration: underline;
}

.hz-login__top {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--lp-line);
	background: var(--lp-bg);
}

.hz-login .hz-login__brand {
	color: var(--lp-ink);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.02em;
}

.hz-login__main {
	flex: 1 0 auto;
	display: flex;
	justify-content: center;
	padding: 2rem 1rem 3rem;
}

.hz-login__wrap {
	width: 100%;
	max-width: 26rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.hz-login__intro {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.hz-login__title {
	margin: 0;
	color: var(--lp-ink);
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.hz-login__lead {
	margin: 0;
	color: var(--lp-muted);
	font-size: 0.875rem;
}

.hz-login__error {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--lp-error);
	border-radius: 0.625rem;
	color: var(--lp-error);
	background: var(--lp-bg);
	font-size: 0.875rem;
}

.hz-login__card {
	background: var(--lp-card);
	border: 1px solid var(--lp-line);
	border-radius: 1rem;
	padding: 1.5rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hz-login .hz-login__google {
	min-height: 3rem;
	border-radius: 0.625rem;
	border: 1px solid var(--lp-line);
	background: var(--lp-bg);
	color: var(--lp-ink);
	font-size: 1rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	text-decoration: none;
}

.hz-login .hz-login__google:hover,
.hz-login .hz-login__google:focus-visible {
	border-color: var(--lp-ink);
	text-decoration: none;
}

.hz-login__divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--lp-muted);
	font-size: 0.75rem;
}

.hz-login__divider::before,
.hz-login__divider::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--lp-line);
}

.hz-login__card > .hz-login__email {
	padding-top: 0;
}

.hz-login__hint {
	margin: 0;
	text-align: center;
	color: var(--lp-muted);
	font-size: 0.75rem;
}

.hz-login__hint[data-hz-state="error"] {
	color: var(--lp-error);
}

.hz-login__sent {
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--lp-line);
	border-radius: 0.625rem;
	background: var(--lp-soft);
	color: var(--lp-ink);
	font-size: 0.875rem;
}

.hz-login__other {
	border-top: 1px solid var(--lp-line);
	padding-top: 0.75rem;
}

.hz-login__card > .hz-login__other:first-child {
	border-top: 0;
	padding-top: 0;
}

.hz-login__summary {
	list-style: none;
	cursor: pointer;
	text-align: center;
	color: var(--lp-muted);
	font-size: 0.875rem;
	padding: 0.25rem 0;
}

.hz-login__summary::-webkit-details-marker {
	display: none;
}

.hz-login__form {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding-top: 0.75rem;
}

.hz-login__label {
	color: var(--lp-body);
	font-size: 0.875rem;
}

.hz-login__input {
	width: 100%;
	min-height: 2.875rem;
	padding: 0 0.875rem;
	border-radius: 0.625rem;
	border: 1px solid var(--lp-line);
	background: var(--lp-bg);
	color: var(--lp-ink);
	/* 1rem：iOS 低於 16px 會在聚焦時自動放大整頁 */
	font: inherit;
	font-size: 1rem;
}

.hz-login__input:focus {
	outline: 2px solid var(--lp-accent);
	outline-offset: 1px;
}

.hz-login__remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--lp-muted);
	font-size: 0.875rem;
}

.hz-login__submit {
	min-height: 2.875rem;
	border-radius: 0.625rem;
	border: 1px solid var(--lp-accent);
	background: var(--lp-accent);
	color: var(--lp-on-accent);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.hz-login__submit[aria-busy="true"],
.hz-login .hz-login__google[aria-busy="true"] {
	opacity: 0.7;
	pointer-events: none;
}

.hz-login .hz-login__forgot {
	font-size: 0.8125rem;
	text-align: center;
}

.hz-login__terms {
	margin: 0;
	text-align: center;
	color: var(--lp-muted);
	font-size: 0.75rem;
	line-height: 1.7;
}

.hz-login__foot {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--lp-line);
	background: var(--lp-bg);
	color: var(--lp-muted);
	font-size: 0.75rem;
	text-align: center;
}

/* 登出兩頁（線 A；templates/logout.php，定稿 21）：同一組 --lp-* token，⛔ 寫死色碼 */
/* <a> 做的主按鈕：`.hz-login a` 的連結色特異性較高，會把字蓋成跟底同色（瀏覽器驗收實測）→ 這裡把字色拉回來 */
.hz-login a.hz-login__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lp-on-accent);
	text-decoration: none;
}

.hz-login__mark {
	align-self: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.5rem;
	border-radius: 1.125rem;
	display: grid;
	place-items: center;
	font-size: 1.625rem;
}

.hz-login__mark--ok {
	background: var(--lp-soft);
	color: var(--lp-accent);
}

.hz-login__mark--ask {
	border: 1px solid var(--lp-line);
	background: var(--lp-bg);
	color: var(--lp-ink);
}

.hz-login__who {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--lp-line);
	border-radius: 0.75rem;
	background: var(--lp-soft);
	color: var(--lp-ink);
	font-size: 0.9375rem;
}

.hz-login__who i {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.6875rem;
	display: grid;
	place-items: center;
	background: var(--lp-accent);
	color: var(--lp-on-accent);
	font-style: normal;
	font-weight: 700;
}

.hz-login__who small {
	display: block;
	color: var(--lp-muted);
	font-size: 0.8125rem;
}

@media (min-width: 48rem) {
	.hz-login__main {
		align-items: center;
		padding: 3rem 1rem;
	}

	.hz-login__card {
		padding: 1.75rem 1.75rem 1.5rem;
	}
}