/*
 * Anchored to .omniBoxContainer, which is position: relative for this reason.
 *
 * Every colour is a token, so the dropdown follows the theme. The dark theme
 * redefines --bg-card, --border, --text-muted and --shadow-soft, and this
 * inherits all four without a second rule.
 */
.list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  /* Above the sticky filter bar (10) and the hero layers (0–2), below the
     skip-link (10000) and the modal overlay (1000). */
  z-index: 40;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-primary);
}

/* Hover and keyboard share one style: the active option is the active option
   however it became active. Two rules would drift. */
.option:hover,
.active {
  background: var(--bg-secondary);
}

.name {
  font-weight: 500;
}

.meta {
  font-size: 0.85em;
  color: var(--text-muted);
  white-space: nowrap;
}