/**
 * root Design System - documentation styles: table of contents (root-scroll-spy)
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. Same constraints as the rest of the
 * shell: zero CSS classes - element, `[data-part]` and attribute selectors only - zero
 * inline styles, and every value a root foundation token.
 */

/* The component paints itself - title, rail, items, active item - so what is left
   here is where the column sits: opposite the sidebar, sticky against the viewport,
   scrolling on its own when a page has more sections than fit. */
[data-part="toc"] {
  /* The component's own tokens, remapped onto this shell's scale and palette rather
     than overridden with new rules: the column faces the sidebar across the page and
     has to read as the same navigation, and at the component's defaults it did not -
     a 1.6rem half-transparent title against the sidebar's 1.1rem group heading, and
     1.6rem near-black entries against 1.45rem links. */
  /* The token, not the literal it was: `--root-s--md` *is* 1.6rem - it resolves to
     `--root-t--font-size--base`, which is where the whole spacing ramp is generated
     from - so this is a rename and not a change, and the column follows the scale if
     the scale ever moves.
     The four lengths below stay literal on purpose, and it is worth saying why rather
     than leaving the next reader to wonder whether they were missed. The type steps are
     authored as `calc(1em / pow(ratio, n))`, so a step is relative to whatever font-size
     it lands in, and the foundations re-declare `--root-t--font-size` on every
     descendant of `body`: a token here resolves against the item's own size, not the
     column's, which is how a 1.1rem heading becomes something else per page. The two
     paddings and the gap are matched to the sidebar's own literals so the two columns
     line up across the page, and 0.8rem is not `--root-s--2xs` (8.19px) - moving one
     column onto the ramp and not the other is what would break the alignment Phase 0
     went to the trouble of getting. */
  --root-scroll-spy--gap: var(--root-s--md);
  --root-scroll-spy--title--font-size: var(--root-t--font-size--xs);
  --root-scroll-spy--title--letter-spacing: 0.08rem;
  --root-scroll-spy--title--color: var(--docs-muted);
  --root-scroll-spy--title--opacity: 1;
  /* No rail. The sidebar lists sixty-six pages without one, so a vertical line down
     this column is the single thing that says "different component" loudest. */
  --root-scroll-spy--line-width: 0;
  --root-scroll-spy--item--font-size: var(--root-t--font-size--sm);
  --root-scroll-spy--item--color: var(--docs-text);
  --root-scroll-spy--item--color--active: light-dark(
    var(--root-c--default-400--light),
    var(--root-c--default-300--dark)
  );
  --root-scroll-spy--item--padding-block: var(--root-s--2xs);
  --root-scroll-spy--item--padding-inline: var(--root-s--2xs);
  --root-scroll-spy--item--gap: var(--root-s--5xs);
  --root-scroll-spy--focus--outline-color: light-dark(
    var(--root-c--default-400--light),
    var(--root-c--default-300--dark)
  );

  width: var(--docs-toc-w);
  /* The component's own stylesheet parks it at `align-self: flex-start`, which is right
     for a spy dropped beside a section and wrong for a column: without this the rail's
     border stops wherever the list happens to end. */
  align-self: stretch;
  min-height: 0;
  padding: var(--root-s--3xl) var(--root-s--md);
  overflow-y: auto;
  border-left: var(--docs-rule-width) solid var(--docs-rule);

  /* The same wash the sidebar puts behind the page it is on, for the section being read:
     two navigations marking "you are here" two different ways is what made this column
     look like it came from somewhere else. */
  a[aria-current] {
    background: var(--docs-accent-weak);
    border-radius: var(--root-r--md);
  }

  /* A page with no `h2` has nothing to list, and an empty rail beside it reads as a
     column that failed to load. */
  &:not(:has(a)) {
    display: none;
  }
}

/* The heading lines up with the entries under it, the way a sidebar group heading lines
   up with its links, and the column starts at the same height as the sidebar's own
   first heading rather than at the top of the page. */
[data-part="toc"] > span {
  padding-inline-start: var(--root-s--2xs);
  font-weight: 600;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  [data-part="toc"] {
    position: static;
    width: auto;
    min-height: auto;
    padding: var(--root-s--xl);
    overflow-y: visible;
    border-left: 0;
    border-top: var(--docs-rule-width) solid var(--docs-rule);
  }
}