/* ==========================================================================
   Блок подбора кофе (квиз) на главной — точечные правки по снимку заказчика.

   Подключать ПОСЛЕ site.css (в нём вся база квиза: .qc, .qc-ico, .qc-go)
   и ПОСЛЕ interactions.css — оттуда берётся сам бордовый слой круглой
   кнопки, здесь только его состояние (подробности ниже, у правила).
   Ничего из site.css / interactions.css / home.js / wavy.js этот файл не
   меняет — только добавляет состояние наведения. Размеры, отступы и
   раскладку не трогаем, поэтому мобильный слой (mobile/quiz.css,
   tablet.css, landscape.css) остаётся как был при любом порядке подключения.

   --------------------------------------------------------------------------
   1) «Обрезались SVGшки» — почему здесь нет исправления.

   Разбор по файлам, а не на глаз:

   • Значки 2-го и 3-го вопроса — настоящие SVG (img/q2-*.svg, img/q3-*.svg).
     Проверены: viewBox совпадает с реальными границами кривых (считались
     экстремумы безье, а не только опорные точки), clipPath / mask / групп
     нет, штрихов нет — только заливки. Эти значки целые.

   • Значки 1-го вопроса — те самые «чашки» — на самом деле не SVG, а PNG:
     img/q1-black.png, img/q1-milk.png, img/q1-both.png, 234×234.
     Обрезаны они в самих файлах:
       – фон непрозрачный белый (альфа 255 по всему холсту, не прозрачность);
       – рисунок начинается с отступом 6 px слева и 7 px сверху,
         а справа и снизу упирается в край холста;
       – по правому краю холста 28–37 px краски, по нижнему 79–108 px,
         по левому и верхнему — ноль.
     То есть ручка кружки справа и донышко снизу срезаны кромкой картинки.

   CSS вернуть срезанные пиксели не может: контейнер не режет (у .qc и
   .qcards нет overflow:hidden, у .qc-ico стоит object-fit:contain — он
   вписывает, а не кадрирует). Нужен новый экспорт из макета — что именно
   выгрузить, написано в отчёте.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   2) Наведение на вариант: контур карточки и круглая кнопка — бордовые.

   Бордовый тот же, что во всём проекте: #8b2628 (docs/DESIGN-SYSTEM-FIGMA.md,
   «бордо-второстепенный»; им же залит круг img/cart/btn-remove-red.svg).
   -------------------------------------------------------------------------- */

/* ---- контур карточки ----
   Контур рисует wavy.js: он кладёт внутрь .qc свой <svg class="wavy"> и
   ставит цвет ПРЕЗЕНТАЦИОННЫМ АТРИБУТОМ — path.setAttribute('stroke',
   cfg.color || BRAND) в функции draw. Презентационный атрибут стоит в
   каскаде ниже любого авторского правила (нулевая специфичность, место в
   самом начале авторского origin), поэтому свойство stroke из CSS его
   перебивает — без !important и без правки скрипта. У цели '.qc' режим
   fill, значит svg ровно один и он прямой потомок .qc (insertBefore к
   firstChild) — отсюда селектор с «>».

   fill НЕ трогаем: в режиме fill той же фигурой залита белая подложка
   карточки (path.setAttribute('fill', '#fff')) — перекрасив его, мы
   закрасили бы всю карточку. */
.qc > svg.wavy path{transition:stroke .22s var(--ease)}

/* ---- круглая кнопка «>» ----
   Бордовый двойник кнопки СВОЕГО слоя здесь не заводит: он уже есть в
   newdesign/interactions.css:275-281 — там объявлены и position:relative
   (.qc .qc-go.qc-go), и сам слой .qc .qc-go::after с картинкой из
   переменной --ix-arrow-bordo-fill (interactions.css:72). Это тот же
   btn-arrow-green.svg с бордовой заливкой круга. Второй раз описывать
   тот же псевдоэлемент нельзя: в проекте завелись бы две копии одной
   картинки, а какой из двух переходов сработает, решал бы порядок
   подключения файлов. Поэтому здесь остаётся только СОСТОЯНИЕ.

   ЗАВИСИМОСТЬ: подсветка кнопки работает, лишь когда подключён
   interactions.css (порядок с ним не важен — см. ниже; бордовый контур
   карточки выше самостоятелен и работает всегда).

   Длительность перехода тоже приходит из interactions.css:
   var(--ix-t) var(--ix-e) = 0,2 с ease. */

/* Само наведение — только там, где мышь. На тач-экране :hover залипает
   после тапа, и выбранный вариант остался бы бордовым до перерисовки шага.

   Конкурент — базовое .qc .qc-go::after{opacity:0} из interactions.css:276,
   у него (0,2,0); здесь (0,3,0), так что правило выигрывает весом при любом
   порядке подключения — даже если этот файл окажется выше interactions.css. */
@media (hover:hover){
  .qc:hover > svg.wavy path{stroke:#8b2628}
  .qc:hover .qc-go::after{opacity:1}
}

/* Клавиатура: свечение по силуэту от .sc2026-page button:focus-visible
   (site.css, блок «ФОКУС: без обводки») остаётся, здесь только повторяем
   ту же бордовую подсветку, чтобы пришедший табом видел то же состояние,
   что и мышью. Вне hover:hover: :focus-visible от тапа не срабатывает,
   залипания не будет. */
.qc:focus-visible > svg.wavy path{stroke:#8b2628}
.qc:focus-visible .qc-go::after{opacity:1}

/* В site.css есть блок prefers-reduced-motion для квиза (~строка 658);
   добавляем к нему свой переход. Слой .qc .qc-go::after здесь не повторяем:
   его в щадящем режиме уже гасит interactions.css:452 (transition:none). */
@media (prefers-reduced-motion:reduce){
  .qc > svg.wavy path{transition:none}
}