/* ═══════════════════════════════════════════════════════════
   Music — a lamplit dock at the foot of the page
   Inherits every colour token from styles.css
   ═══════════════════════════════════════════════════════════ */

.player {
  /* one set of knobs the whole player scales from */
  --pad: clamp(.6rem, 3.2vw, .95rem);
  --dock-h: clamp(3.7rem, 12vw, 4.6rem);
  --art: clamp(3rem, 13vw, 4.5rem);

  position: fixed;
  z-index: 58;
  left: 50%;
  bottom: 0;
  width: clamp(15rem, 94vw, 30rem);
  max-height: 100vh;
  max-height: 100svh;          /* never taller than the visible viewport */
  transform: translate(-50%, 120%);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 18px -6px var(--shade-2), 0 -22px 60px -20px rgba(30, 24, 12, .5),
              inset 0 1px 0 var(--lift);
  transition: transform .42s var(--ease);
  overflow: hidden;
}

/* the parchment face — sits over the player frame, under the controls */
.player::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 0%, var(--vellum), var(--vellum-warm) 82%);
}
[data-theme="night"] .player::before {
  background: radial-gradient(120% 90% at 50% 0%, #232b24, #1a201b 82%);
}

/* Audio only. The frame must keep its size and stay laid out or the stream
   stalls, so it is buried behind the face rather than hidden. */
.yt-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.yt-host iframe, .yt-host > div { width: 100%; height: 100%; border: 0; }

.dock, .pl-body { position: relative; z-index: 2; }

/* ── Dragging ────────────────────────────────────────────── */
.player.free {
  bottom: auto;
  right: auto;
  transform: none !important;
  border-radius: 14px;
  border-bottom: 1px solid var(--rule);
}
.player.dragging { transition: none; cursor: grabbing; }
.player.dragging .pl-body { pointer-events: none; }

.grip {
  position: absolute;
  top: .38rem; left: 50%;
  transform: translateX(-50%);
  width: 2.1rem; height: 3px;
  border-radius: 2px;
  background: var(--rule);
  opacity: .6;
}
.dock { cursor: grab; touch-action: none; }
.dock:active { cursor: grabbing; }

/* the slim dock appears once something has been chosen */
body.has-music .player { transform: translate(-50%, calc(100% - var(--dock-h))); }
.player.expanded,
body.has-music .player.expanded { transform: translate(-50%, 0); }

/* ── Dock (collapsed face) ───────────────────────────────── */
.dock {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  height: var(--dock-h);
  padding: 0 calc(var(--pad) * .75) 0 var(--pad);
  cursor: pointer;
}
.dock-bar-track {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rule-soft);
}
.dock-bar { height: 100%; width: 0; background: linear-gradient(to right, var(--moss), var(--gold)); transition: width .25s linear; }

.dock-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dock-art {
  flex: none;
  position: relative;
  width: clamp(2.1rem, 8vw, 2.6rem);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--gold-pale), transparent 72%);
  color: var(--gold);
  box-shadow: 0 1px 3px var(--shade-1);
}
.dock-art svg { width: 1rem; height: 1rem; fill: currentColor; }
.dock-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.music-playing .dock-art { box-shadow: 0 0 0 1px var(--gold), 0 0 14px -2px rgba(198, 164, 92, .55); }

.dock-meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.dock-meta .t,
.pl-meta .t {
  font-size: clamp(.85rem, 3.3vw, .95rem);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-meta .a,
.pl-meta .a {
  font-size: .72rem; font-style: italic; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-tools { flex: none; display: flex; align-items: center; gap: .1rem; }

/* ── Body (expanded) ─────────────────────────────────────── */
.pl-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 0;
  opacity: 0;
  transition: max-height .42s var(--ease), opacity .3s var(--ease);
}
.player.expanded .pl-body { max-height: min(78vh, 42rem); opacity: 1; }
.player.expanded .pl-body { max-height: min(78svh, 42rem); }

.pl-head {
  flex: none;
  display: flex; align-items: center; gap: .6rem;
  padding: .1rem .7rem .55rem .95rem;
}
.pl-meta, .pl-scrub, .pl-transport, .pl-filter { flex: none; }
.pl-head h2 {
  flex: 1; margin: 0;
  font-size: .78rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Now playing ─────────────────────────────────────────── */
.pl-now {
  flex: none;
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 3vw, .85rem);
  padding: .55rem calc(var(--pad) * .75) .35rem var(--pad);
}
.pl-art {
  flex: none;
  position: relative;
  width: var(--art);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--gold-pale), var(--field) 78%);
  color: var(--gold);
  box-shadow: 0 3px 10px -3px var(--shade-2), inset 0 1px 0 var(--lift);
}
.pl-art svg { width: 1.6rem; height: 1.6rem; fill: currentColor; opacity: .55; }
.pl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* dismissed outright — works whether or not it has been dragged free */
.player.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease), visibility .28s;
}

.pl-corner { flex: none; align-self: flex-start; display: flex; gap: .1rem; }
.pl-meta { flex: 1; min-width: 0; }
.pl-meta .t { font-size: clamp(.92rem, 3.6vw, 1.05rem); }
.pl-meta .a { font-size: clamp(.68rem, 2.7vw, .78rem); margin-bottom: .2rem; }
.pl-collapse { flex: none; align-self: flex-start; }

/* ── Scrubber ────────────────────────────────────────────── */
.pl-scrub { display: flex; align-items: center; gap: .5rem; padding: .1rem 0 0; }
.pl-scrub time { font-size: .66rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; width: 2.4rem; }
.pl-scrub time + input { flex: 1; }
.pl-scrub time:last-child { text-align: right; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.1rem;
  background: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--gold) var(--fill, 0%), var(--rule-soft) var(--fill, 0%));
  box-shadow: inset 0 1px 2px var(--shade-1);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--gold) var(--fill, 0%), var(--rule-soft) var(--fill, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: .72rem; height: .72rem; margin-top: -.19rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--gold-bright), var(--gold));
  border: 1px solid rgba(90, 70, 30, .5);
  box-shadow: 0 1px 3px var(--shade-2);
}
input[type="range"]::-moz-range-thumb {
  width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--gold); border: 1px solid rgba(90, 70, 30, .5);
}

/* ── Transport ───────────────────────────────────────────── */
.pl-transport {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .35rem var(--pad) .5rem;
}
.pl-transport .spacer { flex: 1; }
.pl-vol { display: flex; align-items: center; gap: .35rem; width: clamp(3rem, 15vw, 5.5rem); }
.pl-vol svg { width: .95rem; height: .95rem; flex: none; fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.play-btn {
  display: grid; place-items: center;
  width: clamp(2.5rem, 9.5vw, 3rem);
  aspect-ratio: 1;
  margin: 0 .25rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--lift), transparent), var(--field);
  color: var(--forest);
  cursor: pointer;
  box-shadow: 0 2px 6px var(--shade-1), inset 0 1px 0 var(--lift);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.play-btn:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 12px var(--shade-2); }
.play-btn:active { transform: translateY(0) scale(.96); }
.play-btn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.play-btn .ico-pause, body.music-playing .play-btn .ico-play { display: none; }
body.music-playing .play-btn .ico-pause { display: block; }

.dock .play-btn { width: clamp(2.1rem, 8.5vw, 2.4rem); margin: 0; }
.dock .play-btn svg { width: .95rem; height: .95rem; }

.icon-btn.one::after {
  content: "1";
  position: absolute;
  margin: .9rem 0 0 .9rem;
  font-family: var(--sans);
  font-size: .5rem; font-weight: 700;
  color: var(--gold);
}
.icon-btn { position: relative; }

/* ── Song list ───────────────────────────────────────────── */
.pl-filter { padding: .3rem var(--pad) .5rem; }
.pl-filter input {
  width: 100%; font: inherit; font-size: .85rem; color: var(--ink);
  padding: .42rem .8rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--field);
  box-shadow: inset 0 2px 4px var(--shade-1), 0 1px 0 var(--lift);
}
.pl-filter input::placeholder { color: var(--ink-faint); font-style: italic; }
.pl-filter input:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 4px var(--shade-1), 0 0 0 3px rgba(163, 130, 60, .16); }

.song-list {
  flex: 1;
  /* the list is the point — generous when there's room, but it must yield on
     short screens rather than push the panel past the viewport */
  min-height: clamp(5rem, 26vh, 15rem);
  min-height: clamp(5rem, 26svh, 15rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 .6rem .5rem;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
  mask-image: linear-gradient(to bottom, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
}
.song-list::-webkit-scrollbar { width: 6px; }
.song-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.song-list .testament { margin: .8rem .35rem .4rem; }

.song {
  display: flex; align-items: center; gap: .65rem;
  width: 100%;
  padding: .42rem .6rem;
  border: 1px solid transparent; border-radius: 8px;
  background: none; font: inherit; text-align: left;
  color: var(--ink-soft); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.song:hover { background: var(--lift); border-color: var(--rule-soft); color: var(--ink); }
.song[aria-current="true"] {
  color: var(--ink);
  background: linear-gradient(to right, var(--lift), transparent);
  border-color: var(--rule-soft);
  box-shadow: inset 2px 0 0 var(--gold);
}
.song-meta { min-width: 0; display: flex; flex-direction: column; }
.song-title { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-artist { font-size: .68rem; font-style: italic; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* three little bars that dance for whatever is playing */
.song-bars { flex: none; display: flex; align-items: flex-end; gap: 2px; width: .8rem; height: .8rem; opacity: .3; }
.song-bars i { flex: 1; height: 35%; background: var(--gold); border-radius: 1px; }
.song[aria-current="true"] .song-bars { opacity: 1; }
.song.beating .song-bars i { animation: bars .9s ease-in-out infinite; }
.song.beating .song-bars i:nth-child(2) { animation-delay: .18s; }
.song.beating .song-bars i:nth-child(3) { animation-delay: .36s; }
@keyframes bars { 0%, 100% { height: 30%; } 50% { height: 100%; } }

.pl-note {
  flex: none;
  margin: 0;
  padding: .5rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule-soft);
  font-size: .64rem; font-style: italic; color: var(--ink-faint); text-align: center;
}

/* keep the reader clear of the dock */
body.has-music .page { padding-bottom: 7rem; }

/* the width clamp already handles narrow screens; these are the touch tweaks */
@media (max-width: 34rem) {
  .grip { width: 2.6rem; height: 4px; top: .3rem; }
  .song { padding: .5rem .6rem; }          /* fatter tap targets */
}

/* Landscape phones and other short viewports: the panel must still fit, so
   the artwork and chrome give way before the song list does. */
@media (max-height: 34rem) {
  .player.expanded .pl-body { max-height: 88vh; max-height: 88svh; }
  .pl-art { display: none; }
  .pl-note { display: none; }
  .pl-now { padding-top: .35rem; padding-bottom: .2rem; }
  .pl-transport { padding-top: .2rem; padding-bottom: .3rem; }
  .pl-filter { padding-bottom: .35rem; }
  .song-list { min-height: 4rem; }
}

/* Very short: drop the filter too and let the list own what's left */
@media (max-height: 24rem) {
  .pl-filter { display: none; }
  .song-list { min-height: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .song.beating .song-bars i { animation: none; }
}

@media print { .player { display: none !important; } }