/* searchbar — строка поиска.

   Строка — тот же док, только лежащий сверху и толщиной в один пункт:
   та же заливка, то же кольцо акцента на 75%, а высота — одна
   единица нажатия (--searchbar-height из main.css). Скругление —
   карточный калибр (--post-radius): строка идёт в одном ряду с
   карточками, которые сопровождает, а не отдельно стоящая капсула.

   Строка живёт внутри прокручиваемого соседа и прилипает к его
   верхнему краю: место у неё есть в самом потоке, а контент проходит
   под ней. Прокручиваемого соседа называет владелец (аргумент
   scroller в разметке): прокрутка
   вниз уносит строку за верхний край, прокрутка вверх возвращает её
   на место, в самом верху соседа строка стоит всегда — полётом ведёт
   searchbar.js классом is-hidden.

   Внутри — как в доке: коробка поля лежит прямо на панели, без своей
   коробки. Поле прозрачное; фокус в нём подсвечивает кольцо
   всего бара цельным акцентом — так же, как у полей настроек светится
   само поле (см. inputfield.css).

   Подсказка в поле —modules/suggest, как в сетапах и городе: хвост
   совпадения ложится ровно на набираемый текст. Принятая подсказка
   становится баблом (modules/bubble) перед полем: баблы и набираемое
   — одна центрированная группа строки; крестик на бабле показывается
   по наведению и по фокусу. */

.searchbar {
    --fill: var(--color-panel);
    --ring-color: var(--color-border);

    position: sticky;
    top: 0;
    /* Строка и её тень — над соседями: карточки, уходя при прокрутке,
       проходят под баром, а не стирают его мягкий край. */
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--searchbar-height);
    /* Боковые поля — по --dock-pad: содержимое не вылезает за дугу
       пилюли, воздух слева даёт само поле. */
    padding: 0 var(--dock-pad);
    /* Пустое место строки кликается в поле (ставит searchbar.js):
       коробка поля шириной с набранное, и без клика по строке в
       её середине нажимать было бы некуда. */
    cursor: text;
    border: 1px solid transparent;
    border-radius: var(--post-radius, 16px);
    background: linear-gradient(var(--fill), var(--fill)) padding-box,
                linear-gradient(var(--ring-color), var(--ring-color)) border-box;
    /* Тень много тише доковой: бар лежит в потоке над самыми первыми
       карточками, и тяжёлая тень дока ложилась тёмной полосой в зазор
       под строкой. Здесь она не витрина, а лёгкая отмежёвка от кадров,
       проходящих под баром при прокрутке. */
    box-shadow: var(--shadow-search);

    /* Полёт вверх и обратно — тем же переходом, что у раскрытия дока. */
    transition: transform 0.3s var(--ease-emphasized);
}

/* Спрятанная строка уходит целиком: своя высота плюс поле страницы —
   иначе в верхней полосе остался бы виден её край.

   Видимость выключается после полёта: тень шире самой строки, и без
   задержки её мягкий край остался бы размазан по верхнему экрану,
   когда строка уже улетела. На обратном ходе видимость включается
   сразу: базовое правило не знает про visibility, и она переключается
   мгновенно, не дожидаясь конца полёта. */
.searchbar.is-hidden {
    transform: translateY(calc(-100% - var(--page-gap)));
    visibility: hidden;
    transition: transform 0.3s var(--ease-emphasized), visibility 0s 0.3s;
}

/* Фокус в поле светится всем баром: строка — одно целое, и невидимой
   рамки у текста здесь нет. */
.searchbar:focus-within {
    --ring-color: var(--color-accent);
}

/* Коробка поля: ввод и слой подсказки лежат в ней друг на друге.
   Ширина — по набранному (field-sizing у ввода): баблы и поле стоят
   одной группой, и центр группы держат автоотступы по её краям —
   без баблов они у самого поля, с баблами левый переезжает к баблам
   (см. :not(:empty) ниже). */
.searchbar__fieldbox {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0 auto;
}

/* С баблами поле не тянет центр на себя: группу центрирует пара
   автоотступов «перед баблами — после поля». */
.searchbar__bubbles:not(:empty) ~ .searchbar__fieldbox {
    margin-left: 0;
}

.searchbar__field {
    width: 100%;
    height: 100%;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    /* Ширина — по набранному: группа «баблы + поле» центрируется
       целиком. Центр выравнивания остаётся на случай, когда месту
       тесно и поле сжимается, — текст и тогда читается из середины. */
    field-sizing: content;
    text-align: center;
}

.searchbar__field:focus {
    outline: none;
}

.searchbar__field::placeholder {
    color: var(--color-text-muted);
}

/* Родной крестик очистки webkit прячет: поле без лишних кнопок —
   очистить можно выделением и удалением, как в обычной строке. */
.searchbar__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Слой подсказки (modules/suggest) ложится на поле ровно. Сам слой
   узкий — шириной с набранное — и центрируется тем же центром, что
   и текст поля: поле центрует набираемое, и слой встаёт тем же
   центром. Хвост прицеплен к правому краю слоя, то есть сразу за
   последней буквой набранного. Набранное повторяется прозрачным:
   текст поля виден сквозь него. */
.searchbar__hint {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    display: flex;
    align-items: center;
    pointer-events: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}

.searchbar__hint[hidden] {
    display: none;
}

.searchbar__hint-typed {
    color: transparent;
    white-space: pre;
}

.searchbar__hint-rest {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    white-space: pre;
}

/* Баблы принятых подсказок стоят перед полем, в потоке: баблы и
   набираемое — одна центрированная группа, и появление или уход
   бабла просто перестраивает её вокруг середины строки. Левый
   автоотступ — вторая половина центрирования группы, правая — у
   поля. */
.searchbar__bubbles {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Пустой слой исчезает целиком: без баблов поле центрируется само,
   и никакой щели от слоя не остаётся. */
.searchbar__bubbles:empty {
    display: none;
}

.searchbar__bubble {
    position: relative;
    flex: none;
    /* Бабл не кликается в поле: курсор текста строки над ним был бы
       ложным зовом. */
    cursor: default;
}

/* Крестик живёт поверх самого края бабла, прямо над текстом: места
   под него нет ни до, ни после — бабл не меняет ширину. bubble.css
   прячет крестик до правки (is-editing), а бабл строки всегда «в
   правке»: крестик постоянно в разметке, но невидим, — абсолютному
   место он не занимает. Виден он только по наведению и по фокусу:
   проявляется из размытия, а его подложка того же цвета, что бабл, —
   буквы под крестиком растворяются, и край текста словно размывается.
   Пока крестика нет, он ничего не ловит: буквы под ним выделяются
   и нажимаются как обычно. */

/* Наведение на сам крестик — то же пятно, что в сетапе, только
   подмешанное к акценту: подложка остаётся непрозрачной, и буквы под
   крестиком не проступают. */

@media (prefers-reduced-motion: reduce) {
    .searchbar,
    .searchbar.is-hidden {
        transition: none;
    }

}
/* Keep accepted filters and the content-sized input together. */
.searchbar__fieldbox { width:fit-content; max-width:100%; }
.searchbar__field { width:auto; max-width:100%; field-sizing:content; min-width:5ch; }
.searchbar__bubbles { max-width:65%; overflow-x:auto; }

.searchbar__bubble.searchbar__user { background:var(--color-hover); color:var(--color-ink); }
.searchbar__user .tag__prefix { margin-right:.3em; }

.searchbar__user-input { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; white-space:pre; font-size:14px; }
.searchbar__user-input .tag__prefix { margin-right:.3em; }
.searchbar__fieldbox.is-user-query .searchbar__field { color:transparent; caret-color:var(--color-ink); }
.searchbar__fieldbox.is-user-query .searchbar__hint { display:none; }

/* The input anchors the center; filters extend independently to its left. */
.searchbar__center {
    position:relative;
    height:100%;
    width:fit-content;
    max-width:100%;
    margin:0 auto;
}
.searchbar__center .searchbar__fieldbox,
.searchbar__center .searchbar__bubbles:not(:empty) ~ .searchbar__fieldbox {
    display:block;
    margin:0;
}
.searchbar__center .searchbar__bubbles {
    position:absolute;
    right:calc(100% + 8px);
    top:50%;
    transform:translateY(-50%);
    margin:0;
    max-width: max(0px, calc((100vw - var(--dock-width) - 160px) / 2));
}

.searchbar > .tooltip { position:absolute; right:12px; top:50%; transform:translateY(-50%); }