/* Segmented Control
   Every selector MUST start with .byq-gem--segmented-control-01 so this gem can sit on a
   page next to other gems (and inside a user's site) with zero collisions.
   Use brand tokens (var(--byq-*)) instead of raw hex for any core UI. */

/* ── Root ─────────────────────────────────────────────────────────────────── */

.byq-gem--segmented-control-01 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--byq-font-sans);
  color: var(--byq-fg);
}

/* ── Track (the pill container) ───────────────────────────────────────────── */

.byq-gem--segmented-control-01__track {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 0;
  margin: 0;
  padding: 4px;
  background: var(--byq-card);
  border: 1px solid var(--byq-depth);
  border-radius: 999px;
  gap: 0;
}

.byq-gem--segmented-control-01__legend {
  /* visually hidden but keeps fieldset semantic */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Sliding indicator ────────────────────────────────────────────────────── */

.byq-gem--segmented-control-01__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0; /* set by JS */
  width: 0;  /* set by JS */
  border-radius: 999px;
  background: var(--byq-accent-lime);
  /* transition drives the stretch-and-settle effect; JS toggles it off for instant moves */
  transition:
    left 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.3),
    width 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  pointer-events: none;
  z-index: 0;
}

/* ── Radio inputs — hidden but keyboard-reachable ─────────────────────────── */

.byq-gem--segmented-control-01__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */

.byq-gem--segmented-control-01__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: color-mix(in srgb, var(--byq-fg) 50%, transparent);
  cursor: pointer;
  user-select: none;
  transition: color 0.22s ease;
}

/* Selected label */
.byq-gem--segmented-control-01__radio:checked
  + .byq-gem--segmented-control-01__label {
  color: var(--byq-on-accent, #000);
}

/* Focus-visible ring on the label that follows a focused radio */
.byq-gem--segmented-control-01__radio:focus-visible
  + .byq-gem--segmented-control-01__label {
  outline: 2px solid var(--byq-accent-lime);
  outline-offset: 2px;
}

/* Hover — only on unselected */
.byq-gem--segmented-control-01__label:hover {
  color: var(--byq-fg);
}

/* ── Reduced-motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .byq-gem--segmented-control-01__indicator {
    transition: none;
  }
  .byq-gem--segmented-control-01__label {
    transition: none;
  }
}