/* ============================================================
   Пара «что написали → что получилось»

   Главный приём курсов с кодом: слева-сверху программа, снизу —
   то, что она напечатала (или что покажет браузер). Кирпич `prints`
   в `courses2/<курс>/src/lib.js` собирает разметку, а вид живёт
   здесь.

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

   Главное правило здесь одно: **вывод сохраняет переносы строк**.
   Программа, напечатавшая три строки, обязана и на экране выглядеть
   тремя строками. Пока `.shows-out` был обычным абзацем, «заход 0 /
   заход 1 / заход 2» слипалось в одну строку — и урок про циклы
   опровергал сам себя.
   ============================================================ */

.shows {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  background: var(--bg2);
}

/* Код внутри пары отдаёт свой контур общему: рамка в рамке —
   первая из трёх ошибок, перечисленных в гайдлайне. */
.shows > .code,
.shows > pre {
  margin: 0;
  border: 0;
  background: transparent;
}

.shows-out {
  margin: 0;
  padding: 9px 13px 10px 32px;
  position: relative;
  border-top: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: var(--fs-2);
  line-height: 1.6;
  /* Переносы из вывода программы остаются переносами, длинная
     строка при этом всё равно переносится по ширине колонки. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Стрелка говорит, что ниже — результат, а не продолжение кода.
   Знаком, а не словом: подпись «Результат:» перед каждым из
   девяноста примеров урока читалась бы как шум. */
.shows-out::before {
  content: "→";
  position: absolute;
  left: 12px;
  top: 9px;
  color: var(--accent);
}