/* ================================================================
   PROFILE LISTS and GROOVE MEMBER ROWS. Loaded last so these win over the
   rules they refine (trap 1). Motion is transitions only; the global
   reduced-motion rule in interactions.css flattens them.
   ================================================================ */

/* ---- Lists: shelves ---------------------------------------------------- */
.pl-acts { display: flex; gap: 8px; align-items: center; }
.pl-shelves {
  display: flex; flex-direction: column; max-width: 560px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  overflow: hidden;
}
.pl-shelf + .pl-shelf { border-top: 1px solid var(--border); }
.pl-head { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.pl-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  padding: 10px 6px 10px 12px; min-height: 56px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pl-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 12px; }
.pls-strip { display: flex; flex-shrink: 0; padding-left: 10px; }
.pls-strip img, .pls-strip-empty {
  width: 32px; height: 32px; border-radius: 6px; object-fit: cover;
  background: var(--surface-3); margin-left: -10px;
  box-shadow: 0 0 0 2px var(--surface);
  transition: margin-left var(--dur) var(--ease, ease);
}
.pls-strip-empty { display: block; border: 1px dashed var(--border-strong); box-shadow: none; }
.pl-toggle:hover .pls-strip img { margin-left: -6px; }
.pl-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-tt b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tt small { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }
.pl-chev {
  width: 8px; height: 8px; flex-shrink: 0; margin-right: 4px;
  border-right: 1.6px solid var(--text-dim); border-bottom: 1.6px solid var(--text-dim);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease, ease);
}
.pl-shelf.is-open .pl-chev { transform: translateY(2px) rotate(-135deg); }

/* Smooth open without measuring: a one-row grid going 0fr -> 1fr. */
.pl-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease, ease);
}
.pl-shelf.is-open .pl-body { grid-template-rows: 1fr; }
.pl-inner { min-height: 0; overflow: hidden; padding: 0 14px; }
.pl-shelf.is-open .pl-inner { padding-bottom: 10px; }
.pl-inner .song-mini-list { max-width: none; }
.pl-inner > .reco-note:first-child { margin: 0 0 4px; }
.pl-shelf:not(.is-open) .pl-inner { visibility: hidden; transition: visibility 0s .3s; }

/* ---- Lists: hide controls ---------------------------------------------- */
.pl-eye {
  flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid transparent; background: none;
  color: var(--text-faint); cursor: pointer;
  transition: color .15s, background .15s;
}
.pl-eye:hover { color: var(--text); background: var(--surface-2); }
.pl-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pl-eye .pl-eye-slash { opacity: 0; transition: opacity .15s; }
.pl-eye[aria-pressed="true"] { color: var(--gold); }
.pl-eye[aria-pressed="true"] .pl-eye-slash { opacity: 1; }
.pl-eye-card {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  background: rgba(10,9,8,.62); color: #fff; backdrop-filter: blur(6px);
}
.pl-eye-card:hover { background: rgba(10,9,8,.8); color: #fff; }
.list-card { position: relative; }

.pl-hid-tag { display: none; font-style: normal; color: var(--gold); }
.is-hidden .pl-hid-tag, .all-hidden .pl-hid-tag { display: inline; }
.pl-shelf.is-hidden .pls-strip, .pl-shelf.is-hidden .pl-tt b,
.all-hidden .pl-shelf .pls-strip, .all-hidden .pl-shelf .pl-tt b { opacity: .45; }
.list-card.is-hidden .list-covers, .all-hidden .list-card .list-covers { opacity: .4; }
.pl-all-note { display: none; margin: -6px 0 12px; }
.all-hidden .pl-all-note { display: block; }
.pl-all[aria-pressed="true"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--border-strong)); }

/* ---- Groove member rows ------------------------------------------------
   Name, role badge and taste chip used to share one inline line inside a
   box that could shrink below the badge, so "Vice President" ran under the
   % chip. Now the text column never goes below 128px (the leader buttons
   wrap to their own line first), the name ellipsises, the badge wraps under
   the name when the two do not fit side by side, and the chip keeps its own
   right-hand slot. */
.groove-member { flex-wrap: wrap; row-gap: 8px; }
.groove-member .gm-meta { flex: 1 1 128px; min-width: 0; }
.groove-member .gm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.groove-member .gm-name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groove-member .groove-role { flex-shrink: 0; margin-left: 0; }
.groove-member .ar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groove-member .groove-acts { margin-left: auto; margin-top: 0; }

/* ---- Lists: a 2 / 3 / 4 column grid, the owner's choice ---------------- */
.pl-cols { display: inline-flex; gap: 4px; padding: 3px; margin: 2px 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.pl-cols button { display: inline-flex; gap: 2px; align-items: stretch; height: 30px; padding: 7px 9px; border: 0; border-radius: 7px; background: none; cursor: pointer; color: var(--text-faint); -webkit-tap-highlight-color: transparent; }
.pl-cols button i { width: 5px; border-radius: 1.5px; background: currentColor; }
.pl-cols button[aria-checked="true"] { background: var(--surface-3); color: var(--text); }
.pl-cols button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lists-wrap.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lists-wrap.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lists-wrap.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lists-wrap.cols-3 .list-card, .lists-wrap.cols-4 .list-card { padding: 8px; }
.lists-wrap.cols-3 .list-title, .lists-wrap.cols-4 .list-title { font-size: 12px; }
.lists-wrap.cols-4 .list-meta { font-size: 10px; }
.lists-wrap.cols-3 .pl-eye-card, .lists-wrap.cols-4 .pl-eye-card { top: 10px; right: 10px; width: 28px; height: 28px; }