/* ============================================================
   Поиск: единственное поле в шапке (строкой под меню), подсказка
   тегов после «#», разобранный запрос на странице результатов и
   подсветка найденных слов в ленте.
   Токены — из journal.css, он подключается раньше.
   ============================================================ */

/* Поле поиска висит справа ПОД чертой шапки, прижатое к ней снизу, и
   позиционировано абсолютно относительно .header — из потока выпадает,
   высоту шапки и положение контента не меняет. Фиксированная ширина,
   никаких изменений размера при фокусе. По цвету сливается с фоном
   страницы, выделяется только рамкой. На телефоне (ниже) — в потоке,
   на всю ширину под меню: над контентом ему там места нет. */
.search-form {
    display: flex;
    align-items: stretch;
    width: 240px;
    position: absolute;
    right: 0;
    top: 100%;          /* низ padding-box шапки, то есть сразу над её чертой… */
    margin-top: 8px;    /* …плюс сама черта (2px) и небольшой зазор */
}
.search-form__field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.search-form input[type="search"] {
    width: 100%;
    padding: .3rem .6rem;
    font: inherit;
    font-size: .82rem;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-appearance: none;
}
.search-form input[type="search"]::placeholder { color: var(--color-muted); }
.search-form input[type="search"]:focus { outline: none; border-color: var(--color-muted); }
.search-form__btn {
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .55rem;
    border: 1px solid var(--color-border);
    border-radius: 0 6px 6px 0;
    background: var(--color-bg);
    color: var(--color-muted);
    cursor: pointer;
}
.search-form__btn:hover { color: var(--color-text); }
.search-form:focus-within .search-form__btn { border-color: var(--color-muted); }

/* Подсказка тегов после «#» */
.search-form__suggest {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(30, 41, 59, .08);
    max-height: 240px;
    overflow-y: auto;
    text-align: left;
}
.search-form__suggest[hidden] { display: none; }
.search-form__option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem;
    font-size: .85rem;
    cursor: pointer;
    border-left: 3px solid var(--accent, var(--color-border));
}
.search-form__option:hover, .search-form__option.is-active { background: var(--color-bg); }
.search-form__option .tp-cloud__n { font-size: .7rem; color: var(--color-muted); margin-left: auto; }

/* Страница результатов: заголовок и разобранный запрос, поля нет — оно в шапке */
.srch-head { padding: 2rem 0 1rem; }
.srch-head h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: .35rem; }
.srch-summary { margin: 0; font-size: .95rem; color: var(--color-body); display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }
.srch-query { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.srch-word { font-weight: 600; color: var(--color-text); }
.srch-hint { font-size: .85rem; color: var(--color-muted); margin-top: .5rem; }

/* Фрагмент текста с найденным словом внутри полоски */
.tp-row__excerpt, .journal-entry__content .tp-row__excerpt {
    display: block;
    font-size: .85rem;
    color: var(--color-body);
    margin-top: .2rem;
}
mark { background: #fde68a; color: inherit; padding: 0 .1em; border-radius: 2px; }

@media (max-width: 768px) {
    .search-form { position: static; width: 100%; margin-top: 0; }
}