/* ============================================================================
   АДАПТИВ: правки под узкие и широкие экраны.

   Подключается ПОСЛЕДНИМ из стилей — именно поэтому здесь можно поправить то,
   что задано в app.css / concept-scoped.css / design-concept/*.css, не поднимая
   специфичность искусственно и не трогая исходные файлы.

   Что тут можно, а что нельзя:
   - МОЖНО: размеры зон нажатия, переносы текста, переполнение, сетки на краях.
   - НЕЛЬЗЯ: менять внешний вид (цвета, скругления, тени). Это не файл редизайна.

   Каждый блок помечен, ЧТО он лечит и КАК это было замерено, — чтобы правку
   не откатили как «непонятную».
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. ЗОНЫ НАЖАТИЯ НА МОБИЛЬНОМ

   Замер (390x844): стрелки карусели карт 28x28, точки 7x7, аватар 36x36,
   вкладки нейросетей 40px по высоте, текстовые кнопки 31-33px.
   Ориентир: 44pt на iOS, 48dp на Android. Ниже 44 палец промахивается.

   Приём: увеличиваем ЗОНУ, а не рисунок. Где можно — через padding с
   background-clip:content-box, чтобы визуально ничего не поехало.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Стрелки карусели — основной способ переключить карту, были 28x28 */
  .cabinet-layout.gc2 .overview-card-arrow {
    width: 44px; height: 44px; min-width: 44px;
  }
  .cabinet-layout.gc2 .overview-card-arrow svg { width: 15px; height: 15px; }

  /* Точка-индикатор: зона нажатия 44px по высоте, а НА ВИД — прежние 7px.
     Сама кнопка делается прозрачной, точку рисует псевдоэлемент по центру.

     Через background-clip:content-box это не работает: скругление считается от
     внешней рамки, а красится внутренняя область — активная точка превращалась
     в большое пятно, неактивная в квадратик (видно на скриншоте 390px). */
  .cabinet-layout.gc2 .overview-card-dot {
    box-sizing: border-box;
    position: relative;
    height: 44px; min-height: 44px;
    /* Ширина 24px — минимум по WCAG 2.5.8 для размера цели. По 44px в ширину
       делать нельзя: лента с пятью картами перестанет помещаться между
       стрелками. Высота при этом полные 44px, промахнуться сложно. */
    width: 24px; min-width: 24px;
    padding: 0;
    background: transparent;
  }
  .cabinet-layout.gc2 .overview-card-dot::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 7px; height: 7px;
    border-radius: 99px;
    background: #d9d2df;
    transition: width .18s ease, background .18s ease;
  }
  .cabinet-layout.gc2 .overview-card-dot.is-active {
    width: 32px; min-width: 32px;
    background: transparent;
  }
  .cabinet-layout.gc2 .overview-card-dot.is-active::before {
    width: 18px;
    background: var(--purple);
  }
  /* Строка селектора подросла из-за кнопок 44px — компенсируем отступ,
     чтобы карта не уехала вниз относительно исходного макета. */
  .cabinet-layout.gc2 .overview-card-selector {
    min-height: 44px; margin: -12px 0 4px;
  }

  /* Шапка: аватар и логотип */
  .cabinet-layout.gc2 .mobile-avatar {
    width: 44px; height: 44px; min-width: 44px;
  }
  .cabinet-layout.gc2 .mobile-brand { min-height: 44px; }

  /* Текстовые кнопки («Все операции», «Скрыть») — были 31-33px по высоте */
  .cabinet-layout.gc2 .icon-text-button,
  .cabinet-layout.gc2 .text-button {
    min-height: 44px;
    padding-top: 8px; padding-bottom: 8px;
  }

  /* Нейросети: лента инструментов, режимы, выбор движка и подсказки.
     Класс именно .ai-rail-i (не .ai-rail-item) — проверено по разметке. */
  /* .cabinet-layout.gc2 обязателен: cabinet-system.css задаёт здесь min-height:40px
     с такой же специфичностью, и без префикса правило проигрывает. */
  .cabinet-layout.gc2 .ai-rail-i { min-height: 44px; }
  .ai-mode { min-height: 44px; }
  .ai-engine-btn { min-height: 44px; }
  .ai-tip { min-height: 44px; }

  /* eSIM: быстрый выбор страны, ссылка «Все страны», крестик поиска, вкладки iPhone/Android */
  .esim-hero__quick button { min-height: 44px; }
  .esim-text-button { min-height: 44px; }
  .esim-search button { width: 44px; height: 44px; min-width: 44px; }
  .esim-install-tabs button { min-height: 44px; }

  /* Карты: ссылка истории и кнопка закрытия карты */
  .hist-head .link-btn,
  .cabinet-layout.gc2 .link-btn { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  /* Тот же случай: card-flow.css задаёт min-height:40px через .card-flow-root. */
  .cabinet-layout.gc2 .card-flow-root .card-danger-zone button { min-height: 44px; }

  /* Промокоды: кнопка «Использовать» была 24px по высоте */
  .promo-use { min-height: 44px; }

  /* ── Замер 25.08.2026, 320-430px. Найдено сплошным обходом всех вкладок ──

     Библиотека нейросетей: там управляют готовыми работами, и мимо этих
     кнопок промахиваются чаще всего — их много и стоят они плотно.
       фильтры ленты          58×40
       кнопка плеера          38×38
       ползунок перемотки     108×25
       действия карточки      102×34.8 и 129×34.8 («Повторить»)

     Высоту задаём min-height, рисунок не трогаем: у .ai-player-btn размер
     нужен в обе стороны, это круглая иконка. */
  .cabinet-layout.gc2 .ai-filter { min-height: 44px; }
  .cabinet-layout.gc2 .ai-player-btn { width: 44px; height: 44px; min-width: 44px; }
  .cabinet-layout.gc2 .ai-wave-range { min-height: 44px; }
  .cabinet-layout.gc2 .ai-gact { min-height: 44px; }

  /* Рефералы: иконка в шапке 40x40, копирование кода 42x42, «Скопировать» 42 по высоте. */
  .cabinet-layout.gc2 .ref2-icbtn { width: 44px; height: 44px; min-width: 44px; }
  .cabinet-layout.gc2 .ref-code-value button { width: 44px; height: 44px; min-width: 44px; }
  .cabinet-layout.gc2 .ref-link-row button { min-height: 44px; }

  /* Экран входа. Его видит КАЖДЫЙ новый клиент, а сюда правки не доходили:
     форма живёт в app.html вне .cabinet-layout, поэтому и префикса тут нет.
       крестик закрытия       32x32
       «Вернуться на главную» 132x16.5
       логотип-ссылка         134x40  */
  .auth-close { width: 44px; height: 44px; min-width: 44px; }
  .auth-back-link { min-height: 44px; }
  .auth-brand { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   2. ОБРЕЗАННЫЙ ТЕКСТ НА УЗКИХ ЭКРАНАХ

   Замер (320x568): «Пополнение по СБП» теряло 43px из 149 — клиент видел
   «Пополнение по…»; «Пополнение сервисов» теряло 21px; дата операции
   «22 авг., 01:11 · Карта •••• 7589» теряла 4-10px.

   Приём: на узких экранах разрешаем ДВЕ строки вместо многоточия. Две строки
   честнее обрезки: название операции — это то, ради чего клиент смотрит список.
   Ограничение в 2 строки оставляем, чтобы строка не разъезжалась бесконечно.
   ------------------------------------------------------------------------- */
/* Перенос в две строки вместо обрезки — БЕЗ ограничения по ширине.
   Правило само по себе ничего не меняет, пока текст помещается: клип
   срабатывает только при реальном переполнении. Ограничение по ширине здесь
   было ошибкой — на планшете 768px колонка операций узкая из-за боковой
   панели, и дата теряла до 36px, оставаясь за многоточием. */
.cabinet-layout.gc2 .transaction b,
.cabinet-layout.gc2 .transaction small,
.cabinet-layout.gc2 .sv2-tile-meta small,
.hrow-title,
.cabinet-layout.gc2 .hrow-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cabinet-layout.gc2 .transaction small { line-height: 1.35; }

/* Подпись работы в библиотеке нейросетей — это ТЕКСТ, который набрал сам
   клиент. Перенос по словам там уже включён, но одно длинное слово переносить
   некуда, и оно вылезает за карточку: замер на 390px показал 11px и 22px у двух
   подписей из 56 (в базе это «кафееееееееееееееееее», в жизни так ведёт себя
   любая вставленная ссылка). overflow-wrap: anywhere разрешает разорвать такое
   слово — единственная альтернатива обрезке. */
.cabinet-layout.gc2 .ai-gprompt { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   3. СЛИШКОМ МЕЛКИЙ ТЕКСТ НА МОБИЛЬНОМ

   Замер (390x844): надписи-рубрикаторы 8px («АКТИВНЫЕ КАРТЫ»), пояснения 9px
   («Баланс 50.00 USD»). На телефоне это нижний предел разборчивости, особенно
   разряженным прописным начертанием.

   Поднимаем ТОЛЬКО самые мелкие, до 10-11px. Крупнее не делаем: иначе поедет
   композиция плиток, ради которой эти размеры и выбирали.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Подпись плитки: 10px вместо 8px. ПОБОЧНЫЙ ЭФФЕКТ, который пришлось лечить —
     на 10px «Бонусы за пополнение» перестало помещаться в одну строку, плитка
     съезжала на 15px относительно соседней, и числа переставали стоять на одной
     линии (видно на снимке 390px). Резервируем под подпись две строки: теперь
     числа выровнены независимо от длины подписи. */
  .cabinet-layout.gc2 .stat-card > span {
    font-size: 10px;
    min-height: 3em;   /* две строки при межстрочном 1.5 */
  }
  .cabinet-layout.gc2 .stat-card > small { font-size: 11px; }
  .cabinet-layout.gc2 .section-kicker { font-size: 10px; }
  .cabinet-layout.gc2 .balance-row span { font-size: 11px; }
  .cabinet-layout.gc2 .balance-row small { font-size: 11px; }
  .cabinet-layout.gc2 .transaction small { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
   4. ТЕКСТ МЕЛЬЧЕ 10px НА МОБИЛЬНОМ

   Замер (320x568, только реально достижимые элементы): подпись «Ещё» в нижней
   панели — 7px; рубрикаторы и статусы — 8-9px. Это ниже практического порога
   разборчивости на телефоне.

   Поднимаем до 10-11px. Выше не идём: эти надписи набраны прописными в разрядку,
   и увеличение сильнее ломает композицию плиток.

   СОЗНАТЕЛЬНО НЕ ТРОГАЕМ: текст внутри .issue-plan-art — это миниатюра карты,
   где мелкий шрифт имитирует настоящую карту и является рисунком, а не надписью.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Нижняя навигация: подписи были 7px */
  .cabinet-layout.gc2 .mobile-more-trigger { font-size: 10px; }
  .cabinet-layout.gc2 .mobile-nav-link { font-size: 10px; }

  /* Рубрикаторы и статусы: были 8-9px */
  .cabinet-layout.gc2 .page-head .eyebrow,
  .cabinet-layout.gc2 .esim-page-head .eyebrow,
  .cabinet-layout.gc2 .cards-workspace__eyebrow,
  .cabinet-layout.gc2 .cards-workspace__status,
  .cabinet-layout.gc2 .card-danger-zone > div > span,
  .cabinet-layout.gc2 .additional-card-offer__head > div > span,
  /* .esim-flow-root нужен: typography.css задаёт размер через :is() с этим
     префиксом, и без него правило проигрывает по специфичности. */
  .cabinet-layout.gc2 .esim-flow-root .esim-install-tip b { font-size: 10px; }

  /* Подписи на лицевой стороне карты: «Баланс» был 8px, имя держателя 9.28px */
  .cabinet-layout.gc2 .lkcard__bal-label,
  .cabinet-layout.gc2 .lkcard__bottom span { font-size: 10px; }

  /* Поясняющая строка предложения второй карты — это фраза, её читают */
  .cabinet-layout.gc2 .additional-card-offer__head aside small { font-size: 11px; }
}

/* ---------------------------------------------------------------------------
   5. МОБИЛЬНАЯ ТИПОГРАФИЧЕСКАЯ ШКАЛА: поднимаем самую мелкую ступень

   В design-concept/typography.css:237 задана осознанная мобильная шкала —
   body 12 / control 11 / caption 10 / micro 9. Тремя верхними ступенями всё в
   порядке, а micro в 9px остаётся ниже практического порога чтения на телефоне.

   Поднимаем ТОЛЬКО micro, 9 → 10. Один токен вместо десятка точечных правок:
   так подтягиваются сразу рубрикаторы, статусы и подписи, и шкала остаётся
   согласованной (10/10/11/12 вместо 9/10/11/12).
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cabinet-layout.gc2 { --gc-type-micro-readable: 10px; }

  /* Плашки тарифов при выпуске карты были 8px — это подписи, их читают.
     .issue-plan-art намеренно НЕ включён: там текст изображает саму карту. */
  .cabinet-layout.gc2 .card-flow-root .issue-plan-mini__copy small,
  .cabinet-layout.gc2 .card-flow-root .issue-plan-mini__copy em,
  .cabinet-layout.gc2 .card-flow-root .issue-plan-mini__copy i,
  .cabinet-layout.gc2 .card-flow-root .issue-plan-picker__selection small { font-size: 10px; }
}

/* ---------------------------------------------------------------------------
   6. РАЗМЕРЫ, ЗАДАННЫЕ МИМО ДИЗАЙН-СИСТЕМЫ

   В блоке «Дополнительная карта» размеры прописаны числом (9px), а не токеном,
   поэтому они не подхватывают ни мобильную шкалу, ни десктопную. Замер на 768px
   показал 9px там, где по шкале должно быть 11px.

   Привязываем к токену: на десктопе станет 11px, на мобильном — 10px (см. п.5).
   ------------------------------------------------------------------------- */
.cabinet-layout.gc2 .card-flow-root .additional-card-offer__head > div > span,
.cabinet-layout.gc2 .card-flow-root .additional-card-offer__head aside small {
  font-size: var(--gc-type-micro-readable);
}

/* ---------------------------------------------------------------------------
   7. ПОЧТА В КАРТОЧКЕ ПРОФИЛЯ (боковая панель, десктоп)

   Замер на 1920px: под адрес остаётся 89px, а «probe@example.com» требует 123 —
   клиент видит «probe@example…» даже на огромном экране, потому что ширина
   панели фиксированная (244px), а внутри карточки её делят аватар (34), стрелка
   (14) и отступы.

   Отыгрываем место: убираем декоративную стрелку (карточка и так очевидно
   кликабельна — аватар плюс имя) и поджимаем отступы. Типовой адрес помещается.
   Длинные адреса по-прежнему уходят в многоточие — это нормально для узкой
   панели, полный адрес виден в разделе «Профиль».
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .cabinet-layout.gc2 .cabinet-account .profile-card { padding-left: 8px; padding-right: 8px; gap: 8px; }
  .cabinet-layout.gc2 .cabinet-account .profile-card > svg { display: none; }
  /* Размер этих подписей НЕ трогаем. typography.css форсирует им 12px через
     !important в @media (min-width: 768px) — это осознанная правка в пользу
     читаемости, и перебивать её своим !important было бы борьбой с чужим
     решением, а не адаптивом. Поэтому длинный адрес по-прежнему уходит в
     многоточие: это сознательный размен «читаемо, но не целиком» вместо
     «целиком, но мелко». Полный адрес доступен в разделе «Профиль».
     Отыгранные выше отступы дали +23px (89 → 112), и типовые короткие адреса
     теперь помещаются целиком. */
}

/* ---------------------------------------------------------------------------
   8. ОСТАЛЬНЫЕ СТРАНИЦЫ: история, профиль, выпуск

   Замер на 390px по каждой странице отдельно (у них свои разделы вне app.html).
   Вёрстка везде чистая — ни переполнения, ни горизонтального скролла. Ниже
   только зоны нажатия и один размер шрифта.

   СОЗНАТЕЛЬНО НЕ ТРОГАЕМ хлебные крошки и кнопку возврата (40 и 42px): их
   мобильная высота задана намеренно и закреплена тестом
   backend/cabinet-navigation-ui.test.js. Поднять их до 44 — значит съесть
   вертикаль на маленьком экране ради двух пикселей; размен невыгодный.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* История: переключатель типа операций был 36px — это основной фильтр страницы */
  .history-flow-root .history-type-tabs button { min-height: 44px; }

  /* Профиль: ссылка на поддержку была строчной, высотой 18px */
  #tab-profile p a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Выпуск: кнопка проверки промокода и копирование предложения */
  .pp-check { min-height: 44px; }
  .pp-offer__copy { min-width: 44px; min-height: 44px; }
}

/* Профиль: строка карты в списке была 9px мимо шкалы — привязываем к токену
   (10px на мобильном, 11px на десктопе). */
.gc2 .info-list .info-row small { font-size: var(--gc-type-micro-readable, 11px); }

/* Бейдж статуса («Активна», «В обработке») набран 9px мимо шкалы — к токену. */
.gc2 .status-badge { font-size: var(--gc-type-micro-readable, 11px); }


/* ---------------------------------------------------------------------------
   9. ЗАКРЫВАЮЩИЕ КРЕСТИКИ В ШТОРКАХ И ПАНЕЛЯХ

   Статичный обход страницы их не видит: шторка «Ещё» и панель поддержки закрыты
   и вынесены за экран. Найдено проверкой ОТКРЫТОГО состояния через Playwright —
   крестики 38x38.

   Закрыть шторку клиент должен с первого раза: промах по крестику на телефоне
   раздражает сильнее, чем промах по любой другой кнопке.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .mobile-more-head > button { width: 44px; height: 44px; }
  .gc-support-root .gc-close { width: 44px; height: 44px; min-width: 44px; }
}

/* Все закрывающие кнопки модальных окон — единым списком. Проверка открытых
   состояний через Playwright показала 36x36 у .bonus-x; остальные собраны по
   стилям, чтобы не ловить их поштучно по мере всплытия. */
@media (max-width: 767px) {
  .bonus-x, .co-x, .modal-x, .modal-close, .notice-x, .rw-x,
  .lkclose, .guide-close, .instruction-close, .gc-handoff-close {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   10. ДВЕ ПОЛОМКИ, НАЙДЕННЫЕ РАЗБОРОМ СКРИНШОТОВ И ПОДТВЕРЖДЁННЫЕ ЗАМЕРОМ

   10.1 Быстрые действия под картой на узком экране.
   Замер 320px: подписи шире своих кнопок — «Пополнить» на 8px, «Реквизиты» на
   9px, «Копировать реквизиты» на 7px. Перенести их нельзя, это одно слово, а в
   четырёх колонках на 320px каждая кнопка получает около 65px.
   Решение: на узких экранах раскладываем четыре действия в две колонки по две
   строки. Кнопка получает ~140px, подписи помещаются целиком.
   На 390px четыре колонки помещаются, там ничего не меняем.

   10.2 Наложение текста в миниатюре тарифа.
   Замер: миниатюра 51.5px высотой, номер «•••• 7788» заканчивается на 37.7px,
   а подпись «для подписок» начинается на 33.5px — наложение 4.2px, обе строки
   нечитаемы. Причина не в размере шрифта самого по себе, а в межстрочном: при
   8px строка занимает 12px, и три строки в 51.5px не помещаются.
   Решение: межстрочный 1 вместо 1.5 у двух нижних строк. Размер шрифта не
   трогаем — он поднят до 8px намеренно, ради читаемости.
   ------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .cabinet-layout.gc2 .quick-actions--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cabinet-layout.gc2 .card-flow-root .issue-plan-art em,
.cabinet-layout.gc2 .card-flow-root .issue-plan-art small {
  line-height: 1;
}
/* На 320px после правки оставался зазор всего 1px — слишком тонко, чтобы
   зависеть от того, как конкретный телефон отрисует шрифт. Поднимаем строку с
   номером чуть выше середины: запас становится около 3px на всех узких ширинах. */
@media (max-width: 380px) {
  .cabinet-layout.gc2 .card-flow-root .issue-plan-art em { top: 44%; }
}

/* ---------------------------------------------------------------------------
   11. ПЛАНШЕТНАЯ ПОЛОСА 768-1100px

   Разбор снимков планшета вскрыл, в том числе, мою же недоработку: правку
   выравнивания плиток я ограничил шириной до 767px, а ровно на 768 начинается
   десктопная раскладка — и всё возвращалось. Замер на 768: числа плиток стоят
   на 52 / 70 / 52 пикселях от верха.

   11.1 Выравнивание плиток сводки — резерв под две строки распространяем на всю
   полосу, где подпись «Бонусы за пополнение» ещё переносится. На 1200+ она
   помещается в строку, там резерв не нужен и только создавал бы пустоту.
   ------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .cabinet-layout.gc2 .stat-card > span { min-height: 3em; }
}
/* Сброс резерва у третьей плитки — ТОЛЬКО на телефоне. Там она идёт во всю
   ширину отдельной строкой и ни с чем не выравнивается, поэтому резерв под
   вторую строку создавал бы пустой зазор. На планшете все три плитки стоят в
   одном ряду, и без резерва «200+» вставало выше соседей (видно на снимке 768). */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .stat-card:nth-child(3) > span { min-height: 0; }
}

/* 11.2 Быстрые действия под картой. На планшете «Обзор» становится двухколоночным,
   панель карты ужимается примерно до 290px, и четыре подписи снова не помещаются
   (замер 768: «Пополнить» шире своей кнопки на 9px, «Реквизиты» на 10, «Копировать
   реквизиты» на 8). Та же болезнь, что на 320px, и то же лечение — две колонки. */
@media (min-width: 768px) and (max-width: 1099px) {
  .cabinet-layout.gc2 .quick-actions--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 11.3 Карточки промокодов. Заголовок «Скидка 7% на покупку сервисов» длиннее
   соседнего и переносится на две строки — из-за этого низ карточки (код, срок,
   кнопка «Использовать») съезжал на 27px относительно соседней карточки при
   одинаковой внешней высоте.
   Лечим не подгонкой заголовка, а раскладкой: карточка становится колонкой, а
   подвал прижимается к низу. Тогда подвалы стоят на одной линии при любой длине
   заголовка — и на планшете, и на любой другой ширине. */
.promo-card { display: flex; flex-direction: column; }
.promo-card-foot { margin-top: auto; padding-top: 13px; }

/* 11.4 Видеоинструкция eSIM. Замер на 768: блок 594x1056 — ВЫШЕ всего экрана
   (1024px), клиент листает целый экран мимо одного видео. Причина: на планшете
   две колонки схлопнулись в одну, а ограничения высоты у вертикального видео
   9:16 не было. Ограничиваем высотой экрана. */
/* Правильный адрес блока — .esim-install-preview__media (первая попытка целилась
   в .esim-install-video, такого узла на экране нет). */
.cabinet-layout.gc2 .esim-flow-root .esim-install-preview__media {
  max-height: 72vh;
}
.cabinet-layout.gc2 .esim-flow-root .esim-install-preview__media > video,
.cabinet-layout.gc2 .esim-flow-root .esim-install-preview__media > img {
  max-height: 72vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  display: block;
}

/* ---------------------------------------------------------------------------
   12. ДЕСКТОП: ДВЕ ПОДТВЕРЖДЁННЫЕ ПОМЕХИ

   12.1 Плавающая кнопка выпуска накрывает панель промокода.
   Замер на 1440: кнопка .cta-sticky закреплена внизу (высота 54px, отступ 24px),
   а у контейнера #tab-issue нижнего отступа нет вовсе — в момент, когда клиент
   доходит до конца страницы, кнопка ложится поверх заголовка «Промокод» и самого
   поля ввода. То есть закрывает собой то, что нужно заполнить.
   Резервируем снизу место под кнопку: 54 + 24 + запас.
   ------------------------------------------------------------------------- */
#tab-issue { padding-bottom: 104px; }

/* 12.2 Строки профиля растянуты на всю ширину экрана.
   Замер на 1440: строка шириной 1060px, между подписью «Электронная почта» и
   значением 955px пустоты. Глазами связать одно с другим тяжело — взгляд теряет
   строку на полпути.
   Ограничиваем ширину списка. Это не «сузить ради красоты»: комфортная длина
   строки — та, которую глаз проходит без потери места. */
@media (min-width: 1000px) {
  .gc2 .info-list { max-width: 720px; }
}

/* ---------------------------------------------------------------------------
   13. РАЗДЕЛ «ОПЛАТА СЕРВИСОВ» И ПЛИТКА ВЫПУСКА

   Этот раздел живёт в собственной области стилей (services-flow), поэтому в
   предыдущие правки он не попал. Замер на 320-600px:
   - чипы сумм пополнения (1 000 / 3 000 / 5 000 / 10 000) — 42px по высоте;
   - поле промокода — 18px, в него практически невозможно попасть пальцем;
   - кнопка «Применить» — 36px;
   - кнопки «Весь каталог» и «Открыть раздел» в шапках секций — 42px;
   - надзаголовки секций («Три шага», «Помощь», «Почему Aifory Pro») — 9px.
   ------------------------------------------------------------------------- */
/* Нижняя граница для МЫШИ — 24px по WCAG 2.5.8 AA. Стоит вне медиазапроса и
   ДО мобильного блока: там те же селекторы поднимают планку до 44px, и правило
   ниже по файлу побеждает при равной специфичности.

   Замер на 768 и 1024: поле промокода 322x21, переключатель «Есть промокод»
   110.5x19.5. Мобильную планку сюда тащить нельзя — на десктопе это раздуло бы
   форму, а 24px хватает: там указатель, а не палец. */
.cabinet-layout.gc2 .services-flow-root .eb-promo input { min-height: 24px; }
.cabinet-layout.gc2 .services-flow-root .svc-steam-promo summary { min-height: 24px; }

/* Карточка товара — ОТДЕЛЬНЫЙ scope. Модалка выносится в body:
   body > .rw-overlay > .eb.svc-product-dialog, то есть вне .cabinet-layout и
   вне .services-flow-root, и правила выше её не достают. Так же устроен
   .svc-product-dialog в typography.css. Замер на 375px: поле промокода 171.5x21,
   переключатель «Добавить промокод» 125.6x16.5. */
.svc-product-dialog .eb-promo input { min-height: 24px; }
.svc-product-dialog .svc-product-promo summary { min-height: 24px; }

@media (max-width: 767px) {
  .cabinet-layout.gc2 .services-flow-root .sv2-quick button { min-height: 44px; }
  .cabinet-layout.gc2 .services-flow-root .eb-promo input { min-height: 44px; }
  .cabinet-layout.gc2 .services-flow-root .eb-promo-btn { min-height: 44px; }
  .cabinet-layout.gc2 .services-flow-root .svc-section-head button { min-height: 44px; }
  /* «Есть промокод» — это <summary>, то есть переключатель, а не подпись:
     высота была 16.5px. ТОЛЬКО min-height: display:flex сюда ставить нельзя,
     он выбрасывает стандартный маркер-треугольник из потока, и заголовок
     теряет 9px ширины вместе с ним (замерено). */
  .cabinet-layout.gc2 .services-flow-root .svc-steam-promo summary { min-height: 44px; }

  /* Каталог сервисов — подэкран за «Весь каталог», в первый обход не попал.
     Замер на 375px: разделы каталога 79.8x40, фильтры 61.8x39, страницы 38x38. */
  .cabinet-layout.gc2 .services-flow-root .svc-site-nav button { min-height: 44px; }
  .cabinet-layout.gc2 .services-flow-root .svc-facet-row button { min-height: 44px; }
  .cabinet-layout.gc2 .services-flow-root .svc-page-btn { width: 44px; height: 44px; min-width: 44px; }

  /* Карточка товара. Селектор кнопки «назад» повторяет тот, что в
     services-flow.css задаёт ей 38px (`.svc-product-dialog > .cabinet-trail
     .cabinet-trail__back`): при равной специфичности побеждает наше правило,
     потому что adaptive.css подключён последним. Более коротким селектором
     перебить не выходит — проверено.
     Шапка модалки от этого НЕ растёт: строка и так 44px, мала была только
     кнопка внутри неё. */
  .svc-product-dialog > .cabinet-trail .cabinet-trail__back { min-height: 44px; }
  .svc-product-dialog .svc-product-promo summary { min-height: 44px; }
  .svc-product-dialog .eb-promo input { min-height: 44px; }
  .svc-product-dialog .eb-promo-btn { min-height: 44px; }

  /* Надзаголовки — к той же ступени micro, что и во всём кабинете.
     Селектор с тегом (span.svc-card-eyebrow) намеренно: в typography.css эти
     размеры заданы через :is(...), который берёт специфичность самого сильного
     своего аргумента — там есть «.svc-head-trust span», и всё правило получает
     на ступень больше обычного класса. Без тега моя правка проигрывала. */
  .cabinet-layout.gc2 .services-flow-root span.svc-card-eyebrow,
  .cabinet-layout.gc2 .services-flow-root .svc-categories-copy > span {
    font-size: var(--gc-type-micro-readable, 10px);
  }

  /* Плитка «Выпустить новую карту» на «Обзоре»: поясняющая строка была 9px */
  .cabinet-layout.gc2 .new-card-tile small { font-size: var(--gc-type-micro-readable, 10px); }
}

/* ---------------------------------------------------------------------------
   14. ПОДПИСИ В НИЖНЕЙ НАВИГАЦИИ НА УЗКИХ ЭКРАНАХ

   До 369px подписи разделов скрыты (concept-scoped.css), остаются одни иконки —
   при этом у кнопки «Ещё» подпись есть всегда. Ряд получается разнородным, а
   главное — разделы перестают опознаваться: иконка карты и иконка сервисов
   различаются хуже, чем слова «Карты» и «Сервисы».

   Замер показал, что прятать их не было нужды: на 360px все пять подписей
   помещаются при 10px, на 320px — при 9px (самая длинная, «Сервисы», требует
   44px при доступных 48).

   Размен принят сознательно: 9px ниже общего порога в 10px, который я держу по
   всему кабинету, но подпись мелким шрифтом полезнее, чем её отсутствие —
   иконка несёт смысл, слово его уточняет.
   ------------------------------------------------------------------------- */
@media (max-width: 369px) {
  .cabinet-layout.gc2 .mobile-nav-link span { display: block; font-size: 10px; }
}
@media (max-width: 339px) {
  .cabinet-layout.gc2 .mobile-nav-link span { font-size: 9px; }
}

/* Логотип в верхней панели — ссылка на главную. На history/profile/issue шапка
   своя (.app-topbar, не мобильная шапка кабинета), и там ссылка была высотой
   30px. Замер на 360px: 120x30. */
@media (max-width: 767px) {
  .app-topbar .app-logo { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   15. ДВЕ НАХОДКИ РАЗБОРА СНИМКОВ, ПОДТВЕРЖДЁННЫЕ ЗАМЕРОМ

   15.1 Иконки в чипах категорий сервисов сплющиваются.
   Замер на 320: три иконки шириной 4.5px при заданных 20px — флекс сжимает их,
   потому что запрета на сжатие нет. Вместо знака получается вертикальная чёрточка.

   15.2 Промокод разрывается посреди кода.
   Замер: на 320 «AIF-78H4-87K9» занимает ДВЕ визуальные строки («AIF-78H4-» и
   «87K9»), на 390 — одну. Код перепечатывают руками, и разрыв посреди него
   читается как ошибка. Запрещаем перенос, а кнопке «Скопировать» разрешаем
   уехать под код: лучше две строки блока, чем разорванный код.
   ------------------------------------------------------------------------- */
.cabinet-layout.gc2 .services-flow-root .svc-category-chip svg,
/* Та же болезнь у стрелки в шапке секции «Популярное»: замер на 320 — 3.8px
   вместо 14. Флекс сжимает иконку, потому что запрета нет. */
.cabinet-layout.gc2 .services-flow-root .svc-section-head button svg { flex: 0 0 auto; }

@media (max-width: 380px) {
  .promo-code-row { flex-wrap: wrap; }
  .promo-code { flex: 1 1 100%; white-space: nowrap; }
  /* Кнопка перестала растягиваться под высоту кода, когда переехала на свою
     строку (раньше высоту давал align-items:stretch у строки) — задаём явно,
     иначе она схлопывается до 24px и в неё не попасть пальцем. */
  .promo-copy { flex: 1 1 100%; min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   16. ВЫРАВНИВАНИЕ СТРОК ВЫБОРА ТАРИФА

   Замер на 390: высоты строк 103 / 86 / 103, названия начинаются на 8 / 12 / 8
   пикселях от верха, цены — на 83 / 66 / 83. Средняя строка выбивается из ряда.

   Причина не в разной длине текста самой по себе, а в бейдже: строка
   «название + бейдж» это флекс с переносом, и у короткого названия
   («Универсальная») бейдж «Популярная» помещается рядом, а у длинных
   переносится на вторую строку. Отсюда разная высота блока и разъехавшиеся
   цены при одинаковой внешней рамке.

   Лечим не подгонкой текста, а раскладкой: бейдж всегда занимает свою строку.
   Тогда у всех тарифов одинаковая структура — две строки заголовка — и цены
   встают на общую линию при любой длине названия.
   ------------------------------------------------------------------------- */
.cabinet-layout.gc2 .card-flow-root .issue-plan-mini__copy > span > em {
  flex: 0 0 100%;
}

/* Подписи купленной eSIM («Готова к установке», «Срок действия») набраны 9px
   мимо шкалы. Блок виден только при наличии купленной eSIM, поэтому раньше в
   обход не попадал. Тег в селекторе намеренно: в typography.css размер задан
   через :is(...), который берёт специфичность самого сильного аргумента — там
   есть «.esim-my-card__term > span», и без тега правка проигрывает. */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .esim-flow-root span.esim-my-card__status,
  .cabinet-layout.gc2 .esim-flow-root .esim-my-card__term > span {
    font-size: var(--gc-type-micro-readable, 10px);
  }
}

/* ---------------------------------------------------------------------------
   ЗОНЫ НАЖАТИЯ И ЧИТАЕМОСТЬ: находки полного прогона 24.08.2026

   Прогон: 9 экранов × 13 ширин (320…1920) на Playwright, с учётом обрезки
   предками и горизонтальных каруселей. Горизонтального скролла, вылезающих
   за экран блоков, перекрытий фиксированными панелями и пустот НЕ найдено —
   ниже только зоны нажатия, обрезки текста и нечитаемо мелкие подписи.
   -------------------------------------------------------------------------- */

/* Зоны нажатия виджета поддержки правятся НЕ здесь, а в support-widget.css.
   Причина: виджет подключает свой файл стилей из скрипта (support-widget.js),
   поэтому тот всегда оказывается в каскаде ПОЗЖЕ adaptive.css и перебивает
   его — проверено замером, правила отсюда не применялись. */

/* Баланс в шапке нейросетей стал кнопкой (вход в «Кредиты»), но остался
   40px по высоте. Замер 390x844: 129x40. */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .ai-balance { min-height: 44px; }
}

/* Возврат в хлебных крошках и сами крошки. Замер 390x844: кнопка «Назад»
   92-102x42, ссылка крошки 41x40. Исходные 42px заданы в app.css и там же
   проверяются тестом — поэтому доводим до 44px здесь, а не в app.css. */
/* Селекторы с `.cabinet-layout.gc2` намеренно: в app.css правила записаны
   именно так, и без этой части мой блок проигрывает по специфичности,
   несмотря на то что adaptive.css подключён позже. Проверено замером:
   без префикса оставалось min-height 40px из app.css. */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .cabinet-trail__back,
  .cabinet-trail__back { min-height: 44px; }
  .cabinet-layout.gc2 .cabinet-breadcrumbs__link,
  .cabinet-breadcrumbs__link,
  .cabinet-layout.gc2 .cabinet-breadcrumbs__current,
  .cabinet-breadcrumbs__current { min-height: 44px; }

  /* Высоту крошкам подняли выше, а ширина у короткой подписи осталась мала:
     «Обзор» замерился 41.3px при отступе 4px по бокам. Шести хватает, чтобы
     дотянуть до 44 у самой короткой крошки; на длинных это ничего не меняет,
     их ширину задаёт текст. */
  .cabinet-layout.gc2 .cabinet-breadcrumbs__link,
  .cabinet-breadcrumbs__link { padding-inline: 6px; }
}

/* Крошки режутся сильно: замер 390x844 — до 46px текста уходит под многоточие
   при max-width 26vw. На узком экране это 101px, в них не помещается ни
   «Оплата сервисов», ни «Способ оплаты». Даём им половину строки: соседей у
   крошки максимум два, и последние два элемента и так показываются целиком. */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .cabinet-breadcrumbs__link,
  .cabinet-breadcrumbs__link { max-width: 46vw; }
}

/* Подпись операции в «Обзоре»: «22 авг., 01:11 · Карта •••• 7589» не влезает
   в строку и режется многоточием — замер 320px: теряется 7-11px, пропадает
   номер карты. Разрешаем перенос на вторую строку: строка операции и так
   двухэтажная, высота ряда не меняется скачком. */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .transaction small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.35;
  }
}

/* Подписи нижней панели навигации набраны 9-10px — это ОСНОВНАЯ навигация
   кабинета, самый нажимаемый элемент на телефоне. Замер 390x844: «Главная»,
   «Покупки», «Карты», «Сервисы», «eSIM», «Ещё» — 9px и 10px. Поднимаем до
   11px: дальше подписи начинают переноситься в две строки и панель растёт. */
@media (max-width: 767px) {
  .mobile-nav-link span,
  .mobile-more-trigger span { font-size: 11px; }
}

/* НЕ ПРАВИМ размер подписей промокодов и прочих caption на мобильном.
   Проверено: 10px там задаёт не случайность, а шкала проекта
   (typography.css:238-242 — body 12 / control 11 / caption 10 / micro 9),
   и она сама была результатом прохода по читаемости: в комментарии рядом
   написано, что прежние 6-8px уже подняли до читаемого минимума.
   Точечное переопределение здесь бессмысленно вдвойне: селектор
   `.cabinet-layout.gc2 #tab-promo :is(.promo-card-desc, …)` содержит ID и
   всё равно сильнее (та самая ловушка из AGENTS.md). Менять размер подписей
   нужно в ШКАЛЕ и целиком, а не по одному элементу — это решение владельца,
   а не правка адаптива. */

/* Крошки на самых узких экранах. Замер 320px: «Виртуальные карты» требует
   120px, помещается 89 — читается «Виртуальны…», и то же с соседом
   («История операций» 115 → 88). Две усечённые крошки не сообщают ничего:
   до 375px оставляем только текущую страницу целиком. Уровень выше при этом
   не теряется — рядом стоит отдельная кнопка «Назад» (.cabinet-trail__back),
   она и есть путь наверх. Правило `nth-last-child(-n+2)` из app.css (показ
   двух последних) остаётся нетронутым и работает от 376px. */
@media (max-width: 375px) {
  .cabinet-layout.gc2 .cabinet-breadcrumbs li:not(:last-child),
  .cabinet-breadcrumbs li:not(:last-child) { display: none; }
  .cabinet-layout.gc2 .cabinet-breadcrumbs__current,
  .cabinet-breadcrumbs__current { max-width: none; }
}

/* Почта в поле «Ваш аккаунт» на форме заказа Steam режется. Замер 1440px:
   «probe@example.com» — 152px текста в 147px поля, теряется 5px.
   Правим НЕ многоточием: элемент display:flex, а text-overflow не работает
   для собственного текста флекс-контейнера (голый текстовый узел уходит в
   анонимный флекс-элемент). Переводить в block нельзя — line-height там
   задаёт typography.css селектором с :is(), он сильнее, и текст уехал бы
   вверх в поле высотой 52px (проверено замером: line-height 17.4px).
   Поэтому просто даём тексту недостающее место: отступы 13px -> 9px.
   Замер после правки — текст помещается целиком. */
.cabinet-layout.gc2 .svc-field-static {
  min-width: 0;
  padding-inline: 9px;
}

/* Витрина продуктов в «Обзоре»: при наведении у карточки пропадала верхняя
   граница. Замер 390x844: лента — горизонтальная карусель с overflow-x:auto,
   а браузер по спецификации не оставляет вторую ось visible и обрезает ещё и
   по вертикали (замер: computed overflow-y = auto). Карточка при наведении
   поднимается на 2px (transform: translateY(-2px)) — и её верх оказывается
   на 2px ВЫШЕ края ленты, то есть срезается вместе с рамкой.

   Не убираем сам подъём, а даём ленте место сверху и снизу: отступ внутрь
   плюс равный отрицательный внешний — положение блока не меняется, но
   появляется поле, в котором подъём и кольцо фокуса (outline 3px со
   смещением 3px) рисуются целиком. Тот же приём лента уже использует по
   горизонтали (margin-right:-17px + padding-right:17px в app.css). */
@media (max-width: 767px) {
  .cabinet-layout.gc2 .overview-product-grid {
    padding-block: 8px;
    margin-block: -8px;
  }
}

/* Четыре направления образуют 2×2, а не неполный ряд 3+1. */
@media (min-width: 768px) and (max-width: 1199px) {
  .cabinet-layout.gc2 #tab-overview .overview-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Review R2: 430×932 — форма с margin-top:-52px перекрывала описание.
   На телефоне текст и форма идут последовательно; desktop не меняется. */
@media (max-width: 767px) {
  .cabinet-layout.gc2 #tab-hotels .htl-hero-v2 { height: auto; min-height: 0; padding-bottom: 30px; }
  .cabinet-layout.gc2 #tab-hotels .htl-search-shell { margin-top: 16px; }
}

/* Review R3: при 1280×720 низ панели был на 758px. Координаты и высоту
   рассчитывает flights.js по свободному месту, включая мобильное меню. */
#tab-flights .flt-passenger-panel { position: fixed; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }

/* Review R4: на 390px плавающий элемент закрывал суммы/действия справа.
   Мобильная кнопка теперь отдельная строка после содержимого, не оверлей. */
.cabinet-to-top-slot[hidden] { display: none; }
@media (max-width: 767px) {
  .cabinet-to-top-slot { display: flex; justify-content: flex-end; padding: 24px 0 calc(100px + env(safe-area-inset-bottom, 0px)); }
  .cabinet-layout.gc2 .cabinet-to-top { position: static; width: auto; min-width: 112px; min-height: 48px; padding: 0 17px; }
  .cabinet-layout.gc2 .cabinet-to-top span { display: inline; }
}

/* Свёрнутая панель 76 px: профиль и выход в прежнем flex-ряду не помещались
   рядом. Три действия занимают по 44 px, меню прокручивается над ними также
   при небольшой высоте окна и раскрытой группе нейросетей. */
@media (min-width: 768px) {
  .cabinet-layout.gc2 > .sidebar .brand-row { flex-shrink: 0; }
  .cabinet-layout.gc2 > .sidebar .side-nav { margin-top: 16px; margin-bottom: 12px; }
  .cabinet-layout.gc2 > .sidebar.is-collapsed .side-bottom { width: 100%; min-width: 0; padding: 0; justify-items: center; gap: 8px; }
  .cabinet-layout.gc2 > .sidebar.is-collapsed .cabinet-account { display: grid; width: 44px; min-width: 0; min-height: 0; padding: 0; gap: 8px; justify-items: center; }
  .cabinet-layout.gc2 > .sidebar.is-collapsed .help-card,
  .cabinet-layout.gc2 > .sidebar.is-collapsed .profile-card,
  .cabinet-layout.gc2 > .sidebar.is-collapsed .cabinet-logout { display: flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 4px; gap: 0; }
}

/* При 768 px раскрытая панель оставляла 430 px под две миниатюры:
   карта 197×123 px, баланс пересекался с номером и сроком внизу.
   Порог зависит от доступного места: при свёрнутой панели (598 px)
   остаются две карты, при узком контейнере они идут вертикально. */
#tab-cards .cards-selected { container-type: inline-size; container-name: cards-selected; }
@container cards-selected (max-width: 550px) {
  #tab-cards .cards-workspace .cards-mine__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Новый вектор eSIM целиком внутри hero: прежний bottom:-9% прижимал
   чип к нижнему краю. Без изменения текста и действий баннера. */
.cabinet-layout.gc2 .esim-hero__image { bottom: 2%; height: 96%; }
@media (max-width: 767px) {
  /* На 320 px текст занимал 420 px, абсолютная картинка пересекала
     три преимущества. В потоке она следует за текстом при любой высоте. */
  .cabinet-layout.gc2 .esim-hero { flex-direction: column; min-height: 0; }
  .cabinet-layout.gc2 .esim-hero__image { position: static; width: 300px; max-width: 100%; height: auto; margin: 12px auto 0; transform: none; align-self: center; }
}