/* Desktop redesign, 22 Oct 2026. Every rule in this file sits inside the desktop media query below.
   Owner comps: scratch-tmp/desktop-2026-10-22/. Phone and tablet keep what they have. */
@media (min-width:768px){

/* =====================================================================================================================
   LISTING VIDEO (comp 8-listing-video.png)
   One file, two documents, as css/mobile-listing-video.css is. The dashboard links it for the zone's header (selectors under
   .ve.vm-fill, gated by dlv-in, which js/dashboard-video.js sets when the window is a desktop and the frame is wide too). The
   list itself is drawn inside the maker page's frame, so js/dashboard-video.js links this same file into that page's <head> on a
   desktop only, and the frame's selectors sit under html.vm-inframe .resumewrap (the Your videos list). A selector for the one never
   matches in the other.
   ===================================================================================================================== */

/* ---------- the zone's header (the dashboard's document) ---------- */

/* "+ New video": the comp's 46px green button, its label a size up. */
#view .ve.vm-fill.dlv-in .vm-new{height:46px;min-height:46px;margin:-3px 0;padding:0 20px;gap:14px;border-radius:10px;font-size:16px;font-weight:600}
#view .ve.vm-fill.dlv-in .vm-new svg{width:16px;height:16px}
/* The Filming tips link beside it (22 Oct 2026), matched to New video's height so the pair line up. */
#view .ve.vm-fill.dlv-in a.vm-tips{height:46px;min-height:46px;margin:-3px 0;padding:0 18px;gap:12px;border-radius:10px;font-size:16px;font-weight:600}
#view .ve.vm-fill.dlv-in a.vm-tips svg{width:17px;height:17px}

/* When the frame shows the list, the white card around the frame drops: the search and the filter stand on the page bare and each video
   as a card of its own, as in the comp. The editor, the start screen and the empty list keep theirs. The frame is 4px wider each side so a
   card's shadow is not cut at its edge. */
.ve.vm-fill.dlv-in.vm-list:not(.vm-empty) .vm-shell{margin:5px -4px 0;background:none;border-color:transparent;border-radius:0;box-shadow:none;overflow:visible}

/* ---------- the list (the maker page's document, inside the frame) ---------- */

html.vm-inframe body:has(#resumeCard:not(.hidden) #yvRows),html.vm-inframe body.vm-entering{background:transparent}
html.vm-inframe body:has(#resumeCard:not(.hidden) #yvRows) main{padding:0 4px 24px}
html.vm-inframe .resumewrap .yv{padding:0 0 24px}

/* The search and the listings filter: two 46px fields (the comp's 48 at its zoom) on one row. Owner ruling, 31 Oct 2026: they stand on the
   page with no card around them, as Decks' Filter and Search do; each field keeps its own border and white fill. */
html.vm-inframe .resumewrap .yvbar2{flex-wrap:nowrap;gap:14px;margin:0 0 16px;padding:0}
html.vm-inframe .resumewrap .yvfind{flex:1 1 auto;min-width:0;height:46px;margin:0;gap:12px;padding:0 16px;border-radius:10px}
html.vm-inframe .resumewrap .yvfind svg{width:18px;height:18px;flex:none}
html.vm-inframe .resumewrap .yvfind input{font-size:16px}
html.vm-inframe .resumewrap .yvpick{flex:0 1 317px;height:46px;padding:0 14px;border-radius:10px;font-size:16px;color:var(--ink)}

/* A card per video: thumbnail, name over a status line, the specs as one quiet line, a hairline, then square icon buttons. */
/* Owner ruling, 22 Oct 2026 ("lower the UI a bit more, the row by row one"): the cards are shorter than the comp so more fit above the
   fold. The height came out of the thumbnail (111 -> 80 tall, 207 -> 149 wide, same shape), the card's padding (13 -> 10) and the gap
   between cards (18 -> 12). Type, the three 52px buttons and every control are as before.
   Owner ruling, 31 Oct 2026: 15% shorter again, to sit with Decks' rows. The row's 100px (80 thumbnail, 10 padding each side) is 85px (68 and
   8.5), and the thumbnail keeps its shape (149 x 80 -> 127 x 68). */
html.vm-inframe .resumewrap .yvlist{gap:12px}
html.vm-inframe .resumewrap .yvwrap{position:relative;grid-template-columns:minmax(0,1fr) auto;border-radius:14px;border-color:var(--line2);box-shadow:0 1px 2px rgba(20,30,25,.05);
  --yb:52px;--yg:15px;--yp:27px;
  --i-open: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='M10 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4'/%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3C/svg%3E");
  --i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
  --i-down: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='M12 3.5v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4.5 16.5V20h15v-3.5'/%3E%3C/svg%3E");
  --i-redo: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='M20 11a8 8 0 0 0-14.3-4.6L4 8.5'/%3E%3Cpath d='M4 3.5v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.6L20 15.5'/%3E%3Cpath d='M20 20.5v-5h-5'/%3E%3C/svg%3E")}
html.vm-inframe .resumewrap .yvrow{grid-template-columns:minmax(0,1fr) 270px;gap:24px;min-height:0;padding:8.5px 0 8.5px 16px}
html.vm-inframe .resumewrap .yvl{gap:22px}
html.vm-inframe .resumewrap .yvcov{width:127px;height:68px;border-radius:8px}
html.vm-inframe .resumewrap .yvtx{gap:8px}
html.vm-inframe .resumewrap .yvtx b{font-size:20.5px;line-height:1.25;font-weight:600}
html.vm-inframe .resumewrap .yvst{gap:10px;font-size:16.5px;color:var(--ink3)}
html.vm-inframe .resumewrap .yvst::before{width:12px;height:12px}
html.vm-inframe .resumewrap .yvmid{font-size:17.5px;color:var(--ink3)}

/* A draft keeps its own row (the comp has none): the arrow and the text Remove, in the new card. */
html.vm-inframe .resumewrap .yvwrap:has(.yvst[data-k=draft]) .yvrow{grid-template-columns:minmax(0,1fr) 270px 20px;padding-right:22px}

/* A made video (ready, rendering, expired): the hairline, then the square buttons in three fixed slots. The first slot is the row's own
   open (its arrow, drawn as the comp's open icon, or the refresh icon on an expired one); Play and Download take the other two. */
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvside{box-sizing:border-box;align-self:center;width:calc(var(--yb)*3 + var(--yg)*2 + var(--yp) + 30px);height:54px;padding:0 var(--yp) 0 30px;gap:var(--yg);border-left:1px solid var(--line)}
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvrow{grid-template-columns:minmax(0,1fr) 270px}
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvgo{display:none}
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvrow::before,
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvrow::after{content:"";position:absolute;top:50%;box-sizing:border-box;cursor:pointer}
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvrow::before{right:calc(var(--yp) + 2*var(--yb) + 2*var(--yg));width:var(--yb);height:var(--yb);margin-top:calc(var(--yb) / -2);border:1px solid var(--line2);border-radius:10px;background:var(--card)}
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvrow::after{right:calc(var(--yp) + 2*var(--yb) + 2*var(--yg) + (var(--yb) - 24px) / 2);width:24px;height:24px;margin-top:-12px;background:var(--ink);
  -webkit-mask:var(--i-open) center/24px 24px no-repeat;mask:var(--i-open) center/24px 24px no-repeat}
html.vm-inframe .resumewrap .yvwrap:has(.yvst[data-k=gone]) .yvrow::after{-webkit-mask-image:var(--i-redo);mask-image:var(--i-redo)}
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvrow:hover::before{background:var(--accbg);border-color:var(--acc)}
html.vm-inframe .resumewrap .yvwrap:not(:has(.yvst[data-k=draft])) .yvrow:focus-visible::before{outline:2px solid var(--acc);outline-offset:2px}

html.vm-inframe .resumewrap .yvside .yvlink[data-vplay],
html.vm-inframe .resumewrap .yvside a.yvlink[download]{position:relative;flex:none;box-sizing:border-box;width:var(--yb);height:var(--yb);min-height:var(--yb);padding:0;overflow:hidden;border:1px solid var(--line2);border-radius:10px;background:var(--card);font-size:0;line-height:0;text-decoration:none}
html.vm-inframe .resumewrap .yvside .yvlink[data-vplay]:hover,
html.vm-inframe .resumewrap .yvside a.yvlink[download]:hover{background:var(--accbg);border-color:var(--acc)}
html.vm-inframe .resumewrap .yvside .yvlink[data-vplay]::before,
html.vm-inframe .resumewrap .yvside a.yvlink[download]::before{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;background:var(--ink);
  -webkit-mask:var(--i-play) center/24px 24px no-repeat;mask:var(--i-play) center/24px 24px no-repeat}
html.vm-inframe .resumewrap .yvside a.yvlink[download]::before{-webkit-mask-image:var(--i-down);mask-image:var(--i-down)}

/* =====================================================================================================================
   EDIT VIDEO: Overview and By clip (owner comps d1, d2, d3, 22 Oct 2026: scratch-tmp/desktop-2026-10-22/lv/)
   The structure is in video-maker-v2.html (the .lvmode, .lvhead, .stfold, .lrow, .clipstrip blocks); this is the desktop's sizes
   and look over it. Overview: the player with its controls on the picture, the timeline (fact cards, then the clips each with Edit
   clip), and Video defaults. By clip: the player, the clips as equal tiles with the fact cards under, and the clip's own panel.
   ===================================================================================================================== */

/* The two views: a pill of two, the open one outlined in green. */
html.vm-inframe #s-script #editorWrap.editing > .lvmode{border-radius:12px}
html.vm-inframe .lvmode button{min-width:168px;height:46px;font-size:17px}

/* The player: its controls ride the bottom of the picture on a soft dark fade, as the comps draw them. */
html.vm-inframe #s-script #previewOut{position:relative}
html.vm-inframe #s-script .player{border-radius:14px}
html.vm-inframe #s-script #previewOut .pbar{position:absolute;left:0;right:0;bottom:0;z-index:6;gap:14px;padding:30px 18px 12px;border:0;border-radius:0 0 14px 14px;background:linear-gradient(to top,rgba(10,14,12,.72),rgba(10,14,12,0));color:#fff}
html.vm-inframe #s-script #previewOut .pbar .t,html.vm-inframe #s-script #previewOut .pbar .vfull{color:#fff}
html.vm-inframe #s-script #previewOut .pbar .vfull:hover{color:#fff;opacity:.8}
html.vm-inframe #s-script #previewOut .pbar #pPlayBtn{width:42px;height:42px;background:rgba(14,18,16,.9);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
html.vm-inframe #s-script #previewOut .pbar input[type=range]{accent-color:#fff}
html.vm-inframe #editorWrap[data-lvmode="overview"] .pchip{display:inline-flex}

/* The panel: a 14px card; its head is the comp's 22px title with a badge. */
html.vm-inframe #s-script #editorWrap.editing #editorSide{border-radius:14px}
html.vm-inframe .lvhead{padding:18px 20px 8px}
html.vm-inframe .lvh1 h3{font-size:24px}
html.vm-inframe .edbody{padding:6px 16px 8px}
html.vm-inframe #editorWrap[data-lvmode="clip"] #edTabs{margin:6px 16px 0}
html.vm-inframe .stsec{padding:10px 4px 14px;margin-bottom:6px}
html.vm-inframe .sth{margin:0 0 10px}
html.vm-inframe .stfold{font-size:16.5px}
html.vm-inframe .stfold .stsum{font-size:15px}
html.vm-inframe #stColSum,html.vm-inframe #stAudSum{display:none}
html.vm-inframe .stlooks{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Position is one select, as the comp draws it; it runs the control column's width. */
html.vm-inframe #capPosSel,html.vm-inframe #labelPos{flex:1 1 auto;width:auto}
html.vm-inframe .stroom .stctl{justify-content:flex-end}
html.vm-inframe .stroom #labelPos{flex:0 0 150px}

/* The timeline card: its title and range, the zoom at the right, then the lanes under a left gutter. */
html.vm-inframe #s-script #darkBlock{padding:14px 16px 16px;border-radius:14px}
html.vm-inframe .tlhead b{font-size:17px}
html.vm-inframe .tlhead .tlrange{font-size:14.5px}
html.vm-inframe #s-script #stripWrap{--lg:108px;padding:6px 0 2px}
html.vm-inframe #s-script #stripRuler{height:30px}
html.vm-inframe #cardLane{height:38px;margin:0}
html.vm-inframe #cardLane.two{height:70px}
html.vm-inframe .cardmark{height:32px;padding:0 10px;border-radius:6px;background:#E9B85C;color:#3A2A08;font-size:14.5px;line-height:32px;box-shadow:none}
html.vm-inframe .cardmark::after{display:none}
html.vm-inframe .cardmark.low{top:38px}
html.vm-inframe .cardmark svg{width:15px;height:15px}
html.vm-inframe #s-script #strip{height:70px;gap:6px}
html.vm-inframe #s-script #strip button{border-radius:8px}
html.vm-inframe #s-script #strip button .lbl{display:none}
html.vm-inframe .clipcell{padding-top:6px}
html.vm-inframe .clipnm{font-size:13.5px}
html.vm-inframe #s-script #playhead{top:34px}

/* By clip's strip of clips: equal tiles, the open one ringed in green. */
html.vm-inframe .clipstrip{padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
html.vm-inframe .cs-pos{display:none}
html.vm-inframe .cs-head b{font-size:17px}
html.vm-inframe .cs-row{gap:10px}
html.vm-inframe .cs-tile{flex:1 1 0;min-width:96px}
html.vm-inframe .cs-name{font-size:14px}
}