/* ============================================================================
   board-view.css — the board's own look, shared by both presentations
   Sana · 11 Aug 2026 · round 7

   Paired with board-view.js. The concept page and the in-tab product view draw
   the SAME cards, so the card styles cannot live inside either page — a second
   copy is how a demo starts lying about the product. Page-specific chrome (the
   demo's class switcher, note and prose panel) stays in scene-board.html.
   ============================================================================ */
.sbwrap{position:relative;flex:1;min-width:0;overflow:hidden;background:var(--paper2);
  background-image:radial-gradient(#e0d7c6 1px,transparent 1px);background-size:22px 22px;
  cursor:grab;touch-action:none}
.sbwrap.drag{cursor:grabbing}
.sbcanvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
/* group bands sit behind the cards; they ARE the derived layout, not decoration */
.actband{position:absolute;border-radius:14px;background:rgba(255,255,255,.55);
  border:1px dashed var(--hair)}
.actlabel{position:absolute;font-family:var(--ui);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap}
.scard{position:absolute;background:#fff;border:1px solid var(--hair);border-radius:9px;
  box-shadow:0 1px 2px rgba(60,40,20,.06);overflow:hidden;display:flex;flex-direction:column}
.scard .num{font-family:var(--ui);font-size:9px;color:var(--muted);letter-spacing:.06em}
.scard .slug{font-family:var(--ui);font-weight:650;color:var(--deep);line-height:1.25}
.scard .one{color:#4a4238;line-height:1.4}
.scard .beats{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.scard .beat{font-size:10px;color:#4a4238;line-height:1.35;padding-left:9px;position:relative}
.scard .beat::before{content:"";position:absolute;left:0;top:6px;width:5px;height:1.5px;
  background:var(--gpblue);border-radius:2px}
.scard .flags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.scard .fl{font-family:var(--ui);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;
  border-radius:3px;padding:1px 5px;border:1px solid}
.fl.block{color:var(--no);border-color:var(--noLine);background:var(--noBg)}
.fl.warn2{color:#79510f;border-color:var(--warnLine);background:var(--warnBg)}
.fl.ev{color:var(--lib);border-color:var(--libLine);background:var(--libBg)}
/* an Evidence Pack anchor lights the item it touches */
.scard.lit{border-color:var(--lib);box-shadow:0 0 0 3px rgba(43,107,125,.18)}
.scard.blocked{border-left:3px solid var(--no)}
.scard.hot{border-color:var(--gpblue);box-shadow:0 0 0 3px rgba(45,91,208,.16)}
/* zoomed-out: cards collapse to blocks, and the curve carries the read */
.scard.tiny{padding:0;border-radius:4px;justify-content:flex-end}
.scard.tiny .inner2{display:none}
/* the whole point of the zoomed-out tier is comparison, and a grid of identical
   white rectangles supports none. The bar is the item's weight — tension for a
   scene, words spent for a treatment section — so every class reads at range. */
.wbar{display:block;background:rgba(45,91,208,.20);border-radius:0 0 3px 3px}
.scard.tiny.lit .wbar{background:rgba(43,107,125,.34)}
.scard.tiny.blocked .wbar{background:rgba(178,58,48,.28)}
.scard.tiny.blocked{background:#fdeceb}
.scard.tiny.lit{background:var(--libBg)}
svg.threads{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
svg.threads path{fill:none;stroke-width:1.6;opacity:.5}
svg.curve{position:absolute;left:0;overflow:visible;pointer-events:none}
svg.curve path{fill:none;stroke:var(--gpblue);stroke-width:3.5;opacity:.8}
svg.curve .fillc{fill:rgba(45,91,208,.07);stroke:none}
/* ── MOVE SEMANTICS, drawn not built ──────────────────────────────────────
   Three different things happen when a card moves, depending on WHO moved it
   and what the card is anchored to. These are rendered states, never handlers:
   there is no drag on this board, which is the same v1 rule as before. */
.caret{position:absolute;width:3px;border-radius:2px}
.caret::before,.caret::after{content:"";position:absolute;left:-2.5px;width:8px;height:8px;
  border-radius:50%;background:inherit}
.caret::before{top:-4px}
.caret::after{bottom:-4px}
.ghostl{position:absolute;font-family:var(--ui);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;white-space:nowrap}
.mvarrow{position:absolute;overflow:visible;pointer-events:none}
.mvarrow path{fill:none;stroke-width:1.8;stroke-dasharray:4 3}
.scard.mv-human{border-color:var(--gpblue)}
.scard.mv-agent{border:1.5px dashed var(--warnLine);background:#fffdf6}
.scard.mv-prose{border-color:var(--lib)}
.mvbar{display:flex;align-items:center;gap:5px;margin-top:6px;padding-top:5px;
  border-top:1px dashed var(--hair);flex-wrap:wrap}
.mvtag{font-family:var(--ui);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:800;border-radius:3px;padding:1.5px 5px;border:1px solid}
.mvtag.human{color:var(--gpblue);border-color:#bcd0f5;background:#eef2fc}
.mvtag.agent{color:#79510f;border-color:var(--warnLine);background:var(--warnBg)}
.mvtag.prose{color:var(--lib);border-color:var(--libLine);background:var(--libBg)}
.mvsay{font-size:9.5px;color:#6b6152;line-height:1.35;flex:1 0 100%}
/* deliberately spans, not buttons — nothing here is wired, and a real button
   that did nothing would be a promise the concept cannot keep */
.mvbtn{font-family:var(--ui);font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;border-radius:4px;padding:2px 7px;border:1px solid var(--hair);color:#4a4238;
  background:#fff}
.mvbtn.go{border-color:#bcd0f5;color:var(--gpblue);background:#eef2fc}
.mvprev{margin-top:5px;display:flex;gap:8px;align-items:center}
.mvstack{display:flex;flex-direction:column;gap:2px}
.mvstack i{display:block;width:34px;height:4px;border-radius:2px;background:#e2d9c8}
.mvstack i.hi{background:var(--lib)}
.mvcap{font-family:var(--ui);font-size:8px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.anchchip{display:inline-flex;align-items:center;gap:4px;font-family:var(--ui);font-size:8.5px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--lib);
  border:1px solid var(--libLine);background:var(--libBg);border-radius:3px;padding:1px 5px;
  margin-top:6px;align-self:flex-start}

/* ── ROUND 8 · DRAG PROTOTYPE (concept demo only) ──────────────────────────
   The card being carried, and the gap it would land in. Reuses the round-6
   insertion caret rather than inventing a second idiom for "it goes here". */
.scard.lifted{box-shadow:0 12px 26px rgba(60,40,20,.22);border-color:var(--gpblue);
  z-index:20;cursor:grabbing;transition:none}
.dropcaret{z-index:19}