/* The music player: a queue you can see, transport you recognise, and three
   plain ways to add music. It reads the theme tokens, so it is a citizen of
   whichever world it is placed in. */
.cap-music{position:relative;display:flex;flex-direction:column;gap:8px;
  height:100%;min-height:0}

/* ── transport ────────────────────────────────────────────────────────── */
.cap-music-transport{display:flex;align-items:center;gap:4px;flex:none}
.cap-music-transport button{width:32px;height:32px;flex:none;display:grid;
  place-items:center;cursor:pointer;border-radius:50%;
  border:var(--rule) solid var(--hairline-2);background:var(--card);color:var(--ink);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.cap-music-transport button:hover{transform:translateY(-1px)}
.cap-music-transport button.on{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}
.cap-music-transport .cap-music-play{width:36px;height:36px}
.cap-music-nowline{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:var(--fs-12);color:var(--ink-2);padding-left:6px}

/* ── stage: a service embed, when the current item is one ─────────────── */
.cap-music-stage{flex:none;height:44%;min-height:120px;overflow:hidden;
  border:var(--rule) solid var(--hairline);border-radius:var(--r);
  background:color-mix(in oklab,var(--paper-2) 55%,transparent)}
.cap-music-stage[hidden]{display:none}
.cap-music-stage iframe{width:100%;height:100%;border:0;display:block;background:#000}
.cap-music-open{display:flex;align-items:center;justify-content:center;height:100%;
  gap:8px;color:var(--ink);text-decoration:none;font-size:var(--fs-14);font-weight:600}
.cap-music-missing{display:flex;align-items:center;justify-content:center;height:100%;
  padding:16px;text-align:center;color:var(--ink-3);font-size:var(--fs-12-5);
  font-style:italic;line-height:1.5}

/* ── the queue ────────────────────────────────────────────────────────── */
.cap-music-queue{flex:1;min-height:0;overflow-y:auto;display:flex;
  flex-direction:column;gap:2px;border-top:var(--rule) solid var(--hairline);
  padding-top:5px}
.cap-music-queue-empty{color:var(--ink-3);font-size:var(--fs-12-5);font-style:italic;
  padding:14px 6px;text-align:center;line-height:1.5}
.cap-music-row{display:flex;align-items:center;gap:7px;padding:5px 7px;
  border-radius:var(--r-sm);cursor:pointer}
.cap-music-row:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
.cap-music-row.on{background:var(--nav-on-bg,var(--ink));color:var(--nav-on-fg,var(--paper))}
.cap-music-row.missing{opacity:.5}
.cap-music-row .n{font-family:var(--mono);font-size:var(--fs-10-5);opacity:.6;
  width:16px;text-align:right;flex:none}
.cap-music-row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:var(--fs-13)}
.cap-music-row .k{font-size:var(--fs-9-5);text-transform:uppercase;letter-spacing:.08em;
  opacity:.6;flex:none}
.cap-music-row .acts{display:flex;gap:1px;flex:none;opacity:0;
  transition:opacity var(--dur) var(--ease)}
.cap-music-row:hover .acts,.cap-music-row.on .acts{opacity:1}
.cap-music-row .acts button{border:0;background:none;color:inherit;cursor:pointer;
  padding:2px;opacity:.7;display:grid;place-items:center}
.cap-music-row .acts button:hover{opacity:1}

/* ── add / save / playlists ───────────────────────────────────────────── */
.cap-music-addrow,.cap-music-savebox{display:flex;gap:6px;flex-wrap:wrap;flex:none}
.cap-music-addrow[hidden],.cap-music-savebox[hidden]{display:none}
.cap-music-addrow select,.cap-music-addrow input,
.cap-music-savebox input{height:30px;border:var(--rule) solid var(--hairline-2);
  border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink);font:inherit;
  font-size:var(--fs-12);padding:0 8px;min-width:0}
.cap-music-addrow input,.cap-music-savebox input{flex:1;min-width:110px}
.cap-music-addrow select{max-width:140px;flex:none}
.cap-music-addrow button,.cap-music-savebox button{height:30px;padding:0 12px;flex:none;
  border-radius:var(--r-sm);border:var(--rule) solid var(--hairline-2);
  background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-12);
  cursor:pointer}

.cap-music-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:none}
.cap-music-foot button,.cap-music-foot select{height:28px;padding:0 10px;
  border-radius:var(--r-pill);border:var(--rule) solid var(--hairline-2);
  background:transparent;color:var(--ink-2);font:inherit;font-size:var(--fs-11-5);
  cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.cap-music-foot button.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cap-music-foot button:hover{color:var(--ink)}
.cap-music-foot select{max-width:150px}
.cap-music-note{margin-left:auto;font-size:var(--fs-11-5);color:var(--accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40%}

.cap-music-menu{position:absolute;left:10px;bottom:42px;z-index:6;display:flex;
  flex-direction:column;min-width:190px;padding:5px;
  border:var(--rule) solid var(--hairline-2);border-radius:var(--r-sm);
  background:var(--card);box-shadow:var(--lift)}
.cap-music-menu[hidden]{display:none}
.cap-music-menu button{border:0;background:none;color:var(--ink);text-align:left;
  padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font:inherit;
  font-size:var(--fs-13)}
.cap-music-menu button:hover{background:color-mix(in oklab,var(--ink) 7%,transparent)}