/*
 * People search.
 *
 * ### The form is a GET form, and it looks like one
 *
 * The term is in the URL, so a search can be linked, bookmarked and reloaded, and the browser's own back
 * button walks back through the searches. The field is therefore styled as a permanent part of the page
 * rather than as a control that disappears once it has been used: it keeps the term after a search, and the
 * reader edits what they typed instead of typing it again.
 *
 * ### One control, not a field beside a button
 *
 * The box and the button are joined into a single bar — the field takes the width, the button sits inside
 * its right end — because searching is one act, and on a narrow screen nothing has to drop beneath
 * anything: the field shrinks and the button keeps its word. The script layer searches while the reader
 * types, so the button is the fallback and the confirmation, not the only way in.
 *
 * ### A refused term is a message on the field
 *
 * One character is too short to search for, and the service says so. That answer belongs beside the box — it
 * is the box that has to change — which is why `.field__error` from `forms.css` is used here rather than
 * anything page-level: a rejected search field looks exactly like every other rejected field in the
 * application (§92).
 *
 * ### Four states, three of them not results
 *
 * Nothing typed yet, a term that was refused, a term that matched nobody, and matches. They are distinct in
 * the markup, so nothing here has to guess which one it is looking at, and the reader is never told "no
 * results" for a search that was never run.
 */

.search {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.search__header {
    margin-bottom: var(--space-5);
}

.search__title {
    margin-top: 0;
}

.search__intro {
    color: var(--colour-ink-quiet);
    max-width: var(--measure);
}

.search__form .field {
    margin: 0;
}

/* The joined bar: one border around field and button together. The ring a focused control shows in the
   rest of the application moves to the bar itself, because the border it would highlight belongs to the
   pair now, not to the input on its own — so the input's own focus outline is switched off below, and
   the bar's ring is the single visible indicator (WCAG 2.4.7). Hover answers with the focus border
   colour rather than the ring: the bar acknowledges the pointer without claiming to be focused. */
.search__box {
    display: flex;
    align-items: stretch;
    max-width: 32rem;

    background-color: var(--colour-surface);
    border: var(--border-width) solid var(--colour-border-strong);
    border-radius: var(--radius-md);

    transition: border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing);
}

.search__box:hover {
    border-color: var(--colour-border-focus);
}

.search__box:focus-within {
    border-color: var(--colour-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--colour-focus) 40%, transparent);
}

/* The input keeps the shared control's sizes but gives up its own border and corner rounding — the bar
   carries them — and `max-width: none` because the width limit now belongs to the bar. */
.search__box .search__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 3rem;

    border: 0;
    border-radius: 0;
    background-color: transparent;
}

/* The bar's ring is the focus indicator; a second one around the input inside the bar is noise. */
.search__box .search__input:focus,
.search__box .search__input:focus-visible {
    outline: none;
}

/* Slightly inset, so the button reads as inside the bar rather than glued to its edge; the rounded end
   matches the bar's own corner on the outside and stays square against the field. */
.search__submit {
    margin-block: 0.3rem;
    margin-inline: 0 var(--space-2);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.search__results {
    margin-top: var(--space-5);
}

.search__list {
    margin: 0;
}