/* read-along.css — ::highlight() styles + fallback mark styling.
   Ships as a separate file for pages that prefer a <link>, and can be
   imported from src/read-along.js context.

   Color strategy: plain rgb() only. The first draft used
   color-mix(in oklab, Highlight 45%, transparent) — if an engine can't
   resolve the system Highlight color or color-mix, the declaration is
   dropped silently and NOTHING paints (an invisible highlight is worse
   than no highlight API). rgb(… / alpha) is universally parsable, works
   on light and dark page themes, and needs no supports() dance.

   Two visibility channels on the active word: a strong background tint
   plus a solid underline. If a hostile engine drops one channel, the
   other still shows. ::highlight() supports color, background-color,
   text-decoration, text-shadow — NOT border/padding/border-radius.

   Theming: --ra-highlight/--ra-accent override the word color per page
   or per instance (e.g. read-along { --ra-highlight: rgb(255 196 0 / .5); }).
   Same trap as color-mix applies: keep the value a plain rgb(); exotic
   color functions risk silent drop in hostile engines. */

::highlight(read-along-sentence) {
  background-color: rgb(64 132 255 / 0.16);
}

::highlight(read-along-word) {
  background-color: var(--ra-highlight, rgb(64 132 255 / 0.5));
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ra-accent, rgb(33 74 255));
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Fallback path (no CSS Custom Highlight API, or force-fallback):
   a real <mark data-read-along> wrapping the active word. As a real
   element it may also use padding/radius. */
mark[data-read-along] {
  background-color: var(--ra-highlight, rgb(64 132 255 / 0.5));
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ra-accent, rgb(33 74 255));
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  border-radius: 3px;
  padding: 0 1px;
}

/* Seekable instances hint that words are clickable. */
[seekable] { cursor: pointer; }