/* ============================================================
   Дифф в теории урока

   Курс о кодовом агенте учит одному главному навыку — читать то, что
   агент изменил. Без цвета строка «+» отличается от строки «−» одним
   знаком в начале, и на телефоне этот знак теряется первым: дифф из
   двадцати строк превращается в серую простыню.

   Файл отдельный, а не внутри `course-chrome.css`, по той же причине,
   что `figure.css` и `shows.css`: страницы уроков на витрине
   `course-chrome.css` не подключают, и дифф выводился бы наружу вовсе
   без оформления. Один файл на обе стороны — иначе копии разойдутся.

   Три решения, которые легко сломать обратно:

   * **знак остаётся в разметке.** Дальтонизм, чёрно-белая печать и
     копирование в мессенджер — три разных способа потерять цвет, и во
     всех трёх «+» и «−» должны остаться. Цвет здесь подсказка, а не
     единственный признак;
   * **цвет берётся от статусных токенов** (`--green`, `--red`) и
     разводится до заливки через `color-mix`: свой зелёный в трёх
     темах пришлось бы подбирать трижды;
   * **переносов нет** (`white-space: pre`), прокрутка горизонтальная.
     Строка кода, перенесённая по ширине колонки, перестаёт быть
     строкой кода: отступ уезжает, и «в каком месте вставлено» уже не
     прочитать.
   ============================================================ */

.diff {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  background: var(--bg2);
  font-family: var(--mono);
  font-size: var(--fs-2);
  line-height: 1.6;
  overflow-x: auto;
}

.diff-l {
  display: flex;
  gap: 8px;
  padding: 1px 12px 1px 8px;
  white-space: pre;
}

/* Знак в отдельной колонке: строки выстраиваются по левому краю кода,
   и вставку видно по столбцу, а не по вчитыванию в каждую строку. */
.diff-m {
  flex: none;
  width: 1ch;
  text-align: center;
  opacity: 0.75;
}

.diff-add { background: color-mix(in srgb, var(--green) 14%, transparent); }
.diff-del { background: color-mix(in srgb, var(--red) 14%, transparent); }

/* Знак берёт цвет текста, а не статусный, и выделяется насыщенностью.
   Замерено в браузере во всех трёх темах: зелёным по зелёной заливке
   знак давал контраст 3,5–3,9 — то есть единственный признак, который
   остаётся без цвета, читался хуже всего остального в строке. Цвет
   строки и так несёт статус; знаку остаётся быть читаемым. */
.diff-add .diff-m,
.diff-del .diff-m { opacity: 1; font-weight: 700; }
.diff-ctx { color: var(--text-dim); }

/* Заголовок куска — имя файла или @@: это не код, а указатель, где
   мы находимся. Своей колонки под знак у него нет. */
.diff-hunk {
  padding: 5px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  font-size: var(--fs-3);
}
.diff-hunk + .diff-hunk { border-top: 1px solid var(--border); }
.diff-l + .diff-hunk { margin-top: 6px; border-top: 1px solid var(--border); }

/* Подпись под диффом: та же мерка, что у figcaption схемы — вывод, а
   не «здесь дифф».

   Селектор с именем тега не для красоты: подпись это `<p>`, а в теории
   действует `.theory p` — и она сильнее одного класса. Без `p.` подпись
   рисовалась обычным текстом, то есть переставала быть подписью.
   Замерено в браузере, а не предположено. */
p.diff-cap {
  margin: -10px 0 14px;
  color: var(--text-dim);
  font-size: calc(var(--fs-3) * var(--fs, 1));
  line-height: 1.5;
}

/* Пара «что попросили → что ответил агент». Устроена как `.shows` у
   курсов с кодом и по той же причине: поручение объясняет ответ
   лучше абзаца. */
.say2 {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  background: var(--bg2);
}
/* Те же `<p>` и та же причина для имени тега в селекторе. */
p.say2-ask,
p.say2-got {
  margin: 0;
  padding: 9px 13px 10px 32px;
  position: relative;
  line-height: 1.6;
  font-size: calc(var(--fs-3) * var(--fs, 1));
}
p.say2-ask { font-weight: 600; color: var(--text); }
p.say2-got {
  border-top: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
p.say2-ask::before,
p.say2-got::before {
  position: absolute;
  left: 12px;
  top: 9px;
  color: var(--accent);
}
.say2-ask::before { content: "?"; }
.say2-got::before { content: "\2192"; }