/* ============================================================
   База знань у кабінеті клієнта — ПОРТ Training Design System (CRM css/training-system.css).
   Мета: стаття в кабінеті виглядає так само, як у CRM (власник 2026-08-01 «збережи форматування»).
   Портовано ПІДМНОЖИНУ, що реально трапляється в контенті статей (ts-h1..h4, ts-lead, ts-table,
   ts-callout, ts-tldr, ts-kpi, ts-badge, ts-faq, ts-figure, ts-hero, ts-sources, ts-code) —
   каркас рідера CRM (TOC, рейтинг, прогрес-бар, адмін-панель) свідомо НЕ переносимо.
   ⚠ Шрифти Inter/JetBrains Mono у портал не тягнемо (немає /fonts) — системний стек як фолбек.
   Усі правила під .kb-body, щоб стилі статті не текли на решту кабінету.
   ============================================================ */

.kb-body {
    --ts-brand-yellow: #FFC107;
    --ts-brand-orange: #FF6B1A;
    --ts-brand-ink: #1A1A1A;
    --ts-bg: #FFFFFF;
    --ts-surface: #FAFAF8;
    --ts-surface-2: #F1F1ED;
    --ts-border: #E5E4DF;
    --ts-border-strong: #1A1A1A;
    --ts-text: #1A1A1A;
    --ts-text-muted: #6B6B68;
    --ts-text-faint: #9B9B96;
    --ts-info: #2563EB;
    --ts-success: #16A34A;
    --ts-warn: #F59E0B;
    --ts-danger: #DC2626;
    --ts-tip: #9333EA;
    --ts-code-bg: #1A1A1A;
    --ts-code-text: #FFC107;
    --ts-font-mono: 'JetBrains Mono', Menlo, Consolas, monospace;
    --ts-s-1: 4px; --ts-s-2: 8px; --ts-s-3: 12px; --ts-s-4: 16px;
    --ts-s-6: 24px; --ts-s-8: 32px; --ts-s-12: 48px;
    --ts-r-sm: 2px; --ts-r-md: 4px;

    font-size: 16px;
    line-height: 1.7;
    color: var(--ts-text);
}
/* Текст тримаємо читабельним (~860px), а ШИРОКИМ блокам (таблиці протоколів на 8-9 колонок)
   віддаємо всю колонку гріда — інакше вони обрізались і жили лише на горизонтальному скролі
   (кейс власника 2026-08-12, стаття з випробуваннями). */
.kb-body > * { max-width: 860px; }
.kb-body > .ts-table-wrap { max-width: none; }

/* ── заголовки й текст ── */
.kb-body .ts-h1 { font-size: 34px; line-height: 1.15; font-weight: 900; color: var(--ts-brand-ink);
    letter-spacing: -0.02em; margin: 0 0 var(--ts-s-3); text-transform: uppercase; }
.kb-body .ts-h2 { font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--ts-brand-ink);
    margin: var(--ts-s-12) 0 var(--ts-s-4); padding-bottom: var(--ts-s-2);
    border-bottom: 2px solid var(--ts-brand-yellow); }
.kb-body .ts-h3 { font-size: 21px; line-height: 1.35; font-weight: 700; margin: var(--ts-s-8) 0 var(--ts-s-3); }
.kb-body .ts-h4 { font-size: 18px; line-height: 1.4; font-weight: 700; margin: var(--ts-s-6) 0 var(--ts-s-2); }
.kb-body h1 { font-size: 30px; margin: 0 0 12px; line-height: 1.2; }
.kb-body h2 { font-size: 24px; margin: 28px 0 12px; line-height: 1.3; }
.kb-body h3 { font-size: 19px; margin: 22px 0 10px; line-height: 1.35; }
.kb-body p { margin: 0 0 var(--ts-s-4); }
.kb-body .ts-lead { font-size: 18px; line-height: 1.6; font-style: italic;
    color: var(--ts-text-muted); margin: 0 0 var(--ts-s-6); }
.kb-body .ts-meta { font-size: 12px; color: var(--ts-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.kb-body ul, .kb-body ol { margin: var(--ts-s-2) 0 var(--ts-s-4); padding-left: 22px; }
.kb-body li { margin: 4px 0; }
.kb-body a { color: #2f6fed; }
.kb-body hr { border: 0; border-top: 1px solid var(--ts-border); margin: var(--ts-s-6) 0; }

.kb-body code, .kb-body .ts-code { font-family: var(--ts-font-mono); font-size: .92em;
    background: var(--ts-code-bg); color: var(--ts-code-text);
    padding: 2px 6px; border-radius: var(--ts-r-sm); font-weight: 500; }
.kb-body pre { background: var(--ts-code-bg); color: var(--ts-code-text); padding: var(--ts-s-4);
    border-radius: var(--ts-r-md); overflow-x: auto; font-family: var(--ts-font-mono); font-size: 13px; }
.kb-body pre code { background: transparent; padding: 0; }

/* ── шапка статті ── */
.kb-body .ts-hero { padding-bottom: var(--ts-s-6); margin-bottom: var(--ts-s-8);
    border-bottom: 2px solid var(--ts-brand-yellow); }
.kb-body .ts-hero-subtitle { font-size: 19px; color: var(--ts-text-muted); font-weight: 400;
    margin: 0 0 var(--ts-s-4); line-height: 1.4; }
.kb-body .ts-hero-meta { display: flex; flex-wrap: wrap; gap: var(--ts-s-4);
    font-size: 14px; color: var(--ts-text-muted); }
.kb-body .ts-hero-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.kb-body .ts-breadcrumbs { display: none; }   /* внутрішня навігація CRM — клієнту не потрібна */

/* ── виноски (callout) ── */
.kb-body .ts-callout { display: grid; grid-template-columns: 4px 28px 1fr; gap: var(--ts-s-3);
    background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: var(--ts-r-md);
    padding: var(--ts-s-4); margin: var(--ts-s-6) 0; overflow: hidden; }
.kb-body .ts-callout::before { content: ''; grid-row: 1 / -1;
    background: var(--ts-callout-accent, var(--ts-info)); border-radius: var(--ts-r-sm); }
.kb-body .ts-callout-icon { font-size: 22px; line-height: 1; align-self: start;
    color: var(--ts-callout-accent, var(--ts-info)); }
.kb-body .ts-callout-body { font-size: 16px; line-height: 1.6; }
.kb-body .ts-callout-body > :first-child { margin-top: 0; }
.kb-body .ts-callout-body > :last-child { margin-bottom: 0; }
.kb-body .ts-callout-title { font-weight: 700; margin-bottom: var(--ts-s-2); color: var(--ts-text); }
.kb-body .ts-callout--info { --ts-callout-accent: var(--ts-info); }
.kb-body .ts-callout--tip { --ts-callout-accent: var(--ts-tip); }
.kb-body .ts-callout--warn { --ts-callout-accent: var(--ts-warn); }
.kb-body .ts-callout--danger { --ts-callout-accent: var(--ts-danger); }
.kb-body .ts-callout--success { --ts-callout-accent: var(--ts-success); }
/* легасі-класи зі старих статей */
.kb-body .callout { background: var(--ts-surface); border: 1px solid var(--ts-border);
    border-left: 4px solid var(--ts-info); border-radius: var(--ts-r-md);
    padding: var(--ts-s-4); margin: var(--ts-s-6) 0; }
.kb-body .callout-warn { border-left-color: var(--ts-warn); background: #fff8e6; }

/* ── TL;DR ── */
.kb-body .ts-tldr { background: var(--ts-brand-yellow); color: var(--ts-brand-ink);
    border: 2px solid var(--ts-brand-ink); border-radius: var(--ts-r-md);
    padding: var(--ts-s-6); margin: var(--ts-s-8) 0; }
.kb-body .ts-tldr-header { font-size: 12px; font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; margin-bottom: var(--ts-s-4); }
.kb-body .ts-tldr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ts-s-3); margin-bottom: var(--ts-s-4); }
.kb-body .ts-tldr-grid:last-child { margin-bottom: 0; }
.kb-body .ts-tldr p { margin: 0 0 var(--ts-s-2); }
.kb-body .ts-tldr p:last-child { margin-bottom: 0; }

/* ── KPI-плитки й бейджі ── */
.kb-body .ts-kpi { background: var(--ts-bg); border: 2px solid var(--ts-brand-ink);
    border-radius: var(--ts-r-md); padding: var(--ts-s-3) var(--ts-s-4); text-align: left; }
.kb-body .ts-kpi-value { font-family: var(--ts-font-mono); font-size: 28px; font-weight: 900;
    line-height: 1; color: var(--ts-brand-ink); margin-bottom: var(--ts-s-1); }
.kb-body .ts-kpi-label { font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ts-text-muted); }
.kb-body .ts-kpi--accent { background: var(--ts-brand-yellow); }
.kb-body .ts-kpi--accent .ts-kpi-label { color: var(--ts-brand-ink); }
.kb-body .ts-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    background: var(--ts-surface-2); color: var(--ts-text);
    border-radius: var(--ts-r-sm); border: 1px solid var(--ts-border); }
.kb-body .ts-badge--success { background: var(--ts-success); color: #fff; border-color: transparent; }
.kb-body .ts-badge--warn { background: var(--ts-warn); color: #fff; border-color: transparent; }
.kb-body .ts-badge--danger { background: var(--ts-danger); color: #fff; border-color: transparent; }
.kb-body .ts-badge--info { background: var(--ts-info); color: #fff; border-color: transparent; }
.kb-body .ts-badge--accent { background: var(--ts-brand-yellow); color: var(--ts-brand-ink); border-color: transparent; }

/* ── таблиці (найчастіший блок у статтях) ── */
.kb-body .ts-table-wrap { overflow-x: auto; margin: var(--ts-s-4) 0;
    border: 2px solid var(--ts-border-strong); border-radius: var(--ts-r-md); }
.kb-body .ts-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kb-body .ts-table thead { background: var(--ts-brand-ink); color: var(--ts-brand-yellow); }
.kb-body .ts-table th { text-align: left; padding: var(--ts-s-3) var(--ts-s-4); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.kb-body .ts-table td { padding: var(--ts-s-3) var(--ts-s-4); border-top: 1px solid var(--ts-border); vertical-align: top; }
.kb-body .ts-table tbody tr:hover { background: var(--ts-surface); }
.kb-body .ts-table code { font-size: .92em; padding: 1px 5px; }
.kb-body .ts-table--decision td:first-child { background: var(--ts-surface-2); font-weight: 700;
    border-right: 2px solid var(--ts-border-strong); }
.kb-body .ts-table--decision td:last-child { background: var(--ts-bg); border-left: 4px solid var(--ts-brand-yellow); }
/* таблиці без ts-обгортки (старі статті) */
.kb-body > table, .kb-body table:not(.ts-table) { width: 100%; border-collapse: collapse;
    margin: var(--ts-s-4) 0; font-size: 14px; }
.kb-body table:not(.ts-table) th, .kb-body table:not(.ts-table) td {
    border: 1px solid var(--ts-border); padding: 6px 10px; text-align: left; }
.kb-body table:not(.ts-table) th { background: var(--ts-surface-2); font-weight: 700; }

/* ── FAQ, ілюстрації, джерела ── */
.kb-body .ts-faq { border: 1px solid var(--ts-border); border-radius: var(--ts-r-md);
    background: var(--ts-surface); margin-bottom: var(--ts-s-2); }
.kb-body .ts-faq summary { list-style: none; cursor: pointer; padding: var(--ts-s-3) var(--ts-s-4);
    font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: var(--ts-s-3); }
.kb-body .ts-faq summary::-webkit-details-marker { display: none; }
.kb-body .ts-faq summary::after { content: '+'; font-family: var(--ts-font-mono); font-size: 20px;
    font-weight: 900; color: var(--ts-brand-orange); }
.kb-body .ts-faq[open] summary::after { content: '−'; }
.kb-body .ts-faq-body { padding: 0 var(--ts-s-4) var(--ts-s-4); line-height: 1.6; }
.kb-body .ts-hero-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ts-s-3); margin: var(--ts-s-4) 0 var(--ts-s-8); }
.kb-body .ts-hero-gallery img { width: 100%; height: 140px; object-fit: contain;
    background: var(--ts-surface); border: 1px solid var(--ts-border);
    border-radius: var(--ts-r-md); padding: var(--ts-s-2); }
.kb-body .ts-figure { margin: var(--ts-s-6) 0; text-align: center; }
.kb-body .ts-figure img { max-width: 100%; border-radius: var(--ts-r-md); border: 1px solid var(--ts-border); }
.kb-body .ts-figure figcaption { font-size: 14px; color: var(--ts-text-muted); font-style: italic; margin-top: var(--ts-s-2); }
.kb-body img { max-width: 100%; height: auto; border-radius: var(--ts-r-md); }
.kb-body .ts-sources { margin-top: var(--ts-s-12); padding: var(--ts-s-4) var(--ts-s-6);
    background: var(--ts-surface-2); border-top: 4px solid var(--ts-brand-ink);
    border-radius: 0 0 var(--ts-r-md) var(--ts-r-md); }
.kb-body .ts-sources-title { font-size: 12px; font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; color: var(--ts-text-muted); margin-bottom: var(--ts-s-2); }
.kb-body .ts-sources ul { font-size: 14px; color: var(--ts-text-muted); margin: 0; padding-left: var(--ts-s-6); }
.kb-body blockquote { margin: var(--ts-s-4) 0; padding: var(--ts-s-2) var(--ts-s-4);
    border-left: 3px solid var(--ts-brand-yellow); background: var(--ts-surface); }

/* каркас рідера CRM, якщо потрапить у контент — нейтралізуємо (щоб не ламало верстку кабінету) */
.kb-body .ts-toc, .kb-body .ts-quick-facts, .kb-body .ts-rating-widget,
.kb-body .ts-reading-progress, .kb-body .ts-admin-bar, .kb-body .ts-toc-fab { display: none !important; }
.kb-body .ts-reader-grid { display: block !important; padding: 0 !important; max-width: none !important; }

@media (max-width: 767px) {
    .kb-body .ts-h1 { font-size: 26px; }
    .kb-body .ts-h2 { font-size: 21px; }
    .kb-body .ts-tldr-grid { grid-template-columns: 1fr; }
}

/* ── добірка класів, що трапляються в решті 212 статей (перевірено скануванням контенту) ── */
.kb-body .ts-body p { margin: 0 0 var(--ts-s-4); }
.kb-body .ts-p { margin: 0 0 var(--ts-s-4); }
.kb-body .ts-ul { margin: var(--ts-s-2) 0 var(--ts-s-4); padding-left: 22px; }
.kb-body .ts-text-muted { color: var(--ts-text-muted); }
.kb-body .ts-bc-sep { margin: 0 var(--ts-s-2); color: var(--ts-text-faint); }
.kb-body .ts-src { font-size: 13px; color: var(--ts-text-muted); }
.kb-body .ts-quick-facts-title { font-size: 12px; font-weight: 900; text-transform: uppercase;
    letter-spacing: .1em; color: var(--ts-text-muted); margin-bottom: var(--ts-s-3); }
/* легасі-попередження зі старих статей */
.kb-body .warn, .kb-body .note-warn { background: #fff8e6; border: 1px solid #f0e0b0;
    border-left: 4px solid var(--ts-warn); border-radius: var(--ts-r-md);
    padding: var(--ts-s-3) var(--ts-s-4); margin: var(--ts-s-4) 0; }

/* ── 📚 стаття з БІЧНИМ ЗМІСТОМ (як рідер CRM; власник 2026-08-02) ── */
/* зміст ЛІВОРУЧ, текст праворуч — як у рідері CRM (власник 2026-08-02) */
.kb-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.kb-grid--single { grid-template-columns: minmax(0, 1fr); }
/* eyebrow над H1 у hero (як ts-breadcrumbs рідера CRM, але без внутрішніх лінків) */
.kb-body .kb-eyebrow { font-size: 12px; color: var(--ts-text-muted); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 12px; }
@media (max-width: 767px) { .kb-body .ts-h1 { font-size: 24px; } }
.kb-toc { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto;
    padding: 14px 12px; background: var(--surface, #fff); border: 1px solid var(--border, #e6ebf3); border-radius: 12px; }
.kb-toc-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-500, #68748C); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border, #e6ebf3); }
.kb-toc-list { display: flex; flex-direction: column; }
.kb-toc-a { display: block; padding: 5px 8px; font-size: 13px; line-height: 1.35; color: var(--ink-600, #55627a);
    text-decoration: none; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; transition: color 150ms, background 150ms; }
.kb-toc-a:hover { color: var(--ink-900, #12294d); background: var(--bg, #f6f8fb); }
.kb-toc-a.lvl3 { padding-left: 18px; font-size: 12.5px; }
.kb-toc-a.on { color: #12294d; font-weight: 700; background: #fff8e6; border-left-color: #FFC107; }
@media (max-width: 1023px) { .kb-grid { grid-template-columns: minmax(0, 1fr); } .kb-toc { display: none; } }