/* ─────────────────────────────────────────────────────────────
   Полоска темы над главой: «где я в теме» + выход в остальной сайт.
   Заведена 20.08.2026, стоит на всех темах сайта (333 страницы).

   Зачем: из главы все выходы вели внутрь той же темы, и человек
   не узнавал, что на сайте есть ещё 37 тем. Полоска видна всегда,
   в отличие от крошек, которые взгляд пропускает.

   Сделана на <details>/<summary> — без единой строки JS: работает
   с клавиатуры и со скринридером, не ломается, если скрипт не дошёл.

   ВАЖНО про шкалу: она показывает ПОЛОЖЕНИЕ в теме (глава N из M),
   а НЕ «сколько ты прочитал». Прогресс чтения = счётчик достижений,
   а он запрещён дизайн-системой (никаких badge, никакой вины).
   ───────────────────────────────────────────────────────────── */

.topic-bar{
  --tb-header-h:72px;              /* высота .hbar на десктопе */
  position:sticky; top:var(--tb-header-h); z-index:55;
  background:var(--card);          /* карточка, а не фон шапки: иначе сливается */
  border-bottom:1px solid var(--hairline);
  box-shadow:var(--shadow-sm);
}
@media(max-width:540px){ .topic-bar{ --tb-header-h:64px } }

.topic-bar__inner{ max-width:var(--maxw); margin:0 auto; padding:0 28px }
@media(max-width:560px){ .topic-bar__inner{ padding:0 18px } }

/* ── строка-кнопка (summary) ─────────────────────────────────── */
.topic-bar__btn{
  display:flex; align-items:center; gap:11px;
  /* Только вертикальные отступы! Сокращённое padding:7px 0 обнуляет
     боковые, которые даёт .topic-bar__inner, и текст липнет к краю. */
  min-height:48px; padding-top:7px; padding-bottom:7px;
  cursor:pointer; list-style:none;
  color:var(--text);
}
.topic-bar__btn::-webkit-details-marker{ display:none }
.topic-bar__btn::marker{ content:"" }

.topic-bar__txt{
  flex:1; min-width:0; font-size:15px; font-weight:800; line-height:1.25;
  /* Длинным темам («Где кончается диагноз и начинается характер» — 43 знака)
     разрешены две строки: в одну влезает ~23 знака, и обрезка съедала
     половину названия. Больше двух не даём — полоска липкая, она не должна
     занимать пол-экрана. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.topic-bar__txt em{ font-style:normal; font-weight:600; color:var(--sub) }

/* Стрелка оформлена КНОПКОЙ, а не значком: на проверке живой человек
   не понял, что полоска раскрывается (20.08.2026). Размер и плашка —
   как у иконок в шапке, этот вид уже читается как «сюда нажимают». */
.topic-bar__chev{
  flex:none; width:34px; height:34px; border-radius:11px;
  background:var(--accent); color:var(--accent-deep);
  display:grid; place-items:center;
  transition:transform .22s ease;
}
.topic-bar__chev svg{ width:14px; height:14px; fill:currentColor; display:block }
.topic-bar[open] .topic-bar__chev{ transform:rotate(180deg) }

/* Номер главы над заголовком. На телефоне скрыт: там он в полоске,
   а дублировать нельзя — уже наступали. Появляется только на десктопе,
   где рядом открыт список глав (решение Кати 20.08.2026). */
.chapter-kicker{ display:none }

/* ── шкала положения (НЕ прогресс чтения) ────────────────────── */
.topic-bar__scale{ height:3px; background:var(--hairline) }
.topic-bar__scale i{ display:block; height:100%; background:var(--accent-dark) }

/* ── раскрывающееся оглавление ───────────────────────────────── */
.topic-bar__panel{ max-height:72vh; overflow-y:auto; padding-bottom:4px }

/* Ссылка на страницу темы. Раньше туда вели крошки, но на телефоне мы их
   скрыли — и вернуться к хабу стало неоткуда (поймала Катя 20.08.2026). */
/* БЕЗ заливки: плашка здесь спорила с подсветкой текущей главы — два
   лавандовых прямоугольника подряд читались как одно пятно. Заливка
   в этом списке значит «ты здесь», и она должна быть одна. */
.topic-bar__hub{
  display:flex; align-items:flex-start; gap:8px;
  margin:6px 0 4px; padding:10px 12px 12px;
  border-bottom:1px solid var(--hairline);
  color:var(--accent-deep); text-decoration:none;
  font-size:14.5px; font-weight:800; line-height:1.3;
}
.topic-bar__hub::before{
  content:"↑"; flex:none; font-size:13px; opacity:.7;
  line-height:1.45;   /* держит стрелку на уровне первой строки */
}
.topic-bar__hub:hover{ text-decoration:underline }

.topic-bar__list{ list-style:none; margin:0; padding:6px 0 4px }
.topic-bar__list a{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 12px; border-radius:11px;
  color:var(--sub); text-decoration:none; font-size:15px; line-height:1.35;
}
/* Выделение приглушённое: сплошная лаванда была ярче самого текста
   и перетягивала внимание (Катя 20.08.2026). */
.topic-bar__list a:hover{
  background:color-mix(in srgb, var(--accent) 42%, transparent);
  color:var(--text);
}
.topic-bar__n{
  flex:none; min-width:19px; font-size:13px; font-weight:800;
  color:var(--faint); font-variant-numeric:tabular-nums;
}
.topic-bar__list li.is-current a{
  background:color-mix(in srgb, var(--accent) 55%, transparent);
  color:var(--text); font-weight:800;
}
.topic-bar__list li.is-current .topic-bar__n{ color:var(--accent-deep) }

/* ── два выхода наружу: главное во всей полоске ──────────────── */
.topic-bar__out{ border-top:1px solid var(--hairline); padding:8px 12px 16px; margin-top:6px }
.topic-bar__out a{
  display:block; padding:9px 0; text-decoration:none;
  font-size:15px; font-weight:800; color:var(--accent-deep);
}
.topic-bar__out a small{
  display:block; margin-top:2px;
  font-size:13px; font-weight:600; color:var(--sub);
}
.topic-bar__out a:hover{ text-decoration:underline }

/* ─────────────────────────────────────────────────────────────
   ДЕСКТОП: полоска превращается в боковое меню.

   Порог 1320px = 680px колонки текста + по 294px (230 меню + 64
   зазор) с каждой стороны, плюс запас на поля экрана. Ниже порога
   места нет, и полоска остаётся липкой сверху — иначе меню наедет
   на текст. Порог продублирован в topic-bar.js, менять оба разом.
   ───────────────────────────────────────────────────────────── */
@media(min-width:1320px){
  /* Меню должно быть ТИШЕ текста: не карточка с тенью, а спокойный
     список на том же фоне. Иначе оно весит столько же, сколько статья,
     и тянет взгляд влево, пока человек читает справа. */
  .topic-bar{
    position:fixed;
    /* Ориентир — строка «ГЛАВА N» над заголовком: название темы в меню
       должно стоять с ней вровень (Катя 20.08.2026). Кегли близкие,
       поэтому хватает совпадения верхних краёв. */
    top:calc(var(--tb-header-h) + 27px);
    /* 340 половина колонки текста + 64 зазор + 230 ширина меню.
       Зазор широкий намеренно: при 28px меню и текст читались одним
       полотном, а полоса прокрутки стояла впритык к строкам. */
    left:max(24px, calc(50vw - 634px));
    width:230px; z-index:40;
    background:none; border:none; border-radius:0;
    box-shadow:none; overflow:visible; max-height:none;
  }
  .topic-bar__inner{ padding:0 }
  .topic-bar__btn{
    min-height:0; padding-top:0; padding-bottom:12px;
  }
  /* Оглавление можно свернуть, чтобы не мешало читать (просьба Кати
     20.08.2026). Кнопка тихая: это не главное действие на странице. */
  .topic-bar__chev{
    width:26px; height:26px; border-radius:8px;
    background:none; color:var(--faint);
  }
  .topic-bar__chev svg{ width:11px; height:11px }
  .topic-bar__btn{ cursor:pointer }
  .topic-bar__btn:hover .topic-bar__chev{ background:var(--accent); color:var(--accent-deep) }
  /* В свёрнутом виде остаётся только строка с темой и номером главы */
  .topic-bar:not([open]) .topic-bar__btn{ padding-bottom:0 }
  /* В сайдбаре ширины 230px длинному названию нужно и три строки —
     ограничение двумя строками тут снимаем, места по вертикали хватает. */
  .topic-bar__txt{ display:block; -webkit-line-clamp:none; white-space:normal }
  .topic-bar__scale{ display:none }

  /* В сайдбаре остаётся только название темы: сколько всего глав видно
     по самому списку, а номер текущей стоит над заголовком статьи. */
  .topic-bar__txt em{ display:none }

  .chapter-kicker{
    display:block; margin:0 0 10px;
    font-size:13px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:var(--accent-deep);
  }

  /* Прокрутка: высота считается явно, а не через flex — <details>
     как flex-контейнер ведёт себя ненадёжно, из-за этого список
     обрезался на 10-й главе. */
  .topic-bar__panel{
    max-height:calc(100vh - var(--tb-header-h) - 120px);
    overflow-y:auto; overscroll-behavior:contain;
    padding-right:10px;
    /* Полоса прокрутки серой линией стояла ровно между меню и текстом
       и добавляла ощущение «разъезжается». Показываем её только при
       наведении на само меню. */
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
  }
  .topic-bar:hover .topic-bar__panel{ scrollbar-color:var(--accent) transparent }
  .topic-bar__panel::-webkit-scrollbar{ width:6px }
  .topic-bar__panel::-webkit-scrollbar-thumb{ background:transparent; border-radius:99px }
  .topic-bar:hover .topic-bar__panel::-webkit-scrollbar-thumb{ background:var(--accent) }
  .topic-bar__panel::-webkit-scrollbar-track{ background:transparent }

  /* мельче и суше основного текста */
  .topic-bar__list a{ font-size:14px; padding:7px 10px }
  .topic-bar__n{ font-size:12px }
  /* активная глава — полоской, а не заливкой во всю ширину */
  .topic-bar__list li.is-current a{
    background:none; color:var(--text);
    box-shadow:inset 2px 0 0 var(--accent-dark);
    border-radius:0 11px 11px 0;
  }
  .topic-bar__out a{ font-size:14px; padding:7px 0 }


  /* ── Свёрнутый вид: уезжает ВБОК, а не схлопывается вверх ──────────
     От меню остаётся кнопка у левого края; текст статьи ничем не
     загорожен, и видно, куда нажать, чтобы вернуть (Катя 20.08.2026). */
  .topic-bar:not([open]){
    width:44px;
    transition:width .22s ease;
  }
  .topic-bar:not([open]) .topic-bar__txt{ display:none }
  .topic-bar:not([open]) .topic-bar__btn{
    justify-content:center; padding:0;
    width:44px; height:44px; border-radius:12px;
    background:var(--card); box-shadow:var(--shadow-sm);
  }
  .topic-bar:not([open]) .topic-bar__chev{
    width:auto; height:auto; background:none;
    transform:rotate(-90deg);          /* стрелка показывает «раскроется вправо» */
    color:var(--accent-deep);
  }
  .topic-bar:not([open]) .topic-bar__chev svg{ width:13px; height:13px }
  html.a11y-no-animations .topic-bar:not([open]){ transition:none }

  /* Доехали до подвала — меню уходит, чтобы не лечь поверх него.
     Класс ставит topic-bar.js по видимости футера. */
  .topic-bar.is-near-footer{
    opacity:0; visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
  }
  .topic-bar{ transition:opacity .18s ease, visibility .18s ease }
}
html.a11y-no-animations .topic-bar,
html.a11y-no-animations .topic-bar.is-near-footer{ transition:none }
@media (prefers-reduced-motion: reduce){
  .topic-bar, .topic-bar.is-near-footer{ transition:none }
}


/* Крошки на страницах глав скрыты: их работу делает эта полоска — она
   называет тему, номер главы, ведёт на страницу темы и в разделы, а на
   телефоне они вдобавок занимали 43px двумя строками. В разметке
   остаются, поисковые системы их видят. Селектор через «~» — полоска
   стоит соседом перед <main>, поэтому на хабах и витринах, где полоски
   нет, крошки остаются на месте. */
.topic-bar ~ main .breadcrumb{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ── доступность ─────────────────────────────────────────────── */
/* При крупном шрифте две липкие полосы съели бы пол-экрана, а узкий
   сайдбар стал бы нечитаемым столбиком — полоска разворачивается
   в обычный блок в начале страницы. Сбрасываем и десктопные правила. */
html.a11y-font-large .topic-bar,
html.a11y-font-huge .topic-bar{
  position:static; width:auto; max-height:none;
  left:auto; border-radius:0; border-left:none; border-right:none;
}

html.a11y-no-animations .topic-bar__chev{ transition:none }
@media (prefers-reduced-motion: reduce){ .topic-bar__chev{ transition:none } }