/* ════════════════════════════════════════════════════════════════════
   FOUNDATIONS TTS · READ-ALOUD WITH SENTENCE HIGHLIGHTING
   ────────────────────────────────────────────────────────────────────
   Companion to /foundations-tts.js. Adds:
   - A "Read this lesson" button injected at the top of each lesson panel
   - A floating mini-controls bar (pause / stop / speed) while reading
   - Per-sentence highlighting that follows the spoken text

   Independent of /foundations-a11y.* — they coexist without conflict.
═══════════════════════════════════════════════════════════════════════ */

/* ── Top-of-lesson "Read this lesson" button ──────────────────────── */
.tts-launch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin: 8px 0 18px;
  background: linear-gradient(135deg, #2a9d8f 0%, #1f6f64 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(42,157,143,0.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tts-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(42,157,143,0.4);
}
.tts-launch:focus-visible {
  outline: 3px solid #c49a2e;
  outline-offset: 3px;
}
.tts-launch[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.tts-launch-icon { font-size: 16px; line-height: 1; }
.tts-launch-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: 4px;
}

/* ── Currently-spoken sentence highlight ──────────────────────────── */
.tts-current {
  background: rgba(255, 220, 90, 0.55);
  color: #0a0a0a;
  box-shadow: 0 0 0 2px rgba(255, 220, 90, 0.7);
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background-color .2s ease;
  scroll-margin-top: 100px;  /* keeps it below sticky headers when scrolled into view */
}

/* ── Floating mini-controls (visible only while speaking) ─────────── */
.tts-controls {
  position: fixed;
  bottom: 80px;       /* sits above the a11y trigger button (which is at bottom: 20px) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9997;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #2a9d8f;
  border-radius: 100px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  font-family: system-ui, -apple-system, sans-serif;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: center;
}
.tts-controls.open { display: inline-flex; }

.tts-ctrl-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.tts-ctrl-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
}
.tts-ctrl-btn:focus-visible {
  outline: 2px solid #c49a2e;
  outline-offset: 2px;
}

.tts-ctrl-speed,
.tts-ctrl-voice {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  max-width: 160px;
}
.tts-ctrl-speed:focus-visible,
.tts-ctrl-voice:focus-visible {
  outline: 2px solid #c49a2e;
  outline-offset: 2px;
}

.tts-ctrl-status {
  font-size: 11px;
  letter-spacing: 0.5px;
  opacity: 0.75;
  margin: 0 6px;
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tts-launch,
  .tts-ctrl-btn,
  .tts-current {
    transition: none !important;
  }
  .tts-launch:hover { transform: none; }
}

/* Mobile — keep controls reachable */
@media (max-width: 480px) {
  .tts-controls {
    bottom: 72px;
    gap: 6px;
    padding: 8px 12px;
  }
  .tts-ctrl-btn { width: 32px; height: 32px; }
  .tts-launch { width: 100%; justify-content: center; }
}