/*
 * botany.tech — home v8, who does what, variant B: one handoff.
 * Only site.css tokens; no shadows, no gradients, no plates. Everything
 * under .btb-.
 *
 *   section.btb > .container
 *     .head > h2.h2
 *     .btb-map
 *       .btb-you > h3.label.btb-k · ul.btb-list > li ×3
 *       .btb-wire > svg.btb-svg--h · svg.btb-svg--v (paths + .btb-g guides)
 *                 · .btb-pulse ×3 · .btb-node
 *       .btb-bots > svg.btb-loop · h3.label.btb-k.btb-legend · ul.btb-list
 *     .btb-stub  (preview only: the dark banner that follows)
 *
 * The picture (wave 4): three of yours run into ONE line, it passes one node
 * and enters the bots' dashed frame as that one line (no split on the bots'
 * side). The lines are 1px strokes in --ink400. Row heights are fixed
 * (--btb-r) because the wire is drawn to them: 72 across, 60 down. Across
 * from 720px, down below it.
 *
 * Three text sizes: the H2 (site .h2); the lines (20/26, 24/30 from
 * 1024); the Doto labels You / The bots (24 → 28), which are the screen's
 * key captions and stand in full ink.
 * Motion (no-preference only): the frame's dashes walk round it; three olive
 * dots leave your three rows one after another, meet in the one line and run
 * into the bots (v8-new.js initBots places them on the .btb-g guides).
 * Reduced motion: all still, the node stays.
 */

.btb-page{background:var(--s0)}
.btb-stub{height:160px;background:var(--ground-deep)}
.btb .head{margin-bottom:32px}
/* the heading breaks between the two sentences, never inside one */
.btb-ln{display:inline-block}

/* ---------- the map: down first (a phone) ---------- */
.btb-map{--btb-r:60px;position:relative;max-width:640px}
.btb-you{padding-left:48px}
.btb-you .btb-k{margin-bottom:12px}
/* the two captions: Doto, large, full ink */
.btb-k{margin:0;font-size:24px;line-height:28px;letter-spacing:.08em;color:var(--ink900)}
.btb-list{display:grid;grid-auto-rows:var(--btb-r)}
.btb-list li{display:flex;align-items:center;min-width:0;font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
.btb-you .btb-list li{color:var(--ink500)}
.btb-bots .btb-list li{color:var(--ink900)}

/* the wire: a 32px column down the left, the whole height of the map */
.btb-wire{position:absolute;left:0;top:0;width:32px;height:100%;pointer-events:none}
.btb-svg{position:absolute;left:0;top:0}
.btb-svg path{fill:none;stroke:var(--ink400);stroke-width:1;vector-effect:non-scaling-stroke}
.btb-svg .btb-g{stroke:none}
.btb-svg--h{display:none}

/* the node: the handoff, the one accent */
.btb-node{position:absolute;left:8px;top:260px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--s0);border:1px solid var(--ol700)}
.btb-node::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--ol700)}
/* the dots: hidden until initBots runs (.is-run), then moved by transform */
.btb-pulse{display:none;position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ol600);opacity:0;will-change:transform}
.btb-map.is-run .btb-pulse{display:block}

/* the bots: a dashed frame (the loop), legend on its top edge */
.btb-bots{position:relative;margin:80px 0 0 32px;padding-left:16px;padding-right:12px}
.btb-loop{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.btb-loop rect{width:calc(100% - 1px);height:calc(100% - 1px);rx:12px;ry:12px;fill:none;stroke:var(--l500);stroke-width:1;stroke-dasharray:4 4}
.btb-legend{position:absolute;left:16px;top:-14px;padding:0 8px;margin:0 0 0 -8px;background:var(--s0)}

/* ---------- across: from 720px ---------- */
@media (min-width:720px){
  .btb-map{--btb-r:72px;max-width:none;display:grid;grid-template-columns:240px 104px minmax(0,1fr);grid-template-rows:40px calc(3 * var(--btb-r))}
  .btb-k{font-size:28px;line-height:32px}
  .btb-you{grid-column:1;grid-row:1 / 3;display:grid;grid-template-rows:40px calc(3 * var(--btb-r));padding-left:0;padding-right:16px}
  .btb-you .btb-k{align-self:end;margin:0 0 -8px}
  .btb-wire{position:relative;left:auto;top:auto;width:auto;height:auto;grid-column:2;grid-row:2}
  .btb-svg--h{display:block;width:100%;height:100%}
  .btb-svg--v{display:none}
  .btb-node{left:50%;top:50%;margin:-9px 0 0 -9px}
  .btb-bots{grid-column:3;grid-row:2;margin:0;padding:0 16px 0 24px}
  .btb-legend{left:24px;top:-16px}
}
@media (min-width:1024px){
  .btb .head{margin-bottom:48px}
  .btb-map{grid-template-columns:290px minmax(96px,1fr) 440px}
  .btb-list li{font-size:24px;line-height:30px;letter-spacing:-.02em}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .btb-loop rect{animation:btb-walk 2.4s linear infinite}
  @keyframes btb-walk{to{stroke-dashoffset:-16}}
}