/* ── РАЗДЕЛЫ БАЗЫ ЗНАНИЙ: верхнеуровневый таб-бар навигации между страницами-разделами
   хаба (Статьи · Каталог принтеров · Энциклопедия · Вопросы-ответы). Общий источник для
   /blog/, /printers/, /wiki/, /blog/voprosy/ — линкуется ПОСЛЕ
   article.css (оттуда токены). Активный таб = у своего <a> class "hs-tab is-active" +
   aria-current="page". Токены с fallback → блок не разваливается без своих переменных.
   Автор паттерна: ux-pro. Один файл вместо 4 копий (устранён дрейф). */
.hub-sections{ max-width:var(--maxw, 1120px); margin:1.5rem auto .2rem; padding:0 1.5rem; }
.hs-bar{
  display:inline-flex; max-width:100%; gap:5px; padding:6px; vertical-align:top;
  background:var(--accent-soft, rgba(124,92,255,.10));
  border:1px solid var(--line, rgba(20,20,20,.08));
  border-radius:calc(var(--radius-sm, 14px) + 5px);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.hs-bar::-webkit-scrollbar{ display:none; }
.hs-tab{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.55rem;
  min-height:48px; padding:.5rem .95rem; white-space:nowrap; text-decoration:none;
  font-family:var(--font,'Inter',system-ui,sans-serif);
  font-size:.95rem; font-weight:700; line-height:1.1; letter-spacing:-.01em;
  color:var(--mut,#5B5B66); background:transparent; border:0;
  border-radius:var(--radius-sm,14px); cursor:pointer;
  transition:background .2s var(--ease,ease), color .2s var(--ease,ease), box-shadow .2s var(--ease,ease);
}
.hs-tab:hover{ color:var(--ink,#141414); background:var(--surface,#fff); box-shadow:var(--shadow,0 8px 30px rgba(20,20,20,.06)); }
.hs-tab:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--accent-ring,rgba(124,92,255,.45)); }
.hs-tab .hs-ic{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:rgba(124,92,255,.12); color:var(--violet,#7C5CFF); transition:.2s var(--ease,ease); }
.hs-tab .hs-ic svg{ width:18px; height:18px; }
.hs-tab .hs-n{ font-size:.72rem; font-weight:700; padding:.12em .5em; border-radius:999px;
  background:rgba(20,20,20,.06); color:var(--mut,#5B5B66); }
/* активная = текущая страница (aria-current="page") */
.hs-tab.is-active{ color:#fff;
  background:var(--grad-hero, linear-gradient(135deg,#FF5E7E 0%,#7C5CFF 100%));
  box-shadow:0 8px 20px -8px rgba(124,92,255,.75); }
.hs-tab.is-active .hs-ic{ background:rgba(255,255,255,.22); color:#fff; }
.hs-tab.is-active .hs-n{ background:rgba(255,255,255,.26); color:#fff; }
.hs-tab.is-active:hover{ color:#fff; }

@media(max-width:760px){
  .hub-sections{ padding:0 1rem; margin-top:1.1rem; }
  .hs-bar{ display:flex; width:100%; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .hs-tab{ scroll-snap-align:start; }
}