/* Каркас домашних тестов (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 проекта). Печать — через window.print() (widget.js), реальный
   масштаб картинок задаётся в мм прямо на <svg width/height> в widget.html, здесь — только раскладка. */
@layer pages {
  .op-sheet {
    border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 14px 0;
    background: var(--paper); display: flex; flex-direction: column; gap: 14px; align-items: center;
  }
  .op-sheet-title { font-weight: 700; margin: 0; text-align: center }
  .op-calib { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2) }
  .op-calib::before { content: ""; width: 50mm; height: 50mm; border: 1px solid currentColor; display: block; flex: none }
  .op-row { display: flex; justify-content: center; align-items: center; gap: 4vw; flex-wrap: wrap; width: 100% }
  /* на экране — не крупнее 22% ширины поля (чтобы на 360-390px не вылезало за край), печать переопределяет
     точным физическим размером из --op-sz (мм), заданным в widget.html для каждого ряда */
  .op-row svg { flex: none; color: var(--ink); width: min(var(--op-sz), 22vw); height: min(var(--op-sz), 22vw) }
  .op-sheet-note { font-size: 11px; color: var(--ink-2); margin: 0; text-align: center }
  .op-eye { margin: 10px 0 }
  .op-widget .vrow { flex-wrap: wrap }
}

/* печать листа: прячем всё остальное на странице, оставляем только .op-sheet и его содержимое,
   на весь лист, без шапки/подвала/форм (именно эта страница их грузит — не общий файл сайта). */
@media print {
  body * { visibility: hidden }
  .op-sheet, .op-sheet * { visibility: visible }
  .op-sheet {
    position: absolute; left: 0; top: 0; width: 100%; border: none; margin: 0; padding: 8mm;
  }
  /* печать — точный физический размер (мм) из --op-sz, без экранного ограничения min(…, 22vw) */
  .op-row { flex-wrap: nowrap }
  .op-row svg { width: var(--op-sz); height: var(--op-sz) }
}