/* Auth extends the approved homepage; every rule is scoped to its route. */
:root{--auth-scene-opacity:.72;--account-scene-opacity:.13}
#auth-page{position:relative;z-index:6;min-height:100svh;padding:clamp(120px,19vh,210px) max(8vw,40px) 140px 60%;pointer-events:auto}
#auth-content{width:100%;max-width:380px;margin:auto;outline:none;min-height:380px;font-family:'Manrope Variable',sans-serif}
.auth-domain{display:none;position:absolute;left:calc(var(--edge) + 54px);font-size:10px;letter-spacing:-.025em;color:#a0a0a0}
#auth-back{pointer-events:auto;display:none;gap:12px;align-items:center;min-height:44px;font-size:11px}
.auth-stage{position:fixed;left:var(--edge);bottom:100px;font-size:10px;color:#777;letter-spacing:.12em;pointer-events:none}
body.is-auth #home-link{visibility:visible;opacity:1;pointer-events:auto}
body.is-auth .auth-domain,body.is-auth #auth-back{display:flex}
body.is-auth #about-link,body.is-auth .signin-link,body.is-auth .scroll-track,body.is-auth>.skip{display:none}
body.is-auth #universe{opacity:var(--auth-scene-opacity)}
body.is-auth .scanlines{opacity:.05}
body.auth-wide #universe{opacity:var(--account-scene-opacity)}
body.auth-wide #auth-page{padding:150px max(var(--edge),calc((100vw - 900px)/2)) 130px}
body.auth-wide #auth-content{max-width:900px}
.auth-heading{margin:0 0 44px}
.auth-heading h1{font:400 clamp(42px,4vw,64px)/1.08 'IBM Plex Mono',monospace;letter-spacing:-.075em;text-wrap:balance}
.auth-heading p{font-size:13px;color:#999;line-height:1.7;margin-top:20px;max-width:340px}
.auth-heading .eyebrow{display:block;margin-bottom:20px;font:10px 'IBM Plex Mono',monospace;color:#aaa;letter-spacing:.06em}
#auth-page .field{display:block;margin:0 0 25px}
#auth-page .field>span:first-child,#auth-page .field>label{display:block;font:11px 'IBM Plex Mono',monospace;color:#aaa;margin-bottom:10px}
#auth-page label.field{font-size:11px;color:#aaa}
#auth-page .field>input{margin-top:9px}
#auth-page input:not([type=checkbox]),#auth-page select{display:block;width:100%;border:0;border-bottom:1px solid #ffffff40;border-radius:0;background:#0009;color:#fff;min-height:51px;padding:10px 0;font:400 16px/1.5 'Manrope Variable',sans-serif;transition:border-color .2s;box-shadow:none}
#auth-page input::placeholder{color:#555}
#auth-page input:focus{outline:none;border-bottom-color:#fff}
#auth-page input:focus-visible{box-shadow:0 1px 0 white}
#auth-page input:-webkit-autofill{-webkit-text-fill-color:white;box-shadow:0 0 0 100px #000 inset}
#auth-page .password-field{position:relative;display:block}
#auth-page .password-field input{padding-right:60px}
#auth-page .password-toggle{position:absolute;right:0;top:0;min-height:51px;font:10px 'IBM Plex Mono',monospace;color:#aaa;padding:0 8px}
#auth-page .field small{display:block;margin-top:10px;font-size:11px;line-height:1.6;color:#888}
#auth-page .check-label{display:flex;align-items:center;gap:10px;font-size:12px;color:#aaa;min-height:44px;cursor:pointer}
#auth-page input[type=checkbox]{appearance:none;flex:0 0 14px;width:14px;height:14px;background:#000;border:1px solid #666;border-radius:0;margin:0;display:grid;place-items:center}
#auth-page input[type=checkbox]:checked{background:white;border-color:white}
#auth-page input[type=checkbox]:checked:after{content:'';width:6px;height:3px;border-bottom:1px solid black;border-left:1px solid black;transform:rotate(-45deg) translateY(-1px)}
#auth-page .form-options{margin:-8px 0 26px}
#auth-page .primary-button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:51px;padding:14px 20px;background:white;color:black;border:1px solid white;font:12px 'IBM Plex Mono',monospace;transition:background .2s,color .2s}
#auth-page .primary-button:hover{background:#000;color:#fff}
#auth-page .primary-button span{font-size:20px;transition:transform .25s}
#auth-page .primary-button:hover span{transform:translate(3px,-3px)}
#auth-page .primary-button[disabled]{opacity:.5}
#auth-page .full-width{width:100%}
#auth-page .secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #555;padding:10px 15px;font:11px 'IBM Plex Mono',monospace}
#auth-page .text-button{padding:10px 0;min-height:40px;font:11px 'IBM Plex Mono',monospace;text-decoration:underline;text-decoration-color:#555;text-underline-offset:5px;color:#bbb}
#auth-page .text-button:hover{color:#fff;text-decoration-color:#fff}
#auth-page .form-footnote{margin-top:23px;font-size:11px;color:#888;line-height:1.9}
#auth-page details{font-size:11px;color:#999;line-height:1.8}
#auth-page summary{width:fit-content;max-width:100%;cursor:pointer;padding:12px 0;list-style:none;min-height:44px}
#auth-page summary:before{content:'+';margin-right:12px;font-family:'IBM Plex Mono',monospace}
#auth-page details[open]>summary:before{content:'−'}
#auth-page .recovery-note{margin-top:18px}
#auth-page .form-error{font:12px/1.7 'Manrope Variable',sans-serif;border-left:2px solid #fff;padding:9px 14px;margin:0 0 24px;color:#fff}
#auth-page .form-notice{font-size:12px;line-height:1.8;color:#aaa;margin:16px 0}
#auth-page .setup-secret{margin-bottom:24px}
#auth-page .personal-invitation{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid #333}
#auth-page .personal-invitation .eyebrow{font:10px 'IBM Plex Mono',monospace;color:#888}
#auth-page .invitation-recipient{font-size:18px;color:white;margin:12px 0;overflow-wrap:anywhere}
#auth-page .invitation-access{display:flex;gap:18px;font-size:11px;color:#aaa}
#auth-page .invitation-expiry{font-size:10px;color:#777;margin-top:12px}
#auth-page .account-topline{display:flex;justify-content:space-between;gap:30px;align-items:start}
#auth-page .account-topline .auth-heading{margin-bottom:40px}
#auth-page .tabs{display:flex;border-bottom:1px solid #333;gap:28px;margin-bottom:40px;overflow-x:auto}
#auth-page .tab{font:11px 'IBM Plex Mono',monospace;min-height:46px;color:#888;padding:0 0 14px;white-space:nowrap}
#auth-page .tab[aria-selected=true]{color:white;border-bottom:1px solid white}
#auth-page .account-section{margin:0 0 40px}
#auth-page h2{font:400 17px 'IBM Plex Mono',monospace;letter-spacing:-.06em;margin-bottom:22px}
#auth-page h3,#auth-page h4{font-weight:400;font-size:15px}
#auth-page .project-row{display:flex;align-items:center;border-top:1px solid #333;min-height:78px;gap:25px}
#auth-page .project-row:last-child{border-bottom:1px solid #333}
#auth-page .project-mark{font:18px 'IBM Plex Mono',monospace;min-width:44px;color:#999}
#auth-page .project-description{flex:1;font-size:18px}
#auth-page .project-meta{font:10px 'IBM Plex Mono',monospace;color:#777}
#auth-page .project-arrow{font-size:20px}
#auth-page .security-row{display:flex;justify-content:space-between;border-top:1px solid #333;padding:20px 0;font-size:13px}
#auth-page .status-badge{font:9px 'IBM Plex Mono',monospace;color:#aaa;display:inline-block;margin-left:12px}
#auth-page .status-badge:before{content:'·';margin-right:5px;color:white}
#auth-page .session-row,#auth-page .invite-row,#auth-page .user-row,#auth-page .activity-row{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #333;padding:22px 0}
#auth-page .row-title{font-size:14px;overflow-wrap:anywhere}
#auth-page .row-detail,#auth-page .activity-target,#auth-page time{font-size:11px;color:#888;line-height:1.8;margin-top:6px}
#auth-page .row-main{min-width:0}
#auth-page .activity-row time{white-space:nowrap}
#auth-page .section-title-row,#auth-page .editor-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
#auth-page .empty-message{font-size:12px;color:#888;line-height:1.8;margin:24px 0}
#auth-page .inline-form{max-width:440px;margin:25px 0}
#auth-page .section-intro p{font-size:12px;color:#888;margin:12px 0 25px}
#auth-page fieldset{border:0;border-top:1px solid #333;padding:20px 0;margin:20px 0;display:flex;flex-wrap:wrap;gap:16px}
#auth-page legend{font:10px 'IBM Plex Mono',monospace;color:#999;padding:0 10px 0 0}
#auth-page .subheading{margin-top:50px}
#auth-page .invite-result,#auth-page .user-editor{padding:25px;border:1px solid #333;margin:20px 0;background:#000}
#auth-page .invite-result p{font-size:12px;color:#aaa;line-height:1.8;margin:10px 0}
#auth-page .copy-row{display:flex;gap:15px;align-items:center}
#auth-page .member-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px;padding-bottom:30px;border-bottom:1px solid #333}
#auth-page .member-stats strong{display:block;font:400 32px 'IBM Plex Mono',monospace;letter-spacing:-.06em;margin-bottom:10px}
#auth-page .member-stats span{font-size:10px;color:#888}
#auth-page .people-tools{display:grid;grid-template-columns:1fr 180px;gap:30px}
#auth-page .member-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#auth-page dt{font-size:10px;color:#888;margin:16px 0 8px}#auth-page dd{font-size:12px;margin:0}
#auth-page .member-controls,#auth-page .button-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
#auth-page .owner-note,#auth-page .editor-note{font-size:10px;color:#888}
#auth-page .member-confirmation{border-top:1px solid #555;margin-top:24px;padding-top:24px}
#auth-page .member-confirmation p{font-size:12px;color:#aaa;line-height:1.8;margin:12px 0}
#auth-page .self-label{font-size:10px;color:#777;margin-left:10px}
#auth-toast{position:fixed;z-index:30;bottom:30px;left:50%;transform:translateX(-50%);padding:15px 22px;border:1px solid #444;background:black;font-size:12px}
/* Departure and arrival share a continuous WebGL scene. */
body.auth-crossing{overflow:hidden}
body.auth-crossing #journey,body.auth-crossing #about-page{opacity:calc(1 - var(--auth-depart,0));transform:translateY(calc(var(--auth-depart,0)*-45px)) scale(calc(1 - var(--auth-depart,0)*.06));pointer-events:none;filter:blur(calc(var(--auth-depart,0)*3px))}
body.auth-crossing #auth-page{opacity:var(--auth-arrive,0);transform:translateY(calc((1 - var(--auth-arrive,0))*24px));clip-path:inset(calc((1 - var(--auth-arrive,0))*52%) 0);pointer-events:none}
body.auth-crossing .navigation nav{opacity:calc(1 - var(--auth-depart,0)*.5)}
@media(max-width:900px){
 #auth-page{padding:170px max(28px,calc((100vw - 380px)/2)) 120px}
 :root{--auth-scene-opacity:.32}
 #auth-content{max-width:380px}
 .auth-stage{display:none}
 .auth-heading{margin-bottom:36px}
 body.auth-wide #auth-page{padding:140px 28px 100px}
}
@media(max-width:480px){
 #auth-page{padding-top:155px}
 .auth-heading h1{font-size:43px}
 .auth-domain{left:calc(var(--edge) + 42px);font-size:9px}
 #auth-page .account-topline{gap:14px}
 #auth-page .account-topline .auth-heading h1{font-size:36px}
 #auth-page .project-meta{display:none}
 #auth-page .tabs{gap:23px}
 #auth-page .member-stats{grid-template-columns:1fr 1fr;gap:25px}
 #auth-page .people-tools{grid-template-columns:1fr;gap:0}
 #auth-page .member-facts{grid-template-columns:1fr 1fr}
 #auth-page .activity-row,#auth-page .section-title-row{align-items:start;flex-direction:column;gap:8px}
 #auth-page .copy-row{flex-wrap:wrap}
 #auth-page .user-editor{padding:18px}
}
@media(prefers-reduced-motion:reduce){body.auth-crossing #auth-page,body.auth-crossing #journey{filter:none;transform:none}}


body.is-auth .navigation{background:linear-gradient(#000 65%,#000e 85%,transparent);height:100px;padding-bottom:16px}
body.is-auth .motion-toggle{background:#000c}
@media(max-width:900px){body.is-auth.auth-wide #universe{opacity:var(--account-scene-opacity)}}

.auth-skip{display:none}body.is-auth>.auth-skip{display:block}

#auth-page .auth-heading h1,#auth-page .auth-heading p,#auth-page .row-detail,#auth-page .activity-target{overflow-wrap:anywhere}

/* The same live canvas remains visible throughout both route transitions. */
body.auth-crossing #universe{opacity:var(--crossing-opacity,1)}

/* Tactile feedback: the hit areas stay still; light, rules and glyphs respond. */
#auth-page :is(button,a,summary){-webkit-tap-highlight-color:#ffffff25}
#auth-page :is(button,a,summary):focus-visible{outline:1px solid #fff;outline-offset:5px}
#auth-page :is(button,summary){transition:color .18s,background-color .18s,border-color .18s,transform .18s,opacity .18s}
#auth-page :is(button,summary):active:not(:disabled){transform:translateY(1px);background-color:#ffffff18}
#auth-page button:disabled{cursor:wait}
#auth-page :is(.text-button,.password-toggle,summary,.tab){position:relative}
#auth-page :is(.text-button,.password-toggle,summary,.tab)::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#auth-page .tab::after{bottom:0}
#auth-page :is(.text-button,.password-toggle,summary,.tab):focus-visible::after,#auth-page .tab[aria-selected=true]::after{transform:scaleX(1)}
#auth-page .tab[aria-selected=true]{border-bottom-color:transparent}
#auth-page .secondary-button:focus-visible{background:#fff;color:#000}
#auth-page .check-label:focus-within{color:#fff}
#auth-page input[type=checkbox]{transition:background .18s,border-color .18s}
#auth-page .field:focus-within>label,#auth-page .field:focus-within>span:first-child{color:#fff}
#auth-page .project-row{position:relative;isolation:isolate;transition:background-color .25s,border-color .25s}
#auth-page .project-row::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(220px 100px at var(--pointer-x,50%) var(--pointer-y,50%),#ffffff12,transparent);transition:opacity .3s;pointer-events:none}
#auth-page :is(.project-mark,.project-description,.project-meta,.project-arrow){transition:transform .35s cubic-bezier(.2,.8,.2,1),color .25s,opacity .25s}
#auth-page .project-row:focus-visible{background:#ffffff09}
#auth-page .project-row:active{background:#ffffff18}
#auth-page .project-row:active .project-description{transform:translateX(3px)}
#auth-page details[open]>.inline-form{animation:auth-unfold .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes auth-unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
#auth-page button[aria-busy=true],#auth-page form[aria-busy=true] button[type=submit]{cursor:wait;opacity:.65}
#auth-page button[aria-busy=true]::after,#auth-page form[aria-busy=true] button[type=submit]::after,#account-content[aria-busy=true]:empty::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;animation:auth-working 1s ease-in-out infinite}
#account-content{position:relative;min-height:64px}
@keyframes auth-working{0%,100%{transform:scaleX(.08);opacity:.4}50%{transform:scaleX(1);opacity:1}}
@media(hover:hover) and (pointer:fine){
 #auth-page :is(.text-button,.password-toggle,summary,.tab):hover{color:#fff;background:#ffffff08}
 #auth-page :is(.text-button,.password-toggle,summary,.tab):hover::after{transform:scaleX(1)}
 #auth-page .secondary-button:hover{background:#fff;color:#000;border-color:#fff}
 #auth-page .check-label:hover{color:#fff}
 #auth-page .check-label:hover input{border-color:#fff}
 #auth-page .project-row:hover{background:#ffffff04;border-top-color:#777}
 #auth-page .project-row:hover::before{opacity:1}
 #auth-page .project-row:hover .project-description{transform:translateX(9px)}
 #auth-page .project-row:hover .project-mark{color:#fff;transform:translateX(3px)}
 #auth-page .project-row:hover .project-meta{color:#ddd;transform:translateX(-6px)}
 #auth-page .project-row:hover .project-arrow{transform:translate(4px,-4px)}
 #auth-back:hover{color:#fff}#auth-back span{transition:transform .25s}#auth-back:hover span{transform:translateX(-5px)}
}
@media(prefers-reduced-motion:reduce){#auth-page *,#auth-page *::before,#auth-page *::after{animation:none!important;transition:none!important}}
html[data-reduced=true] #auth-page *,html[data-reduced=true] #auth-page *::before,html[data-reduced=true] #auth-page *::after{animation:none!important;transition:none!important}
#auth-page .primary-button:active:not(:disabled){background:#ddd;color:#000;border-color:#ddd}

#auth-page .account-topline>#signout{white-space:nowrap;flex-shrink:0}