/* Stickwise: pads, step grid, drum staff, sticking rows, beat lights. Colours only from style.css tokens. */

/* `hidden` must beat display rules on our own components. */
[class^="dr-"][hidden], [class*=" dr-"][hidden], .btn[hidden], .field[hidden], .check[hidden], .row[hidden] { display: none !important; }

/* ---------- pads ---------- */
.dr-pads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 92px), 1fr)); gap: 8px; touch-action: manipulation; }
.dr-pads.kit {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "crash tom1 tom2 ride"
    "hatOpen hat snare tom3"
    "hatFoot kick kick tom3";
}
.dr-pads.kit .dr-pad-crash { grid-area: crash; }
.dr-pads.kit .dr-pad-tom1 { grid-area: tom1; }
.dr-pads.kit .dr-pad-tom2 { grid-area: tom2; }
.dr-pads.kit .dr-pad-ride { grid-area: ride; }
.dr-pads.kit .dr-pad-hatOpen { grid-area: hatOpen; }
.dr-pads.kit .dr-pad-hat { grid-area: hat; }
.dr-pads.kit .dr-pad-snare { grid-area: snare; }
.dr-pads.kit .dr-pad-tom3 { grid-area: tom3; }
.dr-pads.kit .dr-pad-hatFoot { grid-area: hatFoot; }
.dr-pads.kit .dr-pad-kick { grid-area: kick; }

.dr-pad {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 72px; min-width: 0; padding: 8px 6px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  font: inherit; color: var(--fg); background: var(--surface-2); border: 2px solid var(--line); border-radius: 16px;
  transition: border-color .12s, background .12s, transform .06s;
}
.dr-pad b { font: 700 14px/1.15 var(--font-body); text-align: center; overflow-wrap: anywhere; }
.dr-pad kbd { font-size: 11px; }
.dr-pad:hover { border-color: var(--muted); }
.dr-pad:active { transform: scale(0.97); }
.dr-pad-crash, .dr-pad-ride, .dr-pad-hat, .dr-pad-hatOpen, .dr-pad-hatFoot {
  border-radius: 999px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface-2));
}
.dr-pad-kick { min-height: 84px; border-radius: 50% / 40%; }
.dr-pad-snare { border-color: color-mix(in srgb, var(--fg) 30%, var(--line)); }
.dr-pads.compact .dr-pad { min-height: 54px; padding: 6px 4px; }
.dr-pads.compact .dr-pad-kick { min-height: 60px; }
.dr-pads.compact .dr-pad b { font-size: 12.5px; }
.dr-pad.hit { animation: dr-hit .28s ease-out; }
.dr-pad.good { animation: dr-hit-good .4s ease-out; }
.dr-pad.bad { animation: dr-hit-bad .4s ease-out; }
.dr-pad.target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@keyframes dr-hit { from { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } }
@keyframes dr-hit-good { from { background: var(--good-soft); border-color: var(--good); } }
@keyframes dr-hit-bad { from { background: var(--bad-soft); border-color: var(--bad); } }
@media (max-width: 420px) {
  .dr-pad { min-height: 60px; border-radius: 12px; }
  .dr-pad b { font-size: 12px; }
  .dr-pad kbd { display: none; }
}
@media (hover: none) { .dr-pad kbd { display: none; } }

.dr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; line-height: 1.9; }
.dr-legend-title { font-weight: 600; }
.dr-legend-item { white-space: nowrap; }
.dr-legend-item kbd { margin-right: 2px; }
@media (hover: none) { .dr-legend { display: none; } }

.dr-mic { display: flex; flex-direction: column; gap: 8px; }
.dr-mic-meter { width: 120px; }
.dr-mic-meter > i { background: var(--cool); transition: width .05s linear; }
.dr-mic-sens input { min-width: 120px; }

/* ---------- step grid ---------- */
.dr-view { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dr-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; }
.dr-grid { display: grid; gap: 3px; align-items: center; min-width: min-content; }
.dr-grid-corner { min-height: 1px; }
.dr-row-label {
  font: 600 11.5px/1.1 var(--font-body); color: var(--muted); padding-right: 6px; white-space: nowrap;
  position: sticky; left: 0; background: var(--surface); z-index: 1;
}
button.dr-row-label { border: 0; text-align: left; cursor: pointer; min-height: 30px; border-radius: 6px; }
button.dr-row-label:hover { color: var(--fg); background: var(--surface-2); }
.dr-count { font: 500 10px var(--font-mono); color: var(--muted); text-align: center; }
.dr-count.beat { color: var(--fg); font-weight: 700; }
.dr-cell {
  display: block; height: 24px; min-width: 0; border-radius: 4px; padding: 0;
  background: var(--surface-2); border: 1px solid var(--line);
}
.dr-cell.beat { border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); }
.dr-count.bar, .dr-cell.bar { margin-left: 6px; }
.dr-cell.on { background: var(--fg); border-color: var(--fg); }
.dr-cell.on.v-acc { background: var(--accent); border-color: var(--accent); }
.dr-cell.on.v-ghost { background: color-mix(in srgb, var(--fg) 30%, var(--surface-2)); border-color: color-mix(in srgb, var(--fg) 40%, var(--line)); }
.dr-cell.now { outline: 2px solid var(--accent); outline-offset: 1px; }
.dr-count.now { color: var(--accent); }
.dr-cell.good { background: var(--good); border-color: var(--good); }
.dr-cell.ok { background: var(--cool); border-color: var(--cool); }
.dr-cell.bad { background: var(--bad); border-color: var(--bad); }
.dr-cell.miss { background: var(--bad-soft); border: 2px dashed var(--bad); }
.dr-grid.editable .dr-cell { height: 30px; cursor: pointer; }
.dr-grid.editable .dr-cell:hover { border-color: var(--accent); }
.dr-grid.editable .dr-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- staff ---------- */
.dr-staff-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--surface); border-radius: 8px; }
.dr-staff { display: block; width: 100%; height: auto; }
.dr-line { stroke: var(--muted); stroke-width: 1; opacity: 0.7; }
.dr-ledger { stroke: var(--fg); stroke-width: 1.2; }
.dr-barline { stroke: var(--fg); stroke-width: 1.2; }
.dr-barline.end { stroke-width: 3; }
.dr-clef { fill: var(--fg); }
.dr-timesig { font: 800 19px var(--font-display); fill: var(--fg); text-anchor: middle; }
.dr-dot { fill: var(--fg); }
.dr-x { stroke: var(--fg); stroke-width: 1.7; fill: none; stroke-linecap: round; }
.dr-ring { fill: none; stroke: var(--fg); stroke-width: 1.1; }
.dr-head.v-ghost { opacity: 0.75; }
.dr-paren { font: 500 12px var(--font-body); fill: var(--muted); }
.dr-stem { stroke: var(--fg); stroke-width: 1.3; }
.dr-beam { fill: var(--fg); }
.dr-flag { fill: none; stroke: var(--fg); stroke-width: 1.6; }
.dr-rest { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dr-rest-dot, .dr-dotmark { fill: var(--fg); }
.dr-accent { font: 700 12px var(--font-body); fill: var(--accent); text-anchor: middle; }
.dr-open { font: 600 11px var(--font-body); fill: var(--muted); text-anchor: middle; }
.dr-tuplet { font: 600 11px var(--font-mono); fill: var(--muted); text-anchor: middle; }
.dr-staff-head { fill: var(--accent-soft); }
.dr-key-label { font: 600 10px var(--font-mono); fill: var(--muted); text-anchor: middle; }

/* ---------- groove box (player figure) ---------- */
.dr-box .controls { align-items: end; }
.dr-box-desc:empty { display: none; }
.dr-tempo .row { gap: 8px; flex-wrap: nowrap; }
.dr-tempo input[type="range"] { min-width: 120px; flex: 1; }
.dr-tempo output { min-width: 64px; color: var(--fg); font-size: 13px; }
.dr-pick { gap: 6px; }

/* ---------- sticking ---------- */
.dr-sticking-box { display: flex; flex-direction: column; gap: 12px; }
.dr-sticking { display: flex; flex-wrap: wrap; gap: 4px; }
.dr-stick {
  display: flex; flex-direction: column; align-items: center; min-width: 34px; padding: 2px 6px 6px;
  border-radius: 8px; background: var(--surface-2); border: 1px solid transparent;
}
.dr-stick.beat { border-left-color: var(--muted); }
.dr-stick small { font: 700 12px var(--font-body); color: var(--accent); line-height: 1.2; }
.dr-stick b { font: 800 20px/1 var(--font-display); }
.dr-stick sup { font: 600 11px var(--font-mono); color: var(--muted); margin-right: 1px; }
.dr-stick.acc b { color: var(--accent); }
.dr-stick.now { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--accent-soft); }
.dr-stick.good { background: var(--good-soft); }
.dr-stick.good b { color: var(--good); }
.dr-stick.ok { background: var(--cool-soft); }
.dr-stick.bad { background: var(--bad-soft); }
.dr-stick.bad b { color: var(--bad); }

/* ---------- beat lights ---------- */
.dr-lights { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dr-light {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  font: 600 14px var(--font-mono); color: var(--muted); background: var(--surface-2); border: 2px solid var(--line);
  transition: background .06s, transform .06s;
}
.dr-lights.big .dr-light { width: 46px; height: 46px; cursor: pointer; }
.dr-light.down, .dr-light.accent { border-color: var(--accent); color: var(--accent); }
.dr-light.group { border-color: var(--cool); }
.dr-light.mute { border-style: dashed; opacity: 0.45; }
.dr-light.on { background: var(--fg); color: var(--bg); transform: scale(1.08); }
.dr-light.accent.on, .dr-light.down.on { background: var(--accent); color: var(--accent-ink); }
.dr-light.mute.on { background: var(--surface-2); color: var(--muted); }

/* ---------- mini grid (library cards) ---------- */
.dr-mini { display: grid; gap: 1px; width: 100%; margin-top: 4px; }
.dr-mini i { display: block; height: 4px; border-radius: 1px; background: var(--line); }
.dr-mini i.on { background: var(--fg); }

/* ---------- genre pages: how to play it on drums ---------- */
.gn-dr h3 { margin-top: 8px; }
.gn-dr-limbs, .gn-dr-tips { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; max-width: 68ch; }
.gn-dr-limbs b { font-weight: 600; }
.gn-dr .dr-pick { gap: 6px; }
.gn-dr .dr-pick .btn { white-space: normal; text-align: left; }