First commit

frontend/app/assets/css/_graph.scss

@@ -0,0 +1,68 @@
+// ---------- Graph view (the link map) ----------
+
+// desktop: the map owns the space beside the sidebar the way the open
+// book does — a full surface with its toolbar floating over it.
+// (The page transition only fades, so no transform steals the
+// fixed positioning.)
+.graph-stage {
+  position: fixed;
+  inset: 0 0 0 var(--sidebar-w);
+  transition: left 0.22s ease;
+  z-index: 1;
+  background: var(--bg);
+}
+
+.graph-canvas-wrap { position: absolute; inset: 0; }
+
+.graph-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  touch-action: none; // the map owns drags and pinches, not the page
+}
+
+.graph-toolbar {
+  position: absolute;
+  top: 16px;
+  right: 18px;
+  z-index: 2;
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
+  backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-sm);
+}
+
+.graph-state {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+
+  .banner { width: min(520px, 100%); }
+}
+
+// the top bar is in the flow here, so the map folds into a panel of
+// the page instead of covering the screen
+@media (max-width: 900px) {
+  .graph-stage { position: static; inset: auto; background: transparent; }
+
+  .graph-canvas-wrap {
+    position: relative;
+    height: min(66dvh, 560px);
+    margin: 20px 0 28px;
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    overflow: hidden;
+    background: var(--bg-elev);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .graph-toolbar { top: 10px; right: 10px; }
+
+  .graph-state { position: static; display: block; padding: 8px 0 32px; }
+}