/* Каркас домашних тестов (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 (static/style.css). Цвета — только var(--…). */
@layer pages {
  .de-timer { margin: 10px 0 }
  .de-dot-box {
    display: flex; align-items: center; justify-content: center; height: 70px; border: 1px solid var(--line);
    border-radius: 14px; background: var(--paper); margin: 10px 0;
  }
  .de-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--iris) }
  .de-clock { font-size: 22px; font-weight: 700; color: var(--ink); margin: 6px 0 }
  .de-symptoms { margin-top: 16px }
  .de-check-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 }
  .de-check-list label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2) }
  .de-check-list input { margin-top: 3px }
  .de-after { margin-top: 10px }
}