/* Съёмка документа с телефона по QR (#70822491). Подключается после
   app.css / components.css. Цвета — токенами; исключение ровно одно и
   объяснено ниже (подложка QR). */

/* ── Публичная страница съёмки (#/capture/<токен>) ───────────────────────
   Одна карточка по центру, как у отписки и входа: посторонней навигации на
   ней нет — человек пришёл по ссылке сделать один снимок. */
.capture-wrap {
  max-width: 520px;
  /* Тот же вертикальный отступ, что у публичной страницы отписки
     (`.v6u-1vcqf34` = 48px сверху). */
  padding: 48px 24px 80px;
}

/* Шапка страницы съёмки — одна строка на любой ширине (ретест 21-09,
   #70819351). Действий, кроме переключателя темы, у страницы нет — их
   снимает `capture.js` (там же объяснено, почему), — но общее мобильное
   правило `.top-right { width: 100%; }` (app.css) всё равно уводило бы
   блок действий на ВТОРУЮ строку, а публичная шапка ростом не отвечает:
   её высота прибита к 64 px (`.topbar-inner:not(.topbar-inner--authenticated)`),
   и вторая строка оказывалась ЗА шапкой, поверх страницы. Возвращаем блоку
   ширину по содержимому — переключатель встаёт справа от бренда. */
.topbar--capture .top-right {
  width: auto;
  margin-left: auto;
}
.capture-card .capture-doc {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;     /* длинное название документа не рвёт карточку на 320 px */
}
/* Кнопка съёмки — основное и единственное действие страницы: на телефоне
   она во всю ширину, чтобы попадать пальцем не глядя. */
.capture-card .capture-shoot {
  width: 100%;
}
@media (min-width: 560px) {
  .capture-card .capture-shoot {
    width: auto;
    min-width: 220px;
  }
}

/* ── Окно с QR на ПК ─────────────────────────────────────────────────────
   Подложка кода БЕЛАЯ В ОБЕИХ ТЕМАХ и задана не токеном — это не решение
   оформления, а требование читаемости: инвертированный (светлый по тёмному)
   QR распознаётся далеко не всеми камерами, а цена промаха — человек стоит
   с телефоном и код не берётся. Сам код сервер тоже рисует чёрным по белому
   (`capture_tokens.qr_svg`), здесь — только рамка вокруг тихой зоны. */
.capture-qr {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
/* Размер кода — ИЗМЕРЕННЫЙ, а не «на глаз» (проверка 21-09, zxing-cpp по
   снимку настоящей страницы в браузере): ссылка со сроком и 43-символьным
   токеном даёт версию 45×45 модулей, и при 240 px декодер её уже НЕ берёт, а
   при 264 px берёт уверенно. 280 px — тот же запас с округлением вверх.
   Уменьшать — только вместе с повторным замером. */
.capture-qr svg {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}
.capture-qr-steps {
  margin: 12px 0 0;
  padding-left: 20px;
}
.capture-qr-steps li + li {
  margin-top: 4px;
}
/* Ссылка-запасной путь под кодом: телефон без камеры или с отказавшим
   сканером — не тупик, адрес можно набрать руками. Ломаем по символам:
   токен длинный и одним словом вылезал бы за модал на 320 px. */
.capture-qr-url {
  overflow-wrap: anywhere;
  word-break: break-all;
}