/* Search suggestions (search.js, page-only with it: home, directory, error pages). A listbox under the search field:
   tile, name + checkmark, state badge, tagline. Matches are set in --fg; the rest stays grey. It floats over content,
   so it carries the consent card's shadow (DESIGN.md, Elevation). */
.hero{z-index:2} /* the open list must cover the featured cards below the hero */
.ac{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:min(70vh,504px);overflow-y:auto;overscroll-behavior:contain;padding:4px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg);box-shadow:0 8px 30px rgba(0,0,0,.12);text-align:left}
.ac-o{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"tile name state" "tile tag tag";align-items:center;gap:0 12px;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.ac-o + .ac-o{margin-top:2px}
.ac-o>.tile{grid-area:tile;align-self:start;margin-top:2px}
.ac-n{grid-area:name;min-width:0;overflow:hidden;font-size:14px;font-weight:500;line-height:1.4;color:var(--fg-2);white-space:nowrap;text-overflow:ellipsis}
.ac-n .vf{margin-left:5px;vertical-align:-2px}.ac-n .vf-i{width:14px;height:14px}
.ac-s{grid-area:state}
.ac-t{grid-area:tag;min-width:0;overflow:hidden;font-size:13px;line-height:1.4;color:var(--fg-3);white-space:nowrap;text-overflow:ellipsis}
.ac mark{background:none;color:var(--fg);font-weight:600}
.ac-n mark{font-weight:600}
.ac-o[aria-selected=true]{background:var(--bg-3)}
.ac-o[aria-selected=true] .ac-n{color:var(--fg)}
@media (hover:hover){.ac-o:hover{background:var(--bg-2)}.ac-o[aria-selected=true]:hover{background:var(--bg-3)}}
@media (max-width:479px){.ac-o{column-gap:10px;padding:8px}.ac-s{font-size:11px;padding:0 7px}}
@media (forced-colors:active){.ac-o[aria-selected=true]{outline:2px solid Highlight;outline-offset:-2px}.ac mark{text-decoration:underline}}
@media print{.ac{display:none!important}}