/* ============================================================================
   kit-phone-auth.css — окно входа по телефону (макет docs/redesign-canvas/LoginFlow.dc.html).
   Классы кита (.modal, .notice, .field, .input, .choice, .radio, .code, .btn…) — из kit.css;
   здесь — inline-стили макета, вынесенные в классы с понятными именами (префикс pa-),
   и мобильная раскладка: ≤480px окно на весь экран (KIT-LK, аудитория — Android 412×915).
   ============================================================================ */

/* ---------- корень: поверх страницы (overlay) или встроено в страницу (Account/Login) ---------- */
.pa-root[hidden] { display: none; }
.pa-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 48px 16px; }
.pa-backdrop { position: fixed; inset: 0; background: rgba(18,18,18,.48); }
.pa-overlay .pa-modal { margin: auto 0; }
html.pa-lock, html.pa-lock body { overflow: hidden; }

.pa-page { flex: 1 0 auto; background: #f4f4f4; padding: 48px 16px 64px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 20px; }
.pa-inline { display: flex; justify-content: center; width: 100%; }
/* неброская ссылка «Служебный вход» под окном (этап 1 — вход сотрудника как раньше) */
.pa-staff { margin: 0; font-size: 13px; line-height: 1.4; text-align: center; }
.pa-staff a { color: #646464; } /* наведение — линия под текстом (ul-link), без постоянного подчёркивания и смены цвета */

/* ---------- окно (.modal в ките: белый, радиус 24, тень; в макете width 400, padding 28, gap 18) ---------- */
.pa-modal { position: relative; width: 400px; max-width: 100%; padding: 28px; color: #121212; font-size: 15px; line-height: 1.5; }
.pa-modal:focus { outline: none; }
.pa-step { display: flex; flex-direction: column; gap: 18px; }
.pa-step[hidden] { display: none; }

.pa-close {
  position: absolute; top: 28px; right: 22px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; color: #646464; cursor: pointer;
}
.pa-close:hover { background: #f4f4f4; color: #121212; }
/* планшет/телефон (мобильная раскладка до 960px): зона нажатия 44×44, крестик на прежнем месте */
@media (max-width: 960px) {
  .pa-close { top: 22px; right: 16px; width: 44px; height: 44px; }
}

.pa-head { display: flex; flex-direction: column; gap: 6px; }
.pa-title { font-size: 22px; font-weight: 600; line-height: 1.25; color: #121212; }
.pa-title:focus { outline: none; }
.pa-title-pr { padding-right: 40px; }
.pa-sub { font-size: 14px; line-height: 1.5; color: #646464; }

/* строка «← Изменить номер · номер» / «← Другой способ» / заголовок ошибки */
.pa-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding-right: 40px; }
.pa-bar-single { justify-content: flex-start; }
.pa-link { font-size: 14px; cursor: pointer; background: none; border: 0; padding: 0; }
.pa-phone-tag { font-size: 14px; font-weight: 500; color: #121212; white-space: nowrap; }
.pa-nowrap { white-space: nowrap; }
.pa-strong { font-weight: 600; }
.pa-strong-nowrap { font-weight: 600; white-space: nowrap; }
.pa-medium-nowrap { font-weight: 500; white-space: nowrap; }

/* поле номера: 48px, шрифт 16 (как в макете); фокус = .input.is-focus кита */
.pa-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.pa-input { height: 48px; font-size: 16px; }
.pa-input:focus-within { border-color: #262626; box-shadow: 0 0 0 3px rgba(38,38,38,.08); }
.pa-input.is-err:focus-within { border-color: #e82d37; box-shadow: 0 0 0 3px rgba(232,45,55,.08); }
.pa-input input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; color: #121212; letter-spacing: 0;
}
.pa-input input::placeholder { color: #9a9a9a; opacity: 1; }
.err[hidden] { display: none; }
.notice[hidden] { display: none; }

.pa-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: default; pointer-events: none; }

/* шаг 2: способ подтверждения (.choice/.radio кита; радио — настоящие input для клавиатуры) */
.pa-choices { display: flex; flex-direction: column; gap: 10px; }
.pa-choices .choice { cursor: pointer; position: relative; }
.pa-choices .choice:hover { border-color: #cbcbcb; }
.pa-choices .choice.on:hover { border-color: #262626; }
.pa-choices .choice:focus-within { outline: 2px solid #ff760d; outline-offset: 2px; }
.pa-radio-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pa-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f4f4f4; color: #121212; flex: none; }
.pa-ico-green { background: #e6f6ec; color: #00a53d; }
.pa-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-choice-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: #121212; }
.pa-choice-sub { font-size: 13px; line-height: 1.45; color: #646464; }

/* шаг 3 WhatsApp: нумерованная инструкция */
.pa-howto { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pa-howto li { display: flex; align-items: flex-start; gap: 12px; }
.pa-num {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: #262626; color: #ffffff; font-size: 12px; font-weight: 600; line-height: 1; flex: none;
}
.pa-num-text { font-size: 14px; line-height: 1.5; color: #121212; padding-top: 1px; }

.pa-code-wrap { display: flex; flex-direction: column; gap: 8px; }
.pa-code-label { font-size: 13px; line-height: 1.4; color: #646464; }
.pa-actions { display: flex; flex-direction: column; gap: 10px; }

/* таймер повтора «Новый код можно получить через 0:59» → «Получить новый код» */
.pa-timer { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; line-height: 1.4; color: #646464; min-height: 1.4em; }  /* = строка 13×1.4, как в макете (20px опускал строку на 1px) */
.pa-timer b { font-weight: 500; color: #121212; font-variant-numeric: tabular-nums; }
.pa-timer .pa-link { font-size: 13px; }
.pa-timer [hidden] { display: none; }

/* статус опроса (role=status) */
.pa-status { font-size: 13px; line-height: 1.45; color: #646464; text-align: center; }
.pa-status:empty { display: none; }

/* шаг 3 QR */
.pa-qr-wrap { display: flex; justify-content: center; }
.pa-qr-frame { display: flex; padding: 12px; border: 1px solid #e9e9e9; border-radius: 16px; background: #ffffff; }
.pa-qr-frame img { display: block; width: 200px; height: 200px; }
.pa-center-text { font-size: 14px; line-height: 1.5; color: #121212; text-align: center; }

/* ошибка «Код не получен» / «Срок действия кода истёк» */
.pa-center { display: flex; justify-content: center; }
.pa-foot-note { font-size: 13px; line-height: 1.45; color: #646464; text-align: center; }

/* «Номер подтверждён» */
.pa-done-head { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; }
.pa-done-ico { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #e6f6ec; color: #00a53d; }
.pa-done-ico svg.ic { width: 48px; height: 48px; stroke-width: 1.25; }
.pa-title-center { text-align: center; }
.pa-routes { display: flex; flex-direction: column; gap: 10px; }
.pa-route { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.pa-route[hidden] { display: none; }
.pa-route-k { flex: none; width: 116px; font-size: 14px; font-weight: 600; line-height: 1.35; color: #121212; }
.pa-route-v { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: #646464; }

/* ---------- мобильная раскладка (≤480px): на весь экран, поля 16px, кнопки 52px, зоны нажатия ≥44px ---------- */
@media (max-width: 480px) {
  .pa-overlay { padding: 0; align-items: stretch; }
  .pa-overlay .pa-modal { margin: 0; width: 100%; min-height: 100%; border-radius: 0; box-shadow: none; padding: 20px 16px 28px; }
  .pa-page { padding: 0 0 16px; background: #ffffff; gap: 0; }
  .pa-staff a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; --ul-x: 16px; } /* линия — только под текстом, не под полями */
  .pa-inline .pa-modal { width: 100%; border-radius: 0; box-shadow: none; padding: 20px 16px 28px; }
  .pa-close { top: 14px; right: 8px; width: 44px; height: 44px; }
  .pa-bar { min-height: 44px; padding-right: 48px; }
  .pa-title-pr { padding-right: 48px; }
  .pa-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pa-timer { min-height: 44px; }
  .code b { width: 56px; height: 64px; }
  .pa-route-k { width: 104px; }
}
@media (max-width: 360px) {
  .code b { width: 48px; height: 56px; font-size: 24px; }
  .pa-route { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pa-route-k { width: auto; }
}