#searchResults {
    display: none;
    box-sizing: border-box; /* put border inside div */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px solid #ddd;
    width: 300px;
    position: absolute;
    z-index: 100;
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow: auto;
}

#searchResults li:hover {
    cursor: pointer;
}

#searchResults li a {
    background-color: white;
    padding: 12px;
    text-decoration: none;
    font-size: 12px;
    color: black;
    display: block; /* Make it into a block element to fill the whole list */
}

#searchResults li a:hover:not(.header) {
    background-color: #eee;
}

/* Echo v2 wizard sidebar.
   Colour reports what the PARTNER can reach, and is deliberately decoupled
   from whether this viewer can click: superusers get a real <a> on locked
   steps, rendered in the locked colour.
   step-open must be explicit -- tabler.css `.step-item.active ~ .step-item`
   fades every <li> below the active one, and .h3 resolves to `inherit`, so
   an unstyled label would pick that up regardless of its lock state.
   --tblr-secondary rather than --tblr-muted: identical #6c7a91 in light
   mode, but --tblr-muted drops to #49566c under [data-bs-theme=dark], which
   is unreadable on the dark background. */
.steps .step-item .step-open   { color: var(--tblr-body-color); }
.steps .step-item .step-locked { color: var(--tblr-secondary); }