.tabs {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.row {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  padding: var(--panel-padding) var(--panel-padding) 0;
}

/* Ряд не переносится и не растягивает панель: лишние вкладки уезжают за край, как во Fleet. */
.list {
  display: flex;
  gap: var(--space-1);
  min-width: 0;
  overflow: hidden;
}

.tab {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  height: var(--panel-header-height);
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
}

.tab[data-hovered] {
  color: var(--color-text);
}

.tab[data-selected] {
  background-color: var(--color-raised);
  color: var(--color-text);
}

/* Вкладка открытого документа у Fleet синеватая, а не серая (замер §5.1). */
.row[data-look='document'] .tab[data-selected] {
  background-color: var(--color-tab-active);
}

.tab[data-focus-visible] {
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
}

.tab .title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Крестик проявляется у выбранной вкладки и под курсором: во Fleet он не висит на всех сразу. */
.close {
  display: flex;
  align-items: center;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  visibility: hidden;
  cursor: pointer;
}

.close:hover {
  color: var(--color-text);
}

.tab[data-selected] .close,
.tab[data-hovered] .close {
  visibility: visible;
}

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;

  /* Скролл живёт внутри содержимого вкладки: длинные списки виртуализованы и скроллятся сами. */
  overflow: hidden;
  padding: var(--space-1) var(--panel-padding) var(--panel-padding);
}