/* ==============================================================
 * Vattenskoter — karaoke LINE-highlight styling
 * Soft yellow highlight over the block-level element (line) that
 * contains the currently-spoken word.
 *
 * Applied by js/karaoke.js. Wraps each web-body word in a
 * <span class="w" data-w-idx="N"> ...  Word spans stay clickable
 * (jump-audio-to-word) but have no visual highlight of their own.
 * The active block (nearest <p>, <li>, <h1..h6>, <blockquote>,
 * <td>, etc.) gets the class `line-active`.
 *
 * Change 2026-07-16: line-based highlight replaces per-word.
 * ============================================================== */

/* All wrapped words: pointer cursor to hint clickability
   (jump-audio-to-word). No hover background anymore — spans are
   effectively invisible wrappers in line mode. */
.article .w {
  cursor: pointer;
}

/* Legacy per-word classes — kept as no-ops for backwards
   compatibility with any stray HTML or older JS. Ensures no
   visual highlight leaks through even if a class is set. */
.article .w-active,
.article .w-past,
.article.karaoke-on .w-active,
.article.karaoke-on .w-past {
  background: transparent;
  opacity: 1;
}

/* ------------ LINE-active (karaoke on) ------------ */
/* Karaoke mode disabled → no active styling anywhere. */
.article:not(.karaoke-on) .line-active {
  background: transparent;
}

/* Karaoke ON: the block containing the current word gets a soft
   yellow wash. Lower alpha than the old per-word marker-pen because
   the highlight covers a much larger surface. */
.article.karaoke-on .line-active {
  background: rgba(255, 235, 59, 0.28);
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 -4px;
  transition: background 200ms ease;
  scroll-margin-top: 140px;
  scroll-margin-bottom: 140px;
}

html.dark .article.karaoke-on .line-active {
  background: rgba(255, 200, 40, 0.22);
  color: inherit;
}

/* ------------ toggle button inside the audio player ------------ */
.ap-karaoke {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  background: #083e70;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  user-select: none;
  transition: background .15s ease;
}
.ap-karaoke:hover { background: #062e54; }
.ap-karaoke input { accent-color: #ffdc28; }
.ap-karaoke .ap-karaoke-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ffdc28;
  box-shadow: 0 0 6px rgba(255, 220, 40, 0.8);
}
.ap-karaoke[data-enabled="0"] .ap-karaoke-dot {
  background: rgba(255,255,255,0.35);
  box-shadow: none;
}

/* ------------ mini-player variant ------------
 * The chip is rendered twice: once in the inline player controls and
 * once inside the sticky mini-player at the bottom. In the mini bar
 * space is tight, so shrink padding + font and dial back visual weight.
 * Matches other mini-bar controls (see css/audio-player.css .ap-mini*).
 */
.ap-mini .ap-karaoke,
.ap-karaoke-mini {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  gap: 0.3rem;
  border-radius: 6px;
  flex: 0 0 auto;
}
.ap-mini .ap-karaoke .ap-karaoke-dot,
.ap-karaoke-mini .ap-karaoke-dot {
  width: 7px;
  height: 7px;
}

/* The slot itself is a bare flex child; make sure it doesn't collapse. */
.ap-mini-karaoke-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* On narrow screens the mini bar is very crowded (bar already hides at
 * ≤640px). Below 480px, hide the mini karaoke chip entirely — the
 * inline chip is still available above the fold if the user scrolls up. */
@media (max-width: 480px) {
  .ap-mini-karaoke-slot { display: none; }
}

/* Reduced motion — no transitions on line-active. */
@media (prefers-reduced-motion: reduce) {
  .article.karaoke-on .line-active { transition: none; }
}