/* ═══════════════════════════════════════════════════════════════
   TOC-UI — Auto-generated table-of-contents navigation.
   ═══════════════════════════════════════════════════════════════ */

@scope (toc-ui) {
  :where(:scope) {
    /* ── Layout ── */
    --toc-gap:              var(--a-space-1);
    --toc-indent:           var(--a-space-3);
    --toc-padding-block:    var(--a-space-1);
    --toc-padding-inline:   var(--a-space-2);

    /* ── Colors ── */
    --toc-fg:               var(--a-fg-muted);
    --toc-fg-active:        var(--a-fg);
    --toc-fg-hover:         var(--a-fg);
    --toc-rule-active:      var(--a-accent-bg);
    --toc-rule-inactive:    transparent;

    /* ── Typography ── */
    --toc-size:             var(--a-ui-sm);
    --toc-weight:           var(--a-weight);
    --toc-weight-active:    var(--a-weight-medium);
  }

  /* ── Host ── */
  :scope {
    box-sizing: border-box;
    display: block;
    color: var(--toc-fg);
    font-size: var(--toc-size);
  }

  /* ── Nav scaffold ── */
  nav {
    display: block;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--toc-gap);
  }

  li {
    /* Flush — the link element carries its own block padding so the
       hit-target is the entire row. */
    list-style: none;
  }

  /* ── Link ── */
  a {
    display: block;
    box-sizing: border-box;
    padding-block: var(--toc-padding-block);
    padding-inline: var(--toc-padding-inline);
    text-decoration: none;
    color: inherit;
    line-height: 1.4;
    border-inline-start: 2px solid var(--toc-rule-inactive);
    transition:
      color  var(--a-duration-fast) var(--a-easing),
      border-color var(--a-duration-fast) var(--a-easing);
  }

  a:hover {
    color: var(--toc-fg-hover);
  }

  a[data-active] {
    color: var(--toc-fg-active);
    border-inline-start-color: var(--toc-rule-active);
    font-weight: var(--toc-weight-active);
  }

  a:focus-visible {
    outline: none;
    box-shadow: var(--a-focus-ring);
    border-radius: var(--a-radius-sm);
  }

  /* ── Indentation by depth ── */
  a[data-depth="0"] { padding-inline-start: var(--toc-padding-inline); }
  a[data-depth="1"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 1); }
  a[data-depth="2"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 2); }
  a[data-depth="3"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 3); }
  a[data-depth="4"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 4); }
  a[data-depth="5"] { padding-inline-start: calc(var(--toc-padding-inline) + var(--toc-indent) * 5); }
}
