/* ==========================================================================
   Chain-It — auth + setup pages (login, TOTP enroll/verify, one-time setup).
   Same tokens / type scale / geometry / motion as the app (css/base.css).
   ========================================================================== */

body.auth{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top) + var(--sp-4)) calc(env(safe-area-inset-right) + var(--sp-4))
          calc(env(safe-area-inset-bottom) + var(--sp-4)) calc(env(safe-area-inset-left) + var(--sp-4));
}
.card{
  background:var(--card);max-width:26rem;width:100%;
  padding:clamp(20px,4vh,30px);border-radius:var(--r-lg);
  box-shadow:0 12px 40px rgba(70,90,110,.14), inset 0 0 0 3px rgba(255,255,255,.6);
}
.card h1{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,4.2vh,26px);
  margin:.1rem 0 var(--sp-4);color:var(--ink);}
.card p{font-size:var(--fs-body);line-height:1.5;}
label{display:block;margin:var(--sp-3) 0 var(--sp-1);font-weight:700;color:var(--ink);font-size:var(--fs-body);}
input[type=text],input[type=password]{
  width:100%;padding:.7rem .8rem;border:1px solid var(--chain-light);border-radius:var(--r-sm);
  /* 16px prevents iOS auto-zoom on focus */
  font-size:16px;background:#fff;color:var(--ink);box-sizing:border-box;min-height:var(--tap);
}
input:focus{outline:none;box-shadow:0 0 0 3px rgba(156,198,238,.55);border-color:var(--blue-deep);}
button{
  margin-top:var(--sp-4);width:100%;min-height:var(--tap);padding:.75rem;border:0;border-radius:var(--r-md);
  background:var(--accent);color:#1f3b2a;font-family:var(--font-display);font-weight:600;
  font-size:clamp(15px,2.4vh,18px);cursor:pointer;box-shadow:0 4px 0 var(--accent-shadow);
  transition:transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-shadow);}
.err{background:var(--blush);color:var(--danger);padding:.6rem .8rem;border-radius:var(--r-sm);
  margin:var(--sp-2) 0;font-weight:700;font-size:var(--fs-body);}
.muted{color:var(--ink-soft);font-size:var(--fs-cap);}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;}
.secret{background:#f2f4f6;padding:.6rem;border-radius:var(--r-sm);word-break:break-all;letter-spacing:.5px;}
a{color:#3a72b0;}
img.qr{display:block;margin:1rem auto;image-rendering:pixelated;width:min(220px,60vw);height:min(220px,60vw);
  border-radius:var(--r-sm);background:#fff;padding:8px;}
details summary{cursor:pointer;padding:var(--sp-2) 0;min-height:var(--tap);color:var(--ink-soft);font-weight:700;}
.codes{background:#f2f4f6;border-radius:var(--r-sm);padding:var(--sp-4);white-space:pre-wrap;
  font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px;}
.warn{color:var(--danger);font-weight:800;}
fieldset{border:1px solid var(--chain-light);border-radius:var(--r-md);margin:var(--sp-3) 0;padding:var(--sp-3);}
legend{font-weight:800;color:var(--ink);font-size:var(--fs-cap);}