/* Post preview (dashboards.client._preview): the client app's approval card and the AI osakond content-plan
   preview (Diana 22.10 and 09.11.2026). Shared by both pages, so the colours fall back to each page's own tokens.
   Behaviour: /js/post-preview.js. */
/* Video player: whole frame, any aspect ratio, never cropped (the content sheet's big preview and the approval card) */
.vp{display:grid;gap:8px;min-width:0}
.vp-frame{position:relative;aspect-ratio:9/16;width:min(100%,calc(72vh * 9 / 16));margin:0 auto;background:#0B0B0B;border-radius:var(--r-sm,var(--radius,8px));overflow:hidden;cursor:pointer}
.vp-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.vp-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.vp-btn{font:600 12px/1 var(--f-body,var(--font-body,system-ui,sans-serif));padding:7px 11px;border-radius:999px;border:1px solid var(--hair-2,var(--line,#e2ddd3));background:var(--card,#fff);color:var(--ink,#0B0B0B);text-decoration:none;cursor:pointer}
.vp-btn:hover{border-color:var(--ink,#0B0B0B)}
.vp-big{padding-bottom:6px}.vp-big .vp-frame{border-radius:0}
/* Channel previews on a post's approval card (dashboards.client._preview; Diana 22.10 and 09.11.2026).
   One phone screen (.vp-scr, 9:16, the cqw container: 100cqw wide, 177.8cqw tall) holds the one picture (.vp-media);
   the tab (data-vp-view) moves and crops it as the app does and shows that app's parts around or over it.
   Every part is CSS and inline SVG and never takes a click. Sizes are approximations of a 390 pt wide phone. */
.vp-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.vp-tabs button{border:1px solid var(--hair,var(--line,#e2ddd3));background:var(--card,#fff);color:var(--ink,#0B0B0B);border-radius:999px;padding:4px 10px;font:500 12px/1.25 var(--f-body,var(--font-body,system-ui,sans-serif));white-space:nowrap;cursor:pointer}
.vp-tabs button[aria-selected="true"]{background:var(--ink,#0B0B0B);border-color:var(--ink,#0B0B0B);color:var(--paper,#fff)}
.vp-tabs button:focus-visible{outline:2px solid var(--teal,#0C5B55);outline-offset:2px}
.vp-safe-t{display:none;justify-self:center;align-items:center;gap:6px;font-size:12px;color:var(--muted,#6b6b6b);cursor:pointer}
.vp:is([data-vp-view="ig_reel"],[data-vp-view="fb_reel"],[data-vp-view="story"],[data-vp-view="tiktok"]) .vp-safe-t{display:inline-flex}
.vp-stage{position:relative;display:grid;gap:6px;min-width:0}
.vp-stage .vp-frame{cursor:default}
.vp-scr{position:absolute;inset:0;container-type:inline-size;overflow:hidden;background:#0B0B0B;color:#fff}
.vp-media{position:absolute;inset:0;overflow:hidden}
.vp-media[data-vp-act]{cursor:pointer}
.vp-media video,.vp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.vp-cell,.vp-cell-mark,.vp-ch{display:none}
.vp-count{position:absolute;top:3cqw;right:3cqw;background:rgba(0,0,0,.6);color:#fff;font:600 3.2cqw/1 sans-serif;padding:1.2cqw 2.2cqw;border-radius:99px}
/* The player's buttons: only on mouse hover (or keyboard focus) over the picture; under it on a touch screen. */
@media (hover:hover) and (pointer:fine){
  .vp-stage .vp-bar{position:absolute;left:0;right:0;bottom:10px;z-index:2;opacity:0;pointer-events:none;transition:opacity .15s}
  .vp-stage:hover .vp-bar,.vp-stage:focus-within .vp-bar{opacity:1;pointer-events:auto}
}
/* Feed 4:5 and grid 1:1: the app's light page around the picture. The feed takes the picture's own shape between
   4:5 and 1.91:1 (--vp-feed-h, set by the script once the size is known), so a tall video or photo is cropped to 4:5. */
.vp:is([data-vp-view="ig_feed"],[data-vp-view="fb_feed"],[data-vp-view="ig_grid"]) .vp-scr{background:#fff;color:#0B0B0B}
.vp[data-vp-view="ig_feed"] .vp-ch-ig_feed,.vp[data-vp-view="fb_feed"] .vp-ch-fb_feed,.vp[data-vp-view="ig_grid"] .vp-ch-ig_grid{display:block}
.vp[data-vp-view="ig_feed"] .vp-media{inset:auto 0 auto 0;top:24cqw;height:var(--vp-feed-h,125cqw)}
.vp[data-vp-view="fb_feed"] .vp-media{inset:auto 0 auto 0;top:32cqw;height:var(--vp-feed-h,125cqw)}
.vp:is([data-vp-view="ig_feed"],[data-vp-view="fb_feed"]) .vp-media :is(video,img){object-fit:cover}
.vp[data-vp-view="ig_grid"] .vp-media{inset:auto;top:60.5cqw;left:0;width:calc((100cqw - 1.2cqw) / 3);height:calc((100cqw - 1.2cqw) / 3);cursor:default}
.vp[data-vp-view="ig_grid"] .vp-media video{visibility:hidden}
.vp[data-vp-view="ig_grid"] .vp-media img{object-fit:cover}
.vp[data-vp-view="ig_grid"] .vp-cell{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#E9E4DA}
.vp[data-vp-view="ig_grid"] .vp-cell-mark{display:block;position:absolute;top:1.5cqw;right:1.5cqw;color:#fff}
.vp[data-vp-view="ig_grid"] .vp-count{display:none}
.vp-cell-mark svg{display:block;width:4.5cqw;height:4.5cqw;fill:none;stroke:currentColor;stroke-width:2;filter:drop-shadow(0 0 1px rgba(0,0,0,.7))}
.vp-ch{position:absolute;inset:0;pointer-events:none;font:400 3.5cqw/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.vp-ch svg{display:block;flex:none;width:6.5cqw;height:6.5cqw;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vp-ch b{font-weight:700}
.vp-ch .vp-ov-av{border-color:#fff;box-shadow:0 0 0 .5cqw #D62976}
.vp-ch-app{position:absolute;top:0;left:0;right:0;height:11cqw;display:flex;align-items:center;gap:3cqw;padding:0 3.5cqw;font-size:4.6cqw}
.vp-ig-word{font:italic 700 6cqw/1 Georgia,"Times New Roman",serif;letter-spacing:-.02em}
.vp-ch-head{position:absolute;left:0;right:0;display:flex;align-items:center;gap:2.5cqw;padding:0 3.5cqw}
.vp-ch-foot{position:absolute;left:0;right:0;padding:0 3.5cqw;display:grid;gap:1.4cqw}
.vp-ch-foot p,.vp-ch-cap{margin:0;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.vp-ch-ig_feed .vp-ch-head{top:11cqw;height:13cqw}
.vp-ch-ig_feed .vp-ch-foot{top:calc(25cqw + var(--vp-feed-h,125cqw))}
.vp-ch-ig_feed .vp-ch-foot p{-webkit-line-clamp:2}
.vp-ch-acts{position:relative;display:flex;align-items:center;gap:3.5cqw}
.vp-dots{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:1cqw}
.vp-dots i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#C7C7C7}.vp-dots i.on{background:#0095F6}
.vp-ch-fb_feed .vp-ch-head{top:2cqw;height:13cqw}
.vp-ch-fb_feed .vp-ch-head > span:first-of-type{display:grid;line-height:1.25}
.vp-ch-fb_feed small{display:flex;align-items:center;gap:1cqw;font-size:3cqw;color:#65676B}
.vp-ch-fb_feed small svg{width:3cqw;height:3cqw}
.vp-ch-cap{position:absolute;top:16cqw;left:3.5cqw;right:3.5cqw;-webkit-line-clamp:3;font-size:3.6cqw}
.vp-ch-fb_feed .vp-ch-foot{top:calc(34cqw + var(--vp-feed-h,125cqw));gap:2cqw}
.vp-ch-count{display:flex;justify-content:space-between;font-size:3cqw;color:#65676B}
.vp-ch-btns{display:flex;justify-content:space-around;border-top:1px solid #E4E6EB;padding-top:2cqw;font-size:3.4cqw;font-weight:600;color:#65676B}
.vp-ch-btns span{display:flex;align-items:center;gap:1.5cqw}.vp-ch-btns svg{width:5cqw;height:5cqw}
.vp-ch-prof{position:absolute;top:12cqw;left:3.5cqw;right:3.5cqw;height:22cqw;display:flex;align-items:center;gap:2cqw}
.vp-ch-prof .vp-ov-av{width:20cqw;height:20cqw;margin-right:3cqw}
.vp-ch-prof span{flex:1;display:grid;justify-items:center;font-size:3.2cqw}
.vp-ch-prof span b{font-size:4.2cqw}
.vp-ch-bio{position:absolute;top:36cqw;left:3.5cqw;right:3.5cqw;display:grid;font-size:3.3cqw}
.vp-ch-gtabs{position:absolute;top:50cqw;left:0;right:0;height:10cqw;display:flex;border-bottom:1px solid #DBDBDB}
.vp-ch-gtabs span{flex:1;display:grid;place-items:center;color:#8E8E8E}
.vp-ch-gtabs span.on{color:#0B0B0B;box-shadow:inset 0 -.5cqw 0 #0B0B0B}
.vp-ch-gtabs svg{width:6cqw;height:6cqw}
.vp-ch-grid{position:absolute;top:60.5cqw;left:0;right:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6cqw}
.vp-ch-grid i{aspect-ratio:1;background:#E9E4DA}.vp-ch-grid i:nth-child(2n){background:#D9D2C4}.vp-ch-grid i.hole{background:transparent}
.vp-ch-ig_grid .vp-ov-nav{background:#fff;color:#0B0B0B;border-top:1px solid #DBDBDB}
.vp-ch-ig_grid .vp-ov-nav svg{filter:none}
/* Reels, story and TikTok: the app's buttons, name and caption start over the picture.
   .vp-pic is the picture's own box: client-app.js fits it to the video's shape inside the 9:16 frame (letterbox bars
   stay outside it) and clips the layers to it. It is absolutely placed with a width of its own, so its size never
   depends on what it holds. */
.vp-pic{position:absolute;inset:0;margin:auto;width:100%;height:100%;container-type:inline-size;overflow:hidden;pointer-events:none}
.vp-ov{display:none;position:absolute;inset:0;pointer-events:none;color:#fff;font:500 3.5cqw/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.vp[data-vp-view="ig_reel"] .vp-ov-ig_reel,.vp[data-vp-view="fb_reel"] .vp-ov-fb_reel,.vp[data-vp-view="story"] .vp-ov-story,.vp[data-vp-view="tiktok"] .vp-ov-tiktok{display:block}
.vp-ov::before{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.3))}
.vp-ov svg{display:block;width:7.5cqw;height:7.5cqw;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.vp-ov-top{position:absolute;top:3.5cqw;left:4cqw;right:4cqw;display:flex;align-items:center;gap:3cqw;font-size:4.6cqw;font-weight:700}
.vp-ov-r{margin-left:auto;display:flex;align-items:center;gap:4cqw}
.vp-ov-side{position:absolute;right:2.5cqw;display:flex;flex-direction:column;align-items:center;gap:4cqw;font-size:3cqw;font-weight:600}
.vp-ov-side span{display:grid;justify-items:center;gap:.8cqw}
.vp-ov-txt{position:absolute;left:3.5cqw;right:20cqw;display:grid;gap:1.6cqw}
.vp-ov-txt p{margin:0;overflow-wrap:anywhere}
.vp-ov-txt small{font-size:3.2cqw;opacity:.9}
.vp-ov-more{margin-left:1cqw;opacity:.75;font-weight:600}
.vp-ov-who{display:flex;align-items:center;gap:2cqw;font-weight:700}
.vp-ov-follow{border:1px solid rgba(255,255,255,.8);border-radius:1.6cqw;padding:.6cqw 2.4cqw;font-size:3.2cqw}
.vp-ov-av{display:block;flex:none;width:8cqw;height:8cqw;border-radius:50%;background:#C9C3B6;border:.5cqw solid #fff}
.vp-ov-nav{position:absolute;left:0;right:0;bottom:0;height:13cqw;display:flex;align-items:center;justify-content:space-around;padding:0 3cqw;background:#000}
.vp-ov-nav svg{width:6.5cqw;height:6.5cqw;filter:none}
.vp-ov-aud{display:block;width:7cqw;height:7cqw;border-radius:1.6cqw;border:.5cqw solid #fff;background:#8A8578}
.vp-ov-ig_reel .vp-ov-side{bottom:17cqw}.vp-ov-ig_reel .vp-ov-txt{bottom:16cqw}
.vp-ov-fb_reel .vp-ov-side{bottom:6cqw}.vp-ov-fb_reel .vp-ov-txt{bottom:5cqw}
.vp-ov-tiktok .vp-ov-top{justify-content:center;font-size:4.2cqw}.vp-ov-tiktok .vp-ov-top span{opacity:.7;font-weight:600}
.vp-ov-tiktok .vp-ov-side{bottom:18cqw}.vp-ov-tiktok .vp-ov-txt{bottom:16cqw}
.vp-ov-tiktok .vp-ov-side svg{width:9cqw;height:9cqw;fill:currentColor;stroke:none}
.vp-ov-tiktok .vp-ov-side .vp-ov-av{width:11cqw;height:11cqw}
.vp-ov-disc{display:block;width:10cqw;height:10cqw;border-radius:50%;background:radial-gradient(circle,#666 0 20%,#161616 22% 100%);border:2cqw solid #2B2B2B}
.vp-ov-bars{position:absolute;top:2cqw;left:2.5cqw;right:2.5cqw;display:flex;gap:1cqw}
.vp-ov-bars i{flex:1;height:.6cqw;border-radius:1cqw;background:rgba(255,255,255,.45)}.vp-ov-bars i:first-child{background:#fff}
.vp-ov-story .vp-ov-top{top:5cqw;left:3cqw;right:3cqw;gap:2cqw;font-size:3.6cqw}
.vp-ov-story .vp-ov-top svg{width:6.5cqw;height:6.5cqw}
.vp-ov-time{opacity:.75;font-weight:500}
.vp-ov-reply{position:absolute;left:3cqw;right:3cqw;bottom:4cqw;display:flex;align-items:center;gap:3.5cqw}
.vp-ov-reply span{flex:1;border:.4cqw solid rgba(255,255,255,.85);border-radius:99px;padding:2.6cqw 4cqw;font-size:3.6cqw}
/* "Mark the safe zone": the dashed box is where text stays clear of the app's parts; the tint outside it is what they
   may cover. Approximations of Meta's and TikTok's published safe zones for 1080×1920, not exact limits. */
.vp-safe{display:none;position:absolute;border:.5cqw dashed #FFD84D;box-shadow:0 0 0 999cqw rgba(228,87,46,.3);pointer-events:none}
.vp.is-safe:is([data-vp-view="ig_reel"],[data-vp-view="fb_reel"],[data-vp-view="story"],[data-vp-view="tiktok"]) .vp-safe{display:block}
.vp:is([data-vp-view="ig_reel"],[data-vp-view="fb_reel"]) .vp-safe{inset:14% 6% 35% 6%}
.vp[data-vp-view="story"] .vp-safe{inset:14% 6% 20% 6%}
.vp[data-vp-view="tiktok"] .vp-safe{inset:8% 17% 22% 6%}
/* The video's first frame on its own, drawn by the script; the dashed square is the 1:1 crop of the profile grid. */
.vp-first{margin:0;display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:center;font-size:12.5px;line-height:1.4;color:var(--muted,#6b6b6b)}
.vp-first b{display:block;color:var(--ink,#0B0B0B);font-weight:600}
.vp-first-pic{position:relative;background:var(--paper-alt,var(--surface-2,#f1ede6));border-radius:6px;overflow:hidden;line-height:0}
.vp-first:not(.is-drawn) .vp-first-pic{aspect-ratio:9/16}
.vp-first canvas{display:block;width:100%;height:auto}
.vp-crop{display:none;position:absolute;border:1.5px dashed #FFD84D;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.vp-first.is-drawn .vp-crop{display:block}
.vp-ov-plus{display:block;width:10cqw;height:6.6cqw;border-radius:1.8cqw;background:#fff;color:#000;font:700 5cqw/6.6cqw sans-serif;font-style:normal;text-align:center;text-shadow:none;box-shadow:-.8cqw 0 0 #25F4EE,.8cqw 0 0 #FE2C55}