/* twostep.css — the two-step sign-in sheet (twostep.js) and the sign-in's
 * second step (signin.js). Linked after home.css, whose .sheet it fills. */

/* A new step of the sheet slides in, like the sign-in's steps. */
.sheet-body.ts-step { animation: step-in .26s var(--ease-out) both; --step-from: 12px; }

/* The QR on white (scanners need the contrast), centred, a fixed size. */
.ts-qr-box { display: flex; justify-content: center; padding: 6px 0 12px; }
.ts-qr { width: 196px; height: 196px; border-radius: 10px; }

.ts-key-label { font-size: 13px; color: var(--fg-muted); text-align: center; }
.ts-key {
  display: block; margin: 6px auto 4px; text-align: center; user-select: all;
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--fg);
  word-break: break-all;
}
.ts-open { display: block; text-align: center; margin: 2px auto 12px; font-size: 13px; }
.ts-code { display: block; width: 100%; margin-top: 4px; font-family: var(--mono); letter-spacing: .12em; text-align: center; }

/* The recovery codes: two columns, selectable as a block. */
.ts-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 6px 0 14px;
  padding: 12px 14px; border-radius: 10px; background: var(--bg-card); user-select: all;
}
.ts-rc { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--fg); }

/* Turning it off is the risky way: the button says so. */
.btn.danger { background: var(--danger); border-color: transparent; color: #fff; }

/* The sign-in's second step: one field, the code. */
#second-code { font-family: var(--mono); letter-spacing: .16em; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sheet-body.ts-step { animation: none; }
}