/* Type-ahead dropdown.
   Light panel on purpose: the search field is white, so the dropdown reads as a
   continuation of it rather than a separate dark box that disappears into the
   page — same as Fortnite Tracker. It also pops hard against the dark site,
   which is what makes it feel like a real control. */

.jd-ta {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, .68), 0 0 0 1px rgba(9, 17, 28, .18);
  overflow: hidden;

  max-height: 322px;          /* ~7 rows: one nudge of scroll, no endless list */
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #C6CDD8 transparent;
}
.jd-ta::-webkit-scrollbar { width: 9px; }
.jd-ta::-webkit-scrollbar-track { background: transparent; }
.jd-ta::-webkit-scrollbar-thumb {
  background: #CBD2DC; border-radius: 99px;
  border: 3px solid #fff;           /* inset so the bar doesn't crowd the edge */
}
.jd-ta::-webkit-scrollbar-thumb:hover { background: #AEB7C5; }

@media (prefers-reduced-motion: reduce) { .jd-ta { scroll-behavior: auto; } }

.jd-ta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  text-decoration: none;
  border-bottom: 1px solid #EEF1F5;
  transition: background .09s ease;
}
.jd-ta-row:last-child { border-bottom: none; }
.jd-ta-row.is-active,
.jd-ta-row:hover { background: #EDF3FC; }

.jd-ta-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jd-ta-name {
  font-size: 13.5px; font-weight: 600; color: #14171C;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jd-hit { color: #1D5FD0; font-weight: 800; }
.jd-ta-club {
  font-size: 11px; color: #77808E;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.jd-ta-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.jd-ta-num {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: #8A93A1;
}

/* Belt pills, tuned for a light panel */
.jd-belt {
  font-size: 9.5px; padding: 2px 7px; border-radius: 99px;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 800;
}
.jd-belt-white  { background: #F0F0EC; color: #4A4A44; border: 1px solid #DDDDD6; }
.jd-belt-blue   { background: #DCE7FA; color: #1B4586; }
.jd-belt-purple { background: #E9DEF8; color: #522C8C; }
.jd-belt-brown  { background: #EBDDD0; color: #6A4527; }
.jd-belt-black  { background: #22242A; color: #E4E7EC; }

.jd-ta-empty { padding: 14px; font-size: 12.5px; color: #77808E; }

@media (max-width: 640px) {
  .jd-ta { max-height: 60vh; }
  .jd-ta-club { display: none; }
}