/* Group labels (Concepts / How-to / Reference tables / Entry points / ...)
 * default to the same weight and colour as page links, so the two read as
 * a flat list. Lift them with uppercase + letter-spacing, the convention
 * used by Material's own docs, Stripe, Vercel, and Tailwind.
 */
.md-nav__item--section > .md-nav__link {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  font-weight: 700;
  opacity: 0.75;
}

/* Indent page links under any parent, but keep nested section labels flush
 * so group headings (e.g. CONCEPTS under USER GUIDE) don't read as pages.
 */
.md-nav__item > .md-nav > .md-nav__list > .md-nav__item:not(.md-nav__item--section) > .md-nav__link {
  padding-left: 0.5rem;
}

/* Stronger active-page highlight than Material's default (text-tint only is
 * easy to miss on a long nav list). Scoped to the primary sidebar so the
 * secondary TOC (right-side, in-page headings) keeps a lighter treatment —
 * the filled-block style swallows the TOC item's text node (#360).
 */
.md-nav--primary .md-nav__item--active > .md-nav__link--active,
.md-nav--primary .md-nav__link--active {
  font-weight: 700;
  background: var(--md-primary-fg-color);
  color: #fff;
  border-radius: 0.15rem;
  box-shadow: inset 0.2rem 0 0 var(--md-primary-fg-color--dark);
  position: static;
}

[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--active > .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link--active {
  background: var(--md-primary-fg-color--light);
  color: #fff;
  box-shadow: inset 0.2rem 0 0 var(--md-primary-fg-color);
}

/* Secondary TOC (right-side, in-page headings): use a tinted-text + left-border
 * accent. Keeps the heading text readable while still distinguishing the
 * currently-in-view section from inactive entries.
 */
.md-nav--secondary .md-nav__link--active {
  font-weight: 700;
  color: var(--md-primary-fg-color);
  box-shadow: inset 0.15rem 0 0 var(--md-primary-fg-color);
}

[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
  color: var(--md-primary-fg-color--light);
  box-shadow: inset 0.15rem 0 0 var(--md-primary-fg-color--light);
}