/* read-aloud.css v1.0.0 - styles for read-aloud.js.
   Theme it with tokens on :root or any ancestor (all optional):
   --ra-bg --ra-fg --ra-dim --ra-acc --ra-line   bar colours
   --ra-hl     wash on the paragraph being read      --ra-sent  highlight on the sentence being read
   --ra-font   bar font     --ra-z  bar stacking order     --ra-space  room kept under the page while the bar shows */

.ral-bar { --_bg: var(--ra-bg, Canvas); --_fg: var(--ra-fg, CanvasText); --_dim: var(--ra-dim, GrayText); --_acc: var(--ra-acc, currentColor); --_line: var(--ra-line, rgba(128, 128, 128, .32));
  position: fixed; z-index: var(--ra-z, 55); left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(620px, calc(100vw - 24px)); box-sizing: border-box; background: var(--_bg); color: var(--_fg); border: 1px solid var(--_line); border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .16); font: 500 14px/1.3 var(--ra-font, system-ui, -apple-system, "Segoe UI", sans-serif); }
.ral-bar[hidden] { display: none !important; }
.ral-prog { position: absolute; top: -1px; left: 16px; right: 16px; height: 2px; background: transparent; }
.ral-prog i { display: block; height: 100%; width: 0; background: var(--_acc); border-radius: 2px; transition: width .25s linear; }
.ral-row { display: flex; align-items: center; gap: 2px; padding: 6px 8px; }
.ral-bar button { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; margin: 0; }
.ral-b { flex: none; width: 40px; height: 40px; padding: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.ral-b svg { width: 22px; height: 22px; display: block; }
.ral-b:hover { background: color-mix(in srgb, var(--_fg) 8%, transparent); }
.ral-pp { width: 44px; height: 44px; background: var(--_fg); color: var(--_bg) !important; }
.ral-pp:hover { background: color-mix(in srgb, var(--_fg) 82%, var(--_acc)); }
.ral-pp.ral-busy svg { animation: ral-pulse 1.1s ease-in-out infinite; }
.ral-b:disabled { opacity: .3; cursor: default; background: none; }
.ral-bar button:focus-visible { outline: 2px solid var(--_acc); outline-offset: 2px; }
.ral-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.ral-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ral-n { color: var(--_dim); font-size: 12.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ral-sp { position: relative; flex: none; margin: 0 4px; }
.ral-rate { min-width: 54px; height: 34px; padding: 0 10px; border: 1px solid var(--_line); border-radius: 999px; background: none; cursor: pointer; font-variant-numeric: tabular-nums; font-weight: 600; }
.ral-rate:hover { border-color: var(--_fg); }
.ral-menu { position: absolute; right: 0; bottom: calc(100% + 12px); min-width: 92px; padding: 4px; display: flex; flex-direction: column; background: var(--_bg); border: 1px solid var(--_line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.ral-menu[hidden] { display: none; }
.ral-menu button { border: 0; background: none; padding: 9px 14px; border-radius: 8px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.ral-menu button:hover { background: color-mix(in srgb, var(--_fg) 8%, transparent); }
.ral-menu button[aria-checked="true"] { font-weight: 700; background: color-mix(in srgb, var(--_acc) 16%, transparent); }
.ral-loc[hidden] { display: none; }
@media (max-width: 420px) { .ral-prev { display: none; } .ral-info { padding: 0 4px; } .ral-rate { min-width: 48px; padding: 0 8px; } }
@keyframes ral-pulse { 50% { opacity: .35; } }

/* what is being read */
[data-ra] { transition: background-color .3s ease, box-shadow .3s ease; }
.ral-on { background-color: var(--ra-hl, rgba(250, 204, 21, .10)); box-shadow: 0 0 0 .4em var(--ra-hl, rgba(250, 204, 21, .10)); border-radius: 3px; }
::highlight(ral-sentence) { background-color: var(--ra-sent, rgba(250, 204, 21, .34)); }
html.ral-active body { padding-bottom: var(--ra-space, 88px); }

/* listen buttons ([data-ra-play]); the module fills an empty button with an icon and a label */
[data-ra-play] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
[data-ra-play] .ral-i { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; }
[data-ra-play] .ral-i svg { width: 100%; height: 100%; display: block; }
html.ral-none [data-ra-play] { display: none !important; }

@media (prefers-reduced-motion: reduce) { [data-ra], .ral-prog i { transition: none; } .ral-pp.ral-busy svg { animation: none; } }
@media print { .ral-bar, [data-ra-play] { display: none !important; } .ral-on { background: none; box-shadow: none; } }