/* Stickwise tools: metronome, drum machine, groove library, MIDI monitor. Colours only from style.css tokens. */

/* metronome */
.dr-met { align-items: stretch; }
.dr-met-display { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dr-bpm { font-variant-numeric: tabular-nums; }
.dr-met-tempo { flex-wrap: nowrap; }
.dr-met-tempo input[type="range"] { flex: 1; min-width: 0; }

/* drum machine */
.dr-dm { gap: 14px; }
.dr-dm-shape { gap: 12px 20px; align-items: end; }
.dr-dm-grid .dr-grid { min-width: 520px; }
@media (max-width: 600px) { .dr-dm-grid .dr-grid { min-width: 600px; } }

/* groove library */
.dr-lib-detail { scroll-margin-top: 80px; }
.dr-lib-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.dr-lib-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; min-width: 0;
  font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; transition: border-color .15s;
}
.dr-lib-card b { font-weight: 650; }
.dr-lib-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.dr-lib-card.on { border-color: var(--accent); background: var(--accent-soft); }

/* MIDI monitor */
.dr-kitcheck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.dr-kc { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface); }
.dr-kc span { color: var(--muted); }
.dr-kc.ok { border-style: solid; border-color: var(--good); background: var(--good-soft); }
.dr-kc.ok b::after { content: ' ✓'; color: var(--good); }
.dr-vel-meter { width: 200px; max-width: 60vw; }
.dr-table td, .dr-table th { white-space: nowrap; }