/* Compact login spacing and a gently staggered registration transition. */
.registration-name-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.registration-name-row > .field { min-width:0; }
.auth-body--account .auth-morph-slot { display:block; position:relative; min-width:0; }
.auth-body--account .auth-morph-slot > [data-auth-content] { position:absolute; top:0; left:0; width:100%; }
.auth-body--account .auth-morph-slot > [data-auth-content]:not(.is-active) {
 opacity:0; transform:translateY(-12px); visibility:hidden; pointer-events:none;
 transition:opacity 210ms ease,transform 340ms ease,visibility 0s 210ms;
}
.auth-body--account .auth-morph-slot > [data-auth-content].is-active {
 opacity:1; transform:translateY(0); visibility:visible;
 transition:opacity 360ms 100ms ease,transform 600ms cubic-bezier(.22,.72,.2,1),visibility 0s;
}
.auth-application-fields .hint { margin:0; line-height:1.5; color:#6c7c86; }
.auth-body[data-auth-mode="register"] #auth-form > .form-error { margin:0; }
.auth-body[data-auth-mode="register"] #auth-form > .form-error:empty { display:none; }
/* Move the heading/fields down 24px while keeping the login button anchored. */
.auth-body--account:has(.auth-apps) { padding-top:40px; }
.auth-application-fields .auth-login-extra > .form-error {
 top:23px; bottom:auto; max-height:42px; font-size:12px; line-height:1.4;
}
.auth-body--account .registration-name-row > .field,
.auth-body--account .auth-register-extra > .field,
.auth-body--account .auth-register-extra > .hint {
 opacity:0; transform:translateY(10px);
 transition:opacity 180ms ease,transform 300ms ease;
}
.auth-body--account .registration-name-row.is-active > .field,
.auth-body--account .auth-register-extra.is-active > .field,
.auth-body--account .auth-register-extra.is-active > .hint {
 opacity:1; transform:translateY(0);
 transition:opacity 360ms ease,transform 520ms cubic-bezier(.22,.72,.2,1);
 transition-delay:100ms;
}
.auth-body--account .registration-name-row.is-active > .field:nth-child(2) { transition-delay:170ms; }
.auth-body--account .auth-register-extra.is-active > .field { transition-delay:230ms; }
.auth-body--account .auth-register-extra.is-active > .hint { transition-delay:290ms; }
@media(max-width:380px){.registration-name-row{grid-template-columns:1fr;gap:12px;}}
@media(prefers-reduced-motion:reduce){
 .auth-body--account .auth-morph-slot > [data-auth-content],
 .auth-body--account .auth-morph-slot > [data-auth-content] > * { transition:none!important; transform:none!important; }
}

/* Registration grows on the right without stretching the story column. */
@media(min-width:700px){
 .auth-story{align-self:start;position:sticky;top:0;min-height:100vh;min-height:100dvh}
}

/* Keep the viewport width stable when registration needs vertical scrolling. */
html:has(.auth-page){overflow-y:scroll;scrollbar-gutter:stable}