// ---------- 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; }
}