/* Telegram Mini App shell adjustments. Every selector is scoped so the
   browser cabinet keeps the existing shared app.css layout unchanged. */
html.tg-shell {
  /* Начальные значения до запуска miniapp-shell.js. Высота ряда кнопок здесь
     НЕ ноль: иначе первые кадры контент стоял бы под кнопками Telegram.
     56 обязано совпадать с FALLBACK_CHROME_TOP в miniapp-shell.js. */
  --tg-shell-device-top: 0px;
  --tg-shell-chrome-top: 56px;
  --tg-shell-safe-top: 56px;
}

html.tg-shell body {
  /* 2026-08-14: отступ это ВСТАВКА УСТРОЙСТВА плюс ВЫСОТА ШАПКИ Telegram, две
     разные величины. Раньше стоял max() по ним, и одна отбрасывалась целиком:
     не хватало ровно ряда кнопок «Закрыть» и «...».
     Запас на случай, когда клиент отдал нули, выбирает JS, а не max() здесь.
     max() как пол давал ошибку в другую сторону: при честных 46px он возвращал
     56 и полоса перекрывала начало контента на 10px.
     env() остаётся только для вставки устройства: её JS может получить нулём,
     а браузер знает точно. */
  padding-top: calc(
    max(var(--tg-shell-device-top, 0px), env(safe-area-inset-top, 0px))
    + var(--tg-shell-chrome-top, 56px)
  );
}

/* Внутри Telegram собственная шапка страницы дублирует ряд кнопок клиента и
   отжимала весь экран вниз. Вместо неё в тот же ряд встаёт одна компактная
   полоса (см. miniapp-shell.js). Логотип и переключатель языка не нужны:
   контур один и русский. */
html.tg-shell .appbar {
  display: none;
}

/* Ссылки, ведущие ИЗ мини-аппа: «Смотреть все маршруты» и разделы бокового
   меню уходят на публичные страницы, где кнопки возврата в кабинет нет, и
   человек оказывается в тупике. Владелец 14.08 потребовал убрать. */
html.tg-shell .backlink,
html.tg-shell .drawer-nav {
  display: none;
}

/* Полоса управления в ряду кнопок Telegram. Слева клиент рисует «Закрыть» или
   «Назад», справа свои две, свободна только середина, поэтому полоса
   центрируется и намеренно узкая. pointer-events снят с контейнера, чтобы
   промах мимо элемента доставался кнопкам клиента, а не проваливался в пустоту. */
html.tg-shell .tg-shell-band {
  position: fixed;
  top: max(var(--tg-shell-device-top, 0px), env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  height: var(--tg-shell-chrome-top, 56px);
  max-width: calc(100vw - 240px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}

html.tg-shell .tg-shell-band__pill,
html.tg-shell .tg-shell-band__title {
  pointer-events: auto;
  max-width: 100%;
  overflow: hidden;
  /* Токен текста в этом проекте называется --fg. Первая редакция брала
     var(--ink), а такого токена в app.css НЕТ (0 совпадений), поэтому браузер
     подставлял запасной почти чёрный: на светлой теме это случайно совпало с
     верным, а на тёмной подпись стала невидимой. Владелец увидел 14.08. */
  color: var(--fg, #221D16);
  font: 800 15px/1.1 Manrope, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Подпись библиотеки печатается в две строки: одной строкой «Личный кабинет»
   в свободную середину ряда не влезает. Разрыв приходит из текста символом
   перевода строки, поэтому его место не зависит от ширины экрана.
   Кегль крупнее пилюли по просьбе владельца, но 2 × 16 × 1.05 = 33.6px, и это
   с запасом влезает в ряд: у клиента он 46px, а без его величин запас 56px. */
html.tg-shell .tg-shell-band__title {
  font-size: 16px;
  line-height: 1.05;
  text-align: center;
  text-overflow: clip;
  white-space: pre-line;
}

/* Заголовки на самих страницах дублировали подпись в полосе, оставляем только
   полосу. #pageTitle это «Мои гиды» в библиотеке, #guideTitle это название
   гида на его странице.
   #pageDesc («Здесь хранятся аудиогиды, которые вы приобрели…») убран по
   решению владельца 14.08: попав в кабинет, человек и так видит две вкладки,
   объяснять их отдельной строкой нечего. Он есть только в библиотеке.
   Тексты в разметке остаются на месте, поэтому полоса по-прежнему читает из
   #guideTitle название гида. */
html.tg-shell #pageTitle,
html.tg-shell #guideTitle,
html.tg-shell #pageDesc {
  display: none;
}

html.tg-shell .tg-shell-band__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--border, #DDD2C0);
  border-radius: 999px;
  background: var(--card, #fff);
  box-shadow: 0 2px 8px rgba(34, 29, 22, .10);
  cursor: pointer;
}

html.tg-shell .tg-shell-band__pill svg {
  flex: none;
  width: 18px;
  height: 18px;
}

html.tg-shell .tg-shell-band__pill:focus-visible {
  outline: 2px solid #C8830C;
  outline-offset: 2px;
}