/* Mini-player (public/assets/js/np.js): status bar cell, and a small box in the family tree page's top bar. Theme tokens only. */
.np[hidden] { display: none !important; }
.np { display: flex; align-items: center; }
.np-b { width: 32px; height: 100%; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0; }
.np-b svg { width: 10px; height: 10px; fill: currentColor; }
.np-play { color: var(--accent); }
.np-play svg { width: 11px; height: 11px; }
.np-play .i-pause, .np-play.is-playing .i-play { display: none; }
.np-play.is-playing .i-pause { display: block; }
.np-b:hover, .np-b:focus-visible { color: var(--accent); background: var(--bg-5); }
.np-b:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.np-scope { display: block; width: 96px; height: 24px; margin: 0 12px 0 6px; color: var(--scope, var(--accent)); }
/* the spectrum draws a darker window behind its dots; themes can set its colour with --np-scope-bg */
.np-scope[hidden] { display: none; }
.np-t { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 18px 0 4px; color: var(--title); text-decoration: none; }
.np-t:hover, .np-t:focus-visible { color: var(--accent); }

/* in the status bar: a cell like Theme */
.rl-np { gap: 0; padding: 0; }
.rl-np .np-scope[hidden] + .np-t { padding-left: 10px; }

/* on the family tree page: a small box left of Theme */
.qe-np { height: 32px; margin-left: auto; border: 1px solid var(--line-3); background: var(--bg-2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.qe-np .np-b { height: 30px; }

@media (max-width: 600px) {
  .np-t { display: none; }                     /* phones: controls + scope, so it fits beside Theme */
  .np-scope { width: 64px; margin-right: 8px; }
}
@media (max-width: 600px) {
  .rail:has(.rl-np:not([hidden])) .rl-label { display: none; }   /* phones: while music plays, the controls take the label's spot */
  .rl-np .np-b { width: 30px; }
}