/* Playlists (v2 preview): tiles on the profile, the playlist page, and the
   watch page's "+ Playlist" menu. Named colours and rem only. */

/* ───── Tiles ───── */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-block-start: 1.25rem; }
.pl-grid-compact { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.pf-section .pl-grid { margin-block-start: 0; }
.pl-tile { display: grid; gap: 0.5rem; color: inherit; text-decoration: none; }
.pl-tile-cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--rad-md);
  background: var(--ink-100);
  border: 1px solid var(--ink-300);
  /* a second card behind, so a tile reads as a stack of videos */
  box-shadow: 0.375rem -0.375rem 0 -0.0625rem var(--ink-200);
}
.pl-tile-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.pl-tile-count {
  position: absolute; inset-inline-end: 0.5rem; inset-block-end: 0.5rem;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.125rem 0.5rem; border-radius: 0.25rem;
  background: color-mix(in oklch, var(--ink-0), transparent 15%); color: var(--ink-800);
}
.pl-tile .vis-pill {
  position: absolute; inset-inline-start: 0.5rem; inset-block-start: 0.5rem;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.125rem 0.4375rem; border-radius: 0.25rem; border: 1px solid var(--ink-300);
  background: color-mix(in oklch, var(--ink-0), transparent 15%); color: var(--ink-700);
}
.pl-tile-title { font-size: 0.9375rem; font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tile:hover .pl-tile-cover { border-color: var(--red-500); }
.pl-tile:focus-visible { outline: 2px solid var(--red-400); outline-offset: 2px; border-radius: var(--rad-md); }

/* ───── Forms (new playlist, rename) ───── */
.pl-new, .pl-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-start: 0.75rem; }
.pl-new input, .pl-edit input, .pl-new select, .pl-edit select, .pl-add-new input {
  font: inherit; font-size: 0.875rem;
  color: var(--ink-900); background: var(--ink-50);
  border: 1px solid var(--ink-300); border-radius: var(--rad-sm);
  padding: 0.4375rem 0.625rem; min-inline-size: 0;
}
.pl-new input, .pl-edit input { inline-size: min(20rem, 100%); }
.pl-msg { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-700); }
.pl-msg:empty { display: none; }
.pl-edit .chip, .pl-add-new .chip {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-700); background: var(--ink-100);
  border: 1px solid var(--ink-300); border-radius: 999px; padding: 0.375rem 0.75rem; cursor: pointer;
}
.pl-edit .chip.is-armed { background: var(--red-500); border-color: var(--red-500); color: var(--ink-0); }

/* ───── The playlist page ───── */
/* the gap below the nav, as on every page: 56px on desktop, the side margin on a phone */
.pl-stage { padding-block: 56px 3rem; }
@media (max-width: 600px) { .pl-stage { padding-block-start: 18px; } }
@media (max-width: 380px) { .pl-stage { padding-block-start: 12px; } }
.pl-kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-400); display: flex; gap: 0.5rem; align-items: center; }
.pl-kicker .vis-pill { position: static; font-size: 0.625rem; padding: 0.125rem 0.4375rem; border-radius: 0.25rem; border: 1px solid var(--ink-300); color: var(--ink-700); }
.pl-title { margin: 0.5rem 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.pl-meta { margin: 0.75rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-500); }
.pl-meta a { color: var(--ink-800); }
.pl-desc { margin: 0.75rem 0 0; max-inline-size: 45rem; color: var(--ink-700); }
.pl-stage .pf-tray { margin-inline-start: 0; }
.pl-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pl-row {
  display: grid; grid-template-columns: 2rem 10rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: 0.5rem; border-radius: var(--rad-md);
  border: 1px solid transparent;
}
.pl-row:hover { background: var(--ink-100); border-color: var(--ink-300); }
.pl-n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-500); text-align: center; }
.pl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rad-sm); background: var(--ink-100); }
.pl-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.pl-thumb .grade { position: absolute; inset-block-start: 0.25rem; inset-inline-end: 0.25rem; transform: scale(0.75); transform-origin: top right; }
.pl-info { display: grid; gap: 0.25rem; min-inline-size: 0; color: inherit; text-decoration: none; }
.pl-song { font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sub { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row.is-gone { opacity: 0.6; }
.pl-thumb-gone { background: repeating-linear-gradient(135deg, var(--ink-100), var(--ink-100) 0.5rem, var(--ink-200) 0.5rem, var(--ink-200) 1rem); }
.pl-row-tools { display: inline-flex; gap: 0.375rem; }
.pl-row-tools .chip {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500); background: var(--ink-100);
  border: 1px solid var(--ink-300); border-radius: 999px; padding: 0.375rem 0.75rem; cursor: pointer;
}
.pl-row-tools .chip:hover:not(:disabled) { color: var(--ink-800); border-color: var(--red-500); }
.pl-row-tools .chip:disabled { opacity: 0.4; cursor: default; }
.pl-row-tools .pf-move-up::before { content: "\2191"; }
.pl-row-tools .pf-move-down::before { content: "\2193"; }
@media (max-width: 640px) {
  .pl-row { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.5rem 0.75rem; }
  .pl-n { display: none; }
  .pl-row-tools { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ───── Watch page: "+ Playlist" ───── */
.pl-add-wrap { position: relative; display: inline-block; }
.pl-add-menu {
  position: absolute; z-index: 20; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
  min-inline-size: 16rem; max-inline-size: calc(100vw - 2rem);
  padding: 0.5rem; border: 1px solid var(--ink-300); border-radius: var(--rad-md);
  background: var(--ink-50);
  box-shadow: 0 1.125rem 2.5rem -0.75rem color-mix(in oklch, black 60%, transparent);
  text-align: start;
}
.pl-add-title { padding: 0.25rem 0.375rem 0.5rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.pl-add-lists { display: grid; max-block-size: 15rem; overflow-y: auto; }
.pl-add-lists button {
  display: flex; align-items: center; gap: 0.5rem; inline-size: 100%;
  padding: 0.5rem 0.5rem; background: none; border: 0; border-radius: var(--rad-sm);
  font: inherit; font-size: 0.875rem; color: var(--ink-800); text-align: start; cursor: pointer;
}
.pl-add-lists button::before {
  content: ""; flex: none; inline-size: 0.875rem; block-size: 0.875rem;
  border: 1px solid var(--ink-500); border-radius: 0.1875rem;
}
.pl-add-lists button[aria-checked="true"]::before { background: var(--red-500); border-color: var(--red-500); box-shadow: inset 0 0 0 0.1875rem var(--ink-50); }
.pl-add-lists button:hover { background: var(--ink-200); }
.pl-add-none { padding: 0.5rem; font-size: 0.8125rem; color: var(--ink-500); }
.pl-add-new { display: flex; gap: 0.375rem; margin-block-start: 0.5rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--ink-300); }
.pl-add-new input { flex: 1; }
.pl-add-menu .pl-msg { display: block; padding: 0.375rem 0.375rem 0; }
.pl-add-menu .pl-msg:empty { display: none; }

/* ───── Watch page, played from a playlist ───── */
.player-shell.pl-shell { position: relative; }
.pl-upnext {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 0.75rem;
  padding: 1rem; text-align: center;
  background: color-mix(in oklch, black 72%, transparent);
  color: var(--ink-900);
}
.pl-upnext[hidden] { display: none; }
.pl-upnext-kicker { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); }
.pl-upnext-kicker span { color: var(--red-400); font-weight: 700; }
.pl-upnext-song { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem, 3vw, 2rem); text-transform: uppercase; max-inline-size: 40rem; }
.pl-upnext-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.pl-unmute {
  position: absolute; z-index: 4; inset-block-start: 0.75rem; inset-inline-start: 0.75rem;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--ink-900); background: color-mix(in oklch, var(--ink-0), transparent 15%);
  border: 1px solid var(--red-500); border-radius: 999px; padding: 0.375rem 0.875rem; cursor: pointer;
}
.pl-unmute[hidden] { display: none; }
.pl-queue {
  margin-block-start: 1rem;
  border: 1px solid var(--ink-300); border-radius: var(--rad-md);
  background: var(--ink-50);
}
.pl-queue-head { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-block-end: 1px solid var(--ink-300); }
.pl-queue-head > div { min-inline-size: 0; margin-inline-end: auto; }
.pl-queue-kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-400); }
.pl-queue-title { display: block; font-weight: 700; color: var(--ink-900); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-queue-title:hover { color: var(--red-400); }
.pl-auto { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-700); cursor: pointer; white-space: nowrap; }
.pl-auto input { accent-color: var(--red-500); }
.pl-queue-list { list-style: none; margin: 0; padding: 0.375rem; max-block-size: 18rem; overflow-y: auto; }
.pl-queue-list a { display: grid; grid-template-columns: 1.75rem 6rem minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.375rem; border-radius: var(--rad-sm); color: inherit; text-decoration: none; }
.pl-queue-list a:hover { background: var(--ink-100); }
.pl-queue-list .is-now a { background: color-mix(in oklch, var(--red-500), transparent 85%); }
.pl-queue-n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-500); text-align: center; }
.pl-queue-list .is-now .pl-queue-n { color: var(--red-400); }
.pl-queue-list img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.25rem; display: block; }
.pl-queue-txt { display: grid; min-inline-size: 0; }
.pl-queue-song { font-size: 0.875rem; font-weight: 600; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-queue-sub { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-play { margin: 1rem 0 0; }

.pf-add-pl {
  font: inherit; font-size: 0.8125rem; color: var(--ink-800); background: var(--ink-50);
  border: 1px solid var(--ink-300); border-radius: 999px; padding: 0.3125rem 0.75rem; max-inline-size: 14rem;
}

/* ───── + Add section: a menu of the kinds, then which playlist ───── */
.pf-add-tray { position: relative; }
.pf-menu-add { inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0; }
.pf-menu-add .pf-menu-more::after { content: "\203A"; margin-inline-start: auto; color: var(--ink-500); font-size: 1.125rem; line-height: 1; }
.pf-menu-add .pf-menu-more:disabled::after { content: none; }
.pf-menu-add .pf-menu-back {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
  padding-block: 0.375rem;
}
.pf-menu-add .pf-menu-back::before { content: "\2039"; font-size: 1rem; line-height: 1; }
.pf-add-step[hidden] { display: none; }