/* The sign-in page. Uses the theme tokens from app.css. */
body.signin { display: grid; place-items: center; min-height: 100vh; padding: 20px 14px; }
.signin-card { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line);
               border-radius: 16px; padding: 24px 22px 26px; box-shadow: var(--shadow);
               border-top: 3px solid var(--gold); }
.signin-card .brand { margin-bottom: 14px; }
.signin-card h1 { font: 700 24px Georgia, serif; margin: 4px 0 10px; }
.step { display: grid; gap: 12px; }
.step .btn { width: 100%; min-height: 44px; font-size: 15px; justify-content: center; text-align: center; }
.step a.btn { text-decoration: none; display: flex; align-items: center; }
.step input { font-size: 16px; min-height: 44px; }
.step input[name=code] { letter-spacing: .3em; font-variant-numeric: tabular-nums; font-size: 20px; }
.signin-err { background: color-mix(in srgb, var(--coral) 14%, transparent); border: 1px solid var(--coral);
              color: var(--text); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.signin-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--dim); font-size: 14px; }
.signin-steps b { color: var(--text); }
.setup-qr { display: grid; place-items: center; margin: 4px 0 12px; }
.setup-qr canvas { width: 232px; height: 232px; background: #fff; border-radius: 8px; image-rendering: pixelated; }
.setup-key-wrap { margin: 10px 0; }
.setup-key-wrap summary { cursor: pointer; font-size: 13px; opacity: .8; }
.setup-key { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center;
             background: var(--panel-2); border-radius: 10px; padding: 10px 12px; }
.setup-key .sub { grid-column: 1 / -1; }
.setup-key code { font: 600 16px/1.4 Consolas, "Courier New", monospace; letter-spacing: .06em;
                  word-break: break-all; color: var(--gold-2); }
.setup-key .btn { width: auto; min-height: 34px; }
.codes { margin: 0; padding: 12px 12px 12px 36px; background: var(--panel-2); border-radius: 10px;
         display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
         font: 600 16px Consolas, "Courier New", monospace; letter-spacing: .05em; }
.step .row { display: flex; gap: 8px; }
.step .row .btn { flex: 1; }
.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
@media print {
  body.signin { display: block; background: #fff; color: #000; }
  .signin-card { box-shadow: none; border: 0; }
  .signin-card > *:not(#step-recovery), #step-recovery > *:not(h1):not(.codes) { display: none !important; }
  .codes { background: none; color: #000; }
}