/* Compact timeline (static/timeline.js), placed inside the upload panel of audio/video pages. GPC colors. */
.tl{margin-top:16px;background:color-mix(in srgb,var(--text) 3%,var(--panel));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tlLoading{padding:16px;text-align:center;color:var(--muted);font-size:12.5px}
.tlBar{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line)}
.tlPlay{flex:none;width:28px;height:28px;border-radius:50%;border:0;display:grid;place-items:center;font-size:10px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#38cfff);box-shadow:0 4px 12px #7c3aed55}
.tlTime{flex:none;font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}.tlTime b{color:var(--text);font-weight:600}
.tlInfo,.tlWarn{flex:1;min-width:0;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlInfo i{flex:none;width:11px;height:9px;border-radius:2px;background:#f59e0b55;border:1px solid #f59e0b}
.tlWarn{color:#f59e0b;font-weight:600}
.tlSpec{flex:none;width:112px;height:24px}
.tlZoom{flex:none;display:flex;align-items:center;gap:8px}
.tlZoomBar{width:90px;accent-color:#8b5cf6;cursor:pointer}
.tlZoom button{min-width:26px;height:24px;padding:0 7px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:11.5px;cursor:pointer}
.tlZoom button:hover{border-color:#8b5cf6;color:#a78bfa}
.tlBody{display:flex}
.tlScroll{flex:1;overflow-x:auto;overflow-y:hidden;min-width:0;scrollbar-width:thin}
.tlInner{position:relative;cursor:text;user-select:none;padding-bottom:4px}
.tlRuler{height:20px;position:relative;border-bottom:1px solid var(--line)}
.tlTicks{position:absolute;top:0;bottom:0;right:0}
.tlTicks span{position:absolute;top:4px;font-size:9.5px;color:var(--muted);padding-left:3px;border-left:1px solid color-mix(in srgb,var(--muted) 45%,transparent);height:16px;line-height:10px}
.tlRow{display:flex;height:64px}
.tl-video .tlRow{height:30px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tl-video .tlRow.img{height:44px}.tl-video .tlRow.sub{height:24px}.tl-video .tlRow.music{height:26px}
.tlLabel{position:sticky;left:0;z-index:3;flex:0 0 84px;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:11px;font-weight:600;color:var(--muted);background:color-mix(in srgb,var(--text) 3%,var(--panel));border-right:1px solid var(--line)}
.tlLabel svg{width:13px;height:13px;flex:none}
.tlRow.img .tlLabel svg{color:#db2777}.tlRow.sub .tlLabel svg{color:#a78bfa}.tlRow.voice .tlLabel svg{color:#22c55e}.tlRow.music .tlLabel svg{color:#22d3ee}
.tlLane{position:relative;flex:1;margin:3px 0}
.tlEmpty{position:absolute;inset:0 6px 0 4px;border:1px dashed var(--line);border-radius:6px;display:flex;align-items:center;padding:0 9px;font-size:11px;color:var(--muted)}
.tlSeg{position:absolute;top:0;bottom:0;border-radius:6px;overflow:hidden;background:color-mix(in srgb,var(--sc) 14%,transparent);border:1px solid color-mix(in srgb,var(--sc) 40%,transparent)}
.tlSeg canvas{position:absolute;left:0;top:0;bottom:0;margin:auto 0}
.tlSeg span{position:absolute;left:6px;top:3px;font-size:10px;font-weight:600;color:var(--text);background:color-mix(in srgb,var(--panel) 75%,transparent);padding:1px 5px;border-radius:4px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlRow.music .tlLane{border-radius:6px;overflow:hidden;background:#0891b21f}
.tlRow.music canvas{position:absolute;left:0;top:0;bottom:0;margin:auto 0}
.tlPause{position:absolute;top:0;bottom:0;background:#f59e0b2a;border-left:1px solid #f59e0b;border-right:1px solid #f59e0b;pointer-events:none}
.tlClip{position:absolute;top:0;bottom:0;overflow:hidden;border-radius:6px;border:1px solid #db277799;background:color-mix(in srgb,#db2777 16%,var(--panel));cursor:grab}
.tlClip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tlClip span{position:absolute;left:3px;bottom:2px;font-size:9.5px;font-weight:700;color:#fff;background:#0009;padding:0 4px;border-radius:4px}
.tlClip button{position:absolute;top:2px;right:2px;width:16px;height:16px;border:0;border-radius:50%;display:none;place-items:center;font-size:11px;line-height:1;color:#fff;background:#e11d48;cursor:pointer}
.tlClip:hover{border-color:#f472b6}.tlClip:hover button{display:grid}
.tlClip.drag{opacity:.4}.tlClip.over{outline:2px solid #38cfff;outline-offset:-2px}
.tlCue{position:absolute;top:0;bottom:0;border-radius:5px;padding:0 6px;font-size:10px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;background:#7c3aedcc;border:1px solid #a78bfa}
.tlHead{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#fff;z-index:4;pointer-events:none;box-shadow:0 0 6px #0008}
.tlHead i{position:absolute;top:0;left:-5px;width:12px;height:13px;background:#fff;clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%)}
.theme-light .tlHead,.theme-light .tlHead i{background:#1c2230}
/* LED level meter, like a mixing desk */
.tlMeter{flex:0 0 46px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:2px 4px;padding:22px 8px 4px;border-left:1px solid var(--line)}
.tlLed{display:flex;flex-direction:column-reverse;gap:2px}
.tlLed b{flex:1;min-height:2px;border-radius:1.5px;opacity:.16;transition:opacity .05s}
.tlLed b.g{background:#22c55e}.tlLed b.y{background:#eab308}.tlLed b.r{background:#ef4444}
.tlLed b.on{opacity:1;box-shadow:0 0 5px currentColor}.tlLed b.pk{opacity:.85}
.tlMeter small{text-align:center;font-size:9px;color:var(--muted)}
.tlHint{margin:0;padding:5px 10px 7px;font-size:11px;color:var(--muted)}
@media(max-width:640px){.tlSpec,.tlInfo{display:none}}
/* Video editor: grouped image tile (editor.js) */
.imgGroup{display:flex;align-items:center;gap:12px;margin-top:10px;padding:9px 10px;border-radius:12px;border:1px solid color-mix(in srgb,#db2777 35%,var(--line));background:color-mix(in srgb,#db2777 7%,var(--panel))}
.imgStack{position:relative;flex:none;width:64px;height:44px}
.imgStack img{position:absolute;width:44px;height:34px;object-fit:cover;border-radius:6px;border:2px solid var(--panel);box-shadow:0 2px 6px #0006}
.imgStack img:nth-child(1){left:0;top:8px;transform:rotate(-8deg)}.imgStack img:nth-child(2){left:9px;top:4px;transform:rotate(-2deg)}.imgStack img:nth-child(3){left:18px;top:1px;transform:rotate(5deg)}
.imgStack b{position:absolute;right:-4px;bottom:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font-size:11px;color:#fff;background:#db2777;border:2px solid var(--panel)}
.imgGroupText{flex:1;min-width:0;display:flex;flex-direction:column}
.imgGroupText strong{font-size:13px;color:var(--text)}.imgGroupText small{font-size:11px;color:var(--muted)}
.imgGroup button{flex:none}
.pickPhotos{display:inline-block;margin-top:8px;font-size:12px;color:#a78bfa;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pickPhotos:hover{color:#c4b5fd}
/* Columns may shrink when the window gets smaller: the timeline then redraws at the new width (no refresh needed). */
.editor>*,.duocolumn>*{min-width:0}
.tl{max-width:100%;min-width:0}