/* AUTH-SOC-005. Provider artwork comes from provider SDKs/approved assets;
   Metablox surfaces use the same semantic tokens as the existing auth sheet. */
.social-auth[hidden], .social-auth [hidden] { display: none !important; }
#auth-modal [data-social-email-back][hidden] { display: none !important; }
.social-auth { display: flex; flex-direction: column; gap: 16px; color: var(--ds-ink); font-family: 'SFProText', -apple-system, BlinkMacSystemFont, 'Montserrat', sans-serif; font-size: 16px; line-height: 24px; }
.social-auth *, .social-auth *::before, .social-auth *::after { box-sizing: border-box; }
.social-auth p, .social-auth h2, .social-auth h3 { margin: 0; }
.social-auth__header, .social-auth [data-social-step], .social-auth form, .social-auth__options { display: flex; flex-direction: column; gap: 16px; }
.social-auth__header { margin-bottom: 16px; }
.social-auth h2, #auth-modal .social-auth h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ds-ink); }
.social-auth h2:focus { outline: none; }
.social-auth__header > p { color: var(--ds-ink-soft); }
.social-auth__layout { display: flex; flex-direction: column; gap: 24px; }
.social-auth__value { display: none; flex: 0 0 360px; flex-direction: column; gap: 16px; padding: 20px; border-radius: 16px; background: var(--ds-surface); }
.social-auth__value h3 { font-size: 24px; line-height: 32px; font-weight: 700; }
.social-auth__value > p { color: var(--ds-ink-soft); }
.social-auth__options { flex: 1; min-width: 0; }
.social-auth__caption { font-size: 13px; line-height: 20px; color: var(--ds-ink-soft); }
.social-auth__notice { padding: 16px; border-radius: 12px; background: var(--ds-surface); font-size: 13px; line-height: 20px; }
.social-auth a, .social-auth__link { color: var(--ds-link); }
.social-auth__button, .social-auth__apple { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 12px; background: var(--ds-brand); color: var(--ds-on-cta); font: inherit; font-weight: 600; cursor: pointer; }
.social-auth__button:hover { background: var(--ds-brand-hover); }
.social-auth__button--secondary { border: 1px solid var(--ds-link); background: transparent; color: var(--ds-link); }
.social-auth__button--secondary:hover { background: var(--ds-surface); }
.social-auth__button--danger { background: var(--ds-error-text); color: var(--ds-on-brand); }
.social-auth__button--danger:hover { background: var(--ds-error-text); }
.social-auth__apple { background: var(--ds-auth-provider-black); color: var(--ds-auth-provider-white); font-size: 17px; }
.social-auth__apple img { flex: none; width: 20px; height: 20px; }
.social-auth__google { display: flex; justify-content: center; align-items: center; min-height: 48px; width: 100%; }
.social-auth__google[aria-disabled='true'] { pointer-events: none; opacity: 0.6; }
.social-auth__link { width: fit-content; border: 0; background: transparent; padding: 8px 0; min-height: 40px; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.social-auth button:disabled { opacity: 0.6; cursor: progress; }
.social-auth :is(button,a,input):focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.social-auth label { color: var(--ds-ink-soft); font-size: 13px; line-height: 20px; }
.social-auth input:not([type='checkbox']) { width: 100%; min-height: 44px; border: 1px solid var(--ds-input-border); border-radius: 8px; background: var(--ds-elevated); color: var(--ds-ink); padding: 8px 12px; font: inherit; }
.social-auth [data-social-password-field], .social-auth [data-social-mfa-field] { display: flex; flex-direction: column; gap: 8px; }
.social-auth .social-auth__terms { display: flex; gap: 8px; align-items: flex-start; color: var(--ds-ink); font-size: 16px; line-height: 24px; cursor: pointer; }
.social-auth__terms input { flex: none; width: 20px; height: 20px; margin-top: 4px; accent-color: var(--ds-brand-strong); }
.social-auth__status { color: var(--ds-ink-soft); font-size: 13px; line-height: 20px; }
.social-auth__status:empty { display: none; }
.social-auth__error { padding: 12px; border: 1px solid var(--ds-error); border-radius: 8px; color: var(--ds-error-text); background: var(--ds-surface); font-size: 14px; line-height: 20px; }
.social-auth__field-error { color: var(--ds-error-text); font-size: 14px; line-height: 20px; }
.social-auth input[aria-invalid='true'] { border-color: var(--ds-error); }
.social-auth__methods { display: flex; flex-direction: column; gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; }
.social-auth__methods li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 16px; border-radius: 12px; background: var(--ds-surface); }
.social-auth__methods small { display: block; overflow-wrap: anywhere; color: var(--ds-ink-soft); font-size: 13px; line-height: 20px; }
.social-auth__methods button { width: auto; }
.social-auth__proof-providers { display: flex; flex-direction: column; gap: 16px; }
.social-auth[data-social-auth='manage'] { padding: 24px; border-radius: 16px; background: var(--ds-card); margin-bottom: 24px; box-shadow: var(--ds-shadow-card); }
.social-auth[data-social-auth='manage'] [data-social-choice] > .social-auth__layout { display: none; }
.social-auth[data-social-auth='manage'][data-social-provider-choice='true'] [data-social-choice] > .social-auth__layout { display: flex; }
#auth-modal .social-auth-enabled:not(.social-email-mode) > .auth-form > .auth-header { display: none; }
#auth-modal #sign-up-form.social-auth-enabled:not(.social-email-mode) > .auth-form,
#auth-modal .social-flow-active > .auth-form,
#auth-modal .social-flow-active > [data-passkey-login] { display: none; }
#auth-modal .social-auth-enabled[data-social-email='true'] [data-social-auth] { display: none; }
#auth-modal:has(.social-flow-active) .auth-legal { display: none; }
#auth-modal:has(#sign-up-form.social-auth-enabled:not(.force-hide):not(.social-email-mode)) .auth-legal { display: none; }
@media (min-width: 813px) {
  #auth-modal .auth-sheet:has(#sign-up-form.social-auth-enabled:not(.force-hide):not(.social-email-mode):not(.social-flow-active)) { width: 850px; }
  .social-auth[data-social-auth='signup'] .social-auth__layout { flex-direction: row; }
  .social-auth[data-social-auth='signup'] .social-auth__value { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .social-auth * { transition: none; } }