/* "Sign in with your phone": login panel and the approval page on the phone. */

/* Login panel (shared computer) ------------------------------------------------ */
.qr-login-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .75rem;
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--bs-primary);
  font-size: 1.4rem;
}
.qr-login-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
}
.qr-login-main { flex: 1 1 11rem; min-width: 0; }
.qr-login.is-open .qr-login-icon,
.qr-login.is-open .qr-login-intro { display: none; }
.qr-login-area:focus:not(:focus-visible) { outline: none; }

.qr-login-code {
  position: relative;
  flex: 0 0 auto;
  width: 10.5rem;
  aspect-ratio: 1 / 1;
  padding: .35rem;
  /* QR codes stay dark-on-light (also in dark mode) so phones can read them. */
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
}
.qr-login-svg,
.qr-login-svg svg { display: block; width: 100%; height: 100%; }
.qr-login-svg svg { transition: opacity .2s ease; }
.qr-login.is-loading .qr-login-svg svg { opacity: .35; }
.qr-login.is-finished .qr-login-svg svg { opacity: .1; filter: blur(3px); }
.qr-login-renew {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .9rem;
  white-space: nowrap;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
}
.qr-login-number {
  color: var(--bs-emphasis-color);
  font-size: 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  line-height: 1.15;
}
.qr-login-status:not(:empty) { margin-top: .35rem; }

@media (max-width: 575.98px) {
  /* Stacked under the code on phones: centre everything. */
  .qr-login.is-open .qr-login-main { text-align: center; }
  .qr-login.is-open .qr-login-main > .d-flex { justify-content: center; }
}

/* Approval page (phone) ------------------------------------------------------- */
.qr-approve-device-icon { font-size: 2rem; line-height: 1; color: var(--bs-primary); }
.qr-approve dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; }
.qr-approve dt { font-weight: 500; color: var(--bs-secondary-color); }
.qr-approve dd { margin: 0; overflow-wrap: anywhere; }
.qr-approve fieldset legend { font-size: 1rem; font-weight: 600; margin-bottom: .6rem; }

.choice-buttons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .12);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--elab-brand);
  --bs-btn-active-border-color: var(--elab-brand);
  --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .choice-buttons .btn {
  --bs-btn-active-bg: #2f6fa8;
  --bs-btn-active-border-color: #2f6fa8;
}
.number-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.number-choices .btn {
  min-height: 4.75rem;
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}
/* "Keep me signed in": a 44 px tap target, the help text under the label. */
.qr-keep { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 .625rem; padding-left: 0; }
.qr-keep .form-check-input { float: none; width: 1.5rem; height: 1.5rem; margin: 0; }
.qr-keep .form-check-label { min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.qr-keep .form-text { grid-column: 2; margin-top: 0; }

/* Links and buttons alike: label centred in the 48 px tap target. */
.qr-approve-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-height: 48px;
}

/* Result pages: one big icon per state (decorative; the heading says it). */
.qr-state-icon { font-size: 3rem; line-height: 1; }
.qr-state-icon.is-ok { color: var(--bs-success); }
.qr-state-icon.is-warn { color: #b06a00; }
.qr-state-icon.is-bad { color: var(--bs-danger); }
.qr-state-icon.is-muted { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .qr-state-icon.is-ok { color: var(--bs-success-text-emphasis); }
[data-bs-theme="dark"] .qr-state-icon.is-warn { color: var(--bs-warning-text-emphasis); }
[data-bs-theme="dark"] .qr-state-icon.is-bad { color: var(--bs-danger-text-emphasis); }