/* ============================================================
   Marketplace-Assist — MP-switcher (стили)
   Сегментированный переключатель маркетплейсов.

   КОНТРАКТ
   --------
   — ТОЛЬКО токены из theme.css (никаких hex/rgba, никаких бренд-цветов МП,
     никаких эмодзи/логотипов МП). Активный сегмент = --accent.
   — Светлая/тёмная темы наследуются автоматически через токены.
   — transition ТОЛЬКО на конкретных свойствах, никогда transition: all.

   СЕМЕЙСТВО КОНТРОЛОВ (важно для консистентности)
   -----------------------------------------------
   Дефолтный скин = «Variant A» — намеренно повторяет существующий
   сегмент-контрол аналитики «Акт реализации / Начисление денег»
   (`.lens-seg-ctrl` / `.lens-btn` в src/analytics/styles.css):
     • контейнер  border-radius 6px + overflow:hidden, БЕЗ padding;
     • сегменты впритык, разделены `border-right: 1px solid var(--border)`;
     • padding 5px 14px, font-size 12px, font-weight 600;
     • hover → background var(--surface2), color var(--text);
     • active → background var(--accent), color var(--on-accent).
   Единственное расхождение с легаси — переходы заданы по конкретным
   свойствам (легаси `.lens-btn` использует transition:all — анти-паттерн,
   намеренно НЕ повторяем).

   СКИН-АБЕЛЬНОСТЬ
   --------------
   Механизм (JS) не привязан к скину. Облик задаётся CSS-классом-скином
   на контейнере. Сейчас определён `.mp-switcher--variant-a` (дефолт, его
   навешивает JS). ui-architect может добавить другие скины (Variant B/C)
   отдельными классами, не трогая JS, и вынести их на доску решений.
   Базовый класс `.mp-switcher` несёт только раскладку (inline-flex),
   нейтральную к скину.
   ============================================================ */

/* ── Базовая раскладка (нейтральна к скину) ── */
.mp-switcher {
  display: inline-flex;
  align-items: stretch;
  /* анти-выделение текста при быстрых кликах по сегментам */
  user-select: none;
  -webkit-user-select: none;
}

.mp-switcher__seg {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

/* ============================================================
   VARIANT A — совпадает с тумблером линз аналитики (.lens-seg-ctrl)
   ============================================================ */
.mp-switcher--variant-a {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;                /* клипуем углы сегментов под радиус контейнера */
  flex-shrink: 0;
}

.mp-switcher--variant-a .mp-switcher__seg {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text2);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);   /* разделитель между сегментами */
  /* ТОЛЬКО конкретные свойства — никогда transition: all */
  transition: background 0.15s ease, color 0.15s ease;
}

.mp-switcher--variant-a .mp-switcher__seg:last-child {
  border-right: none;
}

/* Hover у подключённого неактивного — как у легаси-линзы (surface2). */
.mp-switcher--variant-a .mp-switcher__seg:not(.is-active):not(.is-disabled):hover {
  background: var(--surface2);
  color: var(--text);
}

/* Фокус с клавиатуры — видимый контур токеном акцента (a11y; легаси-линза его не имела). */
.mp-switcher--variant-a .mp-switcher__seg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;            /* внутрь — иначе обрежется overflow:hidden контейнера */
}

/* Активный сегмент — акцентный фон, текст поверх акцента. Только --accent. */
.mp-switcher--variant-a .mp-switcher__seg.is-active {
  background: var(--accent);
  color: var(--on-accent);
  cursor: default;
}

/* Неподключённый МП: приглушён, курсор-подсказка, без hover-подсветки. */
.mp-switcher--variant-a .mp-switcher__seg.is-disabled {
  color: var(--text2);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.45;
}

/* Уважение к «меньше движения» — гасим переходы. */
@media (prefers-reduced-motion: reduce) {
  .mp-switcher--variant-a .mp-switcher__seg {
    transition: none;
  }
}