/* Вкладки и сегмент-переключатели: .seg > .seg-btn (кнопки role="tab" и ссылки a.seg-btn с aria-current).
   Выбранная вкладка отличается не только цветом: заливка поверхности, обводка и вес шрифта. */
.seg {
  --seg-bg: var(--surface-2); --seg-btn-fg: var(--fg-muted); --seg-btn-fg-hover: var(--fg);
  --seg-active-bg: var(--surface-1); --seg-active-fg: var(--fg); --seg-active-border: var(--border-raised);
  --seg-active-shadow: var(--shadow); --seg-h: var(--control-h-sm);
  display: flex; gap: 2px; padding: 2px; background: var(--seg-bg); border-radius: var(--r); flex: none; max-width: 100%;
}
.seg-btn { flex: 1; min-height: var(--seg-h); padding: 0 var(--s2); white-space: nowrap; border: var(--border-w) solid transparent;
  border-radius: var(--r-sm); background: transparent; color: var(--seg-btn-fg); font: var(--fw-medium) var(--fs-sm) var(--font);
  cursor: pointer; text-align: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg-btn:hover { color: var(--seg-btn-fg-hover); }
.seg-btn[aria-selected="true"], a.seg-btn[aria-current="page"] { background: var(--seg-active-bg); color: var(--seg-active-fg);
  border-color: var(--seg-active-border); box-shadow: var(--seg-active-shadow); font-weight: var(--fw-semibold); }
@media (max-width: 640px) {   /* длинные вкладки не раздвигают страницу: полоса прокручивается внутри себя */
  .seg { overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn:focus-visible { outline-offset: calc(var(--focus-w) * -1); }
}
a.seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1h); text-decoration: none; }