/* The on-demand player at the foot of a page, and its round play buttons (player.js). */
.pbtn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--ink); color: var(--bg); display: grid; place-items: center;
}
.pbtn svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.pbtn .i-pause, .pbtn[aria-pressed="true"] .i-play { display: none; }
.pbtn[aria-pressed="true"] .i-pause { display: inline; }

.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .35rem .9rem;
  align-items: center; padding: .75rem var(--pad); background: var(--ink); color: var(--bg);
}
.player .pbtn { background: var(--bg); color: var(--ink); }
.p-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-text b { font-family: var(--display); }
.p-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--bg) 20%, transparent); overflow: hidden; }
.p-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.player[hidden] { display: none; }