/* ICONIC VOICES — read-along inside the paid player (/app/listen).
   Deliberately the same gold treatment as the free-sample reader in
   iv-karaoke.css: a listener who sampled a voice on /voices and then subscribed
   should meet the same object, not a second design. Class names differ because
   the two engines mount on different DOM (see assets/js/iv-readalong.js). */

.iv-ra {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  line-height: 2.05;
  color: #8a8a90;
  max-height: 46vh;
  overflow-y: auto;
  /* Makes this box the offsetParent for the word spans inside it. The JS no
     longer relies on that — it measures rects — but without it any offsetTop
     read here resolves against #iv-listen-root instead, which is how
     follow-the-voice shipped broken. */
  position: relative;
  padding: 4px 10px 4px 2px;
  /* Smooth scrolling is applied per-call in JS so Reduce Motion can turn it
     off; leaving it here would override that decision. */
}

.iv-ra:focus-visible {
  outline: 2px solid rgba(201, 168, 76, .55);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Words are individually clickable — the whole point is that you can jump the
   narration to any word you can see. */
.iv-ra__w {
  cursor: pointer;
  border-radius: 3px;
  transition: color .18s ease;
}

.iv-ra__w:hover {
  color: #cfcdd4;
}

/* The spoken word. Same gradient, same halo, same near-black ink as the sample
   reader — #0a0a0b on the gold ramp measures 9.2:1. */
.iv-ra__w.is-now {
  color: #0a0a0b;
  background: linear-gradient(180deg, #E8D48B, #C9A84C);
  box-shadow: 0 0 18px -2px rgba(201, 168, 76, .6);
  padding: 1px 2px;
}

.iv-ra__status {
  font-size: .82rem;
  color: #84848c;
  min-height: 1.2em;
  margin-bottom: 6px;
}

/* Appears only once the reader has scrolled away by hand; tapping it hands the
   view back to the narration. */
.iv-ra__follow {
  margin-top: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(201, 168, 76, .28);
  color: #E8D48B;
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  /* 44px minimum touch target once padding and line-height are counted. */
  min-height: 44px;
}

.iv-ra__follow:hover {
  border-color: rgba(201, 168, 76, .5);
  color: #F5E9BE;
}

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

/* Phones: the panel is the page, so give it more of the screen and loosen the
   measure rather than shrinking the type. */
@media (max-width: 560px) {
  .iv-ra {
    font-size: 1.12rem;
    line-height: 1.95;
    max-height: 52vh;
  }
}

/* Forced-colors: the gradient disappears, so the current word has to be marked
   by something the mode preserves. */
@media (forced-colors: active) {
  .iv-ra__w.is-now {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}