/* taaha.ai — sign-in page */
.auth-body{ min-height:100vh; min-height:100dvh; display:grid; place-items:center;
  padding:calc(24px + var(--sat)) 16px calc(24px + var(--sab)); }
.auth-wrap{ width:100%; max-width:420px; display:grid; gap:22px; justify-items:center; }
.auth-wrap .brand{ font-size:1.6rem; }
.auth-card{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px;
  display:grid; gap:18px; box-shadow:var(--shadow); }
.auth-card h1{ font-size:1.6rem; }
.auth-sub{ color:var(--muted); margin-top:6px; font-size:.95rem; }
.auth-form{ display:grid; gap:14px; }
.auth-form .btn{ width:100%; }
.otp-input{ text-align:center; font-family:var(--font-display); font-size:1.5rem; letter-spacing:.35em; font-weight:700; }
.linkbtn{ background:none; border:0; padding:0; color:var(--accent); font:inherit; font-weight:600; cursor:pointer; }
.linkbtn:disabled{ color:var(--muted); cursor:default; }
.auth-status{ min-height:1.5em; text-align:center; color:var(--muted); font-size:.92rem; max-width:420px; }
.auth-status.err{ color:var(--hot); font-weight:500; }
#recaptcha{ position:fixed; bottom:0; left:0; }
.hint{ font-size:.78rem; color:var(--muted); font-weight:400; min-height:1.2em; }
.hint.ok{ color:var(--ok); } .hint.err{ color:var(--hot); }

/* "What do you do?" on the first-run step (4 Oct 2026: ONE list, the old "I am a" folded in). Chips look like the app's .skill ones
   (css/app.css, not loaded here); own class names because /admin/ loads this file next to app.css. The first pick carries "Main". */
.work-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.work-chip{ display:inline-flex; align-items:center; min-height:40px; max-width:100%; border:1px solid var(--line); background:transparent; color:var(--muted);
  font:inherit; font-size:.86rem; font-weight:500; line-height:1.25; text-align:left; padding:8px 12px; border-radius:999px; cursor:pointer; }
.work-chip.is-on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.work-chip.is-main::after{ content:"Main"; flex:none; margin-left:7px; padding:1px 7px; border-radius:999px; background:var(--accent-fill); color:var(--accent-ink);
  font-size:.64rem; font-weight:700; letter-spacing:.04em; }
.work-chip.custom i{ flex:none; margin-left:6px; font-style:normal; opacity:.7; }
.work-chip:focus-visible,.work-add-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.work-add{ display:flex; gap:8px; margin-top:2px; }
.work-add input{ flex:1; min-width:0; }
.work-add-btn{ flex:none; height:50px; padding:0 18px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--fg);
  font:inherit; font-size:.95rem; font-weight:600; cursor:pointer; }
.work-add-btn:active{ background:var(--surface-2); }

/* permissions step */
.perm-list{ display:grid; }
.perm-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:12px 0; border-bottom:1px dashed var(--line); }
.perm-row:last-child{ border-bottom:0; }
.perm-ic{ width:40px; height:40px; border-radius:12px; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; }
.perm-row b{ display:block; font-family:var(--font-display); font-size:1.05rem; }
.perm-row small{ display:block; color:var(--muted); font-size:.85rem; line-height:1.45; }
.perm-state{ display:block; margin-top:4px; font-size:.8rem; font-weight:600; color:var(--accent); min-height:1.1em; }
.perm-state.ok{ color:var(--ok); } .perm-state.no{ color:var(--muted); }

/* inside the Android / iOS app: phone OTP only (Google OAuth refuses embedded web views) */
/* the tapped button shows the progress itself (Sending code… / Checking… / Saving…) */
.btn.is-busy{ opacity:.92; cursor:progress; }
.btn-spin{ display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; margin-right:8px; vertical-align:-2px; animation:tspin .8s linear infinite; }
@keyframes tspin{ to{ transform:rotate(360deg); } }