/* Vorlese-Karaoke: the line lights up as the learner reads it aloud. */
.vl-lead { max-width: 40rem; }
.vl-note { max-width: 40rem; color: var(--muted); font-size: var(--fs-14); }
.vl { max-width: 40rem; }
.vl-tools { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin: var(--s-3) 0; }
.vl-tools fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.vl-tools label { display: inline-flex; gap: 0.35rem; align-items: center; }
.vl-body { font-size: 1.35rem; line-height: 1.75; }
.vl-sent { margin: 0 0 0.7em; }
.vl-sent.is-dim { opacity: 0.4; }
.vl-w { padding: 0.02em 0.14em; border-radius: 0.2em; }
.vl-w.is-green { background: color-mix(in srgb, var(--mastery) 28%, transparent); }
.vl-w.is-amber { background: color-mix(in srgb, var(--signal) 42%, transparent); }
.vl-w.is-grey { color: var(--muted); }
.vl-w.is-next { box-shadow: inset 0 -0.14em 0 var(--signal); }
.vl-w.is-model { background: color-mix(in srgb, var(--signal) 55%, var(--card)); }
.vl-w.is-pulse { animation: vl-pulse 0.9s ease-in-out infinite; }
@keyframes vl-pulse {
  50% { background: color-mix(in srgb, var(--signal) 72%, var(--card)); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-w.is-pulse { animation: none; background: color-mix(in srgb, var(--signal) 55%, var(--card)); }
}
.vl-en { margin: -0.4em 0 0.8em; color: var(--muted); font-size: 0.9rem; }
.vl-report { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--bw) solid var(--line); }
.vl-report h2 { font-size: var(--fs-18); margin: 0 0 var(--s-2); }
.vl-unclear { list-style: none; padding: 0; margin: var(--s-3) 0; }
.vl-unclear li { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-2); }
.vl-series { display: flex; align-items: flex-end; gap: 0.35rem; height: 4.5rem; margin: var(--s-2) 0 var(--s-4); }
.vl-series span { flex: 1; background: var(--ink); border-radius: 0.2rem 0.2rem 0 0; min-height: 2px; opacity: 0.75; }
.vl-series span[data-empty="1"] { background: var(--line-strong); opacity: 1; }
.vl-hard { margin: var(--s-3) 0; }
.vl-hard button[aria-pressed="true"] { border-color: var(--signal-text); background: color-mix(in srgb, var(--signal) 35%, var(--card)); }