/* ===========================================================================
   Оформление тела статей: блоки команд, инлайн-код, таблицы.
   Применяется к .kb-article-body, .news-article-full, .doc-body — тем же
   трём контейнерам, что уже использует fluid-type.css.

   ПОЧЕМУ ЭТОТ ФАЙЛ ПОЯВИЛСЯ. Правила для `pre` и `code` в kb-article.php
   существовали и выглядели рабочими, но ссылались на переменные, которых в
   проекте нет: `var(--card-bg)`, `var(--text)`, `var(--border)`. Браузер
   отбрасывает объявление с неразрешимой переменной целиком, поэтому блоки
   команд на 316 статьях всё это время рисовались голым текстом без фона,
   рамки и отступов. Измерено 2026-09-23: `--text` 21 вхождение,
   `--card-bg` 14, и ни одного определения ни в css/, ни в php.

   Здесь используются ТОЛЬКО существующие токены (--bg-*, --text-*,
   --border-*, --primary), плюс свои локальные --prose-*, объявленные для
   обеих тем явно.
   =========================================================================== */

/* --------------------------------------------------------------- палитра */
/* Светлая — база. Тёмная переопределяет те же имена, поэтому ни одно
   значение не существует только внутри media/атрибутного блока. */
.kb-article-body,
.news-article-full,
.doc-body {
    /* Белая поверхность на сером фоне страницы (--bg-body #f4f6fa) даёт
       различимый край. Оттенок серого здесь почти совпал бы с фоном:
       проверено на снимке — блок «растворялся». */
    --prose-code-bg:        #ffffff;
    --prose-code-border:    rgba(15, 23, 42, 0.16);
    --prose-code-text:      #0f172a;
    --prose-code-comment:   #6b7280;
    --prose-inline-bg:      rgba(15, 23, 42, 0.05);
    --prose-inline-border:  rgba(15, 23, 42, 0.10);
    --prose-inline-text:    #b3246b;          /* заметен, но не спорит со ссылками */
    --prose-table-head:     rgba(15, 23, 42, 0.04);
    --prose-table-zebra:    rgba(15, 23, 42, 0.02);
    --prose-btn-bg:         #f1f5f9;
    --prose-btn-text:       #334155;
}

[data-theme="dark"] .kb-article-body,
[data-theme="dark"] .news-article-full,
[data-theme="dark"] .doc-body {
    --prose-code-bg:        #0d1117;
    --prose-code-border:    rgba(255, 255, 255, 0.10);
    --prose-code-text:      #e6edf3;
    --prose-code-comment:   #8b949e;
    --prose-inline-bg:      rgba(255, 255, 255, 0.07);
    --prose-inline-border:  rgba(255, 255, 255, 0.12);
    --prose-inline-text:    #7ee3ff;
    --prose-table-head:     rgba(255, 255, 255, 0.05);
    --prose-table-zebra:    rgba(255, 255, 255, 0.025);
    --prose-btn-bg:         rgba(255, 255, 255, 0.08);
    --prose-btn-text:       #c9d1d9;
}

/* ------------------------------------------------------------ блок команд */
.kb-article-body pre,
.news-article-full pre,
.doc-body pre {
    position: relative;
    margin: 1.5rem 0;
    padding: 14px 16px;
    background: var(--prose-code-bg);
    border: 1px solid var(--prose-code-border);
    border-radius: 12px;
    /* Команды НЕ переносим: перенос делает скопированную строку неотличимой
       от двух разных команд. Вместо переноса — горизонтальная прокрутка. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--prose-code-border) transparent;
}

.kb-article-body pre::-webkit-scrollbar,
.news-article-full pre::-webkit-scrollbar,
.doc-body pre::-webkit-scrollbar { height: 8px; }

.kb-article-body pre::-webkit-scrollbar-thumb,
.news-article-full pre::-webkit-scrollbar-thumb,
.doc-body pre::-webkit-scrollbar-thumb {
    background: var(--prose-code-border);
    border-radius: 8px;
}

.kb-article-body pre code,
.news-article-full pre code,
.doc-body pre code {
    display: block;
    /* JetBrains Mono объявлен в проекте первым — если не загрузился,
       дальше идут системные моноширинные, а не безликий monospace. */
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
                 Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: .875rem;
    line-height: 1.7;
    color: var(--prose-code-text);
    background: none;
    border: 0;
    padding: 0;
    white-space: pre;
    tab-size: 4;
    /* Лигатуры в командах вредны: `!=` не должно склеиваться в один глиф. */
    font-variant-ligatures: none;
}

/* Комментарии. Размечает js/prose-code.js по текстовым узлам; без JS блок
   просто остаётся одноцветным — деградация без потери смысла. */
.kb-article-body pre .tok-c,
.news-article-full pre .tok-c,
.doc-body pre .tok-c { color: var(--prose-code-comment); }

/* ------------------------------------------------------- кнопка «копировать» */
/* Видна всегда, а не по наведению: на телефоне наведения нет вовсе. */
.prose-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font: 500 .75rem/1 var(--font-body, system-ui, sans-serif);
    color: var(--prose-btn-text);
    background: var(--prose-btn-bg);
    border: 1px solid var(--prose-code-border);
    border-radius: 8px;
    cursor: pointer;
    opacity: .9;
    transition: opacity .15s ease, transform .1s ease, color .15s ease;
}

.prose-copy:hover  { opacity: 1; }
.prose-copy:active { transform: translateY(1px); }

.prose-copy:focus-visible {
    outline: 2px solid var(--primary, #0099cc);
    outline-offset: 2px;
    opacity: 1;
}

.prose-copy[data-state="done"] {
    opacity: 1;
    color: #16a34a;
    border-color: rgba(22, 163, 74, .45);
}

.prose-copy[data-state="fail"] {
    opacity: 1;
    color: #dc2626;
    border-color: rgba(220, 38, 38, .45);
}

/* Кнопка стоит над первой строкой — даём ей место, но только там, где она
   действительно появилась. */
.kb-article-body pre.has-copy,
.news-article-full pre.has-copy,
.doc-body pre.has-copy { padding-top: 40px; }

@media (prefers-reduced-motion: reduce) {
    .prose-copy { transition: none; }
    .prose-copy:active { transform: none; }
}

/* ------------------------------------------------------------- инлайн-код */
.kb-article-body :not(pre) > code,
.news-article-full :not(pre) > code,
.doc-body :not(pre) > code {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;
    font-size: .875em;              /* em, а не rem: следует за размером строки */
    color: var(--prose-inline-text);
    background: var(--prose-inline-bg);
    border: 1px solid var(--prose-inline-border);
    border-radius: 6px;
    padding: .1em .38em;
    /* Имя файла или ключ не должны рваться пополам посреди строки. */
    white-space: nowrap;
    word-break: keep-all;
}

/* Длинный инлайн-код (путь, ключ) рвать всё же лучше, чем ломать вёрстку. */
.kb-article-body :not(pre) > code:only-child,
.news-article-full :not(pre) > code:only-child,
.doc-body :not(pre) > code:only-child { white-space: normal; word-break: break-word; }

/* В заголовках код не должен выглядеть чужеродным. */
.kb-article-body h2 code, .kb-article-body h3 code,
.news-article-full h2 code, .news-article-full h3 code,
.doc-body h2 code, .doc-body h3 code {
    font-size: .9em;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

/* ---------------------------------------------------------------- таблицы */
/* Обёртку ставит js/prose-code.js. Без неё таблица просто остаётся обычной
   таблицей — оформление применится, прокрутки на узком экране не будет. */
.prose-table-wrap {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--prose-code-border);
    border-radius: 12px;
    scrollbar-width: thin;
}

.kb-article-body table,
.news-article-full table,
.doc-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.prose-table-wrap > table { margin: 0; }

.kb-article-body th, .kb-article-body td,
.news-article-full th, .news-article-full td,
.doc-body th, .doc-body td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--prose-code-border);
}

.kb-article-body thead th,
.news-article-full thead th,
.doc-body thead th {
    background: var(--prose-table-head);
    font-weight: 600;
    white-space: nowrap;
}

.kb-article-body tbody tr:nth-child(even),
.news-article-full tbody tr:nth-child(even),
.doc-body tbody tr:nth-child(even) { background: var(--prose-table-zebra); }

.kb-article-body tbody tr:last-child td,
.news-article-full tbody tr:last-child td,
.doc-body tbody tr:last-child td { border-bottom: 0; }

/* Числа в колонках — табличными цифрами, чтобы столбец не «плясал». */
.kb-article-body td, .news-article-full td, .doc-body td {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ узкий */
@media (max-width: 640px) {
    .kb-article-body pre,
    .news-article-full pre,
    .doc-body pre { padding: 12px 12px; border-radius: 10px; }

    .kb-article-body pre code,
    .news-article-full pre code,
    .doc-body pre code { font-size: .8125rem; line-height: 1.65; }

    .kb-article-body pre.has-copy,
    .news-article-full pre.has-copy,
    .doc-body pre.has-copy { padding-top: 38px; }

    .kb-article-body th, .kb-article-body td,
    .news-article-full th, .news-article-full td,
    .doc-body th, .doc-body td { padding: 8px 10px; }
}

/* ------------------------------------------------------------------ печать */
@media print {
    .prose-copy { display: none; }
    .kb-article-body pre,
    .news-article-full pre,
    .doc-body pre {
        background: none;
        border: 1px solid #999;
        white-space: pre-wrap;      /* на бумаге прокрутки нет */
    }
}