/*
 * Конструктор регламента (Урок 6, Блок 3).
 *
 * Экранная часть списана с опросника structure.html, а тот — с советника Урока 5:
 * интерактивы программы должны стоять рядом как одна серия, а не как похожие
 * страницы. Отсюда та же колонка 650px, те же пилюли обложки, тот же прогресс-бар.
 *
 * Печатная часть — рамка листа Маршрутной карты: 1122x793, синий рельс с номером
 * урока и 13 штрихами, шапка программы, подвал с логотипом и тремя точками.
 */

:root {
  --accent: #5F94FF;
  --accent-dark: #4070E0;
  --map-accent: #3f6fff;
  --sheet-accent-bg: #eef2ff;
  --sheet-accent-line: #d3ddfa;
  --sheet-dot: #3f6fff;
  --sheet-accent-text: #2a4db8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #E8F0FE;
  color: #1A1A2E;
  font: 400 15px/1.5 'Inter', Arial, sans-serif;
  overflow-x: hidden;
}
/* Колонка 650px — совпадает с шириной картинок в уроках (iframe школы ужимает ~x0.5). */
.wrap {
  width: 650px;
  max-width: 100%;
  margin: 0 auto;
  padding: 32px 16px 44px;
}
.hidden { display: none !important; }

.panel {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(95, 148, 255, 0.12);
}

/* ───────── Обложка ───────── */
.cover-h1 { font: 700 27px/1.22 'Inter', Arial, sans-serif; letter-spacing: -0.01em; margin: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F0F4FF; color: var(--accent-dark);
  font: 600 13.5px 'Inter', Arial, sans-serif;
  padding: 8px 14px; border-radius: 22px;
  border: 1px solid rgba(95,148,255,0.18);
}
.pill-ic { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.cover-text p { font-size: 16px; line-height: 1.55; color: #33384a; margin: 14px 0 0; }
/* Перечень недостающих частей на обложке: маркеры цвета акцента, без «портянки». */
.cover-list { margin: 12px 0 0; padding-left: 4px; list-style: none; }
.cover-list li {
  position: relative; padding-left: 22px; margin-top: 8px;
  font-size: 16px; line-height: 1.5; color: #33384a;
}
.cover-list li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.btn-block { display: block; width: 100%; font-size: 16px; padding: 14px; text-align: center; }

/* Спокойная врезка: что приготовить, чем отличается шаг. Не предупреждение —
   поэтому не желтая (желтая в серии значит «уточнить у коллег»). */
.note-box {
  margin-top: 20px;
  background: var(--sheet-accent-bg);
  border: 1px solid var(--sheet-accent-line);
  border-radius: 12px;
  padding: 14px 18px;
}
.note-title { font-weight: 700; font-size: 14.5px; color: var(--sheet-accent-text); }
.note-box p { font-size: 14.5px; line-height: 1.45; color: #33384a; margin: 6px 0 0; }

/* Желтая врезка — то же, чем в серии помечен раздел «что уточнить»: не ошибка,
   но и не «все хорошо». На финале ею помечено то, что стоит доделать до печати. */
.note-warn { background: #fdf6e7; border-color: #f3dfb0; }
.note-warn .note-title { color: #8a5a00; }
.note-warn p { color: #6b5320; }

/* ───────── Прогресс-бар рабочих экранов ───────── */
.progress-wrap { margin-bottom: 20px; }
.progress-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px;
}
.progress-step { font: 600 14px 'Inter', Arial, sans-serif; color: var(--accent-dark); white-space: nowrap; }
.progress-title { font: 500 14px 'Inter', Arial, sans-serif; color: #6B7280; text-align: right; }
.progress-bar { height: 8px; border-radius: 8px; background: rgba(95,148,255,0.2); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 8px; transition: width 0.35s ease; }

/* ───────── Экран шага ───────── */
.step-title { font: 800 21px/1.25 'Inter', Arial, sans-serif; margin: 7px 0 0; }
.step-lead { font-size: 14.5px; line-height: 1.5; color: #6B7280; margin: 8px 0 0; }
#step-body { margin-top: 18px; }

/* Заглушка неготового шага. Живет до конца сборки форм — видно, что каркас
   работает, а начинка еще не приехала. */
.stub {
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  padding: 22px;
  text-align: center;
  color: #6B7280;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ───────── Шаг 1: загрузка листов ───────── */
.up-zone {
  border: 2px dashed #c3d3f5;
  border-radius: 14px;
  background: #f7faff;
  padding: 26px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.up-zone:hover, .up-zone:focus, .up-zone.drag {
  border-color: var(--accent);
  background: #eef4ff;
  outline: none;
}
.up-ic { font-size: 26px; line-height: 1; }
.up-main { font: 600 15.5px 'Inter', Arial, sans-serif; margin-top: 8px; }
.up-sub { font-size: 13.5px; line-height: 1.45; color: #6B7280; margin-top: 6px; }

.up-list { margin-top: 16px; display: grid; gap: 6px; }
.up-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e6e9ef; border-radius: 10px;
  padding: 9px 12px; background: #fff;
}
.up-item.ok { background: #eefaf1; border-color: #cfe9d8; }
.up-n {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: #eef2ff; color: var(--sheet-accent-text);
  font: 600 12.5px/22px 'Inter', Arial, sans-serif; text-align: center;
}
.up-item.ok .up-n { background: #d6f0e0; color: #1d7a45; }
.up-nm { flex: 1; font-size: 14.5px; font-weight: 500; min-width: 0; }
.up-lesson { color: #8a93a3; font-weight: 400; font-size: 13px; margin-left: 8px; }
.up-st { font-size: 13px; color: #8a93a3; white-space: nowrap; }
.up-item.ok .up-st { color: #1d7a45; }

.up-note { margin-top: 12px; }
.up-note p { font-size: 13.5px; line-height: 1.5; color: #6B7280; margin: 6px 0 0; }

/* ───────── Поля ввода ───────── */
/* Титульные поля — вторая смысловая часть первого шага, а не приписка к загрузке
   листов. Поэтому заголовок и лид ровно те же, что у заголовка экрана: мельче они
   читались как подпись под списком листов, и человек их проскакивал. */
.cover-fields { margin-top: 28px; padding-top: 24px; border-top: 1px solid #eef0f4; }
.fields-title { font: 800 21px/1.25 'Inter', Arial, sans-serif; margin: 0; }
.fields-lead { font-size: 14.5px; line-height: 1.5; color: #6B7280; margin: 8px 0 16px; }
.field { display: block; margin-bottom: 12px; }
.field-lbl { display: block; font: 600 13.5px 'Inter', Arial, sans-serif; color: #4b5563; margin-bottom: 5px; }
.field input[type="text"], .field textarea, .field select {
  width: 100%;
  border: 1.5px solid #e6e9ef;
  border-radius: 9px;
  padding: 10px 12px;
  font: 400 14.5px/1.4 'Inter', Arial, sans-serif;
  color: #1A1A2E;
  background: #fff;
  transition: border-color 0.15s;
}
.field input[type="text"]:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  outline: none;
}
.field textarea { resize: vertical; min-height: 68px; }

/* ───────── Вопросы форм ───────── */
.form-q { margin-bottom: 22px; }
.form-q-t { font: 700 16px/1.35 'Inter', Arial, sans-serif; }
.form-q-h { font-size: 13.5px; line-height: 1.45; color: #6B7280; margin: 5px 0 10px; }

.opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid #e6e9ef;
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.opt:hover { border-color: #DCE8FF; background: #F0F4FF; }
.opt.checked { border-color: var(--accent); background: #F0F4FF; }
.opt input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.opt span { font: 600 14.5px/1.4 'Inter', Arial, sans-serif; }
.opt-hint { display: block; font-weight: 400; font-size: 13px; color: #6B7280; margin-top: 3px; }
.opt-other {
  display: block; width: 100%;
  border: 1.5px solid #e6e9ef; border-radius: 9px;
  padding: 9px 12px; margin: -2px 0 8px;
  font: 400 14px 'Inter', Arial, sans-serif;
}
.opt-other:focus { border-color: var(--accent); outline: none; }

/* Свои варианты списком: у галочек их может быть несколько. Кнопка «добавить»
   мельче реестровой .add-btn и не на всю ширину — она добавляет строку внутри
   вопроса, а не карточку размером с экран. */
.opt-others .opt-other { margin-bottom: 0; }
.opt-other-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.opt-other-row .opt-other { margin: 0; }
.opt-other-del {
  flex: none; width: 30px; height: 30px; padding: 0;
  border: 1.5px solid #e6e9ef; border-radius: 8px; background: #fff;
  font: 400 17px/1 'Inter', Arial, sans-serif; color: #9aa2b1;
  cursor: pointer; transition: all 0.15s;
}
.opt-other-del:hover { border-color: #f0c2c2; color: #c0392b; background: #fdf5f5; }
.opt-other-add {
  border: 1.5px dashed #c3d3f5; background: #f7faff;
  border-radius: 9px; padding: 7px 14px; margin: 0 0 8px;
  font: 600 13px 'Inter', Arial, sans-serif; color: var(--accent-dark);
  cursor: pointer; transition: all 0.15s;
}
.opt-other-add:hover { border-color: var(--accent); background: #eef4ff; }

/* Спокойная врезка внутри формы: что уйдет в пакет готовым, без вопросов. */
.form-note {
  background: #f6f7fa;
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 22px;
}
.form-note-t { font-weight: 700; font-size: 14px; color: #4b5563; }
.form-note p { font-size: 13.5px; line-height: 1.5; color: #5b6573; margin: 5px 0 0; }

/* ───────── Форма «Инструкция»: сборка из прошлых уроков ───────── */
.src-list { display: grid; gap: 6px; margin-bottom: 22px; }
.src-item {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid #cfe9d8; background: #eefaf1;
  border-radius: 10px; padding: 10px 13px;
}
.src-item.gap { border-color: #e3e5ea; background: #f4f5f7; }
.src-mark { font-weight: 700; color: #1d7a45; flex: none; width: 14px; text-align: center; }
.src-item.gap .src-mark { color: #a8adb7; }
.src-t { font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.src-from { display: block; font-weight: 400; font-size: 13px; color: #6B7280; margin-top: 2px; }

/* ───────── Форма «Перечень сервисов»: карточки строк ───────── */
.svc-list { display: grid; gap: 12px; margin: 6px 0 14px; }
.svc {
  border: 1.5px solid #e6e9ef;
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
}
.svc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.svc-n { font: 700 14px 'Inter', Arial, sans-serif; color: var(--accent-dark); }
.svc-del {
  background: none; border: none; color: #9aa2b1; cursor: pointer;
  font: 500 13px 'Inter', Arial, sans-serif; text-decoration: underline; padding: 2px 4px;
}
.svc-del:hover { color: #d05353; }
.svc-row + .svc-row { margin-top: 13px; }
.svc-lbl { font: 600 13px 'Inter', Arial, sans-serif; color: #4b5563; margin-bottom: 7px; }
.svc-hint { font-size: 12.5px; line-height: 1.4; color: #8a93a3; margin-top: 6px; }
.svc-other {
  display: block; width: 100%; margin-top: 8px;
  border: 1.5px solid #e6e9ef; border-radius: 9px; padding: 9px 12px;
  font: 400 14px 'Inter', Arial, sans-serif;
}
.svc-other:focus { border-color: var(--accent); outline: none; }

/* Одиночный выбор — выпадающий список со своей стрелкой (родная у select
   разношёрстная по браузерам). Пустое значение серым: required + :invalid. */
/* Выпадающий список одиночного выбора. Родился в карточке сервиса, поэтому имя
   класса такое; общий движок форм рисует такой же под именем .q-select.
   Где он уместен, а где нет, разобрано у типа "select" в fields.js. */
.svc-select, .q-select {
  display: block; width: 100%;
  border: 1.5px solid #e6e9ef; border-radius: 9px; padding: 9px 34px 9px 12px;
  font: 500 14px 'Inter', Arial, sans-serif; color: #33384a;
  background-color: #fff; cursor: pointer;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.svc-select:focus, .q-select:focus { border-color: var(--accent); outline: none; }
.svc-select:invalid, .q-select:invalid { color: #9aa2b1; }
/* Строка «свой вариант» под списком: отступ тот же, что у поля рядом с галочкой. */
.q-select + .opt-other { margin-top: 8px; }

/* Множественный выбор — чекбоксы-плашки. Отмеченная подсвечивается, чтобы выбор
   читался с одного взгляда. */
/* Заголовок над реестром сервисов: тот же кегль, что у вопросов, но со своим
   отступом — под ним не поле, а карточки с рамками. */
.svc-list-t { margin-bottom: 12px; }

.svc-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-check {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid #e6e9ef; border-radius: 10px; padding: 8px 13px;
  font: 500 13.5px 'Inter', Arial, sans-serif; color: #33384a;
  cursor: pointer; transition: all 0.15s;
}
.svc-check:hover { border-color: #DCE8FF; }
.svc-check.on { border-color: var(--accent); background: #eef4ff; }
.svc-check input { accent-color: var(--accent); margin: 0; flex: none; cursor: pointer; }

.add-btn {
  border: 1.5px dashed #c3d3f5; background: #f7faff;
  border-radius: 11px; padding: 11px 18px; width: 100%;
  font: 600 14px 'Inter', Arial, sans-serif; color: var(--accent-dark);
  cursor: pointer; margin-bottom: 22px; transition: all 0.15s;
}
.add-btn:hover { border-color: var(--accent); background: #eef4ff; }

/* ───────── Кнопки ───────── */
.primary-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 12px 22px;
  font: 600 15px 'Inter', Arial, sans-serif; cursor: pointer;
  transition: background 0.2s;
}
.primary-btn:hover { background: var(--accent-dark); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.secondary-btn {
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent); border-radius: 8px;
  padding: 12px 22px; font: 600 15px 'Inter', Arial, sans-serif;
  cursor: pointer; transition: background 0.2s;
}
.secondary-btn:hover { background: rgba(95,148,255,0.08); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.link-btn {
  background: none; border: none; color: #6B7280;
  font: 500 14px 'Inter', Arial, sans-serif; text-decoration: underline;
  cursor: pointer; padding: 6px;
}
.link-btn:hover { color: var(--accent-dark); }
.clear-row { text-align: center; margin-top: 14px; display: flex; gap: 18px; justify-content: center; }

/* ───────── Подтверждение очистки ───────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 30, 55, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: #fff; border-radius: 18px; padding: 28px;
  width: 460px; max-width: 100%;
  box-shadow: 0 16px 50px rgba(20, 30, 55, 0.24);
}
.modal h3 { font: 700 19px/1.3 'Inter', Arial, sans-serif; margin: 0; }
.modal p { font-size: 15px; line-height: 1.5; color: #33384a; margin: 12px 0 0; }

/* ───────── Печатный пакет ───────── */
/* Не под display: none: спрятанному так элементу браузер не считает высоту,
   а без нее нечем проверить, влезло ли содержимое. Вынесен за левый край. */
#print-root {
  position: absolute;
  top: 0; left: -20000px;
  width: 1122px; height: 0;
  overflow: hidden;
}
.sheet {
  width: 1122px; height: 793px;
  background: #fff;
  display: flex;
  color: #16202e;
  overflow: hidden;
  page-break-after: always;
  break-after: page;
  -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; }
.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: 22px 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;
}
.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: 19.5px; color: #5b6573; margin-top: 11px; }
/* Отступ от подзаголовка до содержимого — 26px, а не 14. После подзаголовка
   начинается сам документ, и на 14px первый заголовок раздела прилипал к нему:
   читалось как одна строка в две строки, а не как начало новой части листа. */
.sheet-body { flex: 1; min-height: 0; overflow: hidden; margin-top: 26px; 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;
}
.sheet-dots { display: flex; align-items: center; gap: 7px; }
.sheet-dots i { width: 10px; height: 10px; border-radius: 50%; }
.sheet-page { font-weight: 600; font-size: 14px; color: #8a93a3; }

/* Загруженный лист урока 3-5 — картинкой во весь лист. Своя рамка ему не нужна:
   она уже нарисована внутри картинки, это тот же лист Маршрутной карты. */
.sheet-scan { padding: 0; display: block; position: relative; }
.sheet-scan img { width: 1122px; height: 793px; display: block; object-fit: contain; }

/* Сквозной номер поверх вклейки. Белая плашка садится ровно на подвал листа
   урока и закрывает его вшитую нумерацию «1/2»; свой номер — в том же стиле, что
   на листах конструктора. Высота выверена по подвалу листов Маршрутной карты. */
.scan-page {
  /* Копия раскладки подвала урока: область main (после рельса 188px, паддинг 40),
     три ячейки space-between. Распорки под логотип и точки уводят номер вправо от
     центра — ровно туда, где вшитый номер урока, и белая плашка его закрывает. */
  position: absolute; left: 188px; right: 0; bottom: 30px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.scan-page .scan-logo { width: 190px; flex: none; }
.scan-page .scan-dots { width: 44px; flex: none; }
.scan-page .sheet-page {
  background: #fff; padding: 4px 26px; text-align: center;
}

/* ───────── Содержимое листов ─────────
   Плотность подобрана так, чтобы часть помещалась в лист целиком: на альбомном
   листе разница в один-два пикселя межблочного отступа решает, уедет ли
   последняя врезка на отдельную страницу с пустым низом. */
.p-group + .p-group, .sheet-body > * + * { margin-top: 11px; }
.p-group > * + * { margin-top: 8px; }

.p-h2 {
  font-weight: 700; font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--map-accent);
}
/* Кегль подписей поднят с 14 до 14.5: на альбомном листе строка длинная, и на
   14px пояснения под таблицей читались как мелкий шрифт договора. */
.p-text { font-size: 14.5px; line-height: 1.42; color: #2b3645; }

/* Ссылки на листы задач: три цветных пункта в строку, а не перечисление внутри
   абзаца. Рамка светлая — блок должен читаться как указатель, а не спорить с
   голубой врезкой рядом. */
.p-refs { border: 1px solid #e6e9ef; border-radius: 10px; padding: 12px 15px; }
.p-refs-t { font-size: 14.5px; line-height: 1.4; color: #2b3645; }
.p-refs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin-top: 10px; }
.p-ref { display: flex; gap: 9px; align-items: center; font-weight: 600; font-size: 14px; color: #16202e; }
.p-ref-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }

.p-list { display: grid; gap: 6px; }
/* Опись — в две колонки: перечень из восьми коротких строк столбиком съедает
   пол-листа и выталкивает следующий раздел на отдельную страницу.
   Заполняются колонки сверху вниз (см. bullets() в parts.js): число строк
   проставляется там же, здесь только направление раскладки. */
.p-list-2col { grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: 6px 24px; }
.p-li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.38; color: #2b3645; }
.p-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sheet-dot); flex: none; margin-top: 7px; }

/* Реквизиты: то, что человек выбрал. Пустое значение — линейка под запись
   от руки, а не пустота: документ должен быть годным и наполовину заполненным. */
.p-facts { display: grid; gap: 0; }
.p-fact {
  display: flex; gap: 16px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid #e6e9ef;
}
.p-fact:last-child { border-bottom: 1px solid #e6e9ef; }
/* Ширина колонки подписей выверена по самой длинной из них — «Кому сообщать об
   инциденте». На 232px она переносилась на вторую строку, и лист протокола из-за
   этих лишних 20px не помещался на одну страницу: пакет получал две страницы,
   заполненные меньше чем наполовину. Сужать нельзя по той же причине. */
.p-fact-l {
  font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--map-accent); width: 260px; flex: none;
}
.p-fact-v { font-weight: 500; font-size: 15px; color: #2b3645; flex: 1; }
.p-blank-line { display: block; height: 1px; background: #d6dbe4; margin-top: 14px; }

.p-table table { width: 100%; border-collapse: collapse; }
.p-table th {
  text-align: left; font-weight: 700; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sheet-accent-text);
  background: var(--sheet-accent-bg); border: 1px solid var(--sheet-accent-line);
  padding: 9px 11px;
}
.p-table td {
  font-size: 13.5px; line-height: 1.35; color: #2b3645; vertical-align: top;
  border: 1px solid #e6e9ef; padding: 9px 11px;
}
.p-table-journal td { height: 74px; }
.p-table-journal th:nth-child(1), .p-table-journal td:nth-child(1) { width: 82px; }
.p-table-journal th:nth-child(3), .p-table-journal td:nth-child(3) { width: 118px; }
.p-table-journal th:nth-child(5), .p-table-journal td:nth-child(5) { width: 196px; }

/* Направления проверки — столбиком внутри одной ячейки: отдельными колонками
   при шести направлениях лист расползся бы на одиннадцать столбцов. */
.p-checks { display: grid; gap: 5px; }
.p-check { display: flex; gap: 7px; align-items: center; font-size: 12px; color: #5b6573; }
.p-box { width: 11px; height: 11px; border: 1.5px solid #b9c2d0; border-radius: 3px; flex: none; }

/* Бланк карточки допуска: вопрос и место под ответ — одной карточкой.
   Раньше это были голые строки с линейками: семь штук читались как анкета, и
   главное содержимое листа терялось в белом поле. Плашка собирает вопрос и
   линейки в один предмет.

   Колонка одна, во всю ширину. Двухколоночный вариант выглядел наряднее, но все
   семь вопросов помещались на один лист, и служебные строки уезжали на
   следующий, совершенно пустой — это читалось как сбой верстки. Широкая карточка
   заодно честнее к делу: в линейку под вопросом пишут ответ, а не два слова. */
.p-qs { display: grid; grid-template-columns: 1fr; gap: 11px; align-content: start; }
.p-q {
  background: var(--sheet-accent-bg);
  border: 1px solid var(--sheet-accent-line);
  border-radius: 10px;
  padding: 12px 16px 14px;
  display: grid; grid-template-columns: 23px 1fr; gap: 0 11px;
  break-inside: avoid;
}
.p-q-n {
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--map-accent); color: #fff;
  font-weight: 700; font-size: 13px; line-height: 23px; text-align: center;
}
.p-q-t { font-weight: 500; font-size: 14.5px; line-height: 1.36; color: #16202e; }
.p-q-lines { grid-column: 2; display: grid; gap: 17px; margin-top: 14px; }
.p-q-lines i { display: block; height: 1px; background: #bcc9e8; }

/* Врезка со списком. Голубая — главное правило листа, красная — красные флаги.
   Приглушенный красный тот же, что на листе «Красные задачи моего отдела»:
   насыщенный заливкой на печати читается как ошибка в документе, а это рабочая
   бумага, которую понесут руководителю. */
.p-call { border-radius: 10px; padding: 12px 15px; }
.p-call-t { font-weight: 700; font-size: 14px; }
.p-call-list { display: grid; gap: 7px; margin-top: 9px; }
/* Врезка без заголовка — список начинается сразу, лишний отступ сверху не нужен. */
.p-call-list:first-child { margin-top: 0; }
.p-call-li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: #2b3645; }
.p-call-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 7px; }

.p-call-blue { background: var(--sheet-accent-bg); border: 1px solid var(--sheet-accent-line); }
.p-call-blue .p-call-t { color: var(--sheet-accent-text); }
.p-call-blue .p-call-dot { background: var(--sheet-dot); }

.p-call-red { background: #fdeff0; border: 1px solid #f6ced2; }
.p-call-red .p-call-t { color: #9b2c2c; }
.p-call-red .p-call-dot { background: #ef4444; }

/* Врезка может держать не список, а произвольные блоки — например нумерованную
   цепочку действий. Тогда разделяем их сами: сетки внутри нет. */
.p-call > * + * { margin-top: 13px; }

/* Оговорка внутри врезки: белая карточка со знаком внимания. Своей заливки у нее
   нет — на голубом фоне белое само по себе выступает вперед. Знак янтарный, не
   красный: это исключение из правила, а не опасность. */
.p-inset {
  background: #fff; border: 1px solid var(--sheet-accent-line); border-radius: 8px;
  padding: 10px 13px; display: flex; gap: 11px; align-items: flex-start;
}
.p-inset-ic {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: #f59e0b; color: #fff;
  font-weight: 700; font-size: 13px; line-height: 20px; text-align: center;
}
.p-inset-t { font-weight: 700; font-size: 13.5px; color: #16202e; }
.p-inset p { font-size: 14px; line-height: 1.4; color: #2b3645; margin: 3px 0 0; }

/* Раздел, которому нужен воздух сверху. Ставится там, где на листе всего два-три
   блока: с обычным зазором в 11px они слипаются в один кусок, а низ листа при
   этом стоит пустой. Правило весомее общего «.sheet-body > * + *», поэтому
   перебивает его без !important. */
.sheet-body > .p-group-air { margin-top: 34px; }
/* Раздел уехал на новый лист и открывает его — воздух сверху там уже дала шапка. */
.sheet-body > .p-group-air:first-child { margin-top: 0; }

.p-chain { display: grid; gap: 7px; }
.p-step { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.38; color: #2b3645; }
.p-step-n {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--map-accent); color: #fff;
  font-weight: 700; font-size: 12.5px; line-height: 22px; text-align: center;
}

.p-note {
  background: var(--sheet-accent-bg); border: 1px solid var(--sheet-accent-line);
  border-radius: 10px; padding: 11px 15px;
}
.p-note-t { font-weight: 700; font-size: 14px; color: var(--sheet-accent-text); }
.p-note p { font-size: 14.5px; line-height: 1.42; color: #2b3645; margin: 5px 0 0; }

/* Блок листа-запроса: четыре строки «метка — текст». Кегль поднят до 14.5 вслед
   за остальными листами пакета: на 13.5 блок читался как сноска, хотя это
   основное содержимое листа. */
.p-req { border-left: 3px solid var(--sheet-accent-line); padding-left: 14px; }
.p-req-row { display: flex; gap: 14px; align-items: baseline; margin-bottom: 5px; font-size: 14.5px; line-height: 1.4; color: #2b3645; }
/* Хвостового отступа у последней строки быть не должно: это пустота внутри
   рамки блока, из-за которой четыре блока переставали помещаться на два листа. */
.p-req-row:last-child { margin-bottom: 0; }
.p-req-l {
  font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #8a93a3; width: 178px; flex: none;
}

/* ───────── Титульный лист ─────────
   Собран и утвержден отдельно, повторен здесь один в один. Полоса внизу отдана
   дороге целиком: когда логотип стоял внутри нее, они дрались за внимание. */
.cover-sheet { flex-direction: column; }
.cov-top { padding: 30px 64px 0; flex: none; }
.cov-band { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.cov-prog {
  font-weight: 700; font-size: 15px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--map-accent); white-space: nowrap;
}
.cov-desc { font-weight: 500; font-size: 14.5px; letter-spacing: .02em; color: #8a93a3; white-space: nowrap; }
.cov-rule { height: 1px; background: #e6e9ef; margin-top: 16px; }

.cov-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 64px; }
/* Заголовок титула — в две строки. Общее правило .sheet h1 держит заголовки
   частей в одну строку и режет лишнее, титулу это не подходит: его название
   длинное и обязано читаться целиком.

   Селектор обязан быть длиннее общего правила. Одного класса .cov-title мало:
   у .sheet h1 вес выше (класс плюс тег), и он перебивал перенос обратно в
   nowrap — от заголовка отрезало «с ИИ», причем молча, из-за overflow: hidden. */
.cover-sheet h1.cov-title {
  font-weight: 800; font-size: 66px; letter-spacing: -.022em; line-height: 1.04;
  color: #16202e; margin: 0; max-width: 880px;
  white-space: normal; overflow: visible;
}
.cov-sub { font-weight: 400; font-size: 20.5px; color: #5b6573; margin-top: 16px; max-width: 760px; }
.cov-who { margin-top: 38px; width: 580px; }
.cov-who-row { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid #e6e9ef; }
.cov-who-row:last-child { border-bottom: 1px solid #e6e9ef; }
.cov-who-lbl {
  font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--map-accent); width: 108px; flex: none;
}
.cov-who-val { font-weight: 500; font-size: 17px; color: #2b3645; flex: 1; }
.cov-blank { display: block; height: 1px; background: #d6dbe4; width: 100%; }

.cov-strip { flex: none; background: var(--map-accent); padding: 34px 64px 30px; }
.cov-road { position: relative; }
.cov-road-line {
  position: absolute; left: 0; right: 0; top: 21px; height: 5px; border-radius: 5px;
  background: repeating-linear-gradient(to right, rgba(255,255,255,.5) 0 22px, rgba(255,255,255,0) 22px 40px);
}
.cov-stops { position: relative; display: flex; justify-content: space-between; }
.cov-stop { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 214px; flex: none; }
.cov-dot {
  width: 46px; height: 46px; border-radius: 50%; font-weight: 800; font-size: 22px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 7px var(--map-accent);
}
.cov-cap { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.cov-cap1 { font-weight: 600; font-size: 15px; color: #fff; }
.cov-cap2 { font-weight: 400; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.78); }

.cov-foot {
  flex: none; height: 64px; padding: 0 64px;
  display: flex; align-items: center; justify-content: space-between;
}

@page { size: A4 landscape; margin: 0; }
@media print {
  html, body { background: #fff; padding: 0; }
  .wrap, .modal-overlay { display: none !important; }
  #print-root { position: static; left: 0; width: auto; height: auto; overflow: visible; }
  .sheet { box-shadow: none; margin: 0; }
}

@media (max-width: 520px) {
  .panel { padding: 18px; }
  .cover-h1 { font-size: 22px; }
}