/* Music page and the site-wide player bar */
.music { --lib: 15rem; display: grid; grid-template-columns: var(--lib) minmax(0, 1fr); gap: 0; align-items: start; }
.music.has-now { grid-template-columns: var(--lib) minmax(0, 1fr) 19rem; }
.music-main { min-width: 0; padding: 0 var(--s-5); }

/* Library: playlists on the left, one line between it and the rest of the page */
.library { position: sticky; top: var(--s-4); display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100vh - 8rem); padding-right: var(--s-3); border-right: 1px solid var(--line-strong); }
.library-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-2) var(--s-3) var(--s-3); }
.library-head h2 { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.library-list { display: grid; align-content: start; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.lib-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.lib-item:hover, .lib-item.is-active { background: rgb(var(--fg-rgb) / 0.09); }
.lib-art { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-2); font-weight: 700; }
.lib-art img { width: 100%; height: 100%; object-fit: cover; }
.lib-liked { background: var(--white); border-color: var(--white); color: var(--black); }
.lib-liked svg { width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.lib-text { display: grid; min-width: 0; }
.lib-text strong, .lib-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-text span { color: var(--muted); font-size: 0.8125rem; }

/* Reordering: a grip on each playlist and on each song of a playlist */
.lib-row { display: flex; align-items: center; border-radius: var(--r-md); }
.lib-row .lib-item { flex: 1; min-width: 0; }
.lib-grip, .track-grip { width: 1.75rem; height: 1.75rem; cursor: grab; touch-action: none; opacity: 0; }
.music .lib-grip svg, .music .track-grip svg { width: 1.125rem; height: 1.125rem; stroke-width: 3; }
.lib-row:hover .lib-grip, .track:hover .track-grip, .lib-grip:focus-visible, .track-grip:focus-visible { opacity: 1; }
@media (hover: none) { .lib-grip, .track-grip { opacity: 1; } }
.lib-row.is-dragging, .track.is-dragging { background: rgb(var(--fg-rgb) / 0.14); box-shadow: var(--shadow-lift); }
.is-dragging, .is-dragging .lib-grip, .is-dragging .track-grip { cursor: grabbing; }
.is-dragging .lib-item { pointer-events: none; }

/* Search sits in the top middle */
.view.is-wide { width: calc(100% - 2 * var(--s-5)); }
.music-top { display: grid; grid-template-columns: 1fr minmax(0, 34rem) 1fr; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.music-home { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.55rem 1.1rem 0.55rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(var(--fg-rgb) / 0.06); color: var(--white); font: inherit; font-weight: 600; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.music-home svg { width: 1.25rem; height: 1.25rem; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.music-home:hover { background: rgb(var(--fg-rgb) / 0.14); }
.music-home.is-active { background: var(--white); color: var(--black); border-color: var(--white); }
.music-search { position: relative; width: 100%; }
.music-search svg { position: absolute; left: var(--s-4); top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.music-search input { width: 100%; padding: var(--s-3) var(--s-4) var(--s-3) 3rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(var(--fg-rgb) / 0.06); color: var(--white); font: inherit; }
.music-search input:focus { outline: none; border-color: var(--white); }
.music-chips { flex-wrap: nowrap; overflow-x: auto; margin-bottom: var(--s-5); padding-bottom: var(--s-1); scrollbar-width: none; }
.music-chips[hidden] { display: none; }
.music-chips::-webkit-scrollbar { display: none; }
.music-chips .chip { flex: none; }
.music-chips .chip.is-active { background: var(--white); color: var(--black); }

.music-greeting { margin: 0 0 var(--s-5); font-size: clamp(1.75rem, 4vw, 2.5rem); }
.music-head .music-greeting { margin-bottom: var(--s-1); }
.music-head { margin-bottom: var(--s-4); }
.music-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.music-head > .btn { margin-top: var(--s-3); }
.music-heading { margin: 0; font-size: 1.375rem; }
.music-note { padding: var(--s-4) 0; }
.music-more { display: flex; justify-content: center; margin-top: var(--s-5); }

.shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.shelf { min-width: 0; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.shelf-tools { display: flex; align-items: center; gap: var(--s-1); }
.shelf-all { margin-right: var(--s-2); padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.shelf-all:hover { color: var(--white); text-decoration: underline; }
.shelf-row { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 11rem; gap: var(--s-2); min-height: 14rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-row .cover-wrap { scroll-snap-align: start; }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-2); }

.cover-wrap { position: relative; content-visibility: auto; contain-intrinsic-size: 11rem 14rem; }
.cover { display: grid; align-content: start; gap: 2px; width: 100%; padding: var(--s-3); border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.cover:hover { background: rgb(var(--fg-rgb) / 0.08); }
.cover.is-playing .cover-name { text-decoration: underline; }
.cover img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--bg-2); margin-bottom: var(--s-2); }
.cover-name, .cover-artist { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-name { font-weight: 600; }
.cover-artist { color: var(--muted); font-size: 0.875rem; }
.cover-add { position: absolute; top: calc(var(--s-3) + 0.4rem); right: calc(var(--s-3) + 0.4rem); display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bg-0) 75%, transparent); color: var(--white); opacity: 0; cursor: pointer; transition: opacity var(--dur-fast) var(--ease-out); }
.cover-add svg, .music .gbtn svg { width: 1.25rem; height: 1.25rem; }
.cover-wrap:hover .cover-add, .cover-add:focus-visible { opacity: 1; }

.track-list { display: grid; gap: 2px; }
.track { display: flex; align-items: center; gap: var(--s-2); padding-right: var(--s-2); border-radius: var(--r-md); content-visibility: auto; contain-intrinsic-size: auto 4rem; transition: background var(--dur-fast) var(--ease-out); }
.track:hover, .track.is-playing { background: rgb(var(--fg-rgb) / 0.08); }
.track-num { width: 2rem; flex: none; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.track-play { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.track-play img { width: 3rem; height: 3rem; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--bg-2); }
.track-text { display: grid; min-width: 0; }
.track-text strong, .track-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-text span { color: var(--muted); font-size: 0.875rem; }
.track.is-playing strong { text-decoration: underline; }
.track-time { color: var(--muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* Now playing, on the right */
.now { position: sticky; top: var(--s-4); display: grid; gap: var(--s-3); align-content: start; max-height: calc(100vh - 8rem); padding-left: var(--s-4); border-left: 1px solid var(--line-strong); overflow-y: auto; scrollbar-width: thin; }
.now[hidden] { display: none; }
.now-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--bg-2); }
.now-info { display: flex; align-items: center; gap: var(--s-1); }
.now-text { display: grid; flex: 1; min-width: 0; }
.now-text strong { font-size: 1.25rem; overflow-wrap: anywhere; }
.now-text span { color: var(--muted); }
.now-lyrics { justify-self: start; gap: var(--s-2); }
.now-lyrics svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.now-title { margin: var(--s-3) 0 0; color: var(--muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.now-queue { display: grid; gap: var(--s-2); }
.now-next { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.now-next img { width: 2.5rem; height: 2.5rem; flex: none; object-fit: cover; border-radius: var(--r-sm); background: var(--bg-2); }
.now-next > span { display: grid; min-width: 0; }
.now-next strong, .now-next span span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-next span span { color: var(--muted); font-size: 0.8125rem; }

/* Lyrics page: the line being sung is bright and the rest are dim */
.lyrics { display: grid; gap: var(--s-3); padding-bottom: 8rem; }
.lyric { margin: 0; color: var(--muted); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 700; line-height: 1.3; transition: color var(--dur) var(--ease-out); }
.lyric[data-line] { cursor: pointer; }
.lyric[data-line]:hover { color: var(--white-2, #ddd); }
.lyric.is-active { color: var(--white); }
.lyric.is-plain { color: var(--white); font-size: 1.125rem; font-weight: 500; }

/* Add to playlist menu and the new playlist dialog */
.pl-menu { position: fixed; z-index: 80; display: grid; gap: 2px; min-width: 12rem; max-width: 18rem; max-height: 16rem; padding: var(--s-1); overflow-y: auto; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lift); }
.pl-menu button { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-menu button:hover { background: rgb(var(--fg-rgb) / 0.1); }
.pl-menu svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.pl-dialog { width: min(24rem, calc(100% - 2rem)); padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-1); color: var(--white); }
.pl-dialog::backdrop { background: color-mix(in srgb, var(--bg-0) 72%, transparent); }
.pl-dialog form { display: grid; gap: var(--s-4); justify-items: center; }
.pl-dialog h2 { margin: 0; }
.pl-dialog .field { width: 100%; }
.pl-pick { cursor: pointer; }
.pl-pick-art { display: grid; place-items: center; width: 8rem; height: 8rem; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--muted); }
.pl-pick-art:hover { color: var(--white); border-color: var(--white); }
.pl-pick-art svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pl-pick-art img { width: 100%; height: 100%; object-fit: cover; }
.pl-dialog [data-dialog-clear] { padding: var(--s-1) var(--s-4); }
.pl-dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); width: 100%; }

/* The player floats above the menu, centered, and stays while you move between pages */
.player[hidden] { display: none; }
.player { view-transition-name: player; position: fixed; left: 50%; bottom: 8rem; translate: -50% 0; z-index: 45; display: grid; grid-template-columns: minmax(0, 15rem) minmax(18rem, 1fr) auto; align-items: center; gap: var(--s-5); width: min(64rem, calc(100% - 2 * var(--s-3))); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2); background: color-mix(in srgb, var(--bg-0) 90%, transparent); border: 1px solid var(--line-strong); border-radius: 999px; backdrop-filter: blur(10px); }
.has-player .page { padding-bottom: 13rem; }
.player-track { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.player-art { width: 3rem; height: 3rem; flex: none; object-fit: cover; border-radius: 50%; background: var(--bg-2); }
.player-text { display: grid; min-width: 0; }
.player-text strong, .player-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-text span { color: var(--muted); font-size: 0.8125rem; }
.player-main { display: grid; gap: 2px; }
.player-buttons { display: flex; justify-content: center; align-items: center; gap: var(--s-1); }
.player-play { background: var(--white); color: var(--black); }
.player-play:hover { background: var(--white); color: var(--black); }
.player-mini-play { display: none; }
.player .gbtn { position: relative; }
.player .gbtn[aria-pressed="true"] { color: var(--white); }
.player .gbtn[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--white); }
.player-seek { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.wave { flex: 1; min-width: 0; height: 1.5rem; cursor: pointer; touch-action: none; border-radius: 6px; }
.wave:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }
.wave canvas { display: block; width: 100%; height: 100%; }
.player-side { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1); }
.player-proxy { display: flex; align-items: center; gap: var(--s-2); margin-right: var(--s-2); color: var(--muted); font-size: 0.8125rem; cursor: pointer; }
.player-volume { display: flex; align-items: center; gap: var(--s-1); }
.player-volume input { width: 5.5rem; }
.player input[type="range"] { accent-color: var(--white); }

/* Minimized: just the cover, name, play and the buttons to bring it back or close it. The music keeps playing. */
.player.is-mini { grid-template-columns: auto auto auto; gap: var(--s-3); width: auto; max-width: calc(100% - 2 * var(--s-3)); }
.player.is-mini .player-main, .player.is-mini .player-proxy, .player.is-mini .player-volume, .player.is-mini [aria-label="Lyrics"], .player.is-mini .player-track .fav { display: none; }
.player.is-mini .player-mini-play { display: grid; }
.player.is-mini .player-text { max-width: 11rem; }

@media (max-width: 64rem) {
  .music.has-now { grid-template-columns: var(--lib) minmax(0, 1fr); }
  .now { display: none; }
  .player { grid-template-columns: minmax(0, 1fr) minmax(16rem, 1.4fr) auto; }
  .player-proxy span:first-child, .player-volume input { display: none; }
}
@media (max-width: 52rem) {
  .music-top { grid-template-columns: auto 1fr; }
  .music, .music.has-now { grid-template-columns: 1fr; }
  .library { position: static; max-height: none; padding: 0 0 var(--s-3); border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .library-list { grid-auto-flow: column; grid-auto-columns: 12rem; overflow-x: auto; overflow-y: hidden; }
  .music-main { padding: var(--s-4) 0 0; }
  .player { grid-template-columns: minmax(0, 1fr) auto; border-radius: var(--r-md); padding-right: var(--s-3); }
  .player-main { display: none; }
  .player .player-mini-play { display: grid; }
  .player-proxy, .player-volume, .player-side [aria-label="Lyrics"] { display: none; }
}

/* Minimizing and expanding morph the bar instead of jumping (see the mini button in player.js) */
::view-transition-group(player) { animation-duration: 0.38s; animation-timing-function: var(--ease-spring, ease); }
::view-transition-old(player), ::view-transition-new(player) { height: 100%; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

/* YouTube fallback: a small rounded card above the player. YouTube asks that its player stays visible while it plays. */
.yt-card { position: fixed; left: var(--s-4); bottom: 14rem; z-index: 44; width: min(22rem, calc(100% - 2 * var(--s-3))); overflow: hidden; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lift); opacity: 0; visibility: hidden; translate: 0 1rem; transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), bottom var(--dur) var(--ease-out), width var(--dur) var(--ease-out), visibility 0s var(--dur); }
.yt-card.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.player-mini .yt-card { bottom: 11.5rem; }
.yt-card.is-tiny { width: 11rem; }
.yt-card.is-tiny .yt-frame { min-height: 0; }
.yt-card.is-tiny .yt-head span { display: none; }
.yt-card.is-tiny .yt-head { justify-content: flex-end; padding: 2px; }
.yt-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); cursor: grab; touch-action: none; user-select: none; color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.yt-head::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--white); }
.yt-card.is-tiny .yt-head::before { display: none; }
.yt-head span { flex: 1; }
.yt-head .gbtn { width: 1.75rem; height: 1.75rem; }
.yt-head .gbtn svg { width: 1rem; height: 1rem; }
.yt-frame { position: relative; aspect-ratio: 16 / 9; min-height: 200px; background: #000; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 52rem) { .yt-card { left: var(--s-3); } }