/* Typing a six-digit code: confirming the organizer's email on /new, and
 * signing in by code on /account (see public/js/otp.js). Builds on styles.css. */

/* The box under the email field on the create page. */
.verify {
  margin-top: 4px;
  padding: 18px 20px;
  background: var(--c-cream);
  border-radius: var(--r-sm);
}

.verify__text {
  margin: 0 0 12px;
  color: var(--text-2);
}

.verify__text strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.verify .field {
  margin-bottom: 12px;
}

.verify .field label strong {
  overflow-wrap: anywhere;
}

.verify__done {
  margin: 0 0 4px;
  font-weight: 650;
  color: var(--ok);
  overflow-wrap: anywhere;
}

.verify__done:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

.verify__out {
  color: var(--text-2);
  font-size: 0.9rem;
}

.verify__error {
  margin: 14px 0 0;
}

/* The code field and its button, side by side; the code set wide so each digit reads. */
.verify__row {
  display: flex;
  gap: 8px;
}

.verify__row input {
  flex: 1;
  min-width: 0;
  background: var(--c-white);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
}

.verify__row .btn {
  flex: none;
}

/* A resend still waiting out its seconds: focusable, but plainly not ready. */
.verify .linkbtn[aria-disabled='true'],
.account .linkbtn[aria-disabled='true'] {
  color: var(--text-2);
  text-decoration: none;
  cursor: default;
}

/* The account page's code panel sits on white, so the field goes back to cream. */
.account .verify__row input {
  background: var(--c-cream);
}
.account .verify__row input:focus-visible {
  background: var(--c-white);
}