/* =====================================================================
   The song page (#/song/<id>) -- see js/song-page.js.
   Built on the album page's ap- parts and the artist page's ar- ones; its own are sp-.
   ===================================================================== */
.sp-from:hover { color: var(--accent-soft); }

/* on the album: the tracklist, this song lit */
.sp-album-tracks li.sp-here { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); cursor: default; }
.sp-album-tracks li.sp-here .ap-tt { color: var(--accent-soft); }
.sp-src { margin-top: 10px; font-size: .78rem; }

/* heard live: where in the set */
.sp-livefacts { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 8px; }
.sp-livefacts span { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-live);
  padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--accent-live) 45%, transparent); border-radius: 999px; }
.sp-slot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sp-tag { font-style: normal; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-live); }

/* other versions */
.sp-vtag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp .ar-songs li:has(.sp-vtag) { grid-template-columns: 76px minmax(0, 1fr) auto; }

/* your listening: its share of the artist's plays */
.sp-share { margin-top: 16px; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.sp-share span { display: block; height: 100%; width: calc(100% * var(--w)); min-width: 3px; background: var(--accent-scrobble); }
.sp-share-cap { margin-top: 6px; font-size: .8rem; }

/* when you play it: hour of day, day of week */
.sp-hours { display: flex; align-items: flex-end; gap: 2px; height: 60px; }
.sp-hours i { flex: 1; min-width: 0; height: var(--h); background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 1px 1px 0 0; }
.sp-hours i.pk { background: var(--accent); }
.sp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.sp-days span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: .66rem; color: var(--text-dim); }
.sp-days i { width: 100%; height: 18px; border-radius: 2px; background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--surface-3)); }
.sp .ar-records .ap-plays { font-size: .8rem; }

@media (max-width: 640px) {
  .ap-artist { text-align: center; }
  .sp .ar-songs li:has(.sp-vtag) { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .sp .ar-shows a { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; }
  .sp .ar-shows .subtle { display: inline; }
}