/* "Identify track" (Shazam) in the player: the identify button while listening, the desktop result
   popover, the mobile sheet card (both also show the identified track playing now) and the tracklist
   panels. Consumes the design tokens and base classes of app.css (.btn, .art-ph, .num); every rule is
   scoped to the player's identify markup.
   Motion: transform/opacity only, and only while an identification runs. */

/* ---- button ----------------------------------------------------------------------------- */

.pl-idwrap { position: relative; display: inline-flex; }
.pl-ibtn[data-act="identify"].is-busy,
.pl-pill[data-act="identify"].is-busy { color: var(--accent); }
.pl-ibtn[data-act="identify"].is-busy .icon,
.pl-pill[data-act="identify"].is-busy .icon { animation: id-beat 1.1s var(--ease) infinite; }
.pl-pill[data-act="identify"] .icon { color: var(--accent); }
/* identification switched off: tracks identified earlier still show while they play (.is-now) */
.pl--noid [data-act="identify"],
.pl--noid .idcard:not(.is-now),
.pl--noid .idpop:not(.is-now) { display: none !important; }

/* ---- the result view (shared by the popover and the card) ------------------------------ */

.idv {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  min-height: 48px;
  color: var(--text);
  text-align: left;
}
.idv--busy { grid-template-columns: 48px minmax(0, 1fr) auto; }
.idv--match { grid-template-columns: 64px minmax(0, 1fr); }
.idv--match,
.idv--none,
.idv--error { padding-right: 30px; }
.idv__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.idv__title {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.idv--match .idv__title { font-size: 16px; }
.idv__sub {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
}
.idv--match .idv__sub { white-space: nowrap; }
.idv__kicker { color: var(--accent); font-size: 12px; font-weight: 600; line-height: 1.3; }
.idv__close { position: absolute; top: -4px; right: -6px; }
.idv__cancel { justify-self: end; }
.idv__art { width: 64px; height: 64px; border-radius: var(--radius-xs); }
.idv__art > .icon { width: 42%; height: 42%; }
.idv__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.idv--error .idv__icon { background: var(--fill); color: var(--text-dim); }
.idv__icon .icon { width: 22px; height: 22px; }
.idv__links {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  margin-right: -30px;
}
.idv__links > :only-child { grid-column: 1 / -1; justify-self: start; }
.idv__links .btn { gap: 6px; justify-content: center; min-width: 0; }
.idv__links .btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.idv__links .btn .icon { width: 16px; height: 16px; }
/* the now-playing card: a quiet way to stop it popping up (player menu: Show tracks while playing) */
.idv__foot { grid-column: 1 / -1; display: flex; margin: 4px -30px -8px 0; }
.idv__auto {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-faint);
  font: 500 12.5px/1.2 var(--font);
  cursor: pointer;
}
.idv__auto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Listening: rings leave the glyph like sound waves (scale + fade, compositor only) */
.idv__rings {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.idv__rings .icon { position: relative; width: 22px; height: 22px; }
.idv__rings i {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: id-ring 1.8s var(--ease) infinite;
}
.idv__rings i:nth-child(2) { animation-delay: .6s; }
.idv__rings i:nth-child(3) { animation-delay: 1.2s; }

/* ---- desktop popover -------------------------------------------------------------------- */

.idpop {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: var(--z-popover, 85);
  box-sizing: border-box;
  width: 380px;
  max-width: calc(100vw - 32px);
  /* max-height: set from its top edge when it opens (identify.js _fit), so a short screen scrolls it */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: .5px solid var(--border-strong);
  border-radius: var(--radius);
  /* Solid, not frosted: the popover sits inside .pl-card, which has its own backdrop-filter, so a nested one
     could not blur the page and a translucent fill would let the rows show through. */
  background: var(--menu-solid, #232325);
  box-shadow: var(--shadow-pop);
  transform-origin: calc(100% - 26px) 0;
  animation: id-pop .18s var(--ease);
}
.idpop:focus { outline: none; }
/* the now-playing card just appeared by itself: a click aimed at the page below still lands there */
.idpop.is-arriving { pointer-events: none; }

/* ---- mobile sheet card ------------------------------------------------------------------ */

.idcard {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  animation: id-fade .2s var(--ease);
}
.idcard .idv__close { top: -6px; right: -8px; }

/* ---- tracklist (desktop Details panel, mobile sheet) ------------------------------------- */

.idtl { margin-top: 12px; }
.pl-details--card .idtl { padding-top: 10px; border-top: 1px solid var(--separator); }
.idtl__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.idtl__h {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.idtl__count { color: var(--text-faint); font-size: 12px; }
.idtl__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pl-details--card .idtl__list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 16px; }
.idtl__item { position: relative; display: flex; align-items: center; min-width: 0; border-radius: var(--radius-xs); }
.idtl__row {
  display: grid;
  flex: 1;
  grid-template-columns: auto 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.idtl__time {
  min-width: 3.4em;
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.idtl__art { width: 36px; height: 36px; border-radius: 6px; }
.idtl__art > .icon { width: 44%; height: 44%; }
.idtl__text { display: flex; flex-direction: column; min-width: 0; }
.idtl__title,
.idtl__artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.idtl__title { color: var(--text); font-size: 14px; font-weight: 500; line-height: 1.3; }
.idtl__artist { color: var(--text-dim); font-size: 12.5px; line-height: 1.3; }
.idtl__link { flex: none; color: var(--text-dim); }
.idtl__end { display: block; color: var(--text-faint); font-size: 11px; font-weight: 500; }
.idtl__del { flex: none; color: var(--text-faint); }
.idtl__item.is-current { background: var(--accent-soft); }
.idtl__item.is-current .idtl__time { color: var(--accent); }
.idtl__empty { margin: 4px 0 2px; color: var(--text-faint); font-size: 13px; line-height: 1.4; }

@media (hover: hover) {
  .idv__auto:hover { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
  .idtl__row:hover { background: var(--hover); }
  .idtl__item.is-current .idtl__row:hover { background: transparent; }
  .idtl__link:hover { color: var(--text); }
  .idtl__del:hover { color: var(--danger-text, var(--danger)); }
}

/* the sheet is a phone screen: bigger targets, one column */
@media (max-width: 899.98px) {
  .idv--match { grid-template-columns: 72px minmax(0, 1fr); }
  .idv__art { width: 72px; height: 72px; }
  .idv__links .btn { min-height: 40px; }
  .idv__auto { min-height: 40px; }
  /* Open in Shazam gets its own row, and so does Copy when it would end up alone: no label is clipped at
     360px or 200% zoom and every row stays full, with or without Identify again (UX21-11) */
  .idv__links > .btn--tinted:first-child, .idv__links > [data-id="copy"]:last-child { grid-column: 1 / -1; }
  .idtl--sheet {
    margin-top: 14px;
    padding: 13px 12px 9px 16px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
  }
  .idtl--sheet .idtl__row { min-height: 52px; padding: 6px 4px; }
  .idtl__art { width: 40px; height: 40px; }
  .idtl--sheet .idtl__row { grid-template-columns: auto 40px minmax(0, 1fr); }
}

/* ---- motion ----------------------------------------------------------------------------- */

@keyframes id-ring {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }   /* stays inside the 16px padding of the card and popover (UX21-13) */
}
@keyframes id-beat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.86); }
}
@keyframes id-pop {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes id-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .idv__rings i,
  .pl-ibtn[data-act="identify"].is-busy .icon,
  .pl-pill[data-act="identify"].is-busy .icon,
  .idpop,
  .idcard { animation: none !important; }
  .idv__rings i:first-child { opacity: .5; transform: scale(1.3); }
}