/* Playlists (playlists.js): Your Library's Playlists (cards with a picture, Favorites first with a heart), the row of
   the same cards under Saved Talks, one playlist's page, and the Add to playlist and name sheets. The client's light
   look: white cards, navy text, blue buttons. Only the theme tokens from style.css; the shared .track row is
   library.css's. */

/* ---------- Shared pieces ---------- */
.pl-hub, .pl-page { padding-bottom: 24px; color: var(--ink); }
.pl-kicker { margin: 0; color: var(--clay-dark); font: 600 14px/1.3 var(--sans); }
.pl-display { margin: 0; font: 700 28px/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.pl-meta { margin: 0; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.pl-hint { margin: 0 0 12px; font: 15px/1.45 var(--sans); color: var(--ink-2); }

/* Pill buttons: outlined blue, or solid blue */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid var(--clay); background: var(--paper); color: var(--clay-dark);
  font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pl-btn.pl-primary { background: var(--clay); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--clay) 30%, transparent); }
.pl-btn svg { flex: none; }
.pl-btn:active { transform: scale(0.98); }
.pl-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.pl-glyph { font: 400 22px/1 var(--sans); }
.pl-btn:focus-visible, .pl-tool:focus-visible, .pl-arrow:focus-visible, .pl-pick-btn:focus-visible,
.pl-card a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ---------- A playlist's picture: its first talk's landscape; Favorites, a heart on blue ---------- */
.pl-mosaic {
  position: relative; display: grid; place-items: center; flex: none; width: 76px; aspect-ratio: 1; overflow: hidden;
  border-radius: 14px; background: var(--paper-2); color: var(--clay-dark);
}
.pl-mosaic > .art { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.pl-mosaic.n0 { border: 1.5px dashed var(--line-strong); }
.pl-mosaic.fav { background: linear-gradient(145deg, #5bb8ff, #1f6fb3); color: #fff; }
.pl-mosaic.sm { width: 44px; border-radius: 10px; }
.pl-mosaic.sm svg { width: 20px; height: 20px; }
.pl-mosaic.lg { width: clamp(96px, 27vw, 150px); border-radius: 18px; box-shadow: var(--shadow); }

/* ---------- Cards: the picture, the name, how many talks ---------- */
.pl-card { position: relative; min-width: 0; list-style: none; }
.pl-card a { display: grid; gap: 3px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pl-card .pl-mosaic { width: 100%; border-radius: 16px; margin-bottom: 6px; box-shadow: var(--shadow); }
.pl-card .pl-mosaic.n0 { box-shadow: none; }
.pl-card .pl-mosaic.fav svg { width: 44px; height: 44px; }
.pl-card b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word;
  font: 700 16px/1.25 var(--sans);
}
.pl-card small { font-size: 14px; color: var(--ink-2); }
.pl-card a:active .pl-mosaic { transform: scale(0.98); }
/* Your Library > Playlists: two across (more on a wider screen) */
.pl-hub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.pl-hub-head .list-count { margin: 0; }
.pl-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (min-width: 640px) { .pl-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }
.pl-start { margin: 20px 2px 0; }
/* Under Saved Talks: a row you swipe */
.pl-row {
  --card-w: 140px;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-w); gap: 14px;
  margin: 0 -16px; padding: 2px 16px 12px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
}
.pl-row::-webkit-scrollbar { display: none; }
.pl-row .pl-card { scroll-snap-align: start; }
@media (min-width: 720px) { .pl-row { --card-w: 160px; } }

/* Empty, and a playlist that isn't there */
.pl-empty {
  display: grid; justify-items: center; gap: 12px; padding: 30px 20px 26px;
  border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); text-align: center;
}
.pl-empty .pl-display { font-size: 24px; }
.pl-empty p { margin: 0; max-width: 380px; font: 16px/1.5 var(--sans); color: var(--ink-2); }
.pl-empty .pl-btn { margin-top: 6px; }
.pl-empty-list { margin-top: 4px; }

/* ---------- One playlist ---------- */
.pl-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 16px;
  margin: 14px 0 18px; padding: 18px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow);
}
.pl-head-text { display: grid; gap: 6px; min-width: 0; }
.pl-name { overflow-wrap: break-word; }
/* a narrow phone: the picture above the name, so the name keeps its width */
@media (max-width: 359px) {
  .pl-head { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pl-head .pl-mosaic.lg { width: 92px; }
}
.pl-actions, .pl-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.pl-actions .pl-btn { flex: 1 1 140px; }
@media (max-width: 430px) { .pl-actions .pl-btn { flex-basis: 120px; padding: 0 14px; } }
.pl-tools { gap: 8px; margin-top: -2px; }
.pl-tool {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 15px/1 var(--sans); cursor: pointer;
}
.pl-tool.on { border-color: var(--clay); background: var(--clay); color: #fff; }
.pl-tool.pl-danger { color: var(--help); }
@media (hover: hover) { .pl-tool:hover { background: var(--paper-2); } .pl-tool.on:hover { background: var(--clay); } }

/* Putting the talks in order */
.pl-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-order li {
  display: grid; grid-template-columns: 44px auto minmax(0, 1fr) 44px 44px; align-items: center; gap: 4px;
  padding: 6px 4px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow);
}
.pl-grip {
  display: grid; place-items: center; align-content: center; gap: 4px; width: 44px; height: 48px;
  color: var(--ink-2); cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pl-grip i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.pl-order-num { min-width: 22px; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.pl-order-text { display: grid; gap: 2px; min-width: 0; padding-left: 6px; }
.pl-order-text b, .pl-order-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-order-text b { font: 600 16px/1.25 var(--sans); }
.pl-order-text small { font: 14px/1.3 var(--sans); color: var(--ink-2); }
.pl-arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.pl-arrow:disabled { opacity: 0.22; cursor: default; }
.pl-arrow.pl-up svg { transform: rotate(180deg); }
@media (hover: hover) { .pl-arrow:not(:disabled):hover { background: var(--paper-2); } }
.pl-sorting { user-select: none; -webkit-user-select: none; }
.pl-sorting li:not(.pl-dragging) { transition: transform 160ms ease; }
.pl-order li.pl-dragging {
  position: relative; z-index: 2; cursor: grabbing; background: var(--paper-2);
  box-shadow: 0 0 0 2px var(--clay), 0 14px 30px color-mix(in srgb, var(--ink) 22%, transparent);
}

/* ---------- Sheets: Add to playlist, and naming one ---------- */
.pl-sheet { color: var(--ink); }
.pl-sheet [hidden] { display: none !important; }
.pl-sheet .sheet-head { margin-bottom: 4px; }
.pl-sheet-talk {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 14px; padding: 10px 12px;
  border-radius: 16px; background: var(--paper-2);
}
.pl-sheet-talk > span:last-child { display: grid; gap: 2px; min-width: 0; }
.pl-sheet-talk b, .pl-sheet-talk small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-sheet-talk b { font: 600 16px/1.25 var(--sans); }
.pl-sheet-talk small { font: 14px/1.3 var(--sans); color: var(--ink-2); }
.pl-sheet .pl-new { width: 100%; }

.pl-label { display: grid; gap: 8px; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.pl-sheet .pl-input {
  box-sizing: border-box; width: 100%; min-height: 50px; margin: 0; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); color: var(--ink);
  font: 400 17px var(--sans);
}
.pl-sheet .pl-input::placeholder { color: var(--ink-2); opacity: 0.7; }
.pl-sheet .pl-input:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: transparent; }
.pl-ask { display: grid; gap: 14px; }
.pl-ask .pl-btn { width: 100%; }
.pl-make { display: grid; gap: 12px; margin: 2px 0 6px; }
.pl-make-row { display: flex; gap: 10px; }
.pl-make-row .pl-btn { flex: 1; padding: 0 14px; }

.pl-pick { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.pl-pick-btn {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 30px; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 8px; border: 0; border-radius: 14px; background: transparent; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pl-pick-btn:active { background: var(--paper-2); }
@media (hover: hover) { .pl-pick-btn:hover { background: var(--paper-2); } }
.pl-pick-text { display: grid; gap: 3px; min-width: 0; }
.pl-pick-text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 16px/1.25 var(--sans); }
.pl-pick-text small { font: 14px/1.3 var(--sans); color: var(--ink-2); }
/* the tick: an empty ring, or blue with a check */
.pl-check {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); color: transparent; box-sizing: border-box;
}
.pl-pick-btn.on .pl-check { border-color: var(--clay); background: var(--clay); color: #fff; }
.pl-pick-none { padding: 16px 8px; font: 15px/1.45 var(--sans); color: var(--ink-2); text-align: center; }