/* PROFILE·CODECONFIRM — the prove-it's-you step of a destructive flow. (9501, 2026-09-28)
 *
 * THE APPROVED PICTURE: "Confirm it's you." of the signed-off Profile collage — standfirst
 * naming where the code went and that this cannot be undone, the code entry, a clay
 * destructive main door, and a "Send a new code" door under it.
 *
 * 🔴 ONE INPUT, NOT THE DRAWING'S SIX BOXES — DELIBERATE, NOT AN OVERSIGHT. The drawing
 * shows six split boxes; the app moved OFF split boxes for a real, recorded reason:
 * D-781 (code-not-link sign-in) — "Single input (NOT split boxes — split boxes break iOS
 * one-time-code autofill)", with autocomplete="one-time-code" so the SMS/keyboard
 * suggestion lands. The approved picture is the STRUCTURE (prove identity → one destructive
 * door → resend); the code entry adopts the app's own real pattern. The divergence is named
 * in REPORT-9501 for the brand pass.
 *
 * Self-contained under .cdc-*; the main door is 1010 SHARED·PRIMARYCTA's new destructive
 * rung (.danger), composed here — never a private copy of it.
 *
 * STATES (all four rendered in the exhibit):
 *   empty     — nothing typed; the destructive door is disabled (nothing to confirm yet).
 *   filling   — 1–5 digits typed; still disabled until six.
 *   verifying — busy: the door reads its confirming label, disabled, and the input locks.
 *   error     — opts.error set: the app's .error banner grammar, one line, above the field.
 * ============================================================================ */
.cdc { display: flex; flex-direction: column; gap: var(--space-12); }
.cdc-sub { font-family: var(--font-body); font-size: var(--size-17); /* token-exception */
  color: var(--ink-600); margin: 0; line-height: var(--leading-140); }
/* the error line composes the app's own .error class (white face + danger text, the
   grammar that already passes contrast: --danger on --white clears 4.70:1) — a private
   13px danger-on-ground line measured 3.63:1 and the contrast audit refused it. */
/* The code field composes the app's own .input grammar (app.css) — box, border, focus —
 * and overrides only what a 6-digit code needs: the mono data face (tokens: code/data/
 * numbers only), the display size, and the letterspacing that lets the six digits read. */
.cdc-field { font-family: var(--font-mono); font-size: var(--size-24); /* token-exception */
  letter-spacing: var(--tracking-12); color: var(--text-primary); }
.cdc .lg-cta { flex: none; }
.cdc-resend { align-self: center; font-family: var(--font-body); font-size: var(--size-15); /* token-exception */
  font-weight: var(--weight-600); color: var(--teal-700); background: 0; border: 0;
  cursor: pointer; padding: var(--space-8); }
.cdc-resend:active { color: var(--accent-hover); }
.cdc-resend:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }