/* ==========================================================================
   Подсветка синтаксиса в блоках кода (highlight.js).

   Тема написана под палитру сайта из main.css, а не взята готовой: цвета
   намеренно приглушены, чтобы код не выбивался из общего тона.

   ВАЖНО: здесь задаются ТОЛЬКО цвета токенов. Фон, отступы и рамку блоков
   кода по-прежнему определяют .faq-answer pre, .news-article-body pre и
   прочие «свои» стили разделов — если задать фон здесь, он их перебьёт и
   вёрстка блоков разъедется.
   ========================================================================== */

/* Распределение контраста здесь важнее самих оттенков.
   Первая версия темы брала цвета из палитры сайта: строки — зелёный
   --color-success, числа — оранжевый --color-warning. На реальном коде это
   разваливалось: в типичном фрагменте строковых литералов больше, чем всех
   прочих токенов вместе, и блок читался сплошной зелёной простынёй.
   Поэтому строки приглушены и уведены в тёплый тон, а контраст отдан тому,
   что несёт структуру, — ключевым словам, именам функций, числам. Ровно так
   расставляют акценты редакторы кода, с которыми это привычно сравнивать. */
:root {
    --code-comment:  #6a9955;  /* комментарии — приглушённый зелёный, курсив */
    --code-keyword:  #7fa8d8;  /* ключевые слова, теги */
    --code-string:   #c9926f;  /* строки — тёплый терракотовый, не лезет в глаза */
    --code-number:   #b5cea8;  /* числа и литералы */
    --code-title:    #d8c489;  /* имена функций и классов, встроенные функции */
    --code-attr:     #9cc4e4;  /* атрибуты, свойства, переменные, параметры */
    --code-meta:     #7d8590;  /* директивы, doctype, шебанг */
    --code-punct:    #98a2af;  /* операторы и пунктуация — чуть тише текста */
    --code-deleted:  #e88b8b;  /* удалённые строки в диффах */
}

/* Базовый цвет подсвеченного блока. Наследуем от родителя, чтобы не спорить
   с оформлением конкретного раздела. */
.hljs {
    color: inherit;
    background: transparent;
}

.hljs-comment,
.hljs-quote {
    color: var(--code-comment);
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
    color: var(--code-keyword);
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
    color: var(--code-string);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-variable.constant_ {
    color: var(--code-number);
}

.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-built_in,
.hljs-selector-id,
.hljs-selector-class {
    color: var(--code-title);
}

.hljs-attr,
.hljs-property,
.hljs-variable,
.hljs-template-tag,
.hljs-params,
.hljs-subst {
    color: var(--code-attr);
}

.hljs-meta,
.hljs-meta .hljs-keyword {
    color: var(--code-meta);
}

/* Операторы и скобки. Раньше оставались цветом основного текста и сливались
   с именами переменных — на плотном коде это заметно мешает. */
.hljs-operator,
.hljs-punctuation {
    color: var(--code-punct);
}

.hljs-deletion {
    color: var(--code-deleted);
}

.hljs-emphasis { font-style: italic; }
.hljs-strong   { font-weight: 600; }

/* --------------------------------------------------------------------------
   Панелька над блоком: слева язык, справа кнопка копирования.

   Это обычная строка в потоке, а не наложение поверх кода. Наложение требовало
   бы position:relative на самом <pre>, а позиционированный <pre> перекрывал
   кнопку правки сообщения в тикетах (она absolute внутри пузыря и по порядку
   в разметке идёт раньше). Заодно строка не закрывает первую строку кода и не
   может наехать на подпись языка.
   -------------------------------------------------------------------------- */

.pre-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    /* Панелька служебная — шрифт берём интерфейсный, а не моноширинный
       от <pre>, и не даём ей растягиваться по ширине длинного кода. */
    font-family: inherit;
    line-height: 1;
    user-select: none;
}

.pre-tools-lang {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Пустая подпись (блок без языка) не должна оставлять дырку в разметке. */
.pre-tools-lang:empty { display: none; }

.pre-tools-copy {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--btn-secondary-bg);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.pre-tools-copy:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--border-hover);
    color: var(--text-bright);
}

.pre-tools-copy.is-copied {
    border-color: var(--color-success);
    color: var(--color-success);
}

.pre-tools-copy.is-failed {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Поле для запасного пути копирования (execCommand) — за экран, но не
   display:none: скрытое поле нельзя выделить, и копирование не сработает. */
.pre-tools-copy-src {
    position: fixed;
    top: -1000px;
    left: -1000px;
    opacity: 0;
}

/* В FAQ сверху был зарезервирован отступ под кнопку, висевшую поверх блока.
   Панелька теперь в потоке, дырка сверху не нужна. */
.faq-answer pre:has(.pre-tools) {
    padding-top: 16px;
}

/* --------------------------------------------------------------------------
   Логи с ANSI-раскраской. Разметку строит code_highlight.js (renderAnsi),
   highlight.js такие блоки не трогает.

   Палитра терминальная, но приглушена под тёмный фон сайта: чистый чёрный на
   нём не читается вовсе, а чистый ярко-зелёный режет глаз. Коды 30-37 —
   обычные цвета, 90-97 — их «яркие» варианты из расширенной палитры.
   Насыщенность специально не поднята: логи читают подолгу.
   -------------------------------------------------------------------------- */

.ansi-30 { color: #6b7480; }   /* чёрный — на тёмном фоне даём тёмно-серый */
.ansi-31 { color: #e06c6c; }   /* красный */
.ansi-32 { color: #5fbf7f; }   /* зелёный */
.ansi-33 { color: #d9b155; }   /* жёлтый */
.ansi-34 { color: #6f9fe0; }   /* синий */
.ansi-35 { color: #d182c4; }   /* розовый */
.ansi-36 { color: #7fd39a; }   /* салатовый */
.ansi-37 { color: #b8c0cc; }   /* сероватый */

.ansi-90 { color: #8a93a0; }   /* яркие варианты тех же цветов */
.ansi-91 { color: #f08a8a; }
.ansi-92 { color: #7fd99b; }
.ansi-93 { color: #ecc873; }
.ansi-94 { color: #8fb8ee; }
.ansi-95 { color: #e39ed6; }
.ansi-96 { color: #9ae2b4; }
.ansi-97 { color: #e6e9ee; }

.ansi-bg-40, .ansi-bg-100 { background-color: #2a313c; }
.ansi-bg-41, .ansi-bg-101 { background-color: #5c3535; }
.ansi-bg-42, .ansi-bg-102 { background-color: #2f5040; }
.ansi-bg-43, .ansi-bg-103 { background-color: #5a4a2a; }
.ansi-bg-44, .ansi-bg-104 { background-color: #33445c; }
.ansi-bg-45, .ansi-bg-105 { background-color: #4c3a52; }
.ansi-bg-46, .ansi-bg-106 { background-color: #2e4a4d; }
.ansi-bg-47, .ansi-bg-107 { background-color: #3a4252; }

.ansi-bold      { font-weight: 700; }
.ansi-dim       { opacity: .65; }
.ansi-italic    { font-style: italic; }
.ansi-underline { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Окно вставки блока кода (кнопка «блок кода» на панели Quill).
   Разметку целиком строит quill_code_lang.js, здесь только оформление.
   -------------------------------------------------------------------------- */

.mcl-modal {
    position: fixed;
    inset: 0;
    /* Редактор часто сам живёт внутри модалки раздела (.admin-modal — 10000,
       её надстройки — 10001, лайтбоксы — до 20000). Окно с кодом всегда
       поверх того, из чего его открыли. */
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* display:flex перебил бы служебный [hidden] — гасим окно явно. */
.mcl-modal[hidden] { display: none; }

.mcl-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 13, 18, .72);
}

.mcl-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1180px, 100%);
    height: min(88vh, 940px);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}

.mcl-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.mcl-title {
    flex: 1;
    color: var(--text-bright);
    font-size: 14px;
    font-weight: 600;
}

.mcl-lang {
    height: 28px;
    max-width: 200px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

.mcl-lang:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.mcl-close {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mcl-close:hover {
    background: var(--bg-card-hover);
    color: var(--text-bright);
}

/* Моноширинное поле: код должен выглядеть кодом уже при наборе.
   Перенос строк отключён — длинные строки лога лучше листать вбок,
   чем читать разорванными. */
.mcl-text {
    flex: 3 1 0;
    min-height: 160px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 0;
    background: var(--bg-inner);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

.mcl-text:focus {
    outline: 1px solid var(--border-hover);
    outline-offset: -1px;
}

/* Предпросмотр: блок ровно в том виде, в каком он окажется на странице. */
.mcl-prev-head {
    padding: 8px 14px 6px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mcl-prev {
    flex: 2 1 0;
    min-height: 90px;
    margin: 0;
    padding: 0 14px 12px;
    background: var(--bg-inner);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
}

.mcl-prev.is-empty::before {
    content: 'пусто';
    color: var(--text-muted);
    font-style: italic;
}

.mcl-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}

.mcl-hint {
    flex: 1;
    color: var(--text-muted);
    font-size: 12px;
}

.mcl-btn {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

.mcl-btn:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--border-hover);
}

.mcl-ok {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.mcl-ok:hover {
    background: var(--btn-primary-hover);
}

.mcl-remove {
    color: var(--color-danger);
}

@media (max-width: 640px) {
    .mcl-modal { padding: 0; }
    .mcl-dialog { max-height: 100%; height: 100%; border: 0; border-radius: 0; }
    .mcl-hint  { display: none; }
}