/* Урок Просто — листы документов на странице «Готовый документ» (up-doc-sheets.css, круг 1 — 04.11, круг 2 — 05.11).
   Разметка — doc_sheets.py (классы up-ds-*): рабочий лист, контрольная, карточки под нарезку, диктант и словарный диктант,
   сценарий классного часа, самоанализ. Лист — то, что учитель получит в DOCX: шапка-таблица, разделы, строки для ответа,
   ключи и критерии, пунктир отреза у карточек, жёлтое выделение «[впишите…]» у самоанализа, подпись сервиса внизу.
   Бумага всегда белая и в тёмной теме (как листы техкарты и плана-конспекта): цвета листа — постоянные, не токены темы.
   Текст #1f1b3a и #5f5b76 на белом — 15,9:1 и 6,5:1. Подключать после up-doc.css.

   Круг 2 (замечание 2 — листы A4). Лист — как страница при печати: все размеры внутри листа — в долях его ширины,
   calc(N * var(--k)), где --k = ширина листа / 760 (на 1440 лист 760 px — --k = 1px, всё как было; уже окно — лист
   уменьшается целиком, без переноса строк, и разрывы листов остаются там же). Рамки 1–1,5 px не масштабируются.
   Часть длиннее печатной страницы — несколько листов is-a4 (пропорция 210×297) подряд в стопке up-ds-stack.
   Круг 3 (05.11): каждый лист — целый лист A4, и короткий тоже (ответ 13); техкарта — альбомными листами is-land (297×210,
   --k = ширина листа / 1040: на 1440 лист 1040 px — во всю сцену, кегль как у книжного листа на той же ширине) и план-конспект —
   полностью (ответ 14, классы is-lesson, up-ds-sub, up-ds-stages). Телефон (< 768) — разрывы без масштаба и без подписи
   (ответ 12): --k = 1px, на < 640 своя типографика телефона, лист по содержимому, листы разделяет промежуток; таблица этапов
   техкарты прокручивается вбок.
   Круг 4 (05.11 вечер, п. 11): у документов без капсулы частей — «Страница N» в промежутке между листами на ≥ 768 (up-ds-pnum).
   Круг 5 (05.11 ночь): «Страница N» — под каждым листом своим номером, с «Страница 1» под первым и под последним тоже. */
.up-doc { --k: 1px; }  /* вне листа (шапка-таблица «Своего урока» is-ui) — размеры в px */
.up-paper.is-ds { container-type: inline-size; }
.up-paper.is-ds > .up-ds { --k: calc(100cqw / 760); }
.up-paper.is-a4 { aspect-ratio: 210 / 297; }
/* круг 3: альбомный лист техкарты (DOCX: lesson.py → _setup_section(landscape=True)) — 297×210, внутри в долях ширины 1040 */
.up-paper.is-a4.is-land { aspect-ratio: 297 / 210; }
.up-paper.is-land > .up-ds { --k: calc(100cqw / 1040); }
.up-ds-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.up-ds-stack[data-leaving="true"] { animation: up-paper-out .22s var(--ease-out) forwards; pointer-events: none; }
/* круг 4 (п. 11, владелец 05.11: «оставь между страницами», «просто страница н, без м»): у техкарты, плана-конспекта, сценария и
   самоанализа (капсулы частей нет) перед каждым листом со второго — «Страница N» по центру промежутка. Текст — подсказка набора
   up-hint (14/20, по центру; цвет — ниже): это подпись интерфейса на фоне страницы, не часть листа — не масштабируется с листом (--k), промежуток
   постоянный и на 1024–1365, где альбомный лист уменьшается. Отрицательные поля: промежуток между листами 24 + 4 + 24 = 52 px,
   над и под строкой подписи — по 16 px. На телефоне (< 768) подписи нет — разрывы без подписи (круг 3, ответ 12).
   Переопределение цвета up-hint (--text-2 → --ink): подпись лежит между тенями двух листов, и в светлой теме серый --text-2 на
   этом фоне — контраст 3,1–4,3 (ниже 4,5; tools/doc4_contrast.py), --ink — не ниже 8; в тёмной теме оба проходят. */
.up-ds-pnum { margin: -8px 0; white-space: nowrap; color: var(--ink); }
/* круг 5 (владелец 05.11: «Нумерация всегда с первого листа»): подпись стоит сразу после своего листа (doc_sheets.papers), между
   листами — так же по центру промежутка 52 px (листы не сдвинулись); под последним листом — 16 px от листа, как у остальных, и
   стопка заканчивается на подписи (без отрицательного поля снизу): до строки «Сохранён в „Моих документах“» — 38 px, как было
   от листа, — подпись читается как номер листа над ней, а не как часть строки «Сохранён…» */
.up-ds-stack > .up-ds-pnum:last-child { margin-bottom: 0; }

.up-ds { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(14 * var(--k)); align-content: start;
  padding: calc(44 * var(--k)) calc(56 * var(--k)) calc(48 * var(--k)); font-size: calc(14 * var(--k)); line-height: calc(21 * var(--k)); color: #1f1b3a; }
.up-ds p { margin: 0; }
.up-ds b { font-weight: 700; }
/* часть многостраничного документа появляется при переключении снизу и без резкой смены (круг 2: вся бумага части, не только
   лист внутри — у части может быть несколько листов) */
.up-paper.is-page { transition: opacity .3s var(--ease-out), transform .4s var(--ease-apple); }
@starting-style { .up-doc .up-paper.is-page { opacity: 0; transform: translateY(10px); } }

/* заголовок листа: вид документа и тема — по центру, как _add_title */
.up-ds-head { display: grid; gap: calc(4 * var(--k)); text-align: center; }
.up-ds-title { font-weight: 700; font-size: calc(17 * var(--k)); line-height: calc(24 * var(--k)); }
.up-ds-small { font-size: calc(12.5 * var(--k)); line-height: calc(18 * var(--k)); color: #5f5b76; }
.up-ds-foot { margin-top: calc(6 * var(--k)) !important; font-size: calc(12 * var(--k)); line-height: calc(17 * var(--k)); color: #5f5b76; }

/* таблица «подпись — значение» (шапка бланка, сценария, самоанализа); пустая строка — место для записи от руки */
.up-ds-meta { width: 100%; border-collapse: collapse; table-layout: fixed; }
.up-ds-meta th, .up-ds-meta td { padding: calc(6 * var(--k)) calc(10 * var(--k)); border: 1px solid #d9d5e6; text-align: left; vertical-align: top; font-weight: 400; overflow-wrap: anywhere; }
.up-ds-meta th { width: calc(150 * var(--k)); background: #f7f6fb; font-weight: 600; }
/* подписи строк, заголовки столбцов и уровень карточки — короткие слова: не рвать их посреди («Длительност|ь»), ширина столбцов
   ниже рассчитана под самое длинное слово; значения и ответы переносятся где угодно (длинные выражения) */
.up-ds-meta th, .up-ds-keys th, .up-ds-keys.is-cards td:nth-child(2) { overflow-wrap: normal; }
.up-ds-meta td.is-fill { height: calc(34 * var(--k)); }

/* разделы и задания */
.up-ds-h { margin-top: calc(4 * var(--k)) !important; font-weight: 700; font-size: calc(15 * var(--k)); line-height: calc(22 * var(--k)); }
.up-ds-task { display: grid; gap: calc(10 * var(--k)); }
.up-ds-pts { color: #5f5b76; white-space: nowrap; }
/* строка «Ответ: ______» под заданием — подчёркивание до края листа */
.up-ds-ans { display: flex; align-items: baseline; gap: calc(8 * var(--k)); color: #5f5b76; }
.up-ds-ans::after { content: ""; flex: 1 1 auto; border-bottom: 1px solid #b4afc8; transform: translateY(calc(-3 * var(--k))); }
.up-ds-list { margin: 0; padding-left: calc(22 * var(--k)); display: grid; gap: calc(4 * var(--k)); }
.up-ds-list li { padding-left: calc(2 * var(--k)); }
.up-ds-list li::marker { color: #5f5b76; }

/* ключи и таблицы для учителя */
.up-ds-keys { width: 100%; border-collapse: collapse; }
.up-ds-keys th, .up-ds-keys td { padding: calc(6 * var(--k)) calc(10 * var(--k)); border: 1px solid #d9d5e6; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.up-ds-keys th { background: #f2f0f8; font-weight: 700; }
.up-ds-keys.is-pts td:first-child, .up-ds-keys.is-pts td:last-child, .up-ds-keys.is-ans td:first-child, .up-ds-keys.is-vocab td:first-child,
.up-ds-keys.is-cards td:first-child { font-variant-numeric: tabular-nums; }
.up-ds-keys.is-pts th:first-child, .up-ds-keys.is-ans th:first-child, .up-ds-keys.is-vocab th:first-child { width: calc(44 * var(--k)); }
.up-ds-keys.is-pts th:last-child { width: calc(72 * var(--k)); }
.up-ds-keys.is-cards th:first-child { width: calc(92 * var(--k)); }
.up-ds-keys.is-cards th:nth-child(2) { width: calc(170 * var(--k)); }
.up-ds-keys.is-ortho th:first-child { width: 38%; }
.up-ds-keys.is-vocab th:nth-child(2) { width: calc(130 * var(--k)); }

/* карточки: лист A4 под нарезку, четыре карточки, пунктир — линия отреза (как пунктирные границы ячеек в DOCX) */
/* лист — во всю высоту листа A4 (бумага is-a4): строка 1fr делит её на две ряда карточек */
.up-ds.is-cut { height: 100%; padding: calc(40 * var(--k)); grid-template-rows: 1fr; }
.up-ds-cut { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; border: 1.5px dashed #8f8aa3; }
.up-ds-scis { position: absolute; top: calc(-9 * var(--k)); left: calc(22 * var(--k)); display: inline-grid; padding: 0 calc(4 * var(--k)); background: #fff; color: #5f5b76; transform: rotate(-90deg); }
.up-ds-scis svg { width: calc(16 * var(--k)); height: calc(16 * var(--k)); }
.up-ds-card { display: grid; gap: calc(6 * var(--k)); align-content: start; min-width: 0; padding: calc(18 * var(--k)) calc(18 * var(--k)) calc(20 * var(--k));
  font-size: calc(13.5 * var(--k)); line-height: calc(20 * var(--k)); }
.up-ds-card:nth-child(even) { border-right: 1.5px dashed #8f8aa3; }  /* первый ребёнок — ножницы: чётные — левая колонка */
.up-ds-card:nth-child(2), .up-ds-card:nth-child(3) { border-bottom: 1.5px dashed #8f8aa3; }
.up-ds-card-h { font-weight: 700; }
.up-ds-card-sub { font-size: calc(12 * var(--k)); line-height: calc(17 * var(--k)); color: #5f5b76; }

/* диктант: текст для чтения вслух — крупно, с отступом, как 14 pt с интервалом 1,5 в DOCX */
.up-ds-dh { margin-top: calc(8 * var(--k)) !important; text-align: center; font-weight: 700; font-size: calc(17 * var(--k)); line-height: calc(24 * var(--k)); }
.up-ds-text { font-size: calc(16 * var(--k)); line-height: calc(27 * var(--k)); text-indent: calc(28 * var(--k)); }
.up-ds-list.is-words { display: block; columns: 2; column-gap: calc(40 * var(--k)); padding-left: calc(26 * var(--k)); font-size: calc(16 * var(--k)); line-height: calc(28 * var(--k)); }

/* сценарий: часть хода — заголовок с минутами, реплики, что делают дети */
.up-ds-part { display: grid; gap: calc(6 * var(--k)); }
.up-ds-part-h { font-weight: 700; }

/* самоанализ: места «[впишите…]» — жёлтым, как заливка в DOCX */
.up-ds-mark { padding: calc(1 * var(--k)) 0; border-radius: 2px; background: #fdeea0; color: #1f1b3a; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* круг 3: техкарта и план-конспект полностью (lesson.py). Подзаголовок раздела — полужирный основным кеглем (_add_subheading);
   в шапке длинные подписи («Образовательная организация», «Раздел (модуль) программы») — столбец подписей шире */
.up-ds-sub { font-weight: 700; }
.up-ds-meta.is-lesson th { width: calc(240 * var(--k)); }
/* таблица этапов техкарты (techmap.py): 8 колонок, ширины — <col> (doc_sheets.TM_COLS), кегль меньше основного, как в DOCX
   (10 пт при 12: 12 px при 14), шапка повторяется на каждом листе (своя таблица на листе); «Итого» — полужирным */
.up-ds-stages { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(12 * var(--k)); line-height: calc(17 * var(--k)); }
.up-ds-stages th, .up-ds-stages td { padding: calc(6 * var(--k)) calc(7 * var(--k)); border: 1px solid #d9d5e6; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.up-ds-stages th { background: #f2f0f8; font-weight: 700; }
.up-ds-stages td:first-child, .up-ds-stages td:nth-child(3) { font-variant-numeric: tabular-nums; }
.up-ds-stages tr.is-total td { font-weight: 700; }

/* ---------- телефон и планшет (< 768): разрывы без масштаба и без подписи (круг 3, ответ 12) — текст обычного размера, лист —
   по содержимому, граница листа — только промежуток 16 px; таблица этапов техкарты — прокрутка вбок (как раньше у превью). ---------- */
@media (max-width: 767px) {
  .up-doc-stage .up-paper.is-ds > .up-ds { --k: 1px; }
  .up-doc-stage .up-paper.is-a4 { aspect-ratio: auto; }
  .up-doc-stage .up-ds-stack { gap: 16px; }
  .up-ds-stack > .up-ds-pnum { display: none; }  /* круг 4: на телефоне номеров между листами нет (ответ 12 круга 3) */
  .up-doc-stage .up-ds-tscroll { overflow-x: auto; }
  /* круг 3, доработка: подсказка о прокрутке — одна, сразу под листом, где начинается таблица этапов (doc_sheets.techmap_sheet) */
  .up-ds-stack > .up-scroll-hint { display: block; margin: -4px 0; text-align: center; }
  .up-doc-stage .up-ds-stages { min-width: 928px; }  /* те же колонки, что у листа на 1440: слова не рвутся посреди */
}
/* ---------- ширины < 640: поля листа уже, карточки — столбиком ---------- */
@media (max-width: 639px) {
  .up-doc-stage .up-ds { gap: 12px; padding: 22px 18px 26px; font-size: 13.5px; line-height: 20px; }
  .up-doc-stage .up-ds-title { font-size: 16px; line-height: 22px; }
  .up-doc-stage .up-ds-meta th { width: 116px; }
  .up-doc-stage .up-ds-meta.is-lesson th { width: 140px; }
  .up-doc-stage :is(.up-ds-meta th, .up-ds-meta td, .up-ds-keys th, .up-ds-keys td) { padding: 5px 8px; }
  .up-doc-stage .up-ds-keys.is-cards th:first-child { width: 86px; }
  .up-doc-stage .up-ds-keys.is-cards th:nth-child(2) { width: 106px; }
  .up-doc-stage .up-ds-keys.is-ortho th:first-child { width: 46%; }
  .up-doc-stage .up-ds-keys.is-vocab th:nth-child(2) { width: 92px; }
  .up-doc-stage .up-ds-keys.is-pts th:last-child { width: 56px; }
  .up-doc-stage .up-ds.is-cut { height: auto; padding: 18px 14px; }
  .up-doc-stage .up-ds-cut { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .up-doc-stage .up-ds-card { padding: 16px 14px 18px; }
  .up-doc-stage .up-ds-card:nth-child(even) { border-right: 0; }
  .up-doc-stage .up-ds-card:nth-child(n + 2) { border-bottom: 1.5px dashed #8f8aa3; }
  .up-doc-stage .up-ds-card:last-child { border-bottom: 0; }
  .up-doc-stage .up-ds-text { font-size: 15px; line-height: 25px; text-indent: 22px; }
  .up-doc-stage .up-ds-list.is-words { column-gap: 20px; font-size: 15px; line-height: 26px; }
}
@media (max-width: 359px) {
  .up-doc-stage .up-ds { padding: 18px 14px 22px; }
  .up-doc-stage .up-ds-meta th { width: 112px; }
  .up-doc-stage .up-ds-list.is-words { columns: 1; }
}