/* Каркас домашних тестов (docs/design/SELFTESTS.md): общие анимированные компоненты инструкции —
   подключается ТОЛЬКО на страницах тестов-плагинов (не на 5 прежних тестах — их страницы байт-в-байт).
   Цвета — только var(--…), без #hex и rgb() (stylelint проекта). */
@layer pages {
  /* «шаги» — компактный список иконка+подпись (loader.steps_html) */
  .anim-steps { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; margin: 14px 0; padding: 0 }
  .anim-step { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 96px; text-align: center }
  .anim-step-ic {
    width: 48px; height: 48px; border-radius: 50%; background: var(--iris-soft); color: var(--iris-ink);
    display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box;
    animation: anim-step-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .4s);
  }
  .anim-step-ic svg { width: 100%; height: 100% }
  .anim-step-cap { font-size: 12.5px; color: var(--ink-2) }
  @keyframes anim-step-pulse {
    0%, 100% { transform: scale(1); box-shadow: var(--shadow-inner-highlight) }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px var(--iris-soft) }
  }

  /* «сцены» — крупные анимированные иллюстрации (loader.scene_html): по ширине колонки текста на
     десктопе (макс. 280px), во всю ширину на телефоне; картинки идут рядами, оборачиваются сами. */
  .scenes { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 }
  .scene { flex: 1 1 260px; max-width: 280px; margin: 0; display: flex; flex-direction: column; gap: 8px }
  .scene-svg { width: 100%; height: auto; display: block; color: var(--ink); background: var(--paper);
               border: 1px solid var(--line); border-radius: 14px; box-sizing: border-box }
  .scene figcaption { font-size: 13px; color: var(--ink-2); text-align: center }
  @media (max-width: 640px) { .scene { flex-basis: 100%; max-width: none } }

  /* статичный кадр без анимации — системная настройка «меньше анимации» (шаги и сцены разом).
     !important обязателен: anim-шаги/сцены (illus/*.svg) объявляют свою @keyframes-анимацию в
     собственном <style> ВНУТРИ svg, который в документе идёт позже этого файла — при равной
     специфичности без !important победил бы порядок в документе, не reduced-motion. */
  @media (prefers-reduced-motion: reduce) {
    .anim-step-ic, .scene-svg * { animation: none !important } /* stylelint-disable-line declaration-no-important -- см. комментарий выше */
  }
}
/* статичный кадр — тема «для слабовидящих» (вне @layer — сильнее по порядку, как остальные правила
   темы в engine/pagekit/tokens.py; тот же !important-паттерн, что и там). */
:root[data-theme="low-vision"] .anim-step-ic,
:root[data-theme="low-vision"] .scene-svg * { animation: none !important } /* stylelint-disable-line declaration-no-important -- как в engine/pagekit/tokens.py: должно перебить анимацию, заданную внутри самого SVG (illus/*.svg) */

/* Расставь цвета по порядку — своя разметка сверх общих .stest/.vrow/.btn. Цвета фишек (--c) — фиксированные
   hex намеренно (клиническая шкала оттенков), остальное — var(--…), как и везде в репозитории. */
@layer pages {
  .ca-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; touch-action: none }
  .ca-tile {
    width: 30px; height: 44px; border-radius: 6px; border: 1px solid var(--line); background: var(--c);
    padding: 0; cursor: grab; flex: 0 0 auto;
  }
  .ca-tile:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px }
  .ca-tile.ca-dragging { cursor: grabbing; opacity: .75; transform: scale(1.06) }
  .ca-anchor { cursor: default; border-width: 2px; border-color: var(--ink) }

  .ca-result { margin-top: 14px }
  .ca-wheel-wrap { width: 180px; margin: 0 auto 10px }
  .ca-wheel-wrap svg { width: 100%; height: auto; display: block }
}