/* =====================================================================
   Waykeeper · база знаний · assets/kb.css (пакет 1, 26.10.2026)
   Общие компоненты всех четырёх разделов: практики, энциклопедия, атлас, ресурсы.
   Только токены сайта: два шрифта (--f-head, --f-text), пять размеров --s1…--s5,
   жирность Spectral 300/400, Onest 400/500, цвета --ink*, --line*, --accent.
   Своих font-size в px нет и быть не должно (проверяет _tools/kb_lint.py).
   Подключается после site.css и site-v2.css:
     <link rel="stylesheet" href="assets/kb.css">   (в atlas/, practices/, encyclopedia/ — ../assets/kb.css)
   Картины в этом файле не описаны: ставятся общим слоем .plate-alive / .plate-map (assets/site-v2.css).
   Памятка по классам — _tools/AGENT-RULES-v2.md, раздел «База знаний: основа».
   ===================================================================== */

/* ---------- 0. Каркас страницы базы ---------- */
.kb-page{padding-top:var(--sp-6); padding-bottom:var(--sp-9)}
.kb-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); align-items:start}
.kb-side{grid-column:1 / span 3; position:sticky; top:calc(var(--head-h) + var(--sp-5)); font-size:var(--s5); line-height:1.45}
.kb-main{grid-column:4 / span 6; min-width:0}
.kb-toc{grid-column:10 / span 3; position:sticky; top:calc(var(--head-h) + var(--sp-5)); font-size:var(--s5); line-height:1.45}
.kb-wide{grid-column:4 / -1}
@media (max-width:1100px){
  .kb-side{display:none}
  .kb-main{grid-column:1 / span 8}
  .kb-toc{grid-column:9 / span 4}
}
@media (max-width:760px){
  .kb-page{padding-top:var(--sp-5)}
  .kb-grid{display:block}
  .kb-toc{display:none}
}
.measure{max-width:36rem}

/* ---------- 1. Крошки и строка типа ---------- */
.kb-crumbs{display:flex; flex-wrap:wrap; gap:4px 0; list-style:none; margin:0 0 var(--sp-5); padding:0; font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.kb-crumbs li + li::before{content:"›"; margin:0 8px; color:var(--ink-3)}
.kb-crumbs a{color:var(--ink-2); text-decoration:none}
.kb-crumbs a:hover{text-decoration:underline; text-underline-offset:3px}
.kb-type{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px var(--sp-4); font:500 var(--s5)/1.4 var(--f-text); color:var(--ink-3)}
.kb-type .sep{color:var(--line-2)}

/* ---------- 2. Заголовки базы: без крика ---------- */
/* H1 входа в раздел — --s1; H1 страницы-сущности — --s2 (решение спеки: «слишком крупно») */
.kb-h1{font:300 var(--s2)/1.12 var(--f-head); letter-spacing:-.01em; margin:var(--sp-3) 0 0; text-wrap:balance}
.kb-h1 small{display:block; margin-top:6px; font:400 var(--s5)/1.4 var(--f-text); color:var(--ink-3); letter-spacing:0}
.kb-h2{font:400 var(--s3)/1.3 var(--f-head); margin:0}
.kb-h3{font:500 var(--s4)/1.45 var(--f-text); margin:0}
.kb-sec{margin-top:var(--sp-7)}
.kb-sec > .kb-h2 + *{margin-top:var(--sp-3)}
.kb-sec p + p{margin-top:var(--sp-3)}
.kb-sec p,.kb-sec li{color:var(--ink); max-width:36rem}
.kb-sec ul{padding-left:1.1em}
.kb-sec li + li{margin-top:6px}
sup.ref a{font-size:var(--s5); color:var(--ink-3); text-decoration:none; margin-left:1px}

/* ---------- 3. «В двух словах» ---------- */
.kb-two{margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--ink)}
.kb-two .label{display:block; margin-bottom:var(--sp-2)}
.kb-two p{font:400 var(--s3)/1.45 var(--f-head); color:var(--ink); max-width:34rem; text-wrap:pretty}

/* ---------- 4. Метка доказательности: один знак на всю базу ---------- */
/* <span class="ev ev--mid"><span class="ev-dots"><i></i><i></i><i></i></span>умеренная</span>
   strong ●●● · mid ●●○ · early ●○○ · contested ○○○ · craft ◇ «опыт практиков» (знак рисует CSS, одинаково в любом шрифте).
   Подпись «практика» у уровня больше не пишем: слово занято разделом «Практики» (решение Саши 26.10.2026). */
.ev{display:inline-flex; align-items:center; gap:8px; font:400 var(--s5)/1.3 var(--f-text); color:var(--ink-2); white-space:nowrap}
.ev-dots{display:inline-flex; gap:3px}
.ev-dots i{width:7px; height:7px; border-radius:50%; border:1px solid var(--ink-2); box-sizing:border-box}
.ev--strong .ev-dots i,.ev--mid .ev-dots i:nth-child(-n+2),.ev--early .ev-dots i:first-child{background:var(--ink); border-color:var(--ink)}
.ev--craft .ev-dots i{display:none}
.ev--craft .ev-dots::before{content:""; width:7px; height:7px; border:1px solid var(--ink-2); transform:rotate(45deg); margin:0 2px}
.ev--big{font-size:var(--s4); color:var(--ink)}
.ev--big .ev-dots i{width:9px; height:9px}

/* ---------- 5. Штамп: метка + на ком проверяли + дата + источники ---------- */
.kb-stamp{margin-top:var(--sp-5); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.kb-stamp > summary{list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--sp-5); padding:14px 0; font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.kb-stamp > summary::-webkit-details-marker{display:none}
.kb-stamp > summary .more{margin-left:auto; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.kb-stamp[open] > summary .more::after{content:" ↑"} .kb-stamp:not([open]) > summary .more::after{content:" ↓"}
.kb-stamp-body{padding:0 0 var(--sp-4); font-size:var(--s5); line-height:1.5; color:var(--ink-2); max-width:40rem}
.kb-stamp-body p + p{margin-top:var(--sp-2)}
.kb-stamp-body a{color:var(--ink)}

/* ---------- 6. Главное действие страницы ---------- */
.kb-do{margin-top:var(--sp-6); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5)}
.kb-do .btn.primary{padding:0 22px}
/* длинная подпись кнопки («Кто так работает: …») на телефоне переносится, а не вылезает за экран (финальная проверка) */
@media (max-width:760px){ .kb-do .btn.primary{white-space:normal; line-height:1.3; text-align:center; padding:10px 22px; max-width:100%} }
.kb-do-alt{font-size:var(--s5); color:var(--ink-3)}
.kb-do-alt a{color:var(--ink-2)}

/* ---------- 7. Факты: строки «ключ — значение» ---------- */
.kb-facts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--col-gap); margin:var(--sp-6) 0 0; padding:0}
.kb-facts > div{display:grid; grid-template-columns:10.5em minmax(0,1fr); gap:var(--sp-3); padding:10px 0; border-top:1px solid var(--line); font-size:var(--s5); line-height:1.45}
.kb-facts dt{color:var(--ink-3)} .kb-facts dd{margin:0; color:var(--ink)}
.kb-facts--one{grid-template-columns:1fr}
@media (max-width:760px){ .kb-facts{grid-template-columns:1fr} }

/* ---------- 8. Лестница уровней атласа: где этот специалист ---------- */
.kb-ladder{margin-top:var(--sp-6)}
.kb-ladder ol{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); list-style:none; margin:var(--sp-3) 0 0; padding:0; position:relative}
.kb-ladder ol::before{content:""; position:absolute; left:4px; right:4px; top:4px; height:1px; background:var(--line-2)}
.kb-ladder li{position:relative; padding-top:20px; font-size:var(--s5); line-height:1.4; color:var(--ink-3)}
.kb-ladder li::before{content:""; position:absolute; left:0; top:0; width:9px; height:9px; border-radius:50%; background:var(--page); border:1px solid var(--ink-3); box-sizing:border-box}
.kb-ladder li b{display:block; font-weight:500; color:var(--ink-2)}
.kb-ladder li.is-here::before{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(234,95,34,.16)}
.kb-ladder li.is-here b{color:var(--ink)}

/* ---------- 9. Осторожно / когда не подходит ---------- */
.kb-careful{margin-top:var(--sp-7); padding:2px 0 2px var(--sp-5); border-left:2px solid var(--ink)}
.kb-careful .kb-h2{font-size:var(--s4); font-family:var(--f-text); font-weight:500}
.kb-careful p{margin-top:var(--sp-2); max-width:34rem}

/* ---------- 10. С кем путают ---------- */
.kb-vs{list-style:none; margin:var(--sp-3) 0 0; padding:0; border-top:1px solid var(--line-2)}
.kb-vs li{display:grid; grid-template-columns:minmax(0,13em) minmax(0,1fr); gap:var(--sp-4); padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--s4); line-height:1.5; max-width:none}
.kb-vs a{color:var(--ink); text-decoration-color:var(--line-2); text-underline-offset:3px}
.kb-vs span{color:var(--ink-2)}
@media (max-width:760px){ .kb-vs li{grid-template-columns:1fr; gap:2px} }

/* ---------- 11. Источники ---------- */
.kb-src{list-style:none; counter-reset:src; margin:var(--sp-3) 0 0; padding:0; font-size:var(--s5); line-height:1.5}
.kb-src li{counter-increment:src; display:grid; grid-template-columns:2.2em minmax(0,1fr); padding:8px 0; border-top:1px solid var(--line); color:var(--ink-2); max-width:none}
.kb-src li::before{content:counter(src); color:var(--ink-3); font-variant-numeric:tabular-nums}
.kb-src a{color:var(--ink)}
.kb-src .t{display:inline-block; margin-left:6px; padding:0 7px; border:1px solid var(--line-2); border-radius:999px; color:var(--ink-3); white-space:nowrap}

/* ---------- 12. Рядом: связи по типу ---------- */
.kb-near{margin-top:var(--sp-3); border-top:1px solid var(--line-2)}
.kb-near > div{display:grid; grid-template-columns:9em minmax(0,1fr); gap:var(--sp-4); padding:12px 0; border-bottom:1px solid var(--line)}
.kb-near dt{font:500 var(--s5)/1.6 var(--f-text); color:var(--ink-3)}
.kb-near dd{margin:0; display:flex; flex-direction:column; gap:6px}
.kb-near a{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--sp-3); color:var(--ink); text-decoration:none; font-size:var(--s4); line-height:1.4}
.kb-near a span.t{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.kb-near a:hover span.t{text-decoration-color:var(--ink)}
.kb-near a .m{font-size:var(--s5); color:var(--ink-3)}
@media (max-width:760px){ .kb-near > div{grid-template-columns:1fr; gap:6px} }

/* ---------- 13. Куда дальше ---------- */
.kb-next{display:flex; justify-content:space-between; gap:var(--sp-5); margin-top:var(--sp-8); padding-top:var(--sp-4); border-top:1px solid var(--line-2); font-size:var(--s5); color:var(--ink-3)}
.kb-next a{display:block; color:var(--ink); text-decoration:none}
.kb-next a b{display:block; font:400 var(--s4)/1.35 var(--f-head); margin-top:2px}
.kb-next .r{text-align:right}
.kb-fix{margin-top:var(--sp-5); font-size:var(--s5); color:var(--ink-3)}
.kb-fix a{color:var(--ink-2)}

/* ---------- 14. Боковые колонки: «В разделе» и «В статье» ---------- */
.kb-side .label,.kb-toc .label{display:block; margin-bottom:var(--sp-3)}
.kb-side ul,.kb-toc ul{list-style:none; margin:0; padding:0}
.kb-side li a,.kb-toc li a{display:block; padding:5px 0 5px 14px; color:var(--ink-2); text-decoration:none; position:relative}
.kb-side li a:hover,.kb-toc li a:hover{color:var(--ink)}
.kb-side li a.is-here,.kb-toc li a.is-here{color:var(--ink)}
.kb-side li a.is-here::before,.kb-toc li a.is-here::before{content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--accent)}
.kb-side .all{display:inline-block; margin-top:var(--sp-3); padding-left:14px; color:var(--ink-2)}
.kb-side .grp{margin-top:var(--sp-5)}

/* ---------- 15. Статус статьи / записи ---------- */
/* Три значения на всю базу: «готово» (без знака), «черновик», «план». Рисуется как .status. */
.kb-state{display:inline-flex; align-items:center; gap:8px; font:400 var(--s5)/1.3 var(--f-text); color:var(--ink-3); white-space:nowrap}
.kb-state::before{content:""; width:8px; height:8px; border-radius:50%; border:1px solid var(--ink-2); box-sizing:border-box}
.kb-state--plan::before{border-style:dashed}

/* ---------- 16. Поиск одной строкой ---------- */
.kb-search{position:relative; display:flex; align-items:center; max-width:40rem}
.kb-search input{width:100%; height:56px; padding:0 64px 0 48px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:rgba(255,255,255,.86);
  font:400 var(--s4)/1 var(--f-text); color:var(--ink); box-shadow:0 1px 2px rgba(15,23,34,.04), 0 12px 30px -24px rgba(15,23,34,.25)}
.kb-search input::placeholder{color:var(--ink-3)}
.kb-search input:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.kb-search::before{content:""; position:absolute; left:20px; width:14px; height:14px; border:1.5px solid var(--ink-2); border-radius:50%}
.kb-search::after{content:""; position:absolute; left:32px; top:34px; width:6px; height:1.5px; background:var(--ink-2); transform:rotate(45deg)}
.kb-search kbd{position:absolute; right:18px; font:400 var(--s5)/1 var(--f-text); color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:4px 8px}
.kb-search--sm input{height:44px; padding-left:40px; font-size:var(--s4)}
.kb-search--sm::before{left:16px; width:12px; height:12px}
.kb-search--sm::after{left:26px; top:27px; width:5px}
.kb-hint{margin-top:var(--sp-3); font-size:var(--s5); color:var(--ink-3)}
.kb-hint a{color:var(--ink-2)}

/* ---------- 17. Строка списка (одна на все разделы) ---------- */
.kb-rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2)}
.kb-row{display:grid; grid-template-columns:7.5em minmax(0,1fr) 13em 24px; gap:var(--sp-5); align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none}
.kb-row .k{font-size:var(--s5); line-height:1.45; color:var(--ink-3)}
.kb-row .k b{display:block; font-weight:500; color:var(--ink-2)}
.kb-row .t{font:400 var(--s3)/1.3 var(--f-head)}
.kb-row .t a{color:var(--ink); text-decoration:none}
.kb-row .t a:hover{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px}
.kb-row .by{display:block; margin-top:2px; font:400 var(--s5)/1.45 var(--f-text); color:var(--ink-3)}
.kb-row .d{display:block; margin-top:6px; font:400 var(--s4)/1.5 var(--f-text); color:var(--ink-2); max-width:38rem}
.kb-row .marks{display:flex; flex-direction:column; gap:6px; font-size:var(--s5); color:var(--ink-3)}
.kb-row .go{color:var(--ink-3); text-decoration:none; font-size:var(--s4)}
.kb-row details{margin-top:var(--sp-3)}
.kb-row summary{cursor:pointer; font-size:var(--s5); color:var(--ink-2); list-style:none}
.kb-row summary::-webkit-details-marker{display:none}
.kb-row summary::after{content:" ↓"} .kb-row details[open] summary::after{content:" ↑"}
.kb-row details dl{margin:var(--sp-3) 0 0}
.kb-row details dl > div{display:grid; grid-template-columns:7em minmax(0,1fr); gap:var(--sp-3); padding:6px 0; border-top:1px solid var(--line); font-size:var(--s5); line-height:1.5}
.kb-row details dt{color:var(--ink-3)} .kb-row details dd{margin:0; color:var(--ink-2)}
.kb-row.is-pick{position:relative}
.kb-row.is-pick::before{content:""; position:absolute; left:-18px; top:24px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
@media (max-width:760px){
  .kb-row{grid-template-columns:minmax(0,1fr) 44px; gap:6px var(--sp-3)}  /* 44px: под цель нажатия .go (финальная проверка) */
  .kb-row .k{grid-column:1; grid-row:1; display:flex; gap:8px}
  .kb-row .k b{display:inline}
  .kb-row > div:nth-child(2){grid-column:1}
  .kb-row .marks{grid-column:1; flex-direction:row; flex-wrap:wrap; gap:4px 14px}
  .kb-row .go{grid-column:2; grid-row:1}
  .kb-row.is-pick::before{left:-12px}
}
.kb-group{margin-top:var(--sp-7)}
.kb-group-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-3)}
.kb-group-h .kb-h3{font:400 var(--s3)/1.3 var(--f-head)}
.kb-group-h .n{font-size:var(--s5); color:var(--ink-3)}

/* ---------- 18. Фильтры: не больше двух групп + два переключателя ---------- */
.kb-filters{position:sticky; top:var(--head-h); z-index:5; margin:0 calc(var(--edge) * -1); padding:var(--sp-4) var(--edge); background:rgba(252,253,255,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.kb-filters-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-4)}
.kb-select{position:relative}
.kb-select select{appearance:none; -webkit-appearance:none; height:40px; padding:0 40px 0 16px; border:1px solid var(--ink); border-radius:var(--r-pill); background:#fff; font:500 var(--s4)/1 var(--f-text); color:var(--ink); cursor:pointer}
.kb-select::after{content:""; position:absolute; right:17px; top:15px; width:6px; height:6px; border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); transform:rotate(45deg); pointer-events:none}
.kb-seg{display:inline-flex; flex-wrap:wrap; gap:4px; padding:3px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:rgba(255,255,255,.7)}
.kb-seg button{min-height:34px; padding:0 14px; border:0; border-radius:var(--r-pill); background:none; font:400 var(--s5)/1 var(--f-text); color:var(--ink-2); cursor:pointer}
.kb-seg button .n{color:var(--ink-3); margin-left:4px}
.kb-seg button[aria-pressed="true"]{background:var(--ink); color:#fff}
.kb-seg button[aria-pressed="true"] .n{color:rgba(255,255,255,.7)}
.kb-seg button[disabled]{color:rgba(15,23,34,.35); cursor:default}
.kb-toggle{display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:var(--s5); color:var(--ink-2); cursor:pointer}
.kb-toggle input{width:16px; height:16px; accent-color:var(--ink); margin:0}
.kb-result{display:flex; flex-wrap:wrap; gap:4px var(--sp-4); margin-top:var(--sp-3); font-size:var(--s5); color:var(--ink-3)}
.kb-result b{font-weight:500; color:var(--ink)}
.kb-result a{color:var(--ink-2)}
.kb-filters-btn{display:none}
@media (max-width:760px){
  .kb-filters-row{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .kb-filters-row::-webkit-scrollbar{display:none}
  .kb-seg{flex-wrap:nowrap}
  .kb-seg button{white-space:nowrap}
}

/* ---------- 19. Указатель ситуаций и разделов (вход) ---------- */
.kb-index2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:var(--col-gap)}
.kb-index2 .index{border-top:1px solid var(--line-2)}
.kb-index2 .index-row{padding:14px 0}
.kb-index2 .index-t{line-height:1.3}
@media (max-width:1024px){ .kb-index2{grid-template-columns:1fr} .kb-index2 .index + .index{border-top:0} }
.kb-sections{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2)}
.kb-sections li{border-bottom:1px solid var(--line)}
.kb-sections a{display:grid; grid-template-columns:minmax(0,16em) minmax(0,1fr) 9em 9em 24px; gap:var(--sp-5); align-items:baseline; padding:18px 0; color:var(--ink); text-decoration:none}
.kb-sections .t{font:400 var(--s3)/1.25 var(--f-head)}
.kb-sections .d{font-size:var(--s4); color:var(--ink-2)}
.kb-sections .n{font-size:var(--s5); color:var(--ink-3); font-variant-numeric:tabular-nums}
.kb-sections a::after{content:"→"; color:var(--ink-3)}
.kb-sections a:hover .t{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px}
@media (max-width:1024px){ .kb-sections a{grid-template-columns:minmax(0,1fr) auto 20px} .kb-sections .d{grid-column:1 / -1; grid-row:2} .kb-sections .n.c{display:none} }

/* ---------- 20. Компактный первый экран раздела базы ---------- */
.kb-cover{padding-top:var(--hero-top); padding-bottom:var(--sp-7)}
.kb-cover .cols{align-items:end}
.kb-cover .display{font-size:var(--s1)}
.kb-cover-meta{display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-5); font-size:var(--s5); color:var(--ink-3)}
/* ---------- 21. Пустое состояние и «в работе» ---------- */
.kb-empty{padding:var(--sp-6) 0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.kb-empty p{max-width:34rem}
.kb-empty p + p{margin-top:var(--sp-3)}
.kb-empty .kb-h3{font:400 var(--s3)/1.3 var(--f-head)}

/* легенда меток одной строкой */
.ev-legend{display:flex; flex-wrap:wrap; align-items:center; gap:6px var(--sp-5); list-style:none; margin:0; padding:0}
.kb-sec ul.kb-vs,.kb-sec ol.kb-src{padding-left:0}
/* телефон: лестница уровней вертикально, сегменты в листе фильтров переносятся */
@media (max-width:760px){
  .kb-ladder ol{grid-template-columns:1fr; row-gap:10px; padding-left:20px}
  .kb-ladder ol::before{left:4px; right:auto; top:4px; bottom:4px; width:1px; height:auto}
  .kb-ladder li{padding-top:0}
  .kb-ladder li::before{left:-20px; top:4px}
  .kb-ladder li b{display:inline; margin-right:6px}
}

/* ---------- 22. Каталожная карточка сущности ---------- */
/* Карточка — только для «С чего начать» и «Рядом» с причиной (до 6 штук). Больше — строки .kb-row.
   <li><a class="kb-card" href="…"><span class="k">Подход · 3 мин</span><span class="t">WOOP</span>
        <span class="d">Желание, результат, препятствие, план.</span>
        <span class="f"><span class="ev ev--mid">…</span><span class="m">шаг «Маршрут»</span></span></a></li> */
.kb-cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap:var(--sp-4); list-style:none; margin:0; padding:0}
.kb-card{display:flex; flex-direction:column; gap:var(--sp-2); height:100%; padding:var(--sp-4) var(--sp-5); border:1px solid var(--line-2); border-radius:var(--r-m); background:rgba(255,255,255,.7);
  color:var(--ink); text-decoration:none; position:relative}
.kb-card:hover .t{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px}
.kb-card .k{font:500 var(--s5)/1.4 var(--f-text); color:var(--ink-3)}
.kb-card .t{font:400 var(--s3)/1.3 var(--f-head)}
.kb-card .d{font:400 var(--s4)/1.5 var(--f-text); color:var(--ink-2)}
.kb-card .f{display:flex; flex-wrap:wrap; align-items:center; gap:4px var(--sp-4); margin-top:auto; padding-top:var(--sp-2); font-size:var(--s5); color:var(--ink-3)}
.kb-card.is-pick::before{content:""; position:absolute; right:var(--sp-4); top:var(--sp-4); width:7px; height:7px; border-radius:50%; background:var(--accent)}

/* ---------- 23. Штамп: «на ком проверяли» и дата проверки ---------- */
/* внутри summary штампа, после метки: <span class="kb-who">проверяли на студентах…</span><span class="kb-checked">метка проверена 26.10.2026</span>
   у специалиста штамп той же формы без метки: «Проверка фактов · 8 источников · 3 утверждения ещё сверяются» */
.kb-who{color:var(--ink-2)}
.kb-checked{color:var(--ink-3)}
.kb-stamp--none > summary{cursor:default}
.kb-pending{color:var(--ink-3); white-space:nowrap}
/* знак «∗» в атласе: не удалось проверить по первоисточнику — спокойный серый, легенда внизу страницы */
.q-mark{display:inline-block; cursor:help; color:var(--ink-3); font-size:var(--s5); vertical-align:.1em; margin-inline:.05em}
.q-legend{margin-top:var(--sp-5); font-size:var(--s5); color:var(--ink-3)}
.q-legend + .kb-fix{margin-top:var(--sp-2)}

/* ---------- 24. Состояния страницы ---------- */
/* «Пока план статьи»: текста нет, но страница полезна — под фразой ниже идёт .kb-near «Сделать / Понять / Кто помогает / Почитать».
   <section class="kb-plan"><p>Текста этой статьи ещё нет. Пока здесь то, что по этой ситуации уже есть в базе.</p><dl class="kb-near">…</dl></section> */
.kb-plan{margin-top:var(--sp-6); padding:var(--sp-5) 0 0; border-top:1px solid var(--line-2)}
.kb-plan > p{max-width:34rem; color:var(--ink-2)}
.kb-plan .kb-near{margin-top:var(--sp-4)}
/* «Ничего не найдено»: говорим, чего нет, предлагаем ближайшее.
   <div class="kb-none"><p class="kb-none-t">По слову «ипотека» в базе ничего нет. База про переходы, а не про деньги и право.</p><p class="kb-hint">Ближе всего: …</p></div> */
.kb-none{padding:var(--sp-5) 0}
.kb-none-t{max-width:34rem; overflow-wrap:anywhere; font:400 var(--s3)/1.4 var(--f-head); color:var(--ink)}
.kb-none .kb-hint{margin-top:var(--sp-3)}
/* «Отдельный слой» атласа: плашка над «в двух словах» */
.kb-layer{margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4); border-left:2px solid var(--ink); background:rgba(15,23,34,.04); font-size:var(--s5); line-height:1.5; color:var(--ink-2); max-width:40rem}
/* «Показать ещё 20» под длинным списком */
.kb-more{display:flex; justify-content:center; margin-top:var(--sp-5)}

/* ---------- 25. Подсказки поиска (kb.js) ---------- */
/* kb.js кладёт .kb-suggest внутрь .kb-search (у неё position:relative); группы — тот же .kb-near, что и «Рядом».
   Стрелки двигают aria-selected, Enter открывает, Esc закрывает. */
.kb-suggest{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30; max-height:70vh; overflow:auto; padding:var(--sp-4) var(--sp-5);
  border:1px solid rgba(15,23,34,.10); border-radius:var(--r-l); background:rgba(255,255,255,.97); box-shadow:0 24px 60px -36px rgba(15,23,34,.35)}
.kb-suggest[hidden]{display:none}
.kb-suggest .kb-near{margin-top:0; border-top:0}
.kb-suggest .kb-near > div{padding:10px 0}
.kb-suggest .kb-near a{padding:2px 6px; margin:0 -6px; border-radius:var(--r-s, 6px)}
.kb-suggest .kb-near a[aria-selected="true"]{background:rgba(15,23,34,.06)}
.kb-suggest .kb-hint{margin-top:var(--sp-3)}
@media (max-width:760px){ .kb-suggest{padding:var(--sp-3) var(--sp-4)} .kb-suggest .kb-near a{min-height:44px; align-content:center} }

/* ---------- 26. Лист фильтров на телефоне ---------- */
/* Кнопка «Фильтры (2)» появляется, когда у .kb-filters стоит класс has-sheet; лист .kb-sheet выезжает снизу. */
.kb-sheet{position:fixed; left:0; right:0; bottom:0; z-index:60; max-height:86vh; overflow:auto; padding:var(--sp-5) var(--edge) var(--sp-6);
  border-radius:var(--r-l) var(--r-l) 0 0; background:#fff; box-shadow:0 -24px 60px -30px rgba(15,23,34,.4)}
.kb-sheet[hidden]{display:none}
.kb-sheet .kb-seg{flex-wrap:wrap; border-radius:var(--r-m)}
.kb-sheet-scrim{position:fixed; inset:0; z-index:59; background:rgba(15,23,34,.28)}
.kb-sheet-scrim[hidden]{display:none}
@media (max-width:760px){
  .kb-filters.has-sheet .kb-filters-btn{display:inline-flex}
  .kb-filters.has-sheet .kb-filters-row > :not(.kb-filters-btn){display:none}
  /* цели нажатия не меньше 44 px */
  .kb-seg button,.kb-toggle,.kb-select select{min-height:44px}
  .kb-crumbs a{display:inline-block; padding:10px 0}
  .kb-row .go{min-width:44px; min-height:44px}
}
@media (prefers-reduced-motion:reduce){ .kb-sheet,.kb-suggest{transition:none} }