/* Каркас домашних тестов (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/.callout (static/style.css).
   Цвета — только var(--…) (stylelint проекта). */
@layer pages {
  .cf-eye { display: flex; flex-direction: column; gap: 8px; margin-top: 10px }
  .cf-dir { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line) }
  .cf-dir:first-of-type { border-top: none }
  .cf-dir-label { font-weight: 600; font-size: 14px }
  .cf-widget .vrow { flex-wrap: wrap }
  .cf-widget .btn-sm { height: 38px; padding: 0 14px; font-size: 14px }
  .cf-widget [data-ans][aria-pressed="true"],
  .cf-widget [data-sudden][aria-pressed="true"] { background: var(--iris); color: var(--btn-ink); border-color: var(--iris) }
}