.dcui-segmented {
  position: relative;
  display: grid;
  /* `minmax(0, 1fr)` (not bare `1fr`, whose implicit `min-width: auto` lets a
     long label force unequal columns) keeps every cell exactly equal, so the
     formula-sized thumb lands on each segment whatever the label lengths. */
  grid-template-columns: repeat(var(--seg-count), minmax(0, 1fr));
  gap: var(--dc-space-1);
  padding: var(--dc-space-1);
  border: var(--dc-border-line);
  border-radius: var(--dc-radius-sm);
  background: var(--dc-bg);
}
/* The highlight box: one cell-wide thumb pinned inside the padding box. The gap
   between cells (and the padding around them) is one --dc-space-1; its width is a
   single grid cell — (track − the N+1 gaps) divided by N — so translating by its
   own width plus one gap, times the active index, lands it exactly over any
   segment. The transform transition does the linear lerp across the list. */
.dcui-segmented-thumb {
  position: absolute;
  top: var(--dc-space-1);
  bottom: var(--dc-space-1);
  left: var(--dc-space-1);
  width: calc(
    (100% - (var(--seg-count) + 1) * var(--dc-space-1)) /
    var(--seg-count)
  );
  transform: translateX(calc((100% + var(--dc-space-1)) * var(--seg-index)));
  border-radius: calc(var(--dc-radius-sm) - 1px);
  background: var(--dc-brand);
  transition: transform var(--dc-transition-base);
  pointer-events: none;
}
.dcui-segmented-seg {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  border-radius: calc(var(--dc-radius-sm) - 1px);
  padding: var(--dc-space-2) var(--dc-space-4);
  font-family: var(--dc-font-mono);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-medium);
  letter-spacing: var(--dc-tracking-label);
  text-transform: uppercase;
  color: var(--dc-fg-muted);
  background: transparent;
  cursor: pointer;
  transition: color var(--dc-transition-base);
  /* Stay within the equal cell: a label too long for its share is clipped with
     an ellipsis rather than overflowing the control's border. */
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Only the inactive segments take a hover fill — the active one sits over the
   thumb, which already carries the brand background. */
.dcui-segmented-seg:not([data-active="true"]):hover {
  color: var(--dc-fg);
  background: var(--dc-hover);
}
.dcui-segmented-seg[data-active="true"] {
  color: var(--dc-brand-fg);
}
@media (prefers-reduced-motion: reduce) {
  .dcui-segmented-thumb {
    transition: none;
  }
}