/* Job Playlist member search autocomplete.
   A same-origin stylesheet (vercel.json keeps style-src 'self'). It styles
   ONLY the new search popup: no job card, metric card, toolbar control,
   colour or typography of the existing member surface is changed here. */

/* The search field becomes the popup's positioning context. It is a plain
   relative-positioning anchor: it does not move, size or restyle anything. */
.member-search-anchor{position:relative}

.member-search-listbox{
  position:absolute;
  z-index:60;
  top:calc(100% + .35rem);
  left:0;
  right:0;
  display:grid;
  gap:.1rem;
  max-height:min(60vh,26rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:.3rem;
  margin:0;
  border:1px solid var(--js-line);
  border-radius:var(--js-radius-md);
  background:var(--js-panel);
  color:var(--js-text);
  box-shadow:var(--js-shadow);
  text-align:left;
}
.member-search-listbox[hidden]{display:none}

.member-search-option{
  min-height:44px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.15rem .5rem;
  padding:.5rem .6rem;
  border-radius:var(--js-radius-sm);
  cursor:pointer;
}
.member-search-option:hover,
.member-search-option[aria-selected="true"]{background:rgba(141,176,255,.14)}
.member-search-option-label{grid-column:1;font-weight:700;overflow-wrap:anywhere}
.member-search-option-kind{
  grid-column:2;
  justify-self:end;
  align-self:center;
  padding:.1rem .45rem;
  border:1px solid var(--js-line);
  border-radius:999px;
  color:var(--js-muted);
  font-size:.72rem;
  white-space:nowrap;
}
.member-search-option-meta{
  grid-column:1/-1;
  color:var(--js-muted);
  font-size:.78rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}

/* The no-match row is a disabled option: it is read, never selectable. */
.member-search-option-empty{grid-template-columns:minmax(0,1fr);cursor:default}
.member-search-option-empty .member-search-option-label{color:var(--js-muted);font-weight:600}
.member-search-option-empty:hover{background:transparent}

@media(max-width:720px){
  .member-search-listbox{max-height:min(50vh,20rem)}
  .member-search-option{padding:.6rem}
  .member-search-option-meta{font-size:.8rem}
}

@media(forced-colors:active){
  .member-search-listbox{border:1px solid CanvasText}
  .member-search-option[aria-selected="true"]{outline:2px solid Highlight}
}