/* =========================================================================
   security.css - the enrolment page.

   Small on purpose. The rows, groups and buttons come from `account.css`, which now carries
   a `.sec-page` selector beside its `.modal` one for exactly those primitives; this file
   holds the page frame, the card the panel sits in, and the parts that exist nowhere else -
   the QR, the setup key, and the two buttons that start enrolment.
   ========================================================================= */

.sec-page{ padding-block:44px 0; }

.sec-page__head{ max-width:62ch; margin-bottom:26px; }
.sec-page__head h1{
  font-family:var(--display); font-size:30px; font-weight:600;
  letter-spacing:-.025em; color:#F5F2ED;
}
.sec-page__head p{
  margin-top:10px; font-size:14px; line-height:1.66; color:var(--mute);
}

/* `.panel` is defined in `checkout.css` and `terminal.css`, neither of which this page
   loads, and `account.css` defines it as a borderless column for use inside the sheet.
   So the card is stated here rather than borrowed from a file that is not present. */
.sec-page .panel{
  background:#0A0A0A; border:1px solid var(--hair); border-radius:14px; overflow:hidden;
}
.sec-page .panel__hd{ padding:15px 20px; border-bottom:1px solid var(--hair); }
.sec-page .panel__hd h2{ font-family:var(--display); font-size:15px; font-weight:500; }

.mfa{ padding:4px 20px 20px; }
/* The first row's top border would otherwise double the panel head's bottom one. */
.mfa .row:first-child{ border-top:0; }

/* The add buttons sit together under the list and wrap rather than shrink: "Add an
   authenticator app" is a long label and a squeezed one is unreadable. */
.mfa__add{ display:flex; flex-wrap:wrap; gap:10px; padding-top:18px; }

.mfa__enrol{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:18px; }
.mfa__enrol .code{ width:100%; max-width:330px; }
.mfa__acts{ display:flex; flex-wrap:wrap; gap:10px; }

.mfa__hint{ font-size:13.5px; line-height:1.6; color:var(--mute); }

/* Drawn at whole-pixel module size by `qrCanvas`, so it must not be scaled: a resampled QR
   blurs its module edges and a phone camera hunts for it. It keeps its intrinsic size and
   `max-width` only rescues the case where the viewport is narrower than the code. */
.mfa__qr{
  display:block; max-width:100%; height:auto;
  border-radius:10px; background:#FFFFFF;
}

/* The setup key, for anybody whose authenticator is on the machine showing the QR. Grouped
   in fours and selectable - this is the one string on the site people are meant to copy. */
.mfa__secret{
  font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size:15px; letter-spacing:.08em; color:#EFEBE4;
  user-select:all; -webkit-user-select:all;
  padding:11px 13px; border:1px solid var(--hair-2); border-radius:10px; background:#111110;
}

@media (max-width:560px){
  .sec-page{ padding-block:30px 0; }
  .sec-page__head h1{ font-size:25px; }
}