/* the player: a bar under every page, fixed, over the content and under the popovers */
:root { --player-h: 64px; }
body.has-player { padding-bottom: var(--player-h); }
body.has-player a.qr { bottom: calc(64px + var(--player-h)); }
body.has-player .toast { bottom: calc(16px + var(--player-h)); }
body.has-player .consent-banner { bottom: var(--player-h); }
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--player-h); display: grid; grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, 2fr) auto; align-items: center; gap: 12px; padding: 0 clamp(12px, 2vw, 28px); background: #000; border-top: 1px solid var(--line); font-size: 13px; }
.player[hidden] { display: none; }
.player .pcover { display: block; width: 48px; height: 48px; border-radius: 4px; overflow: hidden; border: 0; background: var(--panel); }
.player .pcover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.player .pmeta { display: grid; min-width: 0; }
.player .pmeta a { color: var(--fg); text-decoration: none; border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .pmeta a:hover { color: var(--gold); }
.player .pmeta .psub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .pctl { display: flex; gap: 4px; align-items: center; }
.player button { background: none; border: 0; color: var(--dim); padding: 6px 8px; cursor: pointer; font: inherit; border-radius: var(--radius); box-shadow: none; }
.player button:hover { color: var(--gold); background: var(--panel); }
.player button[aria-pressed="true"] { color: var(--gold); }
.player button.big { font-size: 18px; color: var(--fg); }
.player .pseek { display: grid; grid-template-columns: 3.2em 1fr 3.2em; align-items: center; gap: 8px; min-width: 0; }
.player .pseek input[type=range] { width: 100%; margin: 0; accent-color: var(--gold); }
.player .pseek span { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: center; }
.player .pmore { display: flex; gap: 2px; align-items: center; position: relative; }
.player .pqueue { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 40; width: min(340px, calc(100vw - 32px)); max-height: 50vh; overflow: auto; padding: 10px 12px; border-radius: var(--radius); background: var(--panel, var(--bg)); border: 1px solid var(--gold); }
.player .pqueue[hidden] { display: none; }
.player .pqueue ol { margin: 0; padding: 0 0 0 1.4em; }
.player .pqueue li.now button { color: var(--gold); }
.player .pqueue li button { text-align: left; padding: 3px 4px; width: 100%; }

/* the library's rows */
.songs-page h2 { margin: 26px 0 8px; font-size: 1.05rem; }
.songs-page .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.songs-page .shelf a.card { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--fg); }
.songs-page .shelf a.card:hover { border-color: var(--gold); }
.songs-page .shelf a.card .crest { display: inline-block; }
table.songs td.play { width: 2.2em; }
table.songs button.row { background: none; border: 0; color: var(--dim); padding: 2px 6px; cursor: pointer; font: inherit; box-shadow: none; }
table.songs button.row:hover { color: var(--gold); }
table.songs tr.now td { color: var(--gold); }
table.songs td.acts { white-space: nowrap; }
table.songs td.acts form { display: inline; }
table.songs details.more { display: inline-block; position: relative; }
table.songs details.more summary { list-style: none; cursor: pointer; color: var(--dim); padding: 2px 6px; }
table.songs details.more summary::-webkit-details-marker { display: none; }
table.songs details.more .menu { position: absolute; right: 0; z-index: 20; display: grid; gap: 4px; min-width: 200px; padding: 8px 10px; border-radius: var(--radius); background: var(--panel, var(--bg)); border: 1px solid var(--gold); }
table.songs details.more .menu form { display: flex; gap: 6px; }
.songs-page .hero { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.songs-page form.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
.songs-page form.filters input, .songs-page form.filters select { width: auto; min-width: 12em; flex: 1 1 14em; max-width: 28em; }
.playlist-page .own { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
ul.playlists { list-style: none; padding: 0; margin: 0; }
ul.playlists li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }

@media (max-width: 860px) {
  :root { --player-h: 88px; }
  .player { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 10px; padding: 6px 12px; height: auto; min-height: var(--player-h); }
  .player .pcover { width: 40px; height: 40px; }
  .player .pseek { grid-column: 1 / -1; }
  .player .pmore { grid-row: 1; grid-column: 3; }
  .player .pctl { grid-column: 3; }
  .player .pmore .quiet { display: none; }
}