/* Документ (техкарта, план-конспект, рабочий лист, контрольная), публичный
   пример и список «Мои документы». Подключается из app/document.html,
   app/documents.html и pages/example.html. Лист документа в новом виде — этап 4;
   здесь те же блоки в токенах «Бланка». */

/* ============================================================ Ряд «строка + кнопки» */
.doc-lead {
  margin: 0;
  max-width: 640px;
  font: var(--t-lead);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  text-wrap: pretty;
}

.doc-lead--warning {
  color: var(--warning);
}

.doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Длинная тема урока переносится внутри заголовка, а «Удалить» остаётся справа */
.tk-page-head > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}

/* «Удалить» — опасная ссылка (4.6): красная всегда, а не только при наведении */
.doc-del {
  color: var(--error);
}

.doc-del:hover {
  color: var(--error-hover);
}

/* Подтверждение удаления: без JS раскрыто через ?confirm=1 */
.doc-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.doc-confirm form {
  margin: 0;
}

.doc-confirm__yes {
  background: var(--error);
}

.doc-confirm__yes:hover,
.doc-confirm__yes:active {
  background: var(--error-hover);
}

/* ============================================================ Документ */
.lesson-doc {
  display: grid;
  gap: 24px;
}

.doc-title {
  text-wrap: balance;
}

/* Цель урока / инструкция: подпись и абзац */
.doc-goal p {
  margin: 4px 0 0;
  color: var(--ink);
  font: var(--t-text);
  text-wrap: pretty;
}

/* Вторая подпись блока (у классного часа — «Задачи» после цели): отступ сверху, иначе подпись прилипала к абзацу
   цели; список под ней — в 4 px, как абзац под первой */
.doc-goal > .tk-eyebrow:not(:first-child) {
  margin-top: 16px;
}

.doc-goal > .tk-eyebrow + .tk-list {
  margin-top: 4px;
}

/* Задачи: три колонки, строки «— текст» */
.doc-tasks__group {
  display: grid;
  gap: 8px;
  align-content: start;
}

.doc-dash {
  display: flex;
  gap: 8px;
  font: var(--t-small);
}

.doc-dash__mark {
  color: var(--muted);
}

/* Планируемые результаты: серые подложки */
.doc-results {
  gap: 16px;
  container-type: inline-size;
}

/* Пять карточек в сетке auto-fit 220 px (колонок — (ширина + 16) / 236): при 4 колонках (928–1163 px) и при 2
   (456–691 px) «Предметные» висела одна в последнем ряду — пятая карточка во всю ширину ряда; при 3 колонках и
   в одну — как было (techkarta-back#162) */
@container (928px <= width < 1164px) {
  .doc-results > .doc-result:nth-child(5):last-child {
    grid-column: 1 / -1;
  }
}

@container (456px <= width < 692px) {
  .doc-results > .doc-result:nth-child(5):last-child {
    grid-column: 1 / -1;
  }
}

.doc-result {
  display: grid;
  gap: 8px;
  align-content: start;
}

/* Межпредметные связи, формы работы и прочее: колонки с тонкой линией сверху */
.doc-extra {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.doc-extra__v {
  font: var(--t-small);
  margin-top: 4px;
  text-wrap: pretty;
}

/* ============================================================ Ход урока */
/* Широкая таблица прокручивается внутри карточки своей обёрткой (.tk-stages-scroll); без прокрутки — этап 4.
   Колонка сетки карточки — по её ширине, а не по min-content таблицы (1100 px): иначе шапка с подсказкой
   «Таблицу можно прокрутить вбок» растягивалась на 1100 px и подсказка уезжала за край (#146) */
.doc-stages {
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 24px;
  overflow-x: auto;
}

.doc-stages__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 16px 0 8px;
}

.doc-stages__head .tk-h3 {
  white-space: nowrap;
}

/* План-конспект: этапы разделами с абзацами */
.doc-stage {
  display: grid;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.doc-stage__head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
}

/* Узкий телефон: длинное время части («4–15 мин (11 мин)») не уступает места, и название налезало на него —
   время второй строкой под названием. Только этапы урока и части классного часа (.lesson-stages): у слайдов
   презентации третья ячейка другая (#145) */
@media (max-width: 479px) {
  .lesson-stages .doc-stage__head {
    grid-template-columns: 32px minmax(0, 1fr);
    row-gap: 4px;
  }

  .lesson-stages .doc-stage__head .tk-num {
    grid-column: 2;
  }
}

.doc-stage p {
  font: var(--t-small);
  text-wrap: pretty;
}

.doc-stage__label {
  color: var(--ink);
  font-weight: 600;
}

.doc-stages__total {
  padding: 16px 0 24px;
  font: 600 16px/24px var(--font-sans);
  color: var(--ink);
}

/* ============================================================ Нижние карточки */
.doc-bottom .tk-card:not(.tk-card--dark) {
  align-content: stretch;
}

.doc-row__v {
  font: var(--t-small);
  margin-top: 4px;
}

.doc-pretty {
  text-wrap: pretty;
}

.doc-checklist {
  gap: 12px;
}

.doc-checklist .tk-check-row .tk-icon {
  color: var(--muted);
}

.doc-checklist__source {
  font: var(--t-small);
  color: var(--muted);
  margin-top: 8px;
}

/* Задания рабочего листа и контрольной */
.tk-list {
  margin: 0;
  padding-left: 28px;
  display: grid;
  gap: 8px;
  font: var(--t-text);
  color: var(--ink);
}

.tk-list li::marker {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.doc-keys {
  display: grid;
  gap: 12px;
}

/* ============================================================ «Что дальше» */
.next-lesson__topics {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Темы бывают длинными — на телефоне ссылка переносится, а не растягивает карточку */
.next-lesson__topics .tk-chip-link {
  white-space: normal;
}

/* Блок при нулевом остатке — встроенное уведомление на ширину содержимого */
.balance-note {
  padding: 20px 24px 20px 52px;
  display: grid;
  gap: 16px;
  font: var(--t-text);
}

.balance-note::before {
  left: 20px;
  top: 23px;
}

.balance-note p {
  margin: 0;
  text-wrap: pretty;
}

.balance-note .alert p + p {
  margin: 0;
}

/* ============================================================ Мои документы */
.docs-list {
  gap: 0;
}

.docs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.docs-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.docs-row:last-child {
  padding-bottom: 0;
}

.docs-row__main {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 280px;
}

.docs-row__topic {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.docs-row__topic:hover {
  color: var(--primary);
}

/* Действия строки: метка формата и группа кнопок переносятся целыми блоками */
.docs-row__actions {
  display: flex;
  gap: 8px 12px;
  align-items: center;
  flex-wrap: wrap;
}

.docs-row__btns {
  display: flex;
  gap: 8px 16px;
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================ Узкие экраны */
/* До 1280 px действия строки «Мои документы» всегда отдельной строкой под темой: иначе на 1024–1127 px
   строки с длинной меткой формата уходили в два яруса, а с короткой оставались в один (techkarta-back#149, C2-11) */
@media (max-width: 1279px) {
  .docs-row__actions {
    flex-basis: 100%;
  }
}

@media (max-width: 1023px) {
  .doc-stages {
    padding: 4px 16px;
  }

  /* Кнопки «Что дальше» — ровным рядом во всю ширину, как ряд действий над документом: по ширине текста правый
     край был рваным (techkarta-back#161) */
  .doc-actions .tk-btn:not(.tk-btn--tertiary),
  .next-lesson .tk-btn-row > .tk-btn:not(.tk-btn--tertiary) {
    flex: 1 1 auto;
  }
}

@media (max-width: 767px) {
  /* DOCX и PDF — ровными половинами: лишнее место делится поровну, а базовые ширины разные, и кнопки выходили
     168 и 152 px. Только телефон: на 768–1023 то же правило превращает ряд в сетку 2×N (techkarta-back#161) */
  .doc-actions .tk-btn:not(.tk-btn--tertiary) {
    min-width: calc(50% - 4px);
  }

  .balance-note {
    padding: 16px 16px 16px 48px;
  }

  .balance-note::before {
    left: 16px;
    top: 19px;
  }
}

/* На 320 px «Удалить» помещается в ряд с DOCX (PPTX) и PDF, а не уходит третьим ярусом: зазор 12 px и поля
   кнопок 16 px — ряд 231 из 256 px (techkarta-back#149, C2-11) */
@media (max-width: 359px) {
  .docs-row__btns {
    column-gap: 12px;
  }

  .docs-row__btns .tk-btn:not(.tk-btn--tertiary) {
    padding-inline: 16px;
  }
}

/* Пустой список «Мои документы»: приглашение открыть пример — голубая карточка с картинкой формата,
   одна для всех разделов (решение владельца 10.10) */
.docs-example {
  --tint: var(--pastel-blue);
  --edge: var(--primary-edge);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  border: 1px solid var(--edge);
  border-radius: var(--r-16);
  background: linear-gradient(135deg, var(--tint) 0%, var(--tint) 45%, var(--surface) 140%);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.docs-example:hover {
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card-hover);
}

.docs-example__art {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  color: var(--link);
}

.docs-example__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.docs-example__title {
  font: var(--t-h3);
}

.docs-example__text {
  font: var(--t-small);
  color: var(--text-2);
}

.docs-example__btn {
  flex-shrink: 0;
  background: var(--surface);
}

@media (max-width: 767px) {
  .docs-example {
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
  }

  .docs-example__art {
    width: 56px;
    height: 56px;
  }

  .docs-example__btn {
    width: 100%;
  }
}

/* ------------------------------------------------------------ Из main после ответвления дизайна:
   правила main как есть, старые токены — через совместимые имена в cabinet/base.css. */
/* Лид и значок «Минуты сходятся» (#93) — в одну строку, на узком экране значок переносится под лид */
.doc-lead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
/* Подложка и цвет — как у «Рекомендуем» на тарифах (.plan-card__badge) */
.doc-minutes {
  background: var(--blue-50);
  color: var(--primary);
}
/* Текст диктанта (techkarta-back#6) — крупнее и с красной строкой: его читают вслух, как в DOCX (14 pt, 1,5) */
.dictation-text {
  margin: 0;
  max-width: 760px;
  font: 400 18px/1.7 var(--font-body);
  text-indent: 2em;
  color: var(--ink);
}
/* Слова словарного диктанта — колонками, крупно: их диктуют по списку */
.dictation-words {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  font-size: 18px;
  overflow-wrap: anywhere; /* «достопримечательность» не залезает в соседнюю колонку */
}
/* И кнопки: «Технологическая карта этого урока» на 360 px не помещается в строку и раздвигала страницу */
.next-lesson .tk-btn {
  height: auto;
  min-height: 44px;
  white-space: normal;
  text-align: center;
}
/* Ключи к карточкам на телефоне: «Карточка 1 · Базовый уровень» строкой, ответы под ней во всю ширину. Таблицей
   «Карточка» и «Уровень» занимали 2/3 ширины, а ответы шли колонкой в 80 px по 1–2 символа */
@media (max-width: 479px) {
  .cards-keys,
  .cards-keys tbody,
  .cards-keys tr {
    display: block;
  }

  .cards-keys thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .cards-keys tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .cards-keys td {
    display: inline;
    padding: 0;
    border: 0;
  }

  .cards-keys td:first-child::before {
    content: "Карточка ";
  }

  .cards-keys td:nth-child(2)::before {
    content: " · ";
  }

  .cards-keys td:last-child {
    display: block;
    margin-top: 4px;
    overflow-wrap: anywhere;
  }
}
/* Свой урок, правка этапов: поле минут в колонке 64 px. С отступами 16 px и местом под стрелки числового поля
   на текст оставалось 15 px, и «15» обрезалось — отступы 8 px */
.own-stages .time .tk-input {
  padding: 0 8px;
}