/* Search — full-text query across the installation
/* --------------------------------------------------------------------------
/* Same Control Room language as the rest of the app: a hero block in the
/* form-hero family with a borderless input as the primary entry, followed
/* by datasheet tables grouped by result kind (assets, sections, zones, …).
/* --------------------------------------------------------------------------- */

@layer components {

    /* Hero — input as the page's display heading. Same 1px-rule + 3px stripe
       chrome as form-hero / asset-hero so search reads as part of the same
       visual family. Stripe colour is --primary (Arpedon blue) since search
       is an action surface, not a status surface. */
    .search-hero {
        background: var(--surface);
        border-block-end: 1px solid var(--primary);
        border-block-start: 1px solid var(--primary);
        box-shadow: inset 3px 0 0 var(--primary);
        margin-block-end: 1.5rem;
        padding: 1.25rem;
    }

    .search-hero__main {
        display: grid;
        gap: 0.6rem;
        min-inline-size: 0;
    }

    .search-hero__ids {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .search-hero__chip {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* Form — borderless input that acts as the hero display heading. The
       hairline bottom rule + clear button live on the form so the input
       can stay completely chromeless. */
    .search-hero__form {
        align-items: center;
        border-block-end: 1px solid var(--rule-strong);
        display: flex;
        gap: 0.5rem;
        margin-block-start: 0.2rem;
        padding-block-end: 0.4rem;
        position: relative;
    }

    .search-hero__input {
        background: transparent;
        border: 0;
        color: var(--ink);
        flex: 1;
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 3vw, 2rem);
        font-weight: 700;
        inline-size: 100%;
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin: 0;
        outline: 0;
        padding: 0;

        &::placeholder {
            color: var(--ink-mute);
            opacity: 1;
        }

        /* Hide the WebKit/Edge native search cancel button — we render our
           own .search-hero__clear, which also clears via the URL. */
        &::-webkit-search-cancel-button {
            -webkit-appearance: none;
            appearance: none;
        }
    }

    .search-hero__clear {
        align-items: center;
        background: transparent;
        border: 1px solid var(--rule);
        color: var(--ink-soft);
        display: inline-flex;
        flex: 0 0 auto;
        font-family: var(--font-data);
        font-size: 1.1rem;
        height: 1.75rem;
        justify-content: center;
        line-height: 1;
        text-decoration: none;
        width: 1.75rem;

        @media (any-hover: hover) {
            &:hover {
                border-color: var(--accent);
                color: var(--accent);
            }
        }
    }

    .search-hero__hint {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        margin: 0;
        text-transform: uppercase;
    }

    /* Result groups — vertical rhythm between datasheet sections. */
    .search-block {
        margin-block-end: 1.75rem;
    }

    /* Excerpt cell — wraps long highlighted text so multi-line excerpts
       (comments, inspection notes, route descriptions) read naturally
       inside the datasheet's mono cells. */
    .search-excerpt {
        color: var(--ink);
        display: inline-block;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        letter-spacing: 0;
        line-height: 1.4;
        white-space: normal;
    }

    /* Highlight marks — keep the body ink, paint the background with the
       Arpedon Red accent at low alpha so matches read as editorial
       weight, not as a yellow marker pen. */
    .search-hero mark,
    .search-block mark {
        background: color-mix(in oklch, var(--accent) 22%, transparent);
        border-radius: 0;
        box-decoration-break: clone;
        color: inherit;
        padding-inline: 0.1em;
    }

    @media (max-width: 639px) {
        .search-hero {
            padding: 0.9rem;
        }
    }
}