/* Underlife auth */
.au{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;min-height:68vh;padding:56px 28px 80px}
.au-intro h1{font-size:clamp(3rem,7vw,6rem);line-height:.98;margin:0 0 var(--s-md);max-width:9ch}
.au-intro h1 em{color:var(--or);font-style:italic}
.au-intro p{color:var(--soft);font-size:1.15rem;max-width:40ch}
.au-intro q{display:block;margin-top:36px;font:italic 1.5rem/1.25 var(--serif);color:var(--ink);quotes:none;max-width:26ch}
.au-intro q small{display:block;font:500 .75rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:10px}
.au-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.au-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;margin:0 0 26px;background:var(--bg)}
.au-tabs a{flex:1;text-align:center;padding:9px 12px;border-radius:999px;color:var(--soft);text-decoration:none;font-weight:500;font-size:.92rem}
.au-tabs a[aria-current]{background:var(--ink);color:var(--on-ink)}
.au-card h2{font-size:2rem;margin:0 0 4px}.au-card .sub{color:var(--soft);margin:0 0 22px;font-size:.95rem}
.au-card .pf-f input[type=text],.au-card .pf-f input[type=password]{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.au-card .pf-f input:focus{outline:2px solid var(--or);outline-offset:1px}
.au-card .pf-f.bad input{border-color:#d33}
.au-pw{position:relative}.au-pw input{padding-right:70px!important}
.au-pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--soft);font:500 .8rem var(--sans);cursor:pointer;padding:6px 8px;border-radius:8px}
.au-pw button:hover{color:var(--or-text)}
.au-meter{height:4px;border-radius:4px;background:var(--elev);margin-top:8px;overflow:hidden}.au-meter i{display:block;height:100%;width:0;background:var(--or);transition:width .3s var(--ease)}
.au-card .btn{width:100%;text-align:center;margin:8px 0 0;padding:14px 26px}
.au-alt{text-align:center;color:var(--soft);font-size:.92rem;margin:18px 0 0}
.au-note{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;line-height:1.5}
.au-done{text-align:center;padding:12px 0}.au-done .btn{width:auto}
@media(max-width:820px){.au{grid-template-columns:1fr;gap:28px;padding-top:28px}.au-intro h1{max-width:none}.au-intro q{display:none}.au-card{padding:22px}}

/* Autofill: keep the normal grey field instead of the browser's white/blue fill */
.au-card input:-webkit-autofill,.au-card input:-webkit-autofill:hover,.au-card input:-webkit-autofill:focus,.au-card input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--bg) inset!important;box-shadow:0 0 0 1000px var(--bg) inset!important;-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink);transition:background-color 99999s ease-in-out 0s}
.au-card input:autofill{background-color:var(--bg)!important;color:var(--ink)!important;box-shadow:0 0 0 1000px var(--bg) inset!important}
.au-card .em-f .em input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--bg) inset,0 0 0 4px color-mix(in srgb,var(--or) 16%,transparent)!important;box-shadow:0 0 0 1000px var(--bg) inset,0 0 0 4px color-mix(in srgb,var(--or) 16%,transparent)!important}
/* Social sign-in */
.au-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
.au-or:before,.au-or:after{content:"";flex:1;height:1px;background:var(--line)}
.au-soc{display:grid;gap:10px}
.au-sb{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font:500 .95rem var(--sans);text-decoration:none;transition:border-color .2s,background .2s}
.au-sb:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);background:var(--elev)}
.au-sb:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* Progressive registration: each step slides open */
.au-step{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-8px);visibility:hidden;transition:grid-template-rows .5s var(--ease),opacity .4s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.au-step.on{grid-template-rows:1fr;opacity:1;transform:none;visibility:visible;transition-delay:0s,.08s,0s,0s}
.au-step>div{min-height:0;overflow:hidden;padding:4px;margin:-4px}
.au-step .au-meter{margin:8px 0 18px}
.au-av{color:var(--or-text);font-weight:500;margin-left:8px}
@media(prefers-reduced-motion:reduce){.au-step,.au-step.on{transition:none}}

/* Compact log in: everything fits on one screen */
.au-login{padding-top:28px;padding-bottom:40px}
.au-login .au-card{padding:24px 26px}
.au-login .au-tabs{margin-bottom:18px}
.au-login .au-card h2{font-size:1.7rem}
.au-login .au-card .sub{margin-bottom:14px}
.au-login .au-card .btn{padding:12px 24px}
.au-login .au-or{margin:14px 0 10px}
.au-login .au-alt{margin-top:12px}
.au-soc.row{grid-template-columns:1fr 1fr}
.au-soc.row .au-sb{padding:11px 12px}
@media(max-width:820px){.au-login{padding-top:20px}.au-login .au-card{padding:20px}}

/* Quick entrance */
@keyframes auUp{from{opacity:0;transform:translateY(10px)}}
.au-in .au-intro>*{animation:auUp .4s var(--ease) backwards}
.au-in .au-intro>:nth-child(2){animation-delay:.06s}.au-in .au-intro>:nth-child(3){animation-delay:.12s}.au-in .au-intro>:nth-child(4){animation-delay:.18s}
.au-card{animation:auUp .35s .08s var(--ease) backwards}
@media(prefers-reduced-motion:reduce){.au-in .au-intro>*,.au-card{animation:none}}

/* Smooth Log in <-> Create account switch */
.au-tabs{position:relative}
.au-tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 12px)/2);border-radius:999px;background:var(--ink);transition:transform .45s var(--ease)}
.au-tabs[data-mode=register]::before{transform:translateX(calc(100% + 4px))}
.au-tabs a{position:relative;transition:color .3s}
.au-tabs a[aria-current]{background:none;color:var(--on-ink)}
@keyframes auSwap{from{opacity:0;transform:translateY(8px)}}
@keyframes auSwapR{from{opacity:0;transform:translateX(16px)}}
@keyframes auSwapL{from{opacity:0;transform:translateX(-16px)}}
.au-body.swap{animation:auSwap .35s var(--ease) backwards}
.au-body.swap[data-dir=r]{animation-name:auSwapR}.au-body.swap[data-dir=l]{animation-name:auSwapL}
.au-card{transition:padding .3s var(--ease)}
@media(prefers-reduced-motion:reduce){.au-tabs::before,.au-tabs a{transition:none}.au-body.swap{animation:none}}
.au-fp{margin:-6px 0 14px;text-align:right;font-size:.88rem}.au-fp a{color:var(--soft)}.au-fp a:hover{color:var(--or-text)}

/* Sign in with Apple is switched off: hide the button wherever it is rendered */
.au-sb[href*="apple" i],a[href*="oauth/apple"]{display:none!important}