/* Полоса вкладок разделов - ОДНА на весь сайт.
   Раньше правила лежали в vit-main.css и копией внутри animate.html; копия отстала,
   и в редакторе меню вело себя иначе: пять подписей не помещались, полоса ехала
   вбок, активный пункт был вне экрана. Теперь источник один - этот файл. */
.type-tabs-row{display:flex;gap:4px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.type-tabs-row::-webkit-scrollbar{display:none}
.ttab{text-decoration:none;flex-shrink:0;display:flex;align-items:center;gap:8px;
  background:none;border:none;color:var(--muted);font-size:14.5px;font-weight:700;
  padding:12px 16px;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .15s}
.ttab svg{width:17px;height:17px}
.ttab img.ic{width:21px;height:21px;object-fit:contain;flex-shrink:0}
.ttab:hover{color:var(--text)}
.ttab.on{color:var(--text);border-color:var(--accent)}
.ttab .cnt{font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-2);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px}
.ttab.on .cnt{color:#ffc078;border-color:rgba(255,120,2,.4)}

@media(max-width:760px){
  /* В 360px влезала одна «Главная», остальные уезжали за край без всякого признака
     прокрутки - ужимаем, снимаем счётчики и растягиваем по ширине. */
  .head-tabs{padding:0 6px;gap:0}
  .type-tabs-row{gap:0;width:100%;justify-content:space-between;overflow-x:visible}
  .ttab{font-size:13px;padding:11px 8px;gap:6px}
  .ttab .cnt{display:none}
  .ttab img.ic{width:19px;height:19px}
}
@media(max-width:620px){
  /* Пять подписей в 360px не помещаются ни при каком шрифте: оставляем только
     иконки, подпись показываем у активной вкладки. Прокрутка вбок тут не годится -
     человек просто не догадывается, что там что-то есть. */
  .type-tabs-row .ttab{font-size:0;gap:0;padding:11px 4px;flex:1 1 0;justify-content:center}
  .type-tabs-row .ttab img.ic{width:23px;height:23px}
  .type-tabs-row .ttab.on{font-size:13px;gap:7px;padding:11px 10px;flex:0 0 auto}
}


/* ---------- логотип шапки - ОДИН на весь сайт ----------
   Раньше правила жили в vit-main.css и копией в animate.html, и копии уже
   разошлись (базовая высота 30 px против 28). */
.logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none}
.logo img{height:30px;width:auto;display:block}

@media(max-width:460px){
  /* У ЗАЛОГИНЕННОГО в шапке ещё «Создать», баланс и аватар - надпись логотипа
     перестаёт помещаться. В PNG 426x80 значок занимает первые 88px, поэтому
     cover + object-position:left, второй файл не нужен. */
  .head .logo img{width:27px;object-fit:cover;object-position:left center}
  /* ГОСТЮ надпись помещается с большим запасом: свободно 182 px на экране 390 и
     139 px на 320 при ширине логотипа ~91 px. Имя сайта в шапке важнее лишних
     двадцати пикселей - первое, что видит новый человек, не должно быть
     безымянным значком. */
  html.sw-guest .head .logo img{width:auto;height:24px;object-fit:contain}
}
@media(max-width:380px){
  .head .logo img{width:24px;height:21px}
  html.sw-guest .head .logo img{width:auto;height:22px}
}
@media(max-width:340px){
  .head .logo img{width:21px;height:18px}
  html.sw-guest .head .logo img{width:auto;height:20px}
}