/* Sign-in (design v9 board Login, FE9-2): the tall art edge to edge in the
   left column with one line of copy on an ink scrim in its sky, and the
   white form column with only the logo and the language over a 400px form.
   The shared .access-* layout stays for the staff sign-in page; this file
   styles only the customer page's own classes. Phones put the head first,
   then the art as a rounded 16:9 picture, then the form. */
.login-page { background: var(--gray-0); }
.login-page main.login-split { display: grid; grid-template-columns: min(45%, 640px) minmax(0, 1fr); max-width: none; min-height: 100vh; margin: 0; padding: 0; background: var(--gray-0); }

/* No site bar on the sign-in page: its header holds only the logo and the
   language (one way in, no second 控制台 button), as the head of the form
   column, 24px from the top. */
body.login-page > header.site-header { position: absolute; top: 24px; right: 0; left: min(45%, 640px); z-index: 1; height: 40px; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.login-page > header.site-header .site-bar { max-width: none; height: 100%; margin: 0; padding: 0 32px; }

/* Art: the still fills the column; the copy sits in the calm sky on a scrim
   (62 percent ink at the top edge), so white text keeps 4.5:1 or better. */
.login-art { position: relative; min-height: 100%; overflow: hidden; background: var(--ink-950); }
.login-art-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.login-art::after { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 46%; background: linear-gradient(180deg, rgba(16, 22, 31, .62) 0%, rgba(16, 22, 31, .5) 34%, rgba(16, 22, 31, .22) 68%, rgba(16, 22, 31, 0) 100%); pointer-events: none; }
.login-art-text { position: absolute; top: 0; right: 0; left: 0; z-index: 1; padding: 48px; }
.login-art-title { max-width: 440px; margin: 0; color: #fff; font: 600 24px/32px var(--font-sans); text-wrap: balance; }
.login-art-sub { margin: 8px 0 0; color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 22px; }

/* Form column: the 400px form centred below the head. */
.login-panel { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 112px 32px 72px; background: var(--gray-0); }
.login-column { width: 400px; max-width: 100%; }
.login-column h1 { margin: 0; color: var(--text-1); font: 600 24px/32px var(--font-sans); letter-spacing: 0; }
.login-intro { margin: 8px 0 0; color: var(--text-2); font-size: 14px; line-height: 22px; }
.login-form { display: flex; flex-direction: column; gap: 20px; margin: 32px 0 0; }
.login-form .field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.login-form .field label { color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.login-form input { width: 100%; height: 40px; min-height: 0; padding: 0 12px; border: 1px solid var(--gray-200); border-radius: var(--r-8); background: var(--gray-0); box-shadow: none; color: var(--text-1); font: 400 14px/20px var(--font-sans); transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
.login-form input:hover { border-color: var(--gray-300); }
.login-form input:focus, .login-form input:focus-visible { border-color: var(--violet-600); outline: 0; box-shadow: var(--ring-input); }
.login-password { position: relative; display: block; }
.login-password > input { padding-right: 44px; }
.login-eye { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-4); background: transparent; box-shadow: none; color: var(--gray-700); }
/* The 20px eye keeps its look; its tap target is 44 x 44px. */
.login-eye::before { content: ""; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px; }
.login-eye:hover, .login-eye:active { border: 0; background: transparent; color: var(--text-1); }
.login-eye .glyph-pub-eye-off, .login-password > input[type="text"] + .login-eye .glyph-pub-eye { display: none; }
.login-password > input[type="text"] + .login-eye .glyph-pub-eye-off { display: inline-block; }
.btn.login-submit { width: 100%; margin-top: 12px; }
.login-help { margin: 16px 0 0; color: var(--text-3); font-size: 13px; line-height: 20px; }

/* The alert sits above the form: a danger panel while it holds a message. */
.login-column [role="alert"]:not(:empty) { margin: 24px 0 0; padding: 12px; border: 1px solid var(--danger-border); border-radius: var(--r-8); background: var(--danger-tint); color: var(--danger-fg); font-size: 14px; line-height: 22px; }
.login-column > [role="alert"]:not(:empty) + .login-form { margin-top: 20px; }
#restricted { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 24px; }
#restricted[hidden] { display: none; }
#restricted-notice { margin: 0; color: var(--text-1); font-size: 14px; line-height: 22px; }

@media (max-width: 1023px) {
  .login-page main.login-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.login-page > header.site-header { left: 50%; }
  .login-art-text { padding: 40px 32px; }
}
@media (max-width: 767px) {
  body.login-page > header.site-header { position: static; width: auto; height: 52px; }
  body.login-page > header.site-header .site-bar { padding: 0 16px; }
  .login-page main.login-split { display: flex; flex-direction: column; min-height: calc(100vh - 52px); }
  .login-art { min-height: 0; margin: 0 16px; aspect-ratio: 16 / 9; border-radius: var(--r-12); }
  .login-art-image { object-position: 50% 52%; }
  .login-art::after, .login-art-text { display: none; }
  .login-panel { align-items: flex-start; padding: 32px 16px 48px; }
  .login-column { width: 100%; }
  .login-form input { height: 44px; font-size: 16px; }
  .login-eye { top: 12px; }
}