/* ==========================================================================
   ПОИСК  —  /search
   --------------------------------------------------------------------------
   Лист одной страницы, а не пятый в общей склейке: ползунки, выпадающие
   списки, метки выбранного и карточки имён нужны только здесь, и держать их
   в листе, который грузит каждая страница, — платить за поиск на главной.

   Общее с каталогом (.k-filt, .k-grid, .k-loadmore, .k-empty, .k-head, .k-tally)
   лежит в kino/home.css и здесь не повторяется — только то, чего там нет,
   и несколько уточнений для поля отбора внутри поиска.
   ========================================================================== */

/* Пока ответ в пути, страница остаётся на месте — гаснет только он. */
.k-srch.is-loading .k-srch__res { opacity: .5; transition: opacity .15s ease; }

/* --------------------------------------------------------------------------
   ВОПРОС: заголовок и само поле.
   -------------------------------------------------------------------------- */

.k-ask { margin-bottom: 44px; }

.k-ask__h {
    margin: 0 0 26px;
    max-width: 20ch;
    font-family: var(--kt-font-display);
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.02em;
    text-wrap: balance;
}

/*
 * Поле — одна линия во всю ширину, а не коробка в рамке.
 *
 * Прежнее было тёмным прямоугольником со скруглением: такой же, как любая
 * кнопка рядом, и на странице, где строка запроса и есть главное, оно ничем
 * не выделялось. Линия шире и тоньше всего остального, и загорается акцентом
 * ровно тогда, когда в неё пишут.
 */
.k-ask__field {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 0 16px;
    border-bottom: 2px solid var(--kt-line-2);
    transition: border-color .3s var(--kt-ease);
}

.k-ask__field:focus-within { border-bottom-color: var(--kt-accent); }

.k-ask__ico { flex: 0 0 auto; color: var(--kt-muted); transition: color .3s ease; }
.k-ask__field:focus-within .k-ask__ico { color: var(--kt-accent-ink); }

.k-ask__in {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--kt-ink);
    font-family: var(--kt-font);
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.25;
}

.k-ask__in::placeholder { color: var(--kt-muted); font-weight: 500; }
.k-ask__in::-webkit-search-cancel-button { display: none; }

.k-ask__spin {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border: 2px solid var(--kt-line-2);
    border-top-color: var(--kt-accent);
    border-radius: 50%;
    animation: kAskSpin .8s linear infinite;
}

@keyframes kAskSpin { to { transform: rotate(360deg); } }

.k-ask__x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--kt-surface-2);
    color: var(--kt-muted);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.k-ask__x:hover { background: var(--kt-surface-3); color: var(--kt-ink); }

/* Подсказка и вход в AI — одной строкой под линией: оба про то, как
   спрашивать, и обоим место сразу под полем. */
.k-ask__under {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 12px;
}

.k-ask__hint {
    flex: 1;
    min-width: 0;
    margin: 0;
    max-width: 68ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--kt-muted);
    text-wrap: pretty;
}

.k-ask__ai {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    color: var(--kt-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.k-ask__ai:hover {
    border-color: var(--kt-accent);
    background: rgba(var(--kt-accent-rgb), .07);
    color: var(--kt-ink);
}

.k-ask__ai-a { transition: transform .25s var(--kt-ease); }
.k-ask__ai:hover .k-ask__ai-a { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   ЧТО ИЩУТ ДРУГИЕ.
   -------------------------------------------------------------------------- */

.k-hot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}

.k-hot__lab {
    margin-right: 4px;
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-hot__q {
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--kt-surface-2);
    color: var(--kt-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.k-hot__q:hover { background: var(--kt-surface-3); color: var(--kt-ink); }

/* --------------------------------------------------------------------------
   ВИД МАТЕРИАЛА — строкой, а не кнопками.

   Прежние вкладки были обведёнными пилюлями и спорили с пилюлями отбора под
   ними: одинаковые на вид, разные по смыслу. Здесь — слова в строке, у
   выбранного черта под ним.
   -------------------------------------------------------------------------- */

.k-stabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 26px;
    margin-bottom: 30px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--kt-line);
}

.k-stab {
    position: relative;
    padding: 0 0 14px;
    margin-bottom: -15px;
    border: 0;
    background: transparent;
    color: var(--kt-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: color .2s ease;
}

.k-stab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--kt-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--kt-ease);
}

.k-stab:hover { color: var(--kt-ink); }
.k-stab.is-active { color: var(--kt-ink); }
.k-stab.is-active::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   ОТБОР. Ряд подчёркнутых полей — тот же, что в каталоге; здесь только то,
   чего в каталоге нет: списки с галочками, «или/и», ползунки.
   -------------------------------------------------------------------------- */

.k-filt--srch { margin-bottom: 26px; }

.k-filt__foot {
    display: flex;
    align-items: center;
    gap: 16px;
}

.k-filt--srch .k-filt__clear { margin-left: auto; align-self: center; }

/* Список значений внутри выпадающего окна. */
.k-filt__list { display: flex; flex-direction: column; }

/* Сам флажок не рисуем: о выборе говорят цвет строки и галочка справа —
   третий значок в той же строке был бы про то же самое. */
.k-filt__box {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.k-filt__optt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Сколько тайтлов за значением — цифрой в стороне, тише самого значения. */
.k-filt__c {
    flex: 0 0 auto;
    font-family: var(--kt-font-mono);
    font-size: 10.5px;
    color: var(--kt-muted);
}

.k-filt__box:checked ~ .k-filt__optt { color: var(--kt-accent-ink); font-weight: 600; }
.k-filt__box:checked ~ .k-filt__check { opacity: 1; }
.k-filt__box:focus-visible ~ .k-filt__optt { text-decoration: underline; }

.k-filt__pane--pad { padding: 16px 15px 6px; }
.k-filt__pane--wide { min-width: 264px; }

/* «Или / И» и поиск по странам стоят первыми в списке и не уезжают вместе с
   ним: правило и фильтр списка должны быть под рукой, пока его листают. */
.k-mode,
.k-csearch {
    position: sticky;
    top: -7px;
    z-index: 1;
    background: var(--kt-surface-2);
}

.k-mode {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 11px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--kt-line);
}

.k-mode__hint {
    flex: 1;
    font-family: var(--kt-font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-mode__set {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: var(--kt-surface-3);
}

.k-mode__b {
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--kt-muted);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.k-mode__b.is-active { background: var(--kt-accent); color: var(--kt-on-accent); }

.k-csearch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 11px 10px;
    margin-bottom: 4px;
    color: var(--kt-muted);
}

.k-csearch__in {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid var(--kt-line);
    outline: none;
    background: transparent;
    color: var(--kt-ink);
    font: inherit;
    font-size: 12.5px;
    transition: border-color .2s ease;
}

.k-csearch__in:focus { border-bottom-color: var(--kt-accent); }
.k-csearch__in::placeholder { color: var(--kt-muted); }

/* --------------------------------------------------------------------------
   ПОЛЗУНКИ: год, длительность (две ручки) и рейтинги (одна).
   -------------------------------------------------------------------------- */

.k-rng, .k-sng { padding-bottom: 12px; }

.k-rng__vals,
.k-sng__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    font-family: var(--kt-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kt-ink);
}

.k-rng__dash { flex: 1; height: 1px; background: var(--kt-line); }

.k-sng__lab { font-family: var(--kt-font); font-size: 12.5px; font-weight: 700; color: var(--kt-muted); }
.k-sng__val { color: var(--kt-accent-ink); }

.k-rng__track,
.k-sng__track {
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: var(--kt-surface-3);
}

.k-rng__fill,
.k-sng__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: var(--kt-accent);
}

.k-sng__fill { left: 0; }

/*
 * Два <input type="range"> лежат друг на друге в одной дорожке: событий у
 * дорожки нет, они есть только у ручек — иначе верхний ползунок перехватывал
 * бы каждое нажатие и нижняя ручка не двигалась бы вовсе.
 */
.k-rng__in,
.k-sng__in {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 22px;
    margin: 0;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.k-rng__in::-webkit-slider-thumb,
.k-sng__in::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid var(--kt-bg);
    border-radius: 50%;
    background: var(--kt-accent);
    box-shadow: var(--kt-shadow);
    cursor: grab;
    pointer-events: auto;
    transition: transform .16s ease;
}

.k-rng__in::-moz-range-thumb,
.k-sng__in::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 2px solid var(--kt-bg);
    border-radius: 50%;
    background: var(--kt-accent);
    cursor: grab;
    pointer-events: auto;
}

.k-rng__in:active::-webkit-slider-thumb,
.k-sng__in:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }

.k-rng__in:focus-visible::-webkit-slider-thumb,
.k-sng__in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--kt-accent-rgb), .3); }

/* --------------------------------------------------------------------------
   ЕЩЁ ФИЛЬТРЫ.
   -------------------------------------------------------------------------- */

.k-mtoggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kt-muted);
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease;
}

.k-mtoggle:hover, .k-mtoggle.is-active { color: var(--kt-ink); }
.k-mtoggle__i { transition: transform .3s var(--kt-ease); }
.k-mtoggle.is-open .k-mtoggle__i { transform: rotate(45deg); }

.k-mtoggle__c {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--kt-accent);
    color: var(--kt-on-accent);
    font-size: 9.5px;
    line-height: 16px;
    letter-spacing: 0;
}

.k-mpanel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 34px;
    margin-top: 24px;
    padding: 26px 28px 20px;
    border: 1px solid var(--kt-line);
    border-radius: 20px;
    background: var(--kt-surface);
    animation: kMoreIn .24s var(--kt-ease);
}

@keyframes kMoreIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

.k-mblock__t {
    display: block;
    margin-bottom: 16px;
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-ages { display: flex; flex-wrap: wrap; gap: 8px; }

.k-age {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    background: transparent;
    color: var(--kt-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.k-age:hover { border-color: var(--kt-line-2); color: var(--kt-ink); }
.k-age.is-on { border-color: var(--kt-accent); background: var(--kt-accent); color: var(--kt-on-accent); }
.k-age__c { font-family: var(--kt-font-mono); font-size: 10px; font-weight: 500; opacity: .65; }

/* --------------------------------------------------------------------------
   ЧТО ВЫБРАНО И СКОЛЬКО НАШЛОСЬ.
   -------------------------------------------------------------------------- */

.k-srow {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 18px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--kt-line);
}

.k-chips { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }
.k-chips:empty { display: none; }

.k-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--kt-line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--kt-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.k-chip:hover { border-color: var(--kt-accent); background: rgba(var(--kt-accent-rgb), .08); }
.k-chip__sub { color: var(--kt-muted); font-weight: 500; }
.k-chip__x { color: var(--kt-muted); transition: color .18s ease; }
.k-chip:hover .k-chip__x { color: var(--kt-accent-ink); }

.k-chipclear {
    padding: 6px 4px;
    border: 0;
    background: transparent;
    color: var(--kt-muted);
    font-family: var(--kt-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease;
}

.k-chipclear:hover { color: var(--kt-ink); }

/* --------------------------------------------------------------------------
   ОТВЕТ: разделы, имена.
   -------------------------------------------------------------------------- */

.k-ssec + .k-ssec { margin-top: 56px; }

/* Строкой её оставляет общее правило `.k-head--flat` в home.css. */
.k-ssec .k-head { margin-bottom: 20px; }

.k-pgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 26px 16px;
}

/*
 * Человек — круглым портретом, как в быстром поиске в шапке (.k-person).
 * Прежде здесь стояла карточка-афиша: тот же силуэт, что у фильма рядом, и
 * взгляд не отличал имя от названия.
 */
.k-pcard { display: block; text-align: center; text-decoration: none; color: inherit; }

.k-pcard__ava {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--kt-surface-2);
    color: var(--kt-muted);
    font-size: 30px;
    font-weight: 800;
    transition: transform .3s var(--kt-ease), box-shadow .3s ease;
}

.k-pcard__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.k-pcard:hover .k-pcard__ava {
    transform: translateY(-4px);
    box-shadow: var(--kt-shadow), 0 0 0 2px var(--kt-accent);
}

.k-pcard__n {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: color .2s ease;
}

.k-pcard:hover .k-pcard__n { color: var(--kt-accent-ink); }

.k-pcard__r {
    display: block;
    margin-top: 3px;
    font-family: var(--kt-font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

/* «Известен по» переносится, а не обрывается многоточием: в колонке
   132px одной строкой от «Интерстеллар, Одиссея» оставалось «Интерстеллар,
   Оди…» — обрывок, который ничего не сообщает. */
.k-pcard__k {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--kt-muted);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   МЕРЦАНИЕ НА МЕСТЕ БУДУЩЕГО ОТВЕТА.
   -------------------------------------------------------------------------- */

.k-sk__head,
.k-skc__art,
.k-skc__l1,
.k-skc__l2 {
    border-radius: 8px;
    background: linear-gradient(100deg, var(--kt-surface) 30%, var(--kt-surface-2) 50%, var(--kt-surface) 70%);
    background-size: 300% 100%;
    animation: kSkel 1.25s ease-in-out infinite;
}

.k-sk__head { width: 190px; height: 26px; margin-bottom: 20px; }
.k-skc__art { aspect-ratio: 2 / 3; border-radius: var(--kt-r-md); margin-bottom: 10px; }
.k-skc__l1 { height: 11px; width: 82%; margin-bottom: 7px; }
.k-skc__l2 { height: 10px; width: 54%; }

@keyframes kSkel {
    from { background-position: 140% 0; }
    to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .k-sk__head, .k-skc__art, .k-skc__l1, .k-skc__l2 { animation: none; }
}

/* --------------------------------------------------------------------------
   УЗКИЕ ЭКРАНЫ.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
    .k-ask { margin-bottom: 34px; }
    .k-ask__field { gap: 12px; }
    .k-ask__under { flex-direction: column; gap: 14px; }
    .k-ask__ai { align-self: flex-start; }

    /* Строка видов шире экрана — её листают вбок, а не переносят: перенос
       съедал бы две строки над отбором. */
    .k-stabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .k-stabs::-webkit-scrollbar { display: none; }
    .k-stab { flex: 0 0 auto; }

    .k-srow { flex-direction: column; align-items: flex-start; gap: 12px; }
    .k-mpanel { padding: 22px 18px 16px; gap: 26px; }
    .k-pgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 22px 12px; }
    .k-pcard__ava { width: 76px; height: 76px; font-size: 25px; }
}