/* Арка — слой Telegram Mini App поверх site.css (F8, ADR-012). Подключать последним:
     tokens.css → fonts.css → site.css → tg.css
   Цвета — только var(--color-*). Фон страницы — Известняк (ниже); тема Telegram задаёт только светлую или тёмную схему. Схема (светлая/тёмная) — data-theme от Telegram.
   Здесь — плотность под экран Telegram, безопасные зоны и главная кнопка. */

/* Страница мини-аппа — на Известняке (--color-bg), а не на bg-page: по бренду Свет кладём только на Известняк,
   на bg-page низ Света (#FFE2A8) темнее фона и освещённая карточка «гаснет» (решение CTO 16.10: кабинет держит фон
   бренда, тема Telegram — только светлая или тёмная). В тёмной теме bg и bg-page совпадают. */
body.tg { --color-bg-page: var(--color-bg); background: var(--color-bg); }

body.tg {
  /* Безопасные зоны: Telegram 8.0+ даёт свои переменные, иначе env() браузера. */
  padding:
    calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px))
    0
    calc(var(--tg-content-safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--space-8));
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100vh);
  -webkit-user-select: none; user-select: none;  /* как в нативном экране; поля и ссылка подписки выделяются */
}
body.tg input, body.tg textarea, body.tg .mono, body.tg .qr { -webkit-user-select: text; user-select: text; }

/* Экран Telegram и так узкий: поля 16, без лишнего воздуха сверху. */
.tg .container { padding: 0 var(--space-4); }
.tg h1 { margin-top: var(--space-4); }
.tg .card { padding: var(--space-4); }

.tg-header { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; font: 600 var(--type-body-size)/1 var(--font-sans); letter-spacing: var(--tracking-logo); }
.tg-header img { width: 24px; height: auto; }

/* Разделы: ровная полоса из четырёх ссылок во всю ширину, зона нажатия 48. */
.tg-nav .tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); margin: 0 0 var(--space-2); }
.tg-nav .tabs a { justify-content: center; width: 100%; padding: var(--space-2) var(--space-1); font-size: var(--type-body-sm-size); border-color: transparent; }
.tg-nav .tabs a:hover { border-color: var(--color-line-control); }

/* ОС: прокрутка вбок вместо переноса в три строки. */
.tg-os { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); padding: 0 var(--space-4) var(--space-1); scrollbar-width: none; }
.tg-os::-webkit-scrollbar { display: none; }
.tg-os a { white-space: nowrap; }

.tg .keys__count { font: 600 var(--type-body-size)/var(--line-height-tight) var(--font-sans); margin: 0 0 var(--space-2); }
.tg-until { margin: 0 0 var(--space-4); }
.tg-client { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); margin: var(--space-4) 0 0; }
.tg-client .btn--link { align-self: center; }
.tg-support { margin-top: var(--space-8); }
.tg-devices { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.tg-devices li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--color-line); }
.tg-devices li + li { margin-top: 0; }
.tg .plans form, .tg .plans button { width: 100%; }
.tg details { margin-top: var(--space-4); }
.tg-footer { margin-top: var(--space-12); font: var(--type-body-sm); }
.tg-boot { display: grid; place-items: center; min-height: 60vh; text-align: center; }

/* Главное действие переехало в MainButton Telegram (tg.js ставит класс) — на странице его не дублируем. */
.tg-has-main [data-main] { display: none; }

/* Арка — кабинет мини-аппа: компоненты, которых нет в site.css и tg.css (макеты Бренда v2, 16.10.2026).
   Влит одним блоком из drafts/brand/cabinet/cabinet.css (build.mjs выпускает только site.css и tg.css).
   Цвета — только существующие токены; новые пары для build/contrast.mjs — в drafts/brand/cabinet/README.md.
   Радиусы — 2 и 4 px, как во всём бренде: единственная кривая на экране — свод знака. */

/* ---------- Ширина: контент и нижняя панель — одна колонка 640 ---------- */
.tg .container--narrow { max-width: calc(640px + 2 * var(--space-4)); }

/* ---------- Нижняя навигация: пять вкладок, иконка над подписью ---------- */
:root { --arka-tabbar-h: 64px; }   /* --tg-* пишет telegram-web-app.js — своё имя, чтобы не перебил */
body.tg--tabs {
  padding-bottom: calc(var(--arka-tabbar-h) + var(--tg-content-safe-area-inset-bottom, 0px)
    + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + var(--space-8));
}
.tg-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--color-surface);
  border-top: var(--border-hairline) solid var(--color-line);
  padding-bottom: calc(var(--tg-content-safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}
.tg-tabbar ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
.tg-tabbar li, .tg-tabbar li + li { margin: 0; }
.tg-tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--arka-tabbar-h); padding: var(--space-2) 2px;
  color: var(--color-text-secondary); text-decoration: none;
  font: 500 var(--font-size-14)/1.15 var(--font-sans);   /* исключение из «≥ 17 px»: подпись под иконкой 24, пять вкладок в 360 px */
}
.tg-tabbar span { text-align: center; overflow-wrap: anywhere; }
.tg-tabbar a[aria-current="page"] { color: var(--color-text); font-weight: 600; }
.tg-tabbar a[aria-current="page"]::before {   /* активная вкладка — формой (полоса сверху), не только цветом */
  content: ""; position: absolute; top: 0; left: calc(50% - 16px); right: calc(50% - 16px); height: var(--space-1); background: var(--color-text);
}
.tg-tabbar a:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: -4px; }
.tg-tabbar .icon { width: var(--size-icon); height: var(--size-icon); color: currentColor; }
/* Открыта клавиатура — панель прячем, иначе на Android она закрывает поле. Без :has() класс ставит tg.js (focusin/focusout). */
body.tg--tabs:has(input:not([readonly]):focus, textarea:not([readonly]):focus) .tg-tabbar,
body.tg--typing .tg-tabbar { display: none; }

/* ---------- Знак в шапке главной: только малый знак, без живого текста ---------- */
.tg-header--mark { min-height: 48px; }

/* ---------- Заголовки карточек — h2 по смыслу, вид title ---------- */
.tg .card h2 { font: var(--type-title); letter-spacing: var(--type-title-tracking); }

/* ---------- Сколько осталось: подпись над числом, число моно, без секунд ---------- */
.tg-left-label { margin: 0 0 var(--space-1); color: var(--color-text-secondary); font: var(--type-body-sm); }
.tg-left { margin: 0; font: 500 var(--font-size-34)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }   /* исключение шкалы: моно 34 */
.tg-left__unit { font-size: var(--font-size-20); color: var(--color-text-secondary); }
.tg-left-until { margin: var(--space-1) 0 var(--space-4); color: var(--color-text-secondary); font: var(--type-body-sm); }

/* ---------- Факты «название — значение» в одну строку (.kv в 360 px складывается в колонку) ---------- */
.tg-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.tg-facts dt { margin: 0; color: var(--color-text-secondary); font: var(--type-body-sm); }
.tg-facts dd { margin: 0; text-align: right; font: var(--type-mono-data); white-space: nowrap; }
.tg-facts .tg-facts__total { padding-top: var(--space-2); border-top: var(--border-hairline) solid var(--color-line); color: var(--color-text); font-weight: 600; }

/* ---------- Плитки: две в ряд, ссылка или статичная цифра ---------- */
.tg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.tg-tile {
  position: relative; display: block; min-height: 112px; padding: var(--space-4);
  background: var(--color-surface); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-card);
  color: var(--color-text); text-decoration: none;
}
a.tg-tile:hover { border-color: var(--color-text); text-decoration: none; }
a.tg-tile:focus-visible { outline: var(--border-focus) solid var(--color-focus); outline-offset: 2px; }
a.tg-tile::after {   /* шеврон теми же рамками, что у .back и summary */
  content: ""; position: absolute; top: var(--space-4); right: var(--space-4); width: 8px; height: 8px;
  border-top: var(--border-stroke) solid var(--color-text-secondary); border-right: var(--border-stroke) solid var(--color-text-secondary);
  transform: rotate(45deg);
}
.tg-tile__name { margin: 0 0 var(--space-2); color: var(--color-text-secondary); font: 600 var(--type-body-sm-size)/1.2 var(--font-sans); }
.tg-tile__value { margin: 0; font: 700 clamp(var(--font-size-20), 7vw, var(--font-size-28))/1.1 var(--font-price); letter-spacing: var(--type-price-tracking); }
.tg-tile__value--count { font: 500 var(--font-size-28)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }   /* число, а не цена */
.tg-tile__meta { margin: var(--space-1) 0 0; color: var(--color-text-secondary); font: var(--type-body-sm); }

/* ---------- Список строк: ключи, история, друзья ---------- */
.tg-list { list-style: none; padding: 0; margin: 0; }
.tg-list li, .tg-list li + li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-3);
  margin: 0; padding: var(--space-3) 0; border-top: var(--border-hairline) solid var(--color-line);
}
.tg-list li:first-child { border-top: 0; padding-top: 0; }
.tg-list--plain li, .tg-list--plain li + li { grid-template-columns: minmax(0, 1fr) auto; }
.tg-list__icon { width: var(--size-icon); height: var(--size-icon); color: var(--color-text-secondary); }
.tg-list__title { margin: 0; font: 600 var(--type-body-size)/var(--line-height-tight) var(--font-sans); }
.tg-list__meta { margin: 2px 0 0; color: var(--color-text-secondary); font: var(--type-body-sm); }
.tg-list__value { margin: 0; font: var(--type-mono-data); white-space: nowrap; text-align: right; }
.tg-list .btn--link, .tg-list button.btn--link { min-height: var(--size-touch-min); padding: 0 var(--space-1); }

/* ---------- Переключатель: прямоугольный; выкл — бегунок контуром слева, вкл — заливка и бегунок справа ---------- */
.tg-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--size-touch-min); margin: 0 0 var(--space-2); font: 600 var(--type-body-size)/var(--line-height-tight) var(--font-sans); cursor: pointer; }
.tg-switch__input { position: absolute; opacity: 0; width: 56px; height: 32px; right: 0; margin: 0; cursor: pointer; }
.tg-switch__track { position: relative; flex: none; width: 56px; height: 32px; border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-stroke) var(--color-line-control); }
.tg-switch__thumb { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 var(--border-stroke) var(--color-line-control); transition: transform var(--motion-ui-fast) var(--ease-ui); }
.tg-switch__input:checked + .tg-switch__track { background: var(--color-action-primary-bg); box-shadow: none; }
.tg-switch__input:checked + .tg-switch__track .tg-switch__thumb { transform: translateX(24px); background: var(--color-action-primary-text); box-shadow: none; }
.tg-switch__input:focus-visible + .tg-switch__track { outline: var(--border-focus) solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tg-switch__thumb { transition: none; } }
@media (forced-colors: active) {
  .tg-switch__track, .tg-switch__thumb, .tg-tabbar a[aria-current="page"]::before { forced-color-adjust: none; }
  .tg-switch__thumb, .tg-tabbar a[aria-current="page"]::before { background: CanvasText; }
  .tg-switch__input:checked + .tg-switch__track { background: Highlight; }
}

/* ---------- Медь — только у своего ключа: на инвертированной основной кнопке клин цветом её текста ---------- */
.tg .btn:not(.btn--secondary):not(.btn--link) .icon,
.tg button:not(.btn--secondary):not(.btn--link) .icon { --arka-key: currentColor; }

/* ---------- Счётчик ключей: не больше пяти арок — занятые и одно пунктирное «ещё N» (без аркады) ---------- */
.keys__more { font: var(--type-body-sm); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

/* ---------- Выбор строкой: слова в подписи — Sofia Sans; выбранная строка — рамка 2 px и галочка ---------- */
.choice__meta--text { font: var(--type-body-sm); color: var(--color-text-secondary); }
.choice .icon--check { flex: none; color: var(--color-text); }
.choice a > span:first-child { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.choice .tg-list__meta { display: block; }
.tg-choice-end { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- Быстрые суммы пополнения — ровная строка из четырёх ---------- */
.tg-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-amounts li { min-width: 0; }
.tg-amounts a { display: flex; width: 100%; justify-content: center; padding: 0 var(--space-1); white-space: nowrap; }

/* ---------- Ссылки целиком: поле в две строки, моно, перенос где угодно ---------- */
.tg-linkbox textarea { display: block; width: 100%; min-height: 0; resize: none; font: var(--type-mono-data); overflow-wrap: anywhere; }
.tg-linkbox .actions { margin-top: var(--space-3); }

/* ---------- Мелочи ---------- */
.tg-sum { margin: 0 0 var(--space-2); }                     /* крупная сумма = .price */
.tg-hint { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font: var(--type-body-sm); }
.tg-hint--strong { color: var(--color-text); }               /* предупреждение со следствием — цветом текста */
.tg-step { margin: var(--space-4) 0 0; }                     /* «Шаг 1 из 2» — .label */
.tg-keys-block { margin: var(--space-4) 0 0; }
.tg-more { margin: var(--space-3) 0 0; text-align: center; }
.tg-more .btn--link { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
.tg .tg-tiles + .card, .tg .tg-tiles + .choice, .tg .card + .card, .tg .card + .choice, .tg .choice + .card, .tg .notice + .card { margin-top: var(--space-4); }
.tg-legal { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.tg-legal li, .tg-legal li + li { margin: 0; }
.tg-legal a { display: inline-block; min-height: var(--size-touch-min); padding: var(--space-3) 0; font: var(--type-body-sm); }
.tg .address { -webkit-user-select: text; user-select: text; }
.tg-hint + .tg-list { margin-top: var(--space-3); }

/* ---------- Подключение: мастер из трёх шагов (владелец 17.10; v2 после ревью) ---------- */
/* Где я: «Шаг 2 из 3 · iPhone или iPad» — обычным текстом, без капса (iPhone не превращается в IPHONE). */
.tg-step-line { margin: var(--space-4) 0 0; color: var(--color-text-secondary); font: var(--type-body-sm); }
.tg-step-line + h1 { margin-top: var(--space-1); }

/* Выбор строкой — ссылки .choice с aria-current, как тарифы. Выбрано: рамка цвета текста 2 px без сдвига строки и галочка. */
.tg-pick a[aria-current="true"] { border: var(--border-hairline) solid var(--color-text); box-shadow: inset 0 0 0 var(--border-hairline) var(--color-text); }
.tg-pick a > span:first-child { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.tg-pick .tg-list__meta { display: block; }
.tg .tg-hint + .choice { margin-top: var(--space-3); }

/* Рекомендуемое приложение: плашка, имя, «Бесплатно · App Store»; кнопка магазина — во всю ширину под ними. */
.tg-store__head { display: flex; align-items: center; gap: var(--space-4); }
.tg-store__head h2 { margin: 0; }
.tg-store__head .label { margin: 0 0 var(--space-1); }
.tg-store__head .tg-hint { margin-top: var(--space-1); }
.tg-store .actions { margin-top: var(--space-4); }
/* Нейтральная плашка вместо иконки приложения: лицензии на иконки INCY, Happ и др. не проверены (CTO 17.10). */
.tg-plate {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  background: var(--color-bg); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-control);
  color: var(--color-text); font: 500 var(--font-size-17)/1 var(--font-mono);
}
.tg-have, .tg-howto { margin-top: var(--space-4); }
.tg-have .choice { margin-bottom: var(--space-2); }

/* «Ключ готов» — заголовок h2 в виде метки, с медным ключом: медь — только у ключа. */
.tg .card--lit h2.label { margin: 0 0 var(--space-2); font: var(--type-mono-label); letter-spacing: var(--type-mono-label-tracking); }
.tg-label-key { display: flex; align-items: center; gap: var(--space-2); }
.tg-label-key .icon { width: var(--size-icon); height: var(--size-icon); color: var(--color-text-on-lit); }

/* Ссылка целиком, моно; отступы — только внутри мастера (общий .card .actions не трогаем). */
.tg-link { display: block; width: 100%; min-height: 0; height: auto; margin-top: var(--space-3); resize: none; font: var(--type-mono-data); overflow-wrap: anywhere; }
.tg-manual .actions { margin-top: var(--space-3); }
.tg details .steps { margin: var(--space-2) 0 0; }
.tg .tg-howto + .card, .tg .card + .tg-howto { margin-top: var(--space-4); }

/* Видео «три шага»: свой файл /brand/video/<ос>.mp4 с постером, плеер — встроенный, без автозапуска. */
.tg-video-card__title { margin: 0 0 var(--space-3); font: 600 var(--type-body-size)/var(--line-height-tight) var(--font-sans); }
.tg-video-card video { display: block; width: 100%; max-width: 260px; margin: 0 auto; aspect-ratio: 9 / 16; object-fit: contain;
  background: var(--color-bg); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-control); }

/* ---- Веб без Telegram (/w*, B55): те же компоненты в обычном браузере, body.tg.w ---- */
.w .tg-main h2 { margin-top: var(--space-8); }
.w .tg-main .card h2 { margin-top: 0; }
.w-home { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.w-offer { font-weight: var(--font-weight-semibold); }
/* Номер аккаунта: крупно, моно, группами по 4; переносится только между группами. */
.w-number {
  margin: var(--space-4) 0; padding: var(--space-4); border: var(--border-hairline) solid var(--color-line); border-radius: var(--radius-card);
  background: var(--color-surface); font: 600 clamp(28px, 9vw, 40px)/1.3 var(--font-mono); letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; user-select: all;
}
.w-number span { display: inline-block; white-space: nowrap; }
/* «Номер сохранён»: чекбокс-цель ≥ 44 px; кнопка оплаты выглядит неактивной, пока галочки нет (без JS — required). */
.w-check { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; margin: var(--space-6) 0 var(--space-3); font-weight: var(--font-weight-semibold); cursor: pointer; }
.w-check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--color-text); }
.w-gate:has(input[name="saved"]:not(:checked)) button[type="submit"] {
  background: var(--color-action-disabled-bg); color: var(--color-action-disabled-text); border-color: var(--color-action-disabled-border);
}
/* Поле-ловушка для ботов: вне экрана, не display:none (некоторые боты такие поля пропускают). */
.w-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.w-qr { max-width: 240px; margin: var(--space-3) auto; padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-control); }
.w-qr svg { display: block; width: 100%; height: auto; }
.w-others { margin-top: var(--space-6); }
.w-others .choice { margin-top: var(--space-3); }