/* Typeahead dropdown for search inputs.
   Positioned absolutely under the .header-search input (or .home-search-box),
   sharing the site's CSS variables. */

.typeahead-dropdown {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 360px;
    overflow-y: auto;
}

/* Row uses flex-wrap so a wide meta column drops below the name on narrow
   screens (mobile / topbar) instead of overlapping it. `align-items: baseline`
   lines up the name's first line with meta's first line when they share a row. */
.typeahead-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text-primary);
    line-height: 1.4;
    border-bottom: 1px solid var(--border-color);
}

.typeahead-row:last-child { border-bottom: none; }

.typeahead-row-active,
.typeahead-row:hover {
    background: var(--bg-primary);
    color: var(--accent-hover);
}

/* Default main = plain flex item that wraps its text. Card rows rely on
   this. Field/enum rows override to inline-flex below so their code+label
   pair lines up on the baseline. */
.typeahead-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.typeahead-row-field .typeahead-main,
.typeahead-row-enum .typeahead-main {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.typeahead-category {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Right-hand metadata column. `margin-left: auto` keeps it right-aligned
   against the row whether it's sharing a line with main or wrapped below.
   Individual chunks stay internally nowrap so "2Res 2Mem" / "Lv4" never split,
   but the container wraps between chunks when squeezed. */
.typeahead-meta {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    text-align: right;
}

.typeahead-meta-chunk {
    white-space: nowrap;
}

/* Stat icons (sword, heart, shield) are black SVGs; invert for dark theme
   so they read as muted text next to the adjacent numeric value. */
.typeahead-stat-icon {
    vertical-align: text-bottom;
    margin-right: 1px;
    filter: invert(1) opacity(0.65);
}

/* Card rows: prose name + per-card metadata on the right. */
.typeahead-row-card .typeahead-main {
    font-family: inherit;
}

.typeahead-row-card mark {
    background: transparent;
    color: var(--gold-primary);
    font-weight: 600;
}

/* Field-prefix and enum-value rows: monospace + accent, visually distinct
   from card-name rows so the user can tell they're inserting syntax. */
.typeahead-row-field,
.typeahead-row-enum {
    background: color-mix(in oklch, var(--bg-secondary), var(--accent-primary) 6%);
}

.typeahead-row-field.typeahead-row-active,
.typeahead-row-enum.typeahead-row-active,
.typeahead-row-field:hover,
.typeahead-row-enum:hover {
    background: color-mix(in oklch, var(--bg-primary), var(--accent-primary) 10%);
}

.typeahead-code {
    font-family: var(--font-code);
    color: var(--accent-hover);
    background: transparent;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
}

.typeahead-label {
    color: var(--text-muted);
    font-size: 13px;
}

/* The dropdown is inserted as a sibling of the <input>, i.e. inside the
   surrounding <form>. Give those forms a positioning context so the
   absolutely-positioned dropdown lands directly under the input. */
.header-search form,
.home-search form { position: relative; }