/* The album player (common/listen.js). */
.listen { --gold: #f5c96a; --ink: #d9b98a; --dim: #8a7454; --bright: #f5e8d0; --rule: #2a2118; }
.listen ol { list-style: none; margin: 0.4em 0 0; padding: 0; counter-reset: n; }
.listen li { position: relative; }
.listen li .row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; padding: 0.5em 0;
  border-bottom: 1px solid rgba(42, 33, 24, 0.6); color: var(--ink); }
.listen li .pp { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid rgba(217, 185, 138, 0.35); color: var(--ink); transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.listen li .pp svg { width: 12px; height: 12px; fill: currentColor; pointer-events: none; }
.listen li .row:hover .song { color: var(--bright); }
.listen li .row:hover .pp { color: var(--gold); border-color: var(--gold); }
.listen li .row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.listen li .d { color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.listen li.on .song, .listen li.on .d { color: var(--gold); }
.listen li.on .pp, .listen li.on .row:hover .pp { color: #140c04; border-color: transparent; background: linear-gradient(180deg, #ffd98c, #d3a14e); }
.listen li.on .row:hover .pp { filter: brightness(1.09); }
/* The row in hand fills to the playhead, a gold edge on its own rule; the
   whole row is the scrubber (listen.js). */
.listen li.on { touch-action: pan-y; }
.listen .seek { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.listen .seek i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(var(--gold), var(--gold)) bottom / 100% 1.5px no-repeat, rgba(245, 201, 106, 0.1); }
.listen li.scrub .seek i { background-color: rgba(245, 201, 106, 0.18); }
.listen .none { color: var(--dim); font-size: 13px; margin: 0.8em 0 0; }
.listen li button[disabled] { cursor: default; opacity: 0.55; }
.listen li.kept .d::before { content: '\2193  '; color: var(--gold); }
.listen .keeping { margin-top: 1.2em; }
.listen .keep { all: unset; cursor: pointer; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; color: var(--dim); border: 1px solid var(--rule); border-radius: 2px; padding: 0.8em 1.3em; }
.listen .keep:hover:not([disabled]) { color: var(--gold); }
.listen .keep[disabled] { cursor: default; }