/*
 * Поиск по сайту в шапке (28.10.2026, вариант «Поиск с вкладками»): форма «Поиск по сайту» стала колонкой - строка поля
 * и список подсказок под ней (тёмный, в цветах шапки). Подключается на всех страницах (layouts/site, errors/static-layout)
 * после site-chrome.css; поведение - /js/site-search.js (combobox), данные - GET /search/suggest.
 * Строка подсказки (.sg) общая с полями на странице поиска и 404 (светлый список - /style/pages/search.css).
 */
.sc-sp{flex-direction:column;gap:0;width:min(580px,calc(100% - 24px))}
.sc-sp__row{display:flex;gap:8px}

.sug{list-style:none;margin:0;padding:0}
.sug[hidden]{display:none!important}
.sg{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:10px;color:inherit;text-decoration:none;transition:background .12s}
.sg__v{width:28px;display:flex;align-items:center;justify-content:center;flex:none}
.sg__fl{display:block;width:22px;height:15px;object-fit:cover;border-radius:2px}
.sg__cr{display:block;width:22px;height:22px;object-fit:contain}
.sg__ph{display:block;width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.sg__dot{display:block;width:10px;height:10px;border-radius:50%;background:var(--cc)}
.sg__ico{width:18px;height:18px}
/* страна или город - только если помещается целиком рядом с названием: иначе переносится на вторую строку, а она скрыта */
.sg__b{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;max-height:22px;overflow:hidden}
.sg__n{min-width:0;flex:0 1 auto;font-weight:600;font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg__s{flex:0 0 auto;font-size:13px;line-height:1.3;white-space:nowrap}
.sg__t{flex:none;font-size:12px;font-weight:600;line-height:1.2}
.sug__all{margin-top:6px;padding-top:6px}
.sg mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-skip-ink:none}

/* тёмный список - в шапке */
.sug--dark{margin-top:8px;padding:2px 0 0;max-height:min(64vh,520px);overflow-y:auto;border-top:1px solid var(--line)}
.sug--dark .sg{color:var(--ink)}
.sug--dark .sg__fl{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.sug--dark .sg__s,.sug--dark .sg__t{color:var(--mut)}
.sug--dark .sg:hover,.sug--dark [aria-selected=true]>.sg{background:rgba(255,255,255,.08)}
.sug--dark mark{color:#fff;text-decoration-color:var(--ea)}
.sug--dark .sug__all{border-top:1px solid var(--line)}
.sug--dark .sg--all .sg__n{color:#fff}

@media (max-width:700px){
  .sc-sp{width:auto}
  .sug--dark{max-height:58vh}
}
@media (prefers-reduced-motion:reduce){
  .sg{transition:none}
}