/* ============================================================
   THE REF PAGE
   Search System
   ============================================================ */


/* ============================================================
   1. SHARED SEARCH RESULTS
   ============================================================ */

.search-result {
    display:
        grid;

    grid-template-columns:
        130px minmax(0, 1fr);

    grid-template-areas:
        "meta title"
        "meta description"
        "meta tags";

    column-gap:
        var(--space-4);

    row-gap:
        var(--space-2);

    min-width:
        0;

    padding:
        var(--space-4);

    border-bottom:
        1px solid var(--color-border-soft);

    background:
        var(--color-surface);
}


.search-result:last-child {
    border-bottom:
        0;
}


/* ------------------------------------------------------------
   Result meta
   ------------------------------------------------------------ */

.search-result-meta {
    grid-area:
        meta;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        750;

    letter-spacing:
        0.045em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}


.search-result-meta>span[aria-hidden="true"] {
    display:
        none;
}


/* ------------------------------------------------------------
   Result title
   ------------------------------------------------------------ */

.search-result-link {
    grid-area:
        title;

    width:
        fit-content;

    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.2rem,
            2vw,
            1.65rem);

    font-stretch:
        var(--font-stretch-display);

    font-weight:
        850;

    letter-spacing:
        0.025em;

    line-height:
        1.05;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        color var(--transition-fast);
}


.search-result-link:hover,
.search-result-link:focus-visible {
    color:
        var(--color-accent);
}


/* ------------------------------------------------------------
   Result description
   ------------------------------------------------------------ */

.search-result-description {
    grid-area:
        description;

    max-width:
        72ch;

    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);

    line-height:
        1.55;
}


/* ------------------------------------------------------------
   Result tags
   ------------------------------------------------------------ */

.search-result-tags {
    grid-area:
        tags;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--space-2);

    padding-top:
        var(--space-1);
}


.search-result-tags .tag {
    text-decoration:
        none;
}


/* ============================================================
   2. SEARCH EMPTY / LOADING STATES
   ============================================================ */

.search-empty,
.search-results-loading {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--space-3);

    min-height:
        150px;

    padding:
        var(--space-5);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-sm);

    text-align:
        center;
}


.search-results-loading i {
    color:
        var(--color-accent);
}


/* ============================================================
   3. GLOBAL SEARCH DIALOG
   ============================================================ */

.search-dialog {
    width:
        min(760px,
            calc(100vw - 2rem));
    max-height:
        min(760px,
            calc(100vh - 2rem));
    margin:
        auto;
    padding:
        0;
    overflow:
        hidden;
    border:
        var(--border-width-heavy) solid var(--color-border);
    border-radius:
        0;
    background:
        var(--color-surface);
    color:
        var(--color-text);
}

.search-dialog::backdrop {
    background:
        rgba(0, 0, 0, 0.62);
}

/* ------------------------------------------------------------
   Dialog panel
   ------------------------------------------------------------ */

.search-dialog-panel {
    display:
        flex;
    flex-direction:
        column;
    max-height:
        min(754px,
            calc(100vh - 2rem));
}

/* ------------------------------------------------------------
   Dialog header
   ------------------------------------------------------------ */

.search-dialog-header {
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        var(--space-4);
    min-height:
        86px;
    padding:
        var(--space-4);
    border-bottom:
        var(--border-width) solid var(--color-border);
    background:
        var(--color-surface-2);
}

.search-dialog-heading .eyebrow {
    display:
        block;
    margin-bottom:
        var(--space-1);
}

.search-dialog-heading h2 {
    margin:
        0;
    font-size:
        clamp(1.35rem,
            3vw,
            2rem);
    line-height:
        1;
}

.search-dialog-close {
    display:
        grid;
    place-items:
        center;
    flex:
        0 0 auto;
    width:
        42px;
    height:
        42px;
    padding:
        0;
    border:
        var(--border-width) solid var(--color-border);
    border-radius:
        0;
    background:
        var(--color-bg);
    color:
        var(--color-text);
    cursor:
        pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.search-dialog-close:hover,
.search-dialog-close:focus-visible {
    background:
        var(--color-accent);
    color:
        var(--color-border);
}

/* ------------------------------------------------------------
   Dialog search form
   ------------------------------------------------------------ */

.search-dialog-form {
    padding:
        var(--space-4);
    border-bottom:
        var(--border-width) solid var(--color-border);
}

.search-dialog-input-row {
    display:
        grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    align-items:
        center;
    min-height:
        54px;
    border:
        var(--border-width) solid var(--color-border);
    background:
        var(--color-bg);
}

.search-dialog-input-row>i {
    padding-inline:
        var(--space-4);
    color:
        var(--color-accent);
    font-size:
        1.05rem;
}

.search-dialog-input-row input {
    width:
        100%;
    min-width:
        0;
    min-height:
        50px;
    padding:
        var(--space-3) var(--space-4) var(--space-3) var(--space-2);
    border:
        0;
    outline:
        0;
    background:
        transparent;
    color:
        var(--color-text);
    font:
        inherit;
}

.search-dialog-input-row input::placeholder {
    color:
        var(--color-text-muted);
}

/* ------------------------------------------------------------
   Dialog status
   ------------------------------------------------------------ */

.search-dialog-status {
    padding:
        var(--space-2) var(--space-4);
    border-bottom:
        1px solid var(--color-border-soft);
    background:
        var(--color-surface-2);
    color:
        var(--color-text-muted);
    font-family:
        var(--font-mono);
    font-size:
        var(--text-xs);
    font-weight:
        700;
    letter-spacing:
        0.03em;
}

/* ------------------------------------------------------------
   Dialog results
   ------------------------------------------------------------ */

.search-dialog-results {
    min-height:
        0;
    overflow-y:
        auto;
}

.search-dialog .search-result {
    grid-template-columns:
        1fr;
    grid-template-areas:
        "meta"
        "title"
        "description"
        "tags";
    gap:
        var(--space-2);
    padding:
        var(--space-3) var(--space-4);
}

.search-dialog .search-result-meta {
    flex-direction:
        row;
    align-items:
        center;
    gap:
        var(--space-2);
}

.search-dialog .search-result-meta>span[aria-hidden="true"] {
    display:
        inline;
}

.search-dialog .search-result-link {
    font-size:
        clamp(1.05rem,
            2vw,
            1.3rem);
}

.search-dialog .search-result-tags {
    display:
        none;
}

/* ------------------------------------------------------------
   Dialog footer
   ------------------------------------------------------------ */

.search-dialog-footer {
    display:
        flex;
    align-items:
        center;
    justify-content:
        space-between;
    gap:
        var(--space-3);
    margin-top:
        auto;
    padding:
        var(--space-3) var(--space-4);
    border-top:
        var(--border-width) solid var(--color-border);
    background:
        var(--color-surface-2);
    color:
        var(--color-text-muted);
    font-family:
        var(--font-mono);
    font-size:
        var(--text-xs);
    font-weight:
        700;
    text-transform:
        uppercase;
}


/* ============================================================
   4. SEARCH PAGE
   ============================================================ */

.search-page {
    width:
        100%;

    border:
        var(--border-width-heavy) solid var(--color-border);

    background:
        var(--color-surface);
}


/* ============================================================
   5. SEARCH PAGE HERO
   ============================================================ */

.search-page-hero {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items:
        end;

    gap:
        var(--space-5);

    padding:
        clamp(1.25rem,
            3vw,
            2.5rem);

    border-bottom:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface-2);
}


.search-page-hero-copy {
    max-width:
        760px;
}


.search-page-hero-copy .eyebrow {
    display:
        block;

    margin-bottom:
        var(--space-3);
}


.search-page-hero-copy h1 {
    margin:
        0;

    font-size:
        clamp(2.4rem,
            7vw,
            5.5rem);

    line-height:
        0.88;
}


.search-page-hero-copy p {
    max-width:
        66ch;

    margin:
        var(--space-4) 0 0;

    color:
        var(--color-text-muted);

    font-size:
        clamp(1rem,
            1.4vw,
            1.15rem);

    line-height:
        1.55;
}


/* ------------------------------------------------------------
   Hero meta
   ------------------------------------------------------------ */

.search-page-hero-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        var(--space-2);
}


.search-page-hero-meta span {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-2);

    min-height:
        34px;

    padding:
        .45rem .65rem;

    border:
        1px solid var(--color-border);

    background:
        var(--color-bg);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        750;

    text-transform:
        uppercase;
}


.search-page-hero-meta i {
    color:
        var(--color-accent);
}


/* ============================================================
   6. SEARCH CONSOLE
   ============================================================ */

.search-console {
    border-bottom:
        var(--border-width) solid var(--color-border);
}


/* ------------------------------------------------------------
   Console header
   ------------------------------------------------------------ */

.search-console-header,
.search-filters-header,
.search-results-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    min-height:
        76px;

    padding:
        var(--space-3) var(--space-4);

    border-bottom:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface-2);
}


.search-console-header .eyebrow,
.search-filters-header .eyebrow,
.search-results-header .eyebrow {
    display:
        block;

    margin-bottom:
        var(--space-1);
}


.search-console-header h2,
.search-filters-header h2,
.search-results-header h2 {
    margin:
        0;

    font-size:
        clamp(1.35rem,
            2.2vw,
            2rem);

    line-height:
        1;
}


.search-console-index-label {
    flex:
        0 0 auto;

    padding:
        .45rem .65rem;

    border:
        1px solid var(--color-border);

    background:
        var(--color-accent);

    color:
        var(--color-border);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        850;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}


/* ------------------------------------------------------------
   Console body
   ------------------------------------------------------------ */

.search-console-body {
    padding:
        clamp(1rem,
            2vw,
            1.75rem);
}


/* ============================================================
   7. SEARCH FORM
   ============================================================ */

.search-page-form {
    margin:
        0;
}


.search-page-input-wrap {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr) auto;

    align-items:
        stretch;

    width:
        100%;

    min-height:
        66px;

    border:
        var(--border-width-heavy) solid var(--color-border);

    background:
        var(--color-bg);
}


.search-page-input-icon {
    display:
        grid;

    place-items:
        center;

    width:
        62px;

    border-right:
        var(--border-width) solid var(--color-border);

    color:
        var(--color-accent);

    font-size:
        1.2rem;
}


.search-page-input {
    min-width:
        0;

    width:
        100%;

    padding:
        var(--space-3) var(--space-4);

    border:
        0;

    outline:
        0;

    background:
        transparent;

    color:
        var(--color-text);

    font-family:
        var(--font-mono);

    font-size:
        clamp(.95rem,
            1.5vw,
            1.1rem);

    font-weight:
        650;
}


.search-page-input::placeholder {
    color:
        var(--color-text-muted);
}


.search-page-submit {
    min-width:
        138px;

    border-width:
        0 0 0 var(--border-width);

    border-radius:
        0;
}


/* ------------------------------------------------------------
   Example searches
   ------------------------------------------------------------ */

.search-examples {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        var(--space-2);

    margin-top:
        var(--space-3);
}


.search-examples-label {
    margin-right:
        var(--space-1);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        800;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.search-examples .tag {
    cursor:
        pointer;
}


/* ============================================================
   8. FILTER PANEL
   ============================================================ */

.search-filters {
    border-bottom:
        var(--border-width) solid var(--color-border);
}


/* ------------------------------------------------------------
   Clear
   ------------------------------------------------------------ */

.search-clear {
    flex:
        0 0 auto;
}


/* ------------------------------------------------------------
   Filter rows
   ------------------------------------------------------------ */

.search-filter-row {
    display:
        grid;

    grid-template-columns:
        150px minmax(0, 1fr);

    min-width:
        0;

    border-bottom:
        1px solid var(--color-border-soft);
}


.search-filter-row:last-child {
    border-bottom:
        0;
}


.search-filter-heading {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        var(--space-2);

    padding:
        var(--space-4);

    border-right:
        1px solid var(--color-border-soft);

    background:
        var(--color-surface-2);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        800;

    letter-spacing:
        .04em;

    text-transform:
        uppercase;
}


.search-filter-heading i {
    width:
        1.1rem;

    color:
        var(--color-accent);

    text-align:
        center;
}


/* ------------------------------------------------------------
   Filter options
   ------------------------------------------------------------ */

.search-filter-options {
    display:
        flex;

    flex-wrap:
        wrap;

    align-content:
        flex-start;

    gap:
        var(--space-2);

    min-width:
        0;

    padding:
        var(--space-3) var(--space-4);
}


.search-filter-loading {
    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);
}


/* ------------------------------------------------------------
   Generated filter buttons
   ------------------------------------------------------------ */

.search-filter {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        .45rem;

    cursor:
        pointer;
}


.search-filter.is-active {
    border-color:
        var(--color-border);

    background:
        var(--color-accent);

    color:
        var(--color-border);
}


.search-filter-count {
    display:
        inline-grid;

    place-items:
        center;

    min-width:
        1.45rem;

    height:
        1.45rem;

    padding-inline:
        .3rem;

    border:
        1px solid currentColor;

    font-family:
        var(--font-mono);

    font-size:
        .65rem;

    font-weight:
        850;

    line-height:
        1;
}


/* ============================================================
   9. RESULTS PANEL
   ============================================================ */

.search-results-panel {
    min-width:
        0;
}


/* ------------------------------------------------------------
   Result count / status
   ------------------------------------------------------------ */

.search-results-status {
    flex:
        0 0 auto;

    max-width:
        50%;

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        750;

    line-height:
        1.35;

    text-align:
        right;
}


/* ------------------------------------------------------------
   Result container
   ------------------------------------------------------------ */

.search-results {
    min-width:
        0;
}


/* ============================================================
   10. FOCUS
   ============================================================ */

.search-page-input:focus-visible,
.search-dialog-input-row input:focus-visible {
    outline:
        0;
}


.search-page-input-wrap:focus-within,
.search-dialog-input-row:focus-within {
    box-shadow:
        inset 0 0 0 2px var(--color-accent);
}


/* ============================================================
   11. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .search-page-hero {
        grid-template-columns:
            1fr;

        align-items:
            start;
    }


    .search-page-hero-meta {
        justify-content:
            flex-start;
    }


    .search-filter-row {
        grid-template-columns:
            120px minmax(0, 1fr);
    }


    .search-result {
        grid-template-columns:
            110px minmax(0, 1fr);
    }

}


@media (max-width: 640px) {

    /* ------------------------------------------------------------
       Dialog
       ------------------------------------------------------------ */

    .search-dialog {
        width:
            calc(100vw - 1rem);

        max-height:
            calc(100vh - 1rem);
    }


    .search-dialog-panel {
        max-height:
            calc(100vh - 1rem);
    }


    .search-dialog-header {
        min-height:
            72px;

        padding:
            var(--space-3);
    }


    .search-dialog-form {
        padding:
            var(--space-3);
    }


    .search-dialog-footer {
        display:
            none;
    }


    /* ------------------------------------------------------------
       Search hero
       ------------------------------------------------------------ */

    .search-page-hero {
        padding:
            var(--space-4);
    }


    .search-page-hero-copy h1 {
        font-size:
            clamp(2.2rem,
                14vw,
                4rem);
    }


    /* ------------------------------------------------------------
       Headers
       ------------------------------------------------------------ */

    .search-console-header,
    .search-filters-header,
    .search-results-header {
        min-height:
            68px;

        padding:
            var(--space-3);
    }


    .search-console-index-label {
        display:
            none;
    }


    /* ------------------------------------------------------------
       Main search field
       ------------------------------------------------------------ */

    .search-console-body {
        padding:
            var(--space-3);
    }


    .search-page-input-wrap {
        grid-template-columns:
            48px minmax(0, 1fr);

        min-height:
            56px;
    }


    .search-page-input-icon {
        width:
            48px;
    }


    .search-page-input {
        min-height:
            52px;

        padding:
            var(--space-2) var(--space-3);
    }


    .search-page-submit {
        grid-column:
            1 / -1;

        min-height:
            48px;

        border-width:
            var(--border-width) 0 0;

        border-top:
            var(--border-width) solid var(--color-border);
    }


    /* ------------------------------------------------------------
       Filters
       ------------------------------------------------------------ */

    .search-filter-row {
        grid-template-columns:
            1fr;
    }


    .search-filter-heading {
        padding:
            var(--space-2) var(--space-3);

        border-right:
            0;

        border-bottom:
            1px solid var(--color-border-soft);
    }


    .search-filter-options {
        padding:
            var(--space-3);
    }


    .search-filter-row--tags .search-filter-options {
        max-height:
            none;
    }


    /* ------------------------------------------------------------
       Results
       ------------------------------------------------------------ */

    .search-results-header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            var(--space-2);
    }


    .search-results-status {
        max-width:
            none;

        text-align:
            left;
    }


    .search-result {
        grid-template-columns:
            1fr;

        grid-template-areas:
            "meta"
            "title"
            "description"
            "tags";

        gap:
            var(--space-2);

        padding:
            var(--space-4) var(--space-3);
    }


    .search-result-meta {
        flex-direction:
            row;

        align-items:
            center;

        gap:
            var(--space-2);
    }


    .search-result-meta>span[aria-hidden="true"] {
        display:
            inline;
    }

}


@media (max-width: 420px) {

    .search-filters-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .search-clear {
        width:
            100%;
    }


    .search-examples {
        align-items:
            flex-start;
    }

}