/* ── Segmented Toggle (Granularity / Metric) ─────────────────── */
/* Design spec: inline label + compact pill group                 */

.segmented-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Uppercase label: "GRANULARITY", "METRIC" */
.segmented-toggle__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Pill container: rounded border, subtle bg */
.segmented-toggle__pills {
  display: flex;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  padding: 2px;
  gap: 0;
}

/* Individual pill button */
.segmented-toggle__btn {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body, inherit);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.segmented-toggle__btn:hover:not(.segmented-toggle__btn--active):not(.segmented-toggle__btn--disabled) {
  color: var(--text-primary);
}

/* Active pill: yellow accent */
.segmented-toggle__btn--active {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-sm);
}

/* Disabled pill */
.segmented-toggle__btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Legacy class compatibility (callbacks may reference old names) ── */
.granularity-toggle__wrapper { display: contents; }
.granularity-toggle { display: contents; }