/* ═══════════════════════════════════════════════════════════════════
   site-nav.css — шапка сайта. Один визуальный источник правды для ВСЕХ
   страниц: Сегодня · Уроки · Практика · Библиотека · Разбор · Переговоры ·
   Рейтинг · Управления · Лента · События.
   Разметку даёт core/site-nav.js (window.SiteNav.html/mount); Разбор рисует
   те же классы нативно в бандле (docs/app.js).

   ЦВЕТ — ТОЛЬКО РОЛЯМИ core/tokeny.css. Раньше здесь стояли свои литералы
   (#fff, #1d1d1f, #0071e3, #16A7FF) и отдельный блок html[data-theme='dark'],
   переписывавший их второй раз. Роли переключаются сами — и системной тёмной,
   и выбранной руками, — поэтому второго набора правил больше нет: забытый
   литерал в тёмной теме давал тёмное на тёмном, и эта ловушка уже стреляла.

   В ПРИЛОЖЕНИИ ШАПКИ САЙТА НЕТ. Оболочка (app/navigatsiya.js) гасит .ynav
   целиком и рисует свою — здесь про это помнить не надо.
   ═══════════════════════════════════════════════════════════════════ */

/* ШАПКА СТОИТ НА ТОЙ ЖЕ ПОЛОСЕ, ЧТО И СТРАНИЦА.
   Замерено: знак центра стоял на x=16 при любой ширине окна, а колонка
   страницы начиналась на 104 (1280) и на 1184 (3440) — то есть первый пункт
   меню расходился с содержимым на 976 px, и на широком мониторе шапка была
   трёхметровой перекладиной, ни с чем не выравненной.
   Ряд не заворачиваем в лишний узел: тот же результат даёт боковое поле,
   посчитанное от полосы. max() оставляет на телефоне обычные 16 px, а на
   широком экране прижимает знак и вход ровно к краям колонки — включая
   поле самой колонки (--pole-polosy), иначе шапка встала бы на её рамку,
   а не на её текст. Полоса растёт ступенями (core/tokeny.css) — шапка
   растёт вместе с ней и без единой своей точки перелома. */
.ynav{
  display:flex; align-items:center; gap:var(--sp-4);
  padding-block:var(--sp-1);
  padding-inline:max(var(--sp-4), calc((100% - var(--polosa)) / 2 + var(--pole-polosy)));
  min-height:56px; box-sizing:border-box;
  /* Полоса чуть богаче «бумаги» страницы: surface-container, а не lowest —
     на тёмном холсте (#0B0D10) lowest сливается с фоном и шапка пропадает. */
  background:var(--surface-container);
  border-bottom:1px solid color-mix(in srgb, var(--outline-variant) 70%, var(--outline) 30%);
  color:var(--on-surface);
  font-family:var(--ya-font-text);
}
/* backdrop-filter / filter / transform на .ynav ЗАПРЕЩЕНЫ: они делают
   шапку containing block, и position:fixed у .ynav-links на телефоне
   считается от шапки, а не от окна — вкладки залипают в хедере поверх
   логотипа и «Войти», а низ экрана пустой (поймано 13.09.2026).
   Размытие оставляем только на самой нижней панели (.ynav-links). */


/* ── РАЗДЕЛЫ СТОЯТ ПО ЦЕНТРУ ПОЛОСЫ ────────────────────────────────────
   Общепринятая раскладка шапки: имя слева, разделы по центру, действия
   справа. Было не так. Замерено на живой странице (praktika.html): полоса
   разделов растягивалась на весь остаток (flex:1), но слова внутри неё
   лежали от левого края, и середина четвёрки уходила от середины полосы
   на 130 px при 1024, на 170 при 1440, на 250 при 1920 и на 330 при 2560 —
   разделы липли к имени, а справа перед «Войти» зияла дыра. Владелец это
   и увидел.
   ПОЧЕМУ БОКА, А НЕ margin:auto У РАЗДЕЛОВ. Автополя делят СВОБОДНОЕ
   место поровну, а не полосу: имя шире кнопки входа на 79 px, и разделы
   встали бы правее середины на 39,5. Здесь у обоих боков flex:1 1 0 —
   основа ноль, значит после раздачи бока РАВНЫ по ширине, а разделы между
   ними приходятся ровно на середину полосы.
   ПОЧЕМУ ЭТО НЕ ЛОМАЕТСЯ НА УЗКОМ. Минимальный размер бока остался
   автоматическим (min-width не трогаем): когда половины места не хватает
   под имя, бок упирается в своё содержимое, остаток достаётся второму, и
   раскладка сама съезжает в прежнюю — имя, за ним разделы. Ни перелома,
   ни переполнения страницы. Порог посчитан из замеров: 2×176,3 (имя) +
   428 (пять разделов) + 2×16 (зазоры) ≈ 812 px с именем и входом; при 800
   полоса уже вмещает ряд, а ниже 800 разделы уходят вниз (см. media ниже).
   ПОЧЕМУ БОК — ОТДЕЛЬНЫЙ УЗЕЛ, А НЕ flex НА САМОЙ ССЫЛКЕ. Растянутая
   .ynav-home стала бы ссылкой «домой» шириной в пол-шапки: щелчок по
   пустому месту слева уносил бы с любой страницы на главную. Бок тянется,
   ссылка внутри остаётся по своему содержимому.
   Зазор внутри бока — inherit: у шапки он поджимается на телефоне (5 px),
   на узком (4) и когда открыта дверь в админку (3). Свои цифры здесь
   разошлись бы с этой настройкой в первый же раз. */
.ynav-bok{ display:flex; align-items:center; gap:inherit; flex:1 1 0; }
.ynav-bok--deystviya{ justify-content:flex-end; }

/* Логотип = «домой» (на главную) — единая конвенция.
   Знак — солнце центра (двенадцать лучей), тот же вектор, что на заставке
   приложения; цвет — роль --tertiary (золото центра: #7B5800 в светлой,
   #FABC3E в тёмной). Имя написано шрифтом заголовков, не серифом: серифом
   на сайте набраны цитаты и книга, а имя центра — не цитата. */
.ynav-home{ display:flex; align-items:center; gap:var(--sp-2);
  text-decoration:none; flex-shrink:0; }
.ynav-mark{ width:26px; height:26px; flex-shrink:0; color:var(--tertiary);
  display:inline-flex; align-items:center; justify-content:center; }
.ynav-mark svg{ width:100%; height:100%; display:block; }
/* Имя и подпись стоят столбиком: подпись мельче и тише, она поясняет род
   занятия, а не спорит с именем за внимание (владелец 09.09.2026). */
.ynav-imena{ display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:0; }
.ynav-pod{ font:var(--type-label-s); color:var(--on-surface-variant); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ynav-name{ font:var(--type-title-l); letter-spacing:-.01em;
  color:var(--on-surface); white-space:nowrap; }

/* Хаб раздела: крупный ярлык (Уроки / Практика / …) без логотипа.
   Домой — вкладка «Сегодня», не тап по названию. */
.ynav--hub .ynav-mark{ display:none !important; }
.ynav--hub .ynav-pod{ display:none; }
.ynav--hub .ynav-imena{ justify-content:center; }
.ynav--hub .ynav-name{
  font:var(--type-headline-s); font-weight:700; letter-spacing:-.02em;
}
.ynav-home--hub{ cursor:default; pointer-events:none; }
.ynav-home--hub::before{ display:none; }

/* Без лого ярлык раздела обязан совпадать с полем колонки страницы
   (--pole-polosy). На ≤799 общий ряд шапки жмёт padding-inline до 8/6 px,
   и «Практика» / «Уроки» визуально липли к левому краю (14.09.2026). */
@media (max-width:799px){
  .ynav.ynav--hub{
    padding-inline:max(var(--sp-4), var(--pole-polosy, 16px));
  }
}

/* Поиск Уроков в ряду действий — до входа. Цель ≥48, знак как у #dr-lupa. */
.ynav-poisk{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:var(--cel-min, 48px); height:var(--cel-min, 48px); padding:0;
  border:1px solid var(--outline-variant); border-radius:var(--shape-s);
  background:var(--surface-container-lowest); color:var(--on-surface-variant);
  cursor:pointer;
  transition:border-color var(--dur-short) var(--ease-standard),
    color var(--dur-short) var(--ease-standard),
    background var(--dur-short) var(--ease-standard),
    box-shadow var(--dur-short) var(--ease-standard);
}
.ynav-poisk svg{ width:20px; height:20px; display:block; }
.ynav-poisk:hover{
  color:var(--on-surface); border-color:var(--outline);
  background:var(--ya-selected-fill);
  border-color:color-mix(in srgb, var(--ya-selected-stroke) 45%, transparent);
}
.ynav-poisk:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* На телефоне кружок чуть компактнее рядом с входом-аватаром. */
@media (max-width:799px){
  .ynav-poisk{ width:40px; height:40px; border-radius:var(--shape-s); }
}

/* Свитчер разделов.
   flex:0 1 auto, а не 1 (растягивался на весь остаток): ширину полосе
   задаёт её содержимое, а середину — равные бока выше. Сжиматься она
   по-прежнему умеет — когда полосы не хватает, у неё свой скролл вбок.
   justify-content не ставим нарочно: в сжатом состоянии центрирование
   внутри прокручиваемого узла прячет начало списка за недостижимым краем. */
.ynav-links{ display:flex; align-items:center; gap:2px; flex:0 1 auto; min-width:0;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.ynav-links::-webkit-scrollbar{ display:none; }
/* Значок вкладки виден только в нижней панели телефона (ниже 640): в ряду
   на широком экране слова хватает, а значок сбивал ритм полосы. */
.ynav-item__znak{ display:none; }
.ynav-item__znak svg{ width:24px; height:24px; display:block; }
.ynav-item{ position:relative; padding:7px 11px; border-radius:var(--shape-s);
  font:var(--type-label-l); color:var(--on-surface-variant);
  text-decoration:none; white-space:nowrap;
  transition:background var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard),
    box-shadow var(--dur-short) var(--ease-standard), border-color var(--dur-short) var(--ease-standard);
  border:1px solid transparent; }
/* Hover только там, где есть настоящий hover: иначе после тапа на телефоне
   «липнет» подсветка. Дымка — язык --ya-selected-*, не muddy slab. */
@media (hover:hover){
  .ynav-item:hover{
    background:var(--ya-selected-fill); color:var(--on-surface);
    border-color:color-mix(in srgb, var(--ya-selected-stroke) 45%, transparent);
  }
}
/* Активная вкладка — премиум-чип Play: fill + stroke + soft glow, не
   secondary-container (на тёмном это грязный navy #20344d). */
.ynav-item.is-active{
  background:var(--ya-selected-fill);
  color:var(--ya-selected-on);
  border-color:var(--ya-selected-stroke);
  box-shadow:var(--ya-selected-glow);
  font-weight:700;
}
.ynav-item.is-active .ynav-item__txt{ color:var(--ya-selected-meta); }

/* Дверь в админку — только у того, кому она положена (site-nav.js ставит и
   снимает hidden). display:none по умолчанию, чтобы hidden не спорил с flex. */
.ynav-admin{ display:none; flex-shrink:0; align-items:center; gap:6px;
  padding:6px 12px; height:36px; box-sizing:border-box;
  border-radius:var(--shape-s); text-decoration:none;
  background:var(--tertiary-container); color:var(--on-tertiary-container);
  font:var(--type-label-m); white-space:nowrap; }
.ynav-admin:not([hidden]){ display:inline-flex; }
.ynav-admin:hover{ background:var(--tertiary); color:var(--on-tertiary); }
/* Щит виден только на узком экране: рядом со словом он был бы шумом. */
.ynav-admin-znak{ display:none; width:20px; height:20px; }
.ynav-admin-znak svg{ width:100%; height:100%; display:block; }

/* ── Вошёл или нет: разный вид кнопки ───────────────────────────────────
   Гость — текстовый чип «Войти / Зарегистрироваться» (кружок прячем:
   иконка-человечек путалась с профилем). Вошедший — буква в кружке,
   слово спрятано; кружок крупнее (36), цель ≥48. */
.ynav-login-bukva{ display:none; font:var(--type-label-l); font-weight:600;
  line-height:1; text-transform:uppercase; }
.ynav-login[data-voshel="1"]{ border-color:var(--primary);
  padding:6px; height:auto; min-height:48px; min-width:48px;
  justify-content:center; gap:0; }
.ynav-login[data-voshel="1"] .ynav-login-av > svg{ display:none; }
.ynav-login[data-voshel="1"] .ynav-login-bukva{ display:block; }
.ynav-login[data-voshel="1"] .ynav-login-txt{ display:none; }
.ynav-login[data-voshel="1"] .ynav-login-av{
  width:36px; height:36px; font-size:15px; }

/* Гость: текст вперёд, кружок с человечком не показываем. */
.ynav-login:not([data-voshel="1"]) .ynav-login-av{ display:none; }
.ynav-login:not([data-voshel="1"]){
  padding:7px 12px; gap:0;
}

/* Войти — КНОПКА (окно открывает core/account.js на этой же странице).
   У кнопки свой шрифт по умолчанию, поэтому font задан явно. */
.ynav-login{ flex-shrink:0; display:flex; align-items:center; gap:var(--sp-2);
  padding:7px 14px 7px 10px; height:40px; box-sizing:border-box;
  border:1px solid var(--outline-variant); border-radius:var(--shape-s);
  background:var(--surface-container-lowest); color:var(--on-surface);
  font:var(--type-label-l); text-decoration:none; cursor:pointer;
  transition:border-color var(--dur-short) var(--ease-standard); }
.ynav-login:hover{ border-color:var(--outline); }
.ynav-login-av{ width:28px; height:28px; border-radius:var(--shape-full); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--primary); color:var(--on-primary); }

/* ── НИЖНЯЯ ПАНЕЛЬ ДО 800, А НЕ ДО 768 ────────────────────────────────
   С именем («Золотой Ясень») пять вкладок в верхнем ряду на ≤799 не
   помещаются: замерено 13.09.2026 — при 768 контейнер 415 px, ряд 428,
   «Разбор» обрезан; без обрезки ряд встаёт с ~800. Поэтому ниже 800
   разделы уходят в нижнюю панель. Проба «последний раздел влезает»
   стережёт и телефон, и эту полосу.
   Знак солнца остаётся всегда — он и есть подпись центра на узком экране. */
/* Имя стоит на всех ширинах: 09.09.2026 знак и имя ушли с первого экрана
   главной, и шапка осталась единственным местом, где продукт назван. На
   узком телефоне имя ужимается, а не прячется. */
@media (max-width:799px){
  .ynav-name{ font:var(--type-title-m); }   /* вкладки ушли вниз — имени просторно */
  .ynav--hub .ynav-name{ font:var(--type-headline-s); font-weight:700; letter-spacing:-.02em; }
}
@media (max-width:430px){
  .ynav-name{ font:var(--type-label-l); font-weight:700; }
  .ynav--hub .ynav-name{ font:var(--type-title-l); font-weight:700; letter-spacing:-.015em; }
  .ynav-pod{ font-size:10px; }
}

/* ── Мобильный: вкладки уходят вниз ───────────────────────────────────
   Владелец 09.09.2026: «для мобильного сделай из хедера навбар, как в
   приложении». Пять равных колонок (Сегодня · Уроки · Практика ·
   Библиотека · Разбор) — как в app/navigatsiya.js; на 360–375 подпись
   может уйти в многоточие, поля поджаты. Наверху — имя центра и вход. */
@media (max-width:799px){
  .ynav{ gap:5px; padding-inline:var(--sp-2); }
  /* Полосу разделов из ряда вынули (она внизу), и в ряду остались два бока:
     имя и действия. Оба тянутся (flex:1 1 0), поэтому имя стоит у левого
     края полосы, а вход и дверь в админку — у правого, как на широком
     экране. Автополе у имени оставлено на случай, когда ряд шапки рисует
     не эта разметка (Разбор, docs/app.js): там боков нет. */
  .ynav-home{ margin-right:auto; min-width:0; }
  .ynav-links{
    /* Слой ниже окон: у админки перекрытие окна z-index 100, у окна ключа и
       диалогов — тысячи. Панель обязана уходить ПОД них, иначе кнопка на дне
       окна становится ненажимаемой (поймано пробой админки 09.09.2026). */
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; gap:0; align-items:stretch; justify-content:space-around;
    padding:8px 2px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--surface-container);
    border-top:1px solid color-mix(in srgb, var(--outline-variant) 70%, var(--outline) 30%);
    overflow:visible;
  }
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .ynav-links{
      background:color-mix(in srgb, var(--surface-container) 90%, transparent);
      -webkit-backdrop-filter:saturate(1.15) blur(16px);
      backdrop-filter:saturate(1.15) blur(16px);
    }
  }
  .ynav-item{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:4px; padding:2px 1px; border-radius:var(--shape-s);
    font:500 11px/14px var(--ya-font-text); text-align:center;
    border-color:transparent; box-shadow:none;
  }
  /* Пилюля M3 под значком — как .yk-znak в приложении: форма, а не только цвет. */
  .ynav-item__znak{
    display:flex; align-items:center; justify-content:center;
    width:min(56px,100%); height:32px; border-radius:16px;
    color:currentColor;
    transition:background var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard);
  }
  .ynav-item__txt{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ynav-item.is-active{
    background:transparent; border-color:transparent; box-shadow:none;
    color:var(--ya-selected-meta); font-weight:700;
  }
  .ynav-item.is-active .ynav-item__txt{ color:var(--ya-selected-meta); }
  .ynav-item.is-active .ynav-item__znak{
    background:var(--ya-selected-fill);
    box-shadow:var(--ya-selected-glow);
  }
  .ynav-item.is-active .ynav-item__znak svg{ stroke-width:2.3; }
  @media (hover:hover){
    .ynav-item:hover{ background:transparent; border-color:transparent; }
    .ynav-item:hover .ynav-item__znak{ background:var(--ya-selected-fill); }
  }
  body.ynav-niz{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
  /* Прокрутка к кнопке не должна ставить её под панель: браузер оставляет
     снизу столько же места, сколько занимает панель. Без этого кнопка на дне
     длинной страницы (например «Выдать ключ» в админке) оказывалась под
     панелью и не нажималась — поймано пробой 09.09.2026. */
  html.ynav-niz{ scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* Админка на телефоне — ЗНАЧКОМ. Слово «Админка» в узкий ряд правда не
     влезает, и раньше дверь просто пряталась: с телефона в админку вела
     одна кнопка — в самом низу главной. Дверь эту видит только тот, кому
     она положена. */
  .ynav-admin-znak{ display:block; }
  .ynav-admin-txt{ display:none; }
  /* Текст «Войти / …» у ГОСТЯ остаётся на телефоне — прячем только у
     вошедшего (правило выше по data-voshel). Раньше .ynav-login-txt
     гасился всем ниже 800, и гость видел один кружок без слова. */
  /* ШИРИНА ЦЕЛИ 48, А НЕ 30–40. Слой ::before ниже даёт этим двум кнопкам
     честную ВЫСОТУ 48, но он объявлен left:0;right:0 — по ширине цель
     оставалась ровно такой, какой её делало содержимое: замерено на живой
     шапке 34×48 у «Войти» (30×48, когда открыта дверь в админку) и 36×48
     у щита админки. Палец в такую полоску не попадает.
     ШИРИНУ БЕРЁМ НАСТОЯЩУЮ, А НЕ СЛОЕМ. Высоту слоем добирают потому, что
     видимая пилюля ростом 48 читалась бы кнопкой другого веса; к ширине
     это возражение не относится — кружок просто встаёт в середину. А слой
     здесь и не годится: расширять его можно только влево (справа край
     экрана), и он наехал бы на соседнюю дверь в админку.
     МЕСТО ЕСТЬ. Ряд шапки на телефоне держит только имя центра и эти две
     кнопки — вкладки ушли вниз. Замерено при 360 px с открытой дверью в
     админку: между именем и щитом пустует 138 px. */
  .ynav-login, .ynav-admin{ min-width:var(--cel-min, 48px); justify-content:center; }
  .ynav-admin{ padding:0; gap:0; }
  .ynav-login:not([data-voshel="1"]){ padding:6px 10px; height:auto; min-height:40px; }
  .ynav-login[data-voshel="1"]{ padding:6px; }
}

/* ── Узкие телефоны (≤430px) ──
   Пять разделов обязаны влезть без горизонтальной прокрутки: ровно это
   стережёт проба «последний раздел свитчера влезает в экран». */
@media (max-width:430px){
  .ynav{ gap:4px; padding-inline:6px; }
  .ynav.ynav--hub{ padding-inline:max(var(--sp-4), var(--pole-polosy, 16px)); }
  .ynav-mark{ width:22px; height:22px; }
  .ynav-login:not([data-voshel="1"]){ padding:6px 8px; }
  .ynav-login[data-voshel="1"] .ynav-login-av{
    /* На телефоне кружок вошедшего НЕ мельчает: это единственная дверь в
       профиль. Гость видит текст, не кружок. */
    width:36px; height:36px; }
}

/* ── Дверь в админку в ряду шапки ──────────────────────────────────────
   ЗДЕСЬ БОЛЬШЕ НЕ ТЕСНО, И ПОДЖАТИЕ СНЯТО. Правило писалось, когда четыре
   раздела стояли в этом же ряду: дверь отнимала у их полосы 36 px, на
   360 px контейнер ужимался с 228 до 204, и «Разбор» уезжал в скролл.
   Тогда ряд поджимали по мелочам — поля бара, сама дверь 32 вместо 36,
   кружок входа 18 вместо 20, поля кнопки входа 5 вместо 6.
   Разделы с тех пор ушли вниз отдельной панелью, а поджатие осталось и
   теперь только отнимает у пальца цель: замерено при 360 px с открытой
   дверью — щит 32×36, «Войти» 30×36, и при этом между именем центра и
   щитом пустует 138 px. Ужимать нечего и незачем.
   Зазор и поля ряда оставлены: они общие для узкой шапки и цели не
   трогают. Метку ynav--admin по-прежнему ставит core/site-nav.js. */
@media (max-width:430px){
  .ynav--admin{ gap:3px; padding-inline:4px; }
  /* Хаб с ярлыком раздела не ужимаем вместе с админкой. */
  .ynav.ynav--hub.ynav--admin{
    padding-inline:max(var(--sp-4), var(--pole-polosy, 16px));
  }
}

/* ── Цели касания: правило 48 ─────────────────────────────────────────
   Пункт свитчера был 22–26 dp высотой, кнопка темы 30–36, «Войти» 36 —
   это ниже минимума Android (48×48). Настоящую высоту им дать нельзя: у
   «Войти» и кнопки темы видимая рамка, а у активного раздела — заливка;
   пилюля 48 читалась бы как кнопка другого веса. Поэтому цель добирает
   прозрачный слой поверх: вид шапки прежний, палец попадает в 48.
   Полосе разделов при этом нужен свой min-height — у неё включён
   горизонтальный скролл, а значит и вертикальное обрезание, и слой выше
   пункта она бы срезала. Шапка от этого не подросла: у неё min-height 56,
   а поля ужаты с 9 до 4 — те же 56.
   Ширину слоя не растим: пять разделов впритык влезают на 375 px, и вылет
   за пункт добавил бы ложную горизонтальную прокрутку. */
.ynav-links{ min-height:var(--cel-min, 48px); }
.ynav-item::before, .ynav-login::before, .ynav-admin::before,
.ynav-home::before{
  content:''; position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); height:var(--cel-min, 48px);
}
.ynav-login, .ynav-admin, .ynav-home{ position:relative; }
/* ЗНАК «ДОМОЙ» БЫЛ 22×22 — И ЭТО ВСЯ ДВЕРЬ НА ГЛАВНУЮ НА ТЕЛЕФОНЕ: имя
   центра ниже 640 спрятано, нажимать больше не во что. В списке слоёв выше
   его просто забыли. Слой не шире самого знака (left:0;right:0), чтобы не
   наехать на первую вкладку и не создать ложную прокрутку вбок. */

/* Липкий вариант — для статических страниц */
.ynav--sticky{ position:sticky; top:0; z-index:50; }

/* Старые ad-hoc хедеры статических страниц скрыты — их заменяет единый .ynav */
.s-header, .l-header, .rt-back{ display:none !important; }

/* Игра (duel): отступ лого от свитчера в её собственном хедере .dp-header */
.dp-header-home{ margin-right:10px; }
.dp-header .ynav-item{ line-height:1; }

/* Разбор на телефоне: разделы стоят нижней панелью, как везде.
   Здесь стояло @media (max-width:768px){ .hdr-switch{display:none} } —
   и панели у Разбора не было вовсе. Свитчер несёт класс .ynav-links,
   значит мобильные правила выше (fixed bottom, значки) годятся ему без
   единой своей строки; ряд шапки от этого не разъезжается — полоса из
   него уходит. Остаётся одно: в ряду шапки Разбора она стоит после имени
   и до кнопок, поэтому на телефоне ей не нужен и правый отступ. */
@media (max-width:799px){
  .hdr .ynav-links.hdr-switch{ margin-right:0 !important; }
  /* Ряд шапки Разбора: ярлык «Разбор» + вход (бургер и «Викторина» сняты).
     Имени позволяем ужиматься — flex-shrink:0 приходит инлайном из React. */
  .hdr .ynav-home{ flex-shrink:1 !important; min-width:0; }
  .hdr .ynav-imena{ min-width:0; }
  .hdr .ynav-name, .hdr .ynav-pod{ overflow:hidden; text-overflow:ellipsis; }
}

@media (max-width:640px){ .hdr-title-mob{ display:none !important; } }

/* ЗНАК ЦЕНТРА ЗОЛОТОЙ В ОБЕИХ ТЕМАХ. В тёмной теме Разбора старое правило
   красит ВСЁ внутри логотипа в белый (vk-tech-tokens.css:
   `body.theme-vk-dark .hdr > a:first-child *`) — оно писалось, когда там
   стояла буква ✦, и про знак не знает. Проверено на живой странице: знак
   выходил #FEFEFE вместо #FABC3E.
   ДВЕ ТОНКОСТИ, ОБЕ СТОИЛИ ПРОБ.
   1. Красить надо и сам знак, И ВСЁ ВНУТРИ НЕГО: лучи нарисованы
      stroke="currentColor", а currentColor берётся у ТОГО ЖЕ узла — катч-олл
      добирался до каждой линии.
   2. Вес катч-олла (0,3,2): `:first-child` считается за класс, `body` и `a` —
      за элементы. Поэтому имя знака здесь повторено дважды: это даёт
      четвёртый класс и честную победу по весу, а не по порядку файлов. */
.ynav .ynav-home .ynav-mark, .ynav .ynav-home .ynav-mark *,
.hdr .ynav-home .ynav-mark.ynav-mark, .hdr .ynav-home .ynav-mark.ynav-mark *{
  color:var(--tertiary) !important; }