/* ------------------------------------------------------------------
   Type-ahead and chip filter controls.

   Shared by the admin center and the public site, because both need to
   offer a choice without a native <select>. Colours come from the theme
   variables in style.css, so this works in light and dark on either side.

   Markup and behaviour are documented in assets/js/ac-lookup.js.
   ------------------------------------------------------------------ */

.ac-lookup{position:relative;display:inline-block}
.ac-lookup__input.is-unknown{border-color:#E4636A}
.ac-lookup__list{position:absolute;z-index:40;top:calc(100% + 2px);left:0;
    min-width:16rem;max-height:15rem;overflow-y:auto;margin:0;padding:0.25rem 0;
    list-style:none;background:var(--color-card);border:1px solid var(--color-border);
    border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,0.35)}
.ac-lookup__option{display:flex;align-items:baseline;gap:0.6rem;padding:0.35rem 0.7rem;
    font-size:0.88rem;color:var(--color-text);cursor:pointer;white-space:nowrap}
.ac-lookup__option:hover,.ac-lookup__option.is-active{background:var(--color-surface)}
.ac-lookup__hint{font-size:0.75rem;color:var(--color-muted);margin-left:auto}
.ac-lookup__note{display:block;font-size:0.75rem;color:#E4636A;margin-top:0.3rem}

/* A fixed, short list of choices is chips, never a select. */
.ac-chips{display:flex;flex-wrap:wrap;gap:0.4rem}
.ac-chip{display:inline-block;padding:0.3rem 0.75rem;border:1px solid var(--color-border);
    border-radius:3px;font-size:0.8rem;font-weight:600;color:var(--color-muted);
    text-decoration:none}
.ac-chip:hover{border-color:var(--color-accent);color:var(--color-text)}
.ac-chip--on{background:var(--color-surface);border-color:var(--color-accent);color:var(--color-text)}

/* A chip may be an anchor or a submit button, so both look identical. */
.ac-chip{font-family:inherit;line-height:1.4}
button.ac-chip{background:none;cursor:pointer}

/* On a light public page the menu needs a little more contrast. */
.ac-lookup__list{background:var(--color-bg,#fff)}