/* ytsearch-suggest -- the suggestion list under the search box (shared component, see
   ytsearch/README.md; edit the canonical copy in ytsearch/, then run sync.py).
   No inline styles anywhere, so it works under a style-src 'self' policy. Each colour falls back
   through the token names a site may already define (--card, --fg, --border, --radius, --ring) to
   a neutral value, so the list follows the site's light and dark themes without site CSS changes;
   a site can still pin any of them with the --yts-* variables. */
.yts-list {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0;
  right: 0;
  margin: 6px 0 0;
  padding: 6px 0;
  list-style: none;
  text-align: start;
  font-size: 1rem;
  background: var(--yts-bg, var(--card, #fff));
  color: var(--yts-fg, var(--fg, #111827));
  border: 1px solid var(--yts-border, var(--border, rgba(17, 24, 39, 0.12)));
  border-radius: var(--yts-radius, var(--radius, 12px));
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  max-height: 340px;
  overflow-y: auto;
}
.yts-list[hidden] { display: none; }
.yts-item {
  display: block;
  padding: 9px 14px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.yts-item b { font-weight: 600; }
.yts-item:hover,
.yts-item[aria-selected="true"] { background: var(--yts-active, var(--ring, rgba(17, 24, 39, 0.06))); }