/* Система кнопок карты. Подключается последней, после остальных стилей карты.
   Пять вариантов: основная (primary), второстепенная (secondary), текстовая (ghost),
   иконка (icon, на карте плавающая) и чип-переключатель (chip).
   Форма одна для всех: квадрат без скругления. Тень только у плавающих кнопок поверх карты.
   Розовый акцент (--dc) только у главной плавающей «Добавить точку» и всегда с тёмной иконкой:
   белый на розовом даёт 3.8:1 и не проходит AA для текста. */
:root{
  --btn-h:44px;            /* основная высота: цель касания 44px */
  --btn-h-chip:36px;       /* чип на ПК; область нажатия добирается до 44px псевдоэлементом */
  --btn-icon:40px;         /* иконочная кнопка на ПК; область нажатия 44px */
  --btn-px:16px;
  --btn-px-icon-side:14px; /* со стороны иконки на 2px меньше */
  --btn-gap:8px;
  --btn-font:700 11px/1.2 var(--display);
  --btn-font-sm:700 10px/1.2 var(--display);
  --btn-chip-font:800 12px/1.2 var(--body);
  --btn-border:var(--edge);
  --btn-primary-bg:var(--ink);--btn-primary-fg:var(--on-ink);
  --btn-primary-hover-bg:var(--accent);--btn-primary-hover-fg:#fff;
  --btn-secondary-bg:var(--surface);--btn-secondary-fg:var(--ink);--btn-secondary-hover-bg:var(--surface-2);
  --btn-ghost-fg:var(--accent-text);--btn-ghost-hover-fg:var(--ink);
  --btn-selected-bg:var(--ink);--btn-selected-fg:var(--on-ink);
  --btn-accent-bg:var(--dc);--btn-accent-fg:var(--ink);
  --btn-disabled-opacity:.45;
}
@media (max-width:820px){:root{--btn-icon:44px;--btn-h-chip:44px}}

/* ---------- Общая основа: primary, secondary ---------- */
.btn,.route-cta,.add-cta,.filters-toggle,.list-state button,.back-link{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);
  min-height:var(--btn-h);padding:0 var(--btn-px);
  border:1px solid var(--btn-border);border-radius:0;
  font:var(--btn-font);letter-spacing:0;text-decoration:none;white-space:nowrap;
  transition-property:scale,background-color,color,border-color;
}
.btn i,.route-cta i,.add-cta i,.filters-toggle i,.back-link i{font-size:17px;flex:none}
:is(.btn,.route-cta,.add-cta,.filters-toggle,.list-state button,.back-link):has(>i:first-child,>.icon-swap:first-child){padding-left:var(--btn-px-icon-side)}
:is(.btn,.route-cta,.add-cta,.filters-toggle,.list-state button):disabled{opacity:var(--btn-disabled-opacity);cursor:not-allowed}

/* Основная: одна на экран или шторку */
.btn--main,.route-cta{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn--main:hover:not(:disabled),.route-cta:hover{background:var(--btn-primary-hover-bg);border-color:var(--btn-primary-hover-bg);color:var(--btn-primary-hover-fg)}

/* Второстепенная: контур, светлый фон */
.btn--alt,.add-cta,.filters-toggle,.list-state button,.back-link,button.back-link{background:var(--btn-secondary-bg);border-color:var(--btn-border);color:var(--btn-secondary-fg)}
.btn--alt:hover:not(:disabled),.add-cta:hover,.filters-toggle:hover,.list-state button:hover,.back-link:hover{background:var(--btn-secondary-hover-bg);color:var(--btn-secondary-fg)}
.filters-toggle[aria-expanded=true]{background:var(--btn-selected-bg);border-color:var(--btn-selected-bg);color:var(--btn-selected-fg)}
.filters-toggle{height:auto;display:none}
/* На телефоне кнопки панели уходят в плавающие, а «Фильтры» появляются рядом с поиском */
@media (max-width:820px){.filters-toggle{display:inline-flex}.route-cta,.add-cta{display:none}}
/* Счётчик фильтров: тёмные цифры на розовом (4.9:1) */
.filters-toggle b{background:var(--dc);color:var(--ink)}

/* Компактный размер для пар кнопок в карточке и экспорта маршрута */
.check-actions{grid-template-columns:1fr auto}
.check-actions .btn,.route-export .btn{min-height:var(--btn-h);font:var(--btn-font-sm);white-space:nowrap}
.check-works.is-done,.check-works.is-done:hover{background:var(--ac);border-color:var(--btn-border);color:var(--ink)}

/* ---------- Текстовая (ghost): действия внутри текста и «Подробнее» ---------- */
.detail-more,.origin-status button,.add-link{
  align-items:center;gap:6px;min-height:var(--btn-h);padding:0 4px;
  border:0;background:none;color:var(--btn-ghost-fg);
  font:800 12px/1.2 var(--body);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition-property:scale,color;
}
.detail-more:hover,.origin-status button:hover,.add-link:hover{color:var(--btn-ghost-hover-fg);text-decoration-thickness:2px}
.origin-status button,.add-link{display:inline-flex}
.origin-status button{min-height:32px;position:relative}
.origin-status button::after{content:'';position:absolute;inset:-6px -4px}

/* ---------- Иконочная: крестик, поделиться ---------- */
.detail-close,.detail-share,.route-swap,.viewer-close{
  position:relative;display:grid;place-items:center;width:var(--btn-icon);height:var(--btn-icon);padding:0;
  border:1px solid var(--btn-border);border-radius:0;background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);font-size:18px;
  transition-property:scale,background-color,color;
}
.detail-close:hover,.detail-share:hover,.route-swap:hover{background:var(--btn-secondary-hover-bg);color:var(--btn-secondary-fg)}
.detail-close::after,.detail-share::after,.route-swap::after{content:'';position:absolute;inset:calc((var(--btn-icon) - 44px) / 2)}
.detail-share.is-done,.detail-share.is-done:hover{background:var(--ac);color:var(--ink)}
.viewer-close{background:#12063a99;border-color:#ffffff55;color:#fff}
/* Тихая иконка без рамки: внутри поля поиска и строки адреса */
.copy,.search-clear{
  position:relative;display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:0;background:none;color:var(--muted);font-size:16px;transition-property:scale,background-color,color;
}
.copy:hover,.search-clear:hover{background:var(--btn-secondary-hover-bg);color:var(--ink)}
.copy::after,.search-clear::after{content:'';position:absolute;inset:-6px}
.route-input button{transition-property:scale,background-color,color}

/* ---------- Плавающие иконки поверх карты: та же иконочная кнопка + тень уровня «кнопка» ---------- */
.tool,.map-menu,.tour-replay--map{
  background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);border:1px solid var(--btn-border);border-radius:0;
  box-shadow:var(--shadow-btn);transition-property:scale,background-color,color;
}
.tool:hover,.map-menu:hover,.tour-replay--map:hover,.tour-replay--map:focus-visible{background:var(--btn-secondary-hover-bg);color:var(--btn-secondary-fg)}
.tool[aria-pressed=true],.map-menu[aria-expanded=true]{background:var(--btn-selected-bg);color:var(--btn-selected-fg);border-color:var(--btn-selected-bg)}
.map-menu,.tour-replay--map{height:46px;font:var(--btn-font)}
.map-menu{padding:0 var(--btn-px) 0 var(--btn-px-icon-side)}
.tour-replay--map{padding:0 var(--btn-px) 0 var(--btn-px-icon-side)}
/* Главная плавающая: единственная розовая кнопка, тёмная иконка (4.9:1) */
.tool--add,.tool--add:hover{background:var(--btn-accent-bg);color:var(--btn-accent-fg);border-color:var(--btn-border)}
.tool--add:hover{background:#ff4d9c}
@media (max-width:820px){
  /* Маршрут на телефоне — обычная плавающая кнопка, акцент остаётся у «Добавить точку» */
  .tool--route{background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);border-color:var(--btn-border)}
  .tour-replay--map{height:44px;padding:0}
}

/* ---------- Чип-переключатель: фильтры, коридор маршрута, варианты в заявке ---------- */
.chip,.filter-opts button,.route-corridor button,.add-options span{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--btn-h-chip);padding:0 12px;border:1px solid var(--btn-border);border-radius:0;
  background:var(--btn-secondary-bg);color:var(--btn-secondary-fg);font:var(--btn-chip-font);white-space:nowrap;
  transition-property:scale,background-color,color;
}
.chip:hover,.filter-opts button:hover,.route-corridor button:hover,.add-options label:hover span{background:var(--btn-secondary-hover-bg)}
.chip[aria-pressed=true],.filter-opts button[aria-pressed=true],.route-corridor button[aria-pressed=true],.add-options input:checked+span{background:var(--btn-selected-bg);border-color:var(--btn-selected-bg);color:var(--btn-selected-fg)}
.chip::after{inset:calc((var(--btn-h-chip) - 44px) / 2) 0}
.route-corridor button{min-height:42px}
.filter-opts button:has(>i:first-child){padding-left:10px}
.filter-opts button::after{content:none}
/* Отмеченный чип — ещё и галочка, не только цвет */
.chip[aria-pressed=true]::before,.filter-opts button[aria-pressed=true]::before{content:'\e182';font-family:'Phosphor';font-size:13px;line-height:1;margin-right:-2px}

/* ---------- Мелкие метки на розовом: тёмный текст ---------- */
.route-stop em{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.chip,.filter-opts button,.route-corridor button,.add-options span{transition:none}}