/* Каркас панели: знак, живые значки меню, меню без прокрутки,
   фирменные цвета площадок. Подключается на всех страницах после tw.css.
   Цвета — токены style.css (--t-*), обе темы работают без своих правил. */

/* --- меню слева стоит на месте ------------------------------------------
   Знак сверху и оператор снизу не двигаются; разделы между ними влезают по
   высоте окна, а на совсем низком окне прокручиваются без видимой полосы. */
.side { overflow: hidden; }
.side-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--sp-2); scrollbar-width: none;
  margin: 0 -4px; padding: 0 4px;
}
.side-nav::-webkit-scrollbar { display: none; }
.side .tab { position: relative; }
/* Меню прибито к окну, а не к высоте страницы: раньше всплывающий список
   внизу длинной страницы удлинял её, и меню уезжало вверх вместе с ней. */
@media (min-width: 1101px) {
  body.app > .side { position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: var(--side-w); z-index: 20; }
  html.side-narrow body.app > .side { width: var(--side-w-narrow); }
  body.app > .frame { grid-column: 2; }
}
/* Страница не «пружинит» на трекпаде: меню и шапка стоят, прокручивается
   только содержимое (а в меню — только список разделов). */
html, body { overscroll-behavior-y: none; }
/* Список разделов не влез: сверху и снизу тень — видно, что он прокручивается. */
.side-nav {
  --sb: hsl(var(--t-sidebar-background));
  background:
    linear-gradient(var(--sb) 40%, hsl(var(--t-sidebar-background) / 0)) top / 100% 28px no-repeat local,
    linear-gradient(hsl(var(--t-sidebar-background) / 0), var(--sb) 60%) bottom / 100% 28px no-repeat local,
    linear-gradient(hsl(0 0% 0% / .28), transparent) top / 100% 10px no-repeat scroll,
    linear-gradient(transparent, hsl(0 0% 0% / .28)) bottom / 100% 10px no-repeat scroll;
}
[data-theme="light"] .side-nav {
  background:
    linear-gradient(var(--sb) 40%, hsl(var(--t-sidebar-background) / 0)) top / 100% 28px no-repeat local,
    linear-gradient(hsl(var(--t-sidebar-background) / 0), var(--sb) 60%) bottom / 100% 28px no-repeat local,
    linear-gradient(hsl(220 20% 20% / .1), transparent) top / 100% 10px no-repeat scroll,
    linear-gradient(transparent, hsl(220 20% 20% / .1)) bottom / 100% 10px no-repeat scroll;
}

/* --- вид меню ----------------------------------------------------------------
   Пункт без рамки: выбранный — мягкая заливка, светящаяся полоска слева и
   значок цвета системы; наведение — тихий фон. Группы подписаны тонко. */
.side .side-nav .side-title, .side .side-title {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: hsl(var(--t-muted-foreground) / .75);
}
.side .side-nav .tab, .side .side-foot .tab { border: 0; border-radius: 10px; transition: background-color .18s ease, color .18s ease; }
.side .side-nav .tab:hover { background: hsl(var(--t-foreground) / .05); color: hsl(var(--t-foreground)); }
.side .side-nav .tab.active {
  color: hsl(var(--t-foreground)); font-weight: 600;
  background: linear-gradient(90deg, hsl(var(--t-primary) / .18), hsl(var(--t-primary) / .05));
  box-shadow: inset 0 0 0 1px hsl(var(--t-primary) / .14);
}
.side .side-nav .tab.active::before {
  content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: hsl(var(--t-primary)); box-shadow: 0 0 10px hsl(var(--t-primary) / .7);
  animation: side-bar-in .3s cubic-bezier(.22,1,.36,1);
}
.side .side-nav .tab.active .icon, .side .side-nav .tab.active .ni { color: hsl(var(--t-primary)); }
@keyframes side-bar-in { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
[data-theme="light"] .side .side-nav .tab:hover { background: hsl(var(--t-foreground) / .045); }
[data-theme="light"] .side .side-nav .tab.active { background: linear-gradient(90deg, hsl(var(--t-primary) / .16), hsl(var(--t-primary) / .04)); }
.side .side-foot { border-top-color: hsl(var(--t-sidebar-border) / .8); }
.side .who { border-radius: 12px; padding: 6px; transition: background-color .18s ease; }
.side .who:hover { background: hsl(var(--t-foreground) / .04); }
@media (min-width: 1101px) and (max-height: 960px) {
  .side { padding-top: 12px; padding-bottom: 10px; }
  .side .tab { height: 34px; }
  .side-title { padding: 10px var(--sp-3) 4px; }
  .side-brand { padding-bottom: 6px; }
}

/* --- знак ---------------------------------------------------------------
   Вершина структуры: золотой лидер и его команда под ним. По наведению
   линии прорисовываются сверху вниз, команда появляется по очереди,
   вершина вспыхивает, по плитке проходит блик. */
.mark {
  position: relative; overflow: hidden; isolation: isolate;
  width: 34px; height: 34px; border-radius: 10px; color: hsl(0 0% 100%);
  background:
    radial-gradient(120% 90% at 20% 0%, hsl(95 60% 70% / .55), transparent 60%),
    linear-gradient(150deg, hsl(118 45% 52%), hsl(158 62% 26%));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .28), inset 0 -2px 0 hsl(150 60% 12% / .3), 0 2px 6px hsl(150 60% 8% / .35);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.mark::after {
  content: ""; position: absolute; inset: -40% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, hsl(0 0% 100% / .38) 50%, transparent 60%);
  transform: translateX(-70%);
}
.mark svg { position: relative; z-index: 2; width: 26px; height: 26px; overflow: visible; }
/* Вершина — золотая: это лидер, ради которого ищем. */
.mark .mk-top { fill: hsl(45 100% 62%); }
.mark .mk-ping { stroke: hsl(45 100% 70%); opacity: 0; }
.mark .mk-top, .mark .mk-node, .mark .mk-ping { transform-box: fill-box; transform-origin: center; }
.mark .mk-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.brand:is(:hover, :focus-visible) .mark { transform: translateY(-1px) rotate(-4deg); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .28), inset 0 -2px 0 hsl(150 60% 12% / .3), 0 6px 14px hsl(140 60% 20% / .45); }
.brand:is(:hover, :focus-visible) .mark::after { animation: mk-sheen .8s cubic-bezier(.22,1,.36,1); }
.brand:is(:hover, :focus-visible) .mk-line { animation: mk-draw .55s cubic-bezier(.22,1,.36,1) both; }
.brand:is(:hover, :focus-visible) .mk-stem { animation-delay: .08s; }
.brand:is(:hover, :focus-visible) .mk-node { animation: mk-node .45s cubic-bezier(.34,1.56,.64,1) both; }
.brand:is(:hover, :focus-visible) .mk-n1 { animation-delay: .22s; }
.brand:is(:hover, :focus-visible) .mk-n2 { animation-delay: .3s; }
.brand:is(:hover, :focus-visible) .mk-n3 { animation-delay: .38s; }
.brand:is(:hover, :focus-visible) .mk-top { animation: mk-pop .5s cubic-bezier(.34,1.56,.64,1); }
.brand:is(:hover, :focus-visible) .mk-ping { animation: mk-ping .9s cubic-bezier(.22,1,.36,1) .1s; }
@keyframes mk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mk-node { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes mk-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3); } }
@keyframes mk-ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes mk-sheen { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.brand-name { letter-spacing: -0.02em; }
/* Строка знака не режет его тень и наклон: обрезается только название. */
.brand { overflow: visible; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* --- живые значки меню ---------------------------------------------------
   У каждого раздела своё короткое движение, только пока мышь над пунктом.
   Двигаем части значка (классы ni-* в _icons.html), без смены размеров. */
.side .tab .ni { overflow: visible; }
.side .tab .ni * { transform-box: fill-box; transform-origin: center; transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.side .tab .tab-label { display: inline-block; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.side .tab:hover .tab-label { transform: translateX(2px); }
.side .tab:is(:hover, :focus-visible) .ni-people .ni-a { animation: ni-wiggle .35s ease-out; }
.side .tab:is(:hover, :focus-visible) .ni-people .ni-b { transform: translateY(-1.2px); }
.side .tab:is(:hover, :focus-visible) .ni-search .ni-lens { animation: ni-scan .7s ease-in-out; }
.side .tab .ni-search .ni-glint { opacity: 0; }
.side .tab:is(:hover, :focus-visible) .ni-search .ni-glint { opacity: 1; }
.side .tab:is(:hover, :focus-visible) .ni-target .ni-dart { transform: translate(-1.6px, 1.6px); }
.side .tab:is(:hover, :focus-visible) .ni-target .ni-ring { animation: ni-pulse .45s ease-out .12s; }
.side .tab:is(:hover, :focus-visible) .ni-twins .ni-a { transform: translateX(1.4px); }
.side .tab:is(:hover, :focus-visible) .ni-twins .ni-b { transform: translateX(-1.4px); }
.side .tab:is(:hover, :focus-visible) .ni-send .ni-plane { transform: translate(1.5px, -1.5px) rotate(-8deg); }
.side .tab:is(:hover, :focus-visible) .ni-video .ni-play { transform: scale(1.3); }
.side .tab:is(:hover, :focus-visible) .ni-network .ni-top { transform: translateY(-1px) scale(1.2); }
.side .tab:is(:hover, :focus-visible) .ni-network .ni-kids { transform: translateY(.8px); }
.side .tab:is(:hover, :focus-visible) .ni-board .ni-card { transform: translateX(4.5px); }
.side .tab:is(:hover, :focus-visible) .ni-ban .ni-spin { transform: rotate(90deg); }
.side .tab .ni-wallet .ni-coin { transform: translateY(-1px); }
.side .tab:is(:hover, :focus-visible) .ni-wallet .ni-coin { transform: translateY(3px); opacity: 0; }
.side .tab:is(:hover, :focus-visible) .ni-operators .ni-gear { transform: rotate(90deg); }
.side .tab:is(:hover, :focus-visible) .ni-alert .ni-shake { animation: ni-wiggle .35s ease-out; }
/* Активный пункт стоит спокойно: он и так выделен цветом. */
.side .tab.active .ni * { animation: none !important; transform: none !important; }
.side .tab.active .ni-wallet .ni-coin { opacity: 1; }
@keyframes ni-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(8deg); } 70% { transform: rotate(-8deg); } }
@keyframes ni-scan { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-1.2px, -.8px); } 66% { transform: translate(1.2px, -.8px); } }
@keyframes ni-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .side .tab .ni *, .mark, .mark *, .mark::after { animation: none !important; transition: none !important; }
}

/* --- фирменные цвета площадок --------------------------------------------
   Только там, где значок и есть название: выпадающие списки, галочки «Где
   искать», значки площадок на карточках поисков и проектов. В строках людей
   цвет значит «можно написать лично» — там его не трогаем. */
.ch-telegram { --ch: 200 80% 55%; }
.ch-email { --ch: 35 90% 58%; }
.ch-whatsapp { --ch: 142 65% 45%; }
.ch-instagram { --ch: 330 75% 60%; }
.ch-facebook { --ch: 221 75% 62%; }
.ch-tiktok { --ch: 176 75% 48%; }
.ch-x, .ch-threads, .ch-douyin { --ch: var(--t-foreground); }
.ch-linkedin { --ch: 201 85% 50%; }
.ch-reddit { --ch: 16 100% 55%; }
.ch-bluesky { --ch: 211 95% 60%; }
.ch-vk { --ch: 213 60% 58%; }
.ch-discord { --ch: 235 85% 67%; }
.ch-wechat { --ch: 135 60% 45%; }
.ch-snapchat { --ch: 52 95% 52%; }
.ch-quora { --ch: 0 70% 52%; }
.ch-pinterest { --ch: 350 80% 56%; }
.ch-xiaohongshu { --ch: 355 85% 58%; }
.ch-weibo { --ch: 10 85% 56%; }
.ch-bilibili { --ch: 196 90% 55%; }
.ch-youtube { --ch: 0 80% 56%; }
.ch-google { --ch: 217 85% 62%; }
.ch-phone { --ch: 150 45% 55%; }
.ch-site, .ch-other, .ch-any { --ch: var(--t-muted-foreground); }
.ch-direct { --ch: var(--t-primary); }
[data-theme="light"] .ch-snapchat { --ch: 45 95% 40%; }
[data-theme="light"] .ch-email { --ch: 32 90% 45%; }

.pick-ic, .pick .icon.pick-ic { flex: none; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: hsl(var(--ch)); }
.pick-opt .icon.pick-ic { visibility: visible; }
.pick-opt > span:first-child { display: inline-flex; align-items: center; min-width: 0; }
/* Выбран вариант со своим значком — общий значок поля не повторяем. */
.nx-select:has(.pick-label .pick-ic) > .icon { display: none; }
.nx-select:has(.pick-label .pick-ic) .pick-btn { padding-left: 0; }

.pg-pl-ic .icon-channel { color: hsl(var(--ch, var(--t-muted-foreground))); opacity: .9; }
.nx-pl label:has(input:checked) .icon-channel,
.pg-pl label:has(input:checked) .icon-channel,
.checks label:has(:checked) .icon-channel { color: hsl(var(--ch, var(--t-primary))); }

/* Фильтры над списком людей: каждый по своему тексту, без «Все проек…». */
.nx-filters .nx-select { flex: 0 1 auto; }
.nx-filters .nx-select .pick-label { overflow: visible; }
/* Телефон: фильтры — ровная сетка в два столбца, а не лесенка разной ширины. */
@media (max-width: 720px) {
  .nx-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-filters .nx-select { min-width: 0; }
  /* В узком столбце длинный выбор («Все, кому можно писать») режется
     многоточием, а не уезжает за край экрана под свою стрелку. */
  .nx-filters .nx-select .pick-label { overflow: hidden; min-width: 0; }
  .nx-filters .nx-select .pick-btn { min-width: 0; }
  .nx-filters .menu, .nx-filters .nx-reset { justify-self: start; margin-left: 0; }
}

/* --- переходы между страницами -------------------------------------------
   Страницы панели сменяются без перезагрузки (nav.js): меню, шапка и
   строка вкладок стоят, подсветка вкладки переезжает к нажатой сразу.
   Содержимое сменяется встречным растворением: старое тает ровно с той
   скоростью, с какой проявляется новое, поэтому то, что совпадает на двух
   страницах (заголовки, фильтры, карточки), стоит на месте и не двоится,
   а меняется только отличающееся. Сдвиги и разная скорость старого и
   нового давали двойной текст и вспышку. На телефоне чат выезжает поверх
   списка, как в мессенджере. */
@view-transition { navigation: auto; }
:root { --vt-ease: cubic-bezier(.4, 0, .2, 1); --vt-time: .22s; }
.side { view-transition-name: side; }
.frame > .top { view-transition-name: top; }
html.vt-title .frame > .top .top-title { view-transition-name: top-title; }
.outreach-tabs { view-transition-name: otabs; }
.kt { view-transition-name: kt; }
.yt-tabs { view-transition-name: ytabs; }
.dialog-col { view-transition-name: dlg-list; }
.dialog-thread { view-transition-name: dlg-thread; }
.dialog-card { view-transition-name: dlg-card; }

::view-transition-group(*) { animation-duration: var(--vt-time); animation-timing-function: var(--vt-ease); }
::view-transition-old(*) { animation: vt-out var(--vt-time) var(--vt-ease) both; }
::view-transition-new(*) { animation: vt-in var(--vt-time) var(--vt-ease) both; }
/* Каркас стоит: старый снимок не нужен, новый без анимации. */
::view-transition-old(side), ::view-transition-old(top), ::view-transition-old(otabs), ::view-transition-old(kt), ::view-transition-old(ytabs), ::view-transition-old(dlg-list) { display: none; }
::view-transition-new(side), ::view-transition-new(top), ::view-transition-new(otabs), ::view-transition-new(kt), ::view-transition-new(ytabs), ::view-transition-new(dlg-list) { animation: none; }
/* Есть только на одной из страниц (шапки нет на экране диалогов) — тает или проявляется. */
::view-transition-old(top):only-child, ::view-transition-old(otabs):only-child, ::view-transition-old(kt):only-child, ::view-transition-old(ytabs):only-child, ::view-transition-old(dlg-list):only-child { display: block; animation: vt-out var(--vt-time) var(--vt-ease) both; }
::view-transition-new(top):only-child, ::view-transition-new(otabs):only-child, ::view-transition-new(kt):only-child, ::view-transition-new(ytabs):only-child, ::view-transition-new(dlg-list):only-child { animation: vt-in var(--vt-time) var(--vt-ease) both; }
/* Другой заголовок: старый быстро уходит, новый проявляется следом —
   два текста друг на друге не стоят. Снимки в свой размер, не растянуты. */
::view-transition-old(top-title), ::view-transition-new(top-title) { inline-size: auto; block-size: auto; mix-blend-mode: normal; }
::view-transition-old(top-title) { animation: vt-out .12s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(top-title) { animation: vt-title .26s cubic-bezier(.2, .8, .2, 1) .08s both; }
@keyframes vt-title { from { opacity: 0; transform: translateY(3px); } }
/* Обновление той же страницы (свежие числа) — ещё мягче. */
html:active-view-transition-type(fresh) { --vt-time: .32s; }

/* После входа: карточка входа уходит в размытие, панель проявляется —
   меню выезжает слева, шапка опускается, блоки страницы поднимаются сами
   (appear в nav.js). */
html:active-view-transition-type(enter)::view-transition-old(root) { animation: vt-out .35s ease both; }
html:active-view-transition-type(enter)::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.23, 1, .32, 1) .05s both; }
html:active-view-transition-type(enter)::view-transition-old(login-card) { animation: vt-leave-card .42s cubic-bezier(.4, 0, .2, 1) both; }
html:active-view-transition-type(enter)::view-transition-new(side) { animation: vt-enter-side .6s cubic-bezier(.23, 1, .32, 1) both; }
html:active-view-transition-type(enter)::view-transition-new(top),
html:active-view-transition-type(enter)::view-transition-new(top-title) { animation: vt-enter-top .55s cubic-bezier(.23, 1, .32, 1) .08s both; }
html:active-view-transition-type(enter)::view-transition-new(otabs),
html:active-view-transition-type(enter)::view-transition-new(kt),
html:active-view-transition-type(enter)::view-transition-new(ytabs) { animation: vt-in .5s cubic-bezier(.23, 1, .32, 1) .12s both; }
@keyframes vt-leave-card { to { opacity: 0; transform: translateY(-8px) scale(.97); filter: blur(8px); } }
@keyframes vt-enter-side { from { opacity: 0; transform: translateX(-14px); } }
@keyframes vt-enter-top { from { opacity: 0; transform: translateY(-6px); } }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* Телефон: чат открывается поверх списка и уезжает назад, как в мессенджере.
   Всё едет одним снимком, поэтому отдельные имена здесь снимаем. */
@media (max-width: 960px) {
  .frame > .top, html.vt-title .frame > .top .top-title, .outreach-tabs, .kt, .dialog-col, .dialog-thread, .dialog-card { view-transition-name: none; }
  html:active-view-transition-type(chat-open)::view-transition-old(root) { animation: vt-under .34s cubic-bezier(.32, .72, 0, 1) both; mix-blend-mode: normal; }
  html:active-view-transition-type(chat-open)::view-transition-new(root) { animation: vt-over .34s cubic-bezier(.32, .72, 0, 1) both; mix-blend-mode: normal; box-shadow: -12px 0 32px hsl(var(--t-scrim) / .25); }
  html:active-view-transition-type(chat-back)::view-transition-old(root) { animation: vt-off .3s cubic-bezier(.32, .72, 0, 1) both; mix-blend-mode: normal; z-index: 2; box-shadow: -12px 0 32px hsl(var(--t-scrim) / .25); }
  html:active-view-transition-type(chat-back)::view-transition-new(root) { animation: vt-back .3s cubic-bezier(.32, .72, 0, 1) both; mix-blend-mode: normal; }
}
@keyframes vt-over { from { transform: translateX(100%); } }
@keyframes vt-under { to { transform: translateX(-25%); opacity: .6; } }
@keyframes vt-off { to { transform: translateX(100%); } }
@keyframes vt-back { from { transform: translateX(-25%); opacity: .6; } }

/* Длинные списки: строки за краем экрана браузер не раскладывает и не
   рисует, пока до них не прокрутили, — переход в «Людей» и «Сетевые
   компании» собирает только видимое. Всплывающего внутри строк нет. */
.pg-rows > .pg-row { content-visibility: auto; contain-intrinsic-size: auto 84px; }
.nx-cgrid > .nx-co { content-visibility: auto; contain-intrinsic-size: auto 88px; }

/* Браузер без переходов: содержимое просто проявляется. */
.frame > main.nav-in { animation: nav-in .22s var(--vt-ease) both; }
@keyframes nav-in { from { opacity: .35; } }

/* Подсветка выбранной вкладки — отдельный слой под вкладками (nav.js):
   при нажатии он сразу едет к новой, страница догоняет. Пока скрипт её не
   поставил, подсвечена сама вкладка, как раньше. */
.outreach-tabs, .dlg-kinds, .kt, .side-nav { position: relative; }
.outreach-tabs > a, .dlg-kinds > a, .kt > a, .side-nav .tab { position: relative; z-index: 1; }
/* Свой слой: подсветка едет, даже пока страница собирается. */
.nav-ink {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; will-change: transform;
  transition: transform .34s cubic-bezier(.3, .9, .25, 1), width .34s cubic-bezier(.3, .9, .25, 1),
              height .34s cubic-bezier(.3, .9, .25, 1), opacity .15s ease;
}
.has-ink > .nav-ink { opacity: 1; }
.outreach-tabs > .nav-ink { z-index: 2; background: var(--accent); border-radius: 2px; }
.outreach-tabs.has-ink > a[aria-current] { border-bottom-color: transparent; }
.dlg-kinds > .nav-ink { background: var(--card); border-radius: 9px; box-shadow: 0 1px 3px hsl(var(--t-scrim) / .22); }
.dlg-kinds.has-ink > a[aria-current="page"] { background: transparent; box-shadow: none; }
.kt > .nav-ink { background: var(--card); border-radius: 9px; box-shadow: 0 1px 2px hsl(var(--t-scrim) / .25), inset 0 0 0 1px var(--line); }
.kt.has-ink > .kt-i.on { background: transparent; box-shadow: none; }
/* Вкладки модулей комментариев (tabs.css модуля): строка уже прилипает
   под шапкой, подчёркивание — слоем, а не у самой вкладки. */
.yt-tabs > a { z-index: 1; }
.yt-tabs > .nav-ink { z-index: 2; background: hsl(var(--t-primary)); border-radius: 2px; }
.yt-tabs.has-ink > a[aria-current="page"]::after { opacity: 0; }
.side-nav > .nav-ink {
  border-radius: 10px; background: linear-gradient(90deg, hsl(var(--t-primary) / .18), hsl(var(--t-primary) / .05));
  box-shadow: inset 0 0 0 1px hsl(var(--t-primary) / .14);
}
[data-theme="light"] .side-nav > .nav-ink { background: linear-gradient(90deg, hsl(var(--t-primary) / .16), hsl(var(--t-primary) / .04)); }
.side .side-nav.has-ink .tab.active { background: transparent; box-shadow: none; }

/* Страница ещё не пришла: тонкая полоса сверху и приглушённое содержимое.
   Появляется не сразу — быстрый переход обходится без неё. */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1000; pointer-events: none;
  background: linear-gradient(90deg, hsl(var(--t-primary) / .5), hsl(var(--t-primary)));
  box-shadow: 0 0 10px hsl(var(--t-primary) / .55);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
html.nav-busy .nav-progress { opacity: 1; transform: scaleX(.9); transition: transform 7s cubic-bezier(.05, .75, .1, 1), opacity .12s; }
html.nav-done .nav-progress { opacity: 0; transform: scaleX(1); transition: transform .2s ease-out, opacity .3s ease .15s; }
html.nav-busy { cursor: progress; }
html.nav-busy:not(.nav-act) .frame > main > :not(.outreach-tabs):not(.kt):not(.yt-tabs):not(.flash) { opacity: .72; transition: opacity .3s ease .15s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .nav-ink, .frame > main.nav-in { transition: none; animation: none; }
}