/**
 * auth.css — Clerk email-OTP sign-in card shown in place of the phone shell
 * while a role app is gating access. Styled through tokens.css only.
 */

.auth-card{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  width:min(360px,100%);box-sizing:border-box;
  padding:36px 28px;
  background:var(--paper);border-radius:34px;
  box-shadow:var(--shadow-lg), 0 0 0 10px var(--frame);
  text-align:center;
}
.auth-logo{width:48px;height:48px}
.auth-card h1{margin:0;font-size:1.2rem;font-weight:800;color:var(--ink)}
.auth-subtitle{margin:0;font-size:.9rem;color:var(--muted);line-height:1.4}
.auth-error{margin:0;font-size:.85rem;color:var(--crit);min-height:1.2em}

.auth-form{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:8px;text-align:left}
.auth-form label{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.auth-form input{
  width:100%;box-sizing:border-box;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);font:inherit;font-size:1rem;
}
.auth-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.auth-form input[readonly]{opacity:.7}

.auth-submit{
  margin-top:4px;padding:12px 16px;border:none;border-radius:12px;
  background:var(--brand);color:#fff;font:inherit;font-size:1rem;font-weight:700;
  cursor:pointer;transition:opacity .2s;
}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}

.auth-back{
  padding:8px;border:none;background:none;color:var(--accent);
  font:inherit;font-size:.85rem;cursor:pointer;text-align:center;
}
.auth-back:hover{text-decoration:underline}