/* Наглядные блоки внутри текста статей журнала (27.10.2026). Подключаются полем pageCss2: article-viz.css
   в front matter статьи — второй файл стилей страницы рядом с article.css. Только токены и компоненты ds.css
   (.panel, .chip, .tag), своих цветов нет.
   1) .kg — живой пример графа знаний (/journal/what-is-a-knowledge-graph/). SVG рисует assets/js/kg-demo.js
      из видимого списка утверждений .kg-facts; без JS остаётся список (его же читают поисковики и markdown-версия).
   2) .flow — схема LLM wiki «источники → вики → вопросы» (/journal/what-is-llm-wiki/): обычный HTML, текст
      переводится вместе со статьёй; на телефоне блоки встают столбиком, стрелки смотрят вниз. */

/* ── 1. Живой граф знаний ── */
.prose .kg{margin:30px 0}
.kg-stage{padding:6px}
.kg-stage svg{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none}
html:not(.js) .kg-stage,html:not(.js) .kg-ask,html:not(.js) .kg-out{display:none}
.kg-ask{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kg-ask .chip{height:auto;min-height:34px;padding:7px 14px;line-height:1.35;text-align:left}
.kg-out{min-height:20px;margin:12px 2px 0;font:500 13px/1.5 var(--mono);color:var(--c2)}
.prose .kg-facts{margin:12px 0 0;padding:8px 16px;border-radius:var(--r2);background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;line-height:1.5}
.prose .kg-facts li{margin:7px 0;color:var(--mute);transition:color .2s}
.prose .kg-facts b{font-weight:600;color:var(--ink2)}
.prose .kg-facts em{font:500 .86em var(--mono);color:var(--v3)}
.prose .kg-facts li.on,.prose .kg-facts li.on b{color:var(--ink)}
.prose .kg-facts li.on::before{background:var(--c);box-shadow:0 0 8px rgba(34,211,238,.7)}
/* цвет типа: точка в узле графа и в подписи под ним */
.kg-t-person{--kc:var(--v2)}.kg-t-book{--kc:var(--c)}.kg-t-topic{--kc:var(--am)}.kg-t-project{--kc:var(--ok)}
.kg figcaption [class^="kg-t-"]::before{content:"";display:inline-block;width:8px;height:8px;margin:0 5px 1px 2px;border-radius:50%;background:var(--kc)}
/* SVG: связи, подписи связей, узлы */
.kg-e{stroke:var(--line3);stroke-width:1.4}
.kg-ah{fill:var(--line3)}.kg-ah.on{fill:var(--c)}
.kg-el rect{fill:var(--p1)}
.kg-el text{font:500 11px var(--mono);fill:var(--mute);text-anchor:middle}
.kg-n{cursor:pointer;outline:none}
.kg-n rect{fill:var(--p3);stroke:var(--line3);stroke-width:1}
.kg-n circle{fill:var(--kc)}
.kg-n text{font:600 13px var(--font);fill:var(--ink)}
.kg-n:hover rect,.kg-n:focus-visible rect{stroke:var(--v2)}
.kg-n:focus-visible rect{stroke-width:2}
.kg-e.on{stroke:var(--c);stroke-width:2}
.kg-el.on text{fill:var(--c2)}
.kg-n.on rect{stroke:rgba(34,211,238,.55)}
.kg-n.hit rect{stroke:var(--c);stroke-width:2}
.kg-e,.kg-el,.kg-n,.kg-n rect{transition:opacity .2s,stroke .2s}
.kg .dim{opacity:.22}
@media (prefers-reduced-motion:reduce){.kg-e,.kg-el,.kg-n,.kg-n rect,.prose .kg-facts li{transition:none}}

/* ── 2. Схема LLM wiki ── */
.prose .flow{margin:30px 0}
.flow-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}
.flow-box{display:flex;flex-direction:column;gap:6px;padding:16px}
.flow-box b,.flow-base b{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.flow-t{font-size:14px;line-height:1.5;color:var(--mute)}
.prose .flow code{align-self:flex-start;font-size:12px}
.flow-hi{box-shadow:inset 0 0 0 1px rgba(167,139,250,.45)}
.flow-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 2px;color:var(--v2);font:500 20px/1 var(--mono)}
.flow-arrow::after{content:"→"}.flow-two::after{content:"⇄"}
.flow-base{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;padding:14px 16px}
@media (max-width:640px){
 .flow-row{grid-template-columns:minmax(0,1fr)}
 .flow-arrow{flex-direction:row;padding:2px 0}
 .flow-arrow::after{content:"↓"}.flow-two::after{content:"⇅"}
}