/* Quiet Stanza — the reader and the voice.
   The transport, the preparing bar, holding at a breath, and the hands-free guide. */

.reader-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.reader-status { margin: 10px 0 0; min-height: 1.2em; }
.reader-error { color: var(--wax); margin: 6px 0 0; }
.reader-preparing { width: 100%; max-width: 420px; }
.reader-preparing .reader-progress { margin-top: 8px; max-width: none; }
.reader-transport {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--sheet-edge); background: var(--sheet);
  color: var(--text-primary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.reader-transport:hover { border-color: var(--text-secondary); }
.reader-transport.is-paused { border-color: var(--wax); color: var(--wax); }
/* Listen is holding at a breath and waits for the listener: the play mark breathes, a ring
   ripples out from it, and "Carry on" sits beside it, so it is plain something is wanted. */
.reader-transport.is-waiting {
  border-color: var(--laurel); color: var(--laurel); position: relative;
  animation: sitting-play-pulse 1.8s ease-in-out infinite;
}
.reader-transport.is-waiting::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 2px solid var(--laurel); opacity: 0; pointer-events: none;
  animation: reader-wait-ring 1.8s ease-out infinite;
}
@keyframes reader-wait-ring {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}
.reader-carry-on {
  font: 600 14px var(--ui); color: var(--laurel); background: none; border: none;
  padding: 6px 4px; cursor: pointer; animation: reader-wait-fade 1.8s ease-in-out infinite;
}
.reader-carry-on:hover { text-decoration: underline; }
@keyframes reader-wait-fade { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .reader-transport.is-waiting, .reader-carry-on { animation: none; }
  .reader-transport.is-waiting::after { animation: none; opacity: .5; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .reader-progress .progress-fill { transition: none; }
}
.voice-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.voice-status { margin: 8px 0 0; min-height: 1.2em; }
/* the hands-free guide: a quiet pull-out under the voice control */
.voice-guide { margin: 6px 0 0; max-width: 34rem; }
.voice-guide > summary {
  cursor: pointer; font-family: var(--serif); font-size: 15px; color: var(--text-primary);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--text-secondary) 55%, transparent);
  list-style: none;
}
.voice-guide > summary::-webkit-details-marker { display: none; }
.voice-guide > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--text-secondary); }
.voice-guide[open] > summary::before { content: "▾"; }
.voice-guide > summary:hover { color: var(--wax); }
.voice-guide > summary:focus-visible { outline: 2px solid var(--laurel); outline-offset: 3px; border-radius: 2px; }
.voice-guide-list { margin: 10px 0 6px; padding: 0; }
.voice-guide-list > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); column-gap: 10px; padding: 3px 0; }
.voice-guide-list dt { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--text-primary); }
.voice-guide-list dd { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }
.voice-guide .small { margin: 6px 0 0; }
.voice-heard { font-family: var(--serif); font-style: italic; color: var(--wax); }