/*
 * DrillQuestion: the prompt and its «گوش بده», then what the question shows (a staff on the surface, a listening wave,
 * the drawn choices), the buttons (a grid; seven names in a row of their own; the sign pad above the names), and the
 * answer's line with «سؤال بعد». A button answers on press; a right one turns green with a check, a wrong one red.
 */

.dq { display: grid; gap: 14px; }
.dq-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dq-ask { flex: 1 1 18rem; min-height: calc(var(--lh-title-3) * 2); font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; text-wrap: balance; }
.dq-staff { display: grid; place-items: center; min-height: 150px; padding: 8px 16px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); }
.dq-staff svg { width: auto; max-width: 100%; height: 140px; }
.dq-staff .ev.miss .glyph, .dq-staff .ev.miss .stem { fill: var(--danger); stroke: var(--danger); }

/* a sound to hear: five bars that move while it plays */
.dq-ear { display: flex; align-items: center; justify-content: center; gap: 8px; height: 150px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); }
.dq-ear i { width: 10px; height: 28px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 35%, transparent); transition: height var(--d-default) var(--ease-out), background-color var(--d-default) ease; }
.dq-ear.on i { background: var(--accent); animation: dq-wave 0.9s var(--ease-out) infinite alternate; }
.dq-ear.on i:nth-child(2) { animation-delay: 0.12s; } .dq-ear.on i:nth-child(3) { animation-delay: 0.24s; } .dq-ear.on i:nth-child(4) { animation-delay: 0.36s; } .dq-ear.on i:nth-child(5) { animation-delay: 0.48s; }
@keyframes dq-wave { to { height: 76px; } }

/* a line or a stack named note by note: one chip a note, in the staff's order */
.dq-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dq-parts li { display: grid; place-items: center; min-width: 44px; height: 34px; padding-inline: 10px; border-radius: var(--radius-pill); border: 1px dashed var(--line-strong); color: var(--fg-muted); font-size: var(--text-footnote); font-weight: 800; }
.dq-parts li.now { border-style: solid; border-color: var(--accent); color: var(--accent-ink); }
.dq-parts li.ok { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--success-ink); }
.dq-parts li.no { border-style: solid; border-color: var(--danger); background: var(--danger-soft); color: var(--danger-ink); }

/* the buttons */
.dq-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.dq-opts.names { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.dq-opt, .dq-pick, .dq-sign { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding-inline: 12px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); color: var(--fg); font-size: var(--text-headline); font-weight: 800;
  transition: background-color var(--d-default) ease, border-color var(--d-default) ease, color var(--d-default) ease, opacity var(--d-default) ease, transform var(--d-press) var(--ease-out); }
.dq-opt:active:not(:disabled), .dq-pick:active:not(:disabled), .dq-sign:active:not(:disabled) { transform: scale(0.97); }
.dq-opt .i, .dq-pick .i { width: 18px; height: 18px; }
.dq-opt.right, .dq-pick.right { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.dq-opt.wrong, .dq-pick.wrong { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }
.dq-opt.off, .dq-pick.off { opacity: 0.45; }
.dq-pad { display: grid; gap: 10px; }
.dq-signs { display: flex; gap: 10px; }
.dq-sign { min-width: 96px; font-size: var(--text-callout); }
.dq-sign.on { background: var(--fg); border-color: var(--fg); color: var(--on-fg); }
.dq-drawn { display: grid; gap: 10px; }
@media (min-width: 640px) { .dq-drawn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dq-pick { flex-direction: column; min-height: 0; padding: 10px; }
.dq-pick .staff-box svg { display: block; width: 100%; height: auto; max-height: 96px; }
.dq-pick small { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-footnote); }
@media (hover: hover) and (pointer: fine) { .dq-opt:not(:disabled):not(.right):not(.wrong):hover, .dq-pick:not(:disabled):not(.right):not(.wrong):hover, .dq-sign:not(:disabled):hover { border-color: var(--line-strong); } }

/* the answer's line */
.dq-said { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 52px; padding: 10px 14px; border-radius: var(--radius-tile); background: var(--surface-muted); visibility: hidden; opacity: 0; transition: opacity var(--d-default) var(--ease-out); }
.dq-said.on { visibility: visible; opacity: 1; }
.dq.is-right .dq-said b { color: var(--success-ink); }
.dq.is-wrong .dq-said b { color: var(--danger-ink); }
.dq-why { display: grid; gap: 4px; flex: 1 1 18rem; color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.dq-said > b { font-size: var(--text-headline); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .dq-ear.on i { animation: none; height: 52px; } }