/* Hangs below the header's top row instead of standing centred in the screen, where the
   platform puts a modal dialog. */
.search-overlay {
    /* 24px → 48px between the field and what follows it, and inside the answer. */
    --search-overlay-gap: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.017937, 3rem);

    position: fixed;
    inset-block-start: var(--sav-header-search-top, 0px);
    inset-inline: 0;
    width: auto;
    max-width: none;
    max-block-size: calc(100dvh - var(--sav-header-search-top, 0px));
    margin: 0;
    /* 24px → 48px above, 60px → 92px below. */
    padding-block: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.017937, 3rem)
        clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.023917, 5.75rem);
    padding-inline: var(--sav-page-margin);
    overflow-y: auto;
    border: 0;
    background-color: var(--sav-color-weiss);

    /* A dialog takes its text colour from the user agent, so the one on the body never reaches
       into it. */
    color: var(--sav-color-dunkelblau);

    /* The rows belong to the sheet and not to its open state: a state only holds while the
       attribute is there, and the layout would fall apart the moment it goes — with the content
       stretching over the whole height while the sheet is still fading. The column is the 890px
       the design draws. */
    grid-template-columns: min(100%, 55.625rem);
    justify-content: center;
    gap: var(--search-overlay-gap);
    align-content: start;

    /* Only while open: a `display` of ours would keep the closed sheet on the page. */
    &[open] {
        display: grid;
    }

    /* A modal dialog makes what is under it unusable, not unmovable: scrolled on, the sheet stays
       where it is while the header row it hangs from travels away. The gutter stands in for the
       scrollbar the lock takes away, or the page under the sheet jumps sideways wherever
       scrollbars hold a place of their own. */
    html:has(&[open]) {
        overflow: hidden;
        scrollbar-gutter: stable;
    }

    /* Comes in rather than cutting in. The closed sheet keeps the `display` of the platform, or
       the field would not be there to take the focus at the moment it opens — `allow-discrete`
       and `@starting-style` are what let it be transitioned all the same. */
    transition-property: opacity, clip-path, display, overlay;
    transition-timing-function: var(--sav-ease-out);
    transition-behavior: allow-discrete;

    /* On the narrow screen the search is a screen of its own rather than a sheet over the menu
       it was opened from, and it fades over that menu. */
    @media (width < 64rem) {
        min-block-size: 100dvh;
        opacity: 0;
        transition-duration: var(--sav-duration-fade);

        &[open] {
            opacity: 1;

            @starting-style {
                opacity: 0;
            }

            /* What the sheet holds glides up into place, so the field reads as having risen out
               of the menu rather than as having replaced it. */
            > * {
                animation: search-overlay-settle var(--sav-duration-unfold) var(--sav-ease-out);
            }
        }
    }

    @media (width >= 64rem) {
        /* The fine line the design draws where the sheet meets the service row it hangs under;
           the narrow screen starts at the upper edge of the screen, where none is drawn. */
        border-block-start: 1px solid var(--sav-color-mittelgrau);

        /* Unfolded out of the header rather than moved, so what it holds stands still while its
           lower edge travels down. */
        clip-path: inset(0 0 100% 0);
        transition-duration: var(--sav-duration-unfold);

        &[open] {
            clip-path: inset(0);

            @starting-style {
                clip-path: inset(0 0 100% 0);
            }

            /* Quicker than the unfolding around it, so it appears in a sheet already on its way. */
            > * {
                animation: search-overlay-appear var(--sav-duration-fade) var(--sav-ease-out);
            }
        }
    }

    /* Clear where the service row of the header stands, dimmed from the lower edge of the sheet
       on. The shorthand, because the user agent's own dim is a background colour and would show
       through the clear part. */
    &::backdrop {
        background: linear-gradient(
            to bottom,
            transparent 0 var(--sav-header-search-top, 0px),
            rgb(0 0 0 / 0.15) var(--sav-header-search-top, 0px)
        );

        /* Comes with the sheet instead of darkening the page before it is there. */
        opacity: 0;
        transition-property: opacity, display, overlay;
        transition-duration: var(--sav-duration-fade);
        transition-timing-function: var(--sav-ease-out);
        transition-behavior: allow-discrete;
    }

    &[open]::backdrop {
        opacity: 1;

        @starting-style {
            opacity: 0;
        }
    }

    /* Whoever asked for less movement gets the sheet without the unfolding and without the
       glide; the durations stay short rather than none, since `display` and `overlay` hold the
       sheet for as long as they run. */
    @media (prefers-reduced-motion: reduce) {
        clip-path: none;
        transition-duration: 150ms;

        &[open] {
            clip-path: none;

            > * {
                animation: none;
            }
        }

        &::backdrop {
            transition-duration: 150ms;
        }
    }
}

/* The same round field the menu closes with, on the same spot — and only where the sheet covers
   the screen, since the design draws no button beside a page that can be clicked. */
.search-overlay__close {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--sav-color-hellgrau);
    color: var(--sav-color-dunkelblau);
    cursor: pointer;

    > svg {
        width: 24px;
        height: 24px;
    }

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    @media (width >= 64rem) {
        display: none;
    }
}

/* The input carries no box of its own, so the pill takes its focus ring. */
.search-overlay__form {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: 3.75rem;
    /* 30px → 46px before the text; 24px after the magnifier at both widths. */
    padding-inline: clamp(1.875rem, 1.875rem + (100vw - 24.375rem) * 0.011958, 2.875rem) 1.5rem;
    border-radius: 6.25rem;
    background-color: var(--sav-color-hellgrau);
}

.search-overlay__field {
    flex: 1 1 auto;
    min-width: 0;
    /* The user agent pads a field of its own accord, which would make the pill taller. */
    padding: 0;
    border: 0;
    background-color: transparent;

    /* The pill shows the focus, so a second ring inside it would only double it. */
    &:focus-visible {
        outline: none;
    }

    /* Safari draws its own decorations on a search field. */
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
        appearance: none;
    }

    &::placeholder {
        color: var(--sav-color-dunkelblau);
        opacity: 1;
    }
}

.search-overlay__submit {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--sav-color-dunkelblau);
    cursor: pointer;

    &:hover,
    &:active {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    /* 30px → 32px, and an inlined icon carries no size of its own. */
    & svg {
        inline-size: clamp(1.875rem, 1.875rem + (100vw - 24.375rem) * 0.001495, 2rem);
        block-size: clamp(1.875rem, 1.875rem + (100vw - 24.375rem) * 0.001495, 2rem);
    }
}

/* A frame is a custom element, which the user agent gives no `display` at all. */
.search-overlay__answer {
    display: grid;
    gap: var(--search-overlay-gap);
    align-content: start;

    /* Empty until a term is answered, where it would otherwise take a row of the sheet and the
       distance around it would stand twice. */
    &:not(:has(> *)) {
        display: none;
    }

    /* Turbo marks the part while an answer is on its way. The delay is the point: an answer
       under a third of a second never dims at all, so a quick one does not flicker. */
    &[aria-busy='true'] {
        opacity: 0.5;
        transition: opacity 100ms 300ms;
    }
}

/* The themes stand while nothing has been typed; an answer above them takes their place. */
.search-overlay__quicklinks {
    .search-overlay__answer:has(> *) ~ & {
        display: none;
    }
}

.search-overlay__title {
    /* 24px to the text of the first entry, 14 of which that entry brings along. */
    margin-block-end: 0.625rem;
    /* Without it the heading takes the Blau every other heading on the page carries. */
    color: var(--sav-color-dunkelblau);
}

.search-overlay__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A 60px row: the 32px line of the text, 13px to the rule under it and 14px after the rule. */
.search-overlay__entry {
    padding-block: 0.875rem 0.8125rem;
    border-block-end: 1px solid var(--sav-color-mittelgrau);
}

.search-overlay__link {
    display: flex;
    align-items: center;
    /* The symbol stands at the left edge of the row, the title 12px after it. */
    gap: 0.75rem;
    /* Without it the entry takes the Blau every other link on the page carries. */
    color: var(--sav-color-dunkelblau);
    text-decoration: none;

    &:hover,
    &:active {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }

    & .icon {
        flex: none;
        inline-size: 1.5rem;
        block-size: 1.5rem;
    }
}

/* The heavier cut of the design, in place of the colour a browser paints the element with. */
.search-overlay__match {
    background: none;
    color: inherit;
    font-weight: var(--sav-font-weight-regular);
}

.search-overlay__all {
    justify-self: start;
}

@keyframes search-overlay-settle {
    from {
        translate: 0 1rem;
    }
}

@keyframes search-overlay-appear {
    from {
        opacity: 0;
    }
}