/* Trim-specific result row: the right-hand meta column with year +
   MSRP. The dropdown scaffolding (input wrap, clear-X, checkmark, list
   container) lives in /components/search/search.css. */

.autocomplete-result-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
}

.autocomplete-result-year {
  color: var(--muted);
}

/* Generic field wrapper for the trim-search input + dropdown. Anchors
   the absolutely-positioned results list directly under the input and
   gives the input the shared look. Use as:
     <div class="trim-search-field">
       <input type="search" ... />
       <ul class="autocomplete-results" hidden></ul>
     </div>
   Existing call sites (events RSVP, browse filters) still use their own
   page-local wrappers; new consumers should prefer this one. */
.trim-search-field {
  position: relative;
}

.trim-search-field input[type="search"] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.trim-search-field input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}