/* BV-05 Utility grammar for Auth: rail/main composition on desktop, single column mobile.
   BV-05-R01 section C desktop contract: rail 240px / gap 56px / main 640px / right quiet space.
   R01 D8: rail Chinese intro measure re-calibrated (measured against 16px body, ~34em max). */
.auth-page { min-height: calc(100vh - 62px); display: grid; align-items: start; padding-block: 56px 76px; }
.auth-page__inner { width: min(100% - (var(--gutter) * 2), var(--width-content)); max-width: var(--width-content); margin-inline: auto; }
.auth-messages { max-width: 640px; margin: 0 auto 24px; }
.auth-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
.auth-rail { max-width: 640px; }
.auth-rail .eyebrow { margin: 0; }
.auth-rail .page-title { margin-top: 12px; }
.auth-rail .lead { margin-top: 16px; font-size: var(--type-lead); line-height: var(--type-lead-lh); color: var(--color-text-muted); max-width: 34em; }
.auth-main { max-width: 640px; width: 100%; }
.auth-form { display: grid; gap: 24px; }
.auth-form__submit { width: 100%; margin-top: -6px; }
.auth-form__errors { padding: 12px 16px; border-left: 2px solid var(--color-danger-border); background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--type-helper); line-height: 1.6; }
.auth-form__errors p { margin: 0; }
.auth-alt { margin: 20px 0 0; color: var(--color-text-muted); font-size: var(--type-label); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: var(--type-label); }
.auth-messages .notice { margin: 0; }
.header-auth-form { margin: 0; display: inline-flex; }
.header-auth-form button { font: inherit; }

@media (max-width: 920px) {
  .header-auth-form { width: 100%; }
  .header-auth-form .site-nav__link { width: 100%; text-align: left; }
}

@media (min-width: 761px) and (max-width: 920px) {
  .auth-page { min-height: calc(100vh - 68px); padding-block: 70px 88px; }
  .auth-layout { max-width: 620px; margin-inline: auto; gap: 32px; }
}

/* R01 section C: desktop 240px rail / 56px gap / 640px main. */
@media (min-width: 921px) {
  .auth-page { min-height: calc(100vh - 72px); padding-block: 64px 90px; }
  .auth-layout { grid-template-columns: 240px minmax(0, 640px) 1fr; column-gap: 56px; align-items: start; }
  .auth-rail { grid-column: 1; max-width: none; }
  .auth-main { grid-column: 2; }
}