/* ═══════════════════════════════════════════════════════════════════════════
   SHELL — КАРКАС СТРАНИЦЫ: крошки · сайдбар · вкладки · возврат
   Канон: DESIGN_SYSTEM.md §46. Поведение — ДВИЖОК/ядро/lumen-shell.js (SP.shell.*).

   Что здесь и почему отдельный файл.
   Каркас — это всё, что вокруг данных: как человек понимает, где он, как
   переходит и как возвращается. До §46 каждый кит рисовал свою шапку в
   локальном <style> (`.cat-top`, `.v5-top`, `.top`) — восемнадцать копий одной
   полосы, разошедшихся по мелочам. Главная из мелочей и была дефектом:
   крошка стояла на `white-space:nowrap; overflow:hidden; text-overflow:ellipsis`
   и резалась ПОСРЕДИ СЛОВА при живом месте под ней, а на 640 px просто
   пропадала (`display:none`) — то есть ровно там, где ориентир нужнее всего.

   Файл подключается ОТДЕЛЬНОЙ <link> ПОСЛЕ lumen.css. В lumen.css ничего не
   пишем: там сейчас работают другие, и слияние ведёт к конфликту правок.

   Префикс классов — `sp-` (Speculator, §38). Цвет — только токенами (§3, §15).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   0 · СЕТКА КАРКАСА
   Две колонки: сайдбар фиксированной ширины + содержание. Сайдбара может не
   быть (§46.2) — тогда `.sp-shell.solo` и одна колонка.
   ─────────────────────────────────────────────────────────────────────────── */
.sp-shell{display:grid;grid-template-columns:var(--sp-side-w,var(--lm-side-w,264px)) minmax(0,1fr);min-height:100dvh;background:var(--bg)}
.sp-shell.solo{grid-template-columns:minmax(0,1fr)}
.sp-shell.wide{--sp-side-w:288px}
.sp-body{min-width:0;padding:0 40px 140px}
.sp-shell.solo .sp-body{max-width:1180px;margin:0 auto;width:100%}

/* Переход «к содержанию»: первый в порядке обхода, виден только с клавиатуры.
   Без него табом из адресной строки приходится проходить весь сайдбар. */
.sp-skip{position:absolute;left:-9999px;top:0;z-index:calc(var(--lm-z-drawer,80) + 5)}
.sp-skip:focus{left:12px;top:12px;position:fixed;padding:9px 14px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--surface);font-size:13px;text-decoration:none;box-shadow:var(--shadow-lg)}

/* ───────────────────────────────────────────────────────────────────────────
   1 · ШАПКА СТРАНИЦЫ
   Порядок слева направо (§46.5): бургер → крошки → распор → инструменты
   страницы → пресет → тема. Ничего между крошкой и распором не встаёт.
   ─────────────────────────────────────────────────────────────────────────── */
.sp-top{position:sticky;top:0;z-index:var(--lm-z-sticky,40);display:flex;align-items:center;gap:10px;
  min-height:var(--lm-top-h,60px);padding:10px 0;margin-bottom:8px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-2)}
.sp-top .sp-sp{flex:1 1 auto;min-width:8px}
.sp-top>.sp-tools{display:flex;align-items:center;gap:8px;flex:none}

/* Бургер: только на узкой ширине, цель 44 px по правилу касания (§30). */
.sp-burger{display:none;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--ink-2);cursor:pointer}
.sp-burger:hover{background:var(--surface-3);color:var(--ink)}
.sp-burger .lm-ic{width:18px;height:18px}

/* ───────────────────────────────────────────────────────────────────────────
   2 · КРОШКИ  (§46.1)
   Правила, вылившиеся в этот код:
   · крошка НИКОГДА не режется посреди слова — многоточия по символам нет;
   · места не хватает — свёртываются СРЕДНИЕ звенья в одну кнопку «…»,
     края (система и текущее) остаются всегда;
   · текущее звено — не ссылка, `aria-current="page"`, переносится по словам;
   · на 390 крошка не исчезает: система превращается в иконку дома.
   ─────────────────────────────────────────────────────────────────────────── */
/* Обёртка вызова не участвует в раскладке: флекс-элементом становится сам <nav>. */
.sp-crumbs-host{display:contents}
.sp-crumbs{flex:1 1 auto;font-size:12.5px;color:var(--ink-4);line-height:1.45;
  /* Ниже этой ширины крошка не сжимается НИКОГДА: в тесноте она вставала
     колонкой в три знака и ломалась по слогам. Не хватило места — переносится
     строка шапки, а не крошка. */
  min-width:min(100%,190px)}

/* ── Совместимость со старыми шапками китов ──
   Полосы `.v5-top`, `.cat-top`, `.b-top`, `.g-top`, `.s-top`, `.kt-top`, `.top`
   написаны до §46 и стоят на `flex` без переноса: рядом с крошкой в них живут
   навигация из десяти ссылок и две кнопки. Как только внутрь встаёт крошка §46,
   полоса обязана переносить строку — иначе правило «крошка не сжимается» отдаёт
   свой долг соседям и ломает их. Один селектор вместо правки восемнадцати
   локальных <style>. */
:where(.sp-top,.v5-top,.cat-top,.b-top,.g-top,.s-top,.kt-top,.top):has(>.sp-crumbs){
  flex-wrap:wrap;row-gap:8px}
.sp-crumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;margin:0;padding:0;list-style:none}
.sp-crumbs li{display:flex;align-items:center;gap:4px;min-width:0}
.sp-crumbs a{color:var(--ink-3);text-decoration:none;border-radius:6px;padding:2px 4px;margin:-2px -4px;
  white-space:nowrap;transition:color var(--lm-dur-quick,150ms) var(--lm-ease-ui,ease-out)}
.sp-crumbs a:hover{color:var(--ink);background:var(--surface-3)}
.sp-crumbs .sep{color:var(--ink-5);flex:none;user-select:none}
/* Текущее звено. Перенос ПО СЛОВАМ, а не обрезка и не разрыв внутри слова:
   `overflow-wrap:break-word` в тесноте рубил «Каркас» на «Ка/рка/с» — то есть
   делал ровно то, от чего §46 и уходит. Слово остаётся целым; если оно не
   влезает, строка просто шире — это видно и чинится свёртыванием средних. */
.sp-crumbs [aria-current]{color:var(--ink);font-weight:var(--w-semibold);white-space:normal;
  overflow-wrap:normal;word-break:keep-all;hyphens:none;text-wrap:balance;min-width:0}
/* Номер-адрес элемента (6.1) — моноширинный, не переносится и не режется. */
.sp-crumbs .adr{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-4);white-space:nowrap;flex:none}
.sp-crumbs [aria-current] .adr{color:var(--ink-3)}
/* Дом: подменяет слово «Speculator» на узкой ширине. */
.sp-crumbs .home .lm-ic{width:14px;height:14px;vertical-align:-2px}
.sp-crumbs .home .w{margin-left:5px}

/* Свёрнутые средние звенья. Кнопка «…» раскрывает их по наведению и по фокусу
   (наведения на касании не бывает — поэтому ещё и по клику, это делает JS). */
.sp-more{position:relative;flex:none}
.sp-more>button{border:0;background:transparent;color:var(--ink-4);cursor:pointer;font:inherit;
  padding:1px 6px;border-radius:6px;line-height:1.2}
.sp-more>button:hover,.sp-more>button[aria-expanded="true"]{background:var(--surface-3);color:var(--ink-2)}
.sp-more .pop{position:absolute;left:0;top:calc(100% + 6px);z-index:var(--lm-z-menu,60);
  min-width:190px;max-width:min(320px,80vw);padding:5px;border-radius:var(--r-md,12px);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);
  display:none;flex-direction:column;gap:1px}
.sp-more.on .pop{display:flex}
.sp-more .pop a{display:block;padding:6px 9px;border-radius:8px;font-size:12.5px;color:var(--ink-2);
  text-decoration:none;white-space:normal;margin:0}
.sp-more .pop a:hover{background:var(--surface-3);color:var(--ink)}

/* ───────────────────────────────────────────────────────────────────────────
   3 · САЙДБАР  (§46.2)
   ─────────────────────────────────────────────────────────────────────────── */
.sp-side{position:sticky;top:0;height:100dvh;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding:16px 12px 28px;
  border-right:1px solid var(--border-2);
  background:color-mix(in srgb,var(--surface) 70%,var(--bg))}

.sp-brand{display:flex;align-items:center;gap:10px;padding:2px 6px;color:inherit;text-decoration:none}
.sp-brand .m{width:30px;height:30px;flex:none;border-radius:9px;background:var(--ink);color:var(--surface);
  display:grid;place-items:center;font-weight:700;font-size:13px}
.sp-brand b{display:block;font-size:14px;letter-spacing:-.02em;color:var(--ink)}
.sp-brand small{display:block;font-size:var(--lm-micro);color:var(--ink-4);line-height:1.35}

/* Полки: два-три равнозначных корня системы. Это НЕ вкладки содержания. */
.sp-shelf{display:flex;gap:4px;padding:0 4px}
.sp-shelf a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 8px;border-radius:9px;font-size:12.5px;color:var(--ink-3);text-decoration:none;
  border:1px solid transparent;white-space:nowrap}
.sp-shelf a:hover{background:var(--surface-3);color:var(--ink)}
.sp-shelf a[aria-current]{background:var(--ink);color:var(--surface)}
.sp-shelf a span{font-size:var(--lm-micro);opacity:.72;font-variant-numeric:tabular-nums}

.sp-search{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);padding:7px 10px;font-size:12.5px;color:var(--ink-4)}
.sp-search input{border:0;outline:0;background:transparent;font:inherit;color:var(--ink);flex:1;min-width:0}
.sp-search .lm-ic{width:15px;height:15px;flex:none}
@media (pointer:coarse){.sp-search input{font-size:16px}}

.sp-nav{display:flex;flex-direction:column;gap:2px}
/* Подпись группы вкладок и пунктов. Группа именуется вопросом читателя,
   а не источником формы (§46.3). */
.sp-nav .g{font-size:var(--lm-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  padding:0 8px;margin:10px 0 4px}
.sp-nav .g:first-child{margin-top:0}
.sp-nav a{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  font-size:12.5px;color:var(--ink-2);text-decoration:none;min-height:28px;
  /* Вес и кегль НЕ меняются активным состоянием (§30.2): смена веса двигает
     соседей на полпиксела и читается как дрожь при скролле. Меняется фон. */
  font-weight:var(--w-medium);transition:background-color var(--lm-dur-quick,150ms) var(--lm-ease-ui,ease-out)}
.sp-nav a:hover{background:var(--surface-3)}
.sp-nav a[aria-current]{background:var(--ink);color:var(--surface);font-weight:var(--w-medium)}
.sp-nav a .lm-ic{width:14px;height:14px;flex:none;opacity:.8}
.sp-nav a .t{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-nav a .n{flex:none;font-size:var(--lm-micro);color:var(--ink-4);font-variant-numeric:tabular-nums}
.sp-nav a[aria-current] .n{color:var(--surface)}
/* Пустая группа остаётся видимой с нулём: исчезнувший пункт читается как
   поломка навигации, а ноль — как факт (§46.5). */
.sp-nav a.empty{opacity:.5}
.sp-nav a.hide{display:none}
/* Ссылка на ДРУГУЮ страницу внутри того же списка: помечена стрелкой и
   исключена из скроллспая — иначе она «загорается» при прокрутке. */
.sp-nav a[data-page] .lm-ic.go{margin-left:auto;opacity:.45}

.sp-side-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--border-2);
  font-size:var(--lm-micro);color:var(--ink-4);line-height:1.7}
.sp-side-foot a{color:var(--ink-3);text-decoration:none}
.sp-side-foot a:hover{color:var(--ink);text-decoration:underline}

/* ───────────────────────────────────────────────────────────────────────────
   4 · ВКЛАДКИ И ГРУППИРОВКА  (§46.3)
   Сегментный контрол — `.lm-seg` из общего слоя (скользящая таблетка,
   LM.motion.segPill). Здесь — ряд вкладок содержания и фильтр-чипы.
   Общее правило: при переполнении ряд ПРОКРУЧИВАЕТСЯ, подписи не сжимаются.
   ─────────────────────────────────────────────────────────────────────────── */
.sp-tabs{display:flex;align-items:stretch;gap:2px;min-width:0;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  border-bottom:1px solid var(--border-2)}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tabs [role="tab"]{flex:none;scroll-snap-align:start;position:relative;
  display:inline-flex;align-items:center;gap:7px;padding:9px 12px 10px;
  border:0;background:transparent;color:var(--ink-3);font:inherit;font-size:13px;
  cursor:pointer;white-space:nowrap;text-decoration:none;min-height:38px}
.sp-tabs [role="tab"]:hover{color:var(--ink)}
.sp-tabs [role="tab"][aria-selected="true"]{color:var(--ink)}
.sp-tabs [role="tab"][aria-selected="true"]::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;
  height:2px;border-radius:2px;background:var(--lm-emph)}
.sp-tabs [role="tab"] .n{font-size:var(--lm-micro);color:var(--ink-4);font-variant-numeric:tabular-nums}
.sp-tabs [role="tab"] .lm-ic{width:15px;height:15px}
/* Подпись группы вкладок стоит НАД рядом, а не внутри него. */
.sp-tabs-g{font-size:var(--lm-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin:0 0 5px}
.sp-tabwrap{min-width:0;margin-bottom:14px}
/* Край прокрутки: тень-подсказка, что ряд продолжается. */
.sp-tabwrap{--sp-fade:color-mix(in srgb,var(--bg) 100%,transparent)}
.sp-tabwrap.more-r{mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}

/* Фильтр-чипы: несколько признаков одновременно, не взаимоисключающие. */
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.sp-chips button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;min-height:28px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.sp-chips button:hover{background:var(--surface-3)}
.sp-chips button[aria-pressed="true"]{background:var(--lm-accent-bg);border-color:var(--lm-emph);color:var(--ink)}
.sp-chips button .n{font-size:var(--lm-micro);color:var(--ink-4);font-variant-numeric:tabular-nums}

/* ───────────────────────────────────────────────────────────────────────────
   5 · ВОЗВРАТ И «ЧТО ДАЛЬШЕ»  (§46.4, КАМЕРТОН §9а «нет тупиков»)
   Внизу каждой страницы — связь ПО СМЫСЛУ, а не повтор меню: меню отвечает
   «куда можно», связь — «почему туда».
   ─────────────────────────────────────────────────────────────────────────── */
.sp-next{margin:44px 0 0;padding:18px 0 0;border-top:1px solid var(--border-2);
  display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,320px)}
.sp-next .lbl{font-size:var(--lm-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin:0 0 8px}
.sp-next ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.sp-next li{min-width:0}
.sp-next a{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;color:var(--ink);text-decoration:none;
  max-width:var(--lm-measure-wide);text-wrap:pretty}
.sp-next a:hover .t{text-decoration:underline;text-underline-offset:3px}
.sp-next a .lm-ic{width:14px;height:14px;flex:none;color:var(--ink-4);align-self:center}
.sp-next a small{display:block;font-size:11.5px;color:var(--ink-4);line-height:1.45;margin-top:1px}
.sp-next .why{display:block;font-size:11.5px;color:var(--ink-4);line-height:1.45}
.sp-next .back{border-left:1px solid var(--border-2);padding-left:16px}
.sp-next .back a{color:var(--ink-2)}
/* Кит без колонки содержания (старая раскладка: шапка и секции прямо в <body>).
   Блок связей приземляется в body — и без полей упирался бы в края экрана. */
body>#spNext{padding:0 clamp(16px,4vw,40px) 64px}
body>#spNext .sp-next{max-width:1180px;margin-inline:auto}

/* ───────────────────────────────────────────────────────────────────────────
   6 · СЛУЖЕБНЫЕ СОСТОЯНИЯ КАРКАСА  (§46.5)
   ─────────────────────────────────────────────────────────────────────────── */
.sp-empty{display:none;padding:26px 18px;border:1px dashed var(--border);border-radius:var(--r-lg);
  background:var(--surface-2);text-align:center;max-width:var(--lm-measure-wide);margin:18px auto}
.sp-empty.on{display:block}
.sp-empty h3{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--ink)}
.sp-empty p{margin:0 0 12px;font-size:12.5px;color:var(--ink-3);line-height:1.55;text-wrap:pretty}
.sp-empty q{font-style:normal;color:var(--ink);font-weight:var(--w-semibold)}

/* ───────────────────────────────────────────────────────────────────────────
   7 · УЗКИЕ ШИРИНЫ
   730 — сайдбар уезжает в шторку; 390 — крошка ужимается свёртыванием, но
   не исчезает.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .sp-shell{grid-template-columns:minmax(0,1fr)}
  .sp-body{padding:0 18px 90px}
  .sp-burger{display:inline-flex}
  /* Шапка становится в две строки: наверху бургер и переключатели, под ними —
     крошка во всю ширину. Иначе крошка делит остаток ширины с пятью кнопками,
     сжимается до колонки в три знака и ломается по буквам (снимок 730, 07.09). */
  .sp-top{flex-wrap:wrap;row-gap:7px}
  .sp-top .sp-sp{display:none}
  .sp-burger{order:1}
  .sp-top .sp-tools{order:1;margin-left:auto}
  /* Своя строка под шапкой. Порядок задаётся только в НАШЕЙ шапке: в старых
     полосах китов у соседей `order` не выставлен, и `order:2` утаскивал крошку
     под кнопки — в самый низ шапки (поймано снимком блоки.html 390, 07.09). */
  .sp-top .sp-crumbs{order:2}
  .sp-crumbs{flex:1 1 100%}
  /* Справочные метки документов уходят: ориентир — крошка, а не они. */
  .sp-top .lm-tag{display:none}
  /* Сайдбар становится шторкой. Фокус-трап, Escape и возврат фокуса на бургер
     делает LM.drawer через SP.shell (§46.2). */
  .sp-side{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(300px,86vw);
    z-index:calc(var(--lm-z-drawer,80) + 1);border-right:1px solid var(--border);
    background:var(--surface);box-shadow:none;
    transform:translateX(-100%);transition:transform var(--lm-dur-slow,400ms) var(--lm-ease-smooth,ease)}
  .sp-side.on{transform:none;box-shadow:var(--shadow-lg)}
  .sp-next{grid-template-columns:minmax(0,1fr)}
  .sp-next .back{border-left:0;border-top:1px solid var(--border-2);padding-left:0;padding-top:12px}
}
@media (max-width:560px){
  .sp-body{padding:0 14px 80px}
  .sp-top{gap:8px;padding:8px 0}
  .sp-crumbs{font-size:12px}
  /* Слово «Speculator» уступает место иконке дома — крошка остаётся живой. */
  .sp-crumbs .home .w{display:none}
  /* Уходит и выбор носителя: носитель уже выбран телефоном.
     Ориентир (крошка) и тема остаются всегда. */
  .sp-top .lm-preset-ctl{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sp-side,.sp-crumbs a,.sp-nav a{transition-duration:.01ms}
}
@media print{
  .sp-side,.sp-burger,.sp-search,.sp-tabs,.sp-skip{display:none!important}
  .sp-shell{grid-template-columns:1fr}
  .sp-top{position:static;backdrop-filter:none;background:transparent}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §47.7 · ЛЕВАЯ ПАНЕЛЬ — ДОВОДКА (07.09.2026)

   Замечание Дениса со снимком очереди идей: панель «не красивая». Разобрал по
   причинам — их четыре, и все про раскладку, а не про вкус.

   1. Имя пункта рвалось посреди слова. Стояло `overflow-wrap:anywhere`, и
      «Графики, которых нет в каталоге» ломалось на «…нет в / каталоге»: строка
      становилась двухэтажной, а счётчик уезжал в её вертикальный центр — то
      есть переставал стоять в колонке. Имя теперь усекается, полное живёт в
      подсказке: пункт списка опознают по началу имени, а не по хвосту.
   2. Счётчик набирался моноширинным. По §4 моно положен коду, ключу и адресу;
      число в списке — ни то, ни другое, и на фоне Onest оно читалось чужим.
      Осталось `tabular-nums`: цифры стоят колонкой, гарнитура одна.
   3. Строки были разной высоты — от одноэтажных до двухэтажных, и список
      «дышал» неровно. Высота фиксирована: глаз ведёт по ровной лестнице.
   4. Чёрная заливка активного пункта доходила почти до края панели. По §3
      чёрное — это «где я», и оно остаётся; но пилюля отступает от кромки,
      иначе читается как заливка всей панели, а не как метка пункта.

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

/* 7.1 Ровная лестница строк. Высота одна у всех пунктов — и у тех, где есть
   иконка, и у тех, где её нет: иначе список ступенчатый. */
.sp-nav a,.cat-nav a{
  min-height:30px;
  padding:5px 8px;
  border-radius:var(--r-control);
  gap:9px;
}
.sp-nav a .lm-ic,.cat-nav a .lm-ic{width:16px;height:16px;opacity:1;color:var(--ink-4)}
.sp-nav a:hover .lm-ic,.cat-nav a:hover .lm-ic{color:var(--ink-3)}
.sp-nav a[aria-current] .lm-ic,.cat-nav a.on .lm-ic{color:var(--surface);opacity:.9}

/* 7.2 Имя в одну строку. Полное имя — в подсказке (движок ставит title). */
.cat-nav a .t,.cat-nav a>span:not(.n):not(.lm-ic){
  min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Пункт без обёртки .t (старая разметка китов): текст лежит прямо в ссылке */
.cat-nav a{min-width:0}

/* 7.3 Счётчик — своя колонка, одинаковая ширина у всех строк. Раньше он
   прижимался `margin-left:auto` и вставал в разное место у разных строк,
   потому что зависел от длины имени. */
.sp-nav a .n,.cat-nav a .n{
  margin-left:auto;flex:none;
  min-width:2.2em;text-align:right;
  font-family:inherit;font-size:var(--lm-micro);
  font-variant-numeric:tabular-nums;color:var(--ink-4);
}
.sp-nav a[aria-current] .n,.cat-nav a.on .n{color:var(--surface);opacity:.75}

/* 7.4 «Где я» — пилюля с отступом от кромки панели, а не полоса во всю ширину */
.sp-nav,.cat-nav{padding-inline:2px}

/* 7.5 Сворачиваемая группа. Заголовок — кнопка со стрелкой и числом пунктов:
   в списке из тринадцати групп читателю нужно закрыть двенадцать. */
.sp-nav .g,.cat-nav .g{
  display:flex;align-items:center;gap:6px;
  margin:14px 0 4px;padding:0 8px;
}
.sp-nav .g:first-child,.cat-nav .g:first-child{margin-top:0}
.sp-nav button.g,.cat-nav button.g{
  width:100%;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:var(--lm-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);text-align:left;
}
.sp-nav button.g:hover,.cat-nav button.g:hover{color:var(--ink-3)}
.sp-nav button.g .ch,.cat-nav button.g .ch{
  width:12px;height:12px;flex:none;transition:transform var(--lm-dur-quick,150ms) var(--lm-ease-ui,ease-out);
}
.sp-nav button.g[aria-expanded="false"] .ch,.cat-nav button.g[aria-expanded="false"] .ch{transform:rotate(-90deg)}
.sp-nav button.g .k,.cat-nav button.g .k{
  margin-left:auto;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--ink-5);
}
@media (prefers-reduced-motion:reduce){ .sp-nav button.g .ch,.cat-nav button.g .ch{transition:none} }

/* 7.6 Метка закрытого раздела: замок стоит ПОСЛЕ имени и до счётчика —
   он про доступ, а не про сущность, и не должен спорить с иконкой раздела
   (КАМЕРТОН §2.10: раздел без доступа виден с объяснением, а не спрятан). */
.sp-nav a .lock,.cat-nav a .lock{width:13px;height:13px;flex:none;color:var(--ink-5)}

/* 7.7 Строка добавления — тише пунктов: это действие, а не место */
.sp-nav a.add,.cat-nav a.add{color:var(--ink-4)}
.sp-nav a.add .lm-ic,.cat-nav a.add .lm-ic{color:var(--ink-4)}
.sp-nav a.add:hover,.cat-nav a.add:hover{color:var(--ink-2)}

/* 7.8 Подвал панели: учётная запись и служебные ссылки. Прижат книзу,
   отделён волосяной линией — одна линия, не рамка (§37). */
.sp-side-foot .who{
  display:flex;align-items:center;gap:9px;padding:6px 4px;margin-bottom:6px;
}
.sp-side-foot .who .av{
  width:26px;height:26px;flex:none;border-radius:var(--r-control);
  background:var(--surface-3);color:var(--ink-3);
  display:grid;place-items:center;font-size:11px;font-weight:var(--w-semibold);
}
.sp-side-foot .who b{display:block;font-size:12px;color:var(--ink);font-weight:var(--w-medium);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-side-foot .who small{display:block;font-size:var(--lm-micro);color:var(--ink-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 7.9 Логотип панели не крупнее строки поиска: он опознаёт систему,
   а не открывает её. Двухэтажная подпись — не больше двух строк. */
.sp-brand small,.cat-logo small{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* 7.10 База панели для страниц кита на старой разметке (.cat-*). Раньше
   каждая страница держала свою копию этих правил в локальном <style>, и
   слой её не перебивал — инлайновый лист идёт последним. Копии сняты, база
   живёт здесь одна: правка панели теперь доезжает до всех страниц сразу. */
.cat-nav{display:flex;flex-direction:column;gap:2px;padding-inline:2px}
.cat-nav a{
  display:flex;align-items:center;gap:9px;min-height:30px;padding:5px 8px;
  border-radius:var(--r-control);font-size:12.5px;color:var(--ink-2);
  text-decoration:none;font-weight:var(--w-medium);min-width:0;
  transition:background-color var(--lm-dur-quick,150ms) var(--lm-ease-ui,ease-out);
}
.cat-nav a:hover{background:var(--surface-3)}
.cat-nav a.on{background:var(--ink);color:var(--surface)}
.cat-nav a.hide{display:none}
.cat-nav a.empty{opacity:.5}

/* 7.11 Заголовок группы — подпись, а не кнопка. Он кликабелен, но выглядеть
   должен строкой капители: серая плашка в списке читается как ещё один пункт,
   причём самый крупный. Слой color.css подключается ПОСЛЕ этого файла и красит
   любую кнопку, поэтому фон снимается здесь явным `background:none`. */
.sp-nav button.g,.cat-nav button.g{
  display:flex;align-items:center;gap:6px;width:100%;
  margin:14px 0 4px;padding:0 8px;min-height:18px;
  border:0;border-radius:0;box-shadow:none;background:none;cursor:pointer;
  font:inherit;font-size:var(--lm-micro);font-weight:var(--w-body);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);text-align:left;
}
.sp-nav button.g:hover,.cat-nav button.g:hover{background:none;color:var(--ink-3)}
.sp-nav button.g:first-child,.cat-nav button.g:first-child{margin-top:0}
/* число пунктов группы отделено от её имени и стоит у правого края */
.sp-nav button.g .k,.cat-nav button.g .k{margin-left:auto;padding-left:8px}
.sp-nav .gbody,.cat-nav .gbody{display:flex;flex-direction:column;gap:2px}

/* 7.12 Служебные ссылки подвала — списком, а не строкой через точку.
   Шесть ссылок подряд читаются как один длинный абзац: глаз не находит
   границу между ними и не берёт ни одной. Строка на ссылку решает это
   без единого нового цвета. */
.sp-side-foot .links{display:flex;flex-direction:column;gap:3px;padding:0 4px}
.sp-side-foot .links a{
  display:block;padding:2px 0;color:var(--ink-4);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sp-side-foot .links a:hover{color:var(--ink-2);text-decoration:underline}

/* 7.13 Заголовок группы в старой разметке — <div class="g">, не кнопка.
   Локальные копии этого правила сняты со страниц, поэтому оно нужно здесь:
   без него подпись группы читается как обычный пункт списка, только крупнее. */
.cat-nav .g,.sp-nav .g{
  font-size:var(--lm-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);padding:0 8px;margin:14px 0 4px;
}
.cat-nav .g:first-child,.sp-nav .g:first-child{margin-top:0}