/* rack — step sequencer / channel rack (src/ui/views/rack.js) */
.rack-view { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); --rack-step-w: 26px; --rack-head-w: 250px; --rack-row-h: 30px; }
.rack-toolbar { gap: 5px; }
.rack-group { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rack-toolbar select { height: 24px; font-size: 12px; }
.rack-toolbar .btn.small { height: 24px; }
.rack-track-label { font-weight: 600; font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rack-pat-sel { max-width: 140px; }
.rack-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); }
.rack-mini .numfield { height: 24px; font-size: 12px; }
.rack-banner { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; color: var(--text); background: color-mix(in srgb, var(--warn) 18%, var(--bg-2)); border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); flex-shrink: 0; }
.rack-banner .icon { color: var(--warn); }

.rack-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; padding-bottom: 24px; }
.rack-scroll.hidden { display: none; }
.rack-list { display: flex; flex-direction: column; width: max-content; min-width: 100%; }

/* rows */
.rack-row, .rack-ruler { display: flex; align-items: stretch; width: max-content; min-width: 100%; }
.rack-row { height: var(--rack-row-h); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.rack-head {
  position: sticky; left: 0; z-index: 2; width: var(--rack-head-w); flex-shrink: 0;
  display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; background: var(--bg-2);
  border-right: 1px solid var(--line); box-shadow: 4px 0 8px -6px rgba(0,0,0,.5);
}
.rack-row.selected .rack-head { background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--bg-2)); }
.rack-row.focused .rack-head { box-shadow: inset 2px 0 0 var(--accent-2), 4px 0 8px -6px rgba(0,0,0,.5); }
.rack-row.focused .rack-steps { background: color-mix(in srgb, var(--accent-2) 5%, transparent); }
.rack-swatch { width: 5px; align-self: stretch; background: var(--c, var(--accent)); flex-shrink: 0; }
.rack-indent { width: 16px; flex-shrink: 0; align-self: stretch; border-right: 1px dashed color-mix(in srgb, var(--c) 40%, transparent); margin-right: 4px; }
.rack-pad-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); flex-shrink: 0; opacity: .8; }
.rack-name {
  flex: 1; min-width: 0; height: 22px; text-align: left; padding: 0 6px; border-radius: 4px; border: 1px solid transparent;
  background: transparent; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text);
}
.rack-name:hover { background: var(--bg-4); border-color: var(--line); }
.rack-name:active { background: color-mix(in srgb, var(--c) 35%, var(--bg-4)); }
.rack-head .toggle { height: 20px; width: 20px; padding: 0; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.rack-head .knob.rack-vol { width: 24px; flex-shrink: 0; cursor: ns-resize; }
.rack-head .knob.rack-vol .knob-arc { stroke: var(--c, var(--accent-2)); }
.rack-head .icon-btn { width: 22px; height: 22px; flex-shrink: 0; }
.rack-head .rack-pitch { height: 20px; font-size: 11px; padding: 0 2px; width: 54px; flex-shrink: 0; }
.rack-chev { margin-left: 2px; }

/* drum group header */
.rack-row.head { height: 32px; background: var(--bg-2); border-top: 1px solid var(--line); }
.rack-row.head .rack-name { font-weight: 600; }
.rack-row.head .rack-head { background: var(--bg-3); }
.rack-head-steps { display: flex; align-items: center; }
.rack-head-info { position: sticky; left: var(--rack-head-w); display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11px; white-space: nowrap; }
.rack-head-info .btn.small { height: 22px; }
.rack-head-pat { height: 22px; font-size: 11px; max-width: 140px; }

/* steps */
.rack-steps { display: flex; align-items: center; padding: 0 8px; gap: 2px; }
.rack-step {
  position: relative; width: var(--rack-step-w); height: calc(var(--rack-row-h) - 8px); flex-shrink: 0; padding: 0;
  border-radius: 4px; border: 1px solid var(--line); background: var(--bg-3); cursor: pointer; overflow: hidden;
  transition: background .06s, border-color .06s;
}
.rack-step.alt { background: var(--bg-4); }
.rack-step.beat-start { margin-left: 4px; }
.rack-step:first-child { margin-left: 0; }
.rack-step:hover { border-color: var(--c, var(--accent)); }
.rack-step-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--c, var(--accent)); pointer-events: none; }
.rack-step.on { border-color: color-mix(in srgb, var(--c) 70%, #000); background: color-mix(in srgb, var(--c) 22%, var(--bg-3)); }
.rack-step.on.accent { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, #fff); }
.rack-step.on.ghost .rack-step-fill { background: repeating-linear-gradient(135deg, var(--c), var(--c) 3px, transparent 3px, transparent 5px); }
.rack-step-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; font-family: var(--mono); letter-spacing: -.02em; }
.rack-step.playing { outline: 2px solid var(--accent-2); outline-offset: -1px; }
.rack-step.playing:not(.on) { background: color-mix(in srgb, var(--accent-2) 25%, var(--bg-3)); }
.rack-step.on.playing .rack-step-fill { filter: brightness(1.35); }

/* ruler */
.rack-ruler { position: sticky; top: 0; z-index: 3; height: 24px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.rack-ruler .rack-head { background: var(--bg-2); font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; padding-left: 10px; gap: 8px; z-index: 4; }
.rack-ruler-hint { text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; opacity: .8; }
.rack-ruler .rack-steps { align-items: flex-end; }
.rack-ruler-cell { width: var(--rack-step-w); flex-shrink: 0; font-size: 10px; color: var(--text-3); font-family: var(--mono); padding: 0 0 3px 2px; border-left: 1px solid transparent; line-height: 1; }
.rack-ruler-cell.beat { border-left-color: var(--line-2); margin-left: 4px; }
.rack-ruler-cell:first-child { margin-left: 0; }
.rack-ruler-cell.bar { color: var(--text); font-weight: 600; border-left-color: var(--text-3); }

.rack-empty { flex: 1; display: flex; min-height: 0; overflow: auto; }
.rack-empty.hidden { display: none; }
.rack-empty .empty-state p { margin: 0; line-height: 1.5; }
.rack-empty .empty-state > .icon { color: var(--accent-3); }

:root[data-theme="light"] .rack-step { background: var(--bg-2); }
:root[data-theme="light"] .rack-step.alt { background: var(--bg-3); }
:root[data-theme="light"] .rack-step.on { background: color-mix(in srgb, var(--c) 25%, #fff); }
.rack-empty .btn:not(.primary) { color: var(--text); }