/* Read-along: narrated-paragraph highlight, follow-along toggle, tap to seek.
   Nothing here may change layout — `.gh-content > *` is centred with auto
   margins and a max-width, so the band is painted with background plus an
   outer box-shadow (clipped to outside the border box, so its alpha stays
   even) and the accent rule with an inset shadow. No padding or margin. */

.gh-content.has-read-along .is-narrated {
  background: rgba(200, 255, 83, 0.22);
  border-radius: 3px;
  box-shadow:
    0 0 0 7px rgba(200, 255, 83, 0.22),
    inset 3px 0 0 var(--acid, #c8ff53);
  transition: background 200ms ease, box-shadow 200ms ease;
}

.reading-theme-sepia .gh-content.has-read-along .is-narrated {
  background: rgba(154, 122, 32, 0.18);
  box-shadow:
    0 0 0 7px rgba(154, 122, 32, 0.18),
    inset 3px 0 0 #9a7a20;
}

.reading-theme-dark .gh-content.has-read-along .is-narrated {
  background: rgba(200, 255, 83, 0.14);
  box-shadow:
    0 0 0 7px rgba(200, 255, 83, 0.14),
    inset 3px 0 0 var(--acid, #c8ff53);
}

@media (prefers-reduced-motion: reduce) {
  .gh-content.has-read-along .is-narrated {
    transition: none;
  }
}

/* Tap a mapped paragraph to listen from there. Unmapped blocks stay inert. */
.gh-content.has-read-along .is-readalong-block {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .gh-content.has-read-along .is-readalong-block {
    position: relative;
  }

  .gh-content.has-read-along .is-readalong-block::before {
    border-bottom: 5px solid transparent;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent;
    content: "";
    height: 0;
    left: -22px;
    opacity: 0;
    position: absolute;
    top: 0.5em;
    transition: opacity 150ms ease;
    width: 0;
  }

  .gh-content.has-read-along .is-readalong-block:hover::before {
    opacity: 0.32;
  }

  @media (prefers-reduced-motion: reduce) {
    .gh-content.has-read-along .is-readalong-block::before {
      transition: none;
    }
  }
}

/* Follow-along toggle, appended to the mini player. The reading themes only
   override `color`, not the tokens, so these use literal colours like the
   surrounding player buttons do. */
.read-along-follow {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-geist-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 6px 12px;
  transition: background var(--hover-duration, 240ms) ease, color var(--hover-duration, 240ms) ease;
  white-space: nowrap;
}

.read-along-follow[aria-pressed="true"] {
  background: var(--acid, #c8ff53);
  border-color: var(--acid, #c8ff53);
  color: #121212;
}

.reading-theme-sepia .read-along-follow { border-color: #3b2e1a; color: #3b2e1a; }
.reading-theme-dark .read-along-follow { border-color: #666; color: #ccc; }

.reading-theme-sepia .read-along-follow[aria-pressed="true"],
.reading-theme-dark .read-along-follow[aria-pressed="true"] {
  background: var(--acid, #c8ff53);
  border-color: var(--acid, #c8ff53);
  color: #121212;
}

.read-along-follow:focus-visible {
  outline: 2px solid var(--blue, #3155f5);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .read-along-follow {
    transition: none;
  }
}

@media print {
  .read-along-follow { display: none; }
  .gh-content.has-read-along .is-narrated {
    background: none;
    box-shadow: none;
  }
}