/* preview-page.css — общий «хром» страниц превью (doc-widgets + reset + header/skeleton-safe).
   Вынесено из inline <style> 39 страниц site/preview/*.html (P0 CSS-консолидации, 2026-06-22).
   Только селекторы с ИДЕНТИЧНЫМ телом во всех страницах, где они есть (>=4 стр) — гарантия no-visual-change.
   Значения — только site/tokens.css. Дрейфнувший скелет (body/.page/.label-row) НЕ здесь — остаётся inline. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
header.h .eb { font-size: var(--ds-text-2xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-brand-500); margin-bottom: 12px; }
header.h h1 { font-size: var(--ds-text-5xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 16px; }
.rc { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 24px; }
.grid-table { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; }
.rc ul { font-size: var(--ds-text-sm); color: var(--ds-text-tertiary); line-height: 1.6; padding-left: 18px; margin-top: 8px; }
.rc ul li { margin-bottom: var(--ds-space-1); }
.rt-ok { background: var(--ds-pos-50); color: var(--ds-pos-500); }
.rt-warn { background: var(--ds-neg-50); color: var(--ds-neg-500); }
.gt-head { display: grid; padding: 10px 24px; background: var(--ds-page-bg); border-bottom: 1px solid var(--ds-border); }
.gt-row { display: grid; padding: 14px 24px; border-bottom: 1px solid var(--ds-border); align-items: center; }
.gt-row:last-child { border-bottom: none; }
.gt-head div, .gt-label { font-size: var(--ds-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ds-text-tertiary); }
.rt-info { background: var(--ds-info-50); color: var(--ds-info-500); }
.api-block { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; margin-bottom: var(--ds-space-4); }
.api-block-title { font-size: var(--ds-text-base); font-weight: 700; padding: 14px 24px; background: var(--ds-page-bg); border-bottom: 1px solid var(--ds-border); }
.api-row:last-child { border-bottom: none; }
.api-head { background: var(--ds-page-bg); font-size: var(--ds-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ds-text-tertiary); }
.api-prop { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-brand-500); font-weight: 600; }
.api-type { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-info-soft-text); }
.api-def { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); color: var(--ds-text-tertiary); }
.api-desc { font-size: var(--ds-text-sm); color: var(--ds-text-secondary); line-height: 1.45; }
.sp-head { background: var(--ds-page-bg); border-bottom: 1px solid var(--ds-border); }
.sp-row { border-bottom: 1px solid var(--ds-border); }
.sp-row:last-child { border-bottom: none; }
.sp-head div, .sp-key { font-size: var(--ds-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ds-text-tertiary); }
.sp-head div, .sp-key, .sp-val { padding: var(--ds-space-3) var(--ds-space-5); }
.kbd-table { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); overflow: hidden; }
.kbd-row:last-child { border-bottom: none; }
.req-badge { display: inline-flex; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ds-warn-100); color: var(--ds-warn-700); margin-left: 4px; vertical-align: middle; }
.a11y-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 20px 24px; }
.a11y-card h3 { font-size: var(--ds-text-base); font-weight: 700; margin-bottom: 10px; }
.a11y-card p, .a11y-card li { font-size: var(--ds-text-sm); color: var(--ds-text-secondary); line-height: 1.55; }
.a11y-card ul { padding-left: 18px; }
.a11y-card ul li { margin-bottom: 4px; }
.a11y-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; padding: 2px 6px; border-radius: 3px; margin-bottom: 10px; display: inline-block; }
.a11y-wcag { background: var(--ds-surface-pos-low); color: var(--ds-pos-soft-text); }
.a11y-aria { background: var(--ds-surface-info-low); color: var(--ds-info-soft-text); }
.a11y-kb { background: var(--ds-surface-brand-low); color: var(--ds-brand-soft-text); }
.a11y-focus { background: var(--ds-surface-warn-low); color: var(--ds-warn-soft-text); }
.demo-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 40px; }
.demo-panel { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 28px 32px; }

/* ── Выключатель движения на уровне СТРАНИЦЫ ────────────────────────────────
   Этот файл подключают все 38 страниц превью, поэтому выключатель стоит здесь, а не
   шестью копиями в их inline-блоках. Он накрывает то, что per-file правило накрыть не
   может в принципе: <style> самой страницы и атрибут style="…", где медиа-запросов не
   бывает. Компонентные CSS в site/css продолжают нести собственные блоки — там единица
   файл, он едет к потребителю сам по себе.
   !important здесь — ЕДИНСТВЕННОЕ легитимное применение (ось no-important делает для
   reduced-motion явное исключение): гасить движение обязано побеждать любой каскад,
   включая inline-атрибут. Заведено переписью движения 2026-08-05 — до неё этот слой
   не мерил никто. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}