/* Shared by sign-in, signup and password recovery only. */
body.auth-page { padding: 40px 20px; }
.auth-page .auth-card { max-width: 464px; padding: 36px; }
.auth-page .brand { width: fit-content; margin-inline: auto; }
.auth-page .sub { line-height: 1.6; }
.auth-page .auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-page .auth-label-row label { margin: 0; }
.auth-page .auth-recovery { font-size: 13px; line-height: 1.5; color: var(--accent-text); text-align: right; }
.auth-page a:not(.brand):hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-page a:focus-visible, .auth-page button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.auth-page .auth-password { position: relative; }
.auth-page .auth-password input { width: 100%; padding-right: 68px; }
.auth-page .auth-show-password { position: absolute; inset: 0 4px 0 auto; padding: 0 12px; border: 0; background: none; color: var(--fg-2); font: inherit; font-size: 13px; cursor: pointer; }
.auth-page .auth-show-password:hover { color: var(--fg); }
.auth-page .field .hint { font-size: 12px; line-height: 1.5; margin-top: 2px; }
.auth-page .auth-legal { margin: 18px 0 0; color: var(--fg-2); font-size: 12px; line-height: 1.7; text-align: center; }
.auth-page .auth-legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.auth-page .alt { padding-top: 22px; border-top: 1px solid var(--line); line-height: 1.6; }
.auth-page .auth-notice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); border-radius: var(--r-md); background: var(--accent-dim); font-size: 14px; line-height: 1.5; color: var(--fg); overflow-wrap: anywhere; }
.auth-page .auth-secondary { margin-top: 16px; text-align: center; }
.auth-page .auth-secondary a { color: var(--accent-text); font-size: 14px; }
.auth-page .auth-secondary button { color: var(--accent-text); background: transparent; border: 0; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-page .auth-card strong { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  body.auth-page { padding: 20px 16px; }
  .auth-page .auth-card { padding: 28px 22px; }
  .auth-page .brand img { height: 34px; }
  .auth-page .auth-label-row { gap: 8px; }
  .auth-page .auth-recovery { font-size: 12px; }
}