/* =====================================================================
   AUTH — Log in / Sign up (concept 03 "Role First")
   ===================================================================== */
#frame[data-tab="auth"] .nav{ display:none; }
#scr-auth .scr{ padding:46px 24px 28px; display:flex; flex-direction:column; }
.au-view{ display:flex; flex-direction:column; gap:16px; margin:auto 0; width:100%; max-width:340px; align-self:center; container-type:inline-size; }
.au-view[hidden]{ display:none; }
.au-view h2{ font-family:var(--font-body); font-weight:600; font-size:25px; line-height:1.15; letter-spacing:-.01em; margin:6px 0 0; text-wrap:balance; }
.au-logo{ align-self:center; width:72px; height:auto; }
/* Tagline stays on one line: 25px where it fits, scales with the column (cqi) on narrow screens */
.au-view h2.au-tagline{ text-align:center; margin:0; white-space:nowrap; font-size:min(25px, 6.4cqi); }
.au-sub{ margin:-8px 0 0; color:var(--cream-dim); font-size:13px; }
.au-form{ display:flex; flex-direction:column; gap:13px; }
.au-field{ display:flex; flex-direction:column; gap:6px; }
.au-field[hidden]{ display:none; }
.au-lab{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sage-4); }
.au-in{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--field-line); background:rgb(var(--ink-rgb) / .05); color:var(--cream); font:inherit; font-size:14px; transition:border-color .15s; }
.au-in::placeholder{ color:var(--cream-dim); opacity:.55; }
.au-in:focus{ outline:none; border-color:var(--sage-3); }
.au-pw, .au-at{ position:relative; }
.au-pw .au-in{ padding-right:60px; }
.au-at .au-in{ padding-left:30px; }
.au-at::before{ content:"@"; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--sage-4); font-weight:600; pointer-events:none; }
.au-reveal{ position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sage-4); padding:7px 9px; border-radius:8px; }
.au-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 16px; border-radius:999px; font-weight:700; font-size:14px; transition:transform .15s, background .15s, border-color .15s; }
.au-btn:active{ transform:scale(.97); }
.au-btn.primary{ background:var(--sage-3); color:var(--black); }
.au-btn.primary:hover{ background:var(--sage-4); }
.au-btn.spotify{ border:1.5px solid rgba(30,215,96,.55); color:var(--spotify-text); font-size:13px; padding:11px 16px; }
.au-btn.spotify:hover{ background:rgba(30,215,96,.08); }
.au-btn.spotify[hidden]{ display:none; }
.au-link{ color:var(--sage-3); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgb(var(--accent-rgb) / .4); }
.au-swap{ text-align:center; color:var(--cream-dim); font-size:13px; margin:0; }
.au-roles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; border:0; margin:0; padding:0; }
.au-roles legend{ grid-column:1/-1; margin-bottom:6px; padding:0; }
.au-role{ position:relative; display:flex; flex-direction:column; gap:6px; padding:13px; border-radius:16px; border:1.5px solid var(--line); background:var(--panel); cursor:pointer; transition:border-color .15s, background .15s; }
.au-role input{ position:absolute; opacity:0; pointer-events:none; }
.au-role svg{ width:26px; height:26px; color:var(--cream-dim); }
.au-role b{ font-size:14px; }
.au-role small{ font-size:11px; color:var(--cream-dim); line-height:1.35; }
.au-role:has(input:checked){ border-color:var(--sage-3); background:rgb(var(--accent-rgb) / .12); }
.au-role:has(input:checked) svg{ color:var(--sage-3); }
.au-role.gig:has(input:checked){ border-color:var(--cat-gig); background:rgba(255,179,122,.1); }
.au-role.gig:has(input:checked) svg{ color:var(--cat-gig); }
.au-role:has(input:focus-visible){ outline:2px solid var(--sage-4); outline-offset:2px; }
.au-remember[hidden]{ display:none; }
.au-remember{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.au-remember .mid{ flex:1; min-width:0; }
.au-remember b{ display:block; font-size:14px; }
.au-remember small{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--cream-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.au-row{ display:flex; justify-content:space-between; align-items:center; }