/* Общая вёрстка страниц гайдов.

   Раньше этот блок был скопирован в CSS КАЖДОГО гайда — шесть одинаковых
   копий по двадцать правил. Копии уже начали расходиться: в
   `guide_isk_making.css` не хватало `.guide code`, то есть у одного гайда
   код в тексте выглядел иначе, чем у остальных, и заметить это можно было
   только сравнив страницы рядом.

   Сломалось это на седьмом гайде: я завёл страницу, положил в её файл
   только собственные стили — и получил текст во всю ширину экрана без
   отступов, потому что `.guide` не определён нигде, кроме этих копий.

   Файл подключается ПЕРВЫМ, до собственного css страницы: тот может
   переопределять что-то поверх, обратный порядок сделал бы это
   невозможным. Гайд без собственных стилей подключает только этот. */

.guide { max-width: 820px; margin: 0 auto; padding: 60px 24px 80px; }
.guide h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.2; color: #fff; margin-bottom: 14px; }
.guide .lead { font-size: 1.05rem; color: var(--eve-text-dim); line-height: 1.6; margin-bottom: 32px; }
.guide h2 { font-size: 1.4rem; font-weight: 700; color: var(--eve-accent); margin: 40px 0 12px; letter-spacing: 0.5px; }
.guide h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 22px 0 8px; }
.guide p { font-size: 0.95rem; color: var(--eve-text); line-height: 1.7; margin-bottom: 14px; }
.guide ul, .guide ol { margin: 8px 0 18px 22px; }
.guide li { font-size: 0.95rem; color: var(--eve-text); line-height: 1.7; margin-bottom: 6px; }
.guide strong { color: #fff; }
.guide code { font-family: var(--font-mono); font-size: 0.86rem; background: var(--eve-highlight); color: var(--eve-accent); padding: 1px 6px; border-radius: 3px; }
/* Ссылки в тексте гайда. `:not(.btn)` обязателен: селектор `.guide a` —
   это класс плюс тег, он специфичнее одноклассового `.btn-primary`, и
   кнопка получала цвет текста «как у ссылки», то есть РОВНО цвет
   собственного фона. Контраст 1:1, надпись не видно вовсе.

   Так было на всех гайдах — у каждого в своём css лежала эта же строка, а
   кнопка есть в каждом. Заметить нельзя ни тестами (они не считают стили),
   ни чтением разметки: она правильная. Только глазами. */
.guide a:not(.btn) { color: var(--eve-accent); text-decoration: none; border-bottom: 1px dashed var(--eve-accent-dim); }
.guide a:not(.btn):hover { border-bottom-color: var(--eve-accent); }
.guide-toc { background: var(--eve-panel); border: 1px solid var(--eve-border); border-left: 3px solid var(--eve-accent); border-radius: 4px; padding: 16px 22px; margin-bottom: 32px; font-size: 0.88rem; }
.guide-toc strong { display: block; letter-spacing: 1.5px; text-transform: uppercase; color: var(--eve-accent); font-size: 0.7rem; margin-bottom: 8px; }
.guide-toc ol { margin: 0 0 0 20px; }
.guide-toc li { margin-bottom: 2px; }
.guide-cta { background: linear-gradient(135deg, rgba(79,195,247,0.08), transparent); border: 1px solid var(--eve-border); border-radius: 4px; padding: 22px 26px; margin: 36px 0; text-align: center; }
.guide-cta-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.guide-cta-desc { font-size: 0.88rem; color: var(--eve-text-dim); margin-bottom: 14px; }
.guide-meta { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--eve-border); font-size: 0.78rem; color: var(--eve-text-dim); font-style: italic; }

/* Врезка-предупреждение. Была скопирована в три гайда одинаково; здесь она
   потому же, почему и `.guide`: третья копия однажды разойдётся с первыми
   двумя, и заметить это можно будет только открыв страницы рядом. */
.callout {
  background: rgba(245, 166, 35, 0.08);
  border-left: 3px solid var(--eve-gold);
  padding: 14px 18px;
  margin: 18px 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.9rem;
}
.callout strong { color: var(--eve-gold); }