/* ============================================================================
   GLOBAL SEARCH (/search)
   The page the header field opens: its own field on top, then either the
   history or the three sections the aggregated endpoint fills — tests,
   collections, authors.
   ========================================================================= */

.sr-root {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

/* ---------- The field ---------- */

.sr-field {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    box-sizing: border-box;
    height: var(--ctl-md);
    padding: 0 var(--s-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    color: var(--text-tertiary);
    /* The app morphs the origin field into this one. A Blazor route change has no shared element to
       morph, so the field plays the arrival instead — same 300ms, and the body follows 70ms behind it. */
    animation: sr-field-in 300ms var(--ease-out) both;
}

@keyframes sr-field-in {
    from { opacity: 0; transform: scaleX(.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-field {
        animation: none;
    }
}

.sr-field:focus-within {
    outline: 2px solid var(--border-focus);
    border-color: transparent;
}

.sr-field__icon {
    flex: 0 0 auto;
}

.sr-field__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-ui);
    font-size: var(--t-ui);
    color: var(--text-primary);
}

    .sr-field__input::placeholder {
        color: var(--text-tertiary);
    }

    .sr-field__input::-webkit-search-cancel-button {
        display: none;
    }

.sr-field__clear {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--r-xs);
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
}

@media (hover: hover) {
    .sr-field__clear:hover {
        background: var(--surface-sunken);
        color: var(--text-primary);
    }
}

/* ---------- Body: staggered behind the field, the way the app enters ---------- */

.sr-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    animation: sr-body-in 300ms var(--ease-out) 70ms both;
}

@keyframes sr-body-in {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-body {
        animation: none;
    }
}

/* ---------- Recent queries ---------- */

.sr-recents {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sr-recent {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    border-radius: var(--r-sm);
}

@media (hover: hover) {
    .sr-recent:hover {
        background: var(--surface-sunken);
    }
}

.sr-recent__text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 10px var(--s-3);
    border: none;
    background: none;
    font-family: var(--font-ui);
    font-size: var(--t-sub);
    font-weight: var(--w-medium);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .sr-recent__text svg {
        flex: 0 0 auto;
        color: var(--text-tertiary);
    }

.sr-recent__x {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--r-xs);
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
}

@media (hover: hover) {
    .sr-recent__x:hover {
        background: var(--surface);
        color: var(--text-primary);
    }
}

/* ---------- Authors ---------- */

.sr-authors {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.sr-author {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
    font-family: var(--font-ui);
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--d-fast) var(--ease-out);
}

@media (hover: hover) {
    .sr-author:hover {
        box-shadow: var(--elev-2);
    }
}

.sr-author__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.sr-author__body {
    display: grid;
    gap: 1px;
}

.sr-author__name {
    font-size: var(--t-sub);
    font-weight: var(--w-bold);
    color: var(--text-primary);
}

.sr-author__meta {
    font-size: var(--t-cap);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ---------- Empty and loading ---------- */

.sr-empty {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    padding: var(--s-12) var(--s-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
}

.sr-empty__title {
    margin: 0;
    font-weight: var(--w-semi);
    font-size: var(--t-ui);
    color: var(--text-primary);
}

.sr-empty__sub {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--t-sub);
    max-width: 46ch;
}

.sr-skeleton {
    background-color: var(--gray-300);
    cursor: default;
}

/* ---------- Searching state ---------- */

.sr-searching {
    display: grid;
    gap: var(--s-5);
}

.sr-searching__note {
    margin: 0;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--t-sub);
}

.sr-sk {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--surface-sunken);
    border-radius: var(--r-xs);
}

    .sr-sk::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .6) 50%, transparent 100%);
        transform: translateX(-100%);
        animation: sr-sk-sweep 1.4s ease-in-out infinite;
    }

@keyframes sr-sk-sweep {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-sk::after {
        animation: none;
    }
}

.sr-sk--title {
    width: 140px;
    height: 22px;
    border-radius: 8px;
}

.sr-sk--short {
    width: 108px;
}

.sr-sk-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sr-sk--square {
    width: 118px;
    height: 118px;
    border-radius: 16px;
}

.sr-sk--avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}