/* tools/video-editor/css/editor.css
   Dark editor chrome. The light page shell (nav, guide drawer) is styled
   inline in index.html; everything under #veApp lives here.
   Grid: header 48px / left 280px / center flex / right 300px / timeline 280px. */

:root{
  --ve-bg:#141119; --ve-panel:#1D1826; --ve-panel2:#251E31;
  --ve-line:#332B42; --ve-line2:#453A59;
  --ve-txt:#F2EEF9; --ve-txt2:#A79DBD; --ve-txt3:#7A7090;
  --ve-accent:#8257E6; --ve-accent-2:#6C3FD4; --ve-accent-soft:rgba(130,87,230,.16);
  --ve-paper:#FFF6EF; /* site paper tone — the guide drawer keeps the light shell look */
  --ve-header-h:48px; --ve-timeline-h:280px;
}

#veApp{position:relative; flex:1; min-height:0; display:grid;
  grid-template-rows:var(--ve-header-h) minmax(0,1fr) var(--ve-timeline-h);
  grid-template-columns:var(--ve-col-left, 280px) 1fr var(--ve-col-right, 300px);
  background:var(--ve-bg); color:var(--ve-txt);}

/* header */
#veHeader{grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--ve-panel); border-bottom:1px solid var(--ve-line); overflow-x:auto; white-space:nowrap;}
#veHeader h1{font-size:14px; font-weight:700; margin-right:2px;}
.ve-spacer{flex:1;}
#veProjectName{width:180px; font:inherit; font-size:13px; color:var(--ve-txt);
  background:transparent; border:1px solid transparent; border-radius:8px; padding:5px 8px;}
#veProjectName:hover{border-color:var(--ve-line2);}
#veProjectName:focus{border-color:var(--ve-accent); outline:none; background:var(--ve-panel2);}

/* app buttons (override the light shell button style) */
#veApp button{font:inherit; font-size:12.5px; color:var(--ve-txt); background:var(--ve-panel2);
  border:1px solid var(--ve-line2); border-radius:10px; padding:6px 11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; flex:none;}
#veApp button:hover{background:#2E2640;}
#veApp button:active{transform:scale(.98);}
#veApp button.primary{background:var(--ve-accent); border-color:var(--ve-accent); color:#fff;}
#veApp button.primary:hover{background:var(--ve-accent-2);}
#veApp button.on{background:var(--ve-accent-soft); border-color:var(--ve-accent);}
#veApp button:disabled{opacity:.4; cursor:default;}
#veApp :focus-visible{outline:2px solid var(--ve-accent); outline-offset:2px;}
#veApp input[type=range], #veApp input[type=number], #veApp select{accent-color:var(--ve-accent);}

/* Plan I Task 4 (item 5): themed scrollbars for the dark editor chrome
   (native OS scrollbars clash with the panel tones). Scoped to #veApp so the
   light page shell and the how-to guide drawer (a sibling of #veApp, outside
   this scope) keep the OS default scrollbar. */
#veApp *{ scrollbar-width: thin; scrollbar-color: var(--ve-line2) transparent; } /* Firefox */
#veApp ::-webkit-scrollbar{ width: 10px; height: 10px; }
#veApp ::-webkit-scrollbar-track{ background: transparent; }
#veApp ::-webkit-scrollbar-thumb{ background: var(--ve-line2); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box; } /* transparent border floats on any panel */
#veApp ::-webkit-scrollbar-thumb:hover{ background: #56496f; }
#veApp ::-webkit-scrollbar-corner{ background: transparent; }

/* .ve-modal (Settings/Export/relink/silence dialogs, recovery.mjs) and
   .ve-filler-list (the Remove-fillers picklist, filler-panel.mjs) are
   dark-themed dialogs mounted on document.body, OUTSIDE #veApp — the block
   above never reaches them. Their own overflow is on the matched element
   itself (not a descendant), so these selectors carry NO descendant space,
   unlike the #veApp form above. --ve-line2 is a :root token, so it resolves
   the same outside #veApp. */
.ve-modal, .ve-filler-list{ scrollbar-width: thin; scrollbar-color: var(--ve-line2) transparent; } /* Firefox */
.ve-modal::-webkit-scrollbar, .ve-filler-list::-webkit-scrollbar{ width: 10px; height: 10px; }
.ve-modal::-webkit-scrollbar-track, .ve-filler-list::-webkit-scrollbar-track{ background: transparent; }
.ve-modal::-webkit-scrollbar-thumb, .ve-filler-list::-webkit-scrollbar-thumb{ background: var(--ve-line2);
  border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.ve-modal::-webkit-scrollbar-thumb:hover, .ve-filler-list::-webkit-scrollbar-thumb:hover{ background: #56496f; }
.ve-modal::-webkit-scrollbar-corner, .ve-filler-list::-webkit-scrollbar-corner{ background: transparent; }

/* recovery banner container (filled by the autosave task) */
#veBanner{position:absolute; top:calc(var(--ve-header-h) + 10px); left:50%; transform:translateX(-50%);
  z-index:30; background:var(--ve-panel2); border:1px solid var(--ve-accent); border-radius:12px;
  padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.5); display:flex; align-items:center; gap:10px;
  font-size:13px; max-width:min(92%,560px);}
#veBanner[hidden]{display:none;}
#veApp button[hidden]{display:none !important;}

/* left: media bin */
#veMediabin{grid-row:2; grid-column:1; min-height:0; display:flex; flex-direction:column;
  background:var(--ve-panel); border-right:1px solid var(--ve-line); overflow:hidden;}
.ve-tabs{flex:none; display:flex; gap:4px; padding:8px; border-bottom:1px solid var(--ve-line); overflow-x:auto;}
.ve-tabs button{flex:1 0 auto; justify-content:center;}

/* center: preview + transport */
#veCenter{grid-row:2; grid-column:2; min-width:0; min-height:0; display:flex; flex-direction:column;}
#vePreviewWrap{flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  padding:16px; overflow:hidden;}
#veCanvas{max-width:100%; max-height:100%; background:#000; border-radius:4px;
  box-shadow:0 0 0 1px var(--ve-line), 0 14px 40px rgba(0,0,0,.45);}
#veTransport{flex:none; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:8px 12px; background:var(--ve-panel); border-top:1px solid var(--ve-line);}
#btnPlay{min-width:44px; justify-content:center; padding:6px 12px;}
#btnPlay svg{display:block;}
#veTimecode{font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--ve-txt2);
  min-width:92px; text-align:center;}

/* right: inspector */
#veInspector{grid-row:2; grid-column:3; min-height:0; overflow:auto; padding:12px;
  background:var(--ve-panel); border-left:1px solid var(--ve-line);}
.ve-empty-note{color:var(--ve-txt3); font-size:13px; text-align:center; margin-top:28px; line-height:1.5;}

/* bottom: timeline */
#veTimeline{grid-row:3; grid-column:1 / -1; min-height:0; display:flex; flex-direction:column;
  background:var(--ve-panel2); border-top:1px solid var(--ve-line);}
#veRuler{flex:none; display:block; width:100%; height:24px;}
#veTracks{flex:1; min-height:0; position:relative; overflow:auto;}

/* origin notice (main.mjs replaces the app when opened from a foreign origin) */
.ve-origin-notice{margin:auto; text-align:center; padding:40px 20px; font-size:14px; line-height:1.7;}
.ve-origin-notice a{color:#8257E6; font-weight:700;}

/* panels button only exists on small screens
   (selector needs #veApp prefix: plain #btnPanels has lower specificity than
   the `#veApp button{display:inline-flex}` rule above and would lose to it) */
#veApp #btnPanels{display:none;}

@media (max-width:959px){
  #veApp{grid-template-columns:1fr; grid-template-rows:var(--ve-header-h) minmax(0,1fr) 200px;}
  #veCenter,#veTimeline{grid-column:1;}
  #veApp #btnPanels{display:inline-flex;}
  #veMediabin,#veInspector{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:40;
    height:min(46vh,360px); border:none; border-top:1px solid var(--ve-line2); border-radius:16px 16px 0 0;
    box-shadow:0 -14px 34px rgba(0,0,0,.5); transform:translateY(105%); transition:transform .22s ease;}
  body.sheet-media #veMediabin{transform:none;}
  body.sheet-inspector #veInspector{transform:none;}
}

/* ── Plan G Task 4: phone layout (body.ve-mobile) ─────────────────────────
   Mode law: js/ui/layout-mode.mjs — coarse pointer AND min(vw,vh) <= 767px,
   with ?layout= / Settings overrides. main.mjs stamps body.ve-mobile and
   mounts js/ui/layout-mobile.mjs (bottom toolbar #veMobileBar + sheet grip
   #veSheetGrip). The 959px block ABOVE is untouched: it remains the
   desktop-narrow fallback (fine pointer, small window). At phone widths both
   blocks match #veMediabin/#veInspector; every body.ve-mobile selector
   carries an extra class so it wins on specificity, and the sheet body
   classes (sheet-media/sheet-inspector) stay the single positioning law. */

body.ve-mobile{--ve-sheet-h:min(60vh,480px);}
body.ve-mobile .mobile-note{display:none;} /* dedicated UI replaces the "works best on desktop" banner */

/* grid: header / full-bleed preview / timeline strip / bottom toolbar */
body.ve-mobile #veApp{grid-template-columns:1fr;
  grid-template-rows:var(--ve-header-h) minmax(0,1fr) min(34vh,280px) 56px;}
body.ve-mobile #veCenter{grid-column:1;}
/* min-width:0 kills #veTimeline's min-content contribution to the single 1fr
   column: without it the ruler canvas's intrinsic width (timeline content,
   ~3760px on an empty project) blows the track past the viewport and pushes
   the centered preview canvas off-screen. (The 959px desktop-narrow fallback
   above has this same latent overflow at baseline — deliberately NOT fixed
   here, out of Task 4 scope; flagged to the coordinator.) */
body.ve-mobile #veTimeline{grid-row:3; min-width:0;}
body.ve-mobile #vePreviewWrap{padding:0;} /* full-bleed preview */
body.ve-mobile #veCanvas{border-radius:0; box-shadow:none;}
body.ve-mobile #veProjectName{width:110px;} /* header stays one scrollable strip */
body.ve-mobile #veApp #btnPanels{display:none !important;} /* toolbar owns the sheets, not the 959px cycler */

/* bottom toolbar (mounted by layout-mobile.mjs; display:none guards a
   desktop frame during remount). 44px hit targets. */
#veApp #veMobileBar{display:none;}
body.ve-mobile #veApp #veMobileBar{grid-row:4; grid-column:1; display:flex;
  align-items:stretch; gap:6px; padding:6px; padding-bottom:max(6px, env(safe-area-inset-bottom));
  background:var(--ve-panel); border-top:1px solid var(--ve-line); overflow-x:auto;}
body.ve-mobile #veApp #veMobileBar button{flex:1 0 auto; min-width:56px; min-height:44px;
  justify-content:center; font-size:12px;}

/* 44px hit targets on the persistent chrome the thumb actually uses */
body.ve-mobile #veTransport button{min-height:44px;}
body.ve-mobile .ve-tabs button{min-height:44px;}
body.ve-mobile #veHeader button{min-height:40px;} /* 48px header row bound */

/* sheets: same body classes as the 959px fallback, re-skinned — taller
   (60vh), width-independent (mobile-landscape can exceed 959px, where the
   media query above would not match), square top (the grip carries the
   radius). Wins over the 959px block on specificity, not order. */
body.ve-mobile #veMediabin, body.ve-mobile #veInspector{position:fixed; left:0; right:0;
  bottom:0; top:auto; z-index:40; height:var(--ve-sheet-h); border:none;
  border-top:1px solid var(--ve-line2); border-radius:0; box-shadow:0 -14px 34px rgba(0,0,0,.5);
  transform:translateY(105%); transition:transform .22s ease; background:var(--ve-panel);}
body.ve-mobile.sheet-media #veMediabin{transform:none;}
body.ve-mobile.sheet-inspector #veInspector{transform:none;}

/* sheet grip: ONE fixed strip pinned to the sheet's top edge (it lives
   outside the panel containers — the inspector replaceChildren()s its own).
   Hidden below the viewport when no sheet is open, same .22s law. */
#veSheetGrip{display:none;}
body.ve-mobile #veSheetGrip{position:fixed; left:0; right:0; bottom:var(--ve-sheet-h);
  z-index:41; display:flex; align-items:center; justify-content:center; height:28px;
  background:var(--ve-panel); border:1px solid var(--ve-line2); border-bottom:none;
  border-radius:16px 16px 0 0; touch-action:none; cursor:grab;
  transform:translateY(calc(var(--ve-sheet-h) + 100%)); transition:transform .22s ease;}
body.ve-mobile.sheet-media #veSheetGrip, body.ve-mobile.sheet-inspector #veSheetGrip{transform:none;}
body.ve-mobile #veSheetGrip::before{content:''; width:44px; height:5px; border-radius:3px;
  background:var(--ve-line2);}

/* dialogs (Settings/Export/relink — .ve-modal from recovery.mjs) become
   full-screen sheets on the phone: same DOM, style-only (spec §6.2). The
   how-to drawer needs nothing: #howtoPanel is width:min(860px,100%). */
body.ve-mobile .ve-modal{min-width:0; width:100%; max-width:none; height:100%;
  max-height:none; border-radius:0; border:none;}

@media (prefers-reduced-motion: reduce){
  #veApp *, #veMediabin, #veInspector{transition:none !important; animation:none !important;}
}