/* ==========================================================================
   Pair switch — reusable two-option segmented pill toggle (see
   js/pair-switch.js). Same on/off track-with-sliding-thumb look as
   .journey__audience (journey.css), pulled out as its own generic
   component so any future "show A or B" toggle can reuse it instead of
   re-deriving the same track/thumb/option rules.
   Blocks: .pair-switch, .pair-switch-panel
   ========================================================================== */

.pair-switch {
  --pair-switch-index: 0;
  position: relative;
  display: inline-flex;
  width: 320px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-100);
  border: 1px solid var(--glass-border);
}

.pair-switch__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  /* Index (0 or 1) rather than the option's own value drives the slide, so
     this rule works regardless of what the two data-pair-option values are
     named at each call site. */
  transform: translateX(calc(var(--pair-switch-index) * 100%));
  transition: transform 300ms var(--ease-out);
}

.pair-switch__option {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-base);
}

.pair-switch__option:hover {
  color: var(--color-text-primary);
}

.pair-switch__option.is-active {
  color: var(--color-carbon-black);
}

.pair-switch-panel {
  display: none;
}

.pair-switch-panel.is-active {
  display: block;
}