/*
 * design-system/components/tabs.css
 * Editorial Calm — Tabs. ТЗ 4.11.
 *
 * Унифицируют структуру всех дашбордов. ≤ 5 вкладок верхнего уровня.
 * Активная вкладка — нижняя линия 2px ink с -1px margin (overlay рамки).
 *
 * Использование:
 *   <div class="ed-tabs" role="tablist" aria-label="Разделы города">
 *     <button class="ed-tab is-active" role="tab" aria-selected="true">Обзор</button>
 *     <button class="ed-tab" role="tab" aria-selected="false">Исследования</button>
 *     <button class="ed-tab" role="tab">Новости</button>
 *     <button class="ed-tab" role="tab">База знаний</button>
 *   </div>
 */

.ed-tabs {
  display: flex;
  gap: var(--s-5, 24px);
  height: 44px;
  border-bottom: 1px solid var(--rule, var(--border, #D9D3C5));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* §12 «длинные названия»: внутри flex-контейнера (шапка/тулбар) группа
     вкладок сжимается и скроллится сама, а не распирает родителя. */
  min-width: 0;
  flex-shrink: 1;
}

.ed-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 var(--s-1, 4px);
  /* §12 стресс-сценарий «длинные названия»: вкладка с длинным лейблом не
     должна распирать тулбар за viewport — clamp + ellipsis. */
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: -1px;  /* перекрываем border-bottom родителя */
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3, var(--text-muted, #6b7280));
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--motion-fast, .15s) var(--ease, ease),
              border-color var(--motion-fast, .15s) var(--ease, ease);
}

.ed-tab:hover { color: var(--ink, var(--text-primary, #1F2937)); }

.ed-tab:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus, 0 0 0 2px var(--primary, #1F3D2B));
  border-radius: var(--r-2, 6px);
}

.ed-tab.is-active,
.ed-tab.active,
.ed-tab[aria-selected="true"] {
  color: var(--ink, var(--text-primary, #1F2937));
  border-bottom-color: var(--ink, var(--text-primary, #1F2937));
}

/* Бэйджик-счётчик внутри таба */
.ed-tab__count {
  margin-left: var(--s-2, 8px);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3, var(--text-muted, #6b7280));
  background: var(--paper-2, var(--bg-secondary, #F5F4F0));
  border-radius: var(--r-1, 4px);
  font-feature-settings: "tnum";
}
.ed-tab.is-active .ed-tab__count,
.ed-tab.active .ed-tab__count {
  color: var(--ink, var(--text-primary, #1F2937));
  background: var(--paper-3, var(--bg-tertiary, #ECEAE4));
}

/* Компактный вариант для под-табов и плотных тулбаров (§6.7):
   <div class="ed-tabs ed-tabs--sm" role="tablist"> */
.ed-tabs.ed-tabs--sm { height: 36px; gap: var(--s-4, 16px); }
.ed-tabs--sm .ed-tab { height: 36px; font-size: 13px; }