/* vocal-gpu-lyrics.css — karaoke lyrics panel, /vocalremover-gpu ONLY.
 *
 * Its own sheet, linked only by vr-gpu.php: the separation law of 2026-09-21 keeps every new
 * surface of the GPU page out of the public tool's assets (css/vocal-combined.css is shared).
 * Colours come from the cosmic tokens, so both themes and every palette follow automatically.
 */

.vlx {
  margin: clamp(14px, 2.6vw, 22px) 0 0;
  padding: clamp(12px, 2.2vw, 18px);
  border: 1px solid var(--stroke, rgba(255, 255, 255, .14));
  border-radius: 16px;
  background: var(--panel, rgba(255, 255, 255, .04));
}

.vlx-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.vlx-head h3 {
  margin: 0;
  font-size: clamp(15px, 2.2vw, 18px);
  letter-spacing: .01em;
}

.vlx-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vlx-acts button {
  min-height: 34px;                       /* touch target */
  padding: 6px 12px;
  border: 1px solid var(--stroke, rgba(255, 255, 255, .18));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.vlx-acts button:hover { background: var(--hover, rgba(255, 255, 255, .08)); }
.vlx-acts button:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
.vlx-follow.on { border-color: var(--accent, #7c5cff); color: var(--accent, #7c5cff); }

.vlx-box {
  /* the auto-scroll measures offsetTop against this box, so it must BE the offset parent:
     without it the first line reported the page's offset and the panel opened mid-lyric */
  position: relative;
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 4px 2px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px,
                                      #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px,
                                      #000 calc(100% - 22px), transparent 100%);
}

.vlx-line {
  padding: 5px 8px;
  border-radius: 9px;
  line-height: 1.45;
  font-size: clamp(14px, 1.9vw, 17px);
  cursor: pointer;
  transition: opacity .18s ease, background .18s ease;
}

.vlx-line:hover { background: var(--hover, rgba(255, 255, 255, .06)); }
.vlx-line:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 1px; }

.vlx-past   { opacity: .5; }
.vlx-future { opacity: .42; }
.vlx-active {
  opacity: 1;
  font-weight: 600;
  font-size: clamp(15px, 2.2vw, 19px);
}

/* Each word is two stacked copies: the dim one sets the box, the lit one is clipped to the part
   already sung. Per WORD, not per line, so a line that wraps on a phone still sweeps correctly. */
.vlx-w {
  position: relative;
  display: inline-block;
  white-space: pre;
}

.vlx-wbase { color: inherit; }

.vlx-wfill {
  position: absolute;
  /* logical, not physical: in an RTL line the sung part must grow from the RIGHT edge */
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  overflow: hidden;
  white-space: pre;
  color: var(--accent, #7c5cff);
  pointer-events: none;
}

/* Right-to-left lyrics: the box carries dir="rtl" so the words themselves order correctly; these
   only line the text up with the edge a reader of that script starts from. */
.vlx-rtl .vlx-line { text-align: right; }
.vlx-rtl .vlx-foot,
.vlx-rtl .vlx-empty { text-align: right; }

.vlx-empty,
.vlx-foot {
  margin: 8px 2px 0;
  font-size: 12.5px;
  opacity: .72;
}

@media (prefers-reduced-motion: reduce) {
  .vlx-line { transition: none; }
}

@media (max-width: 560px) {
  .vlx { padding: 12px 10px; border-radius: 14px; }
  .vlx-box { max-height: 52vh; }
  .vlx-acts button { padding: 6px 10px; }
}