/* ══════════════════════════════════════════════════════════════
   Волна. Один акцентный цвет, десатурированный зелёный. Тёплый оттенок ТОЛЬКО
   в области расхождения и в подсветке проблемного слова: второй яркий цвет
   превращает диаграмму в раскраску, а раскраска ничего не сообщает.
   ══════════════════════════════════════════════════════════════ */

.wv {
  --wv-ink: color-mix(in oklab, var(--mint) 74%, #6c7a72 26%);   /* десатурированный зелёный */
  --wv-warm: color-mix(in oklab, var(--gold) 62%, #b06a3c 38%);  /* тёплый: только расхождение */
  --wv-p: 100%;
  display: flex; flex-direction: column; gap: 10px;
}

/* ── режимы прослушивания ─────────────────────────────────── */
.wv-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.wv-modes button {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600;
  background: transparent; color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color var(--d-tap) var(--e-in), background-color var(--d-tap) var(--e-in);
}
.wv-modes button[aria-pressed="true"] { background: color-mix(in oklab, var(--wv-ink) 18%, transparent); color: var(--ink); }
.wv-modes button:disabled { opacity: .4; cursor: not-allowed; }
.wv-modes button:active:not(:disabled) { transform: scale(.97); }
.wv-modes .wv-slow { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── сцена ────────────────────────────────────────────────── */
.wv-stage {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.wv-svg { display: block; width: 100%; height: 190px; }

/* тонкая базовая линия под волной */
.wv-base { stroke: var(--ink); stroke-width: 1; opacity: .12; }

/* носитель: мягкая заливка низкой плотности, БЕЗ обводки: это опора, не след */
.wv-native { fill: color-mix(in oklab, var(--wv-ink) 26%, transparent); stroke: none; }

/* своя запись: тонкая чёткая линия поверх */
.wv-mine {
  fill: none; stroke: var(--wv-ink); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* расхождение площадью: приглушённое, тёплое. Совпал: площади почти нет */
.wv-diff { fill: color-mix(in oklab, var(--wv-warm) 22%, transparent); stroke: none; }

/* проблемное слово: вертикальная полоса через ОБЕ волны, а не раскраска формы */
.wv-bad { fill: color-mix(in oklab, var(--wv-warm) 14%, transparent); }

/* головка бежит впереди прочерченной части */
.wv-head { stroke: var(--wv-ink); stroke-width: 1.5; opacity: .9; }

/* Прочерчивание: пройденное плотное, будущее приглушено до 0.35.
   Делается маской по --wv-p, поэтому кадр стоит одну смену переменной. */
.wv-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent var(--wv-p), var(--bg-1) var(--wv-p));
  opacity: .65;
}
.wv[data-playing=""] .wv-stage::after,
.wv:not([data-playing]) .wv-stage::after { opacity: 0; }

/* зерно: материал, а не эффект. 4% поверх канваса */
.wv-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  filter: url(#wvGrain);
  background: #fff;
}

/* ── лента слов ───────────────────────────────────────────── */
.wv-words { display: flex; gap: 2px; align-items: stretch; }
.wv-word {
  min-width: 0; padding: 7px 4px 6px; border-radius: 9px; text-align: center;
  display: flex; flex-direction: column; gap: 2px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--line);
}
.wv-word.is-bad { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wv-warm) 55%, transparent); }
.wv-word b {
  font-weight: 600; font-size: .8125rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wv-word.is-bad b { color: var(--wv-warm); }
/* процент отклонения длительности: ловит рваную речь при верных словах */
.wv-pct { font-style: normal; font-size: .6875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.wv-pct.is-off { color: var(--wv-warm); }

.wv-note { margin: 0; font-size: .8125rem; color: var(--ink-dim); line-height: 1.5; }

/* В покое ничего не двигается: анимаций здесь нет вообще, только смена
   переменной во время воспроизведения. Отдельного правила для reduced не нужно,
   но отклик на нажатие снимаем. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .wv-modes button:active { transform: none; }
}