/* Книга «Инженерия коммуникации» (/communication-engineering/).

   ЗАЧЕМ ФАЙЛ. До переноса книга была отдельным сайтом на Astro/Starlight и
   красилась своей палитрой: собственные --sl-color-* поверх дефолтов Starlight
   плюс 22 своих токена --cb-*. Ровно из этого выросли её поломки контраста —
   двенадцать нарушений, включая заголовки глав с коэффициентом 1,00:1, то есть
   невидимые. Чинить их приходилось отдельно и другим приёмом, чем на портале,
   потому что чинить было нечего общего.

   ЧТО ИЗМЕНИЛОСЬ. Палитры у книги больше нет. Ни --sl-color-*, ни литералов:
   все 22 токена --cb-* стали псевдонимами токенов --course-*, которые портал
   уже считает по WCAG AA и стережёт scripts/check-contrast.mjs в обеих темах.
   Книга теперь чинится вместе с порталом и ломается вместе с ним — а не молча
   в стороне. Довод и формулировка те же, что в css/books.css, где про эту самую
   книгу и написано: «карточка, покрашенная своим литералом, из починки палитры
   выпала бы — ровно так собственная палитра книги на Starlight и разошлась с
   порталом».

   Светлой пары ни у одного токена ниже нет, и это не забытая половина работы:
   --course-* переключаются сами в html[data-theme="light"], поэтому псевдоним
   переключается вместе с ними. Второй блок здесь дублировал бы уже принятые
   решения и разошёлся бы с ними при первой же правке.

   ДЕВЯТЬ ТОКЕНОВ ИЗ 22 НЕ ПЕРЕЕХАЛИ, и каждому есть причина:
     --cb-field, --cb-glow, --cb-glow-soft — фоновое украшение страницы. У
       портала есть свой фоновый атлас (courses-v2.css), два фона друг поверх
       друга — это не «богаче», а грязнее.
     --cb-halo — свечение кнопки .sl-link-button. Кнопки Starlight здесь нет.
     --cb-overlay, --cb-overlay-strong, --cb-overlay-line, --cb-on-overlay,
       --cb-on-overlay-muted — накладки поверх картинки: подпись лежала на самом
       снимке тёмной плашкой. Приём законный, автор книги рассуждал верно, но
       проверить его портальным сторожем нельзя: он считает контраст текста
       против вычисленного фона, а под полупрозрачной плашкой лежит картинка,
       которую он не читает. Подпись переехала под снимок, на поверхность
       карточки, где контраст считается и проверяется. Вместе с плашкой ушёл
       декоративный уголок «d†»: у портала своя марка в шапке. */

:root {
  /* Поверхности врезок и карточек. */
  --cb-surface: var(--course-surface-raised);
  --cb-surface-quiet: var(--course-surface);
  --cb-surface-strong: var(--course-panel);
  --cb-visual-bg: var(--course-surface-soft);

  /* Границы. У Starlight их держали --sl-color-hairline*, здесь — линии портала. */
  --cb-line: var(--course-line);
  --cb-line-strong: var(--course-line-strong);

  /* Заливки-подсветки. color-mix, а не rgba с числами: приём в портале уже
     принят (34 раза в courses-v2.css), и оттенок остаётся привязан к акценту,
     какой бы он ни стал после следующей правки палитры. */
  --cb-tint: color-mix(in srgb, var(--course-cyan) 12%, transparent);
  --cb-tint-soft: color-mix(in srgb, var(--course-cyan) 6%, transparent);
  --cb-tint-example: color-mix(in srgb, var(--course-blue) 7%, transparent);
  --cb-hover-wash: color-mix(in srgb, var(--course-cyan) 7%, transparent);
  --cb-art-bg: color-mix(in srgb, var(--course-cyan) 5%, transparent);
  --cb-art-shadow: color-mix(in srgb, var(--course-cyan) 8%, transparent);

  --cb-on-accent: var(--course-on-accent);
  --cb-accent-hover: var(--course-focus);

  /* Метка правила и номер части. В книге это был #ffc247, и в светлой теме он
     давал 1,60:1 на карточке при норме 4,5 — второе худшее число того замера.
     У портала под ту же роль есть посчитанный в обеих темах --course-orange. */
  --cb-mark: var(--course-orange);
}

/* ---------- раскладка страницы книги ---------- */

.cb-layout {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(56px, 8vw, 96px);
  align-items: start;
}

.cb-chapter {
  min-width: 0;
  max-width: 72ch;
}

.cb-chapter__header {
  padding-bottom: 18px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--cb-line);
}

.cb-chapter__tagline {
  margin: 8px 0 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--course-text);
}

.cb-chapter__lede {
  margin: 8px 0 0;
  max-width: 70ch;
  color: var(--course-muted);
}

/* ---------- оглавление ---------- */

.cb-toc {
  position: sticky;
  top: calc(var(--course-header-height, 64px) + 12px);
  max-height: calc(100vh - var(--course-header-height, 64px) - 32px);
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--cb-line);
  border-radius: var(--digitable-radius-md, 14px);
  background: var(--cb-surface-quiet);
  font-size: 13.5px;
  line-height: 1.5;
}

.cb-toc__root {
  display: block;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--cb-line);
  font-weight: 700;
  color: var(--course-text);
  text-decoration: none;
}

.cb-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cb-toc__groups > li + li {
  margin-top: 14px;
}

.cb-toc__group-link {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--course-subtle);
  text-decoration: none;
}

.cb-toc__items {
  display: grid;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--cb-line);
}

.cb-toc__part > .cb-toc__part-link {
  display: block;
  padding: 2px 0;
  font-weight: 600;
  color: var(--course-text);
  text-decoration: none;
}

.cb-toc__leaves {
  display: grid;
  gap: 2px;
  padding: 2px 0 6px 10px;
}

.cb-toc a {
  color: var(--course-muted);
  text-decoration: none;
}

.cb-toc a:hover {
  color: var(--course-cyan);
  text-decoration: underline;
}

.cb-toc a:focus-visible {
  outline: 2px solid var(--course-focus);
  outline-offset: 2px;
}

/* Текущая страница помечена и цветом, и меткой aria-current в разметке:
   один цвет читателю без цветовосприятия ничего не сообщает. */
.cb-toc a.is-current,
.cb-toc .is-current {
  color: var(--course-cyan);
  font-weight: 700;
}

/* ---------- список внутри раздела ---------- */

.cb-index {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.cb-index > li {
  padding: 14px 16px;
  border: 1px solid var(--cb-line);
  border-radius: var(--digitable-radius-md, 14px);
  background: var(--cb-surface-quiet);
}

.cb-index a {
  color: var(--course-text);
  text-decoration: none;
}

.cb-index a:hover {
  color: var(--course-cyan);
}

.cb-index p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--course-muted);
}

/* ---------- врезки книги (шорткоды cb-*) ---------- */

.chapter-epigraph {
  border-left: 3px solid var(--course-cyan);
  margin: 0 0 1.5rem;
  padding: 0.2rem 0 0.2rem 1.25rem;
}

.chapter-epigraph blockquote {
  border: 0;
  color: var(--course-text);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 2.2vw, 1.62rem);
  font-style: normal;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  background: none;
}

.chapter-epigraph figcaption {
  color: var(--course-muted);
  font-size: 0.9rem;
  margin-top: 0.65rem;
}

.chapter-visual {
  background: var(--cb-visual-bg);
  border: 1px solid var(--cb-line-strong);
  border-radius: 8px;
  margin: 1.5rem 0;
  overflow: hidden;
}

.chapter-visual img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.chapter-visual figcaption {
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--cb-line);
  color: var(--course-muted);
  font-family: var(--course-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.chapter-rule {
  background:
    linear-gradient(110deg, var(--cb-tint), transparent 52%),
    var(--cb-surface-strong);
  border: 1px solid var(--cb-line-strong);
  border-left: 5px solid var(--cb-mark);
  border-radius: 8px;
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.1rem;
}

.chapter-rule strong {
  color: var(--cb-mark);
  display: block;
  font-family: var(--course-mono);
  font-size: 0.75rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.chapter-rule p {
  color: var(--course-text);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
}

.chapter-example,
.chapter-practice {
  border: 1px solid var(--cb-line);
  border-radius: 8px;
  margin: 1rem 0;
  padding: 1rem 1.1rem;
}

.chapter-example { background: var(--cb-tint-example); }
.chapter-practice { background: var(--cb-tint-soft); }

.chapter-example > strong,
.chapter-practice > strong {
  color: var(--course-text);
}

.chapter-example > p,
.chapter-practice > p {
  color: var(--course-text);
}

.chapter-example > p:last-child,
.chapter-practice > p:last-child {
  margin-bottom: 0;
}

.book-path-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 1.75rem 0 2.25rem;
}

.book-path {
  background: var(--cb-surface-quiet);
  border: 1px solid var(--cb-line);
  border-radius: 8px;
  color: var(--course-muted);
  display: grid;
  gap: 0.4rem;
  padding: 1rem;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.book-path:hover {
  background: var(--cb-hover-wash);
  border-color: var(--course-cyan);
  text-decoration: none;
}

.book-path:focus-visible {
  outline: 2px solid var(--course-focus);
  outline-offset: 2px;
}

.book-path span {
  color: var(--cb-mark);
  font-family: var(--course-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

.book-path strong {
  color: var(--course-text);
  font-size: 1.02rem;
}

.book-path p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--course-muted);
}

.reference-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 1.5rem 0;
}

.reference-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  padding: 1rem;
  color: var(--course-muted);
}

.reference-card strong {
  color: var(--course-text);
}

.communication-art {
  background: var(--cb-art-bg);
  border: 1px solid var(--cb-line-strong);
  border-radius: 18px;
  box-shadow: 0 0 36px var(--cb-art-shadow);
  margin: 1.75rem 0;
  overflow: hidden;
}

.communication-art img {
  display: block;
  height: auto;
  width: 100%;
}

/* Заливки акцентом под этим блоком нет, и это результат замера, а не вкус.
   С ней (linear-gradient из --cb-tint, как у .chapter-rule) поверхность в
   светлой теме становилась rgb(209,227,229), и ссылка «Референсы главы» цветом
   --course-cyan давала на ней 4,3:1 при норме 4,5 — на всех восьми ширинах и во
   всех пяти состояниях. На чистой поверхности та же пара даёт 5,1:1.

   У .chapter-rule заливка осталась: там на ней лежит не ссылка, а текст цветом
   --course-text и метка цветом --course-orange, и обе пары норму проходят.
   Разница именно в том, что здесь по заливке идёт акцентная ссылка. */
.chapter-references {
  background: var(--cb-surface);
  border: 1px solid var(--cb-line-strong);
  border-left: 4px solid var(--course-cyan);
  border-radius: 12px;
  color: var(--course-muted);
  display: grid;
  gap: 0.45rem;
  margin: 2rem 0 0;
  padding: 0.9rem 1rem;
}

.chapter-references strong {
  color: var(--course-text);
  font-size: 0.92rem;
}

.chapter-references span { line-height: 1.65; }

.chapter-references a {
  font-weight: 600;
  color: var(--course-cyan);
}

/* ---------- оглавление внутри читалки ----------

   Книга читается читалкой портала (partials/communication-book-page.html), и
   оглавление издания стоит в её боковой колонке — над списком заголовков
   страницы. Колонка уже даёт и рамку, и фон, и липкость, и свою прокрутку
   (.reader-sidebar, .reader-sidebar__structure в courses-v2.css), поэтому здесь
   с .cb-toc снимается ровно то, что она приносила, когда была колонкой сама:
   вторая рамка внутри первой и второй sticky внутри первого. Сами отступы,
   размеры и группировка списка остаются — это оглавление книги, а не портала. */
.reader-sidebar__structure .cb-toc {
  position: static;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ---------- узкий экран ---------- */

@media (max-width: 60rem) {
  .cb-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Оглавление книги — 89 записей. Развёрнутым над текстом оно отодвинуло бы
     первую строку главы на несколько экранов, поэтому на узком экране оно
     становится своей полосой прокрутки. Без скриптов: портал обещает работать
     без JavaScript, и оглавление — первое место, где это проверяют. */
  .cb-toc {
    position: static;
    max-height: 40vh;
  }
}

@media (max-width: 40rem) {
  .chapter-epigraph { padding-left: 0.9rem; }
  .chapter-rule { padding: 0.85rem 0.9rem; }
}