/* ============================================================================
   RHP READ-ALOUD — on-page text-to-speech for low-vision / non-SR users.
   Injected into the accessibility console by read-aloud.js. Uses the browser's
   built-in SpeechSynthesis (local, no network, no data leaves the device).
   ========================================================================== */

.rhp-read-section {
  background: rgba(201, 168, 76, 0.07);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  margin: 0 0 0.85rem;
}
.rhp-read-label {
  margin: 0 0 0.5rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: calc(0.92rem * var(--font-scale, 1));
  color: var(--gold-light, #e8c97a);
}
.rhp-read-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.rhp-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: rgba(7, 24, 40, 0.6);
  color: var(--ice, #e8f3ff);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: calc(0.9rem * var(--font-scale, 1));
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
}
.rhp-read-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.rhp-read-btn:hover { background: rgba(201, 168, 76, 0.16); border-color: var(--gold, #c9a84c); }
.rhp-read-btn:active { transform: translateY(1px); }
.rhp-read-btn:focus-visible { outline: 2px solid var(--gold, #c9a84c); outline-offset: 2px; }
.rhp-read-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.rhp-read-play { border-color: rgba(201, 168, 76, 0.6); background: rgba(201, 168, 76, 0.14); }

.rhp-read-rate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-size: calc(0.82rem * var(--font-scale, 1));
  color: var(--muted, #9db8d4);
}
.rhp-read-rate input { flex: 1 1 auto; min-width: 80px; accent-color: var(--gold, #c9a84c); height: 22px; }
.rhp-read-status {
  margin: 0.5rem 0 0;
  font-size: calc(0.8rem * var(--font-scale, 1));
  color: var(--muted, #9db8d4);
  min-height: 1em;
}

/* The element currently being spoken — high-visibility highlight */
.rhp-reading-active {
  background: rgba(201, 168, 76, 0.18) !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.55), 0 0 18px rgba(201, 168, 76, 0.25);
  border-radius: 4px;
  scroll-margin-top: 96px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rhp-read-btn, .rhp-reading-active { transition: none; }
}