/* public/css/site-search.css: подсказки под полем поиска в хедере (#panel-search).
   Цвета наследуются от панели (она сама меняется на тёмных и светлых страницах). */

.search-results {
    max-width: 900px; margin: 0 auto; padding: 4px clamp(16px, 3vw, 40px) 20px;
    max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
}
.search-results[hidden] { display: none; }
.search-results[aria-busy="true"] { opacity: .6; transition: opacity .15s; }

.search-group + .search-group { margin-top: 20px; }
.search-group-title {
    margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    opacity: .6;
}

.search-item {
    display: flex; align-items: center; gap: 14px; margin: 0 -10px; padding: 8px 10px;
    color: inherit; text-decoration: none; border-radius: 6px; transition: background .15s;
}
.search-item:hover, .search-item.is-active, .search-item:focus-visible { background: rgba(127, 127, 127, .16); outline: none; }

.search-thumb { flex: none; display: block; width: 44px; height: 44px; object-fit: cover; background: rgba(127, 127, 127, .18); border-radius: 4px; }
.search-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-name { font-size: 15px; font-weight: 300; line-height: 1.25; overflow-wrap: anywhere; }
.search-sub { font-size: 12px; font-weight: 300; line-height: 1.2; opacity: .6; }

/* совпадения с запросом */
.search-results mark { padding: 0; color: var(--accent, inherit); font-weight: 600; background: none; }

.search-empty { margin: 8px 0 0; font-size: 14px; font-weight: 300; opacity: .6; }

@media (max-width: 860px) {
    .search-results { max-height: 60vh; }
    .search-name { font-size: 14px; }
}