/* Compact narrator rows shared by the drawing step and listening page. */
.narrator-page { padding-block: var(--section-space); }
.narrator-intro { max-width: 760px; margin-bottom: 30px; }
.narrator-intro h1 { font-size: var(--text-h2); }
.narrator-intro p { margin-top: 16px; color: var(--color-muted); }
.narrator-list { display: grid; gap: 12px; max-width: 520px; }
.narrator-card { display: flex; align-items: center; min-width: 0; border: 1px solid var(--order-card-edge); border-radius: var(--radius-box); background: var(--order-card-fill); color: var(--color-ink); }
.narrator-card:has(input:checked) { border-color: var(--color-accent); background: var(--color-soft); color: var(--color-accent); }
.narrator-play { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin-left: 10px; padding: 0; border-radius: 50%; background: none; color: inherit; font-size: var(--text-400); }
.narrator-play:disabled { color: var(--color-muted); opacity: .45; cursor: default; }
.narrator-choice { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 1; min-width: 0; padding: 20px 22px 20px 12px; font-size: var(--text-400); font-weight: var(--weight-semibold); cursor: pointer; }
.narrator-name { flex: 1; min-width: 0; text-align: left; }
.narrator-equalizer { display: flex; align-items: center; justify-content: center; gap: 2px; width: 18px; height: 22px; flex-shrink: 0; visibility: hidden; }
.narrator-equalizer i { display: block; width: 3px; height: 100%; border-radius: var(--radius-pill); background: currentColor; transform: scaleY(.25); animation: narrator-level .75s ease-in-out infinite alternate; animation-play-state: paused; }
.narrator-equalizer i:nth-child(2) { animation-duration: .48s; animation-delay: -.3s; }
.narrator-equalizer i:nth-child(3) { animation-duration: .62s; animation-delay: -.5s; }
.narrator-equalizer i:nth-child(4) { animation-duration: .54s; animation-delay: -.2s; }
.narrator-card.is-playing .narrator-equalizer { visibility: visible; }
.narrator-card.is-playing .narrator-equalizer i { animation-play-state: running; }
.narrator-choice input { appearance: none; width: 16px; height: 16px; margin: 0; border: 2px solid var(--color-line); border-radius: 50%; flex-shrink: 0; cursor: pointer; }
.narrator-choice input:checked { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 3px var(--color-soft); }
.narrator-choice input:focus-visible, .narrator-play:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.narrator-card [hidden] { display: none; }
.narrator-note { margin-top: 20px; max-width: 520px; font-size: var(--text-200); line-height: var(--leading-snug); color: var(--color-muted); }
.narrator-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.narrator-feedback { font-size: var(--text-300); color: var(--color-accent); }
.narrator-page .primary[aria-disabled=true] { opacity: .6; cursor: not-allowed; }

@keyframes narrator-level { from { transform: scaleY(.2); } to { transform: scaleY(.95); } }
@media (prefers-reduced-motion: reduce) {
  .narrator-equalizer i { animation: none; transform: scaleY(.45); }
  .narrator-equalizer i:nth-child(2n) { transform: scaleY(.8); }
}
@media (max-width: 700px) {
  .narrator-choice { gap: 8px; padding: 18px 12px 18px 6px; font-size: var(--text-300); }
  .narrator-play { width: 34px; height: 40px; margin-left: 6px; }
}