/* ==========================================================================
   Постоянная левая колонка навигации (.sbr) и оболочка страницы под неё (.pgshell).

   Файл подключён в общей раскладке и работает на всех содержательных страницах сайта:
   главная, каталог, карточка документа и её разрезы, формы, справочники, календари,
   журнал, комплекты, ситуации. Где колонки нет — решает SidebarComposer (php), не стили.

   Своей палитры здесь нет: только переменные сайта (--ink, --muted, --subtle, --faint,
   --line, --accent, --radius, --shell, --gut, --paper, --paper-line, --c-pay, --c-pay-bg).
   ========================================================================== */

/* ── Размеры колонки ───────────────────────────────────────────────────────
   Четыре ступени, а не одна: на 1200-1360 каждый пиксель ширины у контента на счету,
   на большом мониторе колонка может позволить себе длинные названия разделов
   («Финансы, бухгалтерия и налоги») в две строки вместо трёх. Ступень 1360 добавлена
   вместе с иконками: иконка и зазор съедают 26px названия, и на 1440 без неё половина
   разделов ломалась на три строки. Верхняя ступень (228/32) — та самая, из которой
   сложена --shell в styles.css. */
:root { --sb-w: 196px; --sb-gap: 18px; }

@media (min-width: 1360px) { :root { --sb-w: 208px; --sb-gap: 22px; } }
@media (min-width: 1500px) { :root { --sb-w: 216px; --sb-gap: 28px; } }
@media (min-width: 1620px) { :root { --sb-w: 228px; --sb-gap: 32px; } }

/* ── Оболочка страницы ─────────────────────────────────────────────────────
   flex:1 0 auto — обязателен: body это flex-колонка, и раньше «распоркой», которая
   прижимает подвал к низу, был сам <main>. Теперь между ними стоит оболочка, и
   свойство должно жить на ней, иначе на короткой странице подвал уезжает вверх. */
.pgshell { flex: 1 0 auto; min-width: 0; }
.pgshell-main { min-width: 0; }

@media (min-width: 1200px) {
  /* Оболочка = тот же контейнер, что у шапки и подвала (--shell, --gut из styles.css).
     Раньше здесь не было ни ширины, ни правого поля: правая колонка доходила до края
     экрана, и на мониторе 2000px страница стояла на 360px правее шапки и вылезала за её
     правый край на 340px. Теперь обе сетки — одна: логотип и левый край колонки на одной
     вертикали, правые края шапки, контента и подвала — на другой. */
  .pgshell {
    display: grid;
    grid-template-columns: var(--sb-w) minmax(0, 1fr);
    column-gap: var(--sb-gap);
    /* start, а не stretch: иначе колонка растягивается на всю высоту страницы и
       position:sticky внутри грид-элемента перестаёт работать. */
    align-items: start;
    /* width:100% обязателен. Оболочка — flex-элемент body (тот самый flex:1 0 auto выше), и
       по правилам флексбокса авто-поля по поперечной оси ОТМЕНЯЮТ растягивание: без явной
       ширины короткая страница (404, пустой листинг) сжимала оболочку до ширины содержимого,
       и сайдбар уезжал от логотипа к центру экрана. */
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gut);
  }

  /* Боковое поле внутри оболочки уже отдано самой оболочке — второй раз его добавлять
     нельзя, иначе правый край контента уезжает на 40px внутрь от правого края шапки.
     max-width тоже снимаем: ширину колонки задаёт грид, и она заведомо меньше 1360px
     (на 2000px это 1280px — ровно столько же, сколько на страницах без сайдбара). */
  .pgshell .wrap { max-width: none; padding-inline: 0; }

  /* Полосы с собственной подложкой (герой главной, .plus-band, тёмная полоса преимуществ)
     внутри оболочки не могут тянуться до края экрана — слева стоит колонка.
     Поэтому они и не притворяются полосами: боковое поле переезжает с .wrap на саму
     полосу (иначе текст лип бы к краю подложки), а скруглённые углы превращают бывший
     «приклеенный прямоугольник» в блок, у которого видны все четыре стороны.
     Список закрытый и короткий: это ВСЕ полосы сайта, у которых фон шире их содержимого.
     Блоки вроде .cat-hero сюда не входят — у них своя рамка и свои поля, они и так карточки. */
  .pgshell :is(.hero, .plus-band, .band-dark) {
    padding-inline: var(--gut);
    border-radius: var(--radius);
  }
  /* Герой и полоса преимуществ на главной стоят вплотную — это один блок, и скругления
     нужны только снаружи, иначе между ними появляется «шов» из четырёх углов. */
  .pgshell .hero:has(+ .plus-band) { border-radius: var(--radius) var(--radius) 0 0; }
  .pgshell .hero + .plus-band { border-radius: 0 0 var(--radius) var(--radius); }
}

/* Липкая строка контекста на карточке документа (docpage.css) — полоса во всю ширину окна,
   её внутренний контейнер обязан совпадать с шапкой, иначе при прокрутке название документа
   и кнопка «Скачать» прыгают на другую вертикаль. Правим отсюда: docpage.css грузится раньше. */
.dctx-in { max-width: var(--shell); padding-inline: var(--gut); }

/* ── Колонка ───────────────────────────────────────────────────────────────
   До 1200px её нет вообще. Не «уезжает вниз страницы», а именно нет: это навигация
   «что рядом», в конце длинной страницы её никто не читает, а вес мобильной страницы
   она бы утяжелила двумя десятками ссылок. На узких экранах за навигацию отвечает
   кнопка «Каталог» в шапке. */
.sbr { display: none; }

@media (min-width: 1200px) {
  .sbr {
    display: block;
    position: sticky;
    /* Под шапкой. --dctx-top/--dctx-h ставит docpage.js на карточке документа (там ещё
       и липкая строка контекста); на остальных страницах работает запасное значение —
       высота шапки. */
    top: calc(var(--dctx-top, 72px) + var(--dctx-h, 0px) + 16px);
    align-self: start;
    /* Своя прокрутка: разделов каталога 18, вместе с контекстным блоком список бывает
       длиннее экрана, и без неё нижние разделы были бы недостижимы — липкий элемент
       выше вьюпорта перестаёт быть липким. */
    max-height: calc(100vh - var(--dctx-top, 72px) - var(--dctx-h, 0px) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Мягкая тёплая подложка вместо прежней разделительной линии справа. Линия отделяла
       колонку только геометрически: внутри всё равно оставался голый текст, прижатый к
       краю, и блок читался как случайный список, а не как каталог. Подложка + скругление
       делают из него предмет, при этом рамки нет — она бы спорила с карточками контента. */
    background: var(--paper);
    border-radius: var(--radius);
    padding: 14px 12px 16px;
    scrollbar-width: thin;
  }
}

/* ── Блоки ─────────────────────────────────────────────────────────────────
   Разделительная линия между блоками, а не только отступ: контекст («виды этого
   документа», подразделы) и весь каталог — списки разной природы, и без границы они
   читаются как один длинный перечень. Линия по тону подложки, а не общая --line:
   на тёплом --paper серая линия выглядит грязной. */
.sbr-block + .sbr-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-line);
}

/* Заголовок блока. Был набран капсом 11.5px цветом --subtle — «еле заметная надпись»:
   на странице она читалась как служебная подпись, а не как название каталога. Теперь это
   обычный заголовок в цвете текста, а число рядом — приглушённое. */
.sbr-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 4px 8px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.sbr-h-t { min-width: 0; }
.sbr-h-n {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--subtle);
  font-variant-numeric: tabular-nums;
}

.sbr-list { list-style: none; margin: 0; padding: 0; }

/* Строка раздела: иконка — название — число.
   Грид, а не flex: у названий в две строки («Финансы, бухгалтерия и налоги») при флексе
   число уезжало вниз вместе с последней строкой и столбик чисел ломался. В гриде колонки
   фиксированы, align-items:start держит и иконку, и число на первой строке названия. */
.sbr-i {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 9px;
  /* Отрицательные поля по бокам гасят внутреннее поле панели (12px), поэтому подсветка
     строки идёт от края до края колонки; паддинг возвращает текст на прежнее место. */
  margin-inline: -12px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.32;
  color: var(--ink);
}
/* Иконка — та же, что у раздела на /catalog (helper cat_icon): колонка и каталог должны
   узнаваться как одно и то же место, иначе сайдбар выглядит отдельным списком ссылок.
   1px сверху — оптическая компенсация: иконка 17px рядом со строкой 14px/1.32. */
.sbr-i-ic { width: 17px; height: 17px; margin-top: 1px; color: var(--faint); stroke-width: 1.9; }
.sbr-i-t { min-width: 0; }
/* Число документов в разделе — это обещание объёма: «Работа и кадры 66» читается иначе,
   чем просто «Работа и кадры». Приглушено и не спорит с названием; tabular-nums — чтобы
   столбик чисел не «плясал». */
.sbr-i-n {
  flex: none;
  /* Собственный отступ слева: у грида один column-gap на оба зазора, а числу его нужно
     больше, чем иконке, — иначе на переносе «Журналы, графики и / реестры» число липнет
     к последнему слову первой строки. */
  margin-left: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Наведение и «вы здесь» — полосой во всю ширину колонки, без скругления.
   Было: скруглённая плашка плюс акцентная риска слева внутри неё (inset box-shadow).
   Скругление и риска друг друга не терпят — угол срезает полосу сверху и снизу, и она
   висит огрызком посреди строки; на переносе в три строки («О сверхурочной работе с
   согласием») пилюля вдобавок растёт вверх-вниз и перестаёт быть строкой списка.
   14.09.2026 владелец сказал прямо: «не надо закруглять с полоской, страшно».

   Стало: строка выделяется как строка — ровная полоса от края до края колонки (поле
   панели 12px компенсируем отрицательными отступами и возвращаем паддингом), риска
   стоит по её левому краю целиком, углы прямые. Так отмечают текущий пункт боковые
   меню справочно-правовых систем — потому что читается это как «вы вот на этой
   строке», а не как отдельная кнопка поверх списка. */
.sbr-i:hover {
  background: var(--c-pay-bg);
  color: var(--c-pay);
}
.sbr-i:hover .sbr-i-ic, .sbr-i:hover .sbr-i-n { color: var(--c-pay); }

.sbr-i.is-here {
  background: var(--c-pay-bg);
  color: var(--c-pay);
  font-weight: 600;
  border-left: 2px solid var(--accent);
  padding-left: 6px;
}
.sbr-i.is-here .sbr-i-ic, .sbr-i.is-here .sbr-i-n { color: var(--c-pay); }

.sbr-all {
  display: inline-block;
  margin: 8px 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.sbr-all:hover { color: var(--accent-ink); text-decoration: underline; }

@media print {
  .sbr { display: none !important; }
  .pgshell { display: block !important; max-width: none !important; padding-inline: 0 !important; }
}