/* Step 4 — artist pick. Pre-fill grid + secondary search.
   Replaces the cold empty-search-box of the old flow. */

#artist-panel .artist-progress {
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px;
}
#artist-panel .artist-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--subtle-border);
  transition:background 0.2s, transform 0.2s var(--ease-pick);
}
#artist-panel .artist-dot.is-filled {
  background:var(--coral);
  transform:scale(1.15);
}
#artist-panel .artist-count {
  font-family:var(--font-mono); font-size:11px;
  color:var(--muted2); letter-spacing:0.04em;
  margin-left:6px;
}

#artist-panel .artist-chips {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:18px; min-height:32px;
}
#artist-panel .artist-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 5px; border-radius:99px;
  background:var(--coral-soft); border:1px solid var(--coral-border);
  font-size:12px; color:var(--coral);
  cursor:pointer; font-family:inherit;
}
#artist-panel .artist-chip-img {
  width:20px; height:20px; border-radius:50%;
  object-fit:cover; background:var(--bg3);
}
#artist-panel .artist-chip-x { font-size:10px; opacity:0.8; margin-left:2px; }

#artist-panel .artist-grid-label {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted2); margin-bottom:10px;
}

#artist-panel .artist-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px; margin-bottom:20px;
}
@media (min-width:600px) { #artist-panel .artist-grid { grid-template-columns:repeat(4, 1fr); } }

#artist-panel .artist-tile {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; cursor:pointer; padding:0;
  background:none; border:0; font-family:inherit; color:inherit;
}
#artist-panel .artist-tile-img {
  position:relative;
  width:100%; aspect-ratio:1/1;
  border-radius:50%;
  background:var(--bg3) center/cover no-repeat;
  border:2px solid transparent;
  transition:border-color 0.15s, transform 0.2s var(--ease-pick), box-shadow 0.15s;
}
#artist-panel .artist-tile:hover .artist-tile-img { transform:scale(1.02); }
#artist-panel .artist-tile.is-selected .artist-tile-img {
  border-color:var(--coral);
  box-shadow:0 0 0 3px var(--coral-soft);
  transform:scale(1.04);
}
#artist-panel .artist-tile.is-selected .artist-tile-img::after {
  content:'✓'; position:absolute;
  bottom:0; right:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--coral); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  border:2px solid var(--bg);
}
#artist-panel .artist-tile-name {
  font-size:11px; color:var(--white);
  text-align:center; line-height:1.3;
  font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  width:100%;
}

#artist-panel .artist-search-toggle {
  display:block; background:none; border:0;
  font-family:var(--font-mono); font-size:11px;
  color:var(--coral); letter-spacing:0.06em;
  margin:0 auto 12px; cursor:pointer;
  padding:6px 12px;
}
#artist-panel .artist-search-toggle:hover { color:var(--white); }

#artist-panel .artist-search-wrap {
  position:relative; display:none; margin-bottom:14px;
}
#artist-panel .artist-search-wrap.is-open { display:block; }

#artist-panel .artist-search-input {
  width:100%; padding:12px 40px 12px 16px;
  background:var(--card); border:1px solid var(--subtle-border);
  border-radius:var(--radius-sm);
  color:var(--white); font-family:var(--font-body); font-size:15px;
  outline:none;
}
#artist-panel .artist-search-input:focus { border-color:var(--coral-border); }
#artist-panel .artist-search-input::placeholder { color:var(--muted2); }

#artist-panel .artist-search-spinner {
  position:absolute; right:12px; top:14px;
  width:18px; height:18px; border:2px solid var(--subtle-border);
  border-top-color:var(--coral); border-radius:50%;
  animation:spin 0.7s linear infinite; display:none;
}
#artist-panel .artist-search-spinner.is-visible { display:block; }

#artist-panel .artist-search-results {
  background:var(--bg3); border:1px solid var(--subtle-border);
  border-radius:var(--radius-sm); margin-top:6px;
  max-height:240px; overflow-y:auto; display:none;
}
#artist-panel .artist-search-results.is-open { display:block; }
#artist-panel .artist-result {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; cursor:pointer;
  border-bottom:1px solid var(--subtle-border);
}
#artist-panel .artist-result:last-child { border-bottom:none; }
#artist-panel .artist-result:hover { background:rgba(255,255,255,0.04); }
#artist-panel .artist-result-img {
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; background:var(--bg2); flex-shrink:0;
}
#artist-panel .artist-result-name {
  font-size:14px; font-weight:600; color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1;
}

#artist-panel .artist-suggestions-loading {
  display:flex; justify-content:center; padding:30px;
  grid-column:1 / -1;
}