/* ══════════════════════════════════════════════════════════════════════════════
   OTP sign-in form — the phone → password | code steps of src/shared/loginFlow.ts.
   One definition for the sign-in pages (login, owner login, sign-up) and the meeting
   room's guest sign-in (#guest-entry-overlay: the room bundle imports this file).
   Tokens only. The card, buttons and fields are components (foundation/components.css);
   .sr-only comes from base.css (the room has its own).
   ══════════════════════════════════════════════════════════════════════════════ */

.otp-auth-form{width:100%;display:flex;flex-direction:column;gap:12px}
.otp-auth-field{width:100%;margin:0}
.otp-auth-field[hidden],.guest-field[hidden]{display:none!important}

/* Phone, password and the one-field code: a 48 px entry input, centred. */
.otp-auth-input{
  width:100%;height:48px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--text-1);
  font-family:var(--font);font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:500;text-align:center;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.otp-auth-input::placeholder{color:var(--text-3)}
.otp-auth-input:focus{outline:none;border-color:var(--accent-line);box-shadow:var(--focus)}
.otp-auth-phone-input,.otp-auth-fallback-input{direction:ltr;font-variant-numeric:tabular-nums}
/* «ورود با ایمیل»: an address, typed and read left to right. */
.otp-auth-email-input{direction:ltr}
.otp-auth-fallback-input{font-weight:600}
.otp-auth-fallback-input[hidden]{display:none!important}

/* The code, one slot per digit (src/shared/otpInput sets --otp-length): a compact
   48 × 52 cell, centred — it never stretches with a wide card, and only narrows
   on a very small screen. */
.otp-slot-group{
  --otp-length:5;
  display:grid;grid-template-columns:repeat(var(--otp-length),minmax(0,48px));justify-content:center;gap:8px;direction:ltr;
}
.otp-slot-group[hidden]{display:none!important}
.otp-slot{
  width:100%;min-width:0;height:52px;padding:0;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--text-1);
  font-family:var(--font);font-size:var(--fs-xl);line-height:1;font-weight:600;
  text-align:center;direction:ltr;font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.otp-slot:focus{outline:none;border-color:var(--accent-line);box-shadow:var(--focus)}
.otp-auth-field.is-invalid :where(.otp-auth-input,.otp-slot){border-color:var(--danger-line)}

/* Development only: the code shown on screen when no SMS is sent. */
.otp-auth-dev-note{
  display:none;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--text-1);
}
.otp-auth-dev-note.is-visible{display:flex}
.otp-auth-dev-note[hidden]{display:none!important}
.otp-auth-dev-copy{display:grid;gap:2px;min-width:0}
.otp-auth-dev-eyebrow{font-size:var(--fs-xs);line-height:var(--lh-xs);font-weight:500;color:var(--text-2)}
.otp-auth-dev-text{font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-2)}
.otp-auth-dev-code{
  flex-shrink:0;min-width:88px;padding:6px 12px;
  border:1px solid var(--line-1);border-radius:var(--r-sm);background:var(--bg);color:var(--text-1);
  font-family:var(--font);font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:600;
  text-align:center;direction:ltr;font-variant-numeric:tabular-nums;
}

/* The form's error line and its quiet secondary actions (resend, switch method, edit number,
   «ورود با ایمیل»). */
.otp-auth-error{margin:0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--danger-ink);text-align:center}
.otp-auth-link{
  min-height:32px;padding:0 8px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--text-2);font-family:var(--font);font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:500;
  text-align:center;cursor:pointer;transition:color var(--dur-fast) var(--ease-out);
}
.otp-auth-link:not(:disabled):hover{color:var(--text-1)}
.otp-auth-resend:not(:disabled){color:var(--accent-ink)}
.otp-auth-link:disabled{cursor:not-allowed;opacity:.6}
/* The quiet links as one row under the submit (an event's registration, «شمارهٔ موبایل»): the ways
   to switch — resend, change, the other way in — at the start (the right), the way out («انصراف»,
   «بعداً وارد می‌کنم») at the end (the left); each link's words sit on the button's edges. */
.otp-auth-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-inline:-8px}
.otp-auth-links:not(:has(> :not([hidden]))){display:none}
.otp-auth-links-end{margin-inline-start:auto}
/* «شمارهٔ موبایل» (src/shared/ui/phoneAsk): its words a step apart from the field. */
.phone-ask > .profile-gate-head{margin-bottom:8px}

@media (max-width:520px){
  .otp-auth-dev-note{flex-direction:column;align-items:stretch;text-align:center}
  .otp-auth-dev-code{width:100%;min-width:0}
}