/**
 * root Design System - documentation styles: navigation (root-tree-view)
 *
 * 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's own tokens, remapped onto this shell's scale and palette the same way
   the table of contents is - and for the same reason: the sidebar's look is not up for
   negotiation, only its behavior changed. What the component brings is the collapsing
   and the ARIA tree keyboard model; what it must not bring is a second visual language
   down the left of every page.

   Values only, from here down. The group heading used to be a block of rules of its own -
   `[data-part="nav-group"] > span` with the weight, the sticky offset, the ground behind
   it, the hover wash and the count pushed to the end - which is `root-tree-view`'s branch
   row, described a second time in selectors the component knows nothing about. Every one
   of those declarations is in the component now (`_core.css`, `_states.css`) and what is
   left here is what the shell alone can know: its own scale, its own palette, and how far
   down the column a sticky row has to stop. */
[data-part="nav"] {
  /* The row every entry in this column is, and the height of anything sitting at the end
     of one. Declared once here and read by both kinds of row - the branch heading through
     the component's `--root-tree-view--item--height`, the leaf's link through its own rule
     below - so a heading and the links it labels are the same height by construction, and
     stay the same height if either token moves. The badge is the row's line box exactly:
     `root-badge`'s own `small` is 25px, a step drawn for a badge beside a heading, and at
     25px it was the thing deciding how tall the row was. */
  --docs-nav-row-h: calc(var(--root-t--font-size--sm) * var(--root-t--line-height--base) + var(--root-s--2xs) * 2);
  --docs-nav-badge-h: calc(var(--root-t--font-size--sm) * var(--root-t--line-height--base));

  /* One step of the spacing scale per level - `sm`, the "300" of the ramp: `xs` does not
     read as a level at this row height and `md` walks the deepest entries a third of the
     way across a 30rem column. No connector rail, which is the same call the toc makes. */
  --root-tree-view--indent: var(--root-s--sm);
  --root-tree-view--line-width: 0;

  --root-tree-view--item--height: var(--docs-nav-row-h);
  --root-tree-view--item--padding-inline: var(--root-s--2xs);
  --root-tree-view--item--padding-block: var(--root-s--2xs);
  --root-tree-view--item--line-height: var(--root-t--line-height--base);
  --root-tree-view--item--border-radius: var(--root-r--md);
  /* The same step as a link, not smaller: a branch that labels fifty-four entries was
     reading at 1.1rem against their 1.45rem, so the parent looked like a footnote to its
     own children. The branch is told apart by its weight and by the two marks at the end
     of its row. */
  --root-tree-view--item--font-size: var(--root-t--font-size--sm);
  --root-tree-view--item--color: var(--docs-muted);
  --root-tree-view--item--gap: var(--root-s--3xs);
  --root-tree-view--focus--outline: var(--root-f--outline-width) solid
    light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
  --root-tree-view--focus--outline-offset: var(--root-f--outline-offset);

  /* The branch row. The heading and the list it labels are two children of one `<li>` and
     nothing separated them: measured flush, to 0.02px. Both are pills with a radius, so
     wherever either carried a wash their rounded corners met and the entry's wash read as
     running up *into* the heading above it. The same 0.2rem the list already puts between
     its own items, so the column has one rhythm and not two.

     Sticky under the brand and the search row, which is the one value only this stylesheet
     can supply: the row has to stop where the two boxes above the scroller end, and the
     ground behind it is what stops the links scrolling underneath from showing through.
     `--docs-surface`, opaque, for exactly that reason.

     Title case at the weight: the row used to be `text-transform: uppercase` with 0.08rem
     of tracking, which is how it was told apart from the links under it. It is told apart
     by its shape now - bold, and a count and a chevron at the far end - so the label can
     just be the word, and the component's own default (`none`) is what it wants. Both marks
     being at the *end* is what lets a heading start at the same inline offset as the links
     it labels; a leading chevron indented it past them. */
  --root-tree-view--branch--gap: var(--root-s--5xs);
  --root-tree-view--branch--spacing: 1.6rem;
  --root-tree-view--branch--color: var(--docs-text);
  --root-tree-view--branch--color--current: light-dark(
    var(--root-c--default-400--light),
    var(--root-c--default-300--dark)
  );
  --root-tree-view--branch--background-color: var(--docs-surface);
  --root-tree-view--branch--bg--hover: var(--docs-accent-weak);
  --root-tree-view--branch--position: sticky;
  --root-tree-view--branch--inset-block-start: calc(var(--docs-sidebar-brand-h) + var(--docs-sidebar-search-h));
  --root-tree-view--branch--z-index: var(--root-z--sticky);
  --root-tree-view--branch--count--block-size: var(--docs-nav-badge-h);

  display: block;

  /* `:not([hidden])`, and it is not decoration: a collapsed branch is hidden by the
     component setting `hidden` on its `<ul role="group">`, and `display: flex` here would
     outrank the `display: none` that attribute carries - the branch would collapse in the
     DOM and stay on screen. */
  ul:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--root-s--5xs);
  }
}

/* A row, not a block: the "wip" mark on an unfinished entry goes to the far end of the
   link the way a count goes to the far end of a branch heading, and `margin-inline-start:
   auto` needs a flex line to take the free space from. In flow the mark sat against the
   name, so thirty-six of them made a ragged second column down the middle of the sidebar.
   The height is the shared row height rather than the padding plus whatever is tallest
   inside: a badged row was 0.09px taller than a plain one, which is nothing to look at and
   still two different rows. */
a[data-nav] {
  display: flex;
  align-items: center;
  gap: var(--root-s--3xs);
  block-size: var(--docs-nav-row-h);
  padding-inline: var(--root-s--2xs);
  font-size: var(--root-t--font-size--sm);
  color: var(--docs-text);
  text-decoration: none;
  border-radius: var(--root-r--md);

  &:hover {
    background: var(--docs-accent-weak);
  }

  &[aria-current="page"] {
    color: light-dark(var(--root-c--default-400--light), var(--root-c--default-300--dark));
    background: var(--docs-accent-weak);
    font-weight: 600;
  }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 60rem) {
  /* The branch heading too, through the token that decides whether it sticks at all. This
     rule used to name `li[data-part="nav-group"]` - which is not the element that sticks,
     the row inside it is - so it had been doing nothing since the sticky moved onto the
     row. The row keeps its padding here: it is a row, and it is the same row it is on a
     desktop. */
  [data-part="nav"] {
    --root-tree-view--branch--position: static;
  }
}