/* Desktop redesign, 22 Oct 2026. Every rule in this file sits inside the desktop media query below.
   Owner comp: scratch-tmp/desktop-2026-10-22/9-reels.png. Phone and tablet keep what they have. */
@media (min-width:768px){
/* A phone held sideways is wider than 768 but is still a phone (mobile-reels.css keys on the same pair), so it is left out here. */
@media not ((pointer:coarse) and (max-height:500px)){

/* =====================================================================================================================
   REELS LIST (comp 9-reels.png)
   The dashboard scales the page by --uz (0.9576 at the comp's 1584 width), so a length drawn in the comp's own pixels is
   written as calc(N * var(--r)): --r is one comp pixel in this page's units. At 1584 the list measures as the comp does.
   The markup is reelRow / rowWithRemove / paintLibrary in js/video-editor.js. The row itself is the open button, so the
   play pill and the open icon are parts of it; a draft's trash button sits inside the same card, outside that button.
   ===================================================================================================================== */
html body #view .ve{--r:calc(1px / var(--uz,1));
  --ve-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")}

/* ---------- the header: New reel ----------
   Only the button is restyled. Its row (.tools) is left as the shell draws it, so a second control can sit beside it. */
/* Owner, 28 Oct 2026 ("yes matched", after the rows took the Decks sizes): the head and the toolbar take Decks' too
   (css/desktop-decks.css, page head and toolbar), in its plain px: the same 1296 column, a 46px title, a 45px New button,
   and a 51px toolbar with the filter on the left and a 419px search on the right. */
html body #view .ve:has(>.ve-library){max-width:1296px}
html body #view .ve:has(>.ve-library)>.head{margin-bottom:19px!important}
html body #view .ve:has(>.ve-library)>.head h1{font-size:46px!important;letter-spacing:-.04em!important;font-weight:650!important;line-height:1!important}
html body #view .ve>.head .tools>button[data-ve=new]{height:45px;min-height:0;padding:0 33px;gap:15px;border-radius:9px;font-size:16.5px!important;font-weight:600}
html body #view .ve>.head .tools>button[data-ve=new] span{font-size:inherit!important;font-weight:inherit!important;letter-spacing:0;word-spacing:0}
html body #view .ve>.head .tools>button[data-ve=new] svg{width:19px;height:19px}
/* The Filming tips link beside it (22 Oct 2026). It took the shell's default ghost height of 37px against New reel's 44,
   so the two sat visibly off each other. Matched here rather than in the shell, since only this header pairs them. */
html body #view .ve>.head .tools>a.ve-tips{height:45px;min-height:0;padding:0 20px;gap:12px;border-radius:9px;font-size:16.5px!important;font-weight:600}
html body #view .ve>.head .tools>a.ve-tips svg{width:17px;height:17px}

/* ---------- no card around the list ---------- */
/* Owner, 22 Oct 2026: "can we also make reels like deck and listing video, where its not cards in a card". The rows are the
   cards and nothing wraps them. */
html body #view .ve .ve-library.tour-library-card{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}

/* search and listings: two 48px fields, 14px apart, 16px above the first row.
   The search field STOPS at 360 instead of filling the row (owner, 27 Oct 2026: "make my serach bar better like hte
   toher ones"). It was `flex:1 1 auto;width:auto` and rendered 926px at 1400, against the 340 every other library bar
   uses, so Reels had the only search field in the product that ran half the screen. 360 rather than 340 because this
   zone's field is 48 tall with 20 of padding where the shell's is 40 with 12, and it scales on --r with the rest of
   the pass. The height, padding, radius and the 14px gap from the 22 Oct comp are untouched; the listings field is
   pushed to the right edge so the pair reads as the other zones' bars do. */
/* 28 Oct 2026: Decks' toolbar (see the note at the head). The markup keeps search first; `order` puts the listings filter
   on the left where Decks has its Filter, and the search on the right at Decks' 419px. */
html body #view .ve .ve-library .tour-library-bar{flex-wrap:nowrap;gap:14px;padding:0 0 26px!important;margin:0;justify-content:space-between;align-items:center}
html body #view .ve .ve-library .tour-library-bar>label:first-child{order:2;flex:0 1 419px;width:419px;max-width:100%;min-width:0;height:51px;padding:0 20px;gap:17px;border:1px solid var(--line)!important;border-radius:10px;box-sizing:border-box;background:var(--card)}
html body #view .ve .ve-library .tour-library-bar>label:first-child svg{flex:none;width:21px;height:21px;color:var(--ink-2)}
html body #view .ve .ve-library .tour-library-bar>label:first-child input{font-size:17px}
html body #view .ve .ve-library .ve-lib-filter{order:1;flex:0 0 240px;width:240px;max-width:none;height:51px;padding:0 16px 0 18px;border:1px solid var(--line);border-radius:10px;box-sizing:border-box;background-color:var(--card);font-size:16px!important;font-weight:500;color:var(--ink)}

/* ---------- the rows: one white card per reel (96px since 28 Oct 2026, see the note above the first row rule) ----------
   Owner, 22 Oct 2026, "override everything and build what i sent" (comp reels-list-v2-approved.webp, "a new design", "increase the
   card size around each one of them"). This REVERSES the same evening's three tightening passes (row 87 -> 68 -> 56px, smaller
   type and icons): the card is ~120px tall with 22px above and below its thumbnail, 17px of page between cards, and the type
   and icons are back up. The comp is about 1.19x the dashboard's own pixels (its search field is 57px where ours is 48), so a
   comp length is written here as comp x 0.84.
   A card is a five-column grid, thumbnail | name | status | length | open, in two lines. The two wrappers inside the row button
   (the first span and the text block) are display:contents so their pieces are grid items of the row itself:
     line 1   format name (bold)        Draft pill
     line 2   listing name (grey)       status sentence (grey)             and the thumbnail, length and open icon span both. */
/* Owner, 28 Oct 2026, with his screenshot of Decks: "lower the size of the [reels] to copy deck sizing and layout". The rows
   below now take the Decks rows' own measurements (css/desktop-decks.css, his 23 Oct "also lower the size"): a 96px card,
   10px corners, 14px between cards, a 17px name over a 13.5px second line. They are written in plain px, the unit that sheet
   uses, so the two lists scale with the page identically; the header and the search bar above keep --r. The 44px tap floor
   (r144) holds: the trash button and the Remove / Keep answers stay 44 while the glyphs inside them shrink. */
html body #view .ve .ve-library .tour-table{display:grid;gap:14px;margin:0}
html body #view .ve .ve-row-wrap{position:relative;display:block}
html body #view .ve .tour-library-row.ve-row{display:grid!important;grid-template-columns:48px minmax(0,1.9fr) minmax(0,1fr) 84px 44px!important;grid-template-rows:auto auto;align-content:center;align-items:center;
  column-gap:19px!important;row-gap:3px!important;width:100%;min-height:96px!important;margin:0!important;
  padding:16px 76px 16px 20px!important;box-sizing:border-box;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--card)!important;
  box-shadow:0 1px 2px rgba(20,20,20,.04)!important;text-align:left;cursor:pointer}
html body #view .ve .tour-library-row.ve-row:hover{background:var(--card-2)!important}
html body #view .ve .tour-library-row.ve-row:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
html body #view .ve .tour-library-row.ve-row>span:first-child,html body #view .ve .ve-row .ve-row-text{display:contents}

/* the thumbnail: 48 x 56 (66 x 75 before the 28 Oct pass). No cover is a flat grey tile with an outlined play triangle; a cover is the picture with a dark round
   play button low on it. */
html body #view .ve .ve-row .ve-cover{grid-column:1;grid-row:1 / 3;align-self:center;width:48px;height:56px;aspect-ratio:auto;border-radius:4px;border:0;background:color-mix(in srgb,var(--ink) 7%,var(--card));color:var(--ink-3)}
html body #view .ve .ve-row .ve-cover svg{width:17px;height:17px;margin:0 0 0 2px;stroke-width:1.5}
html body #view .ve .ve-row .ve-cover:has(img){background:var(--card-3)}
html body #view .ve .ve-row .ve-cover:has(img)::after{content:"";position:absolute;left:50%;top:60%;width:20px;height:20px;transform:translate(-50%,-50%);border-radius:50%;
  background:#1c1c1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 6.6v10.8L18 12z' fill='white'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 1px 3px rgba(0,0,0,.35)}

/* line 1 left: the format name. The full "Format · Listing" in <b> is for the phone; the card shows the format alone. */
html body #view .ve .ve-row .ve-row-title{grid-column:2;grid-row:1;align-self:end;display:block;min-width:0}
html body #view .ve .ve-row .ve-row-title b{display:none}
html body #view .ve .ve-row .ve-d-fmt[hidden]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-style:normal;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
/* line 2 left: the listing name */
html body #view .ve .ve-row .ve-m-addr[hidden]{grid-column:2;grid-row:2;align-self:start;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-style:normal;font-weight:400;line-height:1.3;color:var(--ink-3)}
/* line 1 centre: the Draft pill with its amber dot (a done reel's pill is the green one, phoneCard's own) */
html body #view .ve .ve-row .ve-m-pill[hidden]{grid-column:3;grid-row:1;align-self:end;justify-self:start;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 11px 0 10px;box-sizing:border-box;border-radius:999px;
  font-size:13px;font-style:normal;font-weight:500;line-height:1;white-space:nowrap}
html body #view .ve .ve-row .ve-m-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
html body #view .ve .ve-row .ve-m-pill.is-draft{background:var(--ve-amber-bg);color:color-mix(in srgb,var(--ve-amber) 70%,var(--ink))}
html body #view .ve .ve-row .ve-m-pill.is-draft::before{background:#F5A200}
html body #view .ve .ve-row .ve-m-pill.is-done{background:var(--sig-bg);color:var(--sig)}
/* line 2 centre: what is left to do */
html body #view .ve .ve-row .ve-d-status[hidden]{grid-column:3;grid-row:2;align-self:start;display:block;min-width:0;font-size:13.5px;font-style:normal;line-height:1.3;color:var(--ink-3);text-wrap:balance}
/* A narrower window gives the sentence more of the card and a touch less type, so it breaks once, evenly, not as an orphan word. */
@media (max-width:1380px){
  html body #view .ve .tour-library-row.ve-row{grid-template-columns:48px minmax(0,1fr) minmax(0,1.1fr) 84px 44px!important}
  html body #view .ve .ve-row .ve-d-status[hidden]{font-size:13px}
}
/* While the card asks "Remove this draft?" the question takes the right of the card, so the sentence it would cut across steps aside. */
html body #view .ve .ve-row-wrap:has(.ve-row-remove.is-asking) .ve-row .ve-d-status{visibility:hidden}
/* the old one-line summary and the phone's own pieces stay out of the card */
html body #view .ve .ve-row .ve-row-text .ve-row-draft,html body #view .ve .ve-row .ve-row-text .ve-row-state{display:none}
/* a card with no listing line or no status line centres what it has across both lines */
html body #view .ve .tour-library-row.ve-row:not(:has(.ve-m-addr)) .ve-row-title{grid-row:1 / 3;align-self:center}
html body #view .ve .tour-library-row.ve-row:not(:has(.ve-d-status)) .ve-m-pill{grid-row:1 / 3;align-self:center}

/* the length: a pale pill. A real length leads with a play triangle; an estimate reads "About 0:09" on its own. */
html body #view .ve .tour-library-row.ve-row>span.ve-len{grid-column:4;grid-row:1 / 3;align-self:center;justify-self:end;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:84px;height:30px;padding:0 8px;box-sizing:border-box;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 7%,var(--card));color:var(--ink);font-size:13.5px!important;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
html body #view .ve .tour-library-row.ve-row>span.ve-len:empty{display:none}
html body #view .ve .tour-library-row.ve-row>span.ve-len.is-real::before{content:"";flex:none;width:11px;height:13px;background:var(--ink);-webkit-mask:var(--ve-i-play) center/contain no-repeat;mask:var(--ve-i-play) center/contain no-repeat}

/* the open icon, bare, at the card's right (the row is the open button). The state chips are the pill's job now; only the
   "Listing updated" warning stays. */
html body #view .ve .tour-library-row.ve-row>span.ve-row-chips{grid-column:5;grid-row:1 / 3;align-self:center;justify-content:flex-end;gap:10px}
/* 28 Oct 2026: the open control is Decks' boxed arrow (desktop-decks.css .arw): a 44px bordered square holding the same
   diagonal arrow, drawn after any warning chip. The row's own external-link glyph is hidden on desktop only. */
html body #view .ve .tour-library-row.ve-row>span.ve-row-chips>svg{display:none}
html body #view .ve .tour-library-row.ve-row>span.ve-row-chips{position:relative;display:flex;align-items:center}
html body #view .ve .tour-library-row.ve-row>span.ve-row-chips::after{content:"";flex:none;width:44px;height:44px;box-sizing:border-box;border:1px solid var(--card-edge);border-radius:10px;
  background:var(--card-2,var(--card));transition:border-color .16s ease}
html body #view .ve .tour-library-row.ve-row:hover>span.ve-row-chips::after{border-color:var(--card-edge-strong,var(--card-edge))}
html body #view .ve .tour-library-row.ve-row>span.ve-row-chips::before{content:"";position:absolute;z-index:1;right:10.5px;top:50%;width:23px;height:23px;margin-top:-11.5px;background:var(--ink);pointer-events:none;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18 18 6M8.5 6H18v9.5"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18 18 6M8.5 6H18v9.5"/></svg>') center/contain no-repeat}
html body #view .ve .tour-library-row.ve-row .chip:not(.ve-chip-stale){display:none}
html body #view .ve .tour-library-row.ve-row .chip{font-size:12px!important}
/* 1 Nov 2026: "Listing updated" sat in the 44px open-button column and spilled left over the length pill. It now sits at the
   right end of the status column, level with the Draft pill (row 1 ends 1.5px above the card's middle). */
html body #view .ve .tour-library-row.ve-row>span.ve-row-chips>.ve-chip-stale{position:absolute;right:calc(100% + 19px + 84px + 19px);bottom:calc(50% + 1.5px);
  display:inline-flex;align-items:center;height:24px;margin:0;padding:0 10px;box-sizing:border-box;white-space:nowrap}
/* Its explanation opens on hover, tap or focus only: plinth-v50's `.tour-library-row span{display:flex}` held it open on every row. */
html body #view .ve .tour-library-row.ve-row .ve-chip-stale>.tap-tip-pop{display:none}
html body #view .ve .tour-library-row.ve-row .ve-chip-stale:is(:hover,[aria-expanded="true"],:focus-visible)>.tap-tip-pop{display:block}

/* a draft's trash: a bare icon inside the card, 38px from its right edge. The hit area is the icon and a hair more, no wider
   than the word Remove was. The first press only asks; the answer is in the sentence below. */
html body #view .ve .ve-row-wrap>.ve-row-remove{position:absolute;top:50%;right:16px;transform:translateY(-50%);display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:13.5px;color:var(--ink-3)}
html body #view .ve .ve-row-remove .ve-row-x{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
html body #view .ve .ve-row-remove .ve-row-x:hover{background:var(--card-3)}
html body #view .ve .ve-row-remove .ve-row-x:focus-visible{outline:2px solid var(--sig);outline-offset:1px}
/* Owner, 22 Oct 2026: "lower the icon size aswell". The GLYPH shrinks, the 44px button around it does not: the hit area
   is a touch-target minimum and is not a visual size. */
html body #view .ve .ve-row-remove .ve-row-x svg{width:21px;height:21px;stroke-width:1.7}
html body #view .ve .ve-row-remove .ve-row-x span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the question that replaces the icon: a plain sentence, Remove, then Keep last, so the safe answer is the one under the
   pointer where the icon was. It covers the pill and the open icon until it is answered. */
html body #view .ve .ve-row-wrap>.ve-row-remove.is-asking{right:16px;padding:4px 8px 4px 20px;border-radius:10px;background:var(--card);z-index:2;gap:8px}
html body #view .ve .ve-row-remove.is-asking .ve-quiet{margin-right:6px;font-size:14px;font-weight:500;color:var(--ink)}
html body #view .ve .ve-row-remove.is-asking .ve-link{display:inline-flex;align-items:center;height:44px;padding:0 14px;box-sizing:border-box;border:1px solid var(--line-2);border-radius:8px;background:var(--card);color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;cursor:pointer}
html body #view .ve .ve-row-remove.is-asking .ve-link[data-sure]{border-color:var(--bad,#b3402f);color:var(--bad,#b3402f)}
html body #view .ve .ve-row-remove.is-asking .ve-link:hover{background:var(--card-2)}

/* ---------- the footer: the count at the left, the pager at the right, no rule above ---------- */
html body #view .ve .ve-library .tour-pagination{display:flex;align-items:center;gap:calc(19*var(--r));margin:calc(8*var(--r)) 0 0!important;padding:0!important;border:0!important;font-size:calc(14.5*var(--r));color:var(--ink-3)}
html body #view .ve .ve-library .tour-pagination>span:first-child{margin-right:auto;font-size:calc(14.5*var(--r))}
html body #view .ve .ve-library .tour-pagination>span:not(:first-child){font-size:calc(15*var(--r));color:var(--ink-2)}
html body #view .ve .ve-library .tour-pagination button{height:calc(36*var(--r));padding:0 calc(11*var(--r));box-sizing:border-box;border:1px solid var(--line);border-radius:calc(7*var(--r));background:var(--card);color:var(--ink);font-size:calc(14.5*var(--r));font-weight:500}
html body #view .ve .ve-library .tour-pagination button[disabled]{opacity:1;color:color-mix(in srgb,var(--ink-3) 70%,var(--card))}

/* =====================================================================================================================
   REVIEW, ONE SCREEN (owner design bot comp, 31 Oct 2026), for a reel with no caption settings only (Blackout, Carousell,
   Card Reveal). `.rv-compact` is set on the editor by paintStep in js/video-editor.js, on the Review step alone. The home and
   the step bar share one row, the player and Reel settings are two cards side by side, Saved is one row inside the settings
   card, and the strip of clips sits on the same screen above the footer.
   ===================================================================================================================== */
/* Owner, 31 Oct 2026: no empty band under the footer at any interface scale. The editor is at least the window's height (100dvh in
   page units, as --tour-h is), the step takes what is left, and the two cards grow into it, so a short Review (Card Reveal, no clip
   strip) puts its footer at the screen's foot and spends the room on a larger player. */
html body #view .ve.rv-compact{display:flex;flex-direction:column;min-height:calc(100dvh / var(--uz,1) - 8px);box-sizing:border-box}
html body #view .ve.rv-compact>.ve-step{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
html body #view .ve.rv-compact>.ve-step>.rv-wrap{flex:1 1 auto}
html body #view .ve.rv-compact>.head.ve-head-bare{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)}
html body #view .ve.rv-compact>.ve-steps-sticky{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 2px}
html body #view .ve.rv-compact .ve-steps{flex:1 1 auto;margin:4px 0;padding:0}
html body #view .ve.rv-compact .ve-steps-thumb{width:46px;height:46px;border-radius:8px}
html body #view .ve.rv-compact .ve-steps-who b{font-size:17px}
html body #view .ve.rv-compact .ve-steps-who small{font-size:13.5px}
html body #view .ve.rv-compact>.ve-steps-sticky>.ve-tabs{flex:0 0 auto;flex-wrap:nowrap;margin:0 calc(12% - 40px) 0 0}
html body #view .ve.rv-compact>.ve-steps-sticky>.ve-tabs button{min-height:36px;padding:0 14px;border-bottom:0;font-size:15px}
html body #view .ve.rv-compact>.ve-steps-sticky>.ve-tabs button+button{margin-left:44px}
html body #view .ve.rv-compact>.ve-steps-sticky>.ve-tabs button+button::before{left:-44px;top:50%;bottom:auto;width:44px;height:1px}
html body #view .ve.rv-compact .rp-wiz-head.rv-head{margin:0 0 6px;gap:10px 28px}
html body #view .ve.rv-compact>.ve-step{margin-top:0;padding-top:0}
html body #view .ve.rv-compact .rv-clip-txt{gap:2px}
html body #view .ve.rv-compact .rv-head h2{font-size:26px}
html body #view .ve.rv-compact .rv-view-tab{min-height:36px;font-size:15px}

html body #view .ve.rv-compact .ve-check.rp-check.rv-wrap{grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);gap:8px;align-items:stretch;border:0;border-radius:0;background:none;box-shadow:none}
html body #view .ve.rv-compact .rv-wrap.is-clip{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)}
html body #view .ve.rv-compact .rv-wrap>.ve-stage,html body #view .ve.rv-compact .rv-wrap>.ve-check-side{border:1px solid var(--card-edge,var(--ve-line))!important;border-radius:14px!important;background:var(--card,#fff)!important;box-shadow:var(--ve-shadow)!important}
html body #view .ve.rv-compact .rv-wrap>.ve-stage{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px 18px!important}
/* The settings card sets the row's height; the player takes whatever height is left (flex-basis 0 adds nothing to the row). */
html body #view .ve.rv-compact .rv-wrap>.ve-stage>.ve-phone{flex:1 1 0;contain:size;min-height:0;height:auto;width:auto;max-width:none;min-width:0;align-self:center;aspect-ratio:9 / 16}
html body #view .ve.rv-compact .rv-wrap>.ve-stage>.ve-phone:has(>.ve-frame .ve-phases){flex:none;contain:none;width:100%;aspect-ratio:auto}
html body #view .ve.rv-compact .rv-panel-title{font-size:20px}
html body #view .ve.rv-compact .rv-scope{min-height:34px;padding:4px 10px}
html body #view .ve.rv-compact .rp-set-h{font-size:16px}
html body #view .ve.rv-compact .rp-grade-sel{min-height:0;padding-top:5px;padding-bottom:5px}
html body #view .ve.rv-compact .rp-grade-strip{height:18px}
html body #view .ve.rv-compact .rp-grade-line{font-size:13px}
html body #view .ve.rv-compact .rp-track-box{min-height:0;height:34px}
html body #view .ve.rv-compact .rp-track-name{padding-top:4px;padding-bottom:4px}
html body #view .ve.rv-compact .rp-track-play{height:32px;width:32px}
html body #view .ve.rv-compact .rp-set-group{gap:8px}
html body #view .ve.rv-compact .rp-set-group+.rp-set-group{padding-top:8px}
html body #view .ve.rv-compact .rp-set-group:has(+.rp-set-group){padding-bottom:8px}
html body #view .ve.rv-compact .rp-grade-pick{gap:6px}
html body #view .ve.rv-compact .rp-set-row{min-height:0}
html body #view .ve.rv-compact .rv-wrap>.ve-check-side{gap:10px;padding:14px 18px!important}
html body #view .ve.rv-compact .rv-wrap>.ve-check-side>.rp-review{padding:0;border:0;background:none;box-shadow:none}
html body #view .ve.rv-compact .rv-panel-head{margin:0 0 4px}
html body #view .ve.rv-compact .rv-set-body{gap:8px}
html body #view .ve.rv-compact .ve-export-slot>.rp-saved{grid-template-columns:minmax(0,1fr) auto;justify-items:start;align-items:center;column-gap:16px;padding:10px 14px}
html body #view .ve.rv-compact .rp-saved-h{grid-column:1;margin:0;font-size:16px;line-height:22px}
html body #view .ve.rv-compact .ve-export-slot>.rp-saved{padding-top:8px;padding-bottom:8px}
html body #view .ve.rv-compact .rv-set-body{gap:6px}
html body #view .ve.rv-compact .rp-set-row input:not([type=range]){height:30px;min-height:0;padding-top:2px;padding-bottom:2px}
html body #view .ve.rv-compact .rp-saved-h .rp-disc{width:24px;height:24px}
html body #view .ve.rv-compact .rp-saved-note{grid-column:1;width:auto;margin:2px 0 0 34px;padding:0;border:0;font-size:13px;text-align:left;white-space:nowrap}
html body #view .ve.rv-compact .rp-saved .ve-wide{grid-column:2;grid-row:1 / span 2;width:auto;min-height:40px;margin:0;padding:0 16px;font-size:14.5px}

html body #view .ve.rv-compact .rv-clips{margin:8px 0 0;padding:8px 14px 4px}
html body #view .ve.rv-compact .rv-clips-head{margin:0 0 6px}
html body #view .ve.rv-compact .rv-clips-head h3{font-size:18px;line-height:1.2}
html body #view .ve.rv-compact .rv-clips-head p{font-size:13.5px}
html body #view .ve.rv-compact .rv-clip-list{padding:2px 2px 4px}
html body #view .ve.rv-compact .ve-step>.ve-gate{margin-top:8px;padding:6px 12px 6px 18px}
html body #view .ve.rv-compact .rv-clip{gap:12px;padding:6px}
html body #view .ve.rv-compact .rv-clip.is-on{padding:5px}
html body #view .ve.rv-compact .rv-clip-pic{flex-basis:42%;aspect-ratio:21 / 9}

}
}