/* The effect editor, in its Tune and edit panel. Only used on v3 effects. The look lives in studio.css with the rest of
   the panel. This is what a part list and a timeline need in order to work at all. */
.el-add { display: flex; gap: 5px; margin-bottom: 7px; }
.el-add select { min-width: 0; flex: 1; }
.el-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }
.el-empty { font-size: 12px; line-height: 1.55; color: var(--muted); margin: 8px 0; }

/* Timeline */
.tl { --name: 118px; position: relative; border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px 8px; background: #161616; user-select: none; }
.tl-row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; gap: 6px; }
.tl-rows { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.tl-name { display: block; font-size: 12px; color: var(--muted); text-align: left; background: transparent; border: 0; border-radius: 3px; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
button.tl-name:hover { background: #212121; border: 0; color: var(--text); }
.tl-title { text-transform: uppercase; letter-spacing: 1px; font-size: 11px; color: #c1c1c1; }
.tl-row.selected .tl-name { color: var(--accent); }
.tl-row.off .tl-bar { opacity: 0.25; }
.tl-ruler { position: relative; height: 24px; border-bottom: 1px solid #323232; cursor: ew-resize; touch-action: none; }
.tl-tick { position: absolute; bottom: 2px; font: 11px ui-monospace, monospace; color: #b4b4b4; padding-left: 3px; border-left: 1px solid #323232; pointer-events: none; }
.tl-hit { position: absolute; top: 0; transform: translateX(-50%); padding: 0 5px; height: 14px; font-size: 11px; line-height: 12px; letter-spacing: 0.5px; color: #151515; background: var(--accent); border: 1px solid var(--accent); border-radius: 3px; cursor: ew-resize; touch-action: none; z-index: 3; }
.tl-hit:hover { background: #d4d4d4; }
.tl-track { position: relative; height: 18px; background: #111111; border-radius: 3px; cursor: ew-resize; touch-action: none; }
.tl-bar { position: absolute; top: 2px; bottom: 2px; min-width: 3px; border-radius: 2px; cursor: grab; touch-action: none; box-shadow: inset 0 0 0 1px #ffffff14; }
.tl-bar.dragging { cursor: grabbing; box-shadow: inset 0 0 0 1px #ffffff80; }
.tl-bar.locked { cursor: default; background-blend-mode: multiply; opacity: 0.7; outline: 1px dashed #ffffff40; outline-offset: -1px; }
.tl-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-row.selected .tl-bar { box-shadow: inset 0 0 0 1px var(--accent); }
.tl-grip { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.tl-grip-l { left: -2px; }
.tl-grip-r { right: -2px; }
.tl-bar.locked .tl-grip { display: none; }
.tl-playhead { --at: 0; position: absolute; top: 24px; bottom: 8px; left: calc(8px + var(--name) + 6px + (100% - 16px - var(--name) - 6px) * var(--at)); width: 1px; background: #dcdcdc; pointer-events: none; z-index: 2; }
@media (max-width: 1100px) { .tl { --name: 86px; } }