/* SectionNav — horizontal nav with 2px underline on active.
 * Generic layout primitive. Consumers pass items via the VC initializer;
 * this file only styles the markup. */

.cp-section-nav {
  display: flex;
  border-bottom: 1px solid var(--color-divider);
}

.cp-section-nav__list {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-section-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the nav's own bottom border */
}

.cp-section-nav__link:hover {
  color: var(--color-text-primary);
}

.cp-section-nav__link--active {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold, 600);
  border-bottom-color: var(--color-text-primary);
}

.cp-section-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  height: 1rem;
  font-family: var(--font-family-mono);
  font-size: 0.625rem; /* 10px */
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  letter-spacing: 0.3px;
  color: var(--color-chrome-text, var(--color-background));
  background: var(--color-chrome-bg, var(--color-text-primary));
  border-radius: var(--radius-sm, 2px);
}