/* База знаний dabro.pro/baza-znaniy/ — памятки внутри оболочки базы (kb.py, 20.10.2026). Подключается ПОСЛЕ blog.css.
   Памятки собраны своими сборщиками на старых токенах блога (tokens.css: --paper, --ink, --accent-green, --font-mono…) —
   здесь те же имена получают значения «Лаванды», а стили каждой памятки kb.py кладёт в область .memo (scope_css):
   её классы (.wrap, .stage, .sec, .rows…) не встречаются с классами сайта. Неон и Space Grotesk сюда не попадают. */

/* ---------- 1. старые токены блога → «Лаванда» ---------- */
.memo{
  --dabro-green:var(--lv-accent); --dabro-violet:var(--lv-accent); --dabro-blue:var(--lv-accent); --dabro-ink:var(--lv-dark);
  --paper:var(--lv-bg); --paper-2:var(--lv-bg-2); --paper-3:#E4DCF1; --paper-edge:var(--lv-line);
  --ink:var(--lv-dark); --ink-2:#221B2C; --ink-3:#2D2538; --ink-edge:#3B3247;
  --fg-1:var(--lv-ink); --fg-2:var(--lv-muted); --fg-3:var(--lv-muted); --fg-on-ink-1:var(--lv-on-dark); --fg-on-ink-2:var(--lv-on-dark-muted);
  --link:var(--lv-accent-ink); --link-hover:#432C8C; --highlight-bg:var(--lv-soft); --highlight-fg:var(--lv-ink);
  --accent-green:var(--lv-accent); --accent-violet:var(--lv-accent); --accent-violet-ink:var(--lv-accent-ink);
  --quote-bar:var(--lv-accent); --rule:var(--lv-line);
  --callout-info-bg:var(--lv-bg-2); --callout-info-edge:var(--lv-ink); --callout-tip-bg:var(--lv-soft); --callout-tip-edge:var(--lv-accent);
  --callout-warn-bg:#FDEBD3; --callout-warn-edge:#C77A12; --callout-myth-bg:var(--lv-soft); --callout-myth-edge:var(--lv-accent-ink);
  --font-sans:var(--lv-font); --font-mono:var(--lv-font);
  --fs-eyebrow:clamp(.75rem,.70rem + .20vw,.80rem); --fs-meta:clamp(.80rem,.75rem + .20vw,.90rem);
  --fs-caption:clamp(.85rem,.80rem + .25vw,.95rem); --fs-body:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  --fs-body-lg:clamp(1.15rem,1.05rem + .45vw,1.3125rem); --fs-pullquote:clamp(1.5rem,1.25rem + 1.2vw,2.1rem);
  --fs-h3:clamp(1.25rem,1.15rem + .5vw,1.5rem); --fs-h2:clamp(1.65rem,1.25rem + 1.2vw,2.3rem); --fs-h1:clamp(2rem,1.25rem + 2.3vw,3.2rem);
  --fs-hero:clamp(2rem,1.25rem + 2.3vw,3.2rem);
  --lh-tight:1.05; --lh-snug:1.2; --lh-body:1.6; --lh-relaxed:1.75;
  --tracking-tight:-.025em; --tracking-body:-.005em; --tracking-caps:.06em;
  --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem;
  --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --flow-paragraph:1.1em; --flow-block:var(--space-6); --flow-h2:var(--space-8); --flow-h3:var(--space-6);
  --w-text:68ch; --w-wide:84ch; --w-full:100%; --w-page:100%; --w-toc:240px;
  --radius-0:0; --radius-1:2px; --radius-2:4px; --radius-3:var(--lv-r); --radius-4:16px; --radius-pill:999px;
  --border-hair:1px solid var(--lv-line); --border-rule:1px solid var(--lv-line); --border-heavy:2px solid var(--lv-ink);
  --border-accent:3px solid var(--lv-accent);
  --shadow-card:0 1px 0 var(--lv-line); --shadow-float:0 18px 40px -28px rgba(22,18,28,.35);
  --shadow-cta:0 10px 24px -14px rgba(0,0,0,.6); --shadow-cta-hover:0 10px 24px -14px rgba(0,0,0,.6);
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-snap:cubic-bezier(.4,0,.1,1); --t-fast:120ms; --t-med:220ms; --t-slow:420ms;
  --hd:calc(var(--sh-h, 76px) + 8px);
  font-family:var(--lv-font); color:var(--lv-ink); font-size:var(--fs-body); line-height:var(--lh-body);
  letter-spacing:var(--tracking-body); min-width:0;
}

/* ---------- 2. базовая типографика памятки (её давали tokens.css и layout.css блога) ---------- */
.memo h1,.memo h2,.memo h3,.memo h4{font-family:var(--lv-font);font-weight:800;letter-spacing:var(--tracking-tight);
  line-height:var(--lh-snug);text-wrap:balance;color:inherit}
.memo h2{font-size:var(--fs-h2);margin:var(--flow-h2) 0 var(--space-4)}
.memo h3{font-size:var(--fs-h3);margin:var(--flow-h3) 0 var(--space-3);font-weight:700}
.memo p{margin:0 0 var(--flow-paragraph);text-wrap:pretty;max-width:var(--w-text)}
.memo a{color:var(--link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color var(--t-fast) var(--ease-out)}
.memo a:hover{color:var(--link-hover)}
.memo mark{background:var(--highlight-bg);color:var(--highlight-fg);padding:0 .15em;border-radius:1px}
.memo small{font-size:var(--fs-caption);color:var(--fg-2)}
.memo ul,.memo ol{max-width:var(--w-text);margin:0 0 var(--flow-paragraph);padding-left:1.5em}
.memo li{margin-bottom:.4em}
.memo ul li::marker{color:var(--lv-accent-ink)}
.memo ol li::marker{color:var(--fg-1);font-weight:600;font-variant-numeric:tabular-nums}
.memo code{font-family:var(--lv-font);font-size:.92em;background:var(--paper-2);border:1px solid var(--paper-edge);
  padding:.1em .35em;border-radius:var(--radius-2);color:var(--fg-1)}
.memo figure{margin:var(--flow-block) 0;max-width:var(--w-wide)}
.memo figure img{width:100%;height:auto;border-radius:var(--radius-4);display:block;background:var(--paper-2)}
.memo figure figcaption{font-size:var(--fs-caption);color:var(--fg-2);margin-top:10px;line-height:1.45}
.memo table{width:100%;border-collapse:collapse;font-size:var(--fs-meta)}
.memo th,.memo td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--paper-edge)}
.memo th{font-weight:600;background:var(--paper-2);border-top:1px solid var(--lv-line);border-bottom:1px solid var(--lv-line);
  text-transform:uppercase;letter-spacing:.04em;font-size:11px;color:var(--fg-2)}
.memo td{font-variant-numeric:tabular-nums}
.memo button{font-family:var(--lv-font)}
.memo ::selection{background:var(--lv-soft);color:var(--lv-ink)}
/* классы сайта, совпавшие по имени с классами памяток: свойства сайта, которых памятка у себя не задаёт, гасим */
.memo .stage{margin-top:0;scroll-margin-top:0}   /* отступ якоря уже даёт сайт: html{scroll-padding-top} */
.memo .rows{border-top:0}
.memo .sec{padding-block:0}

/* ---------- 3. раскладка: дерево базы слева, памятка во всю ширину ---------- */
/* Памятки — с экранами, тренажёром и галереями: в колонку 700 px статьи базы они не помещаются, поэтому оглавления справа
   нет, разделы памятки — кнопками под заголовком (как было на памятках). Дерево — слева от 1280 px, уже — свёрнутым списком. */
.kbl--memo{grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,3vw,48px);padding-block:clamp(24px,3vw,40px) clamp(40px,5vw,72px)}
.kbm{min-width:0}
@media (max-width:1279px){
  .kbl--memo{grid-template-columns:minmax(0,1fr)}
  .kbl--memo > .tree{display:none}
  .kbl--memo .tree-m{display:block}
}
.kbhead--memo{margin-top:6px;padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--lv-line);margin-bottom:clamp(8px,1.5vw,16px)}
.kbhead--memo h1{max-width:20ch}
/* с картинкой первого экрана: текст шире картинки, кнопки разделов — на всю ширину под обеими колонками */
.kbhead--art{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:0 clamp(24px,4vw,56px);align-items:center}
.kbhead--art h1{max-width:none}
.kbhead--art .kbchips{grid-column:1/-1}
.kbhead__art{min-width:0}
@media (max-width:900px){.kbhead--art{grid-template-columns:minmax(0,1fr);row-gap:20px}}
.kbhead__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.kbhead__acts .btn{min-height:50px}
.kbchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.kbchips a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1px solid var(--lv-line);border-radius:999px;
  background:var(--lv-card);color:var(--lv-ink);font-size:.92rem;font-weight:600;text-decoration:none;transition:border-color .2s ease}
.kbchips a:hover{border-color:var(--lv-accent-ink)}
.memo--body{margin-top:0}
.found.is-done{gap:6px 12px}
.found.is-done span{color:var(--lv-muted)}
.found.is-done a{color:var(--lv-accent-ink);font-weight:600}

/* раздел «Воронка»: шаг, по которому памяток ещё нет, — без ссылки */
.fun .fun__off{display:flex;justify-content:space-between;align-items:center;gap:16px;width:var(--w);margin-inline:auto;padding:16px 24px;
  border-radius:12px;background:var(--lv-card);border:1px dashed var(--lv-line);color:var(--lv-muted)}
.fun .fun__off b{font-size:1.12rem;font-weight:800}
.fun .fun__off span{font-size:.95rem;text-align:right}
@media (max-width:640px){.fun .fun__off{width:100%!important;flex-direction:column;align-items:flex-start;gap:2px}.fun .fun__off span{text-align:left}}

/* склейка от висячих переносов (kb.py nobreak) */
.nw{white-space:nowrap}