/* Spacemotion · форматы презентации v001 (15.10.2026) — общий слой сборщика (скилл all-presentation).
   Подключается ПОСЛЕ стилей презентации (Spacemotion, гроусс — любых), до CSS редактора:
     <link rel="stylesheet" href="…/…-стили-презентации-vNNN.css">
     <link rel="stylesheet" href="…/2026-10-15-форматы-презентации-v001.css">
   Почему после: Chrome не даёт именованной странице (@page f-square) перебить безымянную @page { size: 1920px 1080px }
   из более позднего файла — PDF выходит 16 : 9 целиком. Просмотрщик v015 на всякий случай сам дописывает страницы
   форматов в конец <head>, так что и старый порядок подключения не ломает PDF. Значения по умолчанию здесь — с нулевым
   весом (:where), поэтому порядок не меняет ничего, что задают стили презентации.
   Формат — одна переменная: <body data-format="…">. Размер листа отдаётся просмотрщику v015 и редактору v031 переменными
   --slide-w / --slide-h (px) и --sw / --sh (те же числа без единиц — для aspect-ratio).

   Форматы:
     wide      1920 × 1080   16 : 9 — экран, Spacemotion (по умолчанию: без data-format всё как раньше)
     square    1080 × 1080   1 : 1 — Instagram, книга Рудера в квадрате
     portrait  1080 × 1350   4 : 5 — лента Instagram, карусель LinkedIn
     story     1080 × 1920   9 : 16 — Stories, Reels, Shorts (сверху и снизу ~250 px закрывает интерфейс соцсети)
     a4        794 × 1123    A4 вертикально (96 точек на дюйм), a4-land — горизонтально
     book      640 × 660     страница «Типографики» Рудера
     custom    свой размер:  <body data-format="custom" style="--slide-w:1200px; --slide-h:628px; --sw:1200; --sh:628">

   Смешанная презентация: у отдельного слайда может быть свой формат — <section class="frame" data-sheet="wide">.
   Так редактор v031 «Импортом слайдов» оставляет 16 : 9 внутри квадратной презентации. В PDF каждый лист — своей страницей
   своего размера (именованные @page), PNG — в своём размере (режим PNG ставит просмотрщик v015 сам, без этого файла).

   Сетка по умолчанию — правило Spacemotion для любого формата: 12 × 12, поля и промежутки 24 px (в квадрате модуль 64 × 64).
     Своя сетка формата или скина — переменными --cols / --rows / --pad / --gap или правилом скина: например, квадрат по Рудеру
     в гроусс-ветке — 6 × 6, поля 60, промежуток 48 (стили v035, скин book). Правило скина сильнее (вес здесь — 0,2,0,
     у скинов body[data-skin] .slide — 0,2,1). Слайды, принесённые импортом (data-css-src), держат сетку своих стилей.
   Другие презентации не меняются: пока файл не подключён, его нет. */

/* ---------- размеры ---------- */
:where(body) { --slide-w: 1920px; --slide-h: 1080px; --sw: 1920; --sh: 1080; --sm-formats: 1; --cols: 12; --rows: 12; --pad: 24px; --gap: 24px; }
body[data-format="wide"], .frame[data-sheet="wide"] { --slide-w: 1920px; --slide-h: 1080px; --sw: 1920; --sh: 1080; }
body[data-format="square"], .frame[data-sheet="square"] { --slide-w: 1080px; --slide-h: 1080px; --sw: 1080; --sh: 1080; }
body[data-format="portrait"], .frame[data-sheet="portrait"] { --slide-w: 1080px; --slide-h: 1350px; --sw: 1080; --sh: 1350; }
body[data-format="story"], .frame[data-sheet="story"] { --slide-w: 1080px; --slide-h: 1920px; --sw: 1080; --sh: 1920; }
body[data-format="a4"], .frame[data-sheet="a4"] { --slide-w: 794px; --slide-h: 1123px; --sw: 794; --sh: 1123; }
body[data-format="a4-land"], .frame[data-sheet="a4-land"] { --slide-w: 1123px; --slide-h: 794px; --sw: 1123; --sh: 794; }
body[data-format="book"], .frame[data-sheet="book"] { --slide-w: 640px; --slide-h: 660px; --sw: 640; --sh: 660; }

/* лист и рамка — по переменным (сильнее базовых .frame / .slide и правил формата в стилях v033–v035); телефонная вёрстка (html.sm-phone) — своя */
html:not(.sm-phone) body .frame { aspect-ratio: var(--sw) / var(--sh); }
html:not(.sm-phone) body .frame[data-sheet] { aspect-ratio: var(--sw) / var(--sh); }
html:not(.sm-phone) body .frame > .slide { width: var(--slide-w); height: var(--slide-h); }
html:not(.sm-phone) body .frame[data-sheet] > .slide { width: var(--slide-w); height: var(--slide-h); }
html:not(.sm-phone) body.is-presenting .frame { width: calc(var(--slide-w) * var(--s)); height: calc(var(--slide-h) * var(--s)); }
html:not(.sm-phone) body.is-presenting .frame[data-sheet] { width: calc(var(--slide-w) * var(--s)); height: calc(var(--slide-h) * var(--s)); }

/* лента без редактора: лист помещается в окно и по высоте (квадрат, 4 : 5, 9 : 16, A4) */
body[data-format]:not([data-format="wide"]):not(.editor-build) .deck { width: min(100% - 32px, var(--slide-w), calc((100vh - 56px) * var(--sw) / var(--sh))); }
/* лист своего формата в ленте: не выше окна (квадрат среди 16 : 9), по центру ленты */
@media screen { html:not(.sm-phone) body:not(.is-presenting) .frame[data-sheet] { width: min(100%, calc((100vh - 56px) * var(--sw) / var(--sh))); margin-inline: auto; } }

/* сетка формата — если скин не задал свою;
   слайды, принесённые импортом (data-css-src), держат свою сетку из своих стилей */
:where(body[data-format]:not([data-format="wide"])) .frame:where(:not([data-sheet]):not([data-css-src])) > .slide,
.frame:where([data-sheet]:not([data-sheet="wide"]):not([data-css-src])) > .slide {
  grid-template-columns: repeat(var(--cols, 12), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 12), minmax(0, 1fr));
  padding: var(--pad, 24px);
  gap: var(--gap, 24px);
}

/* ---------- печать: каждый лист — страницей своего размера ---------- */
@page f-wide { size: 1920px 1080px; margin: 0; }
@page f-square { size: 1080px 1080px; margin: 0; }
@page f-portrait { size: 1080px 1350px; margin: 0; }
@page f-story { size: 1080px 1920px; margin: 0; }
@page f-a4 { size: 794px 1123px; margin: 0; }
@page f-a4-land { size: 1123px 794px; margin: 0; }
@page f-book { size: 640px 660px; margin: 0; }
/* f-custom — размер ставит просмотрщик v015 по переменным body */
@media print {
  html:has(body[data-format]:not([data-format="wide"])), html body[data-format]:not([data-format="wide"]) { width: var(--slide-w); }
  html body[data-format] .deck { width: var(--slide-w); }
  html body .frame { width: var(--slide-w); height: var(--slide-h); }
  html body .frame[data-sheet] { width: var(--slide-w); height: var(--slide-h); }
  html body .frame:not([data-sheet]) { page: f-wide; }
  html body[data-format="square"] .frame:not([data-sheet]), html body .frame[data-sheet="square"] { page: f-square; }
  html body[data-format="portrait"] .frame:not([data-sheet]), html body .frame[data-sheet="portrait"] { page: f-portrait; }
  html body[data-format="story"] .frame:not([data-sheet]), html body .frame[data-sheet="story"] { page: f-story; }
  html body[data-format="a4"] .frame:not([data-sheet]), html body .frame[data-sheet="a4"] { page: f-a4; }
  html body[data-format="a4-land"] .frame:not([data-sheet]), html body .frame[data-sheet="a4-land"] { page: f-a4-land; }
  html body[data-format="book"] .frame:not([data-sheet]), html body .frame[data-sheet="book"] { page: f-book; }
  html body[data-format="custom"] .frame:not([data-sheet]) { page: f-custom; }
  html body .frame[data-sheet="wide"] { page: f-wide; }
}