/* Оформление справочных страниц (маршрутная карта, техпроцесс, операционная
   карта, примеры). Подключается ВМЕСТЕ с legal.css и только дополняет его:
   базовая тёмная тема, .wrap, h1/h2, таблицы и footer живут там, и вторая их
   копия здесь разошлась бы с первой при первой же правке цвета.

   Почему статьи вообще существуют: до 10.09.2026 весь домен состоял из одной
   страницы, Google индексировал ровно её, и в Search Console стояло
   «проиндексировано: 1». Замер спроса (Wordstat, Россия, 09.08-07.09.2026)
   показал, что кластер «маршрутная карта технологического процесса / ЕСТД /
   ГОСТ 3.1118» — около 5000 запросов в месяц, то есть люди ищут ровно то, что
   сервис и делает. Отвечать им было нечем. */

/* Свои цвета статьи. Общие (--bg, --text, --heading, --th-bg) живут в
   legal.css и здесь не повторяются; сюда попало ровно то, чего у юридической
   страницы нет, — блок кода, охряной акцент врезки и наведение на кнопку.
   До 11.09.2026 все четыре стояли литералами по тексту файла, то есть
   светлой теме их назвать было нечем. */
:root {
    --code-bg: #101418;
    --code-inline-bg: rgba(255, 255, 255, 0.06);
    --accent-warm: #b08d57;
    --primary-hover: #6ea3c9;
}

:root.light-theme {
    --code-bg: #f2f0ec;
    --code-inline-bg: rgba(28, 31, 34, 0.07);
    /* Темнее охры лендинга (#8a6a34) намеренно: этим цветом набраны
       служебные символы примера маршрутной карты — мелкий моноширинный
       шрифт на светлой подложке блока, и на #8a6a34 контраст выходил
       4,40 при норме 4,5. Рамке врезки лишняя густота не мешает. */
    --accent-warm: #6d5228;
    --primary-hover: #356083;
}

/* Хлебные крошки. Дублируют разметку BreadcrumbList в JSON-LD страницы:
   поисковику нужна разметка, человеку — видимая строка. */
.crumbs {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 18px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs span { margin: 0 6px; opacity: 0.5; }

.lead {
    font-size: 17px;
    color: var(--text);
    margin: 0 0 26px;
}

h3 {
    font-size: clamp(16px, 3vw, 18px);
    margin: 26px 0 10px;
    color: var(--heading);
}

/* Оглавление длинной статьи. Не украшение: у страницы про маршрутную карту
   девять разделов, и без него человек, пришедший за одной графой, уходит. */
.toc {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 30px;
}
.toc-title {
    color: var(--heading);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
}
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin-bottom: 5px; font-size: 15px; }
.toc a { color: var(--primary); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Моноширинный блок под строки маршрутной карты: служебные символы и графы
   держатся в колонках только моноширинным шрифтом, а пропорциональный
   превращает пример в кашу. Свой горизонтальный скролл — по той же причине,
   что у таблиц: на телефоне длинная строка иначе растянет всю страницу. */
.mk-sample {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    overflow-x: auto;
    font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', monospace;
    font-size: 13px;
    line-height: 1.75;
    color: var(--text);
    white-space: pre;
}
.mk-sample .sym { color: var(--accent-warm); font-weight: 700; }

code {
    font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', monospace;
    font-size: 0.92em;
    background: var(--code-inline-bg);
    border-radius: 4px;
    padding: 1px 5px;
}

/* Врезка-примечание: то, на чём обычно спотыкаются. Отличается от .tldr
   цветом полосы — .tldr стоит один раз вверху и объясняет страницу целиком,
   .note встречается по тексту и предупреждает о частной ошибке. */
.note {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-warm);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 18px 0;
    font-size: 15px;
}
.note strong { color: var(--heading); }

/* Блок «посчитать автоматически». Стоит в конце статьи, а не в начале:
   человек пришёл за справкой, и предложение до ответа читается как реклама
   вместо ответа. */
.cta {
    background: linear-gradient(135deg, rgba(91, 144, 181, 0.14), rgba(176, 141, 87, 0.10));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    margin: 38px 0 10px;
}
.cta h2 { margin-top: 0; }
.cta p { margin: 0 0 16px; font-size: 15px; }
.cta-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: 9px;
    font-weight: 600;
    font-size: 15px;
}
.cta-btn:hover { background: var(--primary-hover); color: #fff; }
.cta-sub {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
}

/* Перелинковка между справочными страницами. Ради неё половина работы и
   делалась: страница, на которую не ведёт ни одна ссылка, живёт для Google
   только в sitemap.xml, а это самый слабый из сигналов. */
.related {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.related h2 { margin-top: 0; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.related-card {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px 17px;
    text-decoration: none;
    color: var(--text);
}
.related-card:hover { border-color: var(--primary); }
.related-card b { display: block; color: var(--heading); margin-bottom: 5px; font-size: 15px; }
.related-card span { font-size: 14px; color: var(--muted); }

/* Маршрут примера: номер операции, название, оборудование, время. Обычная
   таблица legal.css, но с узкой первой графой — номер операции трёхзначный и
   растягивать под него колонку не за чем. */
.route-table td:first-child,
.route-table th:first-child { width: 62px; white-space: nowrap; }
.route-table td:last-child,
.route-table th:last-child { white-space: nowrap; }

.fig {
    margin: 22px 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
}
.fig img { display: block; width: 100%; height: auto; }
.fig figcaption {
    padding: 11px 16px;
    font-size: 14px;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/* Рамка с прокруткой для длинного снимка документа — тот же приём, что на
   лендинге: маршрутная карта плиты это 117 строк и 8650 px, и одной картинкой
   она занимает восемь экранов. */
.shot-scroll {
    max-height: 560px;
    overflow-y: auto;
}