i have a simple `id` & `href` combo to make anchors clickable like html:

<div class="container">
  <div class="frontcover"></div>
  <nav id="toc" role="doc-toc" class="pagebreak">
    <h1>table of contents</h1>
    <ol>
      <li class="chapter">
        <a href="#chapter-1">chapter 1</a>
      </li>
      <li class="ml-3">
        <a href="#writing-a-table-of-contents">writing a table of contents</a>
      </li>
      <li class="chapter">
        <a href="#chapter-2">chapter 2</a>
      </li>
    </ol>
  </nav>
  <h1 class="chapter" id="#chapter-1">
    chapter 1
  </h1>
  <h2 class="subtitle" id="#writing-a-table-of-contents">
    writing a table of contents
  </h2>
  <h1 class="chapter" id="#chapter-2">
    chapter 2
  </h1>
</div>

my css:

/* table of contents start */
  #toc {
    break-before: page;
  }

  #toc ol {
    list-style-type: none;
  }

  #toc a:after {
    content: leader('. ') target-counter(attr(href), page);
  }

  #toc a {
    text-decoration: none;
  }
/* table of contents end */

for some reason, toc isn't clickable inside the pdf.

the outline in the editor works fine but not inside the pdf where toc is printed.

also, no numbers in toc. every item is 0.

1. index.css‎ 13.2 kB
2. index.html‎ 1.1 kB
3. index.pdf‎ 621.4 kB

If the reference is "#chapter-1" then the ID should just be "chapter-1", the hash character is part of the URL syntax, e.g. "http://example.com/mydoc.html#chapter-1".

that's gotta be stupidest thing i've ever done. can't believe it. thanks again for the help. it works now.