/* ==========================================================================
   Гав VPN — страница вопросов витрины /faq. Своё оформление поверх общих
   tokens.css и base.css; собственных токенов не заводит ни одного.

   Устройство — с экрана кабинета, который жил тут до переезда на апстримный фронт
   (рейс cabinet-faq-rd, образец и снимки — .autopilot/cabinet-faq-rd/; сам экран и
   его gav.css сняты рейсом cabinet-upstream): плашка со значком в шапке,
   поиск с примером и крестиком, чипы со значками, «?» слева у вопроса, шеврон
   и «+» справа, бейджи внутри ответа, подвал поддержки. Взята система, не файл:
   значения — токены витрины (--lime, --paper, --line, --raise, --r1), а не
   кабинетные --gav-*, которых на витрине нет.

   Роли цвета переложены на палитру витрины осознанно:
     · акцент и «всё хорошо» — лайм, как везде на сайте;
     · «внимание» — розовый: по правилу проекта розовый и означает осторожность;
     · «помогает всем» — бирюзовый --iris, третий редкий сигнал палитры.
   Красную рамку закреплённой карточки из образца не копируем: красный у нас
   означает ошибку, а закреплённая — самый полезный ответ раздела.

   Имена gav-fx* не переименованы намеренно: ими размечено само содержание в
   config/faq/faq-content.json, и другое имя пришлось бы вписывать в источник
   правды ради оформления одной страницы.
   ========================================================================== */

.gav-faq {
  display: grid;
  gap: var(--s5);
  /* Своя мера вместо .wrap--tight: строка ответа длиннее 760 px читается тяжело,
     а колонка вопросов — это чтение, а не витрина. */
  max-width: 780px;
  padding-block: var(--s7) var(--s8);
}

/* Скрытое остаётся скрытым: у элементов ниже задан display, и он перебил бы
   штатное поведение атрибута hidden. */
.gav-faq [hidden] { display: none !important; }

@media (max-width: 480px) {
  /* Верхнее поле вдвое меньше: на 320 первый экран считается по пикселям, и
     48 px воздуха над заголовком отодвигали список за нижний край. */
  .gav-faq { padding-block: var(--s5) var(--s7); }
  /* Режим запроса. Класс ставит faq.js, когда в поле что-то есть или выбран
     чип. Шапка раздела в этот момент не нужна: человек уже печатает, экран
     наполовину занят клавиатурой, а ответ страницы обязан попасть в оставшуюся
     половину. Всё возвращается само, как только поле опустело.
     Место съедают значок (52 px) и подводка в четыре строки — их и убираем.
     А единственный <h1> из дерева доступности не уходит: display: none снял бы
     заголовок раздела у того, кто печатает со скринридером. Он уводится за край
     обычным приёмом «видно только программе чтения»: коробка в один пиксель,
     содержимое обрезано. */
  .gav-faq--query { gap: var(--s4); }
  .gav-faq--query .gav-faq__heroico,
  .gav-faq--query .gav-faq__sub { display: none; }
  .gav-faq--query .gav-faq__h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Шапка раздела -------------------------------------------------------- */

/* Значок держится ВЕРХА, а не середины: подводка на телефоне разворачивается в
   четыре строки, и центрированный значок повисал посреди пустого левого поля.
   Отбивка сверху ставит его на оптическую линию заголовка. */
.gav-faq__hero { display: flex; align-items: flex-start; gap: var(--s4); }
.gav-faq__heroico {
  margin-top: 4px;
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r1);
  background: color-mix(in oklab, var(--lime) 14%, var(--ink));
  border: var(--bw) solid color-mix(in oklab, var(--lime) 45%, transparent);
  color: var(--lime);
}
.gav-faq__heroico svg { width: 28px; height: 28px; }
.gav-faq__h1 { text-transform: none; }
.gav-faq__sub {
  margin-top: var(--s2);
  color: var(--paper-dim);
  /* Читаемый текст V4, а не --t-sm: тот считает 15 px и рассчитан на сноски и
     подписи — так и написано у него в tokens.css. Это подводка, её читают. */
  font-size: var(--v4-t-read);
  line-height: 1.55;
}

/* --- Поиск ---------------------------------------------------------------- */

.gav-faq__search {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 0 var(--s2) 0 var(--s4);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r1);
  background: var(--raise);
}
.gav-faq__search > svg { width: 18px; height: 18px; flex: none; color: var(--paper-mute); }
.gav-faq__search input {
  /* width: 0 обязателен: у input есть своя ширина по атрибуту size, и без него
     поле распирает колонку на 320 px (грабля куплена замером рейса
     cabinet-faq-rd: строка поиска 317 px в колонке 288). */
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 44px;
  background: none;
  border: 0;
  outline: 0;
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
}
/* Там, где :has() не поддержан, правило ниже не применяется вовсе — и у поля
   осталось бы `outline: 0`, то есть НИ КАКОГО кольца. Отсутствие поддержки имеет
   право стоить вида (кольцо садится на внутреннюю коробку поля, а не на плитку),
   но не доступности: кольцо обязано быть в обоих случаях. */
@supports not selector(:has(*)) {
  .gav-faq__search input:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
  }
}

/* Клавиатурное кольцо — на всей плитке поля, а не на самом <input>: у поля своя
   рамка и подложка, и кольцо вокруг внутренней коробки читалось бы вторым
   контуром внутри первого. `outline: 0` у input выше оставлен намеренно — он
   гасит второе кольцо; :has(:focus-visible) отличает клавиатуру от касания ровно
   так же, как общее правило :focus-visible в base.css, и кольцо выходит то же
   самое — 2 px лайма с отступом 3 px, как на чипах. Без него единственный орган
   ввода страницы невидим для клавиатуры (WCAG 2.4.7). */
.gav-faq__search:has(input:focus-visible) {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.gav-faq__search input::placeholder { color: var(--paper-mute); }
/* Свой крестик очистки: родной у type=search рисуется мимо палитры */
.gav-faq__search input::-webkit-search-cancel-button { appearance: none; }
.gav-faq__clear {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--paper-mute);
}
.gav-faq__clear svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .gav-faq__clear:hover { color: var(--paper); }
}

/* --- Чипы категорий ------------------------------------------------------- */

/* min-width: 0 обязателен: элемент грид-контейнера иначе распирается своим
   содержимым и уносит колонку за край экрана вместе с прокруткой страницы. */
.gav-cats { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }

/* Стена чипов на телефоне становится одной прокручиваемой строкой. Семь рядов и
   356 px на ширине 320 — это 63 % экрана: первого вопроса на первом экране не
   было вовсе, а пришёл человек за ответом, а не за фильтром. Порог 619 px, а не
   480: на 600 px ряд ещё укладывается в две строки и прокрутка не нужна.
   Поля по вертикали — под клавиатурное кольцо чипа (2 px кольца плюс 3 px
   отступа): в окне прокрутки оно иначе срезается по горизонтали. */
@media (max-width: 619px) {
  .gav-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block: 5px;
  }
  .gav-cats::-webkit-scrollbar { display: none; }
  .gav-cat {
    flex: none;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}
.gav-cat {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  /* Цель нажатия 44 px и перенос подписи внутри чипа: «iPhone · Android · Win · TV»
     на 320 px иначе уезжает за край экрана. */
  min-height: 44px;
  max-width: 100%;
  padding: var(--s2) var(--s3);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r1);
  background: transparent;
  color: var(--paper-dim);
  font-family: var(--f-ui);
  font-size: var(--t-btn);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: left;
  transition: color var(--d1) linear, border-color var(--d1) linear,
              background-color var(--d1) linear;
}
.gav-cat svg { width: 18px; height: 18px; flex: none; }
/* Счёт ответов из data-count. Атрибут ставит сборка из самого содержания, и до
   сих пор его не выводил никто — а это единственное, по чему с первого экрана
   видно, что ответов много и где их искать. Своего числа тут нет: content
   читает атрибут, и расхождения с содержанием быть не может. */
.gav-cat::after {
  content: attr(data-count);
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}
.gav-cat[aria-pressed='true'] {
  background: var(--lime);
  border-color: var(--lime);
  color: #0a0a0a;
}
/* Ховер только с курсором: на тач-экране он залипает после касания */
@media (hover: hover) {
  .gav-cat:hover { color: var(--paper); border-color: var(--paper-dim); }
  .gav-cat[aria-pressed='true']:hover { color: #0a0a0a; border-color: var(--lime); }
}

/* --- Список вопросов ------------------------------------------------------ */

.gav-faq__list { display: grid; gap: var(--s3); }

.gav-qa {
  border: var(--bw) solid var(--line);
  border-radius: var(--r1);
  background: var(--raise);
  /* Прыжок по прямой ссылке не должен прятать карточку под липкую шапку */
  scroll-margin-top: calc(var(--v4-head-h, 64px) + var(--s4));
}
.gav-qa summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  /* 12 px по вертикали, а не 16: с двухстрочным вопросом свёрнутая карточка
     иначе выходит выше порога роста списка (замер рейса cabinet-faq-rd). */
  padding: var(--s3) var(--s4);
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  line-height: 1.4;
}
.gav-qa summary::-webkit-details-marker { display: none; }
.gav-qa summary::marker { content: ''; }
.gav-qa__q { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Значок вопроса — символ в квадратной плашке, а не SVG: так он не рассыпается
   при смене кегля ручками панели. */
.gav-qa__ico {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r1);
  background: color-mix(in oklab, var(--lime) 12%, var(--raise));
  color: var(--lime);
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: var(--w-head);
  line-height: 1;
}
.gav-qa__ctrl {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  color: var(--paper-mute);
}
.gav-qa__chev { width: 18px; height: 18px; color: inherit; transition: rotate var(--d1) linear; }
.gav-qa[open] .gav-qa__chev { rotate: 180deg; color: var(--lime); }
.gav-qa__pm { width: 12px; text-align: center; font-size: 18px; font-weight: 700; line-height: 1; }
.gav-qa__pm::before { content: '+'; }
.gav-qa[open] .gav-qa__pm::before { content: '−'; }
/* Закреплённую сюда не пускаем: у неё своя лаймовая рамка, и общая перебила бы её */
.gav-qa[open]:not(.gav-qa--pin) { border-color: var(--line-strong); }
@media (hover: hover) {
  .gav-qa summary:hover { background: color-mix(in oklab, var(--paper) 4%, transparent); }
}

/* Закреплённая: своя рамка и заливка лаймом малой долей, значок «!» вывернут */
.gav-qa--pin {
  border-color: color-mix(in oklab, var(--lime) 45%, transparent);
  background: color-mix(in oklab, var(--lime) 6%, var(--raise));
}
.gav-qa--pin .gav-qa__ico { background: var(--lime); color: #0a0a0a; }
/* Карточка, открытая прямой ссылкой: подсветка живёт две секунды */
.gav-qa--lit { box-shadow: 0 0 0 2px var(--lime); }

/* --- Тело ответа ---------------------------------------------------------- */

/* Левый отступ выравнивает текст под заголовок; на тесном экране падает до общего */
.gav-qa__body { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4) 58px; }
@media (max-width: 480px) {
  .gav-qa__body { padding-left: var(--s4); }
}
.gav-qa__tags { display: flex; flex-wrap: wrap; gap: 6px var(--s3); }
.gav-qa__tag {
  font-family: var(--f-ui);
  font-size: var(--t-ui-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
/* Тело ответа — самый читаемый текст страницы: --v4-t-read (16 px после всех
   множителей), а не --t-sm. Сюда приходят с телефона, когда не работает VPN. */
.gav-qa__answer { color: var(--paper-dim); font-size: var(--v4-t-read); line-height: 1.6; }
.gav-qa__answer p { margin: 0 0 10px; }
.gav-qa__answer p:last-child { margin-bottom: 0; }
/* Длинный адрес и длинное слово ломаются где угодно: на 320 px они распирали
   карточку и давали горизонтальную прокрутку всей странице. */
.gav-qa__answer a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.gav-qa__answer b, .gav-qa__answer strong { color: var(--paper); font-weight: 600; }
.gav-qa__answer ul, .gav-qa__answer ol { margin: 6px 0 10px; padding-left: 22px; }
.gav-qa__answer ul { list-style: disc; }
.gav-qa__answer ol { list-style: decimal; }
.gav-qa__answer li { margin-bottom: 4px; line-height: 1.55; }
.gav-qa__answer li::marker { color: var(--lime); }
.gav-qa__answer code {
  padding: 1px 5px;
  border-radius: var(--r1);
  background: var(--sink);
  color: var(--lime);
  font-size: 0.92em;
}

/* --- Пять ролей оформления внутри ответа ---------------------------------
   Разметку кладёт содержание из config/faq; сборка пропускает только эти пять
   классов и только на своих тегах. */

/* Врезка-подзаголовок в длинном ответе. Селектор с .gav-qa__answer обязателен —
   иначе правило «.gav-qa__answer b» перебьёт его по специфичности. */
.gav-fx-head,
.gav-qa__answer .gav-fx-head {
  display: block;
  margin-top: 14px;
  color: var(--paper);
  font-weight: 700;
  font-size: 1em;
  line-height: 1.4;
}
/* Акцент в строке — лайм; им же помечено имя карточки подписки */
.gav-fx-hl,
.gav-qa__answer .gav-fx-hl { color: var(--lime); font-weight: 600; }
/* Бейдж «помогает всем» — редкий третий сигнал палитры */
.gav-fx {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: var(--r1);
  background: color-mix(in oklab, var(--iris) 14%, var(--ink));
  color: var(--iris);
  font-family: var(--f-ui);
  font-size: var(--t-ui-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Бейдж «внимание» — розовый: по правилу проекта это и есть роль осторожности */
.gav-fx--warn {
  background: color-mix(in oklab, var(--pink) 14%, var(--ink));
  color: var(--pink);
}
/* Метка платформы — приглушённая, с рамкой */
.gav-fx--plat {
  background: transparent;
  border: var(--bw) solid var(--line);
  color: var(--paper-mute);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* --- Пусто и промах прямой ссылки ----------------------------------------- */

.gav-faq__none {
  padding: var(--s5);
  border: var(--bw) solid var(--line);
  border-radius: var(--r2);
  background: var(--raise);
  color: var(--paper-dim);
  font-size: var(--v4-t-read);
  line-height: 1.5;
}
.gav-faq__none a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
/* Ссылка на переименованный вопрос даёт честную строку, а не пустой экран */
.gav-faq__miss {
  padding: var(--s3) var(--s4);
  border: var(--bw) dashed var(--line-strong);
  border-radius: var(--r1);
  color: var(--paper-dim);
  font-size: var(--v4-t-read);
  line-height: 1.5;
}

/* --- Подвал «Не нашли свой вопрос?» --------------------------------------- */

.gav-faq-sup {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r2);
  background: color-mix(in oklab, var(--lime) 4%, var(--raise));
}
.gav-faq-sup__text { display: grid; gap: var(--s2); min-width: 0; }
.gav-faq-sup__text h2 { font-size: var(--t-h); text-transform: none; }
.gav-faq-sup__text p { color: var(--paper-dim); font-size: var(--v4-t-read); line-height: 1.55; }
.gav-faq-sup__acts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.gav-faq-sup__btn {
  flex: 1 1 220px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: 10px var(--s4);
  border-radius: var(--r-btn);
  font-family: var(--f-ui);
  /* Плита-тень вместо свечения — та же механика, что у общей .btn витрины */
  box-shadow: var(--sup-lift, 4px 4px 0 var(--sup-plate));
  transition: transform var(--d1) var(--e-out), box-shadow var(--d1) var(--e-out);
}
.gav-faq-sup__btn svg { width: 20px; height: 20px; flex: none; }
.gav-faq-sup__labels { display: grid; gap: 2px; min-width: 0; }
.gav-faq-sup__main {
  font-size: var(--t-btn);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Адрес почты — не метка, а запасной канал связи для того, у кого не работает
   остальное: 14 px вместо 11. Множитель --kui, потому что плитка набрана --f-ui. */
.gav-faq-sup__sub {
  font-size: max(0.875rem, calc(0.875rem * var(--kui)));
  font-weight: 500;
  overflow-wrap: anywhere;
}
.gav-faq-sup__btn--tg {
  --sup-plate: var(--pink);
  background: var(--lime);
  color: #0a0a0a;
}
/* На лаймовой плите приглушение делается чернилами: серый --paper-mute по лайму нечитаем */
.gav-faq-sup__btn--tg .gav-faq-sup__sub { color: color-mix(in oklab, #0a0a0a 62%, var(--lime)); }
.gav-faq-sup__btn--mail {
  --sup-plate: var(--line-strong);
  background: var(--raise);
  color: var(--paper);
  border: var(--bw) solid var(--line-strong);
}
.gav-faq-sup__btn--mail .gav-faq-sup__sub { color: var(--paper-mute); }
@media (hover: hover) {
  .gav-faq-sup__btn:hover { transform: translate(-2px, -2px); --sup-lift: 7px 7px 0 var(--sup-plate); }
}
.gav-faq-sup__btn:active { transform: translate(2px, 2px); --sup-lift: 0 0 0 var(--sup-plate); }

@media (max-width: 480px) {
  .gav-faq-sup { padding: var(--s4); }
  /* Оба состояния должны целиком помещаться над клавиатурой: 24 px поля с
     каждой стороны стоили сообщению одной строки видимости. */
  .gav-faq__none { padding: var(--s4); }
  .gav-faq__miss { padding: var(--s3) var(--s4); }
}
@media (min-width: 620px) {
  .gav-faq-sup__acts { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .gav-qa__chev, .gav-faq-sup__btn { transition: none; }
}

/* --- Без своего скрипта органов управления нет -----------------------------
   Поиск и чипы без faq.js мертвы, но выглядят живыми: Enter в поле перезагружает
   страницу и стирает набранное, восемь чипов не делают ничего. Человек и так
   пришёл сюда потому, что у него ничего не работает, — второй неработающей вещи
   ему не нужно. Ответы при этом не теряются ни одного: все 32 лежат в разметке,
   и <details> раскрывается средствами браузера.

   Признак ОДИН, и его снимает тот самый скрипт, который даёт этим органам
   поведение: класс gav-faq-mute стоит в разметке, а faq.js убирает его последней
   строкой разбора — когда узлы найдены и обработчики повешены. Поэтому режим
   покрывает все три случая разом: JavaScript снят, faq.js не доехал по сети,
   faq.js вышел на своей же проверке узлов.

   Прежние два признака сняты осознанно. (scripting: none) при живом faq.js
   недостижим — он лишь повторял бы то же самое. Класс .no-js снимает СОСЕДНИЙ
   early.js, и по нему получалось прямо неверно: early.js не доехал, а faq.js
   доехал — органы работают, но спрятаны. */
html.gav-faq-mute .gav-faq__search,
html.gav-faq-mute .gav-cats { display: none; }