/* Canonical autocomplete/typeahead results. One implementation, used by every
   typeahead Stimulus controller. Rules are independent and single-class;
   rendering is altered by ADDING classes (never nested/compound selectors).
   Visibility is also forced inline by lib/autocomplete_results.js, so it does
   not depend on this file's load order. The panel is a manual popover (top
   layer, so no modal body can clip it); the helper sets its top, left, width
   and max-height from the input's rect each time it opens or the page moves. */

.autocomplete-results {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1;
  background: var(--surface);
  border: var(--line-width) solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: none;
}

.autocomplete-results-visible {
  display: block;
}

.autocomplete-result {
  padding: var(--space-3);
  cursor: pointer;
  border-bottom: var(--line-width) solid var(--line);
}

.autocomplete-result:hover,
.autocomplete-result-active {
  background-color: var(--accent);
  color: var(--ink-on-accent);
}

.autocomplete-result-name {
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.autocomplete-result-preview {
  font-size: var(--text-md);
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Single-select autocomplete (single_autocomplete_controller.js): a label,
   a text input with a Clear button, a hidden id, and a results popover. The
   controller shows Clear only once a result is picked. */
.single-autocomplete {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.single-autocomplete-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}