/* Shared account pages. The native form comes first on small screens. */
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "welcome form";
  margin-block: clamp(1.2rem, 3vw, 3rem);
  background: #f0f5f8;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.auth-content {
  grid-area: form;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 4rem);
}
.auth-form-wrap { width: 100%; max-width: 27rem; }
.auth-heading { margin-bottom: 1.8rem; }
.auth-heading .eyebrow { color: var(--sea); margin-bottom: .8rem; }
.auth-heading h1 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.12; max-width: 19ch; margin-bottom: .8rem; overflow-wrap: anywhere; }
.auth-intro { color: var(--muted); font-size: 1rem; margin: 0; }
.auth-form { display: grid; gap: 1.1rem; }
.auth-field { min-width: 0; }
.auth-field label { margin: 0 0 .45rem; font-weight: 600; font-size: .88rem; }
.auth-field input { min-height: 52px; padding: .75rem .85rem; border-color: #869fac; font-size: 1rem; }
.auth-field input:hover { border-color: var(--sea); }
.auth-field input:focus-visible { outline-offset: 2px; }
.auth-hint { margin: .5rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }
.password-control { position: relative; }
.password-control.enhanced input { padding-right: 4.7rem; }
.password-toggle { position: absolute; top: 4px; right: 4px; min-width: 3.5rem; min-height: 44px; margin: 0; padding: .35rem .6rem; border: 0; background: transparent; color: var(--sea); font-size: .8rem; }
.password-toggle:hover { background: var(--sky); color: var(--navy); }
.password-toggle:focus-visible { outline-offset: 0; }
.password-toggle[hidden] { display: none; }
.auth-recovery { display: flex; align-items: center; justify-content: end; min-height: 44px; width: fit-content; margin: .15rem 0 -.55rem auto; font-size: .82rem; }
.auth-submit { display: flex; justify-content: space-between; gap: 1rem; min-height: 52px; width: 100%; margin: .25rem 0 0; padding: .8rem 1.1rem; background: var(--sea); border-color: var(--sea); }
.auth-submit:hover { background: var(--navy); border-color: var(--navy); }
.auth-submit>span { font-size: 1.2rem; line-height: 1; }
.auth-switch { border-top: 1px solid var(--line); padding-top: 1.25rem; margin: 1.6rem 0 0; font-size: .9rem; }
.auth-switch a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.auth-help { margin: 1.4rem 0 0; color: var(--muted); font-size: .8rem; }
.auth-help a { display: inline-flex; align-items: center; min-height: 44px; }
.auth-reassurance { margin-top: 1rem; }
.auth-notice { margin: 0 0 1.5rem; padding: 1rem; background: #e1eef7; border: 1px solid #adc9db; border-radius: var(--radius); font-size: .88rem; }
.auth-error { background: #fff1ec; color: #702818; border-color: #c78f80; }
.auth-next { margin-top: 2rem; }
.auth-next h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.auth-next p { color: var(--muted); font-size: .9rem; }
.auth-welcome { grid-area: welcome; min-width: 0; display: flex; flex-direction: column; background: var(--navy); color: #fff; border-radius: var(--radius-lg) 0 0 var(--radius-lg); overflow: hidden; }
.auth-welcome picture { display: block; flex: 1; position: relative; min-height: 23rem; }
.auth-welcome img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 47% 55%; }
.auth-welcome-copy { padding: clamp(1.5rem, 3vw, 3rem); }
.auth-welcome-copy .eyebrow { color: #cadfeb; margin-bottom: .8rem; }
.auth-welcome-title { font-size: clamp(1.6rem, 2.5vw, 2.6rem); line-height: 1.2; font-weight: 550; letter-spacing: -.035em; margin: 0 0 1rem; }
.auth-welcome-copy>p:last-child { color: #dcebf4; font-size: .92rem; max-width: 40ch; margin: 0; }
@media (max-width: 55rem) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "welcome"; }
  .auth-content { padding: 2rem 1.2rem; }
  .auth-form-wrap { max-width: 30rem; }
  .auth-welcome { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .auth-welcome picture { min-height: 0; }
  .auth-welcome img { position: static; height: auto; max-height: 25rem; aspect-ratio: 1.7; object-position: 50% 65%; }
  .auth-welcome-copy { padding: 1.5rem; }
}
@media (max-width: 25rem) {
  .auth-layout { width: calc(100% - 1.2rem); margin-block: .6rem 1.2rem; }
  .auth-content { padding: 1.5rem 1rem; }
  .auth-heading { margin-bottom: 1.4rem; }
}