/* board.css — Planning board (whiteboard / flowchart) styles */

.board-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0; padding: 8px 10px;
  border-bottom: none;
}
.bt-group { display: flex; align-items: center; gap: 4px; }
.bt-group + .bt-group { padding-left: 14px; border-left: 1px solid var(--border); }
.board-toolbar .btn.small { padding: 5px 9px; }
.board-zoom-label {
  font-size: 12px; color: var(--text-muted); min-width: 42px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.color-swatch {
  width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.15); padding: 0;
}
.color-swatch:hover { transform: scale(1.12); }

.board-viewport {
  position: relative; overflow: hidden;
  height: calc(100vh - 245px); min-height: 420px;
  background: var(--surface);
  background-image: radial-gradient(circle, #d8d6d0 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  cursor: default;
  user-select: none;
}
.board-viewport.panning { cursor: grabbing; }
.board-world {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0;
}
.board-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.board-edges .edge-hit { pointer-events: stroke; stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.board-edges .edge-line { stroke: #64748b; stroke-width: 2; fill: none; }
.board-edges .edge.selected .edge-line { stroke: var(--accent); stroke-width: 2.5; }
.board-edges .edge-label {
  font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--text-muted); paint-order: stroke; stroke: var(--surface); stroke-width: 4px;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.board-edges .edge.selected .edge-label { fill: var(--accent-text); }
.edge-label-input {
  position: absolute; z-index: 30; width: 140px;
  padding: 3px 8px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--accent); border-radius: 4px;
  transform: translate(-50%, -50%);
}

.board-marquee {
  position: absolute; z-index: 25; pointer-events: none;
  border: 1px solid var(--accent); background: rgba(91, 77, 216, 0.08);
}

/* ---------- Nodes ---------- */
.bnode { position: absolute; z-index: 0; font-size: 13px; }  /* isolate each node's stacking so text never bleeds through a node above it */
.bnode.dragging { z-index: 10; }
.bnode .shape { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bnode .shape .shape-path { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.bnode.selected .shape .shape-path { stroke-width: 2.5 !important; stroke: var(--accent) !important; }
.bnode-text {
  position: relative; z-index: 1;
  font-size: inherit; line-height: 1.35; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  outline: none; cursor: default; min-height: 1em;
}
.bnode-text[contenteditable] { cursor: text; user-select: text; }
.bnode-text:empty::before { content: attr(data-placeholder); color: var(--text-soft); }

.type-rect .bnode-text, .type-ellipse .bnode-text, .type-diamond .bnode-text {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; inset: 6px;
}
/* Formatted text lines (one div per line; bullets get a leading dot) */
.btxt-bullet { padding-left: 1.1em; text-indent: -1.1em; text-align: left; }
.btxt-bullet::before { content: '\2022\00a0'; color: var(--text-muted); }
.type-diamond .bnode-text { inset: 18%; }

.type-sticky {
  background: #fef9c3; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 8px 18px rgba(0,0,0,0.06);
  padding: 12px;
}
.type-sticky.selected { outline: 2.5px solid var(--accent); }
.type-sticky .bnode-text { font-size: inherit; }

.type-text { padding: 4px 6px; border-radius: 4px; font-size: 15px; }
.type-text .bnode-text { font-size: inherit; font-weight: 500; }
.type-text.selected { outline: 2px solid var(--accent); }
.type-text:hover { outline: 1px dashed var(--border); }

.type-checklist {
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 10px 12px;
  display: flex; flex-direction: column;
}
.type-checklist.selected { border-color: var(--accent); outline: 1px solid var(--accent); }
.cl-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.cl-title { font-weight: 600; flex: 1; }
.cl-progress {
  font-size: 11px; color: var(--text-muted); background: var(--surface-2);
  border-radius: 10px; padding: 1px 7px; white-space: nowrap;
}
.cl-items { flex: 1; overflow-y: auto; min-height: 0; }
.cl-item { display: flex; align-items: flex-start; gap: 7px; padding: 3px 0; font-size: inherit; }
.cl-item .cl-check { margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.cl-item-text { flex: 1; word-break: break-word; outline: none; }
.cl-item-text[contenteditable] { cursor: text; user-select: text; }
.cl-remove {
  background: none; border: none; color: var(--text-soft); cursor: pointer;
  padding: 0 3px; font-size: 14px; line-height: 1.2; border-radius: 3px;
  opacity: 0; flex-shrink: 0;
}
.cl-item:hover .cl-remove { opacity: 1; }
.cl-remove:hover { color: var(--bad); background: var(--bad-soft); }
.cl-add { margin-top: 6px; display: none; }
.bnode.selected .cl-add { display: block; }
.cl-add-input {
  width: 100%; padding: 4px 8px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 4px;
}
.cl-add-input:focus { outline: none; border-color: var(--accent); }

/* ---------- Sections (titled groups) ---------- */
/* The frame itself is click-through so the space inside stays usable for
   selecting, dropping and double-clicking; only the title bar is grabbable. */
.type-section { pointer-events: none; }
.type-section.dragging { z-index: 1; }
.type-section .sec-frame {
  position: absolute; inset: 0; border: 2px solid var(--border);
  border-radius: 10px; pointer-events: none;
}
.type-section .sec-head {
  position: absolute; left: -2px; right: -2px; top: -2px; min-height: 32px;
  display: flex; align-items: center; gap: 10px; padding: 4px 12px;
  border: 2px solid var(--border); border-radius: 10px 10px 0 0;
  pointer-events: auto; cursor: move;
}
.type-section .sec-title {
  flex: 1; min-width: 0; font-weight: 700; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.type-section .sec-title[contenteditable] { overflow: visible; text-overflow: clip; }
.type-section .sec-count {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
  background: rgba(255,255,255,0.65); border-radius: 10px; padding: 1px 7px;
}
.type-section.selected .sec-frame, .type-section.selected .sec-head { border-color: var(--accent); }
.type-section .resize-handle { pointer-events: none; }
.type-section.selected .resize-handle { pointer-events: auto; }

/* Connection ports */
.port {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  opacity: 0; transition: opacity 0.12s; cursor: crosshair; z-index: 5;
}
.bnode:hover .port, .bnode.selected .port, .bnode.link-target .port { opacity: 1; }
.port:hover { background: var(--accent); transform: scale(1.25); }
.port-n { top: -6px; left: 50%; margin-left: -6px; }
.port-s { bottom: -6px; left: 50%; margin-left: -6px; }
.port-w { left: -6px; top: 50%; margin-top: -6px; }
.port-e { right: -6px; top: 50%; margin-top: -6px; }
.bnode.link-target { outline: 2px dashed var(--accent); outline-offset: 3px; }

/* Resize handle */
.resize-handle {
  position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px;
  border-radius: 3px; background: var(--accent); border: 2px solid var(--surface);
  cursor: nwse-resize; opacity: 0; z-index: 6;
}
.bnode.selected .resize-handle { opacity: 1; }

.board-hint-bar { margin-top: 8px; }