/* ЭРГОНОМИКА ВОСПРОИЗВЕДЕНИЯ — ФОРМА, ЖИВУЩАЯ С ПОВЕДЕНИЕМ.

   Поведение (media.js) есть актив СИСТЕМЫ и подаётся всякой странице всякого владельца;
   значит и форма его узлов — актив Системы, а не то, что каждый владелец переписывает у
   себя. Первая редакция положила эти правила в таблицу владельца, и закон немедленно
   нашёл второго владельца без них: одно поведение, N форм — это N расхождений, ждущих
   своего часа. Значения берутся из ТОКЕНОВ страницы (их подаёт владелец), поэтому дом
   один, а вид — домовый. */
.now-playing {
  position: fixed;
  left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2);
  margin-inline: auto;
  max-width: var(--measure);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: var(--overlay-solid);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  z-index: 103;
}
.now-playing[hidden] { display: none; }
.now-playing-toggle {
  min-width: var(--touch-min); min-height: var(--touch-min);
  flex: 0 0 auto;
  font-size: var(--fs-s);
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-control); cursor: pointer;
}
.now-playing-name {
  flex: 1 1 auto; min-width: 0;
  text-align: left;
  font: 400 var(--fs-body-min)/1.3 var(--sans);
  color: var(--ink-soft);
  background: transparent; border: 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.now-playing-toggle:focus-visible, .now-playing-name:focus-visible {
  outline: var(--focus-outline-min) solid var(--accent); outline-offset: 2px;
}