/* Segmented control: a few mutually exclusive options (filters, views) as one pill track with the
   selected option filled. Built on the design tokens in base.css.

   <nav class="portal-segmented" aria-label="Deal stages">
     <a class="portal-segmented__item" href="…" aria-current="page">Mandate <span class="portal-segmented__count">6</span></a>
     <a class="portal-segmented__item is-empty" href="…">Parked <span class="portal-segmented__count">0</span></a>
   </nav>

   Options are links or buttons; mark the selected one with aria-current="page" (links) or
   aria-pressed="true" (buttons). `.active` is also honoured for existing scripts.
   Modifiers: --sm (secondary toggles), --scroll (one line that scrolls sideways when narrow). */

.portal-segmented {
  --segmented-track: rgba(44, 70, 104, 0.06);
  --segmented-hover: rgba(44, 70, 104, 0.08);
  --segmented-fill: var(--color-midnight, #2c4668);
  --segmented-on-fill: #ffffff;
  --segmented-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  height: var(--segmented-height);
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--segmented-track);
}

.portal-segmented--sm {
  --segmented-height: 30px;
}

.portal-segmented--scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.portal-segmented--scroll::-webkit-scrollbar {
  display: none;
}

.portal-segmented__item {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 100%;
  padding: 0 var(--space-3, 12px);
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-medium, 500);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.portal-segmented--sm .portal-segmented__item {
  padding: 0 10px;
}

.portal-segmented__item:hover {
  background: var(--segmented-hover);
  color: var(--color-text);
}

.portal-segmented__item:focus-visible {
  outline: none;
  box-shadow: var(--nav-focus-ring, 0 0 0 2px rgba(200, 164, 77, 0.45));
}

.portal-segmented__item[aria-current="page"],
.portal-segmented__item[aria-pressed="true"],
.portal-segmented__item.active {
  background: var(--segmented-fill);
  color: var(--segmented-on-fill);
  font-weight: var(--weight-semibold, 600);
}

.portal-segmented__count {
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-medium, 500);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #6d665c);
}

.portal-segmented__item[aria-current="page"] .portal-segmented__count,
.portal-segmented__item[aria-pressed="true"] .portal-segmented__count,
.portal-segmented__item.active .portal-segmented__count {
  color: inherit;
  opacity: 0.72;
}

/* An option with nothing in it stays clickable but recedes. */
.portal-segmented__item.is-empty:not(.active):not([aria-current="page"]) {
  color: var(--color-text-muted, #6d665c);
}

body.theme-dark .portal-segmented {
  --segmented-track: rgba(255, 255, 255, 0.06);
  --segmented-hover: rgba(255, 255, 255, 0.08);
  --segmented-fill: #e6edf6;
  --segmented-on-fill: #14202e;
}