/* Дополнения к макету (static/css/app.css — копия design/proto/app.css без правок).
 * Здесь только то, чего в прототипе нет: динамические состояния экранов ЛК,
 * которых не было на статичных кадрах (QR из API, поля кода, кнопка-выход в меню).
 */

/* Атрибут hidden должен побеждать display у флексов/гридов из app.css */
[hidden] { display: none !important; }

/* Поле 6-значного кода: моноширинные цифры, чтобы код читался по разрядам */
.input-code {
  max-width: 220px;
  letter-spacing: .35em;
  font-variant-numeric: tabular-nums;
}

/* QR-картинка из API (data:URI) в рамке .qr макета */
.qr img { width: 100%; height: 100%; display: block; border-radius: 11px; }

/* Секрет TOTP: та же рамка, что у ссылки приглашения, но моноширинный текст */
.secret-line { margin-top: 12px; }
.secret-line .invite-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  font-size: 14px;
  /* Секрет длиннее ссылки приглашения (39 знаков с пробелами) — переносим,
     иначе рамка макета обрезает хвост секрета */
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  height: auto;
  line-height: 22px;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Кнопка «Выход» в навигации — это submit внутри формы, а не ссылка */
.nav-form { display: flex; align-items: center; margin: 0; }
.nav-button {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: inherit;
}
.nav-button:disabled { color: var(--text-muted); }

/* Статус 2FA в карточке «Безопасность»: включённое состояние — акцентом.
   В макете badge-state без модификатора (там статичный «Выключена»), поэтому
   акцентный вариант живёт здесь, а не в app.css. */
.row-value.on { color: var(--accent-dark); font-weight: 500; }
.badge-state.on {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  color: var(--accent-dark);
}

/* Экран завершения (2FA включена, проверьте почту): отступ от заголовка */
#done .sub { margin-top: 0; }
#done .actions { margin-top: 16px; }

@media (max-width: 480px) {
  /* поле кода на мобильном — на всю ширину карточки, шрифт 16 против зума iOS */
  .input-code { max-width: none; }
  .secret-line { flex-wrap: wrap; row-gap: 8px; }
  .secret-line .btn { width: 100%; justify-content: center; }
}