/* playlist.css — pattern arranger: toolbar + clip cells + loop region. */

.pl-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.05));
  border: 1px solid #050B10;
  border-radius: 6px 6px 0 0;
  flex-wrap: wrap;
}
.pl-name {
  flex: 0 1 160px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--bg-deep);
  color: var(--text);
  font-size: 11px;
}
.pl-name:focus { outline: 1px solid var(--accent-bright); }
.pl-count { font-size: 11px; color: var(--text-dim); }

.pl-strip {
  padding: 10px 8px;
  background: var(--panel-3);
  border: 1px solid #050B10;
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow-x: auto;
}
.pl-cells {
  position: relative;
  display: flex;
  min-width: max-content;
}
.pl-cell {
  position: relative;
  height: 52px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-left: none;
  background: linear-gradient(180deg, #163E4E, #102F3D);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.pl-cell:first-child { border-left: 1px solid rgba(0, 0, 0, 0.5); border-radius: 4px 0 0 4px; }
.pl-cell:last-child { border-radius: 0 4px 4px 0; }
.pl-cell:hover { background: linear-gradient(180deg, #1B4A5C, #163E4E); }
.pl-cell.beyond { opacity: 0.4; }
.pl-cell.dragging { opacity: 0.4; }
.pl-cell.drop-target { box-shadow: inset 0 0 0 2px var(--accent-bright); }
.pl-cell.playing {
  box-shadow: 0 0 0 2px var(--accent-bright), inset 0 0 10px rgba(217, 155, 127, 0.3);
  z-index: 2;
}

.pl-cell-num { font-size: 9px; color: var(--text-faint); }
.pl-cell-val { font-size: 11px; font-weight: 700; color: var(--text-dim); }
.pl-cell-val.assigned { color: var(--accent-bright); }

/* Loop region overlay */
.pl-loop-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(79, 143, 147, 0.18);
  border: 1px solid rgba(79, 143, 147, 0.6);
  pointer-events: none;
  display: none;
}
.pl-loop-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--track-2);
  cursor: ew-resize;
  display: none;
  box-shadow: 0 0 6px rgba(79, 143, 147, 0.7);
  z-index: 3;
}