/* Saidwire "words appear as spoken" replay widget. Scoped to .sw-replay; uses the site tokens when present. */
.sw-replay {
  --r-bg: var(--surface, #151a23); --r-raise: var(--raise, #1b212c); --r-line: var(--line, #262d3a);
  --r-ink: var(--ink, var(--text)); --r-body: var(--body, #c3c9d4); --r-muted: var(--muted, #8b93a1);
  --r-sig: var(--sig, var(--accent)); --r-sig-ink: var(--sig-ink, #0e1117); --r-sig-soft: var(--sig-soft, rgba(248,201,58,.12));
  --r-sans: var(--sans, "Inter", "Helvetica Neue", Arial, sans-serif);
  --r-mono: var(--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  background: var(--r-bg); border: 1px solid var(--r-line); border-radius: 14px;
  padding: 16px; color: var(--r-body); font-family: var(--r-sans); max-width: 760px; box-sizing: border-box;
}
.sw-replay * { box-sizing: border-box; }
.sw-replay .swr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sw-replay .swr-tab {
  font: 500 13px/1 var(--r-sans); color: var(--r-muted); background: transparent; cursor: pointer;
  border: 1px solid var(--r-line); border-radius: 999px; padding: 8px 12px;
}
.sw-replay .swr-tab[aria-selected="true"] { color: var(--r-sig-ink); background: var(--r-sig); border-color: var(--r-sig); }
.sw-replay .swr-bar { display: flex; align-items: center; gap: 12px; }
.sw-replay .swr-play {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--r-sig); color: var(--r-sig-ink); display: grid; place-items: center;
}
.sw-replay .swr-play svg { width: 18px; height: 18px; fill: currentColor; }
.sw-replay .swr-track { flex: 1; min-width: 0; }
.sw-replay .swr-title { color: var(--r-ink); font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.sw-replay .swr-prog { position: relative; height: 6px; background: var(--r-raise); border-radius: 3px; cursor: pointer; }
.sw-replay .swr-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--r-sig); border-radius: 3px; }
.sw-replay .swr-time { flex: none; font: 12px/1 var(--r-mono); color: var(--r-muted); min-width: 76px; text-align: right; }
.sw-replay .swr-text {
  margin-top: 14px; min-height: 132px; max-height: 220px; overflow-y: auto; padding: 12px 14px;
  background: var(--r-raise); border-radius: 10px; font-size: 17px; line-height: 1.55; color: var(--r-ink);
  overflow-wrap: anywhere;
}
.sw-replay .swr-text .f { transition: background-color .6s ease; border-radius: 3px; }
.sw-replay .swr-text .f.new { background: var(--r-sig-soft); }
.sw-replay .swr-text .p { color: var(--r-muted); }
.sw-replay .swr-text .hint { color: var(--r-muted); font-size: 15px; }
.sw-replay .swr-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12.5px; color: var(--r-muted); line-height: 1.45; }
.sw-replay .swr-key { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.sw-replay .swr-key b { font-weight: 500; }
.sw-replay .swr-key .kp { color: var(--r-muted); } .sw-replay .swr-key .kf { color: var(--r-ink); }
.sw-replay .swr-count { font-family: var(--r-mono); }
.sw-replay .swr-cap { margin: 8px 0 0; font-size: 12.5px; color: var(--r-muted); line-height: 1.45; }
@media (max-width: 480px) {
  .sw-replay { padding: 12px; border-radius: 12px; }
  .sw-replay .swr-text { font-size: 16px; min-height: 150px; }
  .sw-replay .swr-time { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .sw-replay .swr-text .f { transition: none; } }