/* Tabs: pills as a calm segmented control, tabs as an underline bar. */

.ui-tabs .nav-pills {
  --bs-nav-pills-bg: light-dark(#eef3f1, #0f1a20);
  --bs-nav-pills-padding: 0.3rem;
  --bs-nav-pills-link-active-bg: var(--color-surface);
  --bs-nav-pills-link-active-color: var(--color-ink);
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.45rem;
  --bs-nav-link-hover-bg: light-dark(rgb(255 255 255 / 60%), rgb(255 255 255 / 6%));
  /* Wrapping pills must stay a tidy block instead of a stretched capsule. */
  --bs-nav-pills-border-radius: var(--radius-lg);
  --bs-nav-pills-link-border-radius: var(--radius-md);
  max-width: 100%;
}

/* Nested tabs span the full content width; segments grow evenly and wrap on narrow screens. */

.ui-tabs .nav-tabs,
.ui-tabs .nav-pills {
  display: flex;
  width: 100%;
}

.ui-tabs .nav-pills .nav-link {
  flex: 1 1 auto;
  justify-content: center;
  font-weight: 500;
  white-space: nowrap;
}

.ui-tabs .nav-pills .nav-link.active {
  box-shadow:
    0 1px 2px light-dark(rgb(23 46 56 / 8%), rgb(0 0 0 / 30%)),
    0 2px 8px light-dark(rgb(23 46 56 / 6%), rgb(0 0 0 / 25%));
}

.ui-tabs .nav-tabs {
  --bs-nav-link-padding-x: 0.25rem;
  --bs-nav-link-padding-y: 0.6rem;
  --bs-nav-link-hover-bg: transparent;
  --bs-nav-link-active-bg: transparent;
  column-gap: 1.25rem;
}

.ui-tabs .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
}

.ui-tabs .nav-tabs .nav-link.active {
  color: var(--color-brand-text);
  border-bottom-color: var(--color-brand);
}

.ui-tabs .list-group {
  --bs-list-group-border-color: var(--surface-border);
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
}