@layer components {

    .search-page {
        max-width: var(--w-page);
        margin-inline: auto;
        padding: var(--s-8) var(--gutter) 0;
    }

    .search-page__head {
        display: grid;
        gap: var(--s-4);
        max-width: 860px;
    }

    .search-page__title {
        font-size: var(--t-3xl);
    }

    .search-page__form {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--s-3);
        padding-left: var(--s-4);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-1);
        background: var(--c-surface);
    }

    .search-page__form:focus-within {
        border-color: var(--c-ink);
    }

    .search-page__input {
        width: 100%;
        height: 56px;
        border: 0;
        background: none;
        font-size: var(--t-md);
        outline: none;
        appearance: none;
    }

    .search-page__form .btn {
        margin: 4px;
    }

    .search-page__summary {
        color: var(--c-muted);
    }

    .search-page__results,
    .search-page__idle {
        display: grid;
        gap: var(--s-7);
        margin-top: var(--s-7);
    }

    .search-page__block {
        display: grid;
        gap: var(--s-4);
    }

    .search-page__none {
        display: grid;
        gap: var(--s-2);
        max-width: 56ch;
        color: var(--c-muted);
    }

    .search-page__none-title {
        font-size: var(--t-xl);
        color: var(--c-ink);
    }

    .search-page__hits {
        display: grid;
        border-top: 1px solid var(--c-line);
    }

    .search-hit__link {
        display: grid;
        gap: var(--s-1);
        padding-block: var(--s-4);
        border-bottom: 1px solid var(--c-line);
    }

    .search-hit__title {
        font-size: var(--t-lg);
    }

    .search-hit__link:hover .search-hit__title {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }

    .search-hit__text {
        max-width: 80ch;
        font-size: var(--t-sm);
        color: var(--c-muted);
    }

}