/* Search popup: pinned near the top rather than centered, so the box does not
   jump as the result list grows and shrinks while typing; the list gets the
   height a popup has. */
#search.modal-overlay { place-items: start center; padding-top: 12vh; }
#search #search-results { max-height: min(56vh, 520px); }
/* The input (with an inline clear "×") + a "?" syntax-help button, one row. */
#search-bar { display: flex; align-items: center; gap: 8px; }
/* Wraps just the input so the clear button can sit inside its right edge. */
.search-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
#search-input {
  flex: 1 1 auto;
  min-width: 0;
  /* extra right padding leaves room for the clear × so text never runs under it */
  padding: 8px 32px 8px 10px;
  font: inherit;
  color: var(--text);
  background: rgba(var(--ink), 0.06);
  border: 1px solid rgba(var(--ink), 0.12);
  border-radius: 8px;
  outline: none;
}
#search-input:focus { border-color: var(--accent); }
/* Clear button pinned inside the input's right edge; shown only when non-empty
   (js/main.js toggles [hidden] from the input value). */
#search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#search-clear[hidden] { display: none; }
#search-clear:hover { color: var(--text); background: rgba(var(--ink), 0.14); }
#search-help { flex: 0 0 auto; width: 20px; height: 20px; font-size: 12px; }
/* The toggled search-syntax help block (the "?" button shows/hides it). */
#search-syntax {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(var(--ink), 0.05);
  border: 1px solid rgba(var(--ink), 0.1);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
#search-syntax code {
  color: var(--text);
  background: rgba(var(--ink), 0.08);
  padding: 0 4px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#search-syntax b { color: var(--text); font-weight: 600; }
/* Type-filter chips above the results: scope search to one kind of thing. */
.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
.search-filters:empty { display: none; }
.search-filter {
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ink), 0.14);
  background: rgba(var(--ink), 0.04);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.search-filter:hover {
  color: var(--text);
  border-color: rgba(var(--ink), 0.28);
}
.search-filter.active {
  color: var(--text-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
}
#search-results {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}
#search-results li {
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
#search-results li:hover,
#search-results li.active { background: rgba(var(--ink), 0.12); }
#search-results li.empty { color: var(--muted); cursor: default; }
#search-results li.empty:hover { background: none; }
/* Keyboard roving highlight for arrow-key navigation inside an open
   accordion section (Structures / Projections / Receptors / Drugs / Legend).
   A clear outline reads on
   any row or button regardless of its own background. */
.kbd-active {
  outline: 2px solid rgba(var(--ink), 0.55);
  outline-offset: -2px;
  border-radius: 4px;
}