details:has(#TableOfContents) {
  grid-column: main-start / main-end;

  summary {
    font-family: var(--font-family-heading);
    font-size: var(--text-m);

    &::before {
        content: "+ ";
        font-weight: bold;
    }

    &::marker {
      /*
       * This is the only way I could figure to hide the disclosure triangle on
       * Chrome. visibility:none didn't work.
       * See https://mark.ie/blog/hide-the-arrow-on-details-summary-element/
       */
      content: "";
    }

    &::-webkit-details-marker {
        display: none;
    }
  }

  &[open] {
    summary::before {
      content: "- ";
    }
  }

  #TableOfContents {
    > ul {
      margin-block: 0;
      font-size: var(--text-m);
    }

    ul {
        list-style-type: none;
    }
  }
}