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

/* ============================================================ Ряд «лид + кнопки» */
.doc-lead {
  margin: 0;
  max-width: 640px;
  font: 400 18px/1.5 var(--font-body);
  text-wrap: pretty;
}

.doc-lead--warning {
  color: #6b5200;
}

.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;
}

/* «Удалить» у заголовка и в списке: текстовая кнопка, при наведении красная */
.doc-del {
  color: var(--text-muted);
  font-weight: 500;
}

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

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

.doc-confirm[hidden] {
  display: none;
}

.doc-confirm form {
  margin: 0;
}

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

.doc-confirm__yes:active {
  background: #a5121f;
}

/* ============================================================ Карточка документа */
.lesson-doc {
  display: grid;
  gap: 24px;
}

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


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

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

.doc-dash {
  display: flex;
  gap: 8px;
  font: 400 14px/1.5 var(--font-body);
}

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

/* Планируемые результаты: серые карточки */
.doc-results {
  gap: 24px;
}

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

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

.doc-extra__v {
  font: 400 14px/1.5 var(--font-body);
  margin-top: 4px;
  text-wrap: pretty;
}

/* ============================================================ Ход урока */
/* Прокручивается вся карточка, как в макете: шапка едет вместе с таблицей, а
   подпись «Таблицу можно прокрутить вбок» обрезается краем карточки */
.doc-stages {
  padding: 8px 32px;
  overflow-x: auto;
}

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

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


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

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

.doc-stage p {
  font: 400 14px/1.5 var(--font-body);
  text-wrap: pretty;
}

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

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

/* ============================================================ Нижние карточки */
/* Три карточки одной высоты; в белых строки растягиваются на всю высоту, а в
   тёмном чек-листе пункты прижаты кверху с зазором 12 px — так отрисован макет
   (у .tk-card из cabinet.css содержимое прижато к верху) */
.doc-bottom .tk-card:not(.tk-card--dark) {
  align-content: stretch;
}

.doc-row__v {
  font: 400 14px/1.5 var(--font-body);
  margin-top: 4px;
}

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

.doc-checklist {
  gap: 12px;
}

.doc-checklist__source {
  font: 400 14px/1.5 var(--font-body);
  color: var(--gray-400);
  margin-top: 8px;
}

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

.tk-list li::marker {
  color: var(--text-muted);
  font: 500 14px/1.5 var(--font-mono);
}

.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: 32px;
  border-radius: var(--radius-xl);
  display: grid;
  gap: 16px;
  font-size: 16px;
}

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

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


.doc-stages .tk-stages-scroll {
  overflow: visible;
}

/* ============================================================ Мои документы */
.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(--hairline-soft);
}

.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;
  align-items: center;
}

/* ============================================================ Узкие экраны */
@media (max-width: 1023px) {
  .doc-stages {
    padding: 4px 20px;
  }

  /* На телефоне действия всегда отдельной строкой под темой документа */
  .docs-row__actions {
    flex-basis: 100%;
  }

  .doc-actions .tk-btn {
    flex: 1 1 auto;
  }

  .balance-note {
    padding: 20px;
    border-radius: 20px;
  }
}