/* Playlists module: list cards, detail table (locks, drag and drop), pickers. Tokens come from app.css. */

/* ---------- Shared card (also used on Home, profiles and Discovery) ---------- */

.pl-card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pl-card:hover { border-color: var(--ink); }
.pl-card.is-compact { padding: var(--s2) 12px; gap: 12px; }
.pl-card-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-card.is-compact .pill { min-width: 60px; padding: 4px 8px; }

/* ---------- Connect panel ---------- */

.pl-connect { display: flex; flex-direction: column; gap: var(--s3); max-width: 720px; }
.pl-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pl-benefit { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pl-benefit .icon { margin-top: 2px; color: var(--ink-2); }
.pl-benefit div { display: flex; flex-direction: column; gap: 2px; }

/* ---------- List page ---------- */

.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.pl-manage { display: flex; flex-direction: column; gap: var(--s3); }
.pl-manage-main { display: flex; gap: var(--s3); align-items: flex-start; color: inherit; text-decoration: none; min-width: 0; }
.pl-manage-main:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.pl-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pl-chart { display: flex; flex-direction: column; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); }

.pl-head { display: flex; gap: var(--s4); align-items: flex-start; }
.pl-head-text { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.pl-head-text h1, .pl-head-text h3 { overflow-wrap: anywhere; }
.pl-head-text p { margin: 0; }

/* ---------- Pickers ---------- */

.pl-results { min-height: 120px; }
.pl-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-pick-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pad { padding: var(--s3); margin: 0; }
.pl-track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-track .track { flex: 1 1 auto; }

/* ---------- Detail page ---------- */

.pl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.pl-toolbar-hint { flex: 1 1 100%; margin: 0; }

.pl-table { position: relative; }
.pl-table .track { max-width: 420px; }
.pl-busy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding-top: var(--s6);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--ink);
  font-weight: 600;
}

.pl-poscell { display: flex; align-items: center; gap: 6px; }
.pl-pos { min-width: 28px; text-align: right; color: var(--ink-2); }
.pl-grip { display: inline-flex; color: var(--ink-3); cursor: grab; }
.pl-grip.is-off { visibility: hidden; }
.pl-lock { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink-3); }
.pl-lock.is-on { color: var(--ink); background: var(--signal-soft); }
.pl-lock.is-swap { color: var(--note); }
.pl-lock.is-off { color: var(--bad); background: var(--bad-soft); border-radius: var(--r1); }
.pl-until { display: block; color: var(--ink-2); }
.pl-swap { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.pl-swap:hover span { text-decoration: underline; }
.pl-rowactions { flex-wrap: nowrap; gap: 2px; }
.pl-stat-value { font: 600 18px/1.3 var(--display); overflow-wrap: anywhere; }

.pl-table tr.is-swap td { background: var(--note-soft); }
.pl-table tr[draggable="true"] { cursor: grab; }
.pl-table tr.is-dragging td { opacity: 0.45; }
.pl-table tr.is-drop-before td { box-shadow: inset 0 2px 0 var(--signal); }
.pl-table tr.is-drop-after td { box-shadow: inset 0 -2px 0 var(--signal); }

@media (max-width: 860px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); }
  .pl-head { gap: var(--s3); }
  .pl-head .cover { width: 72px !important; height: 72px !important; }
  .pl-table .track { max-width: 220px; }
  .pl-grip { display: none; }
}

/* Compact cards (Home, profiles): artwork pinned to the top so the pills can wrap underneath the title. */
.pl-card.is-compact { align-items: flex-start; }
.pl-card.is-compact .pills { gap: 6px; }

/* Daily streams measured through Spotify for Artists carry a check; calculated positions stay plain. */
.pl-est { display: inline-flex; align-items: center; gap: 4px; }
.pl-est.is-measured { color: var(--ink); }
.pl-est.is-measured .icon { color: var(--good); }

/* ---------- Row menu, placeholders, picker details ---------- */

.pl-manage-name { font-size: 18px; overflow-wrap: anywhere; }
.pl-manage-main:hover .pl-manage-name { text-decoration: underline; text-underline-offset: 3px; }
.pl-rowmenu { flex: none; margin-left: auto; }
.pl-swap-mobile { margin-top: 4px; }
.pl-table tr.is-placeholder td { background: var(--sunken); color: var(--ink-2); }
.pl-table tr.is-placeholder .track-artists { white-space: normal; }
.pl-picklock { flex: none; gap: 4px; color: var(--ink-2); flex-wrap: nowrap; }
.pl-result-pop { flex: none; gap: 6px; flex-wrap: nowrap; }
.modal-foot > [role="status"] { margin: 0 auto 0 0; align-self: center; }

/* Compact cards: the three figures share one row instead of wrapping under each other. */
.pl-card.is-compact .pills { flex-wrap: nowrap; }
.pl-card.is-compact .pill { flex: 1 1 0; min-width: 0; padding: 4px 6px; }
.pl-card.is-compact .pl-card-text { flex: 1 1 auto; }

@media (max-width: 860px) {
  .pl-table .track { max-width: none; min-width: 0; flex: 1 1 auto; }
  .pl-table .table td { padding-left: 8px; padding-right: 8px; }
  .pl-table .pl-track { gap: 4px; }
  .pl-table .track-title, .pl-table .track-artists { max-width: 46vw; }
  .pl-rowmenu, .pl-lock { width: 40px; height: 40px; }
}