/* shell.css - каркас приложения (сайдбар + шапка + контейнер контента). Использует токены base.css.

   ДВЕ КРУПНЫЕ ПОВЕРХНОСТИ КАБИНЕТА ЖИВУТ ЗДЕСЬ, и обе теперь собираются одинаково, тремя
   слоями сверху вниз:

     background-color: своя заливка (--canvas у холста, --rail у боковины)
     background-image: var(--glow-layer),  <- свет; прозрачен, пока никто не выставил --tone-glow
                       var(--noise-<место>) <- зерно вместе со своей вуалью (два слоя в токене)

   Почему именно так. Зерно и вуаль неразделимы: вуаль возвращает светлоту, которую поднимает
   зерно, поэтому они лежат в ОДНОМ токене и разорвать их нельзя (разбор - в base.css, блок
   «ШУМ НА КРУПНЫХ ПОВЕРХНОСТЯХ»). Слой света стоит ПЕРВЫМ, то есть выше зерна: свет освещает
   текстуру, а не лежит под ней. Он ничего не стоит и ничего не рисует, пока --tone-glow не
   выставлен, и стоит он тут ровно затем, чтобы день, когда холст обязан подсветиться аварией
   парка, стоил одной строки, а не пересборки фона.

   Мелкие плашки каркаса (.topbar__bar, .search, .icon-btn, .user) зерна НЕ получают намеренно:
   на площади в сорок пикселей высотой текстура не читается глубиной, читается сором. */

.app{min-height:100vh;display:flex;background-color:var(--canvas);background-image:var(--glow-layer),var(--noise-canvas);color:var(--text);font-size:14px;line-height:1.45}
/* Боковина - ОТДЕЛЬНАЯ ПАНЕЛЬ, а не край экрана. Отступ со всех сторон, скругление, своя
   поверхность, тонкая светлая граница и мягкая тень: панель читается предметом, лежащим НА
   холсте, и у кабинета появляется глубина, которой не давала линия border-right. */
.rail{flex:0 0 264px;width:264px;height:calc(100vh - var(--s-5) * 2);position:sticky;top:var(--s-5);z-index:60;margin:var(--s-5) 0 var(--s-5) var(--s-5);border-radius:var(--r-section);background-color:var(--rail);background-image:var(--glow-layer),var(--noise-rail);border:1px solid var(--line-mid);box-shadow:var(--shadow-float),var(--edge-light);display:flex;flex-direction:column;overflow-y:auto}
/* Шапка панели отделена линией: марка - не первый пункт меню. */
.rail-head{display:flex;align-items:center;gap:11px;padding:var(--s-7) var(--s-7) var(--s-6);border-bottom:1px solid var(--line-soft)}
.mark{width:36px;height:36px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 36px}
.mark i{display:block;border-radius:1px}
.mark i.a{width:16px;height:3px;background:var(--accent)}
.mark i.b{width:11px;height:3px;background:var(--accent-deep)}
.mark span{font:800 12px var(--f-ui);letter-spacing:-0.5px;color:var(--text);line-height:1;margin-top:2px}
.brand{font:700 17px var(--f-ui);letter-spacing:-0.2px}
.onb-wrap{padding:var(--s-5) var(--s-4) 0}
.onb{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:10px 11px;border-radius:var(--r-input);border:1px dashed var(--accent-line-dashed);background:var(--ok-tint);color:var(--accent-soft);font:600 12.5px var(--f-ui);cursor:pointer}
.onb:hover{background:var(--accent-ghost);border-color:var(--accent-line-hover)}
.onb-step{font:500 11px var(--f-mono);color:var(--accent-dim)}
.nav{display:flex;flex-direction:column;gap:2px;padding:0 var(--s-4)}
.nav.last{padding-bottom:var(--s-3)}
.nav--foot{padding-bottom:var(--s-7)}
/* ЗАГОЛОВОК ГРУППЫ. Он не пункт и не должен им казаться: набран мельче всего в боковине, капсом
   с разрядкой и самым тихим текстом. Разрядка тут работает как отступ внутри слова - строка из
   пяти-шести букв капсом без неё читается плотным блоком.
   Заголовок намеренно не кликабелен: группа - это подпись к столбцу, а не место, куда ходят.
   Поэтому в разметке он div с aria-hidden, а имя группы уходит в aria-label самого списка -
   иначе экранный диктор произносил бы «Главное» дважды подряд. */
.nav-group{padding:0 var(--s-4);margin:var(--s-6) 0 var(--s-2);font:600 var(--t-caps) var(--f-ui);letter-spacing:0.09em;text-transform:uppercase;color:var(--text-faint)}
/* Пунктов тринадцать в четырёх группах. Строка стала плотнее прежней семипунктовой боковины:
   иначе последняя группа уезжает под сгиб на ноутбуке, а меню, до которого надо прокручивать, -
   это меню, половину которого не видят. */
.nav-item{position:relative;display:flex;align-items:center;gap:var(--s-4);width:100%;padding:var(--s-3) var(--s-4);border:0;border-radius:var(--r-btn);background:transparent;color:var(--text-3);font:500 var(--t-body) var(--f-ui);cursor:pointer;text-align:left;transition:color var(--tr-tap)}
.nav-item:hover{color:var(--text)}
.nav-item svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-item .lbl{flex:1}
.nav-item.active{color:var(--text)}
/* «Выйти» - не раздел: отделён линией и приглушён, чтобы не читаться пунктом меню. */
.nav-item--quiet{margin-top:var(--s-4);padding-top:var(--s-5);color:var(--text-faint)}
.nav-item--quiet::after{content:"";position:absolute;left:var(--s-4);right:var(--s-4);top:0;height:1px;background:var(--line-soft)}
.nav-item.active::before{content:"";position:absolute;inset:0;border-radius:var(--r-btn);background:var(--nav-active);border-left:2px solid var(--accent);pointer-events:none}
.nav-badge{font:600 11px var(--f-mono);border-radius:var(--r-chip);padding:1px 6px}
.nav-badge.risk{color:var(--risk-text);background:var(--risk-icon)}
.nav-badge.warn{color:var(--warn-text);background:var(--warn-icon)}
/* Пункт за фичей вне лицензии: приглушён, ведёт на экран-заглушку «недоступна по лицензии» */
.nav-item.gated{opacity:.45}
.nav-item.gated .lbl::after{content:" · нет в лицензии";font:500 10px var(--f-mono);color:var(--text-faint)}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:var(--s-4);padding:13px 12px;border-top:1px solid var(--line-soft)}
/* Дыхание живого замера: «кабинет на связи». Длительность и кривая - общие токены шкалы
   движения, а не третье своё значение. При prefers-reduced-motion точка замирает зажжённой:
   смысл несёт сам факт зелёной точки, дыхание только подтверждает, что связь свежая. */
.rail-foot .fdot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:c32pulse var(--dur-live) var(--ease-live) infinite;flex:0 0 7px}
.rail-foot .ver{font:500 11.5px var(--f-mono);color:var(--text-mono);flex:1;text-decoration:none;cursor:pointer}
.rail-foot .ver:hover,.rail-foot .ver:focus-visible{color:var(--accent-soft)}
.rail-foot .nodes{font:500 11.5px var(--f-mono);color:var(--accent)}

.main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:0 var(--s-8)}
/* Шапка в два слоя, и это не украшение. .topbar - непрозрачная подложка цвета холста: она
   закрывает собой всё, что уезжает вверх при прокрутке, включая полосу над самой панелью.
   Полупрозрачное стекло с размытием тут стояло раньше и на длинных таблицах давало кашу из
   просвечивающих строк. .topbar__bar - сама панель: скругление, граница и тень те же, что у
   боковины, поэтому шапка и меню читаются одним набором предметов, а не двумя разными. */
/* Подложка шапки - это ХОЛСТ, а не плашка, поэтому она берёт то же зерно. Оставь её плоской -
   и при прокрутке сверху поедет ровный прямоугольник по текстурированному полю: шов виден
   именно там, где глаз и так следит за движением. Фаза зерна у двух коробок разная, но зерно на
   то и зерно: несовпадение рисунка на нём не читается, а несовпадение фактуры читается сразу. */
.topbar{position:sticky;top:0;z-index:40;width:100%;max-width:1620px;padding:var(--s-5) 0 var(--s-3);background-color:var(--canvas);background-image:var(--noise-canvas)}
.topbar__bar{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-3) var(--s-4) var(--s-3) var(--s-5);border-radius:var(--r-section);border:1px solid var(--line-mid);background:var(--rail);box-shadow:var(--shadow-float),var(--edge-light)}
/* Правая группа: лицензия, уведомления, аккаунт - вместе и компактно. Раньше выравнивание
   держал margin-left:auto на колокольчике, поэтому чип лицензии оставался у поиска, а группа
   собиралась случайно. Теперь порядок задан одним контейнером. */
.topbar__right{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;flex:0 0 auto}
.burger{display:none;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:var(--r-btn);border:1px solid var(--line-mid);background:var(--surface);color:var(--text-2);cursor:pointer;flex:0 0 36px}
.burger svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.search{display:flex;align-items:center;gap:var(--s-4);flex:1;max-width:560px;min-width:0;padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);border:1px solid var(--line-mid);background:var(--surface);cursor:pointer;text-align:left;transition:border-color var(--tr-tap)}
.search:hover{border-color:var(--line-input)}
.search svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--text-faint)}
.search .ph{flex:1;min-width:0;color:var(--text-faint);font-size:var(--t-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search .kbd{font:500 11px var(--f-mono);color:var(--text-mono);border:1px solid var(--line-btn);border-radius:var(--r-key);padding:1px 5px;flex:0 0 auto}
/* Круглая кнопка-иконка: правая группа набрана одной формой, как у соседей по рынку. */
.icon-btn{width:34px;height:34px;border-radius:var(--r-pill);border:1px solid var(--line-mid);background:var(--surface);cursor:pointer;position:relative;flex:0 0 34px;transition:border-color var(--tr-tap)}
.icon-btn:hover{border-color:var(--line-input)}
.icon-btn .ic{position:absolute;left:9px;top:9px;color:var(--text-muted);display:block}
.icon-btn .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .ndot{position:absolute;right:7px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--risk);border:2px solid var(--surface)}
/* Счётчик на колокольчике - то же оформление, что у бейджей сайдбара (.nav-badge), приколот
   к углу кнопки. Проблем нет - узла нет вообще, «0» не рисуем. */
.icon-btn .ncount{position:absolute;right:-5px;top:-5px;min-width:16px;padding:0 4px;border-radius:var(--r-chip);border:2px solid var(--rail);font:600 10px var(--f-mono);line-height:15px;text-align:center}
.icon-btn .ncount.risk{color:var(--risk-text);background:var(--risk-icon)}
.icon-btn .ncount.warn{color:var(--warn-text);background:var(--warn-icon)}
.user{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 5px;border-radius:var(--r-pill);border:1px solid var(--line-mid);background:var(--surface);cursor:pointer;flex:0 0 auto;transition:border-color var(--tr-tap)}
.user:hover{border-color:var(--line-input)}
.user .av{width:26px;height:26px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font:700 12px var(--f-ui);display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.user .who{display:flex;flex-direction:column;line-height:1.15}
.user .who .nm{font:600 12px var(--f-ui);color:var(--text);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user .who .rl{font:500 10.5px var(--f-ui);color:var(--text-mono)}
.content{width:100%;max-width:1620px;flex:1;padding:var(--s-7) 0 var(--s-10)}

/* ВКЛАДКИ ПУНКТА. Слева остались пункты по группам, а второй взгляд на ту же тему живёт здесь:
   полоса стоит первой строкой экрана и говорит, из чего пункт состоит и где ты сейчас.
   Подчёркивание активной, а не заливка: полоса лежит на общей линии-разделителе и не спорит с
   заголовком экрана, который идёт следом.

   ОДНА СТРОКА ВСЕГДА. flex-wrap тут стоял, и на двенадцати вкладках полоса разъезжалась в два
   этажа: два ряда кнопок читаются как два разных набора, а активная уезжает в верхний, где её
   не ищут. Не влезло - лента едет вбок; о том, что за краем ещё есть вкладки, говорят стрелки
   (их живое состояние считает sectionTabs в screens.js). Своя полоса прокрутки убрана намеренно:
   она добавляет второй горизонтальный ползунок под самой границей раздела и спорит с ней. */
.sectabs{display:flex;align-items:stretch;gap:var(--s-2);margin:0 0 var(--s-8);border-bottom:1px solid var(--line)}
.sectabs__scroll{position:relative;flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--s-1);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.sectabs__scroll::-webkit-scrollbar{width:0;height:0}
.sectab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--s-2);white-space:nowrap;padding:var(--s-3) var(--s-5) var(--s-5);border:0;background:transparent;color:var(--text-muted);font:600 var(--t-body) var(--f-ui);line-height:1;cursor:pointer}
.sectab{transition:color var(--tr-tap)}
.sectab:hover{color:var(--text-2)}
.sectab.is-active{color:var(--text)}
.sectab.is-active::after{content:"";position:absolute;left:var(--s-4);right:var(--s-4);bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--accent)}
/* Кольцо фокуса УБРАНО ВНУТРЬ вкладки (offset отрицательный), и это не вкусовщина.
   Лента едет вбок, значит у неё overflow-x:auto, а вместе с ним браузер обрезает и вертикаль
   (overflow-y:visible при прокрутке по горизонтали не бывает). Вкладка занимает ленту по высоте
   целиком, поэтому общее кольцо из base.css (outline-offset:2px) обрезалось сверху и снизу: по
   ленте из двенадцати вкладок фокус ходил стрелками, а владелец видел не рамку, а вертикальную
   чёрточку сбоку и не понимал, где он. Отрицательный сдвиг рисует то же кольцо тем же токеном
   внутри вкладки - обрезать нечего. */
.sectab:focus-visible{outline-offset:-3px;border-radius:var(--r-btn)}
/* Стрелка стоит РЯДОМ с лентой, а не поверх неё: накладка всегда закрывает крайнюю вкладку, и
   владелец жмёт мимо. Пары стрелок нет вовсе, пока всё влезает, - лишняя кнопка на экране
   сообщает о прокрутке, которой нет. Доехали до края - стрелка гаснет, но остаётся: исчезающая
   кнопка сдвигает ленту под рукой. */
.sectabs__arr{flex:0 0 auto;align-self:center;margin-bottom:var(--s-1);display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:var(--r-pill);border:1px solid var(--line-mid);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:color var(--tr-tap),border-color var(--tr-tap)}
/* Сам значок - угол из двух границ, повёрнутый на 45 градусов. Иконкой он не рисуется намеренно:
   лишний inline-SVG в разметке ради двух линий, да ещё и собираемый вне браузера на стендах. */
.sectabs__arr::before{content:"";width:6px;height:6px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor}
.sectabs__arr--prev::before{transform:rotate(45deg);margin-left:3px}
.sectabs__arr--next::before{transform:rotate(-135deg);margin-right:3px}
.sectabs__arr:hover{border-color:var(--line-input);color:var(--text)}
/* display:flex у кнопки перебивает браузерное [hidden]{display:none}, и спрятанная стрелка
   оставалась на экране: пара кнопок висела на каждой полосе, даже когда прокручивать нечего. */
.sectabs__arr[hidden]{display:none}
.sectabs__arr:disabled,.sectabs__arr.is-disabled{opacity:.4;cursor:default}
/* Вкладка вне ключа: приглушена, но на месте и открывается - за ней объяснение словами.
   Словесной подписи про лицензию тут намеренно НЕТ: она живёт ровно в одном месте, у пункта
   сайдбара (.nav-item.gated выше), и второй её источник разошёлся бы с первым. */
.sectab.gated{opacity:.45}
.sectab__badge{font:600 var(--t-meta) var(--f-mono);border-radius:var(--r-chip);padding:1px 6px;line-height:1.5}
.sectab__badge.risk{color:var(--risk-text);background:var(--risk-icon)}
.sectab__badge.warn{color:var(--warn-text);background:var(--warn-icon)}

.scrim-bg{display:none}
@media (max-width:900px){
  /* В ящике панель прижата к краю: отступ и скругление оставили бы полоску холста слева,
     из-под которой торчал бы край меню в закрытом положении (transform считает только ширину). */
  .rail{position:fixed;left:0;top:0;margin:0;height:100vh;border-radius:0;border-width:0 1px 0 0;box-shadow:none;transform:translateX(-100%);transition:transform var(--tr-enter)}
  .rail.open{transform:none;box-shadow:var(--shadow-pop)}
  .burger{display:flex}
  .main{padding:0 var(--s-5)}
  .scrim-bg.open{display:block;position:fixed;inset:0;background:var(--overlay);z-index:55}
}
@media (max-width:1180px){
  .user .who{display:none}
  .user{padding:4px}
}
/* Отдельного правила на узкий экран у вкладок больше нет: прокрутка вбок со стрелками стала
   поведением по умолчанию и на широком мониторе с двенадцатью вкладками работает так же. */