/* Урок Просто — дополнения кода к сцене документа (x-doc.css): «Готовый документ», «Сборка документа», «Примеры
   документов». Файлы макета (up-doc.css, up-doc-sheets.css, up-job.css) не правятся; здесь — только то, чего на
   макете нет: лист по содержимому вместо печатных страниц, состояния без макета и движение переходов. Подключать
   после up-doc.css, up-doc-sheets.css и up-job.css. */

/* ---------- лист по содержимому ----------
   На макете документ разбит на печатные страницы (каждая — лист is-a4 постоянной пропорции), номера зашиты. В коде
   настоящего разбиения нет: часть документа — один лист. Он не короче листа A4 (как короткая часть на макете —
   «целым листом», ответ владельца 13), длинный — растёт по содержимому. Высота — от ширины сцены (единицы контейнера
   .up-stage-box); сетка — чтобы лист карточек под нарезку (.up-ds.is-cut, height: 100%) занял весь лист. */
.up-paper.x-flow { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100cqw * 297 / 210); }
.up-paper.x-flow.is-land { min-height: calc(100cqw * 210 / 297); }
.up-paper.x-flow > .up-ds.is-cut { height: auto; }
@media (max-width: 767px) {
  .up-doc-stage .up-paper.x-flow { min-height: 0; }
}
/* группа блоков листа (раздел с заданиями, вариант с ключами) — обёртка без своей сетки: шаг между блоками — листа */
.x-doc-group { display: contents; }
/* подсказка о прокрутке таблицы этапов техкарты — над таблицей, только где таблица прокручивается (< 768). Цвет —
   постоянный, как у мелкого текста листа: бумага белая и в тёмной теме */
.x-doc-scrollhint { display: none; }
@media (max-width: 767px) {
  .up-doc-stage .x-doc-scrollhint { display: block; margin: 0; text-align: left; font-size: 13px; line-height: 18px; color: #5f5b76; }
}
/* подпись таблицы для скринридера */
.x-doc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* шапка таблиц для учителя — короткие слова («Баллы», «Ответ») не рвутся посреди: в файле макета это правило стоит раньше
   общего `overflow-wrap: anywhere` у ячеек и проигрывает ему; узкому столбцу «Баллы» на телефоне — на 8 px больше */
.up-doc-stage .up-ds-keys th { overflow-wrap: normal; }
@media (max-width: 639px) {
  .up-doc-stage .up-ds-keys.is-pts th:last-child { width: 64px; }
}
/* вкладки частей и миниатюры — ссылки и кнопки без подчёркивания; вкладка-ссылка «Примеров» выглядит как кнопка кита */
.up-doc a.up-fmt-tab { text-decoration: none; }
.up-doc .up-ex-tabs .up-fmt-tab { cursor: pointer; }

/* ---------- шапка ---------- */
/* длинный параметр (учебник, цель) — чип не шире строки, текст обрезается */
/* колонка заголовка — не шире экрана: длинный чип («Учебник») обрезается, а не раздвигает страницу (сборка на телефоне) */
.up-doc .up-title { grid-template-columns: minmax(0, 1fr); }
.up-meta-chip.x-doc-clip { max-width: min(100%, 420px); }
.up-meta-chip.x-doc-clip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* сообщение об ошибке действия (удаление, запуск сборки) — строка-примечание по центру, как над листом */
.up-doc .up-hero > .up-doc-note { margin-top: 0; }

/* ---------- панель: где нет анимации по прокрутке (up-bar-float в up-doc.css стоит под @supports) — тот же
   переход «стекло → плотнее, тень глубже» по признаку data-float (scene.tsx, useBarFloat) ---------- */
@supports not (animation-timeline: scroll()) {
  .up-doc-bar { transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
  /* только где панель липкая: на телефоне (до 639 px) кит снимает с неё фон и тень — в Firefox они возвращались */
  @media (min-width: 640px) {
    .up-doc-bar[data-float="true"] { background: var(--up-bar-solid); box-shadow: 0 1px 2px rgba(31, 27, 58, .08), 0 22px 46px -20px rgba(60, 40, 120, .6); }
  }
}

/* ---------- «Ещё к этому уроку» и «Что дальше» ---------- */
/* чип уже сделанного документа: галочка цветом успеха */
.up-chip.x-doc-made svg { color: var(--success); }
.up-chip:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
/* кнопки покупки, когда документы закончились: ряд по центру, как чипы */
.x-doc-buy { align-items: flex-start; }
.x-doc-buy form { margin: 0; }
.x-doc-buy .plan-limit { display: contents; }
.x-doc-buy .plan-limit__up { display: grid; justify-items: center; gap: 4px; }
.x-doc-buy .plan-quote { margin: 0; max-width: 260px; font-size: 12px; line-height: 16px; color: var(--text-2); text-align: center; }
.up-doc .up-addon .up-hint strong { font-weight: 600; color: var(--ink); }

/* ---------- презентация: настоящая картинка слайда ---------- */
.up-slide-pic.x-doc-pic { overflow: hidden; background: #f6f4fb; }
.up-slide-pic.x-doc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- свой урок ---------- */
.x-doc-err { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--error); }
.up-doc .up-input[aria-invalid="true"] { border-color: var(--error); }
.up-own-grid .up-field > .up-input { margin-top: 0; }
.up-own-grid .up-field > .up-selwrap + .up-input { margin-top: 8px; }
/* предупреждение «мало этапов» с галочкой «Принимаю» — внутри карточки, во всю её ширину */
.x-doc-accept { display: grid; justify-items: start; gap: 10px; }
.x-doc-accept .up-doc-note, .up-own-card > .up-doc-note { width: auto; max-width: none; margin: 0; }
.x-doc-accept .up-check[aria-invalid="true"] .up-box { border-color: var(--error); }
.up-own-card.x-doc-loading { min-height: 320px; }
/* полоса телефона у своего урока: «Верно, сохранить» первой и во всю ширину, «Отмена» — рядом */
.x-doc-own-dock .up-go { order: -1; }
.x-doc-own-dock:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---------- «Сборка документа» ---------- */
/* кнопка карточки ошибки: акцент, как главные кнопки кита (на макете цвет задаёт настройка холста «главная кнопка») */
.up-jb-btn { background: var(--ws-accent); color: #fff; box-shadow: 0 1px 2px rgba(31, 27, 58, .2), 0 10px 22px -10px rgba(75, 64, 184, .7); }
.up-doc a.up-jb-btn:hover { color: #fff; }
.up[data-theme="dark"] .up-jb-btn { background: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -10px rgba(123, 98, 255, .6); }
.up .up-jb-btn:focus-visible { outline-color: var(--surface); }
/* документ готов: карточка прогресса уходит вверх и гаснет, лист-заготовка «дописан» — дальше лист проявляется */
.up-jb-card[data-leaving="true"] { opacity: 0; transform: translateY(-10px) scale(.97); pointer-events: none;
  transition: opacity .28s var(--ease-out), transform .36s var(--ease-apple); }

/* ---------- «Примеры»: прежний документ уходит перед сменой формата (up-paper-out кита) ---------- */
.x-doc-swap { display: contents; }
.x-doc-swap[data-leaving="true"] .up-stage-box > * { animation: up-paper-out .22s var(--ease-out) forwards; pointer-events: none; }
.x-doc-swap[data-leaving="true"] .up-slide-wrap { opacity: 0; transition: opacity .2s var(--ease-out); }

/* ---------- переход «сборка → готовый документ» (View Transition, documents/reveal.ts) ----------
   Имена действуют только на время перехода (html[data-doc-reveal]): общие части двух экранов — верхняя строка, шапка,
   панель — остаются на месте, лист документа вырастает из листа-заготовки и проявляется: сначала размытый и бледный,
   как отпечаток, затем резкий. Остальное (карточка прогресса, «Ещё к этому уроку», «Что дальше») сменяется
   проявлением корня. Собственные появления листа и блоков на это время выключены: иначе браузер снял бы их
   начальное положение как конечное. */
html[data-doc-reveal] .up-doc .up-top { view-transition-name: doc-top; }
html[data-doc-reveal] .up-doc .up-title { view-transition-name: doc-title; }
html[data-doc-reveal] .up-doc .up-doc-bar { view-transition-name: doc-bar; }
html[data-doc-reveal] .up-job .up-jb-paper,
html[data-doc-reveal] .up-doc:not(.up-job) :is(.up-stage-box > .up-slide, .up-stage-box > .up-ds-stack > .up-paper:first-child, .up-own > .up-own-card:first-child) { view-transition-name: doc-paper; }
html[data-doc-reveal] .up-doc :is(.up-paper, .up-own-card, .up-slide-in, .up-token) { transition: none; }
html[data-doc-reveal] .up-doc .up-m-rise { animation: none; }
html[data-doc-reveal]::view-transition-group(doc-paper) { animation-duration: .62s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
html[data-doc-reveal]::view-transition-old(doc-paper) { animation: x-doc-fade .3s cubic-bezier(.2, .8, .2, 1) both; }
html[data-doc-reveal]::view-transition-new(doc-paper) { animation: x-doc-develop .72s cubic-bezier(.2, .8, .2, 1) both; }
html[data-doc-reveal]::view-transition-group(doc-bar) { animation-duration: .4s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
html[data-doc-reveal]::view-transition-old(root), html[data-doc-reveal]::view-transition-new(root) { animation-duration: .36s; }
@keyframes x-doc-fade { to { opacity: 0; } }
@keyframes x-doc-develop {
  from { opacity: 0; filter: blur(12px) saturate(.4) brightness(1.06); }
  45% { opacity: 1; }
  to { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .up-jb-card[data-leaving="true"], .up-doc-bar { transition: none; }
  .x-doc-swap[data-leaving="true"] .up-stage-box > * { animation: none; }
}