/* Search results page (views/v2/search.php): title, search box, then the matching services as one list of rows
   with the name, category and the status in the last hour. */

@layer page {
    .results { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-7); }

    .results__head {
        display: grid;
        gap: var(--space-3);

        h1 { max-inline-size: 30ch; font-size: var(--step-4); letter-spacing: -.03em; overflow-wrap: anywhere; text-wrap: balance; }
    }
    .results__count { color: var(--muted); font-size: var(--step-0); }

    .results__form {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        max-inline-size: 40rem;
        margin-block-start: var(--space-2);
        padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--muted);
        transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);

        &:focus-within { border-color: var(--brand); background: var(--surface-2); box-shadow: 0 0 0 4px var(--brand-tint); color: var(--brand); }
        > .icon { inline-size: 1.2rem; block-size: 1.2rem; flex: none; }
        input { flex: 1; min-inline-size: 0; padding-block: var(--space-3); border: 0; background: none; color: var(--ink); font-size: var(--step-0); }
        input:focus { outline: none; }
        input::-webkit-search-cancel-button { display: none; }
        .btn { border-radius: var(--radius-sm); }
        &.is-loading .search__spinner { display: block; }
    }

    /* Suggestions under the results page box; rows reuse the dialog's .search__option styles (components.css) */
    .results__suggest {
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(100% + var(--space-2));
        z-index: 30;
        display: grid;
        padding: var(--space-2);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface-2);
        box-shadow: var(--shadow-lg);
        color: var(--ink-2);

        .search__all { justify-self: end; margin-block-start: var(--space-1); font-size: var(--step--1); }
    }

    /* One list, rows split by lines: position, logo, name and category, status, chevron */
    .results__list {
        max-inline-size: 56rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface-2);
        overflow: hidden;

        li + li { border-block-start: 1px solid var(--line); }
    }

    .result {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        color: var(--ink);
        text-decoration: none;
        transition: background var(--dur);

        .avatar { border-radius: 10px; }
        > .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--muted); rotate: -90deg; flex: none; transition: color var(--dur), translate var(--dur) var(--ease); }

        &:hover, &:focus-visible { background: var(--surface); }
        &:hover > .icon, &:focus-visible > .icon { color: var(--brand); translate: 2px 0; }
        &:hover .result__name { color: var(--brand); }
    }
    .result__pos { inline-size: 1.75rem; color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; text-align: end; flex: none; }
    .result__text { display: grid; min-inline-size: 0; flex: 1; }
    .result__name { overflow: hidden; font-size: var(--step-0); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur); }
    .result__label { overflow: hidden; color: var(--muted); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
    .result__state {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 2px var(--space-3) 2px var(--space-2);
        border-radius: var(--radius-pill);
        background: var(--s-tint);
        color: var(--s-ink);
        font-size: .8125rem;
        font-weight: 600;
        white-space: nowrap;
        flex: none;

        .status-dot { box-shadow: none; inline-size: .5rem; block-size: .5rem; }
    }

    @media (width < 40rem) {
        .result { padding-inline: var(--space-3); }
        .result__pos { display: none; }
        .result__state { padding: var(--space-1); }
        .result__state > span:last-child { display: none; }
    }

    .results__none {
        display: grid;
        justify-items: start;
        gap: var(--space-2);
        padding: var(--space-6);
        border-radius: var(--radius-lg);
        background: var(--surface);

        h2 { color: var(--ink); font-size: var(--step-2); overflow-wrap: anywhere; }
        p { color: var(--ink-2); }
        a { display: inline-flex; align-items: center; gap: var(--space-1); margin-block-start: var(--space-2); color: var(--brand); font-weight: 600; text-decoration: none; }
        a:hover { text-decoration: underline; }
        a .icon { inline-size: 1rem; block-size: 1rem; }
    }

    .results__browse {
        display: grid;
        gap: var(--space-3);

        h2 { color: var(--ink-2); font-size: var(--step-0); font-weight: 650; }
        .chips a { border-radius: var(--radius-sm); }
        .chips a:hover { background: var(--brand-tint); color: var(--ink); }
    }

    /* Not found (views/v2/404.php): a status check of the missing page */
    .notfound {
        display: grid;
        justify-items: center;
        gap: var(--space-5);
        max-inline-size: 40rem;
        padding-block: var(--space-8, 5rem) var(--space-7);
        text-align: center;

        h1 { font-size: var(--step-4); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
        .results__form { inline-size: 100%; margin: 0; text-align: left; }
    }

    .notfound__check {
        display: grid;
        justify-items: center;
        gap: var(--space-3);
        inline-size: min(100%, 22rem);
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }

    .notfound__pulse {
        inline-size: 100%;
        block-size: 3rem;

        path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
        .is-up { stroke: var(--chart-bar); }
        .is-down { stroke: var(--s-fill); stroke-dasharray: 145; stroke-dashoffset: 145; animation: notfound-flat 1.2s .3s var(--ease) forwards; }
    }

    @keyframes notfound-flat { to { stroke-dashoffset: 0; } }
    @media (prefers-reduced-motion: reduce) { .notfound__pulse .is-down { animation: none; stroke-dashoffset: 0; } }

    .notfound__code { color: var(--muted); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; }
    .notfound__lead { max-inline-size: 52ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; }

    .notfound__matches {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--space-2);
        color: var(--muted);
        font-size: var(--step--1);

        a {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
            border-radius: 999px;
            background: var(--surface);
            color: var(--ink);
            font-weight: 600;
            text-decoration: none;
        }

        a:hover { background: var(--surface-2); }
        .avatar { border-radius: 50%; }
    }

    .notfound__links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2) var(--space-5);
        padding-top: var(--space-3);
        font-size: var(--step--1);

        a { color: var(--muted); }
        a:hover { color: var(--brand); }
    }
}