/* ═══════════════════════════════════════════════════════════════
   «Берег» — Журнал. Оформление публичного раздела.

   Основа перенесена из справки кабинета (`_help_shell.html`): те же
   kb-*-классы, те же токены. Читатель, который пришёл из статьи
   в продукт, не должен чувствовать смену интерфейса — справка внутри
   кабинета и Журнал на сайте выглядят как одно место.

   Добавлено сверх справки: витрина раздела, карточки материалов,
   переключатель «терапевту / клиенту», FAQ, резюме, блок экстренной
   помощи, источники, полоса прогресса чтения.
   ═══════════════════════════════════════════════════════════════ */

/* Скрытое — скрыто. Иначе display:block у ссылок оглавления и карточек
   перебивает атрибут hidden, которым переключаются версии материала. */
[hidden]{ display:none !important; }

/* ── Полоса прогресса чтения ────────────────────────────────── */
.jr-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:var(--acc); z-index:60; transition:width .12s linear;
}

/* ── Ширина полосы набора ───────────────────────────────────── */
/* Лендинг свёрстан под 1200 px, но в журнале колонка навигации съедает
   четверть ширины, а карточек в ряду должно быть три-четыре. Поэтому
   на страницах журнала полоса шире, а на больших мониторах — ещё шире:
   иначе контент выглядит узким ручейком посреди пустого экрана. */
.jr-page .wrap{ max-width:1320px; }
@media (min-width:1600px){ .jr-page .wrap{ max-width:1460px; } }
@media (min-width:1900px){ .jr-page .wrap{ max-width:1560px; } }

/* Строка над материалами рубрики: сколько их и для кого показывать */
.jr-rubbar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px;
}
.jr-rubbar-n{ font-size:var(--fs-base); color:var(--t-4); }

/* Секции журнала чуть плотнее, чем на лендинге: здесь их много подряд,
   и лендинговый ритм превращает страницу в череду пустых экранов. */
.jr-page .sec-tight{ padding:34px 0; }
.jr-page .sec{ padding:40px 0; }

/* ── Каркас: дерево слева, содержимое справа ────────────────── */
.kb{ display:grid; gap:40px; grid-template-columns:252px minmax(0,1fr); align-items:start; }
@media (max-width:1080px){ .kb{ grid-template-columns:minmax(0,1fr); gap:24px; } }

/* Колонка едет вместе со страницей и прилипает сверху. Своей полосы
   прокрутки у неё нет: рубрики свёрнуты, и список всегда короткий. */
.kb-nav{ position:sticky; top:80px; }
/* На узком экране читатель пришёл за материалом, а не за оглавлением:
   колонка навигации уезжает под текст и сворачивается. */
@media (max-width:1080px){
  .kb{ display:flex; flex-direction:column; }
  .kb-nav{ order:2; position:static; margin-top:10px;
           padding:18px 20px; border:1px solid var(--line);
           border-radius:var(--r-3); background:var(--surf); }
  .kb-nav-cap{ display:block; }
}
.kb-nav-cap{
  display:none; margin-bottom:12px; font-size:var(--fs-xs); font-weight:600;
  color:var(--t-4); letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.kb a, .kb-card, .kb-crumbs a, .kb-toc a, .kb-updown a{ text-decoration:none; }
.kb-body p a, .kb-lead a, .jr-src a{ text-decoration:underline; text-underline-offset:2px; }

.kb-nav .jr-search{ margin-top:0; margin-bottom:14px; }
.kb-nav .jr-search input{ height:42px; font-size:var(--fs-base); }
.kb-nav .jr-results{ top:48px; }

.kb-nav-home{
  display:block; padding:8px 12px; margin:0 -12px 10px; border-radius:9px;
  font-size:var(--fs-md); font-weight:600; color:var(--t-2);
}
.kb-nav-home:hover{ background:var(--surf-2); color:var(--acc-ink); }

/* Рубрика — раскрывающийся блок; открыт тот, где читатель сейчас */
.kb-grp{ border-top:1px solid var(--line); }
.kb-grp summary{
  display:flex; align-items:center; gap:8px; padding:11px 12px 11px 14px;
  margin:0 -12px; border-radius:9px; cursor:pointer; list-style:none;
  font-size:var(--fs-md); color:var(--t-2); position:relative;
}
.kb-grp summary::-webkit-details-marker{ display:none; }
.kb-grp summary::before{
  content:""; position:absolute; left:2px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--c, var(--acc)); opacity:.5;
}
.kb-grp summary:hover{ background:var(--surf-2); color:var(--t-1); }
.kb-grp[open] summary{ color:var(--t-1); font-weight:600; }
.kb-grp[open] summary::before{ opacity:1; }
.kb-grp.is-here summary{ color:var(--c); }
.kb-grp-n{ margin-left:auto; font-size:var(--fs-xs); color:var(--t-4); }
.kb-grp-body{ padding:2px 0 12px 14px; display:flex; flex-direction:column; gap:1px; }
.kb-grp-all{
  font-size:var(--fs-base); color:var(--t-4); padding:5px 10px; margin:0 -10px 3px;
  border-radius:8px;
}
.kb-grp-all:hover{ color:var(--c); background:var(--surf-2); }
.kb-nav a:not(.kb-nav-home):not(.kb-grp-all){
  display:block; padding:6px 10px; margin:0 -10px; border-radius:8px;
  font-size:var(--fs-base); color:var(--t-3); line-height:1.45;
  transition:background .15s ease, color .15s ease;
}
.kb-nav a:not(.kb-nav-home):hover{ background:var(--surf-2); color:var(--t-1); }
.kb-nav a.is-on{
  background:var(--acc-sk); color:var(--acc-ink); font-weight:600;
}
.kb-nav-foot{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
}

/* ── Хлебные крошки ─────────────────────────────────────────── */
.kb-crumbs{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:var(--fs-base); color:var(--t-4); margin-bottom:12px;
}
.kb-crumbs a{ color:var(--t-4); }
.kb-crumbs a:hover{ color:var(--acc-ink); }
.kb-crumbs span.sep{ opacity:.5; }

/* ── Статья ─────────────────────────────────────────────────── */
.kb-article{ display:grid; gap:38px; grid-template-columns:minmax(0,1fr) 220px; align-items:start; }
@media (max-width:1240px){ .kb-article{ grid-template-columns:minmax(0,1fr); } .kb-toc{ display:none; } }
.kb-body{ max-width:72ch; }
.kb-body h1, .sec .kb-body h1{ font-size:var(--fs-h2); letter-spacing:var(--ls-tight); line-height:1.18; }
.kb-lead{ margin-top:12px; font-size:var(--fs-xl); color:var(--t-3); line-height:1.55; max-width:68ch; }

.jr-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; font-size:var(--fs-sm); color:var(--t-4);
}
.jr-meta .dot{ opacity:.5; }
.jr-type{
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--acc-sk); color:var(--acc-ink); font-weight:600;
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-caps);
}

/* ── Переключатели режимов ──────────────────────────────────── */
.jr-modes{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:22px; }
.kb-mode{ display:flex; align-items:center; gap:0; }
.kb-mode-b{
  padding:6px 14px; border:1px solid var(--line); background:var(--surf);
  font:inherit; font-size:var(--fs-base); color:var(--t-3); cursor:pointer;
  transition:all .15s ease;
}
.kb-mode-b:first-of-type{ border-radius:var(--r-pill) 0 0 var(--r-pill); }
.kb-mode-b:last-of-type{ border-radius:0 var(--r-pill) var(--r-pill) 0; border-left:0; }
.kb-mode-b.is-on{ background:var(--acc-sk); border-color:var(--acc-bd); color:var(--acc-ink); font-weight:600; }
.kb-mode-hint{ font-size:var(--fs-sm); color:var(--t-4); }

/* ── Резюме «в двух словах» ─────────────────────────────────── */
.jr-tldr{
  margin-top:26px; padding:18px 20px; border-radius:var(--r-2);
  background:var(--surf-2); border:1px solid var(--line);
}
.jr-tldr-cap{
  font-size:var(--fs-xs); font-weight:600; color:var(--t-4);
  letter-spacing:var(--ls-caps); text-transform:uppercase; margin-bottom:7px;
}
.jr-tldr p{ font-size:var(--fs-body); color:var(--t-2); line-height:1.65; }

/* ── Блоки текста ───────────────────────────────────────────── */
.kb-gist{ display:none; font-size:var(--fs-body); color:var(--t-2); line-height:1.65; }
.kb-body.is-short .kb-gist{ display:block; }
.kb-body.is-short .kb-full{ display:none; }
.kb-body.is-short .kb-block{ margin-top:20px; }

.kb-block{ margin-top:32px; scroll-margin-top:96px; }
.kb-block h2, .sec .kb-block h2{
  font-size:var(--fs-lg); font-weight:600; color:var(--t-1);
  margin-bottom:9px; letter-spacing:var(--ls-tight); line-height:1.3;
}
/* Короткий режим: заголовки мельче — экран должен читаться списком */
.kb-body.is-short .kb-block h2, .sec .kb-body.is-short .kb-block h2{
  font-size:var(--fs-md); margin-bottom:4px;
}
.kb-block p{ font-size:var(--fs-body); color:var(--t-2); line-height:1.72; }
.kb-block p + p{ margin-top:12px; }
.kb-list{ margin-top:8px; display:flex; flex-direction:column; gap:9px; }
.kb-list li{
  position:relative; padding-left:20px;
  font-size:var(--fs-body); color:var(--t-2); line-height:1.65;
}
.kb-list li::before{
  content:""; position:absolute; left:4px; top:11px;
  width:5px; height:5px; border-radius:50%; background:var(--acc);
}
.kb-steps{ counter-reset:kbs; display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.kb-steps li{
  display:flex; gap:13px; align-items:flex-start;
  font-size:var(--fs-body); color:var(--t-2); line-height:1.65;
}
.kb-steps li::before{
  counter-increment:kbs; content:counter(kbs);
  width:24px; height:24px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink); font-weight:700; font-size:var(--fs-sm);
}
.kb-block-tip, .kb-block-warn, .kb-block-note, .kb-block-case{
  padding:17px 19px; border-radius:var(--r-2); border-left:3px solid var(--acc);
  background:var(--acc-sk);
}
.kb-block-warn{ background:var(--warn-sk); border-left-color:var(--warn-bright); }
.kb-block-warn h2{ color:var(--warn-ink); }
.kb-block-note{ background:var(--surf-2); border-left-color:var(--line-3); }
.kb-block-case{ background:var(--surf-2); border-left-color:var(--acc-bd); }
.kb-block-tip h2, .kb-block-warn h2, .kb-block-note h2, .kb-block-case h2{ font-size:var(--fs-md); }

/* Таблица: на узком экране прокручивается сама, а не рвёт страницу */
.kb-tablewrap{ margin-top:10px; overflow-x:auto; }
.kb-table{ width:100%; border-collapse:collapse; font-size:var(--fs-base); min-width:420px; }
.kb-table th, .kb-table td{
  padding:10px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); line-height:1.5; color:var(--t-2);
}
.kb-table th{ font-weight:600; color:var(--t-1); background:var(--surf-2); white-space:nowrap; }
.kb-table tr:last-child td{ border-bottom:0; }

.kb-quote{
  margin-top:10px; padding:14px 18px; border-left:3px solid var(--acc-bd);
  background:var(--surf-2); border-radius:0 var(--r-2) var(--r-2) 0;
}
.kb-quote p{ font-size:var(--fs-body); color:var(--t-2); line-height:1.7; font-style:italic; }
.kb-quote-who{ margin-top:7px; font-size:var(--fs-sm); color:var(--t-4); font-style:normal; }

/* ── Оглавление статьи ──────────────────────────────────────── */
.kb-toc{ position:sticky; top:84px; }
.kb-toc-cap{
  font-size:var(--fs-xs); font-weight:600; color:var(--t-4);
  letter-spacing:var(--ls-caps); text-transform:uppercase; margin-bottom:9px;
}
.kb-toc a{
  display:block; padding:4px 0 4px 12px; border-left:2px solid var(--line);
  font-size:var(--fs-base); color:var(--t-3); line-height:1.45;
}
.kb-toc a:hover{ color:var(--acc-ink); border-left-color:var(--acc-bd); }
.kb-toc a.is-on{ color:var(--acc-ink); border-left-color:var(--acc); font-weight:600; }
.kb-toc-acts{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px; }

/* Оглавление в начале статьи — для мобильных и для тех,
   кто пришёл из поиска и хочет сразу увидеть состав */
.jr-toc-inline{ margin-top:24px; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--r-2); background:var(--surf); }
.jr-toc-inline summary{ cursor:pointer; font-size:var(--fs-md); font-weight:600; color:var(--t-1); }
.jr-toc-inline ol{ margin-top:10px; counter-reset:jrt; display:flex; flex-direction:column; gap:6px; }
.jr-toc-inline li{ font-size:var(--fs-base); line-height:1.5; }
.jr-toc-inline a{ color:var(--t-3); }
.jr-toc-inline a:hover{ color:var(--acc-ink); }
@media (min-width:1241px){ .jr-toc-inline{ display:none; } }

/* ── FAQ ────────────────────────────────────────────────────── */
.jr-faq{ margin-top:40px; max-width:76ch; }
.jr-faq-item{ border-bottom:1px solid var(--line); }
.jr-faq-item summary{
  padding:15px 32px 15px 0; cursor:pointer; position:relative;
  font-size:var(--fs-md); font-weight:600; color:var(--t-1); line-height:1.45;
}
.jr-faq-item summary::marker, .jr-faq-item summary::-webkit-details-marker{ display:none; content:""; }
.jr-faq-item summary::after{
  content:"+"; position:absolute; right:6px; top:13px;
  font-size:var(--fs-lg); color:var(--t-4); font-weight:400;
}
.jr-faq-item[open] summary::after{ content:"–"; }
.jr-faq-item p{ padding:0 0 16px; font-size:var(--fs-body); color:var(--t-2); line-height:1.7; }

/* ── Экстренная помощь ──────────────────────────────────────── */
.jr-crisis{
  margin-top:34px; padding:20px 22px; border-radius:var(--r-2);
  border:1px solid var(--warn-bright); background:var(--warn-sk);
}
.jr-crisis h2, .sec .jr-crisis h2{ font-size:var(--fs-md); color:var(--warn-ink); margin-bottom:8px; }
.jr-crisis p{ font-size:var(--fs-base); color:var(--t-2); line-height:1.65; }
.jr-lines{ margin-top:12px; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.jr-line{ padding:10px 12px; background:var(--surf); border-radius:var(--r-1); border:1px solid var(--line); }
.jr-line-where{ font-size:var(--fs-xs); color:var(--t-4); text-transform:uppercase; letter-spacing:var(--ls-caps); }
.jr-line-num{ font-size:var(--fs-md); font-weight:700; color:var(--t-1); margin-top:2px; }
.jr-line-num a{ color:inherit; }
.jr-line-note{ font-size:var(--fs-xs); color:var(--t-4); line-height:1.4; margin-top:2px; }
.jr-crisis-last{ margin-top:11px; font-size:var(--fs-sm); color:var(--t-3); }

/* ── Источники, автор, дисклеймер ───────────────────────────── */
.jr-src{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line); }
.jr-src-cap, .kb-rel-cap, .jr-cap, .sec h2.jr-cap, h2.jr-cap{
  font-size:var(--fs-xs); font-weight:600; color:var(--t-4); line-height:1.4;
  letter-spacing:var(--ls-caps); text-transform:uppercase; margin:0 0 11px;
}
.jr-src li{ font-size:var(--fs-base); color:var(--t-3); line-height:1.6; margin-bottom:6px; }
.jr-disclaimer{ margin-top:18px; font-size:var(--fs-sm); color:var(--t-4); line-height:1.6; }

.au{ display:flex; gap:14px; align-items:flex-start; margin-top:30px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--surf); }
.au-photo{ width:52px; height:52px; border-radius:50%; flex:none; object-fit:cover; }
.au-photo-empty{
  display:grid; place-items:center; background:var(--acc-sk); color:var(--acc-ink);
  font-weight:700; font-size:var(--fs-lg);
}
.au-name{ font-size:var(--fs-md); font-weight:600; color:var(--t-1); }
.au-role{ font-size:var(--fs-sm); color:var(--t-4); margin-top:1px; }
.au-bio{ font-size:var(--fs-base); color:var(--t-3); line-height:1.6; margin-top:7px; }

/* ── Поделиться и «отправить клиенту» ───────────────────────── */
.jr-share{
  margin-top:26px; padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--r-2); background:var(--surf-2);
}
.jr-share-t{ font-size:var(--fs-md); font-weight:600; color:var(--t-1); }
.jr-share-s{ font-size:var(--fs-base); color:var(--t-3); line-height:1.55; margin-top:4px; }
.jr-share-row{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }

/* ── Оценка ─────────────────────────────────────────────────── */
.kb-foot{ margin-top:42px; padding-top:24px; border-top:1px solid var(--line); }
.kb-vote{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.kb-vote-q{ font-size:var(--fs-md); color:var(--t-2); }
.kb-vote-ok{ font-size:var(--fs-md); color:var(--acc-ink); }
.kb-rel{ margin-top:32px; }

/* ── Карточки материалов ────────────────────────────────────── */
.kb-cards{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.kb-card{
  display:flex; flex-direction:column; gap:6px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r-2); background:var(--surf);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kb-card:hover{ border-color:var(--line-2); box-shadow:var(--ev-1); transform:translateY(-1px); }
.kb-card:hover .kb-card-t{ color:var(--acc-ink); }
.kb-card-g{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--acc-ink); }
.kb-card-t{ font-size:var(--fs-md); font-weight:600; color:var(--t-1); line-height:1.4; }
.kb-card-s{ font-size:var(--fs-base); color:var(--t-3); line-height:1.5; }
.kb-card-m{ margin-top:auto; padding-top:8px; font-size:var(--fs-xs); color:var(--t-4); }

.kb-updown{ display:flex; justify-content:space-between; gap:16px; margin-top:28px; flex-wrap:wrap; }
.kb-updown a{ font-size:var(--fs-md); color:var(--t-3); max-width:46%; }
.kb-updown a:hover{ color:var(--acc-ink); }
.kb-updown .kb-next{ margin-left:auto; text-align:right; }
@media (max-width:640px){ .kb-updown a{ max-width:100%; } }

/* ═══════════════════════════════════════════════════════════════
   ВИТРИНА РАЗДЕЛА

   Задача экрана — за пять секунд ответить на три вопроса: что здесь
   лежит, для кого это и куда нажать. Поэтому: короткий заголовок,
   поиск и счётчики рядом, чипсы рубрик с числами, дальше — сетка
   карточек с обложками, подборки и полный указатель внизу.
   ═══════════════════════════════════════════════════════════════ */

.jr-head{ padding:44px 0 8px; }
.jr-head h1, .sec .jr-head h1{
  margin-top:10px; font-size:var(--fs-d2); line-height:1.14;
  letter-spacing:-.02em; color:var(--t-1); max-width:28ch;
}
@media (max-width:600px){ .jr-head{ padding-top:28px; } .jr-head h1, .sec .jr-head h1{ max-width:none; } }
.jr-head-lead{
  margin-top:16px; font-size:var(--fs-xl); color:var(--t-3);
  line-height:1.6; max-width:68ch;
}
/* Шапка витрины: слева — о чём раздел и навигация, справа — кто его пишет */
.jr-head-grid{ display:grid; gap:36px; grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
@media (max-width:1080px){ .jr-head-grid{ grid-template-columns:minmax(0,1fr); gap:26px; } }
.jr-head-main .jr-search{ margin-top:24px; max-width:520px; }

.jr-author{
  padding:22px 24px; border:1px solid var(--line); border-radius:var(--r-3);
  background:var(--surf); box-shadow:var(--ev-1);
}
@media (max-width:1080px){ .jr-author{ max-width:520px; } }
.jr-author-cap{
  font-size:var(--fs-xs); font-weight:600; color:var(--t-4);
  letter-spacing:var(--ls-caps); text-transform:uppercase; margin-bottom:14px;
}
.jr-author-top{ display:flex; align-items:center; gap:14px; }
.jr-author .au-photo{ width:56px; height:56px; font-size:var(--fs-xl); }
.jr-author .au-name{ font-size:var(--fs-lg); font-weight:600; color:var(--t-1); }
.jr-author .au-role{ font-size:var(--fs-base); color:var(--t-4); margin-top:2px; }
.jr-author-bio{
  margin-top:14px; font-size:var(--fs-base); color:var(--t-3); line-height:1.65;
}
.jr-stats{
  display:flex; gap:20px; flex-wrap:wrap; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--t-4);
}
.jr-stats b{ display:block; font-size:var(--fs-md); color:var(--t-1); font-weight:700; }

/* Поиск по разделу */
.jr-search{ position:relative; margin-top:26px; max-width:560px; }
.jr-search input{
  width:100%; height:50px; padding:0 18px; font:inherit; font-size:var(--fs-md);
  border:1px solid var(--line-2); border-radius:var(--r-2); background:var(--surf); color:var(--t-1);
}
.jr-search input::placeholder{ color:var(--t-4); }
.jr-search input:focus{ outline:none; border-color:var(--acc-bd); box-shadow:0 0 0 3px var(--acc-sk); }
.jr-results{
  position:absolute; z-index:20; left:0; right:0; top:56px; max-height:60vh; overflow-y:auto;
  background:var(--surf); border:1px solid var(--line-2); border-radius:var(--r-2);
  box-shadow:var(--ev-3); padding:6px;
}
.jr-results a{ display:block; padding:10px 12px; border-radius:var(--r-1); text-decoration:none; }
.jr-results a:hover, .jr-results a.is-on{ background:var(--surf-2); }
.jr-results .r-t{ display:block; font-size:var(--fs-md); font-weight:600; color:var(--t-1); }
.jr-results .r-s{ display:block; font-size:var(--fs-base); color:var(--t-3); line-height:1.45; margin-top:2px; }
.jr-results .r-g{ display:block; font-size:var(--fs-xs); color:var(--t-4);
  text-transform:uppercase; letter-spacing:var(--ls-caps); }
.jr-results-empty{ padding:14px; font-size:var(--fs-base); color:var(--t-4); }

/* Переключатель адресата: тот же элемент, что «коротко/подробно» в статье */
.jr-who{ display:inline-flex; gap:0; }
.jr-who button{
  padding:8px 18px; border:1px solid var(--line); background:var(--surf);
  font:inherit; font-size:var(--fs-md); color:var(--t-3); cursor:pointer;
  transition:all .15s ease;
}
.jr-who button:first-child{ border-radius:var(--r-pill) 0 0 var(--r-pill); }
.jr-who button:last-child{ border-radius:0 var(--r-pill) var(--r-pill) 0; border-left:0; }
.jr-who button + button{ border-left:0; }
.jr-who button.is-on{ background:var(--acc-sk); border-color:var(--acc-bd);
  color:var(--acc-ink); font-weight:600; }

.jr-aud{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
.jr-aud-cap{ font-size:var(--fs-base); color:var(--t-4); }

/* Чипсы рубрик: главный элемент навигации по разделу */
.jr-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.jr-chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surf);
  font-size:var(--fs-md); color:var(--t-2); text-decoration:none;
  transition:border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.jr-chip::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--c, var(--acc));
}
.jr-chip:hover, .jr-chip.is-on{ border-color:var(--c); color:var(--t-1); box-shadow:var(--ev-1); }
.jr-chip-n{ font-size:var(--fs-xs); color:var(--t-4); }

/* ── Заголовки секций ───────────────────────────────────────── */
.jr-sec-head{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px;
}
.jr-sec-head .jr-cap{ margin:0; }
.jr-sec-note{ font-size:var(--fs-base); color:var(--t-4); }
.jr-sec-link{ margin-left:auto; font-size:var(--fs-md); color:var(--acc-ink); text-decoration:none; }
.jr-sec-link:hover{ text-decoration:underline; }

/* ── Карточка материала ─────────────────────────────────────── */
.jr-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

.jc{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-3);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.jc:hover{ border-color:var(--c); box-shadow:var(--ev-2); transform:translateY(-2px); }
.jc-cover{ display:block; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--surf-2); }
.jc-cover img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s var(--ease, ease); }
.jc:hover .jc-cover img{ transform:scale(1.03); }
.jc-body{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1; }
.jc-top{ display:flex; align-items:center; gap:10px; }
.jc-chip{
  font-size:var(--fs-xs); font-weight:600; color:var(--c); text-transform:uppercase;
  letter-spacing:var(--ls-caps);
}
.jc-min{ margin-left:auto; font-size:var(--fs-xs); color:var(--t-4); }
.jc-t{ font-size:var(--fs-lg); font-weight:600; color:var(--t-1); line-height:1.34;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jc:hover .jc-t{ color:var(--c); }
.jc-desc{ font-size:var(--fs-base); color:var(--t-3); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jc-foot{
  margin-top:auto; padding-top:10px; font-size:var(--fs-xs); color:var(--t-4);
  border-top:1px solid var(--line);
}

/* Главный материал: обложка слева, текст справа */
.jr-lead-grid{ display:grid; gap:20px; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); }
@media (max-width:900px){ .jr-lead-grid{ grid-template-columns:minmax(0,1fr); } }
.jr-lead-side{ display:grid; gap:20px; grid-template-rows:1fr 1fr; }
.jc-big{ display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); align-items:stretch; }
.jc-big .jc-cover{ position:relative; aspect-ratio:auto; min-height:260px; }
.jc-big .jc-cover img{ position:absolute; inset:0; }
.jc-big .jc-body{ padding:24px 26px; gap:10px; justify-content:center; }
.jc-big .jc-desc{ -webkit-line-clamp:4; }
.jc-big .jc-t{ -webkit-line-clamp:4; }
.jc-big .jc-t{ font-size:var(--fs-d3); line-height:1.2; letter-spacing:-.01em; }
.jc-big .jc-desc{ font-size:var(--fs-md); }
@media (max-width:700px){
  .jc-big{ grid-template-columns:minmax(0,1fr); }
  .jc-big .jc-cover{ aspect-ratio:16/9; min-height:0; width:100%; }
  .jc-big .jc-body{ padding:18px 20px; }
}
/* Боковые карточки главного блока — горизонтальные: так первый экран
   не растёт до полутора тысяч пикселей ради трёх материалов */
.jc-slim{ display:grid; grid-template-columns:150px minmax(0,1fr); align-items:stretch; }
.jc-slim .jc-cover{ position:relative; aspect-ratio:auto; height:100%; }
.jc-slim .jc-cover img{ position:absolute; inset:0; }
.jc-slim .jc-body{ padding:16px 18px; gap:7px; }
.jc-slim .jc-t{ font-size:var(--fs-md); -webkit-line-clamp:3; }
.jc-slim .jc-foot{ padding-top:8px; }
@media (max-width:520px){
  .jc-slim{ grid-template-columns:minmax(0,1fr); }
  .jc-slim .jc-cover{ aspect-ratio:21/9; height:auto; width:100%; }
}

/* ── Рубрики на витрине ─────────────────────────────────────── */
.jr-rubs{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); }
.jr-rub{
  display:flex; flex-direction:column; padding:20px 22px 18px;
  border:1px solid var(--line); border-radius:var(--r-3); background:var(--surf);
  border-top:3px solid var(--c);
  transition:box-shadow .16s ease, transform .16s ease;
}
.jr-rub:hover{ box-shadow:var(--ev-2); transform:translateY(-2px); }
.jr-rub-h{ text-decoration:none; display:block; }
.jr-rub-t{ display:block; font-size:var(--fs-lg); font-weight:600; color:var(--t-1); }
.jr-rub-h:hover .jr-rub-t{ color:var(--c); }
.jr-rub-l{ display:block; margin-top:6px; font-size:var(--fs-base); color:var(--t-3); line-height:1.5; }
.jr-rub-list{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.jr-rub-list li{ position:relative; padding-left:14px; line-height:1.4; }
.jr-rub-list li::before{
  content:""; position:absolute; left:0; top:8px; width:5px; height:5px;
  border-radius:50%; background:var(--c); opacity:.55;
}
.jr-rub-list a{ font-size:var(--fs-base); color:var(--t-2); text-decoration:none; }
.jr-rub-list a:hover{ color:var(--c); }
.jr-rub-more{
  margin-top:auto; padding-top:14px; font-size:var(--fs-base);
  color:var(--c); text-decoration:none; font-weight:600;
}

/* ── Маршруты ───────────────────────────────────────────────── */
.jr-paths{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.jr-path{
  display:flex; flex-direction:column; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-3); background:var(--surf-2);
}
.jr-path-tag{
  align-self:flex-start; padding:3px 10px; border-radius:var(--r-pill);
  background:var(--surf); border:1px solid var(--line);
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--ls-caps);
  color:var(--t-4);
}
.jr-path h3, .sec .jr-path h3{ margin-top:12px; font-size:var(--fs-lg); color:var(--t-1); }
.jr-path p{ margin-top:6px; font-size:var(--fs-base); color:var(--t-3); line-height:1.55; }
.jr-path-list{ margin:14px 0 0; padding:0; list-style:none; counter-reset:jp;
  display:flex; flex-direction:column; gap:8px; }
.jr-path-list li{ display:flex; gap:10px; align-items:flex-start; font-size:var(--fs-base); line-height:1.45; }
.jr-path-list li::before{
  counter-increment:jp; content:counter(jp);
  flex:none; width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink); font-size:var(--fs-xs); font-weight:700;
}
.jr-path-list a{ color:var(--t-2); text-decoration:none; }
.jr-path-list a:hover{ color:var(--acc-ink); }
.jr-path-go{ margin-top:auto; padding-top:14px; font-size:var(--fs-base);
  color:var(--acc-ink); text-decoration:none; font-weight:600; }

/* ── Словарь и шкалы как отдельные входы ────────────────────── */
.jr-tools{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.jr-tool{
  display:flex; flex-direction:column; gap:8px; padding:24px 26px;
  border:1px solid var(--acc-bd); border-radius:var(--r-3); background:var(--acc-sk);
  text-decoration:none; transition:box-shadow .16s ease, transform .16s ease;
}
.jr-tool:hover{ box-shadow:var(--ev-2); transform:translateY(-2px); }
.jr-tool-t{ font-size:var(--fs-lg); font-weight:600; color:var(--t-1); }
.jr-tool-s{ font-size:var(--fs-base); color:var(--t-2); line-height:1.6; }
.jr-tool-go{ margin-top:6px; font-size:var(--fs-base); font-weight:600; color:var(--acc-ink); }

/* ── Полный указатель ───────────────────────────────────────── */
.jr-all{ display:grid; gap:24px 30px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.jr-all-col{ break-inside:avoid; }
.jr-all-h{
  display:block; padding-bottom:8px; margin-bottom:10px;
  border-bottom:2px solid var(--c);
  font-size:var(--fs-md); font-weight:600; color:var(--t-1); text-decoration:none;
}
.jr-all-h:hover{ color:var(--c); }
.jr-all-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.jr-all-col li{ display:flex; gap:8px; align-items:baseline; }
.jr-all-col a{ font-size:var(--fs-base); color:var(--t-2); text-decoration:none; line-height:1.45; }
.jr-all-col a:hover{ color:var(--c); }
.jr-all-min{ margin-left:auto; flex:none; font-size:var(--fs-xs); color:var(--t-4); }

/* ── Мини-плитки других рубрик ──────────────────────────────── */
.jr-minis{ display:flex; flex-wrap:wrap; gap:10px; }
.jr-mini{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px;
  border:1px solid var(--line); border-left:3px solid var(--c); border-radius:var(--r-2);
  background:var(--surf); text-decoration:none; transition:box-shadow .15s ease;
}
.jr-mini:hover{ box-shadow:var(--ev-1); }
.jr-mini-t{ font-size:var(--fs-md); color:var(--t-1); }
.jr-mini-n{ font-size:var(--fs-xs); color:var(--t-4); }

.jr-intro{ margin-top:24px; max-width:72ch; }
.jr-intro p{ font-size:var(--fs-body); color:var(--t-2); line-height:1.72; }
.jr-intro p + p{ margin-top:12px; }

/* ── Словарь ────────────────────────────────────────────────── */
.jr-abc{ display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
.jr-abc a{
  min-width:32px; text-align:center; padding:5px 8px; border-radius:8px;
  border:1px solid var(--line); background:var(--surf);
  font-size:var(--fs-base); color:var(--t-3);
}
.jr-abc a:hover{ border-color:var(--acc-bd); color:var(--acc-ink); }
.jr-terms{ margin-top:20px; max-width:78ch; }
.jr-term{ padding:18px 0; border-bottom:1px solid var(--line); scroll-margin-top:96px; }
.jr-term h2, .sec .jr-term h2{ font-size:var(--fs-md); font-weight:600; color:var(--t-1); }
.jr-term-def{ margin-top:5px; font-size:var(--fs-body); color:var(--t-2); line-height:1.65; }
.jr-term-full{ margin-top:7px; font-size:var(--fs-base); color:var(--t-3); line-height:1.6; }
.jr-term-see{ margin-top:7px; font-size:var(--fs-base); }

/* ── Продуктовый блок в конце материала ─────────────────────── */
.jr-cta{
  margin-top:34px; padding:24px 26px; border-radius:var(--r-3);
  border:1px solid var(--acc-bd); background:var(--acc-sk);
}
.jr-cta h2, .sec .jr-cta h2{ font-size:var(--fs-lg); color:var(--t-1); letter-spacing:var(--ls-tight); }
.jr-cta p{ margin-top:8px; font-size:var(--fs-body); color:var(--t-2); line-height:1.65; max-width:62ch; }
.jr-cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center; }
.jr-cta-note{ font-size:var(--fs-sm); color:var(--t-4); }

/* ── Печать: только текст ───────────────────────────────────── */
@media print{
  .nav, .foot, .kb-nav, .kb-toc, .jr-share, .jr-cta, .kb-vote, .jr-progress,
  .jr-modes, .kb-updown, .sub-sec{ display:none !important; }
  .kb-article{ grid-template-columns:1fr; }
  .kb-body{ max-width:none; }
  .kb-body.is-short .kb-full{ display:block; }
  .kb-gist{ display:none !important; }
  .jr-faq-item p{ display:block; }
  a[href]::after{ content:""; }
}