/* TIMELINE.CSS -- the sequencer panel (timeline-ui.js, export-ui.js). Dark, compact, the same
   palette as the WEAVESIM panes; override the variables to retheme.
   THIS SECTION GENERATED BY CLAUDE */
.tl {
    --tl-bg: #2b2b2b; --tl-bar: #383838; --tl-fg: #ccc; --tl-dim: #888; --tl-accent: #d6e1ff;
    --tl-live: #ff7043; --tl-input: #2a2a2a; --tl-border: #555;
    display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
    background: var(--tl-bg); color: var(--tl-fg);
    font-family: Arial, sans-serif; font-size: 12px; position: relative; outline: none;
    user-select: none; overflow: hidden; box-sizing: border-box;
}
.tl-hidden { display: none !important; }
.tl-grip { height: 5px; flex-shrink: 0; cursor: ns-resize; background: #1a1a1a; }
.tl-grip:hover { background: var(--tl-accent); }
.tl-bar, .tl-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--tl-bar); flex-wrap: wrap; }
.tl-bar { border-bottom: 1px solid #222; }
.tl-bar-right { margin-left: auto; display: flex; gap: 6px; }
.tl-btn { background: #4a4a4a; color: var(--tl-fg); border: 0; border-radius: 3px; padding: 3px 8px; cursor: pointer; font: inherit; }
.tl-btn:hover { background: #5a5a5a; }
.tl-rec { background: #7a3b2e; color: #fff; font-weight: bold; }
.tl-rec.tl-live { background: var(--tl-live); color: #222; }
.tl-time { font-family: Consolas, Menlo, monospace; font-size: 13px; color: var(--tl-accent); min-width: 62px; }
.tl-frame { font-family: Consolas, Menlo, monospace; color: var(--tl-dim); min-width: 44px; }
.tl-lab { display: inline-flex; align-items: center; gap: 4px; color: var(--tl-dim); white-space: nowrap; }
.tl-num, .tl-text, .tl-sel, .tl-add, .tl-interp {
    background: var(--tl-input); color: var(--tl-fg); border: 1px solid var(--tl-border); border-radius: 2px;
    font: inherit; padding: 1px 3px;
}
.tl-num { width: 52px; }
.tl-text { width: 110px; }
.tl-drawer { display: none; background: #333; border-bottom: 1px solid #222; }
.tl-drawer.open { display: block; }
.tl-export .tl-row { background: transparent; padding: 3px 6px; }
.tl-prog { flex: 1; min-width: 80px; height: 8px; background: #222; border-radius: 4px; overflow: hidden; }
.tl-prog-fill { height: 100%; width: 0; background: var(--tl-live); transition: width 0.2s; }
.tl-status { color: var(--tl-dim); white-space: nowrap; }
.tl-status.tl-err { color: #e0a030; }
.tl-body { display: flex; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.tl-heads { width: 200px; flex-shrink: 0; background: #262626; border-right: 1px solid #1a1a1a; }
.tl-head-top { display: flex; align-items: center; padding: 0 8px; color: var(--tl-dim); background: #222; box-sizing: border-box; }
.tl-head { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 8px; box-sizing: border-box; border-bottom: 1px solid #1f1f1f; }
.tl-head-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-head .tl-btn { padding: 0 5px; line-height: 16px; }
.tl-key { color: var(--tl-live); }
.tl-del { color: var(--tl-dim); }
.tl-interp { width: 64px; padding: 0 1px; font-size: 11px; }
.tl-lanes { flex: 1; min-width: 0; position: relative; }
.tl-lanes canvas { display: block; cursor: crosshair; }
.tl-popup { position: absolute; z-index: 10; background: #3a3a3a; border: 1px solid #666; border-radius: 4px; padding: 6px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.tl-popup .tl-lab { justify-content: space-between; }
.tl-menu .tl-btn { text-align: left; white-space: pre; }