/* PROFILE·MFA (1032) — the two-factor authentication sheet's own parts.
 * ═══════════════════════════════════════════════════════════════════════════════
 * EXTRACTION, never a redesign (workbench/RULES.md §8): the rules below are COPIED,
 * not rewritten, out of web/css/app.css (the "MFA enrolment — QR, secret, factor
 * list rows" block, lines 2825–2878 at seed 478e11f0) — the chosen design is the
 * code that ships today. REPORT-131's spine row 99 (openMfa@613 + render@680,
 * views/profile.js) is what this file is the fix for. The class stem is UNCHANGED —
 * `mfa` was already unique among the cards (grep 2026-09-03: no other card claims
 * it), so unlike 1023 no rename was needed and the app's DOM and the mirror's DOM
 * carry the same names. Identity is proven by REPORT-257's computed-style + pixel
 * probes, not asserted.
 *
 * ── LANDED COPY, NOT MOVE (amended 2026-09-03, lane 331) ───────────────────────
 * Lane 257 staged this block as a MOVE — app.css's copy deleted behind a tombstone.
 * That re-home re-keyed four already-baselined toolkit contrast pairs that the audit
 * had been attributing to `.mfa-secret`'s background, and 56-contrast-audit refused
 * the commit (REPORT-257 §6; the fix is a founder-gated baseline regen that has not
 * come). So this lane lands the 1025-EDITBABY pattern instead: app.css's block stays
 * EXACTLY WHERE IT IS, byte-for-byte, and this file duplicates it by design — the
 * card owns its CSS, app.css still ships it, and the cascade is unchanged (the two
 * copies are the same declarations in the same order, so the second is a no-op).
 * ⚠️ THE app.css COPY RETIRES AT THE SHEET-CONSOLIDATION PASS — or on Andrew's one
 * shared-sheet-shell word — NOT at this lane. Until then check 16's single-source
 * rule stays disarmed for this card: the row is PROVISIONAL, and the duplicate is
 * declared here rather than hidden.
 *
 * ── WHAT THE CARD OWNS, AND WHAT IT BORROWS ────────────────────────────────────
 * This file owns the .mfa-* parts only: the QR card, the manual-entry secret, and
 * the factor rows. The sheet it sits on is the SHARED MODAL SCAFFOLD — .modal-overlay
 * / .modal-sheet / .modal-top / .modal-body / .modal-foot, plus .label / .input /
 * .error / .muted / .btn — which stays in app.css (the 182 DISCLAIMER scoping
 * precedent). Both sides load app.css in production order (check 56), so the scaffold
 * is present wherever this card renders. The scaffold's vars (--paper, --rule,
 * --r-md, --r-sm, --col-max …) are app.css aliases onto token-system names; the
 * aliases resolve the same on both sides for the same reason.
 *
 * ── THE DRAWING'S INLINE STYLES ARE PART OF THE RENDERER ───────────────────────
 * The shipped render() carries small inline styles (the 28px title spacer, the
 * 14px/12px standfirst sizes, the 18px label offset, the empty-state 1.55 leading).
 * They moved VERBATIM into the renderer (web/js/cards/profile/mfa.render.js) rather
 * than being restyled into this file — an extraction does not get to rewrite how a
 * value is applied, only where the rule lives. The one raw value the token linter
 * scans for there carries its own marker beside the reason.
 *
 * ── EXACT-EQUAL TOKEN SWAPS TAKEN ──────────────────────────────────────────────
 * margin 12px → var(--space-12) · padding 8px → var(--space-8) · gap 12px →
 * var(--space-12) · font-size --size-13/--size-14/--size-12 → --text-caption/
 * --text-body-sm/--text-meta (the type-role ladder's byte-equal names for the same
 * sizes — D-463): all resolve to the identical value, pixel-identical, proven by
 * the probes.
 *
 * ── THE VALUES WITH NO EXACT TOKEN, EACH OWED TO ANDREW, NOT TAKEN ─────────────
 * Every marker below is a shipped value this extraction will not move:
 *   · 200px QR square (×2) — no --dim-200; the QR is a fixed square by design.
 *   · 10px 14px secret padding — the ladder has no --space-10/--space-14.
 *   · 14px 0 factor-row padding — same gap in the ladder.
 *   · 2px name→meta offset — below the 4px grid on purpose (D-511 was not applied
 *     here and snapping it is a design ruling, the 1021 17px precedent).
 * ═══════════════════════════════════════════════════════════════════════════════ */

.mfa-qr {
  display: block;
  width: 200px; /* token-exception */ /* shipped QR square — no --dim-200; a ruling owed, not taken */
  height: 200px; /* token-exception */ /* shipped QR square — no --dim-200; a ruling owed, not taken */
  margin: var(--space-12) auto;
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-soft);
}

.mfa-secret {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-05);
  text-align: center;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 14px; /* token-exception */ /* shipped — no --space-10 / --space-14 on the ladder; a ruling owed, not taken */
  user-select: all;
  word-break: break-all;
}

.mfa-factor {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 14px 0; /* token-exception */ /* shipped — no --space-14 on the ladder; a ruling owed, not taken */
  border-bottom: 1px solid var(--rule);
}

.mfa-factor:last-child {
  border-bottom: 0;
}

.mfa-factor-info {
  flex: 1;
}

.mfa-factor-name {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--ink);
}

.mfa-factor-meta {
  font-size: var(--text-meta);
  color: var(--ink-600);
  margin-top: 2px; /* token-exception */ /* shipped — sub-grid by design; snapping is a ruling owed, not taken (D-511) */
}

/* The row's Remove button is the card's one interactive element (the sheet's own
 * buttons are the shared scaffold's, not this card's). Tactile floor D-422 —
 * the same brightness press the index CTAs use. Wired 2026-09-28, brief 9500. */
.mfa-factor .btn:active {
  filter: brightness(0.94);
}