/* ============================================================
   components/toc.css — .dd-toc
   A table of contents for a long page: where you are, and what is
   left. Built for the blog article (#112, B3).

   Markup contract:
     <nav class="dd-toc" data-dd-toc aria-labelledby="toc-title">
       <p class="dd-toc__title" id="toc-title">on this page.</p>
       <ol class="dd-toc__list">
         <li><a class="dd-toc__link" href="#anchor">…</a></li>
         <li class="dd-toc__item--sub"><a …>…</a></li>
       </ol>
     </nav>

   **Works with no JS**: it is a list of anchors, and that is already the
   whole feature. components.js adds the current-section marker
   (`aria-current="location"`), nothing else — so a dead script costs the
   highlight, not the navigation.
   ============================================================ */

.dd-toc {
  border-left: 2px solid var(--border);
  padding-left: var(--space-4, 16px);
}

.dd-toc__title {
  margin: 0 0 var(--space-3, 12px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.dd-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2, 8px);
}

.dd-toc__item--sub {
  padding-left: var(--space-4, 16px);
}

.dd-toc__link {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color var(--dur-fast, 160ms) var(--ease-dreamy, ease);
}

.dd-toc__link:hover,
.dd-toc__link:focus-visible {
  color: var(--link-hover, var(--link));
}

/* Where you are: the section being read (`location`), or the page you are on
   when the list is a set of pages (`page`). Weight and ink, not a colour swap —
   the coral fails AA as small text (design-language §1). */
.dd-toc__link[aria-current] {
  color: var(--text);
  font-weight: 600;
}