.vg-tts-layout-changing { overflow-anchor: none; }
.vg-tts-trigger { padding-inline: var(--s2); white-space: nowrap; }
.vg-tts-trigger svg { flex: none; }
.vg-tts-player { border-top: 1px solid var(--reader-border); }
.vg-tts-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  padding-block: var(--s2) max(var(--s2), env(safe-area-inset-bottom, 0px));
}
.vg-tts-buttons, .vg-tts-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.vg-tts-feedback [data-vg-tts-position]:empty { display: none; }
.vg-tts-feedback [data-vg-tts-position] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vg-tts-buttons .vg-button--primary { min-width: 5rem; }
.vg-reading .vg-tts-buttons .vg-button--primary:not(:disabled) { color: var(--on-dark); }
.vg-reading .vg-tts-buttons .vg-button--primary:hover:not(:disabled) { background: var(--hover); }
.vg-tts-buttons .vg-button--outline, .vg-reading .vg-tts-trigger, .vg-tts-settings .vg-button--outline { color: var(--reader-text); }
.vg-tts-buttons .vg-button--outline:hover:not(:disabled), .vg-reading .vg-tts-trigger:hover, .vg-tts-settings .vg-button--outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--reader-bg), var(--reader-text) 10%);
}
.vg-tts-buttons .vg-button:disabled { color: var(--reader-text); background: transparent; opacity: .55; }
.vg-tts-settings .vg-stack { margin-block: var(--s4); }
.vg-tts-settings .vg-tts-recovery { margin: 0; gap: var(--s2); }
.vg-tts-recovery ul { margin: 0; padding-inline-start: var(--s5); }
.vg-tts-recovery li + li { margin-block-start: var(--s2); }
.vg-tts-settings select { width: 100%; }
.vg-tts-auto { display: flex; align-items: center; gap: var(--s2); min-height: 44px; }
.vg-tts-auto input { width: 1.15rem; height: 1.15rem; accent-color: var(--reader-accent); }

@media (max-width: 36rem) {
  .vg-tts-controls { justify-content: center; }
  .vg-tts-feedback { flex-basis: 100%; justify-content: center; text-align: center; }
  .vg-tts-trigger { gap: var(--s1); }
}
@media (max-width: 29.999rem) {
  /* Icon-only on phones so the novel title in the reading bar has room. */
  .vg-reading .vg-tts-trigger { width: 44px; padding: 0; }
  .vg-tts-trigger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .vg-tts-trigger svg { width: 20px; height: 20px; }
}
@media (max-width: 23rem) {
  .vg-tts-buttons { display: grid; grid-template-columns: 44px minmax(0, 1fr) repeat(3, 44px); gap: var(--s1); }
  .vg-tts-buttons .vg-button--primary { padding-inline: var(--s1); }
}

@media (max-width: 47.999rem) {
  /* On phones the listening controls sit at the bottom, near the thumb, instead of under the header. */
  .vg-tts-player {
    position: fixed; z-index: 7; inset: auto 0 0; background: var(--reader-bg);
    border-top: 1px solid var(--reader-border); box-shadow: 0 -6px 20px rgb(0 0 0 / .08);
  }
}