/* The player: a scrubber with jump points, and lyrics that follow the song.
   Shared by the home page panel and the song pages, so it only ever assumes an
   ink background and the palette variables both pages define. */

/* --- the track row and its play button --------------------------------- */
.track{padding:7px 0;border-top:2px dotted rgba(156,134,121,.5)}
.track:first-of-type{border-top:0}
.track-row{display:flex;align-items:center;gap:12px}
.play{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:2px solid var(--sun,#E8C33A);background:transparent;color:var(--sun,#E8C33A);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .15s ease,color .15s ease;
}
.play:hover:not([aria-disabled="true"]),.play:focus-visible{background:var(--sun,#E8C33A);color:var(--ink,#0A0A0A)}
/* Shown at full strength before player.js arrives: a dimmed button reads as
   "nothing to play here", and the script only takes a moment to land. */
.play[aria-disabled="true"]{cursor:default}
.play svg{width:14px;height:14px;fill:currentColor}
.track b{font-weight:600;font-size:.95rem;color:#F4E7CE;display:block}
.track small{font-size:.78rem;color:var(--bark,#9C8679);font-style:italic}

.j1b-player{
  --w:0%;
  display:none;
  margin:10px 0 2px;
}
.j1b-player.live,.j1b-player.open{display:block}

/* --- the bar ------------------------------------------------------------ */
.j1b-scrub{
  position:relative;height:22px;margin:0 0 2px;cursor:pointer;
  touch-action:none;                 /* the home page is a drag surface */
  display:flex;align-items:center;
}
.j1b-scrub::before{                  /* the groove */
  content:"";position:absolute;left:0;right:0;top:9px;height:4px;
  background:rgba(156,134,121,.42);border-radius:3px;
}
.j1b-buf,.j1b-fill{
  position:absolute;left:0;top:9px;height:4px;border-radius:3px;pointer-events:none;
}
.j1b-buf{background:rgba(244,231,206,.22)}
.j1b-fill{background:var(--sun,#E8C33A);width:0}
.j1b-head{
  position:absolute;top:50%;left:0;width:13px;height:13px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--sun,#E8C33A);border:2px solid var(--ink,#0A0A0A);
  pointer-events:none;transform:scale(.8);
  transition:transform .15s ease;
}
.j1b-scrub:hover .j1b-head,.j1b-scrub:focus-visible .j1b-head,.j1b-scrub.grab .j1b-head{transform:scale(1.15)}
.j1b-scrub:focus-visible{outline:3px solid var(--sun,#E8C33A);outline-offset:3px;border-radius:4px}

/* --- the jump points ---------------------------------------------------- */
.j1b-mark{
  position:absolute;top:4px;width:14px;height:14px;margin-left:-7px;padding:0;
  border:0;background:none;cursor:pointer;z-index:2;
}
.j1b-mark::before{
  content:"";position:absolute;left:6px;top:0;width:3px;height:14px;border-radius:2px;
  background:var(--cream,#F4E7CE);opacity:.72;
  transition:opacity .15s ease,transform .15s ease,background .15s ease;
}
.j1b-mark:hover::before,.j1b-mark:focus-visible::before{opacity:1;transform:scaleY(1.35)}
.j1b-mark.past::before{background:var(--green,#106B36);opacity:.9}
.j1b-mark.here::before{background:var(--orange,#F7941D);opacity:1;transform:scaleY(1.45)}
.j1b-mark:focus-visible{outline:2px solid var(--sun,#E8C33A);outline-offset:1px;border-radius:3px}

/* --- times and the section name ----------------------------------------- */
.j1b-times{
  display:flex;align-items:baseline;gap:8px;
  font-size:.7rem;font-style:italic;color:var(--bark,#9C8679);
  font-variant-numeric:tabular-nums;
}
.j1b-here{
  flex:1;text-align:center;color:var(--sun,#E8C33A);font-style:normal;font-weight:600;
  letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.j1b-dur{margin-left:auto}
.j1b-times .j1b-dur{margin-left:0}

/* --- lyrics ------------------------------------------------------------- */
.j1b-lyrics{
  position:relative;overflow:hidden;margin-top:8px;
  height:calc(var(--rows,3) * 1.45em);
  font-size:.86rem;line-height:1.45;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.j1b-lyrics[hidden]{display:none}
.j1b-lines{
  position:absolute;left:0;right:0;top:0;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.j1b-line{
  margin:0;padding:0 2px;min-height:1.45em;
  color:rgba(244,231,206,.42);
  transition:color .3s ease,opacity .3s ease,transform .3s ease;
  transform-origin:left center;
}
.j1b-line.on{color:var(--sun,#E8C33A);transform:scale(1.035)}
.j1b-line.sec{                        /* a section name inside the lyric flow */
  font-style:italic;font-size:.78em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bark,#9C8679);
}
.j1b-line.sec.on{color:var(--orange,#F7941D);transform:none}

/* the sung part of the active line fills in as it is sung */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .j1b-line.on.wipe{
    background-image:linear-gradient(90deg,var(--sun,#E8C33A) var(--w,0%),rgba(244,231,206,.42) var(--w,0%));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}

/* the long gaps between words */
.j1b-rest{display:inline-flex;gap:4px;vertical-align:middle}
.j1b-rest i{
  width:5px;height:5px;border-radius:50%;background:var(--sun,#E8C33A);opacity:.3;
  animation:j1b-breathe 1.5s ease-in-out infinite;
}
.j1b-rest i:nth-child(2){animation-delay:.25s}
.j1b-rest i:nth-child(3){animation-delay:.5s}
@keyframes j1b-breathe{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:.9;transform:translateY(-3px)}}

/* --- the full sheet on a song page -------------------------------------- */
/* The words stay printed in full: readable, selectable, indexable. Playback
   only lights the line being sung, it never folds the sheet away. */
.j1b-sheet{
  height:auto;overflow:visible;font-size:.95rem;line-height:1.6;margin-top:0;
  -webkit-mask-image:none;mask-image:none;
}
.j1b-sheet .j1b-lines{position:static;transform:none;transition:none}
.j1b-sheet .j1b-line{
  min-height:0;margin:0 0 .12em;padding:1px 4px;border-radius:6px;
  color:#F4E7CE;
}
.j1b-sheet .j1b-line:empty{height:.6em}
.j1b-sheet .j1b-line.on{color:var(--sun,#E8C33A);transform:none;background:rgba(232,195,58,.09)}
.j1b-sheet .j1b-line.sec{
  margin:1.15em 0 .35em;color:var(--bark,#9C8679);background:none;
}
.j1b-sheet .j1b-line.sec:first-child{margin-top:0}
.j1b-sheet .j1b-line.sec.on{color:var(--orange,#F7941D)}

@media(max-width:760px){
  .track{padding:4px 0}
  .track b{font-size:.85rem}
  .track small{font-size:.7rem}
  .play{width:30px;height:30px}
  .play svg{width:11px;height:11px}
  .j1b-lyrics{font-size:.76rem}
  .j1b-scrub{height:20px}
  .j1b-times{font-size:.64rem}
}
@media(prefers-reduced-motion:reduce){
  .j1b-lines{transition:none}
  .j1b-line{transition:none}
  .j1b-rest i{animation:none;opacity:.5}
  .j1b-line.on.wipe{background-image:none;color:var(--sun,#E8C33A)}
}