/* Preview finder: the code entry and email recovery panel. */
.finder { padding: 0; }
.finder-option { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.finder-option + .finder-option { border-top: 1px solid var(--hair); }
.finder-option h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.1; }
.code-form, .email-form { display: grid; gap: 1rem; margin-top: 1.25rem; justify-items: start; }
.email-form .field { width: 100%; }

/* Six visual cells backed by one real input. The input sits on top, invisible: it owns focus, typing, and paste. */
.code-field { position: relative; width: 100%; max-width: 24rem; }
.code-field input { position: absolute; inset: 0; z-index: 1; width: 100%; opacity: 0; }
.code-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto repeat(3, minmax(0, 1fr)); gap: clamp(0.35rem, 1.2vw, 0.6rem); align-items: center; }
.code-cells span { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--hair); border-radius: 12px; background: var(--paper); font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 4vw, 1.75rem); letter-spacing: -0.02em; transition: border-color 0.2s; }
.code-cells i { color: var(--ink-3); font-style: normal; padding-inline: 0.15rem; }
.code-field:focus-within .code-cells span { border-color: var(--ink); }
.code-field.is-invalid .code-cells span { border-color: var(--red); }
.code-form .field-error { min-height: 1.5rem; margin-top: -0.25rem; }