/* --- Segmented control -------------------------------------------------- */
/* Two or three mutually exclusive choices, submitted immediately. Pill-shaped
   like every other button; the pressed one is raised out of the sunk track. */
.segment {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface-sunk); border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
.segment__btn {
  font: 600 var(--t-12)/1 var(--font-ui);
  min-height: var(--ctl-sm); padding: 0 var(--s-5) 1px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-muted);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), color var(--dur-fast);
}
@media (hover: hover) {
  .segment__btn:hover { background: var(--c-mint-tint2); color: var(--ink); }
}
.segment__btn:active { background: var(--accent-line); color: var(--ink); }
.segment__btn[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-xs);
}