/* ── Граф знаний блога (мини-Obsidian) ───────────────────────────── */
/* Ширина как у остальных блоков сайта: .section = max-width 1180 + padding 28 -> 1124px контента */
.kgraph{width:100%;margin:0 0 8px;padding:0 0 24px;background:transparent}
.kgraph .kg-head{width:min(1124px,calc(100% - 56px));margin:30px auto 0;padding:0}
.kgraph .kg-head h2{font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:clamp(22px,3vw,30px);margin:0 0 8px;color:var(--ink)}
/* Заголовок карты знаний (h1) + «?» справа. Подсказка — по наведению и по фокусу с клавиатуры;
   выезжает из-под кнопки, прижата вправо (right:0), чтобы не вылезти за край экрана. */
.kg-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.kg-title .page-title{margin:0}
.kg-help-wrap{position:relative;display:inline-flex;align-self:center}
.kg-help{width:30px;height:30px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line2);color:var(--muted);
  font-family:'Unbounded',sans-serif;font-size:15px;font-weight:600;line-height:1;cursor:help;padding:0;
  transition:color .15s,border-color .15s,background .15s}
.kg-help:hover,.kg-help:focus-visible{color:var(--btn-ink);background:var(--btn);border-color:var(--btn-line);outline:none}
.kg-help-pop{position:absolute;bottom:calc(100% + 12px);right:0;z-index:60;width:340px;max-width:78vw;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;
  color:var(--soft);font-size:13.5px;line-height:1.55;box-shadow:0 -18px 44px rgba(0,0,0,.45);text-align:left;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility .16s}
.kg-help-pop::before{content:"";position:absolute;top:100%;right:11px;border:7px solid transparent;border-top-color:var(--line2)}
.kg-help-pop::after{content:"";position:absolute;top:100%;right:12px;border:6px solid transparent;border-top-color:var(--panel)}
.kg-help-wrap:hover .kg-help-pop,.kg-help:focus-visible + .kg-help-pop,.kg-help-pop:hover{opacity:1;visibility:visible;transform:translateY(0)}

.kg-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.kg-search{flex:1 1 240px;max-width:340px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line2);border-radius:10px;padding:9px 13px;font:inherit;font-size:14px;outline:none}
.kg-search::placeholder{color:var(--faint)}
.kg-search:focus{border-color:var(--accent)}
/* поиск по статьям в шапке базы знаний (справа от заголовка) */
.blog-search{margin-left:auto;flex:0 1 300px;min-width:200px;max-width:340px;align-self:center}
.blog-search-info{font-size:13px;color:var(--muted);margin:0 0 12px}
@media (max-width:720px){.blog-search{flex-basis:100%;width:100%;margin-left:0}}
.kg-btn{background:var(--panel);color:var(--soft);border:1px solid var(--line2);
  border-radius:10px;padding:9px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.kg-btn:hover{color:var(--ink);border-color:var(--muted)}

.kg-legend{width:min(1124px,calc(100% - 56px));margin:0 auto;padding:16px 0 4px;display:flex;flex-direction:column;gap:9px}
.kg-row{display:flex;flex-wrap:wrap;gap:8px}
.kg-row-sm{gap:6px;border-top:1px solid var(--line);margin-top:2px;padding-top:11px}

/* Общая плашка. Цвет кластера приходит из JS в --c и красит точку, рамку и подсветку —
   раньше активная плашка была одного цвета --accent и не связывалась с точкой на графе. */
.kg-chip{display:inline-flex;align-items:center;font-weight:500;color:var(--ink);
  background:var(--panel);border:1px solid var(--line2);border-radius:999px;
  cursor:pointer;user-select:none;line-height:1;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s}
.kg-chip .dot{border-radius:50%;flex:none;background:var(--c)}
.kg-chip .n{color:var(--faint);font-weight:500;font-variant-numeric:tabular-nums}
.kg-chip:hover{border-color:var(--c)}
.kg-chip.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
.kg-chip.on .n{color:var(--soft)}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  .kg-chip.on{background:color-mix(in srgb,var(--c) 13%,var(--panel))}
}

/* Крупные темы */
.kg-chip-big{font-size:13.5px;gap:9px;padding:8px 14px}
.kg-chip-big .dot{width:11px;height:11px}
.kg-chip-big .n{font-size:12px;background:var(--panel2);border-radius:999px;padding:3px 7px;margin-left:1px}
/* Остальные — компактные и приглушённые */
.kg-chip-sm{font-size:12px;gap:6px;padding:5px 10px;color:var(--soft);background:transparent;border-color:var(--line)}
.kg-chip-sm .dot{width:7px;height:7px}
.kg-chip-sm .n{font-size:11px;margin-left:2px}
.kg-chip-sm:hover{color:var(--ink);background:var(--panel)}

.kg-stage{position:relative;width:min(1124px,calc(100% - 56px));margin:4px auto 0;
  height:min(74vh,720px);min-height:460px;overflow:hidden;border:1px solid var(--line2);
  border-radius:18px;background:var(--panel2);box-shadow:0 10px 34px rgba(0,0,0,.28)}
canvas#blogGraph{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
canvas#blogGraph.grabbing{cursor:grabbing}

.kg-zoom{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:6px;z-index:2}
.kg-zoom button{width:34px;height:34px;border-radius:9px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line2);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kg-zoom button:hover{border-color:var(--muted)}

.kg-info{position:absolute;left:16px;bottom:16px;width:min(340px,calc(100% - 32px));
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:15px 16px;
  box-shadow:0 14px 40px rgba(0,0,0,.38);z-index:3}
.kg-info .kg-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--faint);
  font-size:20px;line-height:1;cursor:pointer;padding:4px}
.kg-info .kg-close:hover{color:var(--ink)}
.kg-info .kg-cl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--soft);margin:0 0 6px}
.kg-info .kg-cl .dot{width:10px;height:10px;border-radius:50%}
.kg-info h3{font-size:17px;margin:0 0 6px;color:var(--ink);line-height:1.3;padding-right:16px}
.kg-info .kg-desc{font-size:13.5px;color:var(--soft);line-height:1.5;margin:0 0 10px}
.kg-info .kg-meta{font-size:12px;color:var(--faint);margin:0 0 10px}
.kg-info .kg-rel-title{font-size:12px;color:var(--faint);margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em}
.kg-info .kg-rel{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.kg-info .kg-rel button{background:var(--panel2);border:1px solid var(--line2);color:var(--soft);
  border-radius:8px;padding:4px 9px;font:inherit;font-size:12px;cursor:pointer;text-align:left}
.kg-info .kg-rel button:hover{color:var(--ink);border-color:var(--muted)}
.kg-info .kg-read{display:inline-block;background:var(--btn);border:1px solid var(--btn-line);
  color:var(--btn-ink);border-radius:9px;padding:8px 14px;font-size:13px;font-weight:700;text-decoration:none}
.kg-info .kg-read:hover{background:var(--btn2)}
.kg-info .kg-soon{font-size:12px;color:var(--faint)}

.kg-hint{position:absolute;right:14px;bottom:12px;color:var(--faint);font-size:11.5px;
  pointer-events:none;z-index:1;text-align:right;line-height:1.5}

/* отступы те же, что у .section по всему сайту: 28px, а с 600px — 16px */
@media (max-width:600px){
  .kgraph .kg-head,.kg-legend{width:calc(100% - 32px)}
  .kg-stage{width:calc(100% - 32px);height:min(68vh,540px);border-radius:14px}
  .kg-hint{display:none}
  .kg-chip-big{font-size:12.5px;padding:7px 12px}
}

/* ── Раскладка блога: карточки статей слева, карта справа ── */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:30px;align-items:start}
/* Липкая легенда «главных разделов» (только КРУПНЫЙ ряд): держится под шапкой при скролле статей. */
.blog-legend-sec{position:sticky;top:46px;z-index:30;background:var(--bg);
  padding-top:10px!important;padding-bottom:10px!important;border-bottom:1px solid var(--line)}
.blog-legend-sec .kg-legend{width:100%;margin:0;padding:0}
/* Мелкие разделы — отдельной секцией ниже, НЕ липкие. */
.blog-legend-more{padding-top:10px!important;padding-bottom:0!important}
.blog-legend-more .kg-legend{width:100%;margin:0;padding:0}
.blog-legend-more .kg-row-sm{border-top:none;margin-top:0;padding-top:0}
/* Карта — тоже липкая, но НИЖЕ закреплённого крупного ряда, чтобы не перекрывались. */
.blog-col-graph{position:sticky;top:112px}
.blog-col-graph .kg-toolbar{margin:0 0 12px}
.blog-col-graph .kg-stage{width:100%;margin:0;height:min(70vh,600px);min-height:420px}

.blog-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.blog-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:border-color .15s,transform .15s}
.blog-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.blog-card-img{aspect-ratio:16/10;background:var(--panel2);overflow:hidden;border-bottom:1px solid var(--line)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:6px}
.blog-card-cat{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.blog-card-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cc,var(--accent));flex:none}
.blog-card-title{font-family:'Unbounded',sans-serif;font-size:12.5px;font-weight:500;line-height:1.35;
  margin:0;padding:0;color:var(--ink)}

.blog-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:26px 0 0}
.blog-pager a,.blog-pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 11px;border-radius:10px;border:1px solid var(--line2);font-size:14px;font-weight:600;
  color:var(--soft);text-decoration:none;transition:border-color .15s,color .15s}
.blog-pager a:hover{border-color:var(--btn-line);color:var(--ink)}
.blog-pager .cur{background:var(--btn);border-color:var(--btn-line);color:var(--btn-ink)}
.blog-pager .disabled{opacity:.35;pointer-events:none}

@media (max-width:960px){
  .blog-layout{grid-template-columns:1fr}
  .blog-col-graph{position:static}
  .blog-legend-sec{position:static;border-bottom:none;padding-bottom:0!important}
}
@media (max-width:560px){
  .blog-cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .blog-card-body{padding:10px 10px 12px}
  .blog-card-title{font-size:12px}
}

/* Легенда разделов свёрнута по умолчанию, раскрывается кнопкой (2026-07-22) */
.kg-legend-toggle-wrap{width:min(1124px,calc(100% - 56px));margin:4px auto 2px}
.kg-legend-toggle{display:inline-flex;align-items:center;gap:9px;font-family:'Manrope',sans-serif;font-size:13.5px;
  font-weight:600;color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  padding:9px 15px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.kg-legend-toggle:hover{color:var(--btn-ink);background:var(--btn);border-color:var(--btn-line)}
.kg-legend-toggle .kglt-ic{font-size:14px;line-height:1}
.kg-legend-toggle .kglt-car{font-size:11px;color:var(--muted)}
.kg-legend-toggle:hover .kglt-car{color:var(--btn-ink)}
body.legend-collapsible .blog-legend-sec,
body.legend-collapsible .blog-legend-more,
body.legend-collapsible .blog-col-graph{display:none}
body.legend-collapsible.legend-open .blog-legend-sec,
body.legend-collapsible.legend-open .blog-legend-more{display:block}
body.legend-collapsible.legend-open .blog-col-graph{display:block}
body.legend-collapsible .blog-legend-sec{position:static}
/* пока свёрнуто — граф скрыт, статьи занимают всю ширину; при раскрытии возвращаем 2 колонки */
body.legend-collapsible .blog-layout{grid-template-columns:minmax(0,1fr)}
body.legend-collapsible.legend-open .blog-layout{grid-template-columns:minmax(0,1fr) 400px}
@media (max-width:560px){ .kg-legend-toggle-wrap{width:calc(100% - 32px)} }

/* ── /blog переделан 2026-07-25: слева дерево + иконка графа, справа граф сверху и карточки снизу ── */
.blog-layout2{display:grid;grid-template-columns:238px minmax(0,1fr);gap:40px;
  max-width:1180px;margin:0 auto;padding:40px 28px}
/* левая колонка: шапка (капс + иконка графа) + дерево статей */
.blog-tree-side{min-width:0;position:sticky;top:86px;align-self:start;max-height:calc(100vh - 96px);
  display:flex;flex-direction:column;gap:10px}
.blog-tree-top{display:flex;align-items:center;justify-content:space-between;flex:none}
.blog-tree-top .art-tree-cap{margin:0}
.blog-tree-icons{display:flex;align-items:center;gap:2px;flex:none}
/* скрытие левого меню на /blog (кнопки .art-side-toggle/.art-side-reopen стилизованы в styles.css) */
html.aside-hidden .blog-tree-side{display:none}
/* меню скрыто: карточки на всю ширину, слева — узкий жёлоб под плавающую иконку */
html.aside-hidden .blog-layout2{grid-template-columns:minmax(0,1fr);padding-left:72px}
.blog-tree-side .art-tree{flex:1;min-height:0;overflow-y:auto;padding-right:6px}
.blog-tree-side .art-tree::-webkit-scrollbar{width:9px}
.blog-tree-side .art-tree::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
.blog-tree-side .art-tree{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
/* основная колонка: шапка + граф сверху + карточки снизу */
.blog-main{min-width:0;display:flex;flex-direction:column;gap:26px}
.blog-head .kg-title{margin:0}
.blog-graph-sec{margin:0}
.blog-graph-sec .kg-stage{position:relative;width:100%;margin:0;height:min(56vh,520px);min-height:340px}
.blog-cardswrap .blog-cards{margin:0}
.blog-cardswrap .blog-pager{margin-top:24px}
@media (max-width:900px){
  .blog-layout2{grid-template-columns:minmax(0,1fr);gap:0;padding:28px 16px}
  .blog-tree-side{display:none}
}