/* The case study Listen button is display:none by default in styles.css (it was
   never wired before). Reveal it once the audio is confirmed. Blog post Listen
   buttons are already visible, so they need no reveal. */
.meta.case-study .listen.has-audio {
    display: inline-flex;
    align-items: center;
}

/* Play / pause icon on any read-along Listen button, toggled by .is-playing.
   The icon font has no pause glyph, so both shapes are drawn with CSS. */
.listen.has-audio::before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    width: 0;
    height: 0;
    margin-right: 0.5rem;
    padding: 0;
    font-size: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;                 /* right-pointing play triangle */
    border-color: transparent transparent transparent currentColor;
}

.listen.has-audio.is-playing::before {
    width: 9px;
    height: 12px;
    border-width: 0 3px;                           /* two bars = pause */
    border-color: currentColor;
}

/* The native player floats as a fixed bar once Listen starts, so it never
   breaks the page layout and stays reachable while scrolling the read-along.
   It is only added to the DOM after the first Listen tap. */
.read-along-player {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1000;
    width: min(440px, calc(100vw - 2rem));
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

/* Read-along word highlight. A single floating marker rides over the spoken
   word, positioned in document space from a live Range, so the page DOM is
   never touched and no layout (flex metrics, pullquotes, count-up numbers) can
   break. Rounded corners, and a short transition so it glides between words.
   Translucent so the word stays readable on light and dark backgrounds. */
.read-along-marker {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: 5px;
    background-color: rgba(99, 102, 241, 0.4);
    opacity: 0;
    will-change: transform, width, height;
    transition: transform 110ms ease, width 110ms ease, height 110ms ease, opacity 150ms ease;
}