/* Reply drills (#replies, js/reply-drills.js). Tokens and shared classes from css/ui-kit.css only; logical properties for RTL. */
.rd-page { display: grid; gap: var(--sp-4); max-width: var(--content-max); margin-inline: auto; }
.rd-top h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-h1); color: var(--ink); }
.rd-top h1:focus { outline: none; }
.rd-top .lead { margin: 0; color: var(--ink-2); }
.rd-levels { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rd-levels .chip { min-block-size: 44px; min-inline-size: 52px; }
.rd-card { display: grid; gap: var(--sp-3); justify-items: start; }
.rd-card p { margin: 0; }
.rd-step { color: var(--muted); }
.rd-listen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.rd-line { color: var(--ink); font-size: var(--fs-h3, 1.25rem); unicode-bidi: plaintext; }
.rd-tr { color: var(--ink-2); unicode-bidi: plaintext; }
.rd-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); inline-size: 100%; }
.rd-opt { display: flex; align-items: center; gap: var(--sp-2); }
.rd-pick { flex: 1; text-align: start; unicode-bidi: plaintext; min-block-size: 48px; }
.rd-opt .speak { flex: none; }
:where(html:not(.a11y-contrast)) .rd-opt[data-state="right"] .rd-pick { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
:where(html:not(.a11y-contrast)) .rd-opt[data-state="wrong"] .rd-pick { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.rd-why { color: var(--ink-2); }
.rd-end { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (prefers-reduced-motion: no-preference) { .rd-opt .rd-pick { transition: background-color .15s, border-color .15s; } }