/* Email verification in the onboarding wizard (#3490, #3507; design epic
 * #3432). Figma 02 `1:18531` (address) and 02b `1:19048` (code). The shell,
 * top bar, step indicator, identity row and footer are onboarding.css's
 * (#3487, #3489); markup: app/email-verify.ts. Tokens only.
 *
 * Deviations, for AA or for what exists today:
 * - The address card holds an input, not Figma's masked GitHub primary: any
 *   address works (owner decision 2026-11-05), so there is nothing to pre-fill.
 * - The card label, helpers and expiry take --fg-muted (Figma's #94a3b8 /
 *   #64748b are 2.6:1 / 4.6:1 at 9-11px); the step title --fg-secondary
 *   (#4f637a has no token); the Resend link --primary-text (#15835e is 4.6:1
 *   but has no token); the active digit's numeral --primary-text (#10b981 on
 *   the tint is 2.4:1).
 * - Error, expired and disabled digits are #3439's (not in Figma).
 */

/* The gate shows these two screens full-window, not in its centered card. */
.gate:is([data-state="email"], [data-state="email-sent"]) { display: block; padding: 0; }
.gate:is([data-state="email"], [data-state="email-sent"])[hidden] { display: none; }
.gate:is([data-state="email"], [data-state="email-sent"]) .gate-card {
  position: relative; display: block; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.gate:is([data-state="email"], [data-state="email-sent"]) .gate-logo { display: none; }
.gate:is([data-state="email"], [data-state="email-sent"]) :is(.env-badge, .admin-badge) { position: absolute; z-index: 2; top: var(--space-2); right: var(--space-3); }
.gate:is([data-state="email"], [data-state="email-sent"]) .gate-body { display: block; }

/* The form spans the column and the footer, so the footer submits it. */
.ev-body { display: flex; flex-direction: column; gap: 28px; padding-top: 20px; }
.ev-body .ob-identity { order: 0; }
.ev-intro { display: flex; flex-direction: column; gap: var(--space-2); }
/* Plex Mono Bold 16 (1:18563); the code screen's is 22 (1:19068). */
.ev-title { margin: 0; font: 700 16px/1.3 var(--font-mono); color: var(--fg-secondary); text-align: left; }
.ev-intro h1:focus { outline: none; } /* focused by showGate, as .gate-body h1 */
[data-email-code-form] .ev-title { font-size: 22px; }
.ev-lead { margin: 0; font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
[data-email-code-form] .ev-lead { font-size: 14px; line-height: 22px; }
.ev-lead strong { color: var(--fg-strong); font-weight: 600; overflow-wrap: anywhere; }

/* Destination email card, 1:18572: radius 10, 1px border, padding 14, gap 5. */
.ev-card { display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--surface); }
.ev-card-label { font: 700 9px var(--font-mono); letter-spacing: 0.4px; text-transform: uppercase; color: var(--fg-muted); }
/* The value line (Plex Mono SemiBold 16) is the input. */
.ev-card.field input { height: 40px; font: 600 16px var(--font-mono); color: var(--fg-secondary); }
.ev-card-help { margin: 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.ev-card .field-error { margin-top: var(--space-1); }
/* The error lines stay rendered while empty, height reserved, so assistive
 * tech has the alert in the tree and announces its first text (#3621). */
.ev-wizard .field-error:empty { display: block; min-height: 1lh; }

/* "Having trouble? Contact support ->", 1:18576: Plex Mono 11, centered. */
.ev-support { margin: 0; font: 400 11px var(--font-mono); color: var(--fg-muted); text-align: center; }
.ev-support a { font-weight: 600; color: var(--primary-text); text-decoration: none; }
.ev-support a:hover { text-decoration: underline; }

/* ---- Code entry, 1:19070: label row, six digits, helpers ---- */
.ev-code { display: flex; flex-direction: column; gap: 12px; }
.ev-code-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ev-code-label { font: 700 11px var(--font-mono); color: var(--fg-strong); }
.ev-expiry { display: inline-flex; align-items: center; gap: 5px; font: 400 11px var(--font-sans); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ev-expiry[hidden] { display: none; }
.ev-expiry.is-dead { color: var(--danger-fg); }
/* 87.5x64 boxes, gap 10 (1:19077): the boxes share the column. */
.ev-code .otp { display: flex; gap: 10px; width: 100%; }
.ev-code .otp-digit { flex: 1 1 0; width: auto; min-width: 0; height: 64px; }
.ev-code .otp-digit:focus { box-shadow: inset 0 0 0 1px var(--focus); }
.ev-code .otp[aria-invalid="true"] .otp-digit:focus { border-color: var(--danger-fg); box-shadow: inset 0 0 0 1px var(--danger-fg); }
.ev-help { margin: 0; font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.ev-resend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 400 13px var(--font-sans); color: var(--fg-muted); }
.ev-fine { margin: 0; font: 400 11px/16px var(--font-sans); color: var(--fg-muted); }

/* A text button that reads as a link: Inter SemiBold 13, with its icon. */
.ev-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 13px var(--font-sans); color: var(--primary-text);
}
.ev-fine .ev-link { font-size: 11px; }
.ev-link:hover:not(:disabled) { text-decoration: underline; }
.ev-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.ev-link:disabled { color: var(--fg-muted); cursor: default; font-variant-numeric: tabular-nums; }
.ev-link[aria-busy="true"] svg { animation: ev-spin 1s linear infinite; }
@keyframes ev-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ev-link[aria-busy="true"] svg { animation: none; } }

.ev-wizard .gate-status:empty { display: none; }
.ev-wizard .gate-status { text-align: left; }
.ev-wizard .ob-footer-aside .ev-fine { text-align: center; }