/* Выбор сервиса в выдаче поиска «Все · Qobuz · TIDAL» (search_svc.js, 15.10.2026).
   Полоса фильтров: тип (чипы .m-search-kinds) и сервис. На широком экране —
   одной строкой, сервис сразу за типами; не помещаются — сервис переносится
   своей строкой под типы (flex-wrap, без container-запросов). На телефоне
   сервис — во всю ширину, три равные кнопки; под палец — 44 точки. */
.search-filters {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 14px; row-gap: 8px; margin-bottom: 14px;
}
/* Ряд типов внутри полосы: отступ даёт полоса; уже экрана — листается вбок,
   как и раньше (min-width: 0 — иначе ряд распирал бы страницу). */
.search-filters > .m-search-kinds { margin-bottom: 0; min-width: 0; max-width: 100%; }

.search-svc {
    display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px;
    border: 1px solid var(--border); border-radius: 19px; background: var(--bg-input);
}
.search-svc[hidden] { display: none; }
.ssv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 27px; padding: 4px 12px; border: 0; border-radius: 15px;
    background: transparent; color: var(--text-mid);
    font: inherit; font-weight: 700; font-size: 13px; line-height: 1.2;
    white-space: nowrap; cursor: pointer;
}
.ssv-btn:hover { color: var(--text-strong); }
/* Выбранный — контуром акцента: чип типа рядом залит акцентом, и два залитых
   пятна в одном ряду читались бы как одна группа. */
.ssv-btn.active {
    background: var(--accent-soft); color: var(--text-strong);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.ssv-btn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: -3px; }
/* Сколько нашёл сервис (у «Все» — только когда ответили все). Пока идёт
   поиск, у числа своё место (2 знака: у сервиса не больше 20, у «Все» — 40):
   кнопки не съезжают, когда оно приходит, и нажатие не попадает в соседний
   сервис (ревью 15.10: сдвиг был до 42 точек). Без поиска места нет. */
.ssv-n { font-weight: 600; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ssv-n:empty { display: none; }
.search-svc.ssv-counting .ssv-n { display: inline-block; min-width: 2ch; text-align: left; }
.ssv-btn.active .ssv-n { color: var(--accent-strong); }

/* Место под карточку сервиса, который ещё в пути (.sk-card из vault.css). */
.ssv-ph { pointer-events: none; }
/* Фокус после кнопки пустой выдачи, когда переключателя нет, — без рамки. */
#search-results:focus { outline: none; }

/* Пустая выдача одного сервиса: «В TIDAL ничего не нашлось» и путь ко всем. */
.ssv-empty .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* Палец: кнопки не ниже 44 точек; дорожка без внутреннего отступа и с
   контуром тенью вместо рамки — полоса ровно 44, не выше. */
@media (pointer: coarse) {
    .search-svc { padding: 0; border: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--border); }
    .ssv-btn { min-height: 44px; padding: 0 14px; border-radius: 22px; }
}

/* Телефон: своей строкой во всю ширину, кнопки поровну — помещаются и на
   320 точках («TIDAL 20» ≈ 80). */
@media (max-width: 600px) {
    .search-svc { display: flex; width: 100%; }
    .ssv-btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}

/* Телефон на боку (601–700 точек, 667x375): чипы типов ≈ 399 точек, и
   переключатель с отступами пальца (≈ 250) уходил своей строкой — первая
   карточка целиком под нижним меню (ревью 15.10). Кнопки компактнее (≈ 214),
   он встаёт в строку с типами; высота под палец остаётся 44. */
@media (min-width: 601px) and (max-width: 700px) {
    .search-filters { column-gap: 10px; }
    .ssv-btn { padding: 0 8px; }
}

/* Неверная раскладка под заголовком поиска (search_fix.js, 19.10): «Показаны результаты для
   «queen» · Искать «йгуут»». На широком — одной строкой; на телефоне ссылка — своей строкой под
   текстом, точка прячется. Ссылка — под палец 44 точки. */
.search-fix {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px;
    margin-top: 6px; color: var(--text-mid); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere;
}
.search-fix[hidden] { display: none; }
.search-fix .link-btn {
    min-height: 44px; padding: 0; border: 0; background: none; text-align: left;
    color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .search-fix .link-btn:hover { text-decoration: underline; } }
.search-fix .link-btn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 767px) {
    .search-fix { flex-direction: column; align-items: flex-start; }
    .search-fix .sf-sep { display: none; }
}