/* Social sign-in. The buttons are drawn here in the app's own button language (the 50 px, 14 px-radius shape of
   "Create account") and follow each provider's branding rules: Apple's is black with the Apple mark and white text
   in light mode and Apple's white variant in dark mode; Google's is white (light) or Google's dark variant. The
   space for the buttons is reserved before the server has answered which providers are on, so nothing shifts. */
.social-auth[hidden],.social-complete[hidden]{display:none!important}
.social-auth{margin:2px 0 0;display:grid;gap:10px}
.social-divider{display:flex;gap:12px;align-items:center;margin:8px 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dm,rgba(255,255,255,.38))}
.social-divider span:after{content:'or'}:lang(es) .social-divider span:after{content:'o'}
/* before the script runs, the box is shown only where the buttons belong (register / login) */
#auth:not([data-mode="reg"]):not([data-mode="log"]) .social-auth{display:none}
.social-divider:before,.social-divider:after{content:'';height:1px;flex:1;background:rgba(255,255,255,.14)}
.light .social-divider:before,.light .social-divider:after{background:rgba(27,20,16,.16)}
.social-provider{position:relative;height:50px;width:100%;display:flex;justify-content:center;align-items:center;gap:10px;border-radius:14px;padding:0 16px;margin:0;font:700 15px/1.2 Inter,-apple-system,system-ui,sans-serif;letter-spacing:.005em;cursor:pointer;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.social-provider svg{width:18px;height:18px;flex:0 0 18px;display:block}
.social-provider span{white-space:nowrap}
.social-apple{background:#000;color:#fff;border:1px solid #000;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.social-apple svg{fill:currentColor;margin-top:-2px}
.dark .social-apple{background:#fff;color:#000;border-color:#fff;box-shadow:0 12px 30px rgba(255,255,255,.07)}
.social-google{background:#fff;color:#1F1F1F;border:1px solid rgba(27,20,16,.16);box-shadow:0 8px 24px rgba(23,19,16,.06)}
.dark .social-google{background:#131314;color:#E3E3E3;border-color:#8E918F;box-shadow:none}
.social-provider:hover{filter:brightness(.94)}
.social-provider:active{transform:scale(.985)}
.social-provider:disabled{opacity:.6;cursor:wait;transform:none}
.social-provider:focus-visible,.social-complete button:focus-visible{outline:3px solid #ba6a85;outline-offset:3px}
/* while the server has not yet said which providers are on: the same footprint, quietly */
.social-skeleton{height:50px;border-radius:14px;background:rgba(255,255,255,.07);animation:social-breathe 1.4s ease-in-out infinite}
.light .social-skeleton{background:rgba(27,20,16,.06)}
@keyframes social-breathe{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.social-skeleton{animation:none}.social-provider{transition:none}}
.social-message{font-size:13px;line-height:1.5;color:inherit;margin:0}
.social-complete h2{font-size:22px;line-height:1.3;margin:8px 0 12px}.social-complete p{font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.social-complete label{display:block;margin-top:13px}.social-complete label span{display:block;font-size:13px;margin-bottom:6px}
.social-complete .social-residence{display:flex;align-items:center;gap:9px}.social-residence input{width:18px;height:18px;flex-shrink:0}.social-residence span{margin:0!important}
.social-complete button[type=submit]{width:100%;margin-top:18px}.social-complete .social-cancel{display:block;margin:15px auto 0;border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer;font-size:13px;min-height:36px}
.social-complete .social-error{color:#e58b9d;font-size:13px}.light .social-complete .social-error{color:#a82044}
#auth.oauth-completing .acard>*:not(.social-complete){display:none!important}
@media(max-width:420px){.social-provider{padding:0 12px}.social-complete h2{font-size:20px}}