/*
 * Листы Маршрутной карты (Блок 3).
 *
 * Два источника, и они расходятся:
 *  1. Макет-эталон — Ресурсы/Дизайн артефактов/Мокап PDF для курса по ИИ/
 *     design_handoff_lesson_sheet/README.md;
 *  2. НАСТОЯЩИЙ лист Урока 2, который студенты уже унесли в свою папку, — Уроки/
 *     Урок 2 .../Светофор задач — интерактив/index.html.
 *
 * Где они спорят, верен лист Урока 2: студент подшивает листы уроков в один регламент,
 * и рядом они обязаны выглядеть родней. Макет рисовался под заголовок в два слова
 * («Светофор данных»), и его 70px на живых заголовках урока не живут: лист Урока 2
 * ушел на 52px, и наши заголовки («Как убедиться, что промпт зеленый») длиннее его.
 *
 * Расхождения с макетом, взятые с листа Урока 2: h1 52px вместо 70, подзаголовок 18px
 * вместо 19.5, номер страницы в подвале (макет о нем не знает).
 *
 * Шрифт: Inter лежит своими файлами в assets/fonts, начертания 400 и 500. Жирные
 * веса браузер синтезирует сам — ровно как на листе Урока 2. Это не недосмотр:
 * настоящий Inter 800 сделал бы наш лист жирнее соседнего в той же папке.
 */

/* ───────── Акцент листов ─────────
 *
 * Синий (--map-accent) держит каркас: рельс-дорогу, номер урока, бэнд программы. Он же
 * на листе Урока 2, и именно он делает наши листы роднёй ему в общей папке студента.
 *
 * Содержание раскрашено зеленым. Это цвет урока — он так и называется, «Едем на зеленый».
 * Голубые заливки, которые стояли здесь раньше, были инерцией от синего рельса: весь лист
 * уходил в синеву, хотя на эталоне так не сделано. У листа Урока 2 шапки колонок
 * разноцветные — зеленая, желтая, красная, по светофору: синий каркас, содержание по смыслу.
 *
 * Светофорить наши три листа нечем: у эталона цвет означает КАТЕГОРИЮ задачи, а у нас
 * список, чек-лист и правила — красная шапка над правилами проверки читалась бы как
 * «запрещено». Поэтому акцент один на все три листа, а различает их композиция:
 * список карточек, сетка из шести, правила в столбик. Светофор жив в точках подвала.
 *
 * Оттенки взяты с эталона (.gh на листе Урока 2) — рядом они не спорят. */
:root {
  --sheet-accent-bg: #eef8f1;
  --sheet-accent-line: #cdebd7;
  --sheet-dot: #16a34a;
  --sheet-accent-text: #15703c;
}

/* На экране листов не видно. Но лежат они НЕ под display: none: спрятанному так
   элементу браузер не считает высоту, а без высоты нечем разложить длинный список
   задач по страницам. Поэтому контейнер вынесен за левый край и схлопнут в нулевую
   высоту: строки разложены и меряются, а документ не растет — иначе iframeResizer
   растянул бы iframe урока на лишние две с половиной тысячи пикселей.
   Прием — с листа Урока 2 (#sheets), там он и проверен печатью. */
#print-root {
  position: absolute;
  top: 0;
  left: -20000px;
  width: 1122px;
  height: 0;
  overflow: hidden;
}

/* Лист — жесткий прямоугольник: A4 landscape при 96 dpi. Что не влезло, срезается,
   поэтому пункты раскладывает по страницам код (renderPaged в block3.html), а не браузер. */
.sheet {
  width: 1122px;
  height: 793px;
  background: #fff;
  display: flex;
  color: #16202e;
  overflow: hidden;
  page-break-after: always;
  break-after: page;
  /* Без этого Chrome выбрасывает из печати все заливки, и рельс уходит белым. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sheet:last-child { page-break-after: auto; break-after: auto; }
.sheet, .sheet * { font-family: 'Inter', Arial, sans-serif; }

/* ───────── Рельс-«дорога» слева ───────── */

.sheet-rail {
  width: 188px;
  flex: none;
  background: var(--map-accent);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 24px 40px;
}
.sheet-rail .lesson-word {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .34em;
  opacity: .85;
  /* Компенсация трекинга: без нее слово оптически уезжает левее цифры */
  padding-left: .34em;
}
.sheet-rail .lesson-num {
  font-weight: 800;
  font-size: 104px;
  line-height: .9;
  margin-top: 4px;
}
/* justify-content: space-between гарантирует равные штрихи сверху и снизу —
   нижний не превращается в огрызок. */
.sheet-road {
  flex: 1;
  width: 5px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.sheet-road i {
  width: 5px;
  height: 18px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .55);
  flex: none;
}

/* ───────── Основное поле ───────── */

.sheet-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 26px 40px;
  min-width: 0;
}
.sheet-band {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6e9ef;
}
.sheet-band .prog {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--map-accent);
  white-space: nowrap;
}
.sheet-band .desc {
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .02em;
  color: #8a93a3;
  white-space: nowrap;
}
/* Заголовок — всегда в одну строку. Кегль подбирает fitTitle() в sheets.js: начинает
   с 52px эталона и ужимает, пока строка не влезет в ширину поля. Прибить намертво
   нельзя: на листе Урока 2 заголовок был в два слова, а наши длиннее («Как убедиться,
   что промпт зеленый» на 52px переносится), и Оля их еще будет править. Перенос стоит
   52px высоты тела — ровно из-за него чек-лист из шести правил разъезжался на два листа. */
/* Высота строки — с запасом под выносные элементы кириллицы. На эталоне здесь line-height: 1,
   и там это сходит с рук: в заголовке «Светофор задач» нет ни одной буквы с хвостиком ниже
   базовой линии. У нас есть — и «У» в «Как убедиться, что промпт зеленый» срезалась краем
   overflow: hidden, потому что глифы Inter выше строки в 52px. Убрать обрезку нельзя:
   по ней fitTitle() меряет, влез ли заголовок. Отступ сверху уменьшен на прирост строки,
   чтобы заголовок остался на прежнем месте. */
.sheet h1 {
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #16202e;
  margin: 20px 0 0;
  white-space: nowrap;
  overflow: hidden;
}
.sheet .sheet-sub {
  font-weight: 400;
  font-size: 18px;
  color: #5b6573;
  margin-top: 10px;
}

/* Тело листа. flex: 1 + min-height: 0 + overflow: hidden обязательны: на них держится
   замер «влезло / не влезло» (scrollHeight против clientHeight). */
/* Тело листа — колонка: так плашка отложенного прижимается к низу (margin-top: auto),
   а не висит вплотную под коротким списком посреди пустого листа.
   flex: 1 + min-height: 0 + overflow: hidden обязательны: на них держится замер
   «влезло / не влезло» (scrollHeight против clientHeight). */
.sheet-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
}

.sheet-foot {
  margin-top: 16px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e6e9ef;
}
/* Номер страницы показывается, только когда лист перелился на вторую (лист Урока 2) */
.sheet-foot .pageno {
  font-weight: 600;
  font-size: 12.5px;
  color: #8a93a3;
}
.sheet-dots { display: flex; align-items: center; gap: 7px; }
.sheet-dots i { width: 10px; height: 10px; border-radius: 50%; }

/* ───────── Тело: список пунктов (лист 1) ───────── */

/* Задача — карточка с зеленой точкой, а не строка с пустым квадратом.
   Чекбокс приглашал поставить галочку, а это перечень того, что УЖЕ можно поручить
   нейросети, а не список дел. Точка — прием эталона (.ci .b на листе Урока 2).
   Карточки крупнее строк намеренно: у главбуха может оказаться всего две зеленые
   задачи, и они должны читаться как две карточки, а не как две сиротливые строчки
   вверху пустого листа. */
.sheet-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  align-content: start;
}
.sheet-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--sheet-accent-bg);
  border: 1px solid var(--sheet-accent-line);
  border-radius: 11px;
  padding: 11px 14px;
}
.sheet-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sheet-dot);
  flex: none;
  margin-top: 6px;
}
.sheet-item .txt { font-size: 15px; line-height: 1.4; color: #2b3645; }
.sheet-item .badge-print {
  display: inline-block;
  font-weight: 600;
  font-size: 11px;
  color: var(--sheet-accent-text);
  border: 1px solid var(--sheet-accent-line);
  background: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 7px;
  white-space: nowrap;
}

/* ───────── Тело: карточки (листы 2 и 3) ───────── */

.sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 11px;
  align-content: start;
}
.sheet-card {
  border: 1px solid #e6e9ef;
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}
/* Шапка одной высоты у всех шести карточек: заголовки правил разной длины, и шапки
   разъезжались по высоте — сетка выглядела неопрятно. Высота взята под самый длинный
   заголовок в три строки; пустое место в короткой шапке не страшно, разнобой страшнее.
   Именно height, а не min-height: с min-height шапка все равно вырастала под трехстрочный
   заголовок, и выравнивания не получалось. */
.sheet-card .head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  background: var(--sheet-accent-bg);
  border-bottom: 1px solid var(--sheet-accent-line);
  height: 74px;
  box-sizing: border-box;
  overflow: hidden;
}
.sheet-card .num {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  color: var(--sheet-accent-text);
  flex: none;
}
.sheet-card .head .t {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.3;
  color: #16202e;
}
.sheet-card .body {
  padding: 11px 14px 13px;
  font-size: 14px;
  line-height: 1.4;
  color: #2b3645;
}
/* Пример из задач студента — с подписью: без нее приписка под правилом читалась
   как непонятно чей огрызок. */
.sheet-card .example {
  margin-top: 9px;
  background: #f7faf8;
  border: 1px solid #e8efe9;
  border-radius: 9px;
  padding: 8px 10px;
}
.sheet-card .example .lbl {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sheet-accent-text);
  margin-bottom: 3px;
}
.sheet-card .example .txt {
  font-size: 13px;
  line-height: 1.36;
  color: #5b6573;
}

/* ───────── Полоса-правило (лист 3) и плашка отложенного (лист 1) ───────── */

/* Правила проверки — широкими полосами во всю ширину листа, одна под другой.
 *
 * Конструкция взята с «Карты зон риска» Урока 2: слева плашка-заголовок с заливкой,
 * справа тело. Три колонки тут не работают: правило по рамке урока состоит из двух
 * частей («что именно проверяю» и «что делаю, если в ответе ошибка»), и такой текст
 * в узкую колонку не влезает.
 *
 * Правил бывает от трех до шести, и на шести лист переливается на вторую страницу.
 * Это нормально и предусмотрено: разбивка своя, номер страницы в подвале появится сам.
 * Гнать кегль вниз ради «влезло любой ценой» не надо — лист читают с бумаги. */
.sheet-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: start;
}
.sheet-rules .sheet-card { flex-direction: row; }
.sheet-rules .sheet-card .head {
  /* height: auto обязателен: у карточек чек-листа шапка жестко 74px (там ею выравнивают
     сетку), и в полосе заливка обрывалась, не доходя до низа. Здесь высоту задает
     полоса целиком. */
  height: auto;
  min-height: 0;
  width: 190px;
  flex: none;
  align-items: center;
  border-bottom: none;
  border-right: 1px solid var(--sheet-accent-line);
}
.sheet-rules .sheet-card .body {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  padding: 11px 15px;
  /* Колонка, а не строка: под правилом может стоять пример из задач студента (лист 2).
     center по вертикали — чтобы короткое правило не липло к верху широкой полосы. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Полоса стоит первой в теле листа 3, поэтому верхнего отступа у нее нет: у тела
   свой margin-top, и вдвоем они отнимали 18px — ровно на них лист плана и рвался. */
.sheet-strip {
  margin: 0 0 14px;
  background: var(--sheet-accent-bg);
  border: 1px solid var(--sheet-accent-line);
  border-radius: 13px;
  padding: 13px 18px;
}
.sheet-strip .lbl {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--sheet-accent-text);
  margin-bottom: 9px;
}
.sheet-strip .row { display: flex; gap: 10px; align-items: flex-start; }
.sheet-strip .tick {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  background: var(--sheet-dot);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  margin-top: 1px;
}
.sheet-strip .txt { font-size: 14.5px; line-height: 1.38; color: #2b3645; }

/* Отложенное — не часть регламента, а обещание вернуться, поэтому оно прижато к низу
   листа сноской, а не стоит вплотную к списку задач наравне с ними.
   Но САМИ ЗАДАЧИ в сноске перечислены: без них обещание «вернетесь к ним в уроке 4»
   пустое — на уроке 4 другой интерактив, и вспомнить их студенту будет неоткуда. */
.sheet-note {
  margin-top: auto;
  background: #fdf6e7;
  border: 1px solid #f3dfb0;
  border-radius: 13px;
  padding: 12px 18px;
  color: #6b5320;
}
.sheet-note .lbl {
  font-size: 14px;
  line-height: 1.34;
  font-weight: 600;
}
.sheet-note .items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 22px;
  margin-top: 8px;
}
.sheet-note .row { display: flex; gap: 9px; align-items: flex-start; }
.sheet-note .row .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d9a441;
  flex: none;
  margin-top: 7px;
}
.sheet-note .row .txt { font-size: 13.5px; line-height: 1.36; }

/* ───────── Лист «Желтые задачи моего отдела» (Блок 3) ─────────
   Тот же каркас, что у листа Урока 3, но акцент содержания — желтый. Переопределяем
   только переменные --sheet-accent-* в границах .tasks-sheet: карточки задач (.sheet-item)
   и плашки-методы берут цвет отсюда, а Инструкция Блока 2 остается на зеленом акценте.
   Рельс, бэнд и подвал остаются синими (--map-accent) — на них держится родство листов. */
.sheet.tasks-sheet {
  --sheet-accent-bg: #fff6e0;
  --sheet-accent-line: #f3dfb0;
  --sheet-dot: #f5b301;
  --sheet-accent-text: #8a5a00;
}

/* Карточка задачи: желтая точка + столбец (текст с иконкой типа документа + плашки способов). */
.tasks-sheet .sheet-item { align-items: flex-start; }
.tasks-sheet .ytxt-wrap { min-width: 0; }
.tasks-sheet .ytxt { font-size: 15px; line-height: 1.4; color: #2b3645; }
.tasks-sheet .ymethods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tasks-sheet .ymethod {
  font-weight: 600;
  font-size: 11px;
  color: var(--sheet-accent-text);
  border: 1px solid var(--sheet-accent-line);
  background: #fff;
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}
.tasks-sheet .sheet-empty { font-size: 15px; color: #8a93a3; }

/* ───────── Печать ───────── */

@page { size: A4 landscape; margin: 0; }

@media print {
  html, body { background: #fff; }
  .container, #modal-root, .toast { display: none !important; }
  #print-root {
    position: static;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
  }
  .sheet { box-shadow: none; margin: 0; }
}

/* ───────── Проба печати (print-probe.html) ───────── */
/* Там лист надо ВИДЕТЬ на экране, поэтому контейнер возвращается в поток. */

.probe #print-root {
  position: static;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  margin: 24px 0;
}
.probe .sheet {
  box-shadow: 0 10px 44px rgba(20, 32, 46, .16);
  margin: 0 auto 24px;
}
@media print {
  .probe #print-root { margin: 0; }
  .probe .sheet { box-shadow: none; margin: 0; }
}