/* AGMTW discovery bar.
   Two hosts, one component. .agd-home sits under the v3 masthead and is the
   widest thing on the page; .agd-sidebar sits at the top of the filter rail and
   borrows the rail's own tokens so it reads as part of it. */

.agd {
    --agd-ink:    var(--v3-ink,   #10100f);
    --agd-muted:  var(--v3-muted, #6a6a66);
    --agd-rule:   var(--v3-rule,  #e4e2dd);
    --agd-paper:  var(--v3-paper, #fff);
    --agd-brand:  #5065cb;
    position: relative;
    box-sizing: border-box;
}
.agd *, .agd *::before, .agd *::after { box-sizing: border-box; }

/* ─── The field ─────────────────────────────────────────────────── */
.agd-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--agd-paper);
    border: 1px solid var(--agd-rule);
    border-radius: 999px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.agd-field:focus-within {
    border-color: var(--agd-brand);
    box-shadow: 0 0 0 3px rgba(80, 101, 203, 0.14);
}
.agd-icon { flex: 0 0 auto; color: var(--agd-muted); }
.agd-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--agd-ink);
    font-family: inherit;
}
.agd-input::placeholder { color: var(--agd-muted); opacity: 1; }

.agd-clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--agd-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.agd-clear:hover { color: var(--agd-ink); }
.agd-clear[hidden] { display: none; }

.agd-go {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--agd-brand);
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.agd-go:hover { background: #000; }
.agd-go[hidden] { display: none; }

/* ─── The chips: what the sentence was understood to mean ───────── */
.agd-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}
.agd-chips[hidden] { display: none; }
.agd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px 5px 11px;
    border: 1px solid var(--agd-rule);
    border-radius: 999px;
    background: var(--agd-paper);
    color: var(--agd-ink);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.agd-chip-x {
    border: 0;
    background: transparent;
    color: var(--agd-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 1px;
}
.agd-chip-x:hover { color: var(--agd-ink); }
.agd-plus {
    color: var(--agd-muted);
    font-weight: 700;
    font-size: 0.9rem;
}

/* ─── Suggestions for the fragment still being typed ────────────── */
.agd-ac {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 6px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--agd-paper);
    border: 1px solid var(--agd-rule);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 16, 15, 0.13);
    padding: 5px;
    text-align: left;
}
.agd-ac[hidden] { display: none; }
.agd-ac-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--agd-ink);
    font-family: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}
.agd-ac-item.is-active, .agd-ac-item:hover { background: #f2f1ee; }

/* The combo reads as one query: everything understood so far, plus the term
   this row would add, which is the only part in bold. */
.agd-ac-combo {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--agd-muted);
    line-height: 1.35;
}
.agd-ac-combo strong { color: var(--agd-ink); font-weight: 800; }
.agd-ac-combo em { font-style: normal; color: var(--agd-brand); }
.agd-ac-plus { margin: 0 6px; color: var(--agd-muted); font-weight: 700; }

/* How many titles the row would return. Sits between the query and its kind
   so the eye reads "this query, this many, of this sort". */
.agd-ac-n {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 2.2em;
    text-align: right;
    color: var(--agd-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.86rem;
}
.agd-ac-item.is-empty {
    cursor: default;
    opacity: 0.45;
}
.agd-ac-item.is-empty:hover { background: transparent; }
.agd-ac-item.is-empty .agd-ac-n { color: var(--agd-muted); font-weight: 600; }

/* A destination rather than a filter. */
.agd-ac-cmd-row { border-top: 1px solid var(--agd-rule); border-radius: 0; }
.agd-ac-cmd-row + .agd-ac-cmd-row { border-top: 0; }
.agd-ac-cmd-row .agd-ac-combo strong { font-weight: 700; }
.agd-ac-cmd-row .agd-ac-kind { color: var(--agd-brand); }

/* The way out of a dead end. */
.agd-ac-drop-row .agd-ac-combo { color: var(--agd-ink); }
.agd-ac-drop-row .agd-ac-kind  { color: var(--agd-brand); }

.agd-ac-kind {
    flex: 0 0 auto;
    margin-left: 10px;
    color: var(--agd-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* "Show results" — the row that just runs what is already there. */
.agd-ac-go-row { border-bottom: 1px solid var(--agd-rule); border-radius: 8px 8px 0 0; }
.agd-ac-go-row.is-empty .agd-ac-kind { color: var(--agd-muted); }
.agd-ac-go-row .agd-ac-combo { color: var(--agd-ink); font-weight: 700; }
.agd-ac-go-row .agd-ac-kind { color: var(--agd-brand); }

/* ─── Homepage ──────────────────────────────────────────────────── */
.agd-home {
    max-width: 680px;
    margin: 0 auto 18px;
    text-align: center;
}
.agd-home .agd-field { padding: 7px 10px 7px 18px; }
.agd-home .agd-input { padding: 9px 0; font-size: 1.05rem; }
.agd-home .agd-go { padding: 10px 18px; font-size: 0.95rem; }
.agd-home .agd-chips { justify-content: center; margin-top: 12px; }

@media (max-width: 600px) {
    .agd-home { margin-bottom: 14px; }
    .agd-home .agd-field { padding: 5px 7px 5px 14px; }
    .agd-home .agd-input { font-size: 1rem; }
    .agd-home .agd-go { padding: 9px 13px; }
    .agd-home .agd-go-full { display: none; }
    .agd-ac-item { gap: 8px; }
    .agd-ac-kind { font-size: 0.66rem; }
}

/* ─── Sidebar ───────────────────────────────────────────────────── */
.agd-sidebar {
    --agd-ink:   var(--fv-text, #10100f);
    --agd-rule:  var(--fv-border, #e4e2dd);
    --agd-paper: var(--fv-surface, #fff);
    /* Clear of the streamer grid below: at 14px the field read as part of it. */
    margin-bottom: 22px;
}
.agd-sidebar .agd-field { border-radius: 8px; padding: 2px 6px 2px 10px; }
.agd-sidebar .agd-input { padding: 7px 0; font-size: 0.88rem; }
.agd-sidebar .agd-icon { width: 15px; height: 15px; }
.agd-sidebar .agd-go { padding: 6px 11px; font-size: 0.8rem; }
.agd-sidebar .agd-chips { margin-top: 9px; }
.agd-sidebar .agd-chip { font-size: 0.79rem; padding: 4px 6px 4px 9px; }
.agd-sidebar .agd-ac { border-radius: 8px; }
.agd-sidebar .agd-ac-item { font-size: 0.85rem; padding: 7px 9px; }
.agd-sidebar .agd-ac-kind { font-size: 0.64rem; }
.agd-sidebar .agd-ac-plus { margin: 0 4px; }

/* ─── Sidebar: outranking the rail's own reset ──────────────────────
   filter-css.css zeroes every margin inside the grid pages with
   `#fv-wrap *, #fv-wrap ::before, #fv-wrap ::after { margin: 0 }`. That is an
   id selector, so it beats any plain class of ours, and the sidebar bar lives
   inside #fv-wrap — which is why it sat flush against the streamer grid with
   its margin silently dropped. Spacing that has to survive in there is
   restated at the same weight. Nothing here applies to the homepage bar,
   which is outside #fv-wrap and was never affected. */
#fv-wrap .agd-sidebar            { margin-bottom: 22px; }
#fv-wrap .agd-sidebar .agd-chips { margin-top: 9px; }
#fv-wrap .agd-ac                 { margin-top: 6px; }
#fv-wrap .agd-ac-n               { margin-left: auto; }
#fv-wrap .agd-ac-kind            { margin-left: 10px; }
#fv-wrap .agd-ac-plus            { margin: 0 6px; }
#fv-wrap .agd-sidebar .agd-ac-plus { margin: 0 4px; }
#fv-wrap .agd-sec-note           { margin: 8px 2px 0; }