/* "Continue with Apple" and "Continue with Google" (sign-in page). Follows Apple's HIG (black button, white logo and text; white with a
   black outline in dark mode; 44pt tall; logo left of the label) and Google's branding guidelines (light: #fff, 1px #747775, text
   #1f1f1f; dark: #131314, 1px #8e918f, text #e3e3e3; 40px+ tall; the four-colour G; 14px medium label). */
.social-signin { display: grid; gap: 12px; margin: 0 0 12px; }
.btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px;
  border-radius: 8px; font: 500 1rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; cursor: pointer;
  box-sizing: border-box; }
.btn-social svg { width: 18px; height: 18px; flex: none; }
.btn-social.btn-apple { background: #000; color: #fff; border: 1px solid #000; }
.btn-social.btn-apple svg { fill: currentColor; width: 19px; height: 19px; }
.btn-social.btn-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; font-family: Roboto, system-ui, "Segoe UI", sans-serif; font-size: .875rem; }
.btn-social:focus-visible { outline: 3px solid var(--brand, #5b8def); outline-offset: 2px; }
.btn-social:disabled { opacity: .6; cursor: progress; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-eff="light"]):not([data-theme="light"]) .btn-social.btn-apple { background: #fff; color: #000; border-color: #fff; }
  :root:not([data-theme-eff="light"]):not([data-theme="light"]) .btn-social.btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
}
:root[data-theme-eff="dark"] .btn-social.btn-apple, :root[data-theme="dark"] .btn-social.btn-apple { background: #fff; color: #000; border-color: #fff; }
:root[data-theme-eff="dark"] .btn-social.btn-google, :root[data-theme="dark"] .btn-social.btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
/* Inside the app shell (html.native-app, native.js): Google refuses OAuth in an embedded web view, so the web Google button is hidden
   and the native one (the system's own account picker) takes its place; Apple likewise. */
.social-native[hidden], .social-signin [hidden] { display: none !important; }
.native-app .web-only { display: none !important; }
.native-app .social-native:not([hidden]) { display: flex; }
.social-native { display: none; }
.social-note { margin: 0; }