/* Урок Просто — страница готового документа в стиле v2 «Строка запроса» (up-doc.css).
   Корень страницы — .up-doc рядом с .up (shell root_cls='up up-doc'); подключать после up-kit.css.
   Свои части: шапка документа (up-kind, up-meta), липкая стеклянная панель действий (up-doc-bar) с капсулой комплекта
   на up-fmt, сцена листа (up-doc-stage, up-stage-box, up-paper, up-deck), слайд 16:9 с миниатюрами (up-slide, up-thumbs),
   «Что дальше» на up-chips, подтверждение удаления (up-doc-confirm), липкая полоса скачивания на телефоне (up-dock). */
.up-doc { --pad: 32px; --up-bar-bg: rgba(255, 255, 255, .66); --up-bar-solid: rgba(255, 255, 255, .88); }
.up-doc[data-theme="dark"] { --up-bar-bg: rgba(28, 24, 52, .72); --up-bar-solid: rgba(28, 24, 52, .9); }
.up-doc .up-main { padding-bottom: 88px; }
.up-doc .up-hero { max-width: 1040px; gap: 18px; }

/* ---------- шапка: вид документа, тема, параметры урока ---------- */
.up-doc .up-title { padding: 0; gap: 12px; }
.up-doc .up-kind { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.up-doc .up-h1 { max-width: 920px; margin: 0 auto; font-size: 38px; line-height: 44px; letter-spacing: -.02em; text-wrap: balance; }
.up-doc .up-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.up-meta-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--up-glass); border: 1px solid var(--up-card-line);
  color: var(--text-2); font-size: 13.5px; line-height: 18px; font-weight: 500; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.up-meta-chip svg { color: var(--ws-icon); flex: 0 0 auto; }

/* «Удалить» в правом углу верхней строки и подтверждение под ней */
.up-doc-del { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 14px; line-height: 20px; cursor: pointer; transition: color .15s, background-color .15s; }
.up-doc-del:hover, .up-doc-del[aria-expanded="true"] { color: var(--error); background: var(--error-tint); }
.up-doc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: -6px; padding: 12px 12px 12px 16px; border-radius: 18px; border: 1px solid var(--warning-line);
  background: var(--warning-tint); color: var(--ink); font-size: 14px; line-height: 20px; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
@starting-style { .up-doc .up-doc-confirm { opacity: 0; transform: translateY(-6px); } }
.up-doc-confirm p { margin: 0; flex: 1 1 320px; }
.up-doc-confirm-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.up-doc-del-yes { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--error); color: #fff;
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, transform .12s var(--ease-out); }
.up-doc a.up-doc-del-yes:hover { background: var(--error-hover); color: #fff; }
.up-doc-del-yes:active { transform: scale(.97); }

/* ---------- панель действий: липкая стеклянная полоса, темнеет тенью по мере прокрутки ---------- */
.up-doc-bar { position: sticky; top: 12px; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 6px 6px 6px 8px; border-radius: 999px;
  background: var(--up-bar-bg); border: 1px solid var(--up-card-line); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(31, 27, 58, .04), 0 14px 34px -24px rgba(60, 40, 120, .4); }
@supports (animation-timeline: scroll()) {
  .up-doc-bar { animation: up-bar-float linear both; animation-timeline: scroll(root); animation-range: 0 180px; }
}
@keyframes up-bar-float {
  from { background: var(--up-bar-bg); box-shadow: 0 1px 2px rgba(31, 27, 58, .04), 0 14px 34px -24px rgba(60, 40, 120, .4); }
  to { 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-doc-bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.up-doc-bar-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.up-doc-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; line-height: 18px; color: var(--text-2); }
.up-doc-file.is-short { display: none; }
.up-doc .up-token.is-main { height: 36px; padding: 0 13px 0 10px; font-size: 14px; }
/* капсула комплекта: три вкладки, серая подложка внутри стеклянной полосы, белая подвижная подложка — как форматы в А2 */
.up-doc .up-fmt-wrap { min-width: 0; flex: 0 1 auto; }
.up-doc .up-fmt { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; width: 100%; padding: 3px; border-radius: 999px; background: var(--surface-2); border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.up-doc .up-fmt-pill { top: 3px; left: 3px; width: calc((100% - 6px) / 3); height: calc(100% - 6px); transform: translateX(calc(var(--i) * 100%)); }
.up-doc .up-fmt-tab { height: 36px; padding: 0 14px; gap: 6px; }
.up-doc .up-fmt-ic { display: inline-grid; }
/* главная кнопка — up-go в «готовом» виде со стрелкой вниз; PDF — пилюля рядом */
.up-doc .up-go { height: 44px; text-decoration: none; }
.up-doc .up-go[data-ready="true"] { padding: 0 2px 0 18px; }
.up-doc .up-go-ic { width: 40px; height: 40px; }
.up-doc .up-go[data-ready="true"] .up-go-ic svg { transform: none; }
.up-doc a.up-go:hover { color: var(--go-fg); }
.up-doc .up-go:hover:not(:disabled) .up-go-ic svg { transform: translateY(2px); }
.up-doc .up-pill.is-pdf { height: 44px; padding: 0 16px 0 12px; text-decoration: none; }
/* тёмная тема: up-kit красит акцентную кнопку в --primary — белый текст читается лучше тёмного из base() */
.up-doc[data-theme="dark"] .up-go.f-btn-accent[data-ready="true"] { color: #fff !important; }

/* ---------- сцена: лист крупно по центру на свечении; позади — карточки комплекта ---------- */
.up-doc-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 10px var(--pad) 28px;
  overflow-x: clip; clip-path: inset(0 0 -96px 0); }
/* круг 2 (замечание 1 — резкий переход в конце документа): раньше overflow: clip обрезал тень листа (0 30px 60px −26px уходит
   на 64 px ниже листа) по низу сцены — 36 px тени обрывались горизонтальной границей над строкой «Сохранён…». Теперь сцена
   по-прежнему режет вбок (свечение, колода не дают прокрутки) и сверху (углы колоды не наезжают на панель), а вниз — на 96 px
   ниже себя: тень сходит на фон страницы полностью. Строка «Сохранён…» — поверх тени. */
.up-doc-saved { position: relative; z-index: 1; }
/* круг 5 (05.11 ночь, замечания владельца 1 «Цветного градиента между страницами быть не должно» и 3 «Очень яркий градиент по
   сравнению с белым листом, уменьши градиент»). Замер tools/doc5_probe.py (CIELAB у промежутка и справа от листа, с выключенными
   по очереди слоями): цвет давали два слоя, тень листа — нет (у неё оттенок --ink, как у всех теней набора).
   1) Свечение up-glow сцены (кит, индиго → персик) на этой странице уже́ любого листа (794 px при листах 760–1040, края прозрачные)
      и было видно только в промежутках между листами — розовой полосой. Переопределение кита: на этой странице его нет.
   2) Цветные пятна фона рабочей области (кит, .up > .f-side + div) стоят в процентах высоты страницы: персик справа — на 14 %,
      индиго слева — на 44 %. На странице документа высотой 3000–8600 px персик ложился рядом с листами 1–2 и в промежутки (снимок
      владельца 3), индиго — в середину стопки. Переопределение кита: те же пятна, но от верха страницы в px — там, где они стоят
      у самой короткой страницы (презентация, 1366 px: 14 % ≈ 190 px, 44 % ≈ 600 px), — и слабее (×0,3): ореол у верха первого
      листа справа, до промежутков не доходит (персик гаснет к 70 % радиуса — к 582 px от верха, первый промежуток — от 868 px;
      индиго слева краем касается первого промежутка на 768–1024 — ΔE ≤ 0,74, глазом не видно: tools/doc5_gapcolor.py).
      Свечение индиго сверху (шапка, гаснет к 175 px, выше листа) — как в ките. */
.up-doc-stage > .up-glow { display: none; }
.up-doc > .f-side + div { background:
  radial-gradient(1100px 640px at 50% -260px, rgba(var(--up-indigo), .30), transparent 68%),
  radial-gradient(760px 560px at 104% 190px, rgba(var(--up-peach), .09), transparent 70%),
  radial-gradient(640px 460px at -6% 600px, rgba(var(--up-indigo), .03), transparent 70%),
  linear-gradient(180deg, #efecfa 0, var(--bg) 720px); }
.up-doc[data-theme="dark"] > .f-side + div { background:
  radial-gradient(1100px 640px at 50% -260px, rgba(var(--up-indigo), .26), transparent 68%),
  radial-gradient(760px 560px at 104% 190px, rgba(var(--up-peach), .036), transparent 70%),
  var(--bg); }
.up-stage-box { position: relative; width: 100%; max-width: 1040px; transition: max-width .55s var(--spring-soft); }
.up-stage-box.is-pl { max-width: 760px; }
.up-stage-box.is-sl { max-width: 880px; }
.up-deck { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* круг 2: у рабочего листа комплекта теперь несколько листов A4 подряд — колода позади высотой с первый лист (A4), не со
   всю стопку; у техкарты и слайда — как раньше, во всю сцену. Высота — от ширины сцены (единицы контейнера), не aspect-ratio:
   вместе с max-height он сжимал бы и ширину колоды */
.up-stage-box { container-type: inline-size; }
.up-stage-box.is-ds .up-deck { bottom: auto; height: min(100%, 100cqw * 297 / 210); }
/* круг 3: техкарта комплекта — тоже листы подряд (альбомные): колода высотой с первый альбомный лист */
.up-stage-box.is-tm .up-deck { bottom: auto; height: min(100%, 100cqw * 210 / 297); }
/* на < 768 первый лист — по содержимому (не A4): колода не выше ширины листа, иначе на 760 px она выглядывала на 11 px из-под
   первого листа (проход doc2_sweep, проверка deck) */
@media (max-width: 767px) { .up-doc-stage .up-stage-box.is-ds .up-deck { height: min(100%, 100cqw); } }
.up-deck-card { position: absolute; inset: 0; border-radius: 14px; background: #fff; transform-origin: 50% 70%; opacity: 1;
  box-shadow: 0 1px 2px rgba(31, 27, 58, .12), 0 18px 40px -22px rgba(31, 27, 58, .45), 0 0 0 1px rgba(31, 27, 58, .06);
  transform: rotate(calc(var(--p) * 2.4deg)) translate(calc(var(--p) * 16px), -10px) scale(.985);
  transition: transform .55s var(--spring-soft), opacity .3s var(--ease-out); }
.up-deck-card::after { content: ""; position: absolute; left: 10%; right: 10%; top: 26px; height: 6px; border-radius: 3px; background: #ece9f3; box-shadow: 0 16px 0 #f1eff6, 0 32px 0 #f1eff6; }
.up-deck-card[data-on="true"] { transform: none; opacity: 0; }
/* лист: появляется снизу пружиной, уходит короткой анимацией; содержимое листа — без собственной тени и скругления */
.up-paper { position: relative; z-index: 1; border-radius: 14px; overflow: hidden; background: #fff; color: #1f1b3a;
  box-shadow: 0 1px 2px rgba(31, 27, 58, .14), 0 30px 60px -26px rgba(31, 27, 58, .5), 0 0 0 1px rgba(31, 27, 58, .06);
  transition: transform .55s var(--spring-soft), opacity .3s var(--ease-out); }
@starting-style { .up-doc .up-paper { opacity: 0; transform: translateY(24px) rotate(1.2deg) scale(.975); } }
.up-paper[data-leaving="true"] { animation: up-paper-out .22s var(--ease-out) forwards; pointer-events: none; }
@keyframes up-paper-out { to { opacity: 0; transform: translateY(12px) rotate(-1.2deg) scale(.975); } }
/* круг 3: техкарта и план-конспект — листы doc_sheets.py (up-doc-sheets.css), сокращённого превью forms_common больше нет;
   подсказка «Таблицу можно прокрутить вбок» — между листами техкарты, у начала таблицы (up-doc-sheets.css, < 768) */
.up-scroll-hint { display: none; }

/* ---------- презентация: слайд 16:9 и миниатюры ---------- */
.up-slide-wrap { display: grid; gap: 12px; width: 100%; }
.up-slide { aspect-ratio: 16 / 9; container-type: inline-size; }
.up-slide-in { position: absolute; inset: 0; padding: 6.5% 8%; display: flex; flex-direction: column; justify-content: space-between; gap: 2%;
  transition: opacity .3s var(--ease-out), transform .4s var(--ease-apple); }
@starting-style { .up-doc .up-slide-in { opacity: 0; transform: translateX(14px); } }
.up-slide-cap { margin: 0; font-size: clamp(9px, 1.9cqw, 16px); line-height: 1.4; color: #5f5b76; }
.up-slide-mid { display: flex; align-items: center; gap: 6%; flex: 1 1 auto; min-height: 0; }
.up-slide-mid > * { min-width: 0; }
.up-slide-title { margin: 0; flex: 1 1 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 4.3cqw, 40px); line-height: 1.18; letter-spacing: -.02em; color: #1f1b3a; }
.up-slide-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(13px, 3.3cqw, 30px); line-height: 1.22; letter-spacing: -.015em; color: #1f1b3a; }
.up-slide-body { display: grid; gap: clamp(3px, 1.1cqw, 10px); flex: 1 1 0; font-size: clamp(9px, 2.2cqw, 19px); line-height: 1.4; color: #1f1b3a; }
.up-slide-body p { margin: 0; display: flex; gap: .5em; }
.up-slide-body p::before { content: "—"; color: #4b40b8; flex: 0 0 auto; }
.up-slide-body p.is-plain::before { content: none; }
.up-slide-formula { margin: 0; padding: .3em .7em; border-radius: .4em; background: #f1f0fa; font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 3.6cqw, 34px); line-height: 1.2; color: #2a2462; width: fit-content; }
.up-slide-pic { flex: 0 0 32%; align-self: stretch; border-radius: 8px; background: #f6f4fb; display: grid; place-items: center; color: #5f5b76; text-align: center; font-size: clamp(8px, 1.3cqw, 12px); line-height: 1.3; }
.up-slide-pic span { display: grid; justify-items: center; gap: 4%; }
.up-slide-pic svg { width: clamp(36px, 9cqw, 96px); height: auto; }
.up-slide-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.up-slide-bar { display: block; width: clamp(28px, 5.5cqw, 48px); height: 4px; border-radius: 2px; background: #4b40b8; flex: 0 0 auto; }
.up-slide-num { font-size: clamp(8px, 1.5cqw, 13px); line-height: 1.3; color: #8f8aa3; font-variant-numeric: tabular-nums; }
.up-slide-note { margin: 0; max-width: 720px; font-size: 14px; line-height: 20px; color: var(--text-2); text-align: center; }
.up-slide-note b { font-weight: 600; color: var(--ink); }
.up-thumbs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; width: 100%; padding: 2px 0; }
.up-thumb { position: relative; display: grid; align-content: space-between; gap: 3px; aspect-ratio: 16 / 9; min-height: 0; padding: 6px 8px; overflow: hidden; border: 0; border-radius: 8px; background: #fff; color: #1f1b3a;
  font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(31, 27, 58, .12), 0 0 0 1px rgba(31, 27, 58, .08);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.up-thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31, 27, 58, .45), 0 0 0 1px var(--ws-accent-border); }
.up-thumb[aria-pressed="true"] { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(31, 27, 58, .45), 0 0 0 2px var(--ws-accent); }
.up-thumb:active { transform: scale(.97); }
.up-thumb-n { font-size: 10px; line-height: 12px; color: #5f5b76; font-variant-numeric: tabular-nums; }
.up-thumb-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10px; line-height: 12px; font-weight: 700; }
.up-thumb-l { display: grid; gap: 2px; }
.up-thumb-l span { display: block; height: 3px; border-radius: 2px; background: #e6e3ef; }
.up-thumb-l span:nth-child(2) { width: 70%; }

/* строка «Сохранён в «Моих документах»» */
.up-doc-saved { margin: -8px 0 0; font-size: 14px; line-height: 20px; color: var(--text-2); text-align: center; }
.up-doc-saved svg { color: var(--ws-icon); vertical-align: -3px; margin-right: 6px; }
.up-doc-saved b { font-weight: 600; color: var(--ink); }

/* ---------- «Что дальше»: чипы, как «Дополнить урок» в А2; темы следующего урока — чипы со стрелкой ---------- */
.up-doc .up-addon { gap: 10px; padding-top: 8px; }
.up-doc .up-addon-head { gap: 10px; }
.up-doc .up-addon-head .up-hint { flex: 1 1 100%; }
.up-doc .up-addon-sub { display: grid; gap: 6px; padding-top: 14px; justify-items: center; }
.up-doc a.up-chip { text-decoration: none; }
.up-chip.is-topic { height: auto; min-height: 38px; padding: 7px 14px 7px 12px; white-space: normal; text-align: left; line-height: 20px; }
.up-chip.is-topic svg { flex: 0 0 auto; }
.up-chip.is-own { border-style: dashed; background: transparent; }

/* ---------- липкая полоса на телефоне: «Скачать» + PDF ---------- */
.up-dock-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.up-doc .up-dock .up-go { width: 100%; height: 48px; }
.up-doc .up-dock .up-pill.is-pdf { height: 48px; }

/* ---------- ширины ---------- */
@media (max-width: 1179px) {
  .up-doc-file.is-long { display: none; }
  .up-doc-file.is-short { display: block; }
}
@media (max-width: 1023px) {
  .up-doc { --pad: 24px; }
  .up-doc-bar { top: 68px; }  /* под липкой верхней панелью каркаса (56 px) */
  .up-doc .up-h1 { font-size: 34px; line-height: 40px; }
}
@media (max-width: 759px) and (min-width: 640px) {
  .up-doc-bar { flex-wrap: wrap; border-radius: 26px; padding: 8px; }
  .up-doc-bar-left { flex: 1 1 100%; }
  .up-doc-bar-right { flex: 1 1 100%; justify-content: flex-end; }
}
@media (max-width: 639px) {
  .up-doc { --pad: 16px; }
  .up-doc .up-main { padding-bottom: 16px; }
  .up-doc .up-hero { gap: 14px; }
  .up-doc .up-title { gap: 10px; }
  .up-doc .up-h1 { font-size: 26px; line-height: 32px; letter-spacing: -.015em; }
  .up-meta-chip { height: 28px; padding: 0 10px 0 8px; font-size: 13px; }
  .up-doc-del { padding: 0 8px; }
  /* панель на телефоне — только капсула или подпись формата; кнопки — в липкой полосе внизу */
  .up-doc-bar { position: static; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  .up-doc-bar-right, .up-doc-file { display: none !important; }
  .up-doc-bar-left { justify-content: center; }
  .up-doc .up-fmt-wrap { flex: 1 1 auto; }
  .up-doc .up-fmt { width: 100%; min-width: max-content; background: var(--up-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .up-doc .up-fmt-tab { padding: 0 12px; }
  .up-doc-stage { padding: 6px var(--pad) 22px; gap: 10px; }
  .up-paper, .up-deck-card { border-radius: 10px; }
  .up-deck-card { transform: rotate(calc(var(--p) * 2deg)) translate(calc(var(--p) * 8px), -7px) scale(.985); }
  .up-thumbs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad); scrollbar-width: none; }
  .up-thumbs::-webkit-scrollbar { display: none; }
  .up-thumb { flex: 0 0 124px; scroll-snap-align: start; }
  .up-slide-note { font-size: 13.5px; line-height: 19px; }
  .up-doc-saved { margin-top: -4px; font-size: 13.5px; }
  .up-doc .up-addon { padding: 4px 0 0; }
  .up-doc .up-dock { display: grid; margin-top: 16px; }
}
@media (max-width: 359px) {
  .up-doc .up-h1 { font-size: 24px; line-height: 30px; }
  .up-thumb { flex-basis: 116px; }
}

/* ========== круг 1 «Готового документа» (04.11): виды остальных форматов ==========
   Листы рабочего листа, контрольной, карточек, диктантов, сценария и самоанализа — up-doc-sheets.css (doc_sheets.py);
   здесь — то, что вокруг листа: ширина сцены, страницы документа (капсула набора up-fmt), предупреждение над листом,
   статус «Не подтверждён» в шапке, «Свой урок» (карточка «Как мы поняли ваш урок» — без файла), цели нажатия 44 px. */
.up-stage-box.is-ds { max-width: 760px; }
.up-stage-box.is-own { max-width: 880px; }

/* статус в строке параметров (свой урок «Не подтверждён») — кандидат в ДС: чип-статус с предупреждением */
.up-meta-chip.is-warn { border-color: var(--warning-line); background: var(--warning-tint); color: var(--warning); }
.up-meta-chip.is-warn svg { color: var(--warning); }

/* предупреждение сервиса над листом (диктант, словарный диктант, сценарий — «составлен нейросетью…», жёлтое, как alert
   сервиса) и подсказка самоанализа про «[впишите…]» (нейтральная) — кандидат в ДС: строка-примечание к документу */
.up-doc-note { display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 720px; margin: -4px auto 0; padding: 10px 16px 10px 12px; border-radius: 16px;
  border: 1px solid var(--up-card-line); background: var(--up-glass); color: var(--ink); font-size: 14px; line-height: 20px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.up-doc-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--ws-icon); }
.up-doc-note.is-warn { border-color: var(--warning-line); background: var(--warning-tint); }
.up-doc-note.is-warn svg { color: var(--warning); }

/* страницы документа (варианты, ключи, листы карточек): капсула набора up-fmt с подвижной подложкой по центру над листом.
   Переопределение: правило .up-doc .up-fmt выше красит капсулу комплекта внутри стеклянной панели в --surface-2 и растягивает
   на ширину; капсула страниц лежит прямо на сцене — ей возвращён вид капсулы набора (стекло, кромка), ширина по
   содержимому, колонки равные по числу страниц (--n). */
.up-doc-pages { justify-self: stretch; }
.up-doc .up-fmt.is-pages { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); width: max-content; min-width: 0; margin: 0 auto;
  background: var(--up-glass); border-color: var(--up-card-line); box-shadow: 0 1px 2px rgba(31, 27, 58, .04), inset 0 1px 0 rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.up-doc .up-fmt.is-pages .up-fmt-pill { width: calc((100% - 6px) / var(--n)); }
.up-doc .up-fmt.is-pages .up-fmt-tab { padding: 0 16px; }
.up-doc-pnote { margin-top: -4px !important; }

/* «Свой урок»: карточки интерфейса (не бумага — цвета темы), правка шапки и этапов, «Что ещё нашлось в файле» */
.up-own { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.up-own-card { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 28px 26px; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--up-card-line); box-shadow: 0 1px 2px rgba(31, 27, 58, .06), 0 24px 50px -30px rgba(31, 27, 58, .45);
  transition: opacity .3s var(--ease-out), transform .55s var(--spring-soft); }
@starting-style { .up-doc .up-own-card { opacity: 0; transform: translateY(16px); } }
.up[data-theme="dark"] .up-own-card { box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); }
.up-own-top { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.up-own-src { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.up-own-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 26px; color: var(--ink); }
.up-own-lead { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--text-2); }
.up-own-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.up-own-grid .up-field.is-wide { grid-column: 1 / -1; }
.up-own-st { display: grid; gap: 10px; }
.up-own-sthead { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.up-own-sttitle { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.up-own-hint { display: none; font-size: 13px; line-height: 18px; color: var(--text-2); }
@container (max-width: 700px) { .up-own-hint { display: inline; } }
.up-own-scroll { overflow-x: auto; margin: 0 -6px; padding: 0 6px 4px; }
.up-own-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--ink); }
.up-own-table th { padding: 0 10px 8px; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); }
.up-own-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }  /* круг 3, ответ 11 — ниже */
.up-own-table .is-num { width: 34px; padding-left: 4px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.up-own-table .is-name { width: 32%; }
.up-own-table .is-time { width: 92px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* «Ход урока» после подтверждения — таблица только с текстом. Круг 3 (ответ 11, «сделать по центру»): ячейки строки — по
   середине по вертикали (вариант 2 круга 2), воздух под шапкой из 4а — 12 px от линии шапки до первой строки (как отступ
   содержимого строки от линии под ним). Правки в таблице больше нет: этапы в правке — карточки этапов (ниже). */
.up-own-table tbody tr:first-child > td { padding-top: 12px; }
.up-own-table tr.is-total td, .up-own-table tr.is-total th { border-bottom: 0; font-weight: 600; color: var(--ink); font-size: 14px; padding-top: 10px; }
.up-own-rows { display: grid; }
.up-own-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.up-own-row:first-child { padding-top: 0; border-top: 0; }
.up-own-k { font-size: 14px; line-height: 21px; font-weight: 600; color: var(--ink); }
.up-own-v { min-width: 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.up-own-none { color: var(--text-2); }
.up-own-ul { margin: 0; padding-left: 18px; }
/* шапка подтверждённого урока — таблица листа в цветах темы (это интерфейс, не бумага) */
.up-ds-meta.is-ui th, .up-ds-meta.is-ui td { border-color: var(--line); color: var(--ink); }
.up-ds-meta.is-ui { font-size: 14px; line-height: 21px; }
.up-ds-meta.is-ui th { background: var(--surface-2); }
/* ---------- этапы урока в правке — карточки этапов (круг 2, замечание 4б, вариант 3; круг 3, ответ 10 — «карточки», единственный
   вид в правке) — кандидат в ДС: блок этапа. Номер слева; сверху — поле «Этап» (тянется) и «Время» 90 px с подписью «мин»; ниже
   на 12 px — деятельность учителя и обучающихся двумя колонками с подписями (как шапка таблицы: 13/18, 600, --text-2). Этапы
   разделены линией --line и 16 px сверху и снизу — как строки «Что ещё нашлось в файле» в той же карточке: без карточек в
   карточке и без лишних рамок. Прокрутки вбок нет; на < 640 колонки — друг под другом, поле «Время» — под полем «Этап». ---------- */
.up-own-stages { display: grid; margin: 0; padding: 0; list-style: none; }
.up-own-stage { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; row-gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.up-own-stage:first-child { padding-top: 6px; border-top: 0; }
.up-own-stage:last-child { border-bottom: 1px solid var(--line); }
.up-own-stage-n { grid-row: 1; align-self: start; padding-top: 12px; font-size: 14px; line-height: 20px; color: var(--text-2); font-variant-numeric: tabular-nums; }  /* против середины поля «Этап» (44 px), и когда «Время» перенесено ниже */
.up-own-stage-top { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.up-own-stage-top > .up-input { flex: 1 1 220px; min-width: 0; }
.up-own-stage-min { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 14px; line-height: 20px; color: var(--text-2); }
.up-own-stages .up-own-min { width: 90px; }
.up-own-stage-acts { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.up-own-stage-acts p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.up-own-stage-acts .up-own-stage-k { margin-bottom: 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); }
@media (max-width: 639px) {
  .up-own-stage-acts { grid-template-columns: minmax(0, 1fr); }
  .up-own-stage-top > .up-input { flex-basis: 100%; }
}

/* кнопка «Верно, сохранить» — up-go панели с галочкой: при наведении галочка не уезжает вниз, как стрелка «Скачать» */
.up-doc .up-go.is-save:hover:not(:disabled) .up-go-ic svg { transform: scale(1.08); }

/* цели нажатия ≥ 44 px на телефоне и планшете (до 767 px, как расширения набора шага 0б) — невидимым расширением, вид не
   меняется: «Мои документы», «Удалить» (32), чипы «Что дальше» (38), вкладки капсул (36), «Изменить» у своего урока (36).
   Только до 767 px: position: relative на десктопе сдвигает сглаживание чипов на 1/255 (снимки уже сделанных видов — без отличий).
   Отступ ::after считается от внутреннего края рамки: у пилюли с рамкой 1 px — −5 px (36 → 44), у чипа (38) — −4 px.
   Подписи полей (label над полем 44 px) — не отдельная цель: нажатие ставит фокус в поле (так же решено в наборе, шаг 0б). */
@media (max-width: 767px) {
  .up-doc .up-back, .up-doc .up-doc-del, .up-doc .up-chip, .up-doc .up-fmt-tab { position: relative; }
  .up-doc .up-back::after { content: ""; position: absolute; inset: -12px -8px; }
  .up-doc .up-doc-del::after { content: ""; position: absolute; inset: -6px 0; }
  .up-doc .up-chip::after { content: ""; position: absolute; inset: -4px 0; }
  .up-doc .up-fmt-tab::after { content: ""; position: absolute; inset: -4px 0; }
  .up-doc .up-own .up-pill::after { content: ""; position: absolute; inset: -5px 0; }
}

@media (max-width: 639px) {
  .up-doc .up-fmt.is-pages { width: max-content; min-width: 0; background: var(--up-glass); }
  .up-doc .up-fmt.is-pages .up-fmt-tab { padding: 0 12px; }
  /* лента страниц вбок, если не помещается: затухание по 16 px с обеих сторон (у ленты форматов набора справа 36) */
  .up-doc .up-doc-pages { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .up-doc-note { margin-top: -2px; padding: 10px 14px 10px 12px; font-size: 13.5px; line-height: 19px; }
  .up-paper.is-ds { border-radius: 10px; }
  .up-own { gap: 12px; }
  .up-own-card { padding: 18px 16px 20px; border-radius: 18px; gap: 14px; }
  .up-own-title { font-size: 17px; line-height: 24px; }
  .up-own-lead { font-size: 14px; line-height: 21px; }
  .up-own-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .up-own-scroll { margin: 0 -16px; padding: 0 16px 4px; }
  .up-own-row { grid-template-columns: minmax(0, 1fr); padding: 10px 0; }
}

/* Фокус кнопок и ссылок — правило набора (up-kit.css, раздел «фокус кнопок и ссылок»): владелец 05.11 принял его на всех
   экранах (ответы 16–18); блок «СИСТЕМНАЯ ПРАВКА 05.11», стоявший здесь, перенесён в набор. */

/* ---------- 09.11 UX-разбор, п. 1–2: «Ещё к этому уроку» сразу под полосой скачивания — блок «Дополнить урок» кита (up-addon:
   подпись капсом, подсказка, чипы up-chip). Подсказка меняется после «Скачать» и без тарифа (со ссылкой «Выбрать тариф» — up-inline-a кита). После «Скачать» значок кнопки — галочка (Gemini ux1, вариант A) ---------- */
.up-doc .up-doc-more { padding-top: 0; gap: 8px; }
.up-doc .up-doc-more .up-addon-head { gap: 2px 10px; }
.up-doc-free { margin: -6px auto 0; }
.up-go[data-done="true"] .up-go-ic svg { animation: up-doc-dl .2s var(--ease-out) both; }
@keyframes up-doc-dl { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .up-go[data-done="true"] .up-go-ic svg { animation: none; } }
/* телефон: чипы — одной строкой с прокруткой вбок (Gemini ux1: «карусель без стрелок», край уходит за экран) */
@media (max-width: 639px) {
  .up-doc .up-doc-more .up-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px;
    scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .up-doc .up-doc-more .up-chips::-webkit-scrollbar { display: none; }
  .up-doc .up-doc-more .up-chip { flex: 0 0 auto; }
}