/* «Запись с диктофона» (js/dictaphone.js): the dialog frame is «Написать в чат пары» (.pc in css/pair-chat.css). */

.dp-lead { margin: 0; color: var(--text-2); }
.dp-steps { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; counter-reset: dp; }
.dp-steps li { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--s-3); counter-increment: dp; }
.dp-steps li::before {
  content: counter(dp);
  grid-row: span 2;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  font-weight: 700; font-size: var(--fs-14);
}
.dp-steps b { font-weight: 700; }
.dp-steps span { color: var(--text-2); font-size: var(--fs-14); line-height: 1.45; }
.dp-how summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
.dp-how[open] summary { margin-bottom: var(--s-3); }
.dp-body { display: grid; gap: var(--s-3); }
.dp-body:empty { display: none; }
.dp-pick { justify-self: start; cursor: pointer; }
.dp-note { margin: 0; color: var(--text-3); font-size: var(--fs-14); }
.dp-state { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; font-weight: 600; }
.dp-state .icon { flex: none; margin-top: 2px; }
.dp-state.is-ok { color: var(--success); }
.dp-state.is-bad { color: var(--danger); font-weight: 500; }
.dp-progress { display: grid; gap: var(--s-2); }
.dp-progress__bar { height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.dp-progress__bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.dp-verdict { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-2); }
.dp-verdict p { margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.dp-verdict .dp-verdict__head { font-weight: 700; color: var(--text); }
.dp-verdict.is-good { background: var(--success-soft); }
.dp-verdict.is-weak { background: var(--warning-soft); }
.dp-verdict.is-empty { background: var(--warning-soft); }