/* tfa.css -- two-step verification (#0000-1039): a card of the dialog family (e5b.css), a key you read
 * from the screen into an app, ten recovery codes in a grid. Tokens from core.css, no colour of its own. */

.tfa-card { width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.tfa-title { margin: 0 0 10px; font-size: calc(var(--ui-fs) * 15 / 13); font-weight: 600; color: var(--text-strong); }
.tfa-line { margin: 0 0 8px; }
.tfa-label { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: calc(var(--ui-fs) * 12 / 13); color: var(--text-dim); }
.tfa-input { width: 100%; box-sizing: border-box; }
.tfa-qr { width: 200px; height: 200px; margin: 2px 0 10px; border-radius: 3px; overflow: hidden; }
.tfa-qr svg { display: block; }   /* black on white whatever the theme: a scanner reads dark on light */
.tfa-key {
  margin: 0 0 8px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  font: calc(var(--code-fs) * 0.95) var(--font-code); letter-spacing: .06em; color: var(--text-strong);
  -webkit-user-select: all; user-select: all; overflow-wrap: anywhere;
}
.tfa-link { display: inline-block; margin: 0 0 12px; color: var(--accent-hi); }
.tfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0 0 12px; }
.tfa-code {
  padding: 5px 8px; background: var(--bg); border: 1px solid var(--rule); border-radius: 3px;
  font: var(--code-fs) var(--font-code); text-align: center; color: var(--text-strong);
  -webkit-user-select: all; user-select: all;
}
.tfa-err { margin: 0 0 10px; color: var(--danger-tx); }
.tfa-err.ok { color: var(--ok); }
.tfa-err[hidden] { display: none; }
.tfa-page .tfa-why { margin: 0 0 14px; max-width: 34rem; text-align: center; color: var(--text); }
.tfa-page .tfa-host { display: flex; justify-content: center; max-height: 70vh; overflow-y: auto; }
.tfa-page .dlgcard { position: static; transform: none; margin: 0; }

/* ---- on a phone (#0000-1408): the card as wide as the screen, 48 px fields and buttons, text of 17 px
 * in the fields, the QR code never wider than the card. Desktop is untouched. */
@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  .tfa-card { box-sizing: border-box; min-width: 0; width: min(34rem, calc(100vw - 32px)); padding: 16px; }
  .tfa-card .dlgbtns { gap: 10px; }
  .tfa-card .dlgbtn { flex: 1 1 auto; min-height: 48px; padding: 0 16px; font-size: 17px; border-radius: 6px; }
  .tfa-card .dlginput, .tfa-input { min-height: 48px; padding: 10px 12px; font-size: 17px; border-radius: 6px; }
  .tfa-label { font-size: 15px; }
  .tfa-qr { max-width: 100%; }
  .tfa-qr svg { width: 100%; height: 100%; }
  .tfa-link { padding: 12px 0; min-height: 44px; box-sizing: border-box; }
  .tfa-key { font-size: 16px; }
  .tfa-code { padding: 10px 8px; font-size: 16px; }
  #loginoverlay.tfa-page { justify-content: safe center; }
  .tfa-page .tfa-why { font-size: 16px; }
  .tfa-page .tfa-host { width: 100%; max-height: none; overflow: visible; }
  .tfa-page .tfa-card { width: 100%; max-width: 34rem; max-height: none; overflow: visible; }
}