/* Chord & scale drills (/learn/akkord-mesq). Builds on akkordlar.css (keys, chips) + akkordkurs.css (lesson layout). */
.drills { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .drills { grid-template-columns: 1fr 1fr; } }
.drill { padding: 14px 16px; border: 1px solid var(--line); box-shadow: none; display: grid; align-content: start; }
.dr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drill h2 { font-size: 1.1rem; }
.dr-text { margin-top: 4px; font-size: 0.86rem; color: var(--ink-2); }
.drill .lbl { margin-top: 10px; }
.drill .m-chip { min-width: 40px; }
.dr-lvl { margin-top: 8px; font-size: 0.82rem; font-weight: 800; color: var(--ink); }
.dr-lvl span { font-weight: 700; color: var(--muted); }
.dr-go { margin-top: 12px; min-height: 46px; }
.st-stars { color: var(--gold); letter-spacing: 1px; }
.st-stars .off, .stars .off { color: var(--line); }
.q-right { font-weight: 900; color: var(--ok); white-space: nowrap; }
.q-big { margin-top: 18px; text-align: center; font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--ink); }
.q-sub { margin-top: 6px; text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); }
.mesq .q-ask { text-align: center; }
.opts.three { grid-template-columns: 1fr 1fr 1fr; }
.kbd .lit rect { fill: var(--accent); }
.kbd .kb.lit rect { fill: var(--accent-ink); }
.task-btns [hidden], #next[hidden] { display: none; }
#next-bar:has(#next[hidden]) { display: none; }
#q-view { padding-bottom: 90px; }
#res-view { text-align: center; padding-top: 24px; }
.stars { font-size: 2.2rem; letter-spacing: 4px; color: var(--gold); }
#res-view h1 { outline: none; }
.res-score { margin-top: 4px; font-size: 1.1rem; font-weight: 800; color: var(--ink-2); }
.res-line { margin-top: 6px; color: var(--muted); }
.task-btns { flex-wrap: wrap; }
.task-btns .btn { min-width: 0; white-space: normal; flex: 1 1 140px; }