/* =============================================================
   Artists page — Top 20 carousel + Top 100 table.
   Reuses spotlight.css (carousel/player) and vote.css (table).
   ============================================================= */

body.page-artists .main-nav a[href="artists.html"] {
  color: #f2d27a;
}

.artists-main {
  width: 100%;
  max-width: none;
}

.artists-subtitle {
  margin-top: 0.6rem;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* Blue glow behind the page headings */
.artists-main .spotlight-title,
.artists-top100 .spotlight-title {
  position: relative;
}
.artists-main .spotlight-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(520px, 90vw);
  height: 260px;
  transform: translate(-50%, -38%);
  background: radial-gradient(closest-side, rgba(60, 50, 255, 0.55), rgba(40, 30, 200, 0.22) 55%, transparent 100%);
  filter: blur(14px);
  pointer-events: none;
}

/* Top 100: voting is closed, so the table is Artist | Genre | Discover only */
.artists-top100 {
  margin-top: clamp(2rem, 6vw, 4rem);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.artists-top100 .vote-table {
  --vote-grid: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr);
}
.artists-top100 .vote-col--hashtag,
.artists-top100 .vote-col--vote {
  display: none;
}
.artists-top100 .vote-board {
  width: min(1000px, 92vw);
}

/* Match the mockup: single pagination (bottom), no Vote / Ask buttons (voting is closed) */
.artists-top100 .vote-pagination--top { display: none; }
.artists-main .sp-player-actions { display: none; }
.artists-main { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.artists-main .spotlight-section { padding-top: clamp(1rem, 3vw, 2rem); }

/* Artist popup: sit above the fixed header so it is never cut off on short screens */
.spotlight-section:has(.sp-vote-panel.is-open) { z-index: 1002; }

/* Top 100 rows are browse-only: no popup, no row/thumbnail play controls */
.artists-top100 .vote-row { cursor: default; }
.artists-top100 .vote-thumb-play { display: none !important; }

/* Top 100 is now the first thing on the page */
.artists-top100 { margin-top: 0; }
.artists-top100 .vote-intro { position: relative; }
.artists-top100 .vote-intro .spotlight-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(520px, 90vw);
  height: 260px;
  transform: translate(-50%, -38%);
  background: radial-gradient(closest-side, rgba(60, 50, 255, 0.55), rgba(40, 30, 200, 0.22) 55%, transparent 100%);
  filter: blur(14px);
  pointer-events: none;
}

/* Status badges (legend + per-row) */
.ap-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.ap-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; }
.ap-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.ap-badge--top20 { background: rgba(110, 118, 255, 0.2); border-color: rgba(140, 148, 255, 0.7); color: #c9ceff; }
.ap-badge--top3 { background: rgba(242, 184, 75, 0.2); border-color: rgba(242, 184, 75, 0.8); color: #f6cd7a; }
.ap-badge--curator { background: rgba(224, 82, 127, 0.2); border-color: rgba(224, 82, 127, 0.8); color: #f59ab8; }
.artists-top100 .vote-col--track { flex-wrap: wrap; }