/* ─────────────────────────────────────────────────────────────────────────
   bucketvs pages only (every language): the slider of screenshots of the big projects' own panels, #bv-shots.
   A scroll-snap strip with prev/next buttons, an n / N count, the arrow keys and a swipe; assets/bucketvs-shots.js
   moves it, and with no script the strip scrolls by hand. Written by tools/node/site-bucketvs-shots.mjs; the
   tray and plate are bucketvs.css's. Decision D154, docs/site/bucketvs.md.
   ───────────────────────────────────────────────────────────────────────── */
.bv-shots{padding-top:clamp(64px,9vw,136px);min-width:0}
.bv-slider{margin-top:clamp(24px,3vw,40px);min-width:0;max-width:100%}
.bv-strip{
  display:flex;gap:clamp(12px,2vw,24px);min-width:0;max-width:100%;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.bv-strip::-webkit-scrollbar{display:none}
.bv-strip:focus-visible{outline:2px solid var(--led);outline-offset:6px;border-radius:var(--tray)}
.bv-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:center;scroll-snap-stop:always}
/* the tray without bucketvs.css's long drop shadow: the strip clips whatever leaves it */
.bv-slide .bv-tray{box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.bv-slide img{display:block;width:100%;height:auto;aspect-ratio:1440/900;background:#050505}
.bv-slide figcaption{
  margin:16px 2px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:color-mix(in srgb,var(--ink) 88%,transparent);text-wrap:pretty;
}
.bv-slide figcaption b{
  flex:none;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--led);
}
.bv-ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(18px,2.2vw,28px)}
.bv-ctl button{
  display:grid;place-items:center;width:44px;height:44px;padding:0;cursor:pointer;
  border:1px solid var(--rule-hi);border-radius:50%;background:transparent;color:var(--ink);
  transition:border-color .35s var(--ease-seat),color .35s var(--ease-seat),opacity .35s var(--ease-seat);
}
.bv-ctl button svg{width:18px;height:18px}
.bv-ctl button:hover,.bv-ctl button:focus-visible{border-color:var(--led);color:var(--led)}
.bv-ctl button[aria-disabled="true"]{opacity:.35;cursor:default;border-color:var(--rule);color:var(--dim)}
.bv-count{min-width:7ch;text-align:center;font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.bv-count [data-cur]{color:var(--ink)}
.bv-shots-note{margin:18px 0 0;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--dim);text-wrap:balance}
@media (scripting:none){.bv-ctl{display:none}}
@media (prefers-reduced-motion:no-preference) and (min-width:900px){.bv-shots{scroll-snap-align:start}}