/* Graph canvas: the one on the search page and the small one inside a note.
   The old .graphpage / .gpanel layout left with the separate graph view — the
   search page owns that layout now (css/search.css). */

/* --- canvas --- */
.gcanvas-wrap {
  position: relative;
  /* fills the row the grid gave it; the old calc() guessed at the hero height
     and went wrong the moment anything above it changed size */
  height: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Slightly darker than the page, so the nodes have something to sit on. The
     violet spotlight gradient that used to be here is gone. */
  background: var(--bg-2);
  overflow: hidden;
}
.gcanvas-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Narrow screens stack the panel above the canvas, so a fixed one-screen grid
   cannot hold them both — the page goes back to scrolling normally. The canvas
   gets an explicit height again because there is no 1fr row to fill. */
@media (max-width: 900px) {
  .graphpage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: auto;
    min-height: 100svh;
    overflow: visible;
    padding-top: 92px;
  }
  .gpanel { align-self: start; overflow: visible; }
  #graph-hover { flex: none; overflow-y: visible; }
  .gcanvas-wrap { height: 64svh; }
}

/* --- local graph inside the reader --- */
.notelinks__graph {
  position: relative;
  height: 260px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
  margin-bottom: 20px;
}
.notelinks__graph canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.notelinks__graphlabel {
  position: absolute;
  top: 9px; left: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted);
  pointer-events: none;
}

/* --- topic filters (now in the search page's control row) --- */
.gchips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip {
  --accent-topic: var(--muted);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  transition: color .18s, border-color .18s, background .18s;
}
.gchip[data-gcat="cyber"] { --accent-topic: var(--cyber); }
.gchip[data-gcat="linux"] { --accent-topic: var(--tux); }
.gchip[data-gcat="coding"] { --accent-topic: var(--code); }
.gchip[data-gcat="compilers"] { --accent-topic: var(--comp); }
.gchip:hover { color: var(--ink); border-color: var(--muted); }
.gchip.is-on {
  color: var(--ink);
  border-color: var(--accent-topic);
  background: color-mix(in srgb, var(--accent-topic) 14%, transparent);
}
.gpanel__reset {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  transition: color .18s, border-color .18s;
}
.gpanel__reset:hover { color: var(--ink); border-color: var(--muted); }