/* ============================================
   ARCHIVE.ORG REFERENCE PLAYER
   - Lightweight "Play reference" button below each lyric chart
   - Shared floating mini-player (fixed bottom-right) that loads
     the archive.org iframe only on demand
   ============================================ */

/* ---- Trigger button ---- */

.archive-play-wrapper {
  margin: 30px 0 20px;
  max-width: 700px;
  /* Lay the Tools control (moved here by JS on standalone song pages) and
     the Play-reference button on ONE row above the chart, aligned at the
     top so when the Tools panel opens downward it doesn't shove the Play
     button down. Site-wide standard placement for both controls. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
/* The .lyric-controls block sits flush in the row (its own margin-bottom
   would misalign it against the Play button). */
.archive-play-wrapper > .lyric-controls {
  margin-bottom: 0;
}

/* "★ Make Personal Copy" in the action row: match Play/Tools height and
   padding so the three buttons align on one row. Kept a distinct color
   (it's a different KIND of action — forks a personal copy — vs the
   per-song view controls), but same size/shape for a coherent row. */
.archive-play-wrapper > .personal-hq-personalize-btn,
.personal-hq-personalize-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #2e7d46;
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.archive-play-wrapper > .personal-hq-personalize-btn:hover,
.personal-hq-personalize-btn:hover,
.personal-hq-personalize-btn:focus-visible {
  background: #25693a;
  color: #fff;
}

.archive-play-button,
.reference-popup-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #d35400;
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: inherit;
  transition: background-color 0.15s ease;
}

.archive-play-button:hover,
.archive-play-button:focus-visible,
.reference-popup-button:hover,
.reference-popup-button:focus-visible {
  background: #b04500;
  outline: none;
}

.archive-play-button:focus-visible,
.reference-popup-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.35);
}

.archive-play-icon {
  font-size: 0.85em;
  line-height: 1;
}

/* Consistency: the PLAY button is signal-orange EVERYWHERE — standalone song
   page, setlist, and the standalone-page action row. In that row the chart JS
   adds .song-action-btn to all three controls (Tools · Play · Make Personal
   Copy) so they share one green-outline look; that green (defined below with
   !important) was overriding Play's orange, making Play read green like Tools.
   Play is not a tool — it's the play control — so it keeps its own colour.
   This override matches the shared rule's specificity and uses !important to
   win cleanly, WITHOUT disturbing Tools / Make Personal Copy. Lives in the
   play button's own stylesheet so the colour travels with the button. */
.song-action-row .archive-play-button.song-action-btn,
a.archive-play-button.song-action-btn,
button.archive-play-button.song-action-btn {
  background: #d35400 !important;
  color: #fff !important;
  border: 0 !important;
}
.song-action-row .archive-play-button.song-action-btn:hover,
.song-action-row .archive-play-button.song-action-btn:focus-visible,
a.archive-play-button.song-action-btn:hover,
button.archive-play-button.song-action-btn:hover {
  background: #b04500 !important;
  color: #fff !important;
  border: 0 !important;
}

/* Dark mode — sibling of .lyric-sheet-container.dark-mode */
body:has(.lyric-sheet-container.dark-mode) .archive-play-button,
body:has(.lyric-sheet-container.dark-mode) .reference-popup-button {
  background: #d35400;
  color: #fff;
}

/* Hide in plain-text mode and print — reference audio isn't useful in
   printable charts. */
body:has(.lyric-sheet-container.plain-text-mode) .archive-play-wrapper {
  display: none;
}

@media print {
  .archive-play-wrapper,
  .archive-floating-player {
    display: none !important;
  }
}

/* ---- Floating mini-player ---- */

.archive-floating-player {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: #1a1a1a;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  z-index: 999999;        /* Above setlist's sticky controls (99999) */
  display: none;
  overflow: hidden;
}

.archive-floating-player.is-open {
  display: block;
}

.archive-floating-player__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #000;
  font-size: 13px;
  cursor: grab;
  user-select: none;
  touch-action: none;     /* lets touch-drag work without scroll interference */
}

.archive-floating-player.is-dragging .archive-floating-player__header {
  cursor: grabbing;
}

/* During drag the iframe would normally capture pointer events the moment
   the cursor crossed it, breaking the drag. Disable pointer-events on the
   iframe only while dragging so the document-level mousemove keeps firing. */
.archive-floating-player.is-dragging iframe,
.archive-floating-player.is-dragging audio,
.archive-floating-player.is-dragging video {
  pointer-events: none;
}

/* Uploaded-file audio element — fill the player width, dark surround. */
.archive-floating-player__audio {
  display: block;
  width: 100%;
  background: #1a1a1a;
  padding: 12px;
  box-sizing: border-box;
}

/* Uploaded video played audio-only: collapse the video frame so only the
   native control bar shows. The element still plays the audio track; we
   just hide the picture. Height ~54px fits the browser control bar; the
   video frame above it is clipped off via overflow on the player wrapper.
   width:100% + the dark padding matches the audio element. */
.archive-floating-player__video.is-audio-only {
  display: block;
  width: 100%;
  height: 54px;
  background: #1a1a1a;
  object-fit: cover;
  /* Push the (hidden) video frame up so the controls sit at the visible
     area. Most browsers anchor controls to the bottom of the element. */
  object-position: bottom;
}

/* Snappier feedback during drag — no transitions. */
.archive-floating-player.is-dragging {
  transition: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.archive-floating-player__label {
  color: #d35400;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  flex-shrink: 0;
}

.archive-floating-player__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e8e8e8;
  font-weight: 500;
}

.archive-floating-player__close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;   /* override grab cursor inherited from header */
  padding: 0 6px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.archive-floating-player__collapse {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;   /* override grab cursor inherited from header */
  padding: 0 6px;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.archive-floating-player__close:hover,
.archive-floating-player__close:focus-visible,
.archive-floating-player__collapse:hover,
.archive-floating-player__collapse:focus-visible {
  color: #d35400;
  outline: none;
}

/* Collapsed: hide the media + practice area, leaving the slim header strip so
   the chart is readable underneath. Playback keeps running. */
.archive-floating-player.is-collapsed > iframe,
.archive-floating-player.is-collapsed > .archive-floating-player__yt,
.archive-floating-player.is-collapsed > audio,
.archive-floating-player.is-collapsed > video,
.archive-floating-player.is-collapsed > .afp-practice {
  display: none !important;
}

.archive-floating-player iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #000;
}

/* Mobile: smaller floating window (still draggable). Base styles already
   constrain width via `max-width: calc(100vw - 40px)`, so the player
   shrinks gracefully on narrow screens. */
@media (max-width: 600px) {
  .archive-floating-player {
    width: calc(100vw - 24px);
    bottom: 12px;
    right: 12px;
  }
  .archive-floating-player iframe {
    height: 100px;
  }
}

/* Play button label: show just "Play" by default; reveal the full
   "reference recording" text on hover/focus. Keeps the action row compact
   while still being descriptive when the user reaches for it. The extra
   span collapses its width so the button shrinks to "▶ Play". */
.archive-play-label-extra {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  opacity: 0;
  transition: max-width 0.25s ease, opacity 0.2s ease;
}
.archive-play-button:hover .archive-play-label-extra,
.archive-play-button:focus-visible .archive-play-label-extra {
  max-width: 220px;
  opacity: 1;
}

/* ── Unified song action buttons ─────────────────────────────────────
   Play, Make Personal Copy, and Tools all carry .song-action-btn (added
   by lyric-sheet-chords.js) so they share ONE rule — identical color,
   size, font, border, and hover. This is the Tools look with a subtle
   green hue. !important so it beats Drupal's default .button styling on
   Make Personal Copy and any theme button rules. */
.song-action-row .song-action-btn,
a.song-action-btn,
button.song-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: #7fb38a !important;            /* soft green text */
  border: 1px solid #4a7a55 !important; /* green-hued border */
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  box-shadow: none !important;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}
.song-action-row .song-action-btn:hover,
.song-action-row .song-action-btn:focus-visible,
.song-action-row .song-action-btn[aria-expanded="true"],
a.song-action-btn:hover,
button.song-action-btn:hover {
  background: rgba(74, 122, 85, 0.15) !important; /* faint green fill on hover */
  color: #a8d4b0 !important;
  border-color: #6aa377 !important;
}

/* When the Tools control sits in the action row, neutralize the
   .lyric-controls column wrapper's margin and let its toggle button align
   on the same baseline as Play and Make Personal Copy. Keep it as a column
   (so the tools-panel still drops BELOW the toggle when opened) but remove
   the extra margin and self-align it to center in the row. */
.song-action-row > .lyric-controls {
  margin: 0 !important;
  align-self: flex-start;
}
.song-action-row > .lyric-controls > .tools-toggle {
  margin: 0 !important;
}

/* ── Practice strip — speed + A/B loop (local audio/video only) ─────────────
   Lives inside the floating reference player. Slow a passage (pitch kept) and
   loop a few bars to drill a part. Dark, matches the player chrome. */
.afp-practice {
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.afp-practice__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.afp-practice__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  min-width: 44px;
}
.afp-practice button {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: #d6e2d4;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  padding: 5px 9px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.afp-practice button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.afp-practice button.is-on {
  background: #e8c760;
  border-color: #e8c760;
  color: #14110a;
  font-weight: 600;
}
.afp-practice .afp-ab {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.7);
  min-width: 38px;
}
.afp-practice .afp-clear {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  padding: 5px 8px;
}