/* ============================================================
   THE BOARD — a Miro-style canvas for the Follower-to-Client
   machine. Pan, zoom, drag cards, add notes, connect, record a
   video note. The whole map is the free value (the what and the
   why). The "how" cards are locked: that's where we come in.
   Fjelt theme, scoped to .board.
   ============================================================ */
.board {
  position: fixed; inset: 0; overflow: hidden;
  background: #f3f5fb;
  background-image:
    radial-gradient(circle, rgba(11,16,32,0.06) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  touch-action: none; user-select: none;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink, #0b1020);
  cursor: grab;
}
.board.is-panning { cursor: grabbing; }

/* the transformable world */
.bd-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.bd-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; z-index: 1; }
.bd-edges path { fill: none; stroke: #9aa6c8; stroke-width: 2; }
.bd-edges path.flow { stroke: #5b73e8; stroke-dasharray: 7 6; }

/* ---- nodes ---- */
.bd-node {
  position: absolute; box-sizing: border-box; z-index: 2;
  border-radius: 14px; background: #fff;
  border: 1px solid #e6e9f2; box-shadow: 0 6px 20px rgba(11,16,32,0.08);
  padding: 14px 16px; cursor: grab;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.bd-node:hover { box-shadow: 0 12px 30px rgba(11,16,32,0.14); }
.bd-node.dragging { cursor: grabbing; box-shadow: 0 20px 44px rgba(11,16,32,0.22); z-index: 20; }
.bd-node.sel { border-color: #5b73e8; box-shadow: 0 0 0 2px rgba(91,115,232,0.35), 0 12px 30px rgba(11,16,32,0.14); }
.bd-node .bd-badge { font-family: "Geist Mono", monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #3f55c8; }
.bd-node .bd-title { font-weight: 600; font-size: 0.98rem; margin-top: 6px; line-height: 1.25; }
.bd-node .bd-why { font-size: 0.85rem; color: #474e66; margin-top: 6px; line-height: 1.4; }
.bd-node .bd-x {
  position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; color: #7a8199; font-size: 15px;
  cursor: pointer; background: #eef1f8;
}
.bd-node:hover .bd-x { display: flex; }
.bd-node .bd-port {
  position: absolute; right: -7px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: #5b73e8; border: 2px solid #fff;
  cursor: crosshair; opacity: 0; transition: opacity .15s ease;
}
.bd-node:hover .bd-port { opacity: 1; }
.board.is-connecting .bd-node .bd-port { opacity: 1; }

/* node variants */
.bd-node.stage {
  background: linear-gradient(165deg, #3546c4, #5b73e8); color: #fff; border: none;
  box-shadow: 0 10px 30px rgba(59,80,200,0.34); text-align: center; padding: 16px 20px;
}
.bd-node.stage .bd-title { font-size: 1.15rem; margin-top: 4px; }
.bd-node.stage .bd-why { color: rgba(255,255,255,0.85); }
.bd-node.stage .bd-badge { color: rgba(255,255,255,0.75); }

.bd-node.leak { border-color: rgba(255,59,59,0.45); background: #fff5f5; }
.bd-node.leak .bd-badge { color: #e11d1d; }
.bd-node.leak .bd-title { color: #b91c1c; }

.bd-node.note {
  background: #fff6c9; border-color: #f2e08a; box-shadow: 0 8px 22px rgba(120,100,10,0.16);
  transform: rotate(-1deg);
}
.bd-node.note .bd-body { font-size: 0.95rem; line-height: 1.4; outline: none; min-height: 40px; color: #4a3d0a; }
.bd-node.note .bd-body:empty::before { content: "Type a note..."; color: #b09a3a; }

.bd-node.locked { background: #0b1020; color: #fff; border: none; box-shadow: 0 12px 34px rgba(11,16,32,0.3); cursor: pointer; }
.bd-node.locked .bd-title { color: #fff; }
.bd-node.locked .bd-why { color: rgba(255,255,255,0.7); }
.bd-node.locked .bd-badge { color: #ff6a6a; }
.bd-node.locked .bd-lockrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.82rem; color: #9fb0ff; }
.bd-node.locked .bd-lockrow .bd-btn-mini { margin-left: auto; }

/* hero header card */
.bd-node.hero { background: linear-gradient(165deg, #3546c4, #5b73e8); color: #fff; border: none; box-shadow: 0 16px 40px rgba(59,80,200,0.34); padding: 24px 26px; }
.bd-node.hero .bd-badge { color: rgba(255,255,255,0.8); }
.bd-node.hero .bd-title { font-size: 1.5rem; line-height: 1.15; margin-top: 8px; }
.bd-node.hero .bd-why { color: rgba(255,255,255,0.86); font-size: 0.98rem; margin-top: 10px; }

/* point card = same as part */
.bd-node.point .bd-badge { color: #3f55c8; }

/* link card (hub → resource) */
.bd-node.link { cursor: pointer; }
.bd-node.link:hover { border-color: #5b73e8; box-shadow: 0 14px 32px rgba(91,115,232,0.22); }
.bd-node.link .bd-open { display: inline-block; margin-top: 10px; color: #3f55c8; font-weight: 500; font-size: 0.85rem; }

/* cta card (navy, book) */
.bd-node.cta { background: linear-gradient(165deg, #0b1020, #151b34); color: #fff; border: none; box-shadow: 0 14px 36px rgba(11,16,32,0.3); }
.bd-node.cta .bd-title { color: #fff; }
.bd-node.cta .bd-why { color: rgba(255,255,255,0.72); }
.bd-node.cta .bd-book { margin-top: 12px; }

.bd-node.video { padding: 10px; width: 260px; }
.bd-node.video video { width: 100%; border-radius: 8px; display: block; background: #000; }
.bd-node.video .bd-vidctl { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }

.bd-btn-mini {
  font-family: inherit; font-size: 0.78rem; font-weight: 500; padding: 6px 12px; border-radius: 999px;
  border: 1px solid #d5daea; background: #fff; color: #0b1020; cursor: pointer;
}
.bd-btn-mini.primary { background: #5b73e8; color: #fff; border-color: transparent; }
.bd-btn-mini.rec { background: #ff3b3b; color: #fff; border-color: transparent; }

/* ---- toolbar ---- */
.bd-toolbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; gap: 6px; padding: 8px; border-radius: 16px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border: 1px solid #e6e9f2; box-shadow: 0 10px 30px rgba(11,16,32,0.12); flex-wrap: wrap;
  max-width: calc(100vw - 24px); justify-content: center;
}
.bd-tool {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 0.85rem; font-weight: 500;
  padding: 9px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: #0b1020; cursor: pointer;
  white-space: nowrap;
}
.bd-tool:hover { background: #f1f3fb; }
.bd-tool.active { background: #eef1ff; color: #3f55c8; border-color: #cdd6ff; }
.bd-tool .ic { font-size: 1rem; line-height: 1; }
.bd-tool.cta { background: #0b1020; color: #fff; }
.bd-tool.cta:hover { background: #11162a; }
.bd-sep { width: 1px; background: #e6e9f2; margin: 4px 2px; }

/* header + zoom + hint */
.bd-brand {
  position: fixed; top: 18px; left: 18px; z-index: 100; display: flex; align-items: center; gap: 9px;
  font-weight: 600; color: #0b1020; text-decoration: none;
  background: rgba(255,255,255,0.9); padding: 8px 14px; border-radius: 999px; border: 1px solid #e6e9f2;
  box-shadow: 0 6px 18px rgba(11,16,32,0.08);
}
.bd-brand .v-dot { width: 8px; height: 8px; border-radius: 50%; background: #5b73e8; box-shadow: 0 0 10px rgba(91,115,232,0.6); }

.bd-zoom {
  position: fixed; bottom: 18px; right: 18px; z-index: 100; display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.92); border: 1px solid #e6e9f2; border-radius: 12px; padding: 4px;
  box-shadow: 0 8px 22px rgba(11,16,32,0.12);
}
.bd-zoom button { width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 1.1rem; color: #0b1020; }
.bd-zoom button:hover { background: #f1f3fb; }
.bd-zoom .lvl { min-width: 46px; text-align: center; font-size: 0.8rem; color: #474e66; }

.bd-hint {
  position: fixed; bottom: 18px; left: 18px; z-index: 100; max-width: 300px;
  background: rgba(255,255,255,0.92); border: 1px solid #e6e9f2; border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 8px 22px rgba(11,16,32,0.1); font-size: 0.82rem; color: #474e66; line-height: 1.45;
}
.bd-hint b { color: #0b1020; }
.bd-hint .bd-hint-x { float: right; cursor: pointer; color: #a7aec2; margin-left: 8px; }

@media (max-width: 640px) {
  .bd-tool span.lbl { display: none; }
  .bd-tool { padding: 9px 11px; }
  .bd-hint { display: none; }
}