/* ============================================================
   KNOWLEDGE GRAPH — Obsidian-brain view
   ============================================================ */

.graph-page { background:#070B09; }
.graph-shell { position:relative; }
#graph-canvas {
  display:block; width:100%; height:calc(100vh - 240px); min-height:520px;
  border:1px solid var(--m-rule); border-radius:var(--radius);
  background:
    radial-gradient(circle at 50% 45%, #0F1612 0%, #070B09 75%);
  cursor:grab;
}
#graph-canvas.dragging { cursor:grabbing; }

.graph-toolbar {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;
}
.graph-toolbar .chip {
  font-family:var(--m-font-signal); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; padding:7px 13px; border-radius:999px; cursor:pointer;
  border:1px solid var(--m-rule); color:var(--m-text-2); background:transparent;
  transition:all .15s; user-select:none;
}
.graph-toolbar .chip:hover { border-color:var(--m-accent-deep); color:var(--bone-0); }
.graph-toolbar .chip.on { background:var(--m-accent); color:var(--ink-950); border-color:var(--m-accent); font-weight:700; }
.graph-toolbar .chip.red.on { background:var(--flare-500); border-color:var(--flare-500); color:#070B09; }
.graph-toolbar input {
  background:var(--ink-850); border:1px solid var(--m-rule); border-radius:999px;
  color:var(--bone-0); font-family:var(--m-font-structure); font-size:13px;
  padding:8px 16px; outline:none; min-width:220px; margin-left:auto;
}
.graph-toolbar input:focus { border-color:var(--m-accent-deep); }

.graph-legend { display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-family:var(--m-font-signal); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--m-text-3); }
.graph-legend .lg { display:flex; align-items:center; gap:8px; }
.graph-legend .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.graph-legend .dot.ev { background:var(--flare-500); }
.graph-legend .dot.act { background:var(--solar-400); }
.graph-legend .dot.com { background:var(--pulse-500); }

#graph-info {
  position:absolute; top:14px; left:14px; z-index:5;
  background:rgba(7,11,9,.92); border:1px solid var(--m-rule); border-radius:12px;
  padding:14px 16px; max-width:320px; display:none;
}
#graph-info.show { display:block; }
#graph-info .k { font-family:var(--m-font-signal); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--m-accent); }
#graph-info .t { font-family:var(--m-font-story); font-size:16.5px; color:var(--bone-0); margin:5px 0 6px; line-height:1.3; }
#graph-info .d { font-size:12.5px; color:var(--m-text-2); font-family:var(--m-font-story); }
#graph-info .go { display:inline-block; margin-top:10px; font-family:var(--m-font-signal); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
#graph-info .go:hover { text-decoration:none; color:var(--flare-400); }

@media (max-width:760px) {
  .graph-toolbar input { margin-left:0; width:100%; }
  #graph-canvas { height:64vh; min-height:420px; }
}