/* Read-along (assets/js/read-along.js). Loaded only on narrated pages whose timing matches the text.
   Highlights paint a text Range without touching the DOM; only the background changes, so the text
   keeps its own colour (contrast checked against both themes' body text, well above 4.5:1). */

::highlight(read-along) {
    background-color: rgba(255, 107, 53, .22); /* accent #FF6B35 on the dark default theme */
}

::highlight(read-along-hover) {
    background-color: rgba(255, 107, 53, .10);
}

[data-theme=light] ::highlight(read-along) {
    background-color: rgba(255, 107, 53, .15);
}

[data-theme=light] ::highlight(read-along-hover) {
    background-color: rgba(255, 107, 53, .07);
}

@media (forced-colors: active) {
    ::highlight(read-along) {
        background-color: Highlight;
        color: HighlightText;
    }

    ::highlight(read-along-hover) {
        background-color: transparent;
        text-decoration: underline;
    }
}

@media print {
    ::highlight(read-along),
    ::highlight(read-along-hover) {
        background-color: transparent;
    }
}