/* Customer delivery, 2026-10-29. / 客户设计交付，2026-10-29。 */
@font-face {
  font-family: atkinson;
  src: url('/assets/customer-login/atkinson-hyperlegible.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  ascent-override: 95%;
}
body:has(#login-view:not([hidden])) { background: #f7fafc; -webkit-font-smoothing: antialiased; }
body:has(#login-view:not([hidden])) > .site-header,
body:has(#login-view:not([hidden])) > .site-footer { display: none; }
.page-shell:has(#login-view:not([hidden])) { width: 100%; max-width: none; margin: 0; padding: 0; container-type: inline-size; background: #f7fafc; }
#login-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25rem;
  align-content: center;
  align-items: start;
  column-gap: 3.75rem;
  max-width: 80rem;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 3.75rem 3.75rem 3.75rem 4.375rem;
  overflow: clip;
  font-family: atkinson, system-ui, sans-serif;
  font-weight: 400;
  color: #475467;
  line-height: normal;
  animation: none;
}
#login-view *, #login-view *::before, #login-view *::after { box-sizing: border-box; margin: 0; padding: 0; }
#login-view button, #login-view input { font: inherit; color: inherit; }
#login-view img, #login-view svg { display: block; }
#login-view h1, #login-view h2 { font-family: inherit; letter-spacing: normal; }
#login-view em { font-style: italic; font-variation-settings: "ital" 0.8; }
#login-view :focus-visible { outline: .25rem solid #000; outline-offset: .125rem; border-radius: .25rem; }
#login-view .intro { position: relative; z-index: 0; display: flex; flex-direction: column; }
#login-view .intro h1 { font-size: 5.375rem; font-weight: 700; line-height: .9; color: #000; letter-spacing: normal; max-width: none; }
#login-view .intro p { margin-top: 1.25rem; font-size: 1.75rem; font-weight: 500; line-height: 1; color: #475467; }
#login-view .entry-illustration {
  position: absolute; top: calc(100% + 3.4375rem); left: -4.375rem;
  width: 43.125rem; height: 23.0625rem; max-width: none; pointer-events: none;
}
@container (min-width: 80.0625rem) {
  #login-view .entry-illustration { mask-image: linear-gradient(to right, transparent 0, #000 6.625rem); }
}
/* DIALOG
--------------------------------------------------*/
#login-view .dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 3.125rem;
	width: 25rem;
	margin: 1.96875rem 0; /* intro's top sits 31.5px above the dialog's, per the comp */
	padding: 3.125rem;
	background: #ffffff; /* bg-dialog-box */
	border-radius: 1rem; /* n-modal-radius */
	box-shadow: 0 .25rem .375rem -.0625rem rgba(0, 0, 0, .1); /* Classroom Overlays (#0000001a) */
}
#login-view .logos {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
#login-view .logo-booknook {
	width: 10.5625rem;
	height: 2.25rem;
}
#login-view .logo-divider {
	width: 1px;
	height: 1.875rem;
	background: #eaecf0; /* hr */
}
#login-view .logo-lexile {
	width: 2.4rem;
	height: 2.5rem;
}
#login-view .content {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
}
#login-view .content h2 {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	color: #000000; /* bn25-neutral-1000 */
}
#login-view .content h2 .wave {
	font-size: 1.5rem;
}

/* FORM
--------------------------------------------------*/
#login-view .form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}
#login-view .field {
	display: flex;
	flex-direction: column;
	gap: .625rem; /* n-input-gap-label */
	width: 18.75rem;
}

/* label */
#login-view .field label {
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1;
	color: #101828; /* form-label */
}
#login-view .field:has(input:disabled) label {
	color: #d0d5dd; /* form-label-disabled */
}

/* input wrapper (carries the focus ring and icon) */
#login-view .input-wrap {
	position: relative;
	display: block;
	border-radius: .625rem; /* n-input-radius, so the focus outline follows the input shape */
}
#login-view .input-wrap:focus-within {
	outline: .25rem solid #b3ebff; /* n-input-focus-outline / form-input-border-focus-outer */
	outline-offset: 0;
}

/* input */
#login-view .field input {
	display: block;
	width: 100%;
	height: 2.75rem;
	padding: .9375rem 2.3125rem .9375rem .9375rem; /* n-input-pad; right = pad + icon + gap-icon */
	font-size: .9375rem;
	font-weight: 400;
	line-height: 1;
	color: #1d2939; /* form-input-text-populated */
	background: #ffffff; /* form-input-bg */
	border: .125rem solid #d0d5dd; /* n-input-border / form-input-border */
	border-radius: .625rem; /* n-input-radius */
}
#login-view .field input::placeholder {
	color: #98a2b3; /* form-input-text-placeholder */
	opacity: 1;
}
#login-view .field input:focus,
#login-view .field input:focus-visible {
	outline: none; /* focus is shown on .input-wrap with :focus-within */
	border-color: #3ecdfe; /* form-input-border-focus-inner */
}
#login-view .field input:disabled {
	color: #d0d5dd; /* form-input-text-disabled */
	background: none;
	border-color: #eaecf0; /* form-input-border-disabled */
}
#login-view .field input:disabled::placeholder {
	color: #d0d5dd; /* form-input-text-disabled */
}

/* input icon */
#login-view .input-icon {
	position: absolute;
	top: 50%;
	right: .9375rem; /* n-input-pad */
	width: .875rem; /* n-input-icon */
	height: .875rem;
	margin-top: -.4375rem;
	color: #98a2b3; /* form-input-icon */
	pointer-events: none;
}
#login-view .input-wrap:has(input:disabled) .input-icon {
	color: #d0d5dd; /* form-input-icon-disabled */
}

/* error state */
#login-view .field.error input {
	background: #fcedef; /* form-input-bg-error */
	border-color: #ec8c97; /* form-input-border-error */
}
#login-view .field.error input::placeholder {
	color: #ec8c97; /* form-input-text-placeholder-error */
}
#login-view .field.error .input-icon {
	color: #ec8c97; /* form-input-icon-error */
}
#login-view .field.error .input-wrap:focus-within {
	outline-color: #f3b9c0; /* form-input-border-error-focus-outer */
}
#login-view .field.error input:focus {
	border-color: #e56070; /* form-input-border-error-focus-inner */
}
#login-view .field-error {
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.5;
	color: #db3246; /* form-error-text */
}

/* PRIMARY BUTTON
--------------------------------------------------*/
#login-view .button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem; /* n-button-default-gap */
	padding: .625rem 1rem; /* n-button-default-pad-v / pad-h */
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	color: #000000; /* button-primary-label */
	background: #b3ebff; /* button-primary-bg-default */
	border: 0;
	border-radius: .75rem; /* n-button-default-radius */
	cursor: pointer;
}
#login-view .button-primary svg {
	width: .875rem; /* n-button-default-icon */
	height: .875rem;
	color: #019bd0; /* button-primary-icon */
}
#login-view .button-primary:hover:not(:disabled) {
	background: #67d8fe; /* button-primary-bg-hover */
}
#login-view .button-primary:active:not(:disabled) {
	scale: .98; /* ns-button-scale */
}
#login-view .button-primary:focus-visible {
	background: #b3ebff; /* button-primary-bg-focus */
	outline: .25rem solid #67d8fe; /* n-button-focus / button-primary-focus-shadow */
	outline-offset: 0;
	border-radius: .75rem;
}
#login-view .button-primary:disabled {
	color: #b3ebff; /* button-primary-label-disabled */
	background: #e6f8ff; /* button-primary-bg-disabled */
	cursor: auto;
	pointer-events: none;
}
#login-view .button-primary:disabled svg {
	color: #b3ebff; /* button-primary-icon-disabled */
}
@media (prefers-reduced-motion: no-preference) {
	#login-view .button-primary {
		transition: scale .1s ease-out;
	}
}

/* SUPPORTING TEXT
--------------------------------------------------*/
#login-view .help,
#login-view .footnote {
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.5;
	color: #475467; /* body-normal */
}

/* TEXT LINK
--------------------------------------------------*/
#login-view .footnote a:any-link {
	font-weight: 500;
	color: #007eb0; /* text-link-primary */
	text-decoration: underline;
	text-decoration-thickness: .1rem;
	text-underline-offset: .1rem;
	text-decoration-color: #3ecdfe; /* text-link-underline */
	text-decoration-skip-ink: auto;
}
#login-view .footnote a:hover {
	color: #000000; /* text-link-primary-hover */
}

/* Keep validation in the existing help slot so no control moves. / 在帮助区展示校验信息，避免控件跳动。 */
#login-view .entry-feedback { position: relative; align-self: stretch; min-height: 1.3125rem; }
#login-view .entry-feedback .field-error { position: absolute; inset: 0 0 auto; line-height: 1.25; }
#login-view .field-error:empty { display: none; }
#login-view .field input[aria-invalid="true"] { background: #fcedef; border-color: #ec8c97; }
#login-view .field input[aria-invalid="true"]::placeholder,
#login-view .input-wrap:has([aria-invalid="true"]) .input-icon { color: #ec8c97; }
#login-view .input-wrap:has([aria-invalid="true"]):focus-within { outline-color: #f3b9c0; }
#login-view .field input[aria-invalid="true"]:focus { border-color: #e56070; }
#login-view .button-primary { position: relative; min-height: 2.25rem; box-shadow: none; transform: none; }
/* Expand the hit target without changing the approved 36px visual. / 扩大点击范围并保留设计的36px外观。 */
#login-view .button-primary::before { content: ""; position: absolute; inset: -4px 0; }
#login-view .button-primary.is-loading > svg { visibility: hidden; }
#login-view .button-primary .button-spinner { width: 14px; height: 14px; top: 50%; left: auto; right: 16px; bottom: auto; margin: -7px 0 0; border-color: #019bd033; border-top-color: #019bd0; }
#login-view .button-primary.is-loading .button-label { visibility: visible; }
#login-view .button-primary:disabled { opacity: 1; }
#login-view .footnote a { white-space: nowrap; }
/* Preserve the full login task on compact landscape displays. / 紧凑横屏完整展示登录操作。 */
@container (max-width: 70rem) and (min-width: 48rem) {
  #login-view { grid-template-columns: minmax(0, 1fr) 22.5rem; gap: 2rem; padding-inline: 2.25rem 2rem; }
  #login-view .intro h1 { font-size: clamp(3.25rem, 6.4cqw, 5.375rem); }
  #login-view .intro p { font-size: 1.5rem; line-height: 1.1; }
  #login-view .dialog { width: 100%; padding: 2.5rem; }
  #login-view .field { width: 100%; }
  #login-view .entry-illustration { left: -2.25rem; width: calc(100% + 3rem); height: auto; }
}
@media (max-height: 46.25rem) {
  #login-view { padding-block: 1.5rem; }
  #login-view .dialog { margin-block: 1rem; }
}
@container (max-width: 47.999rem) {
  #login-view { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2rem 1.25rem; overflow: visible; }
  #login-view .intro { max-width: 25rem; width: 100%; margin-inline: auto; }
  #login-view .intro h1 { font-size: clamp(2.5rem, 7.8cqw, 3.75rem); line-height: 1; }
  #login-view .intro p { margin-top: 1rem; font-size: 1.25rem; line-height: 1.2; }
  #login-view .entry-illustration { position: static; width: calc(100% + 2.5rem); height: auto; margin: 1.5rem -1.25rem 0; mask-image: none; }
  #login-view .dialog { width: 100%; max-width: 25rem; margin: 0 auto; padding: 2rem; gap: 2rem; }
  #login-view .field { width: 100%; }
  #login-view .field input { font-size: 1rem; }
  #login-view .logos { gap: 1rem; }
  #login-view .logo-booknook { width: min(10.5625rem, 62%); height: auto; }
}
@container (max-width: 22rem) {
  #login-view .dialog { padding: 1.5rem; }
  #login-view .content h2 { font-size: 2rem; }
  #login-view .footnote { font-size: .8125rem; }
}