/* API entries inherit the shared page width and navigation. */
.api-list { margin: 20px 0; font-size: 0.85em; }
.api-entry { padding: 16px 0; border-bottom: 1px solid #222; scroll-margin-top: 16px; }
.api-entry:first-child { border-top: 1px solid #222; }
.api-entry dd { overflow-wrap: anywhere; }
.api-entry > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  list-style: none;
  cursor: pointer;
}
.api-entry:hover,
.api-entry:has(> summary:focus-visible) { background-color: #141418; }
.api-entry > summary::-webkit-details-marker { display: none; }
.api-entry > summary:hover .api-signature,
.api-entry > summary:focus-visible .api-signature {
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.55);
}
.api-entry > summary:focus-visible { outline: 1px solid #FFD27D; outline-offset: 5px; }
.api-description { display: block; grid-column: 2; margin-top: 8px; overflow-wrap: anywhere; }
.api-anchor { padding: 0 6px; color: #aaa; text-decoration: none; opacity: 0; }
.api-entry:hover .api-anchor,
.api-entry > summary:focus-within .api-anchor { opacity: 1; }
.api-anchor:hover,
.api-anchor:focus-visible { color: #00ff88; }
.api-anchor:focus-visible { outline: 1px solid #FFD27D; outline-offset: 2px; }
.api-signature {
  display: block;
  white-space: normal;
  overflow-x: auto;
}
.api-param { white-space: nowrap; }
.api-return { display: inline-block; white-space: pre; color: #aaa; }

.api-help { font-size: 0.85em; }
.api-fields { margin: 12px 0 4px; padding-left: 16px; border-left: 1px solid #333; cursor: pointer; }
.api-fields > div { margin-top: 12px; }
.api-fields > div:first-child { margin-top: 0; }
.api-fields dd { margin-top: 4px; }
.api-type { color: #aaa; overflow-wrap: anywhere; }
.api-result { padding-top: 12px; border-top: 1px solid #222; }

h3[id], p[id] { scroll-margin-top: 16px; }

/* In-page cross-references keep the surrounding text color. */
.api-xref { color: inherit; text-decoration: underline; text-decoration-color: #555; text-underline-offset: 3px; }
.api-xref:hover,
.api-xref:focus-visible { color: #FFD27D; text-decoration-color: currentColor; }
.api-xref:focus-visible { outline: 1px solid #FFD27D; outline-offset: 2px; }
.api-toc ul { list-style: none; margin: 0; padding: 0; }
.api-toc li { margin: 0; }
.api-toc li::before { content: none; }
.api-toc > ul { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.api-toc > ul > li > a { margin-right: 0; }
.api-toc li > ul { display: none; }

@media (min-width: 1100px) {
  .api-toc {
    top: var(--api-toc-top, 336px);
    max-width: 300px;
    max-height: calc(100dvh - var(--api-toc-top, 336px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 4px 0;
  }
  .api-toc::-webkit-scrollbar { display: none; }
  .api-toc > ul { display: block; }
  .api-toc .is-active > ul { display: block; }
  .api-toc li > ul {
    width: max-content;
    max-width: 100%;
    margin: 4px 0 8px auto;
    text-align: left;
    padding-right: 10px;
    border-right: 1px solid #333;
  }
  .api-toc .has-active-subsection > ul > .api-toc-api { display: none; }
  .api-toc li > ul a { font-size: 0.9em; overflow-wrap: anywhere; }
  .api-toc .api-toc-branch > a { text-align: right; }
  .api-toc li > ul a::before { content: none; }
  .api-toc .api-toc-api > a { font-size: 0.8em; color: #aaa; text-transform: none; font-weight: normal; }
  .api-toc a[aria-current="location"] { color: #00ff88; }
}

@supports (scroll-target-group: auto) and selector(a:target-current) {
  @media (min-width: 1100px) {
    .api-toc {
      scroll-target-group: auto;
      top: 24px;
      bottom: 24px;
      display: flex;
      flex-direction: column;
      max-height: none;
      overflow: visible;
      padding: 0;
      pointer-events: none;
    }
    /* Start at 336px; give up the spacer as the expanded tree grows. */
    .api-toc::before {
      content: "";
      flex: 0 1 312px;
    }
    .api-toc > ul {
      flex: 0 0 auto;
      box-sizing: border-box;
      max-height: 100%;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      padding-block: 4px;
      pointer-events: auto;
    }
    .api-toc > ul::-webkit-scrollbar { display: none; }
    /* Keep link boxes in the scroll group even while their branch is folded. */
    .api-toc li > ul {
      display: block;
      height: 0;
      overflow: hidden;
      margin-block: 0;
    }
    .api-toc li:has(a:target-current) > ul {
      height: auto;
      overflow: visible;
      margin-block: 4px 8px;
    }
    .api-toc a:target-current { color: #00ff88; }
    .api-toc > ul > li:has(.api-toc-branch a:target-current) > ul > .api-toc-api {
      height: 0;
      overflow: hidden;
    }
  }
}

@media (max-width: 600px) {
  .api-signature-mobile .api-params { display: block; padding-left: 2ch; }
  .api-signature-mobile .api-param { display: block; }
  .api-signature-mobile .api-return { display: block; }
}
