/* Canvas — a freeform board that can hold live cards from the project. */

.canvas-wrap { display: flex; flex-direction: column; height: 100%; }

.canvas-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--rule-soft);
}

.tool-group { display: flex; gap: 2px; padding: 2px; background: var(--ink-800); border: 1px solid var(--rule); border-radius: var(--r2); }
.tool {
  display: grid; place-items: center;
  width: 30px; height: 28px;
  background: none; border: 0; border-radius: var(--r1);
  color: var(--text-dim); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
}
.tool:hover { background: var(--ink-600); color: var(--text); }
.tool.on { background: var(--signal); color: #241701; }

.swatches { display: flex; gap: 4px; }
.swatches button {
  width: 20px; height: 20px; border-radius: var(--r1);
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.swatches button.on { border-color: var(--text); }

.canvas-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background-color: var(--ink-900);
  background-image: radial-gradient(circle, #26314a 1px, transparent 1px);
  cursor: default;
}
.canvas-stage.panning { cursor: grabbing; }
.canvas-stage.placing { cursor: crosshair; }

.canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.edge-layer { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.edge-hit { pointer-events: stroke; cursor: pointer; }

.node {
  position: absolute;
  border-radius: var(--r2);
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #1a1f2b;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-1);
  cursor: grab;
}
.node.sel { outline: 2px solid var(--signal); outline-offset: 2px; }
.node[contenteditable="true"] { cursor: text; outline: 2px solid var(--signal); }

.node.note { box-shadow: 0 2px 0 rgba(0,0,0,.25), var(--shadow-2); }
.node.text { background: transparent !important; color: var(--text); box-shadow: none; padding: 6px 8px; font-size: 16px; }
.node.rect { border: 2px solid; background: transparent !important; }
.node.ellipse { border: 2px solid; background: transparent !important; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.node.diamond { border: 2px solid; background: transparent !important; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); display: grid; place-items: center; text-align: center; }
.node.frame {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r3);
  color: var(--text-dim);
  box-shadow: none;
  padding: 0;
}
.node.frame .frame-label {
  position: absolute; top: -20px; left: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}

.node.card {
  background: var(--ink-700) !important;
  border: 1px solid var(--rule-strong);
  color: var(--text);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.node.card .labels { display: flex; gap: 4px; }
.node.card .labels span { height: 4px; width: 22px; border-radius: 2px; }
.node.card .ct { font-weight: 600; font-size: 13px; }
.node.card .cm { margin-top: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); display: flex; gap: 8px; }
.node.card .cm .open { color: var(--t-update); }

.handle {
  position: absolute; right: -5px; bottom: -5px;
  width: 11px; height: 11px;
  background: var(--signal);
  border: 2px solid var(--ink-900);
  border-radius: 2px;
  cursor: nwse-resize;
}

.marquee {
  position: absolute;
  border: 1px solid var(--signal);
  background: rgba(255,176,32,.08);
  pointer-events: none;
}

.zoom-pill {
  position: absolute; right: var(--s4); bottom: var(--s4);
  display: flex; align-items: center; gap: 2px;
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 3px;
  box-shadow: var(--shadow-2);
}
.zoom-pill button { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 4px 9px; border-radius: 20px; }
.zoom-pill button:hover { background: var(--ink-600); color: var(--text); }
.zoom-pill .level { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); min-width: 44px; text-align: center; }

.canvas-hint {
  position: absolute; left: var(--s4); bottom: var(--s4);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
  background: rgba(15,20,32,.8); border: 1px solid var(--rule-soft); border-radius: var(--r2);
  padding: 6px 10px;
  pointer-events: none;
}

.node.card, .node.frame { white-space: normal; }