/* Transient's controls, for its own page and the all-instruments page. */
/* The instrument's knobs and the kit's beside them on one row, wrapping
   only when there isn't room, as on a phone with a five-knob drum. */
.kit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 12px; padding: 16px; margin-bottom: 24px; }
.kit h2 { margin-bottom: 8px; }
.knobs { display: flex; flex-wrap: wrap; gap: 8px 4px; }
[data-ref="voice-name"] { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; margin-left: 6px; }

.seq { padding: 16px; }
.seq-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.seq-top h2 { margin: 0 8px 0 0; }
.seq-top label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.seq-top input[type=range] { width: 110px; accent-color: var(--accent); }
.seq-top output { font: 12px var(--mono); color: var(--text); min-width: 34px; }
.seq-top .spacer { flex: 1; }

/* The grid scrolls sideways inside its panel on a narrow screen, never the page. */
.grid-wrap { overflow-x: auto; padding-bottom: 4px; }
[data-ref="grid"] { display: grid; grid-template-columns: 132px repeat(16, minmax(28px, 1fr)); gap: 4px; min-width: 600px; }
.row-name { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 4px 8px; text-align: left; font-size: 12px; }
.row-name b { font: 600 12px var(--mono); min-width: 22px; }
.row-name span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-name.accent-row { cursor: default; background: none; border-color: transparent; }
.cell { user-select: none; -webkit-user-select: none; padding: 0; height: 30px; border-radius: 6px; background: var(--bg); }
.cell.alt { background: color-mix(in srgb, var(--bg) 70%, var(--line)); }
.cell[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.cell.accent-row[aria-pressed="true"] { background: var(--text); border-color: var(--text); }
.cell.now { outline: 2px solid var(--text); outline-offset: -2px; }
.cell.now[aria-pressed="true"] { outline-color: var(--panel); }
@media (max-width: 600px) {
  [data-ref="grid"] { grid-template-columns: 44px repeat(16, minmax(26px, 1fr)); min-width: 520px; }
  .row-name span { display: none; }
}