.toc {
  text-align: left;
  position: relative;
  width: 100%;
  height: 100%;
}

@media (max-width: 991px) {
  .toc {
    display: none;
  }
}

.toc__container {
  max-width: 320px;
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toc__container:not(.is-fixed) {
  width: 100% !important;
}

@media (max-width: 991px) {
  .toc__container {
    padding-right: 16px;
  }
}

.toc__container.is-fixed {
  position: fixed;
}

.toc__container.is-bottom {
  bottom: 0;
}

.toc__title {
  font-size: var(--text-font-size-small);
  color: var(--secondary-text-color);
  margin: 0;
}

.toc__list {
  display: block;
  margin: 0;
  padding: 5px 0;
  font-size: var(--text-font-size-small);
  max-height: 100%;
  overflow-y: auto;
}

.toc__list::-webkit-scrollbar {
  display: none;
}

.toc__element {
  display: block;
  padding: 5px 0;
}

/* PATCHED: script-toc.js already computes a nesting depth per item and
   adds a "toc__element--level-N" class (N = 0, 1, 2...) to every <li> —
   this file just never did anything with it, which is the entire reason
   the ToC read as flat despite the underlying data already being
   hierarchical. 20px per level is a reasonable, easily-adjustable start;
   nudge the multiplier if it reads as too subtle or too aggressive.

   Caveat worth knowing: the tree-building logic in script-toc.js only
   tracks ONE level of nesting deep (a heading becomes a child of the
   most recent heading at a shallower level, but a grandchild heading
   doesn't get its own further-nested parent — it flattens back to the
   same tier as its "uncle" headings). For most real pages — H2 sections
   with H3 subheadings underneath — this indent will look completely
   correct. For a page with three or more *meaningfully distinct* heading
   depths all in play at once, deeper levels may not indent as far as
   you'd expect, since the tree itself caps at two tiers. Flag it if that
   turns out to matter in practice — fixing it for real would mean
   reworking createTocElement()/createTree() in script-toc.js to track a
   full ancestor stack instead of a single "last element," not just a CSS
   change. */
.toc__element--level-0 {
  padding-left: 0;
}

.toc__element--level-1 {
  padding-left: 20px;
}

.toc__element--level-2 {
  padding-left: 40px;
}

.toc__element--level-3 {
  padding-left: 60px;
}

.toc__element--level-4 {
  padding-left: 80px;
}

.toc__element + .toc__element {
  border-top: 1px solid var(--border-color);
}

.toc__element.is-active a {
  color: var(--primary-text-color);
}