/**
 * Site search.
 * ============
 *
 * The trigger in the navbar, the overlay it opens, and the results page.
 * Everything is drawn from the design tokens, so it follows the palette with
 * the rest of the site.
 */

/* ------------------------------------------------------------------ *
 * The trigger
 * ------------------------------------------------------------------ */

.re-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    margin-left: auto;
    border: 1px solid var(--re-border);
    border-radius: var(--re-radius-sm);
    /* Matches .header-controls-lang-toggle, the control it sits nearest. */
    background: var(--re-surface-raised);
    color: var(--re-text-color);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background var(--re-transition), border-color var(--re-transition);
}

.re-search-trigger:hover,
.re-search-trigger:focus-visible {
    background: var(--re-surface-hover);
    border-color: var(--re-border-strong);
}

/* The keyboard hint. Silkscreen, so the pixel grid holds it at 8px. */
.re-search-hint {
    font-family: var(--re-font-ui);
    opacity: 0.55;
    border: 1px solid var(--re-border);
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 1;
}

/* No room for a hint beside the hamburger. */
@media (max-width: 767px) {
    .re-search-hint { display: none; }
    .re-search-trigger { margin-left: 0; margin-right: 8px; }
}

/* ------------------------------------------------------------------ *
 * The overlay
 * ------------------------------------------------------------------ */

.re-search {
    position: fixed;
    inset: 0;
    z-index: 21500;             /* over the lightbox's 21000 and the player */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(16px, 8vh, 96px) 16px 16px;
    /*
     * Dark enough to push the page back, light enough that the sheet still
     * has somewhere to lift off from. At 0.72 the scrim was almost as dark as
     * the panel on top of it and the whole overlay read as one flat shape.
     */
    background: color-mix(in srgb, var(--re-brand-900) 62%, transparent);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    animation: re-search-in 0.14s ease;
}

@keyframes re-search-in { from { opacity: 0; } to { opacity: 1; } }

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

html.re-search-open,
html.re-search-open body { overflow: hidden; }

.re-search-sheet {
    width: min(680px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    /*
     * --re-surface is the site's default panel, and it is the wrong token
     * here. It is 55% ink, tuned to sit on the PAGE - a mid-dark ground with
     * a particle field behind it. Over a scrim it has nothing to be lighter
     * than, so the sheet vanished into its own backdrop.
     *
     * brand-800 is one step up the ladder from the darkest, at most of the
     * way to opaque: still glass, still the palette, but unmistakably a panel
     * sitting in front of something.
     */
    background: var(--re-surface);
    background: color-mix(in srgb, var(--re-brand-800) 88%, transparent);
    backdrop-filter: var(--re-glass);
    -webkit-backdrop-filter: var(--re-glass);
    border: 1px solid var(--re-border-strong);
    border-radius: var(--re-radius-lg);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* --- the input row -------------------------------------------------- */

.re-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--re-border-faint);
    transition: border-color var(--re-transition), background var(--re-transition);
}

/*
 * The focus ring goes on the ROW, not the input.
 *
 * theme-tokens.css draws a 2px --re-brand-200 outline on anything focusable,
 * which is right for a button but wrong here: it traced a hard rectangle
 * around a borderless field in the middle of a panel and read as a browser
 * default rather than part of the design. The row lighting up instead says
 * the same thing in the site's own language.
 */
.re-search-box:focus-within {
    border-bottom-color: var(--re-brand-300);
    background: color-mix(in srgb, var(--re-brand-400) 8%, transparent);
}

.re-search-icon { opacity: 0.5; font-size: 15px; }

.re-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    color: var(--re-text-color);
    /* Body face, not Silkscreen: this is a field someone types a sentence
       into, and 8px pixel type is the wrong tool for that. */
    font-family: var(--re-font-body);
    font-size: 1rem;
}

/* Suppressed here because the row above shows the focus instead. */
.re-search-input:focus,
.re-search-input:focus-visible { outline: none !important; box-shadow: none !important; }

.re-search-input::placeholder { color: var(--re-text-muted); }

/* The browser's own clear button sits badly on a dark glass field. */
.re-search-input::-webkit-search-cancel-button { display: none; }

.re-search-esc {
    flex: 0 0 auto;
    font-family: var(--re-font-ui);
    background: none;
    border: 1px solid var(--re-border);
    border-radius: 3px;
    padding: 4px 6px;
    color: var(--re-text-color);
    opacity: 0.5;
    cursor: pointer;
}

.re-search-esc:hover { opacity: 1; }

/* --- results -------------------------------------------------------- */

.re-search-results {
    overflow-y: auto;
    overscroll-behavior: contain;   /* do not scroll the page behind it */
    padding: 6px;
}

.re-search-group { padding: 6px 0; }

.re-search-group-label {
    display: block;
    padding: 4px 10px;
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-brand-200);
    opacity: 0.7;
}

.re-search-hit,
.re-search-all {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border-radius: var(--re-radius-sm);
    color: var(--re-text-color);
    text-decoration: none;
}

.re-search-hit:hover,
.re-search-hit.is-active,
.re-search-all:hover,
.re-search-all.is-active {
    background: var(--re-surface-hover);
}

.re-search-hit-icon { flex: 0 0 auto; opacity: 0.5; font-size: 14px; }

.re-search-hit-body { min-width: 0; }

.re-search-hit-title,
.re-search-hit-snip {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.re-search-hit-title { font-family: var(--re-font-body); font-size: 0.92rem; }

.re-search-hit-snip {
    font-family: var(--re-font-body);
    font-size: 0.78rem;
    opacity: 0.55;
    margin-top: 2px;
}

/* The matched run. A background would fight the glass, so it is the accent
   colour and a little weight instead. */
.re-search-results mark {
    background: none;
    color: var(--re-brand-100);
    font-weight: 700;
}

.re-search-all {
    justify-content: center;
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-top: 1px solid var(--re-border-faint);
    border-radius: 0;
    margin-top: 4px;
    opacity: 0.75;
}

.re-search-empty {
    padding: 26px 16px;
    margin: 0;
    text-align: center;
    font-family: var(--re-font-body);
    color: var(--re-text-muted);
}

/* --- the key legend ------------------------------------------------- */

/*
 * The legend was 40% opacity with hairline chips on a dark panel, which came
 * out as three grey smudges - you could see that something was written there
 * and not what. 8px pixel type has no weight to spare, so it needs the
 * contrast instead: the row at 0.65 and the keys drawn as filled chips.
 */
.re-search-foot {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    padding: 10px 8px;
    border-top: 1px solid var(--re-border-faint);
    background: color-mix(in srgb, var(--re-brand-900) 45%, transparent);
    font-family: var(--re-font-ui);
    color: var(--re-text-color);
    opacity: 0.65;
}

.re-search-foot kbd {
    font-family: var(--re-font-ui);
    background: var(--re-surface-raised);
    border: 1px solid var(--re-border-strong);
    border-radius: 3px;
    padding: 3px 5px;
    margin-right: 3px;
    color: var(--re-brand-100);
    line-height: 1;
}

/* A phone has no arrow keys and the legend is just noise. */
@media (max-width: 640px) {
    .re-search-foot { display: none; }
    .re-search { padding-top: 12px; }
}

/* ------------------------------------------------------------------ *
 * The results page
 * ------------------------------------------------------------------ */

.sr-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 26px;
}

.sr-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    background: var(--re-surface-sunken);
    border: 1px solid var(--re-border);
    border-radius: var(--re-radius-sm);
    color: var(--re-text-color);
    font-family: var(--re-font-body);
    font-size: 1rem;
}

.sr-input:focus {
    outline: none;
    border-color: var(--re-border-strong);
}

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

.sr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.sr-link {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--page-rule, rgba(130, 107, 125, 0.22));
    text-decoration: none;
    border-radius: var(--re-radius-sm);
    transition: background 0.16s ease, padding-left 0.16s ease;
}

.sr-link:hover {
    background: var(--re-surface-hover);
    padding-left: 18px;
}

.sr-thumb {
    width: 56px;
    height: 42px;
    border-radius: var(--re-radius-sm);
    overflow: hidden;
    background: var(--re-surface-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sr-thumb-empty { color: var(--re-brand-300); opacity: 0.6; font-size: 16px; }

.sr-title {
    display: block;
    font-family: var(--re-font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--re-text-color);
}

.sr-snippet {
    display: block;
    font-family: var(--re-font-body);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--re-text-color);
    opacity: 0.6;
    margin-top: 3px;
}

.sr-kind {
    font-family: var(--re-font-ui);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--re-brand-300);
    opacity: 0.7;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .sr-link { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .sr-thumb, .sr-kind { display: none; }
}

/* ------------------------------------------------------------------ *
 * A track arrived at from a search result
 * ------------------------------------------------------------------ */

/*
 * Music has no page of its own, so a search result sends you to the list with
 * the track named. Without a marker you land in 368 rows with no idea which
 * one you asked for.
 */
.mu-track.is-found {
    animation: re-found 2.4s ease;
}

@keyframes re-found {
    0%, 70% { background: var(--re-surface-active); }
    100%    { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .mu-track.is-found { animation: none; background: var(--re-surface-active); }
}