/* "Pick your work" (10 Oct): the real app as different people use it.
   Classes start vx-pick- (never ad/offer/sponsor: blockers hide those). */
.vx-pick{--vx-c:#447d60;--vx-ease:cubic-bezier(.16,.84,.3,1)}
.vx-pick .sec-head{margin-bottom:clamp(26px,3vw,40px)}

/* ---- who: one pill per person */
.vx-pick-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto clamp(22px,2.6vw,34px);max-width:1100px}
.vx-pick-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 7px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.78);color:var(--ink-2);font:inherit;font-size:14px;font-weight:550;letter-spacing:-.01em;cursor:pointer;
  box-shadow:var(--lift);transition:background .5s var(--vx-ease),color .5s var(--vx-ease),border-color .5s var(--vx-ease),transform .3s var(--vx-ease)}
.vx-pick-pill:hover{transform:translateY(-1px);background:#fff}
.vx-pick-pill i{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;
  background:color-mix(in srgb,var(--pc) 14%,#fff);color:var(--pc);transition:background .5s var(--vx-ease),color .5s var(--vx-ease)}
.vx-pick-pill i svg{width:17px;height:17px}
.vx-pick-pill[aria-pressed="true"]{background:var(--pc);border-color:var(--pc);color:#fff}
.vx-pick-pill[aria-pressed="true"] i{background:rgba(255,255,255,.22);color:#fff}
.vx-pick-pill:focus-visible,.vx-pick-arrow:focus-visible,.vx-pick-car:focus-visible{outline:3px solid color-mix(in srgb,var(--vx-c) 55%,#fff);outline-offset:3px}

/* ---- the carousel: as wide as the page content, up to 1300 px */
.vx-pick-car{--vx-w:min(calc(100vw - 32px),1300px);position:relative;width:var(--vx-w);margin-inline:calc((100% - var(--vx-w)) / 2);border-radius:24px}
.vx-pick-topnav{display:flex;justify-content:flex-end;gap:8px;margin:0 6% 12px}
.vx-pick-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);
  color:var(--ink);font:600 18px/1 inherit;cursor:pointer;box-shadow:var(--lift);transition:transform .3s var(--vx-ease),background .3s}
.vx-pick-arrow:hover{background:#fff;transform:scale(1.06)}
.vx-pick-stage{position:relative;overflow:hidden;padding:10px 0 34px}
.vx-pick-side{position:absolute;top:calc(50% - 22px);z-index:5}
.vx-pick-side.prev{left:max(4px,calc(8% - 64px))}
.vx-pick-side.next{right:max(4px,calc(8% - 64px))}
.vx-pick-track{position:relative;width:84%;margin-inline:auto}

/* one browser window per person; the current one sets the height */
.vx-pick-win{position:absolute;inset:0 0 auto 0;margin:0;border-radius:16px;overflow:hidden;background:#fff;
  border:1px solid rgba(24,40,90,.1);box-shadow:0 30px 70px -30px rgba(20,31,58,.45),0 8px 24px -14px rgba(20,31,58,.25);
  transform-origin:50% 50%;transition:transform .9s var(--vx-ease),opacity .9s var(--vx-ease)}
.vx-pick-win.is-cur{position:relative;z-index:3}
.vx-pick-win.is-prev{transform:translateX(-96%) scale(.86);opacity:.42;z-index:2}
.vx-pick-win.is-next{transform:translateX(96%) scale(.86);opacity:.42;z-index:2}
.vx-pick-win.is-out-left{transform:translateX(-170%) scale(.8);opacity:0;z-index:1}
.vx-pick-win.is-out-right{transform:translateX(170%) scale(.8);opacity:0;z-index:1}
.vx-pick-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;background:#f4f6fa;border-bottom:1px solid rgba(24,40,90,.08);
  font-size:12.5px;color:var(--ink-soft);min-width:0}
.vx-pick-dots{display:flex;gap:6px;flex:none}
.vx-pick-dots i{width:10px;height:10px;border-radius:50%;background:#e5e8ef}
.vx-pick-dots i:nth-child(1){background:#f3a0a0}.vx-pick-dots i:nth-child(2){background:#f4d28c}.vx-pick-dots i:nth-child(3){background:#9fd8b0}
.vx-pick-host{flex:1;min-width:0;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid rgba(24,40,90,.07);
  overflow-wrap:break-word;line-height:1.25}
.vx-pick-field{flex:none;max-width:40%;text-align:right;font-weight:600;color:var(--vx-c);line-height:1.25}
.vx-pick-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef2f6}
.vx-pick-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.vx-pick-screen iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;transform:scale(var(--k,.5));
  pointer-events:none;opacity:0;transition:opacity .7s var(--vx-ease)}
.vx-pick-screen iframe.is-ready{opacity:1}

/* ---- under the frame */
.vx-pick-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin-top:-8px}
.vx-pick-dotsnav{display:flex;gap:6px;align-items:center}
.vx-pick-dotsnav i{width:8px;height:8px;border-radius:999px;background:rgba(24,40,90,.18);transition:width .6s var(--vx-ease),background .6s var(--vx-ease)}
.vx-pick-dotsnav i.on{width:26px;background:var(--vx-c)}
.vx-pick-count{margin:0;font-size:14px;color:var(--ink-soft);overflow-wrap:anywhere;text-align:center}
.vx-pick-count b{color:var(--ink);font-weight:600}
.vx-pick .films-note{text-align:center;margin-top:18px}

/* ---- tablets: smaller peeks */
@media (max-width:1000px){
  .vx-pick-track{width:90%}
  .vx-pick-win.is-prev{transform:translateX(-99%) scale(.86)}
  .vx-pick-win.is-next{transform:translateX(99%) scale(.86)}
  .vx-pick-side{display:none}
}
/* ---- phones: one frame, 16 px gutter, no peeks, pills scroll sideways */
@media (max-width:700px){
  .vx-pick-pills{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc((100% - (100vw - 32px)) / 2);width:calc(100vw - 32px);padding:2px 2px 6px;scroll-snap-type:x proximity}
  .vx-pick-pills::-webkit-scrollbar{display:none}
  .vx-pick-pill{flex:none;scroll-snap-align:start;font-size:13.5px}
  .vx-pick-track{width:100%}
  .vx-pick-win.is-prev,.vx-pick-win.is-next{opacity:0}
  .vx-pick-topnav{margin:0 0 10px}
  .vx-pick-stage{padding:6px 0 26px}
  .vx-pick-bar{height:auto;min-height:34px;padding:6px 10px;gap:8px;font-size:11px}
  .vx-pick-dots i{width:8px;height:8px}
  .vx-pick-field{max-width:45%}
}
@media (prefers-reduced-motion:reduce){
  .vx-pick-win,.vx-pick-pill,.vx-pick-dotsnav i,.vx-pick-screen iframe{transition-duration:.01s}
}