/* The recitation recorder (assets/recitation.js), on the homepage questionnaire and the 1-to-1 assessment.
   data-state on .recite shows one part at a time: empty, recording or done. */
.recite { display: grid; gap: 8px; }
.recite .recite-hint { margin: 0; color: #cfc6b4; font-size: .9rem; line-height: 1.5; }
.recite .recite-hint strong { color: #f1d9a0; font-weight: 600; }
.recite .recite-start, .recite .recite-live, .recite .recite-done { display: none; }
.recite[data-state="empty"] .recite-start { display: flex; }
.recite[data-state="recording"] .recite-live { display: flex; }
.recite[data-state="done"] .recite-done { display: block; }
.recite .recite-start { gap: 10px; flex-wrap: wrap; }
.recite .recite-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: 1 1 150px; min-height: 46px;
  margin: 0; padding: 10px 16px; border: 1px solid rgba(215, 181, 109, .55); border-radius: 7px; background: #15110b; color: #f1d9a0;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.recite .recite-btn:hover { border-color: #d7b56d; }
.recite .recite-btn:focus-visible { outline: 2px solid #d7b56d; outline-offset: 2px; }
.recite .recite-record { background: linear-gradient(135deg, #e2c47f, #b98f44); border-color: transparent; color: #15110b; }
.recite .recite-file { display: none !important; }
.recite .recite-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #c0392b; }
.recite .recite-record .recite-dot { background: #7d1a10; }
.recite .recite-live { align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #494131; border-radius: 7px; background: #0b0b09; }
.recite .recite-clock { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.recite .recite-note { flex: 1 1 120px; color: #a99f8c; font-size: .82rem; }
.recite .recite-live .recite-btn { flex: 0 0 auto; min-height: 40px; padding: 7px 16px; }
.recite .recite-done audio { display: block; width: 100%; height: 44px; }
.recite .recite-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; color: #cfc6b4; font-size: .85rem; }
.recite .recite-link { appearance: none; padding: 6px 0; border: 0; background: none; color: #d7b56d; font: inherit; text-decoration: underline; cursor: pointer; }
.recite .recite-error { margin: 2px 0 0; color: #ff7777; font-size: .82rem; font-weight: 650; line-height: 1.45; }
.recite .recite-error[hidden] { display: none; }
.recite .recite-privacy { margin: 2px 0 0; color: #918a7c; font-size: .8rem; }
@media (prefers-reduced-motion: no-preference) { .recite .recite-live .recite-dot { animation: recite-pulse 1.2s ease-in-out infinite; } }
@keyframes recite-pulse { 50% { opacity: .3; } }