/* Slides timeline and details panel (text animator, js/text-animator.js "slides timeline") */
#tab-text .tl{display:flex;flex-direction:column;gap:6px}
#tab-text .tl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--sunk);padding:0 12px 10px}
#tab-text .tl-inner{position:relative;height:120px}
#tab-text .tl-ruler{position:absolute;left:0;right:0;top:0;height:26px;cursor:pointer;border-bottom:1px solid var(--line)}
#tab-text .tl-ruler span{position:absolute;top:5px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--muted);pointer-events:none;white-space:nowrap}
#tab-text .tl-ruler span::after{content:"";position:absolute;left:50%;top:17px;width:1px;height:4px;background:var(--muted);opacity:.6}
#tab-text .tl-track{position:absolute;left:0;right:0;top:34px;height:80px}
#tab-text .tl-block{position:absolute;top:0;height:80px;min-width:14px;padding:0;border-radius:8px;border:2px solid rgba(255,255,255,.08);
  background:var(--bg) center/cover no-repeat;color:var(--tx);overflow:hidden;text-align:left;cursor:grab;touch-action:none;display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:box-shadow .15s,border-color .15s;font-weight:400}
#tab-text .tl-block:hover{border-color:var(--muted)}
#tab-text .tl-block.on{border-color:var(--brass)}
#tab-text .tl-block.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
#tab-text .tl-block.drag{cursor:grabbing;z-index:3;opacity:.95;box-shadow:0 14px 28px rgba(0,0,0,.42);transition:box-shadow .15s}
/* while dragging, the other slides glide aside to show where the dragged one will land */
#tab-text .tl-dragging .tl-block:not(.drag){transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .15s}
#tab-text .tl-block.settle{transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
@media (prefers-reduced-motion:reduce){#tab-text .tl-dragging .tl-block:not(.drag),#tab-text .tl-block.settle{transition:none}}
#tab-text .tl-block:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#tab-text .tl-seg{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.13);pointer-events:none}
#tab-text .tl-seg.in{left:0;border-right:1px dashed rgba(255,255,255,.4)}
#tab-text .tl-seg.out{right:0;border-left:1px dashed rgba(255,255,255,.4)}
#tab-text .tl-n{position:absolute;top:5px;left:6px;font-family:var(--mono);font-size:11px;font-weight:600;background:rgba(0,0,0,.5);color:#fff;border-radius:4px;padding:0 5px;pointer-events:none}
#tab-text .tl-txt{position:absolute;left:7px;right:7px;top:27px;font-weight:700;font-size:13px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none;overflow-wrap:anywhere}
#tab-text .tl-dur{position:absolute;right:6px;bottom:4px;font-family:var(--mono);font-size:10.5px;color:#fff;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none}
#tab-text .tl-head{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--danger);pointer-events:none;z-index:4}
#tab-text .tl-head::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--danger);transition:transform .15s}
/* a wider, invisible grab area around the marker's head */
#tab-text .tl-grip{position:absolute;top:-2px;left:-11px;width:24px;height:28px;cursor:ew-resize;pointer-events:auto;touch-action:none;border-radius:6px}
#tab-text .tl-grip:focus-visible{outline:2px solid var(--accent);outline-offset:0}
#tab-text .tl-ruler{touch-action:none;cursor:ew-resize}
#tab-text .tl-head:hover::before,#tab-text .scrubbing .tl-head::before{transform:scale(1.35) translateY(1px)}
#tab-text .scrubbing{cursor:ew-resize;user-select:none}
/* details: a drawer that slides in from the left edge, leaving the preview visible on the right */
#tab-text .tl-details{position:fixed;top:0;left:0;bottom:0;width:min(470px,100vw);z-index:50;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--accent);border-left:0;border-radius:0 14px 14px 0;padding:0 18px 24px;box-shadow:10px 0 34px rgba(0,0,0,.28);animation:tl-in .26s cubic-bezier(.2,.8,.2,1)}
#tab-text .tl-details .slhead{position:sticky;top:0;z-index:2;background:var(--sunk);padding:16px 0 10px;border-bottom:1px solid var(--line);margin-bottom:2px}
@keyframes tl-in{from{transform:translateX(-102%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){#tab-text .tl-details{animation:none}}
@media (max-width:520px){#tab-text .tl-details{border-radius:0;border-right:0}}

/* details drawer sections */
#tab-text .tl-details .dsec{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
#tab-text .tl-details .dsec h3{font-family:var(--display);font-size:15px;margin:0}
#tab-text .tl-details .dfiles summary{cursor:pointer;font-size:13px;color:var(--muted)}
#tab-text .tl-details .dfiles[open]{display:flex;flex-direction:column;gap:8px}
#tab-text .bglib{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
#tab-text .bgtile{position:relative;aspect-ratio:3/4;padding:0;border-radius:8px;border:2px solid transparent;background:#000 center/cover no-repeat;overflow:hidden;display:block}
#tab-text .bgtile span{position:absolute;left:0;right:0;bottom:0;padding:10px 6px 4px;font-size:11px;font-weight:500;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.65));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tab-text .bgtile.none span{background:none;top:0;display:grid;place-items:center;text-shadow:0 1px 2px rgba(0,0,0,.5)}
#tab-text .bgtile:hover{border-color:var(--muted)}
#tab-text .bgtile.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}