/* ── 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):not(:disabled) {
  color: var(--text-primary);
}

/* Unavailable pill (depends_on subset, KWBI-226): native disabled attribute */
.segmented-toggle__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 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;
}

/* ── Button toggle: per-option icons (KWBI-226) ───────────────────── */
/* Buttons that carry an icon align the image and optional text inline. */
.segmented-toggle__btn--has-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.segmented-toggle__btn-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* When only the icon is shown, tighten the horizontal padding so the
   button stays square-ish around the glyph. */
.segmented-toggle__btn--has-icon:not(:has(.segmented-toggle__btn-text)) {
  padding-left: 8px;
  padding-right: 8px;
}

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