/*
 * Переключатель публичных режимов «Карта | Маркетплейс» — единый
 * компонент для карты и каталога (design handoff v2, task 01).
 * Разметка: templates/_public_mode_switcher.html. Стили scoped под
 * .mode-switch, цвета — только семантические токены (variables.css).
 */
.mode-switch {
  /* Своя форма, объявленная НА КОМПОНЕНТЕ. Раньше здесь стоял общий
     `var(--radius-full)`, и получалось два разных контрола из одного файла:
     в каталоге витрина заново объявляет себе `--radius-*` внутри `.dsc-page`
     (решение владельца 09.09, вариант А) и переключатель выходил таблеткой,
     а на карте те же токены зануляет Калька (kalka-bridge.css → `--gd-radius`
     = 0) — и он становился квадратным. Правило при этом применялось в обоих
     случаях, отличалось ЗНАЧЕНИЕ токена, поэтому grep по листу был бы зелёным
     при квадратных кнопках (замер — tests/discovery/
     test_mode_switch_keeps_its_shape.py, вычисленный radius на карте = 0px).

     Объявление живёт прямо в `.mode-switch`, а не в `:root`: в `:root` его
     точно так же перебила бы Калька — побеждает не порядок файлов, а
     близость объявления к элементу. Число, а не токен, здесь намеренно:
     компонент публичный и обязан выглядеть одинаково в любой оболочке. */
  --mode-switch-radius: 9999px;

  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--mode-switch-radius);
  overflow: hidden;
  background: var(--bg-secondary);
  font-size: 0.875rem;
  white-space: nowrap;
}
.mode-switch__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
/* Калька обнуляет скругления не только через токены: kalka-components.css
   ставит `border-radius: 0 !important` селектором веса (0,3,0) на `*`
   (исключены карты и спиннеры). Собственного значения выше поэтому мало —
   замер в Chromium давал 0px и на карте, И в каталоге, хотя витрина уже
   отбивала это правило для своих `.dsc-*` (discovery.css). Список там —
   перечисление классов, и общий компонент в него просто не попал: чинили
   экземпляры, а не класс (#31.5).

   Отбиваем ТЕМ ЖЕ приёмом, каким Калька делает свои исключения: добор до
   (0,4,0) тремя `:not(.gd-void)` — класса `.gd-void` в проекте нет, он
   существует только как гиря. Правило живёт здесь, а не в discovery.css,
   потому что на карте discovery.css не подключается, а переключатель там
   тот же самый. Доказательство — не наличие строки, а вычисленный радиус
   на обоих каскадах: tests/discovery/test_mode_switch_keeps_its_shape.py. */
.mode-switch:not(.gd-void):not(.gd-void):not(.gd-void) {
  border-radius: var(--mode-switch-radius) !important;
}
.mode-switch__link[aria-current="page"] {
  background: var(--primary);
  /* На карте тема editorial не объявляет --white — текст активной вкладки
     получался тёмным на тёмно-зелёном (замер в Chromium, task 03).
     Инверсный текст — канонический токен, --white только как запас. */
  color: var(--text-inverse, var(--white));
}
.mode-switch__link:hover:not([aria-current="page"]) {
  background: var(--bg-tertiary, var(--bg-secondary));
}
.mode-switch__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Карта: в шапке рядом с заголовком. На телефоне (≤768px) поиск города не
   должен делить строку с двумя вкладками (design task 03 / ТЗ §16.1): тот же
   DOM-экземпляр становится ВТОРЫМ рядом шапки на всю ширину, а шапка растёт
   на его высоту только когда переключатель есть (флаг Discovery) — иначе
   остаётся 54px. Браузер без :has() получит переключатель поверх верхней
   кромки карты, как и раньше. */
.header-left .mode-switch { margin-left: 4px; }
@media (max-width: 768px) {
  :root:has(.dashboard-header [data-mode-switcher]) { --public-header-h: 98px; }
  .dashboard-header .header-container { height: 54px; }
  .header-left .mode-switch {
    display: flex; position: absolute; left: 12px; right: 12px; top: 54px;
    height: 36px; margin: 0;
  }
  .header-left .mode-switch .mode-switch__link {
    flex: 1 1 0; justify-content: center; min-height: 34px; padding: 4px 8px;
  }
  .mode-switch__link { min-height: 40px; padding: 6px 12px; }
}

/* Планшет и телефон в landscape (769–1024px): полное название продукта
   рядом с поиском не помещалось, и переключатель уезжал за правый край
   (Chromium 844×390). Компактный заголовок для этого диапазона задаёт
   map_overview.css (порог 1024px), здесь дополнительных правил нет. */

/* Каталог: в верхней панели, крупнее — здесь он главный ориентир. */
.dsc-topbar .mode-switch__link { min-height: 44px; padding: 8px 18px; }