/* The canvas surface: the graph canvas itself, the pan/zoom cursor states,
   and the overlay bits anchored on top of it (hint, status, tooltip). */

#canvasWrap { position: relative; flex: 1; min-width: 0; }
canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
canvas.dragging { cursor: grabbing; }

#hint {
  position: absolute; left: 14px; bottom: 12px; color: var(--muted); font-size: 11.5px;
  pointer-events: none;
}
#status {
  position: absolute; right: 14px; bottom: 12px; color: var(--muted); font-size: 11.5px;
  pointer-events: none;
}

#tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 6px 9px; font-size: 12px; max-width: 260px; box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  display: none;
}
#tooltip .t-code { font-weight: 600; color: var(--text-primary); }
#tooltip .t-title { color: var(--text-secondary); }
#tooltip .t-rel { color: var(--muted); font-size: 11px; margin-top: 2px; }