/* site-player: styles for player.js.

   Theme it by setting these on :root (or any ancestor); the defaults are
   The Good Behaviours' colours:

     --sp-bg            the player's background            #141d17
     --sp-fg            its text                            #f3ead8
     --sp-accent        the play button                     #b8622e
     --sp-accent-deep   the play button on hover            #8f4520
     --sp-accent-light  progress, links, the header button  #e39a62
     --sp-on-accent     the icon on the play button         #fff8ee
     --sp-display       font for the track name             Georgia, serif
     --sp-mono          font for the times                  ui-monospace, monospace
     --sp-ease          easing for its animations
     --sp-track-accent  track lists on the page             var(--accent) if the site has one

   The page's own track lists (.tracks with .track-play buttons, see
   player.js) get the playing-track fill and the bouncing bars from here; their
   layout (numbers, durations) is the site's. */
:root {
  --sp-bg: #141d17;
  --sp-fg: #f3ead8;
  --sp-accent: #b8622e;
  --sp-accent-deep: #8f4520;
  --sp-accent-light: #e39a62;
  --sp-on-accent: #fff8ee;
  --sp-display: Georgia, serif;
  --sp-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Tracks you can tap, on the page and in the opened-up player ─────────
   The playing track fills with its progress (--p) and its icon bounces
   while it plays. */
.tracks li { position: relative; }
.tracks li.is-current {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sp-track-accent, var(--accent, var(--sp-accent-light))) 16%, transparent) calc(var(--p, 0) * 100%), transparent 0);
  border-radius: 6px;
}
.track-play {
  display: flex; align-items: center; gap: 0; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tp-icon { position: relative; width: 1.1em; height: 1em; margin-right: 0.45rem; flex: none; color: var(--sp-track-accent, var(--accent, var(--sp-accent-light))); }
.tp-icon svg { position: absolute; inset: 0; width: 0.85em; height: 0.85em; margin: auto; fill: currentColor; opacity: 0; transition: opacity 0.2s; }
.track-play:hover .tp-icon svg, .track-play:focus-visible .tp-icon svg, .track-play.is-current:not(.is-playing) .tp-icon svg { opacity: 1; }
.tp-eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 2px; padding-bottom: 0.1em; }
.tp-eq i { width: 2px; height: 40%; border-radius: 1px; background: currentColor; }
.tp-eq i:nth-child(2) { height: 90%; }
.tp-eq i:nth-child(3) { height: 60%; }
.track-play.is-playing .tp-eq { display: flex; }
.track-play.is-playing .tp-icon svg { opacity: 0; }
.track-play:hover .tp-name, .track-play.is-current .tp-name { color: var(--sp-track-accent, var(--accent, var(--sp-accent-light))); }
.track-play.is-current .tp-name { font-weight: 600; }
.btn-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: -0.2em; }

/* ── The mini player: pinned to the bottom of the screen ─────────────── */
.mini-player {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 32px));
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 0.3rem 0.8rem;
  padding: 0.7rem 0.7rem 0.6rem; border-radius: 18px;
  background: color-mix(in srgb, var(--sp-bg) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--sp-accent-light) 35%, transparent);
  box-shadow: 0 24px 60px -20px #000;
  color: var(--sp-fg);
  transition: opacity 0.3s, transform 0.35s var(--sp-ease), visibility 0.35s;
}
/* The small player and the opened-up one are the same element, rearranged. */
.mini-player { grid-template-areas: "art meta controls corner" "prog prog prog prog"; }
.mp-art { grid-area: art; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; }
.mp-meta { grid-area: meta; cursor: pointer; }
.mp-controls { grid-area: controls; }
.mp-corner { grid-area: corner; }
.mp-progress { grid-area: prog; }
.mp-art img { display: block; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.mp-meta { min-width: 0; }
.mp-meta p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-track { font: 400 1.02rem/1.25 var(--sp-display); }
.mp-album { font-size: 0.78rem; color: color-mix(in srgb, var(--sp-fg) 65%, transparent); }
.mp-controls, .mp-corner { display: flex; align-items: center; gap: 0.25rem; }
.mp-corner { align-self: start; gap: 0.2rem; }
.mp-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sp-fg); cursor: pointer; }
.mp-btn:hover { background: color-mix(in srgb, var(--sp-fg) 12%, transparent); }
.mp-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.mp-btn svg { width: 16px; height: 16px; fill: currentColor; }
.mp-corner .mp-btn { width: 26px; height: 26px; }
.mp-corner svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* ⚠ After .mp-btn and scoped to .mini-player: .mp-btn sets display: grid at
   the same specificity, and when it came later the small player showed both
   chevrons (fixed 2026-09-26). */
.mini-player .mp-list, .mini-player .mp-page, .mini-player .mp-collapse { display: none; }
.mp-toggle { width: 40px; height: 40px; background: var(--sp-accent); color: var(--sp-on-accent); }
.mp-toggle:hover { background: var(--sp-accent-deep); }
.mp-toggle svg { width: 18px; height: 18px; }
.mp-progress { display: flex; align-items: center; gap: 0.6rem; font: 400 0.72rem/1 var(--sp-mono); color: color-mix(in srgb, var(--sp-fg) 70%, transparent); }
.mp-seek {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; cursor: pointer; margin: 0;
  background: linear-gradient(90deg, var(--sp-accent-light) calc(var(--p, 0) * 100%), color-mix(in srgb, var(--sp-fg) 20%, transparent) 0);
}
.mp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-fg); border: 0; }
.mp-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--sp-fg); border: 0; }

/* ── Opened up (tap the cover or the names) ──────────────────────────────
   Big art, the controls centred and larger, and the album's track list. A
   taller panel on a computer; full screen on a phone (below). */
.mini-player.is-expanded {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "corner" "art" "meta" "prog" "controls" "list";
  gap: 0.9rem; padding: 0.9rem 1.1rem 1rem;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100svh - 110px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.is-expanded .mp-corner { justify-self: end; }
.is-expanded .mp-min { display: none; }
.is-expanded .mp-collapse { display: grid; }
/* The size goes on the button, not the image: a percentage inside a
   shrink-to-fit box has nothing to resolve against. */
.is-expanded .mp-art { justify-self: center; cursor: default; width: min(100%, 300px, 34svh); }
.is-expanded .mp-art img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; box-shadow: 0 24px 50px -24px #000; }
.is-expanded .mp-meta { text-align: center; cursor: default; }
.is-expanded .mp-meta p { white-space: normal; }
.is-expanded .mp-track { font-size: 1.45rem; line-height: 1.2; }
.is-expanded .mp-album { font-size: 0.88rem; margin-top: 0.2rem; }
.is-expanded .mp-page { display: inline-block; margin-top: 0.5rem; font-size: 0.82rem; color: var(--sp-accent-light); }
.is-expanded .mp-controls { justify-self: center; gap: 1.4rem; }
.is-expanded .mp-controls .mp-btn { width: 44px; height: 44px; }
.is-expanded .mp-controls .mp-btn svg { width: 22px; height: 22px; }
.is-expanded .mp-toggle { width: 64px !important; height: 64px !important; }
.is-expanded .mp-toggle svg { width: 28px !important; height: 28px !important; }
.is-expanded .mp-prev, .is-expanded .mp-next { display: grid !important; }
.is-expanded .mp-list { display: block; border-top: 1px solid color-mix(in srgb, var(--sp-fg) 14%, transparent); padding-top: 0.4rem; }
/* The list's own layout, so it doesn't depend on the site's .tracks. */
.mp-list .tracks { --sp-track-accent: var(--sp-accent-light); margin: 0; padding: 0; list-style: none; counter-reset: sp; }
.mp-list .tracks li {
  counter-increment: sp; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0.4rem; font-size: 0.95rem; border-bottom: 1px solid color-mix(in srgb, var(--sp-fg) 12%, transparent);
}
.mp-list .tracks li > :first-child::before { content: counter(sp, decimal-leading-zero); color: var(--sp-accent-light); font: 500 0.82em var(--sp-mono); margin-right: 1rem; }
.mp-list .tracks .dur { color: color-mix(in srgb, var(--sp-fg) 60%, transparent); font: 400 0.85em var(--sp-mono); }
@media (max-width: 899px) {
  .mini-player.is-expanded {
    left: 0; right: 0; top: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; border: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) max(1.2rem, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 1.2rem) max(1.2rem, env(safe-area-inset-left, 0px));
    background: var(--sp-bg); z-index: 80;
    align-content: start;
  }
  .is-expanded .mp-art { width: min(100%, 78vw, 42svh); }
  html.player-expanded { overflow: hidden; }
}
@media (prefers-reduced-motion: no-preference) {
  .mini-player.is-expanded { animation: sp-open 0.4s var(--sp-ease); }
  @keyframes sp-open { from { opacity: 0; transform: translateY(24px); } }
}

/* Tucked away: hidden, the audio carries on. */
.player-min .mini-player { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(0.96); }
@media (prefers-reduced-motion: no-preference) {
  .mini-player { animation: sp-in 0.45s var(--sp-ease); }
  @keyframes sp-in { from { opacity: 0; transform: translateY(20px); } }
}
@media (max-width: 560px) {
  /* Phones: one slim row (cover, names, play, tuck, close) and the progress
     bar under it, 10px above the bottom of the screen; skipping tracks
     happens from the lock screen or the list. */
  .mini-player { left: 12px; right: 12px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 44px minmax(0, 1fr) auto auto; padding: 0.55rem 0.55rem 0.5rem; gap: 0.25rem 0.6rem; }
  .mp-art img { width: 44px; height: 44px; }
  .mp-prev, .mp-next { display: none; }
  .mp-corner { align-self: center; }
}

/* ── The tucked-away button, in the site's header (dockSlot) ────────────
   Its bars bounce only while music plays, and the ring round it fills with
   the track's progress. */
.mp-dock {
  position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none; padding: 0;
  border: 0; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--sp-bg) 70%, transparent); color: var(--sp-accent-light);
}
.mp-dock[hidden] { display: none; }
.mp-dock:hover { background: color-mix(in srgb, var(--sp-accent-light) 15%, var(--sp-bg)); }
.mp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.mp-ring circle { stroke: currentColor; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); stroke-linecap: round; }
.mp-dock::before { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--sp-accent-light) 25%, transparent); }
.mp-eq { display: flex; align-items: flex-end; gap: 3px; height: 15px; }
.mp-eq i { display: block; width: 3px; height: 45%; border-radius: 2px; background: currentColor; }
.mp-eq i:nth-child(2) { height: 100%; }
.mp-eq i:nth-child(3) { height: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .is-playing .mp-eq i, .track-play.is-playing .tp-eq i { animation: sp-eq 1.1s ease-in-out infinite alternate; }
  .is-playing .mp-eq i:nth-child(2), .track-play.is-playing .tp-eq i:nth-child(2) { animation-duration: 0.8s; animation-delay: -0.3s; }
  .is-playing .mp-eq i:nth-child(3), .track-play.is-playing .tp-eq i:nth-child(3) { animation-duration: 1.3s; animation-delay: -0.6s; }
  @keyframes sp-eq { from { height: 25%; } to { height: 100%; } }
}
@media (max-width: 899px) { .mp-dock { width: 44px; height: 44px; } }

/* Presses land on the buttons, never on their icons (which render() swaps). */
.mini-player svg, .mp-dock svg, .btn-play svg, .btn-play .bp-label, .track-play svg { pointer-events: none; }