/*
 * Site-wide player bar (feature/site-player-wavesurfer): markup in player.php, behaviour in static/js/pc-site-player.js.
 * Replaces jplayer.css. .player-block (the fixed bottom strip) is still styled in pc-core-v*.css; only what changes
 * is overridden here, so pc-core's minified builds don't need regenerating.
 *
 * Phones first: two rows (cover, title, repeat/mute, close / play + full-width waveform), 44px touch targets, and
 * the iOS home-indicator inset. From 641px wide it is one row with stop and a volume slider.
 */

body.sp-open .player-block {
  display: block;
  opacity: 1;   /* pc-core's 0.94 let page text show through, unreadable behind the comment box */
  padding: 0 0 env(safe-area-inset-bottom, 0);
  text-align: left;
}

/* the fixed bar must never hide the end of the page (footer links, forms, pagination) */
body.sp-open {
  padding-bottom: var(--sp-height, 96px);
}

.sp {
  display: grid;
  /* Phones. The waveform has its own 44px row shared with Play, so both are centred on the same line; the comment
     markers get their own row underneath (always there, so the bar never changes height). */
  grid-template-columns: 40px minmax(0, 1fr) auto 44px 44px;
  grid-template-rows: auto 44px 44px 20px auto;
  grid-template-areas:
    "composer composer composer composer composer"
    "cover    head     tools    repeat   close"
    "play     wave     wave     wave     wave"
    ".        markers  markers  markers  markers"
    "status   status   status   status   status";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 6px 8px;
  color: #eee;
  font-size: 13px;
  line-height: 1.3;
}
.sp[hidden] { display: none; }

/* the wrapper only groups the markup; its children sit on the bar's grid */
.sp-main { display: contents; }

.sp-cover {
  grid-area: cover;
  margin: 0;   /* the site's global img rule adds margin-bottom: -5px, which pulled the cover 2.5px below centre */
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  background: #222;
}
.sp-cover[hidden] { visibility: hidden; display: block; }

.sp-head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.sp-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
  font-weight: bold;
}
.sp-title:hover, .sp-title:focus { color: #f90; }
a.sp-title:not([href]) { color: #fff; cursor: default; text-decoration: none; }
.sp-time {
  flex: 0 0 auto;
  color: #bbb;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sp {
  --sp-wave-h: 26px;   /* waveform height; pc-site-player.js uses the same numbers for wavesurfer */
}
.sp-wave-wrap {
  grid-area: wave;
  position: relative;
  min-width: 0;
  /* centred in its row (align-items: center), on the same line as Play and the other controls; the room under the
     waveform comes from that row being taller than the waveform */
}
.sp-wave-fallback {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--sp-wave-h);
  object-fit: fill;
  opacity: 0.55;
  pointer-events: none;
}
.sp-wave-fallback[hidden] { display: none; }
.sp-fallback-progress {
  position: absolute;
  top: 0; left: 0;
  height: var(--sp-wave-h);
  width: 0;
  background: rgba(255, 153, 0, 0.35);
  pointer-events: none;
  display: none;
}
.sp-has-png .sp-fallback-progress { display: block; }
.sp-wave {
  position: relative;
  height: var(--sp-wave-h);
  cursor: pointer;
  touch-action: pan-y;   /* horizontal drags seek; vertical swipes still scroll the page */
}
.sp-wave:focus-visible { outline: 2px solid #f90; outline-offset: 2px; }

.sp-status {
  grid-area: status;
  margin: 0;
  color: #fc6;
  font-size: 12px;
}
.sp-status:empty { display: none; }

.sp-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  gap: 2px;
}

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ddd;
  font-size: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* hover only where there is one: on phones a tapped button kept a stuck grey "hover" circle */
@media (hover: hover) { .sp-btn:hover { color: #f90; background: #222; } }
.sp-btn:focus-visible { outline: 2px solid #f90; outline-offset: 1px; }
.sp-btn[aria-pressed="true"] { color: #f90; }

.sp-play {
  grid-area: play;
  background: #f90;
  color: #000;
  font-size: 18px;
}
@media (hover: hover) { .sp-play:hover { background: #ffad33; color: #000; } }
.sp-play .fa-play { margin-left: 3px; }   /* optical centre of the triangle */
.sp-buffering .sp-play { animation: sp-pulse 1s ease-in-out infinite alternate; }
@keyframes sp-pulse { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .sp-buffering .sp-play { animation: none; } }

.sp-close { grid-area: close; color: #aaa; }
.sp-stop { grid-area: stop; }   /* desktop: right of Play (hidden on phones) */
.sp-repeat { grid-area: repeat; }   /* desktop: left of Play; phones: top row, before Close */
@media (min-width: 641px) {
  /* Repeat and Stop hug Play: nudged toward it (visual only, the grid is unchanged) */
  .sp .sp-repeat, .sp .sp-stop { width: 30px; }
  .sp-repeat { position: relative; left: 8px; }
  .sp-stop { position: relative; left: -8px; }
}

/* phones: no stop (pause does the job), and no volume slider or mute (iOS ignores the slider; the hardware buttons do
   both). .sp-prefixed so it outranks Bootstrap 3's input[type="range"] { display: block } */
.sp .sp-stop, .sp .sp-volume, .sp .sp-mute { display: none; }
.sp .sp-btn[hidden] { display: none; }

/* phones: the time sits on the waveform's top-right corner so the title keeps the top row (with Like/Comment there) */
@media (max-width: 640px) {
  .sp-head { display: contents; }
  .sp-title { grid-area: head; }
  .sp-time {
    grid-area: wave;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 3;
    margin-top: calc((44px - var(--sp-wave-h)) / 2 - 2px);   /* on the waveform's top-right corner */
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.7);
    font-size: 11px;
    pointer-events: none;   /* taps still seek */
  }
}

.sp-volume {
  width: 90px;
  accent-color: #f90;
  cursor: pointer;
}

@media (min-width: 641px) {
  .sp {
    /* Cover | Repeat Play Stop | title + waveform. Repeat and Stop are 30px wide and nudged 8px toward Play (below):
       each icon sits ~10px from Play, and their click areas stay 2px clear of it (no stolen clicks). */
    grid-template-columns: 56px 30px 44px 30px minmax(0, 1fr) auto 44px;
    /* title row and marker row are the same height, so the cover (centred across all three) and the controls (in the
       waveform's row) share the waveform's centre line */
    grid-template-rows: auto 18px 40px 18px auto;
    grid-template-areas:
      "composer composer composer composer composer  composer composer"
      "cover    .        .        .        head      .        ."
      "cover    repeat   play     stop     wave      tools    close"
      "cover    .        .        .        markers   .        ."
      ".        .        .        .        status    .        .";
    column-gap: 10px;
    padding: 4px 12px 7px;   /* a little more room under the cover art */
  }
  .sp-cover { width: 56px; height: 56px; justify-self: start; }
  .sp { --sp-wave-h: 30px; }
  .sp .sp-stop, .sp .sp-mute { display: inline-flex; }
  .sp-btn { width: 38px; height: 38px; font-size: 16px; }
  .sp-play { width: 44px; height: 44px; font-size: 18px; }
}

/* desktop with a mouse: volume slider (touch screens keep mute only) */
@media (min-width: 641px) and (hover: hover) and (pointer: fine) {
  .sp .sp-volume { display: inline-block; }
}

/* Like / Comment */
.sp-like[aria-pressed="true"] { color: #f90; opacity: 1; cursor: default; }
.sp-like:disabled:not([aria-pressed="true"]) { opacity: 0.5; }
.sp-comment[aria-expanded="true"] { color: #f90; }
.sp-status a { color: #f90; text-decoration: underline; }

/* the comment composer: a full-width row above the bar */
.sp-composer {
  grid-area: composer;
  display: grid;
  gap: 6px;
  padding: 8px 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid #333;
}
.sp-composer[hidden] { display: none; }
.sp-composer-label { margin: 0; color: #ddd; font-weight: bold; font-size: 13px; }
.sp-composer-time { color: #f90; font-variant-numeric: tabular-nums; }
.sp-composer-text {
  width: 100%;
  min-height: 44px;
  resize: vertical;
  padding: 6px 8px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #1b1b1b;
  color: #fff;
  font-size: 16px;   /* 16px or more: iOS Safari zooms the page into smaller inputs */
  line-height: 1.35;
}
.sp-composer-text:focus { outline: 2px solid #f90; outline-offset: 0; border-color: #f90; }
.sp-composer-row { display: flex; align-items: center; gap: 8px; }
.sp-composer-error { flex: 1 1 auto; color: #fc6; font-size: 12px; }
.sp-composer-row button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #555;
  border-radius: 22px;
  background: transparent;
  color: #ddd;
  font-weight: bold;
  cursor: pointer;
}
.sp-composer-row .sp-composer-post { background: #f90; border-color: #f90; color: #000; }
.sp-composer-row button:disabled { opacity: 0.5; cursor: default; }
.sp-composer-row button:focus-visible { outline: 2px solid #f90; outline-offset: 2px; }
@media (min-width: 641px) {
  .sp-composer-row button { min-height: 34px; }
  .sp-composer-text { font-size: 14px; }
}

/* Time-stamped comments: the commenter's picture along the timeline, under the waveform. A link to the comment. */
/* The lane is ALWAYS there, comments or not, so the bar keeps one height and never jumps when the next track has
   more or fewer comments (or none, or the listener can't see them). */
.sp-markers { grid-area: markers; align-self: start; position: relative; min-width: 0; height: 20px; --sp-mh: 10px; /* half a marker */ }
.sp-marker {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  margin-left: -10px;   /* centred on its point in the track */
  border-radius: 50%;
  border: 1px solid #f90;
  background: #333;
  overflow: hidden;
  z-index: 1;
}
.sp-marker img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-marker:hover, .sp-marker:focus-visible { z-index: 2; transform: scale(1.25); outline: none; box-shadow: 0 0 0 2px #fff; }
.sp-marker-new { animation: sp-pop 0.9s ease-out 2; }
@keyframes sp-pop { 0% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.9); } 100% { box-shadow: 0 0 0 10px rgba(255, 153, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .sp-marker-new { animation: none; } .sp-marker:hover { transform: none; } }
@media (min-width: 641px) {
  .sp-markers { height: 16px; --sp-mh: 8px; }
  .sp-head { align-self: end; }   /* the title sits just above the waveform */
  .sp-marker { width: 16px; height: 16px; margin-left: -8px; }
}

/* screen-reader-only announcements (e.g. "Comment posted at 1:23") */
.sp-announce {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* several comments close together share one marker: a count badge on it */
.sp-marker { overflow: visible; }
.sp-marker img { border-radius: 50%; }
.sp-marker-count {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: #f90;
  color: #000;
  font-size: 9px;
  font-weight: bold;
  line-height: 13px;
  text-align: center;
  pointer-events: none;
}