/* ======================================================================
   Touch editor (phones / tablets): flat full-bleed timeline with a fixed
   centre playhead you slide the timeline under, one scrolling tool row, and
   the Range / Template sheets. Uses the studio theme variables only, so it
   follows the active colour theme and light/dark choice. Scoped to body.m-ui.
   ====================================================================== */

/* timeline: flat and full-bleed */
body.m-ui .ed-timeline{ margin:0; border-left:none; border-right:none; border-radius:0; }
body.m-ui .tl-toolbar, body.m-ui .tpl-bar{ display:none; }       /* their tools live in the tool row / sheets */
body.m-ui .clip{ border-radius:8px; }
body.m-ui .clip.selected{ border-color:var(--text); }

/* centre playhead: the line stays put, the timeline slides under it */
body.m-ui .tl-body{ position:relative; }
body.m-ui.m-center-tl .tl-playhead{ display:none; }              /* replaced by the fixed line below */
body.m-ui.m-center-tl .tl-scroll{ touch-action:pan-x pan-y; }
body.m-ui .m-center-ph{
  position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; z-index:6; pointer-events:none;
  background:var(--green); box-shadow:0 0 10px color-mix(in srgb, var(--green) 55%, transparent);
}
body.m-ui .m-center-ph::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:18px; height:13px; background:var(--green);
  clip-path:polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); border-radius:3px;
}
/* bigger touch target for the trim handles of a clip */
body.m-ui .clip-handle{ touch-action:none; }
body.m-ui .clip-handle::after{ content:''; position:absolute; top:-6px; bottom:-6px; left:-10px; right:-10px; }

/* tool row: icon over label, scrolls sideways, fades at the edge */
body.m-ui .m-editor-bar{
  gap:0; padding:6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
  -webkit-mask-image:linear-gradient(to right, #000 90%, transparent);
  mask-image:linear-gradient(to right, #000 90%, transparent);
}
body.m-ui .m-editor-bar button{
  flex:0 0 62px; min-width:62px; min-height:58px; border-radius:12px;
  font-size:10.5px; font-weight:600; letter-spacing:0; gap:5px; color:var(--text);
}
body.m-ui .m-editor-bar button svg{ width:23px; height:23px; color:var(--text); }
body.m-ui .m-editor-bar button.on, body.m-ui .m-editor-bar button.on svg{ color:var(--green); }
body.m-ui .m-editor-bar button.m-danger, body.m-ui .m-editor-bar button.m-danger svg{ color:#ff9d8a; }

/* Range + Template sheets */
body.m-ui .m-sheet.m-tools .m-sheet-body{ padding:4px 14px 18px; }
body.m-ui .m-tool-note{ padding:6px 4px 10px; color:var(--muted); font-size:13px; }
body.m-ui .m-tool-row{
  display:block; width:100%; min-height:52px; margin-top:8px; padding:0 16px; text-align:left;
  border:1px solid var(--line); border-radius:14px; background:var(--panel2); color:var(--text);
  font-size:14.5px; font-weight:600;
}
body.m-ui .m-tool-row:active{ background:var(--panel); }
body.m-ui .m-sheet.m-tools .tpl-bar{
  display:flex !important; flex-direction:column; align-items:stretch; gap:8px;
  height:auto; padding:0; border:none; background:none; overflow:visible;
}
body.m-ui .m-sheet.m-tools .tpl-bar .tl-sep, body.m-ui .m-sheet.m-tools .tpl-bar .tpl-state{ display:none; }
body.m-ui .m-sheet.m-tools .tpl-bar .lbl{ padding:2px 4px 6px; color:var(--muted); }
body.m-ui .m-sheet.m-tools .tpl-btn{
  width:100%; min-height:52px; justify-content:flex-start; padding:0 16px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel2); color:var(--text);
  font-size:14.5px; font-weight:600;
}

/* ---------------- layout: top bar · preview · playback row · timeline · tool row ---------------- */
body.m-ui .m-edtop{ gap:8px; padding:8px 12px 6px; }
body.m-ui .m-edtop .m-title{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:6px;
  padding:6px 4px; background:none; border:none; color:var(--text); font-size:15px; font-weight:700; text-align:left;
}
body.m-ui .m-title-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
body.m-ui .m-edtop .m-fmtbtn{ background:none; border:none; padding:6px 8px; color:var(--text); font-size:14px; font-weight:800; }

/* preview: a rounded video, centred, sized by the project's aspect ratio */
body.m-ui .ed-player{ background:transparent; }
body.m-ui .ed-stage{
  height:min(46dvh, calc((100vw - 24px) / var(--vs-arn, .8))) !important; max-height:none;
  width:auto !important; max-width:calc(100% - 24px); margin:0 auto;
  border-radius:14px; overflow:hidden; background:#000;
}
@media (max-height:700px){ body.m-ui .ed-stage{ height:min(38dvh, calc((100vw - 24px) / var(--vs-arn, .8))) !important; } }

/* playback row: play · volume · time ……… undo · redo */
body.m-ui .ed-transport{
  position:relative; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;
  gap:12px; padding:8px 14px; background:transparent; border-top:none; overflow:visible;
}
body.m-ui .ed-transport #edGoStart, body.m-ui .ed-transport #edPrevFrame,
body.m-ui .ed-transport #edNextFrame, body.m-ui .ed-transport #edGoEnd,
body.m-ui .ed-transport .tp-spacer, body.m-ui .ed-transport > label{ display:none !important; }   /* ratio / W / H / FPS live in the Canvas sheet */
body.m-ui .ed-transport #edPlayBtn{ order:1; }
body.m-ui .ed-transport .m-volbtn{ order:2; }
body.m-ui .ed-transport .tp-time{
  order:3; display:flex; flex-direction:column; justify-content:center; gap:1px; margin:0; padding:0;
  background:none; border:none; font-size:0; line-height:1.15; min-width:0;
}
body.m-ui .ed-transport .tp-time b, body.m-ui .ed-transport .tp-time span{ display:block; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
body.m-ui .ed-transport .tp-time span{ color:var(--muted); font-weight:600; }
body.m-ui .ed-transport .m-undo{ order:5; margin-left:auto; }
body.m-ui .ed-transport .m-redo{ order:6; }
body.m-ui .ed-transport .m-volbtn, body.m-ui .ed-transport .m-undo, body.m-ui .ed-transport .m-redo{
  width:38px; height:38px; min-width:38px; flex:0 0 38px; background:none; border:none; color:var(--text); font-size:18px;
}
body.m-ui .m-volbtn.muted{ color:#ff9d8a; }
/* opens upward over the preview: the player clips anything below the playback row */
body.m-ui .ed-transport .m-vol-pop{ top:auto; bottom:calc(100% + 4px); left:14px; right:14px; width:auto; z-index:20; }

/* track heads: one icon each (eye / speaker); lock, names and previews stay out of the way */
body.m-ui .tl-heads{ width:46px !important; }
body.m-ui .tl-heads .nm, body.m-ui .tl-heads .tl-track-preview, body.m-ui .tl-heads .tg[data-a="lock"],
body.m-ui .tl-heads .tg[data-a="del"]{ display:none !important; }
body.m-ui .tl-heads .tl-head{ justify-content:center; align-items:center; background:var(--panel2); border-radius:8px 0 0 8px; }
body.m-ui .tl-heads .tg{
  width:32px; height:32px; padding:0; border:none; background:none; color:var(--muted);
  font-size:0; display:flex; align-items:center; justify-content:center;
}
body.m-ui .tl-heads .tg::before{
  content:''; width:20px; height:20px; background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
}
body.m-ui .tl-heads .tg.on{ color:var(--text); background:none; border:none; }
body.m-ui .tl-heads .tg[data-a="hide"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }
body.m-ui .tl-heads .tg[data-a="hide"].on{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
body.m-ui .tl-heads .tg[data-a="mute"]{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M22 9l-6 6M16 9l6 6'/%3E%3C/svg%3E"); }
body.m-ui .tl-heads .tg[data-a="mute"].on{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E"); }

/* "+" after the last video clip */
body.m-ui .m-add-end{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:42px; height:42px; border:none; border-radius:10px; background:var(--text); color:var(--bg);
  font-size:26px; font-weight:700; line-height:1; box-shadow:0 4px 14px rgba(0,0,0,.45);
}

/* canvas & quality sheet */
body.m-ui .m-canvas-row{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:12px 4px; border-bottom:1px solid var(--line); font-size:14px; color:var(--text);
}
body.m-ui .m-canvas-row select, body.m-ui .m-canvas-row input{ width:120px; min-height:40px; font-size:16px; border-radius:10px; }body.m-ui .m-canvas-row select, body.m-ui .m-canvas-row input{ background:var(--panel2); color:var(--text); border:1px solid var(--line); padding:0 10px; }

/* add-track shortcuts: a "+" above the top video layer and one under the last audio layer
   (studio.css sets these buttons with !important, so the overrides need it too) */
body.m-ui .tl-addrow{ display:flex !important; justify-content:center; }
body.m-ui .tl-heads-top .tl-edge-add, body.m-ui .tl-addrow .tl-edge-add{
  display:flex !important; align-items:center; justify-content:center; width:36px !important; height:24px !important; min-height:0 !important;
  margin:0 auto; padding:0 !important; font-size:0 !important; line-height:1 !important;
  border:1px dashed var(--muted) !important; border-radius:8px !important; background:none !important; color:var(--muted) !important;
}
body.m-ui .tl-heads-top .tl-edge-add::before, body.m-ui .tl-addrow .tl-edge-add::before{ content:'+'; font-size:18px; line-height:1; }
body.m-ui .tl-heads-top .tl-edge-add:active, body.m-ui .tl-addrow .tl-edge-add:active{ background:var(--panel2) !important; color:var(--text) !important; }