/*!
 * More Voices — "Read what’s said" panel (Version 9.1, plugin 0.5.0)
 * (c) 2026 COPAGACLUB.ETH LLC. All rights reserved.
 * Beside the video when there is room (640px or more for both), below it otherwise.
 * Uses the theme's own text color and font; change the accent with --mv-accent.
 */
.mv-watch { container-type: inline-size; margin: 0 0 1em; }
.mv-watch__in { display: block; }
.mv-watch.is-reading .mv-watch__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 640px) {
  .mv-watch.is-reading .mv-watch__in { grid-template-columns: minmax(0, 1.7fr) minmax(230px, 1fr); align-items: start; }
  .mv-watch.is-reading .mv-read { height: var(--mv-read-h, 360px); max-height: none; }
}

.mv-read {
  --mv-accent: #E4572E;
  --mv-soft: color-mix(in srgb, currentColor 7%, transparent);
  --mv-line: color-mix(in srgb, currentColor 18%, transparent);
  --mv-muted: color-mix(in srgb, currentColor 62%, transparent);
  display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: 55vh;
  border: 1px solid var(--mv-line); border-radius: 12px; background: var(--mv-soft); overflow: hidden;
  font-size: .95em; line-height: 1.5;
}
.mv-read[hidden] { display: none; }
.mv-read__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--mv-line);
}
.mv-read__head strong { flex: 1 1 auto; font-size: .95em; order: 0; }
.mv-read__follow { order: 3; display: inline-flex; align-items: center; gap: 5px; font-size: .82em; color: var(--mv-muted); cursor: pointer; }
.mv-read__follow[hidden] { display: none; }
.mv-read__follow input { margin: 0; accent-color: var(--mv-accent); }
.mv-read__close {
  order: 2; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.mv-read__close:hover, .mv-read__close:focus-visible { background: var(--mv-line); }
.mv-read__listen {
  order: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--mv-line); background: transparent; color: inherit; font: inherit; font-size: .85em; cursor: pointer;
}
.mv-read__listen[hidden] { display: none; }
.mv-read__listen svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mv-read__listen:hover, .mv-read__listen:focus-visible { background: var(--mv-line); }
.mv-read__listen.is-on { background: var(--mv-accent); border-color: var(--mv-accent); color: #fff; }
.mv-read__voice { margin: 0; padding: 6px 14px; font-size: .82em; color: var(--mv-accent); border-bottom: 1px solid var(--mv-line); }
.mv-read__voice[hidden] { display: none; }
.mv-read__note { margin: 0; padding: 6px 14px; font-size: .82em; color: var(--mv-muted); border-bottom: 1px solid var(--mv-line); }
.mv-read__note[hidden] { display: none; }
.mv-read__lines {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  list-style: none; margin: 0; padding: 6px 0;
}
.mv-read__line, .mv-read__wait { margin: 0; padding: 6px 14px; }
.mv-read__wait { color: var(--mv-muted); }
.mv-read.is-timed .mv-read__line { padding: 0; }
.mv-read__jump {
  display: flex; gap: 10px; width: 100%; padding: 6px 14px; border: 0; background: transparent;
  color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.mv-read__jump:hover, .mv-read__jump:focus-visible { background: var(--mv-line); }
.mv-read__time { flex: 0 0 auto; min-width: 3.2em; color: var(--mv-muted); font-size: .85em; padding-top: .15em; font-variant-numeric: tabular-nums; }
.mv-read__line.is-now { background: color-mix(in srgb, var(--mv-accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--mv-accent); }
[dir="rtl"] .mv-read__line.is-now { box-shadow: inset -3px 0 0 var(--mv-accent); }
.mv-read__line.is-now .mv-read__time { color: var(--mv-accent); font-weight: 600; }
.mv-engage__read[aria-expanded="true"] { color: var(--mv-accent); }
.mv-engage__read svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) { .mv-read__lines { scroll-behavior: smooth; } }

/* 9.10.68 subtitles under the video: one line, big letters, 3 words lit up */
.mv-watch.is-sub.is-reading .mv-watch__in { display: block; }
.mv-watch.is-sub .mv-read { height: auto; max-height: none; margin-top: 10px; }
.mv-read__sub {
  margin: 0; padding: 14px 18px; min-height: 3.4em; font-size: 1.25em; line-height: 1.5; text-align: center;
  text-wrap: balance;
}
.mv-read__sub[hidden], .mv-read__lines[hidden] { display: none; }
.mv-read__sub span { border-radius: 4px; padding: 0 .08em; transition: background-color .15s, color .15s; }
.mv-read__sub span.is-lit { background: color-mix(in srgb, var(--mv-accent) 26%, transparent); box-shadow: 0 2px 0 var(--mv-accent); }
.mv-read__view {
  order: 1; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--mv-line); background: transparent;
  color: inherit; font: inherit; font-size: .85em; cursor: pointer;
}
.mv-read__view[hidden] { display: none; }
.mv-read__view:hover, .mv-read__view:focus-visible { background: var(--mv-line); }
@media (prefers-reduced-motion: reduce) { .mv-read__sub span { transition: none; } }