/* The search-and-choose control for airports, airlines, aircraft types and ports (js/views/refpicker.js).
   It uses the interface's own colour and radius tokens, so it follows the look and feel in style.css in both themes. */
.ref-picker { display: grid; gap: 8px; }
.ref-current { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 32px; color: var(--ink-2); }
.ref-current strong { color: var(--ink); }
.ref-search { width: 100%; }
.ref-status { min-height: 1.2em; }
.ref-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.ref-option {
  width: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; text-align: left;
  padding: 8px 12px; border-radius: var(--radius-s); border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.ref-option:hover, .ref-option:focus-visible { background: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: -2px; }
.ref-label { font-weight: 600; }
.ref-tag { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }