/* Read-along transcript (public/app/readalong.js): attached under the episode player, with a scrollable body
   that follows the episode. The caret in its top-right corner folds it up into the player. */

.readalong { --ra-body-h: min(290px, 38vh); position: relative; display: grid; grid-template-rows: 1fr; border: 1px solid var(--border-strong); border-top: 0; background: #fff; scroll-margin-top: calc(var(--header-h) + 1rem); transition: grid-template-rows 0.3s ease, border-color 0.3s; }
.readalong.is-folded { grid-template-rows: 0fr; border-color: transparent; }

/* Top-right of the transcript, clear of its scrollbar; when folded it hangs as a tab under the player's corner. */
.ra-fold { position: absolute; z-index: 2; top: 0.55rem; right: 1.35rem; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: var(--abyss); color: #fff; font-size: 1.1rem; cursor: pointer; transition: top 0.3s ease, background 0.15s; }
.ra-fold:hover { background: var(--surf-deep); }
.readalong.is-folded .ra-fold { top: 0; border-radius: 0 0 var(--radius) var(--radius); }
/* Touch screens' scrollbars overlay the text, so the button can sit nearer the edge. */
@media (pointer: coarse) { .ra-fold { right: 0.5rem; } }
.ra-fold .icon { transform: rotate(180deg); transition: transform 0.2s; }
.ra-fold[aria-expanded='false'] .icon { transform: none; }

.ra-main { position: relative; min-height: 0; overflow: hidden; }
.readalong.is-folded .ra-main { visibility: hidden; transition: visibility 0s 0.3s; }

/* A window onto the transcript, not the whole thing */
.ra-body { position: relative; height: var(--ra-body-h); overflow-y: auto; padding: 0.9rem 2.5rem 35% 1rem; overscroll-behavior: contain; }
.ra-body:focus-visible { outline: 2px solid var(--surf); outline-offset: -2px; }
.ra-body p { position: relative; margin: 0 0 0.3rem; padding: 0.45rem 0.6rem 0.45rem 0.85rem; font-size: 1rem; line-height: 1.6; color: var(--fg); cursor: pointer; border-radius: var(--radius); transition: color 0.3s, background 0.3s; }
.ra-body p:hover { background: var(--bg-alt); }
.ra-body p.is-past { color: var(--fg-subtle); }
.ra-body p.is-now { background: #fff6d6; color: var(--ink); }
/* A bar beside the paragraph being spoken fills as it goes */
.ra-body p.is-now::before { content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 3px; background: linear-gradient(to bottom, var(--coral) calc(var(--p, 0) * 100%), rgba(217, 58, 67, 0.18) calc(var(--p, 0) * 100%)); }
.ra-body .speaker { color: var(--surf-deep); }
.ra-body p.is-past .speaker { color: var(--fg-subtle); }
/* Fades the bottom edge so it reads as a window that scrolls */
.ra-body { -webkit-mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(#000 calc(100% - 2.5rem), transparent); }

.ra-jump { position: absolute; z-index: 1; left: 50%; bottom: 0.75rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.35rem; background: var(--abyss); color: #fff; border: 0; border-radius: 99px; padding: 0.5rem 0.95rem; font-weight: 700; font-size: 0.82rem; box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; }
.ra-jump[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .readalong, .ra-body p, .ra-fold, .ra-fold .icon { transition: none; }
}
.readalong.is-unsynced .ra-body p { cursor: auto; }