/* ==========================================================================
   auth.css — login / OTP / MFA enrolment / recovery codes
   Standalone pages: no sidebar, no tenant switcher. Split brand + form panel.
   ========================================================================== */

.auth{display:grid;grid-template-columns:minmax(0,440px) 1fr;min-height:100vh}

/* --- Brand panel --------------------------------------------------------- */
.auth-brand{
  background:var(--gray-950);color:#fff;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--space-8) var(--space-7);
}
.auth-brand::before{
  content:"";position:absolute;inset:auto -30% -40% -30%;height:70%;
  background:var(--brand-gradient);filter:blur(90px);opacity:.5;
}
.auth-brand > *{position:relative}
.auth-logo{display:flex;align-items:center;gap:var(--space-3)}
.auth-logo .mark{
  width:44px;height:44px;border-radius:var(--radius-md);background:var(--brand-gradient);
  display:grid;place-items:center;font-weight:700;font-size:16px;
}
.auth-pitch{font-size:var(--text-h2);font-weight:700;line-height:var(--lh-tight);
            max-width:22ch;margin-bottom:var(--space-4)}
.auth-note{color:rgba(255,255,255,.7);font-size:var(--text-cell);max-width:34ch}
.auth-foot{color:rgba(255,255,255,.45);font-size:var(--text-caption)}

/* --- Form panel ---------------------------------------------------------- */
.auth-main{display:grid;place-items:center;padding:var(--space-7);background:var(--color-bg-page)}
.auth-card{width:100%;max-width:440px}
.auth-head{margin-bottom:var(--space-6)}
.auth-title{font-size:var(--text-h2);font-weight:700;line-height:var(--lh-tight)}
.auth-sub{color:var(--color-text-muted);margin-top:var(--space-2)}

/* --- Step rail ----------------------------------------------------------- */
.rail{display:flex;gap:var(--space-2);margin-bottom:var(--space-6);list-style:none}
.rail li{flex:1;font-size:var(--text-caption);color:var(--color-text-muted);
         padding-top:var(--space-2);border-top:3px solid var(--gray-200)}
.rail li.done{border-top-color:var(--ci-lime);color:var(--color-text)}
.rail li.now{border-top-color:var(--ci-blue);color:var(--color-text);font-weight:700}

/* --- OTP / TOTP code boxes ------------------------------------------------ */
.codeboxes{display:flex;gap:var(--space-2)}
.codeboxes input{
  width:100%;aspect-ratio:1/1.15;text-align:center;font-size:var(--text-h3);font-weight:700;
  border:1.5px solid var(--color-border-strong);border-radius:var(--radius-md);
  background:#fff;font-variant-numeric:tabular-nums;
}
.codeboxes input:focus{outline:none;box-shadow:var(--ring);border-color:var(--ci-blue)}
.codeboxes input.filled{border-color:var(--ci-blue)}

.resend{display:flex;align-items:center;justify-content:space-between;
        margin-top:var(--space-4);font-size:var(--text-cell)}

/* --- QR enrolment -------------------------------------------------------- */
.qr-wrap{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap}
.qr{width:180px;height:180px;flex-shrink:0;background:#fff;padding:10px;
    border:1px solid var(--color-border);border-radius:var(--radius-md)}
.secret{
  font-family:var(--font-num);font-size:var(--text-cell);letter-spacing:.06em;
  background:var(--gray-100);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
  word-break:break-all;
}
.steps-ol{padding-left:1.15rem;font-size:var(--text-cell);line-height:1.9}
.steps-ol li::marker{font-weight:700;color:var(--ci-blue)}

/* --- Recovery codes ------------------------------------------------------ */
.codes{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);
  font-family:var(--font-num);font-size:var(--text-body-m);letter-spacing:.05em;
  background:var(--gray-50);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-4);
}
.codes span{padding:6px var(--space-3);background:#fff;border-radius:var(--radius-sm);
            border:1px solid var(--color-border);text-align:center}

.alert{
  display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-cell);margin-bottom:var(--space-5);
}
.alert-danger{background:var(--color-danger-bg);border:1px solid rgba(220,38,38,.3);
              color:#7F1D1D}
.alert-info{background:rgba(0,159,206,.07);border:1px solid rgba(0,159,206,.25)}
.alert strong{display:block;margin-bottom:2px}

.ack{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);
     border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
     font-size:var(--text-cell);cursor:pointer}
.ack:has(input:checked){border-color:var(--ci-lime);background:rgba(59,208,96,.06)}
.ack:has(input:focus-visible){box-shadow:var(--ring)}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
}