/* ─────────────────────────────────────────────────────────────────────────
   bucketvs.html only (its <main> is written by tools/node/site-bucketvs-page.mjs). The page is laid out the way
   rtorrent16.html is, and these are rt16.css's values under this page's own names (bv-*): the tray and the plate
   that seat a window, the stage under the hero, the rows of the features at 5 : 7, the row number. What only this
   page has: the wide rows (a window across the whole column, under its text), the lists of the copy, the two cards
   and the closing line. The windows are cut-outs of the panel (assets/bvsp/). Decision D53, docs/site/bucketvs.md.
   ───────────────────────────────────────────────────────────────────────── */

/* ── the language list over the hero (every bucketvs page, D56): rt16.css's .rt-langs under this page's name ── */
.bv-langs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;padding-top:14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}
.bv-langs a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .35s var(--ease-seat),border-color .35s var(--ease-seat)}
.bv-langs a:hover,.bv-langs a:focus-visible{color:var(--led)}
.bv-langs a[aria-current]{color:var(--ink);border-bottom-color:var(--led)}

/* Japanese and Traditional Chinese: the site's faces carry no CJK glyphs, so each stack names the system faces of
   that language after them (macOS, Windows, then Noto on Linux and Android). <html lang> picks the regional glyphs. */
:root:lang(ja){
  --cjk:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,"Noto Sans JP","Noto Sans CJK JP";
}
:root:lang(zh-TW){
  --cjk:"PingFang TC","Microsoft JhengHei UI","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC";
}
:root:lang(ja),:root:lang(zh-TW){
  --sans:'IBM Plex Sans',var(--cjk),ui-sans-serif,system-ui,sans-serif;
  --cond:'IBM Plex Sans Condensed','IBM Plex Sans',var(--cjk),ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono','SF Mono',Consolas,var(--cjk),monospace;
}

/* ── the hero: site.css's, with the product's mark in the brow and the tagline under the creed ─────────── */
.bv-mark{width:16px;height:16px;flex:none;border-radius:4px}
.bv-sub{margin:14px 0 0;font-family:var(--cond);font-weight:600;font-size:clamp(17px,1.5vw,22px);color:var(--dim);letter-spacing:.005em}
.bv-acts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.bv-acts-c{justify-content:center}

/* ── the stage and the trays (rt16.css: .rt-stage, .rt-tray, .rt-plate, .rt-live) ─────────────────────── */
.bv-stage{
  padding-block:clamp(22px,3vw,40px) clamp(40px,5vw,72px);
  background:radial-gradient(90% 60% at 50% 0%,rgba(255,176,32,.06),transparent 65%);
}
.bv-tray{
  margin:0;padding:var(--lip);border-radius:var(--tray);border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 42%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 90px rgba(0,0,0,.55);
  transition:border-color .5s var(--ease-seat),transform .5s var(--ease-seat),box-shadow .5s var(--ease-seat);
}
/* The tray around a picture of the panel takes the panel's own double bezel (ui/src/design/Bezel.tsx in bucketvs:
   28 px outside, a 6 px rim, 22 px inside), so the picture's rounded cards sit in a frame of the same curve; it
   narrows with the picture on a phone (owner, 2026-10-08). The cards of the copy keep the site's tray. */
.bv-tray{--tray:clamp(18px,2vw,28px);--lip:6px}
.bv-plate{
  display:block;position:relative;overflow:hidden;
  border-radius:calc(var(--tray) - var(--lip));border:1px solid var(--rule);background:var(--rack);
}
.bv-plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 40px -18px rgba(0,0,0,.85);
}
/* A cut-out: its own page in an inert frame, laid out at the width it was cut at (--w, --h) and scaled to the
   column (--k, from assets/bucketvs.js). Nothing in it takes the pointer. */
.bv-live{aspect-ratio:var(--w) / var(--h);background:#050505}
@media (scripting:none){.bv-live{display:none}}
.bv-live iframe{
  position:absolute;left:0;top:0;display:block;border:0;
  width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
  transform-origin:0 0;transform:scale(var(--k,1));pointer-events:none;
}

/* ── the features (rt16.css: .rt-feats, .rt-feat, .rt-copy, .rt-n) ───────────────────────────────────────── */
.bv-pitch{
  margin:22px 0 0;max-width:72ch;font-size:clamp(17px,1.4vw,20px);line-height:1.6;text-wrap:pretty;
  color:color-mix(in srgb,var(--ink) 88%,transparent);
}
.bv-feats{display:flex;flex-direction:column;gap:clamp(64px,9vw,136px);margin-top:clamp(48px,6vw,96px)}
.bv-feat{display:grid;gap:clamp(18px,2.4vw,44px);align-items:center;scroll-margin-top:90px}
@media (min-width:1000px){
  .bv-feat{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .bv-feat.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .bv-feat.flip .bv-copy{order:2}
  /* a wide row: the text and its list side by side, the window across both under them */
  .bv-feat.bv-wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;row-gap:clamp(26px,3vw,44px)}
  .bv-wide .bv-side{padding-top:clamp(30px,3.2vw,52px)}
}
.bv-wide .bv-full{grid-column:1/-1;width:min(100%,1320px);justify-self:center}
.bv-copy{min-width:0}
.bv-n{
  display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--led);
}
.bv-n::after{content:"";height:1px;width:clamp(40px,8vw,120px);background:var(--rule-hi)}
.bv-copy h3{
  font-family:var(--cond);font-weight:700;font-size:clamp(26px,2.9vw,42px);line-height:1.07;
  letter-spacing:-.012em;margin:14px 0 16px;text-wrap:balance;
}
.bv-copy p{color:var(--dim);font-size:clamp(15px,1.1vw,16.5px);line-height:1.64;margin:0 0 14px;max-width:58ch;text-wrap:pretty}
.bv-copy p strong,.bv-list strong{color:var(--ink);font-weight:500}
.bv-copy code,.bv-list code,.bv-pitch code{
  font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.055);
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--ink);
}
/* the copy's lists: one amber mark per line, no rules between the lines */
.bv-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;max-width:60ch}
.bv-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--ink) 84%,transparent);text-wrap:pretty}
.bv-list li::before{
  content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:1.5px;
  background:var(--led);transform:rotate(45deg);box-shadow:0 0 8px rgba(255,176,32,.35);
}
.bv-side .bv-list{margin-top:0}

/* ── who it is for, and what it needs: two trays with a plate each ───────────────────────────────────────── */
.bv-cards{display:grid;gap:clamp(16px,2vw,24px);padding-top:clamp(24px,4vw,56px)}
@media (min-width:860px){.bv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bv-card{
  padding:var(--lip);border-radius:var(--tray);border:1px solid var(--rule);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 42%,transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 24px 60px -30px rgba(0,0,0,.8);
}
.bv-card-in{
  height:100%;border-radius:calc(var(--tray) - var(--lip));border:1px solid var(--rule);background:var(--panel);
  padding:clamp(22px,2.6vw,36px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.bv-card h2{font-family:var(--cond);font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.1;margin:0}
.bv-card .bv-list{margin-top:20px}
.bv-card:target .bv-card-in{border-color:rgba(255,176,32,.5)}

/* ── the closing line ──────────────────────────────────────────────────────────────────────────────────── */
.bv-close{text-align:center;padding-top:clamp(72px,9vw,140px)}
.bv-close h2{
  font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.8vw,54px);line-height:1.05;letter-spacing:-.015em;
  margin:0 auto;max-width:22ch;text-wrap:balance;
}
.bv-close > p:not(.bv-tm){margin:18px auto 0;max-width:56ch;color:var(--dim);font-size:clamp(15px,1.2vw,17px);line-height:1.6}
.bv-close .bv-acts{margin-top:28px}
.bv-tm{margin:clamp(40px,5vw,64px) auto 0;max-width:80ch;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--dim)}

/* ── the buttons pressed, in-page links and the section snap (rt16.css's design pass) ──────────────────── */
.isl:active{transform:translateY(1px) scale(.985);transition-duration:.12s}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .isl{transition:background-color .45s var(--ease-seat),border-color .45s var(--ease-seat),color .45s var(--ease-seat),transform .45s var(--ease-seat)}
}
@media (min-width:721px){html{scroll-padding-top:calc(var(--mast,66px) + 16px)}}
@media (max-width:720px){.bv-feat{scroll-margin-top:16px}}
/* section by section once the reader scrolls (assets/bucketvs.js adds html.snap), from 900 px, as rtorrent16.html */
@media (prefers-reduced-motion:no-preference) and (min-width:900px){
  html.snap{scroll-snap-type:y proximity}
  main,.bv-stage,#features>.eyebrow,.bv-feat,.bv-cards,.bv-close{scroll-snap-align:start}
}