/* ============================================================================
   READ-ALOUD PLAYER — shared across every text-heavy static page.

   Chrome's own "Listen to this page" is Android-only, and even there it is
   gated on the user's "Make searches and browsing better" setting plus
   Google's per-page eligibility; the desktop Reading-mode player is a partial
   rollout. None of that is reachable from markup, so the pages carry their own.

   Loaded as a plain <link>/<script> pair rather than pasted inline into each
   page: these are static files with no build step, and 13 hand-rolled copies is
   exactly how the site's <header> nav drifted into three different versions.

   Colours come from each page's own :root custom properties, with fallbacks so
   this still reads correctly on a page that defines none of them.
   ============================================================================ */

/* The measured sticky-header clearance read-aloud.js publishes (see its own
   header comment for why 90px was wrong). The fallback is that old hardcoded
   value, so a page that loads this sheet without the script is no worse off
   than before. Declared here rather than in each page's <style> so it cannot
   drift into 13 versions — and it beats those inline rules because every page
   links this sheet AFTER its own <style> block. */
   ⚠ It targets ANY id'd element inside <main>, not a list of tags. The first
   cut listed h2/h3/.card/section and guide.html still failed, because its
   "Reference" chip points at a `div.tier-divider` — enumerating tags just
   reproduces the staleness one level down. `scroll-margin-top` is inert on
   anything that is never a scroll target, so the broad rule costs nothing. */
:root { --site-anchor-offset: 90px; }
main [id] { scroll-margin-top: var(--site-anchor-offset); }

.listen {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel, #0d151e); border: 1px solid var(--line-2, #1f2c3b);
  border-radius: 12px; padding: 10px 14px; margin: 0 0 22px;
}
.listen button {
  font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 600;
  color: var(--teal, #3fd0d8); background: #0d1922;
  border: 1px solid rgba(63, 208, 216, .45);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  /* This control is used on phones first — keep it at the 44px touch minimum. */
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .15s, border-color .15s, background .15s;
}
.listen button:hover { color: #7fe9ef; border-color: var(--teal, #3fd0d8); }
.listen button.ghost {
  color: var(--muted, #8499b0); border-color: var(--line-3, #243243); background: transparent;
}
.listen button.ghost:hover { color: var(--ink, #e8eef5); border-color: var(--muted, #8499b0); }
.listen button[hidden] { display: none; }
.listen .rd-status {
  font-family: "IBM Plex Mono", monospace; font-size: 11.5px;
  color: var(--faint, #557089); letter-spacing: .3px;
}

/* The block currently being spoken. Deliberately a background + ring rather
   than a left border: several pages already give h2 a teal left border, and a
   second one there would read as a rendering fault. */
main .rd-on {
  background: rgba(63, 208, 216, .09);
  box-shadow: 0 0 0 6px rgba(63, 208, 216, .09);
  border-radius: 4px;
}

@media (max-width: 560px) {
  .listen { gap: 8px; }
}