/* Камера съёмки документов. Одна разметка на все темы оформления сайта.
 *
 * ⚠️ Тема влияет сюда только через переменные --camera-*, и ни одна из них
 * не обязана быть задана: у каждой есть запасное значение. Копировать эту
 * разметку в оформление бренда нельзя — камера одна, а брендов шесть, и
 * шесть копий разойдутся на первой же правке.
 *
 * Кадр всегда тёмный, независимо от светлой или тёмной темы страницы: под
 * ним видео с камеры, и светлая подложка мешала бы разглядеть документ.
 * Акцент (кнопка съёмки, найденная рамка) берётся из точки.
 */

:root {
  --camera-primary: var(--brand-main, #ffd100);
  --camera-primary-ink: var(--brand-on, #111111);
  --camera-background: #08090b;
  --camera-text: #ffffff;
  --camera-text-dim: rgba(255, 255, 255, .68);
  --camera-border: rgba(255, 255, 255, .82);
  --camera-success: #21c17a;
  --camera-warning: #ffb020;
  --camera-danger: #ff5252;
  --camera-overlay: rgba(0, 0, 0, .62);
  --camera-panel: rgba(20, 22, 26, .94);

  /* Прозрачность схемы документа внутри рамки. Меняется в одном месте;
     отдельные типы съёмки переопределяют её своим значением из каталога
     (public/lib/document-capture-types.js). */
  --camera-guide-opacity: .38;
}

.dc-root {
  position: fixed;
  inset: 0;
  /* ⚠️ Высоту берём по динамическому вьюпорту. На iPhone Safari прячет и
     показывает панель инструментов, и `100vh` там — это ВСЕГДА высота с
     раскрытой панелью: экран камеры получался выше видимой области, рамка
     центровалась по невидимому центру и выглядела мелкой и сдвинутой.
     `100dvh` меняется вместе с панелью. Запасное значение для браузеров без
     dvh стоит первым. */
  height: 100vh;
  height: 100dvh;
  z-index: 100000;
  background: var(--camera-background);
  color: var(--camera-text);
  font-family: inherit;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Кнопки под системными панелями iOS иначе не нажимаются. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;

  /* ⚠️ Схему объявляем и на самом экране камеры, не только на документе.
     Всё, что рисует браузер сам (обводка фокуса, системные виджеты внутри
     просмотра), берёт её с ближайшего предка; страница-хозяин при светлой
     теме объявляет `only light`, и без этой строки половина мелочей на
     Android оставалась бы светлой поверх чёрного экрана. */
  color-scheme: dark;

  /* Chrome на Android рисует поверх каждого нажатия свой синий прямоугольник.
     На кнопке съёмки и на «Использовать фото» он вспыхивает чужим цветом —
     ровно то, что читается как «браузер рисует что-то от себя». */
  -webkit-tap-highlight-color: transparent;
}

/* Тот же ноль подсветки для всего, по чему нажимают. */
.dc-root button,
.dc-root .dc-btn,
.dc-root .dc-close,
.dc-root .dc-shutter,
.dc-root .dc-ghost {
  -webkit-tap-highlight-color: transparent;
  /* Android рисует кнопкам собственный фон и скругление, если не запретить. */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

/* Видимая обводка фокуса нужна, но своя: системная берёт цвет акцента
   браузера и на чёрном экране выглядит случайной. */
.dc-root button:focus-visible {
  outline: 2px solid var(--camera-primary);
  outline-offset: 2px;
}

.dc-root[hidden] { display: none !important; }

.dc-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.dc-video,
.dc-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Порядок слоёв. ⚠️ Схема лежит НАД видео и ПОД рамкой и кнопками: иначе
   она либо не видна вовсе, либо перекрывает то, по чему нажимают. */
.dc-video { object-fit: cover; background: #000; z-index: 1; }
.dc-overlay { pointer-events: none; z-index: 2; }

/* Рамка документа. Затемнение вокруг делается тенью на 100vmax, а не четырьмя
   блоками: одна тень не оставляет щелей на дробных размерах экрана.

   ⚠️ Рамка неподвижна. Её положение и размер зависят только от размера
   экрана — границы документа в реальном времени не ищутся, и ничто не должно
   двигать, вращать или менять её размер. Допустимо лишь очень мягкое свечение
   (см. ниже): дёргающаяся рамка — ровно та беда, ради которой живой детектор
   и отключили. */
.dc-frame {
  position: absolute;
  /* ⚠️ Рамка меряется вместе со своей линией: иначе её внешний край на два
     пикселя с каждой стороны шире того прямоугольника, который посчитал JS, —
     и схема, положенная по этому прямоугольнику, не совпадает с нарисованным
     контуром. */
  box-sizing: border-box;
  border: 2px solid var(--camera-border);
  border-radius: 14px;
  box-shadow: 0 0 0 100vmax var(--camera-overlay);
  transition: border-color .18s ease, box-shadow .18s ease;
  pointer-events: none;
}

/* Неподвижная рамка чуть дышит свечением. ⚠️ Анимируется только тень:
   position/width/height/rotation остаются неизменными. */
@keyframes dc-frame-breath {
  0%, 100% { box-shadow: 0 0 0 100vmax var(--camera-overlay), 0 0 14px rgba(255, 255, 255, .12); }
  50%      { box-shadow: 0 0 0 100vmax var(--camera-overlay), 0 0 26px rgba(255, 255, 255, .26); }
}

.dc-frame[data-state="static"] {
  animation: dc-frame-breath 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dc-frame[data-state="static"] { animation: none; }
}

/* Готовая схема документа поверх видео. Ложится ровно в рамку; собственный
   контур рамки при этом убираем, чтобы не было двух рамок сразу.
   ⚠️ pointer-events: none обязателен — подсказка не должна перехватывать
   нажатия. В снимок она не попадает никогда: кадр берётся из видеопотока,
   а не снимком разметки. */
/* Готовая схема документа поверх видео.
   ⚠️ Прозрачность вешаем на саму картинку, а не на рамку-контейнер: иначе
   вместе с ней поблёкли бы и уголки, и граница, и всё остальное, что в ней
   лежит.
   ⚠️ object-fit: contain обязателен — растянуть схему по рамке значило бы
   исказить пропорции документа, по которым человек и выравнивает свой. */
.dc-guide {
  position: absolute;
  z-index: 2;
  /* ⚠️ Чёрная подложка под схемой, а не прозрачность. Схема нарисована
     бледно-голубым, и на светлом столе или белой скатерти она пропадала
     вовсе — человек видел пустую рамку и не понимал, как разворачивать
     документ. Чёрный фон приглушает картинку с камеры ровно под схемой и
     проявляет её на любом сюжете. Гасится он вместе со схемой: как только
     документ в рамке, подложка уходит и кадр виден полностью. */
  background: #000;
  object-fit: contain;
  opacity: var(--camera-guide-opacity);
  transition: opacity 220ms ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* Документ уже в рамке — схема больше не нужна и мягко гаснет.
   ⚠️ Гаснет только она: рамка остаётся на месте и того же размера. */
.dc-guide[data-faded="1"] { opacity: 0; }

.dc-guide[hidden] { display: none !important; }

/* Рамка и её уголки — над схемой. */
.dc-frame { z-index: 3; }
.dc-corner { z-index: 3; }

/* Документ распознан: рамка меняет только цвет, но не геометрию. */
.dc-frame[data-state="filled"] {
  border-color: var(--camera-success);
  box-shadow: 0 0 0 100vmax var(--camera-overlay), 0 0 22px rgba(33, 193, 122, .4);
  animation: none;
}

.dc-frame[data-state="filled"] .dc-corner { border-color: var(--camera-success); }

.dc-frame[data-state="ready"] {
  border-color: var(--camera-success);
  box-shadow: 0 0 0 100vmax var(--camera-overlay), 0 0 26px rgba(33, 193, 122, .55);
}

.dc-frame[data-state="hold"] { border-color: var(--camera-warning); }
.dc-frame[data-state="outside"] { border-color: var(--camera-danger); }

/* Уголки: по ним видно, куда именно тянуть документ, когда сама линия рамки
   теряется на светлом фоне. */
.dc-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--camera-primary);
  border-radius: 4px;
}
.dc-corner.tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.dc-corner.tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.dc-corner.br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.dc-corner.bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }

/* Куда класть SIM-карту на развороте паспорта. */
.dc-subframe {
  position: absolute;
  border: 2px dashed var(--camera-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--camera-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  background: rgba(0, 0, 0, .18);
}

/* Шапка. Кнопка закрытия вынута из потока, поэтому заголовок стоит по центру
   экрана, а не по центру оставшегося места — иначе он был бы заметно смещён
   влево на ширину кнопки. */
.dc-top {
  position: relative;
  z-index: 4;
  /* По 60 точек с боков — под кнопку объектива слева и закрытие справа. */
  padding: 10px 60px 6px;
  background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

.dc-titles { min-width: 0; text-align: center; }

.dc-step {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--camera-text-dim);
  margin-bottom: 2px;
}

.dc-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.dc-subtitle {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--camera-text-dim);
}

.dc-subtitle[hidden] { display: none !important; }

.dc-close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .18);
  color: var(--camera-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-hint {
  position: relative;
  z-index: 4;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 520px;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}

.dc-hint[hidden] { display: none !important; }

/* «Все данные должны быть читаемы!» — из-за этого заявку возвращают чаще
   всего, поэтому строка выделена заметно сильнее подсказки. */
.dc-warning {
  position: relative;
  z-index: 4;
  margin: 6px auto 0;
  padding: 0 20px;
  max-width: 520px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--camera-primary);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

.dc-warning[hidden] { display: none !important; }

.dc-spacer { flex: 1 1 auto; }

.dc-status {
  position: relative;
  z-index: 4;
  align-self: center;
  margin-bottom: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .18s ease, border-color .18s ease;
}

.dc-status::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--camera-text-dim);
}

/* Подсказка о блике. Появляется отдельной строкой над кнопкой съёмки и
   исчезает, как только блик ушёл. ⚠️ Ничего не блокирует и рамку не трогает:
   это подсказка, а не состояние. */
/* Подсказка о блике. ⚠️ Высота постоянная и зарезервирована всегда — по
   нижнему краю этой строки считается вертикальный центр рамки, и «выросшая»
   подсказка сдвигала бы рамку. min-height рассчитан на две строки: текст
   меняется (пока снимать нельзя — длиннее, после тихой разблокировки —
   короче), а высота обязана остаться прежней. */
/* ⚠️ Накладка, а не строка в потоке. В потоке она резервировала под себя
   высоту постоянно — шестьдесят точек, которых на iPhone не хватало рамке.
   Появление и исчезновение накладки геометрию не меняет вовсе, так что
   резервировать больше нечего. */
.dc-glare {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 100%;
  margin-bottom: 6px;
  z-index: 4;
  padding: 8px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 18px;
  background: rgba(255, 176, 32, .18);
  border: 1px solid rgba(255, 176, 32, .6);
  color: #ffd79a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}



/* ⚠️ Прячем прозрачностью, а не display: none. Подсказка появляется и
   исчезает по ходу наводки, и убранная из потока она меняла бы высоту нижней
   части — а по ней считается вертикальный центр рамки. Рамка сдвигалась бы
   каждый раз, когда блик появился или ушёл, то есть ровно то дёрганье, ради
   отказа от которого детектор и выключили. Место под строку занято всегда. */
.dc-glare { visibility: hidden; }
.dc-glare[data-visible="1"] { visibility: visible; }

/* Выбор объектива. Заметный, но не спорящий с кнопкой съёмки. */
/* Выбор объектива — в шапке, слева, симметрично кнопке закрытия. Внизу он
   отнимал у рамки целую строку. */
.dc-lens {
  position: absolute;
  top: 10px;
  left: 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0, 0, 0, .45);
  color: var(--camera-text);
  cursor: pointer;
  white-space: nowrap;
}

.dc-lens[hidden] { display: none !important; }

.dc-status[hidden] { display: none !important; }
.dc-status[data-state="found"]::before { background: var(--camera-warning); }
.dc-status[data-state="hold"]::before { background: var(--camera-warning); }
.dc-status[data-state="ready"]::before { background: var(--camera-success); }
.dc-status[data-state="ready"] { border-color: var(--camera-success); }
.dc-status[data-state="outside"]::before { background: var(--camera-danger); }

/* Нижняя панель: кнопка съёмки строго по центру экрана, а не по центру
   свободного места. ⚠️ Боковые колонки поэтому равны и тянутся (`1fr`), а не
   заданы фиксированной шириной: запасная кнопка подписана «Сфотографировать
   телефоном», в 74 px она не влезала и наезжала прямо на кнопку съёмки.
   `minmax(0, 1fr)` разрешает колонке сжаться — длинная подпись переносится по
   словам, а не выходит за свои границы. */
.dc-bottom {
  position: relative;
  z-index: 4;
  padding: 6px 20px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
}

/* Кнопка съёмки. Намеренно доступна всегда, а не только при «Готово»:
   детектор может не найти документ на пёстром столе, и запрет снимать
   означал бы, что заявку не отправить вовсе. */
.dc-shutter {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .9);
  background: var(--camera-primary);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .12s ease, box-shadow .18s ease;
}

.dc-shutter:active { transform: scale(.94); }
.dc-shutter[data-state="ready"] { box-shadow: 0 0 0 6px rgba(33, 193, 122, .35); }
.dc-shutter:disabled {
  opacity: .35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, .45);
  /* Серым, а не акцентом: иначе выключенная кнопка выглядит просто
     «неяркой», и человек продолжает по ней стучать. */
  background: rgba(255, 255, 255, .22);
  box-shadow: none;
}

.dc-side {
  min-width: 0;
  display: flex;
  align-items: center;
}

.dc-side:first-child { justify-content: flex-start; }
.dc-side:last-child { justify-content: flex-end; }

.dc-ghost {
  border: 0;
  background: none;
  color: var(--camera-text);
  font-size: 13px;
  line-height: 1.3;
  cursor: pointer;
  padding: 8px;
  max-width: 100%;
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* На узком экране в строку они не помещаются вовсе: кнопка съёмки остаётся по
   центру, запасная уходит под неё. */
@media (max-width: 560px) {
  .dc-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 6px;
  }

  .dc-side { justify-content: center; }
  /* Левая колонка внизу теперь всегда пуста — кнопка объектива уехала в
     шапку. Прячем её, чтобы она не добавляла строку. */
  .dc-side:first-child { display: none; }
  .dc-ghost { text-align: center; }
}

/* Короткий экран — iPhone SE и mini. ⚠️ Здесь рамка упирается в высоту, и
   каждая сэкономленная на подписях точка уходит ей: без этого блока рамка на
   SE получалась заметно уже, чем на остальных телефонах. Ничего не прячем —
   только уплотняем. */
@media (max-height: 700px) {
  .dc-top { padding: 6px 56px 4px; }
  .dc-title { font-size: 16px; }
  .dc-subtitle { font-size: 12px; margin-top: 1px; }
  .dc-step { font-size: 11px; margin-bottom: 0; }
  .dc-hint { font-size: 13px; }
  .dc-warning { font-size: 13px; margin-top: 4px; }
  .dc-close { width: 34px; height: 34px; font-size: 19px; top: 6px; right: 10px; }
  .dc-lens { top: 6px; left: 10px; padding: 5px 9px; font-size: 11px; }
  .dc-bottom { padding: 4px 16px 12px; }
  .dc-shutter { width: 62px; height: 62px; border-width: 3px; }
  .dc-glare { padding: 6px 12px; font-size: 13px; }
}

/* ---- Просмотр снятого кадра ---- */

.dc-preview {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--camera-background);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.dc-preview[hidden] { display: none !important; }

.dc-preview-image {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.dc-preview-image img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}

.dc-issues {
  margin: 0 16px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 176, 32, .14);
  border: 1px solid rgba(255, 176, 32, .5);
  font-size: 14px;
  line-height: 1.4;
}

.dc-issues[hidden] { display: none !important; }
.dc-issues p { margin: 0 0 6px; }
.dc-issues p:last-child { margin-bottom: 0; }

.dc-preview-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px 22px;
}

.dc-btn {
  min-height: 52px;
  border-radius: 14px;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 14px;
}

.dc-btn.primary { background: var(--camera-primary); color: var(--camera-primary-ink); }
.dc-btn.secondary { background: rgba(255, 255, 255, .16); color: var(--camera-text); }

/* ---- Сообщения (нет доступа к камере, нет HTTPS, камера занята) ---- */

.dc-message {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: var(--camera-panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 28px 22px calc(28px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  text-align: center;
}

.dc-message[hidden] { display: none !important; }
.dc-message h3 { margin: 0; font-size: 20px; }
.dc-message p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--camera-text-dim); }
.dc-message .dc-btn { max-width: 320px; margin: 0 auto; width: 100%; }

/* ---- Кнопка съёмки в самой анкете (заменяет «Выбрать файл») ---- */

.doc-capture {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc-capture-state {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(33, 193, 122, .1);
  border: 1px solid rgba(33, 193, 122, .42);
}

.doc-capture-state[data-visible="1"] { display: flex; }

/* В строке осталась одна кнопка «Переснять»: подпись «Фото добавлено» с
   размером файла отсюда убрана. Снимок уже виден крупно в блоке `.preview`
   прямо под этой строкой, а размер печатается там же (`#<поле>-size`), — то
   есть клиенту трижды сообщали одно и то же. Полоса при этом остаётся:
   зелёная рамка и есть ответ «принято», а кнопка — единственное, что в ней
   можно сделать. */
.doc-capture-state .beeline-btn { margin: 0; }

/* Очередь отправки на телефоне: «ожидает отправки», «отправляется», «ошибка».
   Показываем всегда, когда снимок ещё не у сервера, — иначе клиент закроет
   страницу, считая, что всё готово. */
.doc-capture-queue {
  font-size: 13px;
  line-height: 1.4;
  opacity: .8;
}

.doc-capture-queue[data-state="failed"] { color: #c0392b; opacity: 1; }
.doc-capture-queue[data-state="uploaded"] { color: #1c8b5a; opacity: 1; }

/* ---- Окно «Сфотографировать телефоном» на компьютере ---- */

/* ⚠️ Окно — накладка над анкетой, а не переход на другую страницу. Уход со
   страницы стоил бы клиенту всех заполненных полей, выбранного тарифа и
   подписи; ради QR-кода это непозволительно. */
.dc-qr-modal {
  background: rgba(8, 9, 11, .82);
  /* ⚠️ Цвет текста здесь задаётся ЯВНО, и это не дублирование .dc-root.

     Все остальные .dc-message лежат внутри .dc-root, а он ставит
     `color: var(--camera-text)` — светлый текст на тёмной панели. Окно с
     QR-кодом единственное, которое вешается прямо на <body>: там оно
     наследовало цвет текста страницы. На светлой теме это давало почти
     чёрный текст (13,18,32) на почти чёрной панели (20,22,26) — заголовок и
     названия документов не читались вовсе, а разглядеть, какие снимки уже
     пришли с телефона, было нечем. Подписи, у которых свой
     `--camera-text-dim`, при этом оставались видны, поэтому окно выглядело
     не сломанным, а наполовину пустым.

     Панель тёмная всегда — она накладка поверх анкеты и от темы страницы не
     зависит, — значит и текст на ней задаём от неё же, а не от страницы. */
  color: var(--camera-text);
  /* Тёмная накладка поверх светлой анкеты — та же история, что и у экрана
     камеры: без этого браузер рисует по светлой схеме всё, что рисует он сам.
     Окно бывает и на ноутбуке с сенсорным экраном, где подсветка нажатия
     видна. */
  color-scheme: dark;
  -webkit-tap-highlight-color: transparent;
}

/* Заголовок и названия документов — самый крупный текст окна, и именно он
   пропадал. Держим их на явном цвете, а не на наследовании: окно живёт вне
   .dc-root, и любой новый предок снова принесёт сюда цвет страницы. */
.dc-qr-card h3,
.dc-qr-list li { color: var(--camera-text); }

.dc-qr-modal button {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

.dc-qr-card {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 24px;
  border-radius: 20px;
  background: var(--camera-panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  text-align: left;
  max-height: 92vh;
  overflow: auto;
  overscroll-behavior: contain;
}

.dc-qr-card h3 {
  margin: 0 0 18px;
  font-size: 19px;
  line-height: 1.3;
  text-align: center;
}

/* ⚠️ Код и текст стоят в две колонки не для красоты. В один столбец карточка
   вырастала до 700 px и на ноутбуке с экраном 1280×600 уходила во внутренний
   скролл — кнопка «Закрыть» оказывалась ниже видимой части, и окно читалось
   как зависшее. */
.dc-qr-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.dc-qr-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.dc-qr-image svg {
  width: 220px;
  height: 220px;
  display: block;
  border-radius: 14px;
  background: #fff;
}

.dc-qr-image a { color: var(--camera-primary); word-break: break-all; font-size: 13px; }
.dc-qr-image p { margin: 0; color: var(--camera-text-dim); font-size: 14px; }

.dc-qr-steps {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--camera-text-dim);
}

.dc-qr-steps li { margin-bottom: 2px; }

/* Отметку рисует CSS по data-done, а не текст пункта: иначе «✓ » и «○ »
   попадают в первую колонку строки, и названия документов не выравниваются
   друг под другом. */
.dc-qr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.dc-qr-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  line-height: 1.35;
}

.dc-qr-list li::before {
  content: '○';
  flex: 0 0 auto;
  width: 14px;
  color: var(--camera-text-dim);
}

.dc-qr-list li[data-done="1"] { color: var(--camera-success); font-weight: 600; }
.dc-qr-list li[data-done="1"]::before { content: '✓'; color: var(--camera-success); }

.dc-qr-note {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--camera-text-dim);
  text-align: center;
}

/* ⚠️ Ширину кнопок задаём здесь: у .dc-message .dc-btn стоит max-width 320px,
   и без переопределения кнопки в карточке шириной 560 px висели бы посередине
   узкими плашками. */
.dc-qr-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-qr-card .dc-btn {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Диагностика для разработки: куда на самом деле ведёт код. В бою этот блок
   не показывается — сервер не присылает для него данных. */
.dc-qr-dev {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .22);
}

.dc-qr-dev[hidden] { display: none !important; }

.dc-qr-dev-label {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--camera-text-dim);
  margin-bottom: 6px;
}

.dc-qr-dev-url {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
  color: var(--camera-primary);
  margin-bottom: 8px;
}

.dc-qr-copy {
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  background: rgba(255, 255, 255, .16);
  color: var(--camera-text);
}

@media (max-width: 620px) {
  .dc-qr-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .dc-qr-side { width: 100%; }
}


/* ---- Блок документа на телефоне ----

   Пять блоков вложений идут подряд, и каждый занимал полэкрана: заголовок,
   кнопка съёмки с подписью в две строки, полоса «Переснять», предпросмотр в
   140 px и строка размера. Шаг 3 приходилось листать долго, а решение в нём
   одно — снять или переснять.

   ⚠️ Правила лежат здесь, а не в `style.css`: это оформление именно блока
   съёмки, а `style.css` в этом месте общий для всей анкеты и правится сейчас
   параллельно. Полный список полей вместо `:has()` — во встроенных браузерах
   мессенджеров он поддерживается не везде, а поймать это на живом клиенте
   нечем.

   ⚠️ Кнопки не ужимаем ниже 44 px: это нижняя граница, с которой в них
   попадают пальцем. Ужимается всё остальное. */

@media (max-width: 560px) {
  .form-group[data-field="sim-card"],
  .form-group[data-field="passport"],
  .form-group[data-field="registration"],
  .form-group[data-field="migration-card"],
  .form-group[data-field="selfie"] {
    margin: 12px 0;
    padding: 10px;
  }

  .form-group[data-field="sim-card"] > label:first-of-type,
  .form-group[data-field="passport"] > label:first-of-type,
  .form-group[data-field="registration"] > label:first-of-type,
  .form-group[data-field="migration-card"] > label:first-of-type,
  .form-group[data-field="selfie"] > label:first-of-type {
    margin-bottom: 6px;
    line-height: 1.3;
  }

  /* Подпись внутри кнопки повторяет заголовок строкой выше — на узком экране
     это лишняя строка в каждом из пяти блоков. */
  [data-capture-open] .hint2,
  [data-capture-fallback] .hint2 { display: none; }

  [data-capture-open],
  [data-capture-fallback] {
    margin-top: 8px;
    height: 44px;
    min-height: 44px;
  }

  .doc-capture-state {
    padding: 6px 8px;
    border-radius: 12px;
    gap: 8px;
  }

  .doc-capture-state .beeline-btn {
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
  }

  .form-group[data-field="sim-card"] .preview,
  .form-group[data-field="passport"] .preview,
  .form-group[data-field="registration"] .preview,
  .form-group[data-field="migration-card"] .preview,
  .form-group[data-field="selfie"] .preview {
    margin-top: 8px;
    min-height: 96px;
    padding: 8px;
  }

  .form-group[data-field="sim-card"] .preview img,
  .form-group[data-field="passport"] .preview img,
  .form-group[data-field="registration"] .preview img,
  .form-group[data-field="migration-card"] .preview img,
  .form-group[data-field="selfie"] .preview img { max-height: 150px; }

  .form-group[data-field="sim-card"] .preview .preview-hint,
  .form-group[data-field="passport"] .preview .preview-hint,
  .form-group[data-field="registration"] .preview .preview-hint,
  .form-group[data-field="migration-card"] .preview .preview-hint,
  .form-group[data-field="selfie"] .preview .preview-hint {
    font-size: 12px;
    padding: 6px 10px;
  }

  #sim-card-size,
  #passport-size,
  #registration-size,
  #migration-card-size,
  #selfie-size {
    margin-top: 4px !important;
    font-size: 12px;
  }
}


/* =====================================================================
   Блок «Загрузить фото с телефона» на шаге вложений.

   ⚠️ Показывает и прячет его JavaScript (атрибутом hidden), а не медиазапрос.
   Медиазапросом здесь нельзя: «телефон это или компьютер» решает
   isHandheldForCapture() по указателю и числу точек касания, а не по ширине
   окна — узкое окно на компьютере всё ещё компьютер, и прятать в нём
   единственный вход в съёмку телефоном было бы ровно той пропажей, от которой
   блок и заводится.

   Оформление намеренно нейтральное: страница живёт под шестью брендами, и
   цвета берутся переменными точки.
   ===================================================================== */
.phone-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--brand-main, #ffcc00);
  background: color-mix(in srgb, var(--brand-main, #ffcc00) 8%, transparent);
}
.phone-upload[hidden] { display: none !important; }

.phone-upload-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--brand-main, #ffcc00);
  background: color-mix(in srgb, var(--brand-main, #ffcc00) 16%, transparent);
}

.phone-upload-body { flex: 1 1 auto; min-width: 0; }
.phone-upload-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.phone-upload-text {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .78;
}

/* ⚠️ Кнопке оставлены 44 px: тем же блоком пользуются с планшета точки. */
.phone-upload .beeline-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  white-space: nowrap;
}

/* Узкое окно на компьютере: блок складывается, но не исчезает. */
@media (max-width: 560px) {
  .phone-upload { flex-wrap: wrap; }
  .phone-upload-icon { display: none; }
  .phone-upload .beeline-btn { width: 100%; }
}

/* Все документы уже сняты — блок остаётся, но перестаёт звать. */
.phone-upload[data-done="1"] {
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  background: transparent;
}