/* Read aloud: the Listen bar (read-aloud.js; docs/design/read-aloud.md).
   It takes the page's font and colours. A site can set --ra-accent and
   --ra-highlight to match its theme. */
:root {
  --ra-accent: currentColor;
  --ra-highlight: rgba(255, 213, 79, 0.35);
}
.ra-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(127, 127, 127, 0.4);
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1;
}
/* The player floats at the foot of the screen, in the centre. */
.ra-bar.ra-docked {
  position: fixed;
  z-index: 1040;
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 1rem);
  background: var(--ra-bg, Canvas);
  color: var(--ra-fg, CanvasText);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}
.ra-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 2.25rem;
  min-height: 2.25rem; /* a comfortable touch target */
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ra-btn svg { width: 1.1rem; height: 1.1rem; fill: var(--ra-accent); }
.ra-btn:hover:not(:disabled) { background: rgba(127, 127, 127, 0.15); }
.ra-btn:focus-visible, .ra-panel :focus-visible {
  outline: 2px solid var(--ra-accent);
  outline-offset: 2px;
}
.ra-btn:disabled { opacity: 0.4; cursor: default; }
.ra-bar[hidden] { display: none; }
/* The Listen button. It takes the site's button class (its font, border and
   colour); pressed, it fills with --ra-active-bg (a site sets its accent). */
.ra-toggle { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; }
.ra-toggle svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.ra-toggle[aria-pressed="true"] {
  background: var(--ra-active-bg, Highlight);
  color: var(--ra-active-fg, HighlightText);
  border-color: var(--ra-active-bg, Highlight);
}
/* Play: one fixed size, whatever its label says (Listen, Pause, Resume),
   with its outline as the progress ring. */
.ra-play {
  position: relative;
  justify-content: center;
  width: 6.75rem;
  height: 2.5rem;
  font-weight: 600;
}
.ra-btn .ra-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ra-btn .ra-ring rect { fill: none; stroke-width: 3; }
.ra-ring-track { stroke: rgba(127, 127, 127, 0.3); }
.ra-ring-fill { stroke: var(--ra-active-bg, var(--ra-accent)); stroke-linecap: round; }
/* Speed: just the figure, with no border or arrow; it opens a menu like the
   voice menu (Andy, 31 Oct 2026). */
.ra-rate { min-width: 2.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-panel.ra-rate-panel { width: auto; min-width: 6.5rem; }
.ra-btn[hidden] { display: none; }
/* The voice tree: below the bar in the page, above it when docked. */
.ra-bar { position: relative; }
.ra-panel {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(22rem, calc(100vw - 1rem));
  max-height: min(26rem, 60vh);
  overflow: auto;
  padding: 0.5rem 0.75rem 0.75rem;
  border: 1px solid rgba(127, 127, 127, 0.4);
  border-radius: 0.75rem;
  background: var(--ra-bg, Canvas);
  color: var(--ra-fg, CanvasText);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
  line-height: 1.4;
  text-align: left;
}
.ra-panel[hidden] { display: none; }
.ra-docked .ra-panel { top: auto; bottom: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%); }
.ra-panel-title {
  margin: -0.5rem -0.75rem 0.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem 0.75rem 0 0;
  background: rgba(127, 127, 127, 0.12);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ra-panel-title { display: flex; align-items: center; justify-content: space-between; }
/* The info tip in the title band, with a dot when the preferred voice is missing. */
.ra-info {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: italic 700 0.8rem/1 Georgia, serif;
  text-transform: none;
  cursor: pointer;
}
.ra-info-alert::after {
  content: "";
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ra-active-bg, Highlight);
}
.ra-help { margin: 0 0 0.5rem; padding: 0.5rem 0.6rem; border-radius: 0.5rem; background: rgba(127, 127, 127, 0.08); font-size: 0.85rem; }
.ra-help[hidden] { display: none; }
.ra-help p { margin: 0 0 0.35rem; }
.ra-help p:last-child { margin: 0; }
.ra-panel-head { margin: 0.5rem 0 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; }
.ra-branch { margin: 0.1rem 0 0.1rem 0.25rem; }
.ra-branch > summary { padding: 0.35rem 0; cursor: pointer; }
.ra-option { display: flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; margin-left: 1rem; cursor: pointer; }
.ra-option input { margin: 0; }
.ra-online { margin: 0 0 0.25rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(127, 127, 127, 0.3); }
.ra-current {
  background: var(--ra-highlight);
  border-radius: 0.2rem;
  box-shadow: 0 0 0 0.2rem var(--ra-highlight);
  transition: background 0.2s;
}
@media (prefers-reduced-motion: reduce) { .ra-current { transition: none; } }
@media print { .ra-bar { display: none; } .ra-current { background: none; box-shadow: none; } }
/* On a narrow phone the docked bar keeps to one line: the play button shows
   its icon only. */
@media (max-width: 26rem) { .ra-docked .ra-play-text { display: none; } .ra-docked .ra-play { width: 2.75rem; height: 2.75rem; } }
/* Text and icons on one line. A font's glyphs sit high in its line, about
   2 px above the icons (measured 31 Oct 2026), so the play label and the
   speed are centred on their capitals (text-box), with a nudge of the same
   size where text-box is missing (Firefox). */
.ra-play-text, .ra-rate-text { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .ra-play-text, .ra-rate-text { position: relative; top: 0.12em; }
}
/* Autoplay: filled in the accent when on for older, the usual way, like the
   Listen button, and in amber for newer (Andy, 1 Nov 2026: "older first -
   flip the colouring too"); a larger icon, pointing right for newer and
   mirrored, pointing left, for older. */
.ra-auto { position: relative; }
.ra-btn.ra-auto svg { width: 1.5rem; height: 1.5rem; }
.ra-auto-older svg { transform: scaleX(-1); }
/* Newer, now the reverse direction, in its own colour (Andy, 31 Oct 2026):
   amber unless the site sets --ra-reverse-bg and --ra-reverse-fg. */
.ra-auto.ra-auto-newer[aria-pressed="true"], .ra-auto.ra-auto-newer[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--ra-reverse-bg, #f5b041);
  color: var(--ra-reverse-fg, #111);
}
.ra-auto[aria-pressed="true"], .ra-auto[aria-pressed="true"]:hover:not(:disabled) { background: var(--ra-active-bg, Highlight); color: var(--ra-active-fg, HighlightText); }
.ra-auto[aria-pressed="true"] svg { fill: currentColor; }