/* Timeline games: automation lanes, warp markers, recording, take lanes, arrangement editing.
   Built on the same --dev* variables and .arr pieces as drills2.css. */

/* ---------- shared: context menu, modifier pills ---------- */
.lmenu{position:fixed;z-index:60;min-width:190px;background:#2f3233;border:1px solid #55595c;border-radius:4px;padding:4px 0;box-shadow:0 8px 24px rgba(0,0,0,.5);font-size:12.5px;color:var(--devtext)}
.lmenu button{display:flex;justify-content:space-between;gap:16px;width:100%;text-align:left;background:none;border:0;color:inherit;padding:5px 12px;cursor:pointer;font:inherit}
.lmenu button:hover:not(:disabled){background:var(--devacc);color:#111}
.lmenu button:disabled{opacity:.45;cursor:default}
.lmenu button.lm-sub{padding-left:22px}
.lmenu kbd{font:11px var(--mono);opacity:.7}
.lm-head{padding:5px 12px 2px;font-size:11px;opacity:.7}
.lm-sep{display:block;height:1px;background:#55595c;margin:4px 0}
.modpills{display:inline-flex;gap:4px}.modpills .ltoggle{padding:2px 7px;font-size:11px}
.tlbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px 8px;border-top:1px solid var(--devline)}
.tlbar .ltoggle{font-size:11.5px}
.tlbar kbd{font:10px var(--mono);opacity:.65;margin-left:5px}

/* ---------- automation lanes ---------- */
.ad-main{grid-template-columns:minmax(0,1fr) 150px}
.ad-clip{height:34px;border-bottom:1px solid var(--devline);background:color-mix(in srgb,#ffb347 75%,#000);position:relative}
.ad-clip canvas{position:absolute;inset:2px 0;width:100%;height:30px}
.ad-lane{display:block;border-bottom:1px solid var(--devline);touch-action:none;cursor:crosshair;background:var(--dev)}
.ad-lane.main{background:color-mix(in srgb,var(--dev) 85%,#f2a4b0 6%)}
.ad-lane .g{stroke:var(--devline);stroke-width:1;opacity:.5}.ad-lane .g.bar{opacity:1}
.ad-lane .sel{fill:#7fb6ff;opacity:.22}
.ad-lane .env{fill:none;stroke:#ff5a5a;stroke-width:2}
.ad-lane .env.off{stroke:#8a8f92;stroke-dasharray:0}
.ad-lane .ghost{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:5 5;opacity:.85}
.ad-lane .bp{fill:#ff5a5a;stroke:#1b1b1b;stroke-width:1.5;cursor:grab}
.ad-lane .bp:hover{r:6}
.ad-lane .tick{fill:var(--teal);opacity:.8}
.ad-tip{fill:#fff;font:11px var(--mono);pointer-events:none;paint-order:stroke;stroke:#000;stroke-width:3px}
.ad.drawing .ad-lane{cursor:cell}
.ad-hsp{border-bottom:1px solid var(--devline);background:color-mix(in srgb,var(--dev2) 70%,#000)}
.ad-th{height:34px;border-bottom:1px solid var(--devline);padding:4px 6px;background:var(--dev2);font-size:11.5px}
.ad-th .tn,.ad-mainname{border-left:3px solid var(--c,#f2a4b0);padding-left:5px;font-size:11.5px}
.ad-lh{height:110px;border-bottom:1px solid var(--devline);padding:5px 6px;display:flex;flex-direction:column;gap:4px;background:var(--dev2);font-size:11px}
.ad-lh.main{--c:#f2a4b0}
.ad-ch{border:1px solid var(--devline);border-radius:2px;padding:1px 5px;background:color-mix(in srgb,var(--dev2) 50%,#fff 10%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-mm{opacity:.75;font-size:10.5px}
.ad-val{display:flex;align-items:center;gap:5px;cursor:ns-resize;touch-action:none}
.ad-val b{font-weight:500;color:var(--devacc)}
.ad-led{width:7px;height:7px;border-radius:50%;background:#ff5a5a;display:inline-block}.ad-led.off{background:#555}
.ad-list{margin-top:8px;font-size:14.5px;line-height:1.7}
.ad-mods{display:inline-flex}
@media (pointer:coarse){.ad-lh{height:96px}}
@media (max-width:560px){.ad-main{grid-template-columns:minmax(0,1fr) 104px}.ad-lh{font-size:10px}}

/* ---------- warp markers (Sample Editor) ---------- */
.wm-ed{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.wm-ed svg{display:block}
.wm-ed .wf{fill:#e8e1c9;opacity:.85}
.wm-ed .g{stroke:#6b6f72;stroke-width:1;opacity:.45}.wm-ed .g.beat{opacity:.8}.wm-ed .g.bar{stroke:#aab0b3;opacity:1}
.wm-ed .tr{stroke:#9aa0a3;stroke-width:1.5}
.wm-ed .pw{fill:#9aa0a3;opacity:.9;cursor:ew-resize}
.wm-ed .wmk{fill:#f5d524;cursor:ew-resize}.wm-ed .wmk.sel{fill:#fff}
.wm-ed .wml{stroke:#f5d524;stroke-width:1.5}
.wm-ed .sel{fill:#7fb6ff;opacity:.2}
.wm-ed .hit-ok{stroke:var(--teal);stroke-width:2}
.wm-ed .hit-bad{stroke:var(--red);stroke-width:2}
.wm-ed .rul{fill:var(--devtext);font:10px var(--mono);opacity:.8}
.wm-ed .mstrip{fill:color-mix(in srgb,var(--dev2) 70%,#000)}
.wm-ed .ins{stroke:var(--devacc);stroke-width:1}
.wm-ed .play{stroke:#fff;stroke-width:1.5}
.wm-side{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;margin-bottom:8px}
.wm-side .k-label{font-size:11px;opacity:.8}
.wm-q{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border:1px solid var(--devline);padding:4px 6px;border-radius:3px}
.wm-q select{background:color-mix(in srgb,var(--dev2) 70%,#000);color:var(--devtext);border:1px solid var(--devline);font-size:12px}

/* ---------- recording ---------- */
.rc-world{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-bottom:12px}
.rc-fact{background:var(--tile,#1b1b1b);border-left:3px solid var(--teal);padding:7px 10px;font-size:13.5px}
.rc-cb .lcb-b.rec.on{background:var(--red);color:#fff}
.rc-cb select{background:color-mix(in srgb,var(--dev2) 50%,#fff 10%);color:var(--devtext);border:1px solid var(--devline);border-radius:2px;font-size:11.5px;height:20px}
.rc-cb .lcb-f.ed{cursor:pointer}
.rc-main{grid-template-columns:minmax(0,1fr) 250px}
.rc-lane{height:64px}
.rc-th{height:64px;display:grid;grid-template-columns:86px 1fr 50px;gap:4px;padding:3px 4px;background:var(--dev2);border-bottom:1px solid var(--devline)}
.rc-th .th-name{font-size:11px}
.rc-th .th-arm{height:22px;font-size:12px}
.rc-out{margin-top:10px;font-size:14px;line-height:1.6;border-left:3px solid var(--devacc);padding:6px 10px;background:color-mix(in srgb,var(--dev2) 85%,#000)}
.rc-out:empty{display:none}
.arr-clip.rec{background:repeating-linear-gradient(45deg,#ff6159 0 6px,#d9534f 6px 12px)}
.arr-loopbr{position:absolute;top:2px;height:13px;background:#8a8f92;border-radius:2px;opacity:.85}
.arr-loopbr.on{background:var(--devacc)}
.arr-loopbr.punch{box-shadow:inset 0 0 0 2px var(--red)}
.rc .rc-th .th-io{display:flex}
@media (max-width:560px){.rc-main{grid-template-columns:minmax(0,1fr) 196px}.rc-th{grid-template-columns:50px 1fr 30px}.rc-th .th-sel{font-size:10px}}

/* ---------- take lanes ---------- */
.tk-main{grid-template-columns:minmax(0,1fr) 140px}
.tk-lane{position:relative;height:46px;border-bottom:1px solid var(--devline);touch-action:none;cursor:text}
.tk-lane.comp{height:56px;background:color-mix(in srgb,var(--dev) 85%,#000)}
.tk-lane canvas{position:absolute;left:0;top:0;height:100%;pointer-events:none}
.tk-seg{position:absolute;top:2px;bottom:2px;border-radius:2px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.tk-hl{position:absolute;top:0;bottom:0;background:var(--c);opacity:.38;pointer-events:none}
.tk-dim{position:absolute;inset:0;background:color-mix(in srgb,var(--c) 30%,#555);opacity:.35;pointer-events:none}
.tk-sel{position:absolute;top:0;bottom:0;background:#7fb6ff;opacity:.28;pointer-events:none}
.tk-flaw{position:absolute;top:0;height:5px;background:var(--red);pointer-events:none}
.tk-h{height:46px;border-bottom:1px solid var(--devline);display:flex;align-items:center;gap:6px;padding:0 6px;background:var(--dev2);font-size:11.5px}
.tk-h.comp{height:56px}
.tk-h .tn{border-left:3px solid var(--c);padding-left:5px;flex:1;white-space:nowrap;overflow:hidden}
.tk-aud{width:26px;height:20px;border:1px solid var(--devline);border-radius:3px;background:transparent;color:var(--devtext);cursor:pointer;font-size:12px}
.tk-aud.on{background:var(--devacc);color:#111;border-color:var(--devacc)}
.tk-h.sel{box-shadow:inset 3px 0 0 var(--devacc)}
.tk-cut{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.6;pointer-events:none}
@media (max-width:560px){.tk-main{grid-template-columns:minmax(0,1fr) 96px}}

/* ---------- arrangement editing ---------- */
.ae-main{grid-template-columns:minmax(0,1fr) 120px}
.ae-lane{height:52px}
.ae-th{height:52px;border-bottom:1px solid var(--devline);padding:4px 6px;background:var(--dev2);font-size:11.5px}
.ae-th .tn{border-left:3px solid var(--c);padding-left:5px}
.ae-clip .chead{position:absolute;left:0;right:0;top:0;height:13px;cursor:pointer}
.ae-clip .cname{pointer-events:none}
.ae-clip svg.cfade{position:absolute;left:0;top:13px;width:100%;height:calc(100% - 13px);pointer-events:none}
.ae-clip svg.cfade .fz{fill:rgba(0,0,0,.4)}.ae-clip svg.cfade .fl{fill:none;stroke:#111;stroke-width:1.2}
.ae-xf{position:absolute;top:13px;bottom:2px;pointer-events:none;background:linear-gradient(to bottom right,transparent 48%,#111 49%,#111 51%,transparent 52%),linear-gradient(to top right,transparent 48%,#111 49%,#111 51%,transparent 52%);opacity:.7}
.ae-tsel{position:absolute;top:0;bottom:0;background:#7fb6ff;opacity:.3;pointer-events:none;z-index:2}
.ae-tasks{counter-reset:t}
.ae-tasks .check{font-size:14px}
.ae-tasks li{margin:4px 0}
@media (max-width:560px){.ae-main{grid-template-columns:minmax(0,1fr) 80px}}
.rc-cb .vbox{width:70px}.rc-cb .vbox .vb{height:20px}