/* ═══ Aether — second factor, on all three public login surfaces ══════════
Loaded by templates/login.html, templates/portal/login.html and
templates/licensee/login.html. Every rule here styles content that
static/js/mfa-login.js builds inside the existing login card — this file adds no
chrome of its own, because the card, its ember edge and its forge field are
already the design. What is genuinely new is the code entry, the QR plate and
the recovery-code sheet, and only those get rules.

The card's own type, fields, buttons and error box are reused as-is; the three
surfaces already differ in card colour (adviser charcoal, portal light), so
everything below is expressed against the surrounding text colour rather than
against a fixed palette, and inherits whichever card it lands in.
*/

.mfa-panel {
  animation: mfa-step-in var(--dur-slow) var(--ease-out) both;
}

/* Felt, not seen: the card turning a page, not a component sliding in. */
@keyframes mfa-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mfa-panel { animation: none; }
}

/* ── The code entry ──────────────────────────────────────────────────────
   One field, sized and spaced so a six-digit code reads as a code. Wide
   letter-spacing plus tabular figures means the digits do not reflow as they
   are typed, which is the difference between a field that feels like a lock
   and one that feels like a search box. */

.mfa-code-input {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em;
  text-align: center;
  text-indent: 0.22em; /* cancels the trailing letter-space so it reads centred */
}

.mfa-code-input::placeholder {
  letter-spacing: 0.22em;
  opacity: 0.45;
}

/* ── The QR plate ────────────────────────────────────────────────────────
   Deliberately a light plate, on every surface including the dark adviser
   card. A QR is read by a camera, not by a person: dark modules on a light
   ground is what phone scanners are tuned for, and inverting it to match the
   card would cost scans on exactly the devices that matter. The plate is the
   one bright element in the composition, which also makes it the obvious
   next action. */

.mfa-qr {
  margin: 0 auto var(--space-3);
  padding: 10px;
  width: max-content;
  /* Literal white on purpose, not var(--surface-card): a QR quiet zone is a
     FUNCTIONAL colour read by scanners, and it must not move if a theme ever
     re-tones the card surface. The one declared hex exception in this file. */
  background: #ffffff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.28));
  line-height: 0;
}

.mfa-qr img {
  display: block;
  width: 192px;
  height: 192px;
  image-rendering: pixelated; /* no interpolation across module edges */
}

/* ── The manual key ──────────────────────────────────────────────────────
   Half of enrolment happens on a desktop with the phone in the other hand,
   and some authenticators have no camera path at all. The key is presented to
   be typed: grouped, monospace, selectable, and never wrapped mid-group. */

.mfa-key {
  margin: 0 0 var(--space-5);
  text-align: center;
}

.mfa-key__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  opacity: 0.7;
}

.mfa-key__value {
  display: block;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  letter-spacing: 0.06em;
  word-spacing: 0.35em;
  line-height: 1.7;
  overflow-wrap: break-word;
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid rgba(127, 127, 127, 0.26);
  border-radius: var(--radius-sm);
  user-select: all;
}

/* ── The recovery sheet ──────────────────────────────────────────────────
   Shown exactly once. The panel is sized so all ten fit without scrolling on
   a phone, and the acknowledgement is a real gate on the continue button
   rather than a line of prose people skim past. */

.mfa-recovery {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  background: rgba(127, 127, 127, 0.10);
  border: 1px solid rgba(127, 127, 127, 0.24);
  border-radius: var(--radius-sm);
}

.mfa-recovery__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
}

.mfa-recovery__list li {
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.mfa-warning {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-weight: var(--fw-semi);
}

.mfa-ack {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  /* The copy link sits directly above; without the top margin the quiet
     control and the gate read as one crowded block. */
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--fs-body);
  line-height: 1.5;
  cursor: pointer;
}

.mfa-ack input {
  margin: 0.2em 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent, currentColor);
  flex: none;
}

/* ── Secondary actions ───────────────────────────────────────────────────
   The card owns one primary button; anything else here is a quiet text
   control so the primary action stays unambiguous. */

.mfa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--fs-body);
}

.mfa-link {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  font: inherit;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out);
}

.mfa-link:hover,
.mfa-link:focus-visible {
  opacity: 1;
}

.mfa-status {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body);
  min-height: 1.2em;
}

/* One button and one field are enough on a 360px viewport; the recovery grid
   is the only thing that needs to fold. */
@media (max-width: 420px) {
  .mfa-recovery__list { grid-template-columns: minmax(0, 1fr); }
  .mfa-qr img { width: 168px; height: 168px; }
}