/* The API reference: the site's styles plus a contents sidebar, endpoint lines and parameter tables. */

.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s12); max-width: 1120px; margin: 0 auto;
  padding: 0 var(--s6); }
.toc-wrap { position: sticky; top: calc(48px + var(--s6)); align-self: start; padding-top: var(--s12); }
.toc { font-size: var(--fs-14); }
.toc summary { display: none; }   /* desktop: an always-open sidebar */
.toc-links { display: flex; flex-direction: column; max-height: calc(100vh - 48px - var(--s16)); overflow-y: auto; }
.toc a { color: var(--text-2); padding: 3px 0 3px var(--s3); border-left: 1px solid var(--line); }
.toc a:hover { color: var(--text); text-decoration: none; border-left-color: var(--muted); }
.toc .grp { margin: var(--s4) 0 var(--s1); font-size: var(--fs-12); color: var(--muted); }

.ref { min-width: 0; max-width: 780px; margin: 0; padding: 0 0 var(--s16); }   /* not site.css main: auto margins would size it to its content */
.ref h1 { font-size: var(--fs-28); margin: var(--s12) 0 var(--s3); }
.ref .lead { font-size: var(--fs-16); }
.ref section { padding-top: var(--s8); scroll-margin-top: calc(48px + var(--s4)); }
.ref h2 { font-size: var(--fs-20); }
.ref p { font-size: var(--fs-16); }
.ref b { color: var(--text); font-weight: 600; }
.ep { font: var(--fs-14) var(--mono); margin: var(--s4) 0 var(--s2); color: var(--text); }
.ep b { color: var(--blue); font-weight: 600; margin-right: var(--s2); }
.ref pre { font-size: var(--fs-12); }

.t { width: 100%; border-collapse: collapse; font-size: var(--fs-14); margin: 0 0 var(--s4); }
.t th, .t td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line);
  color: var(--text-2); line-height: 1.5; }
.t th { color: var(--text); font-weight: 600; white-space: nowrap; width: 1%; }
.t thead th { border-bottom-color: var(--line-strong); width: auto; }
.t.params td:first-child { white-space: nowrap; width: 1%; }
.t td code { overflow-wrap: anywhere; }   /* long field lists wrap */
.t th code, .t.params td:first-child code { white-space: nowrap; }

@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--s4); }
  /* contents: a sticky menu bar */
  .toc-wrap { position: sticky; top: 48px; z-index: 10; padding: 0; margin: var(--s4) calc(-1 * var(--s4)) 0;
    background: var(--bg); border-bottom: 1px solid var(--line); }
  .toc summary { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); cursor: pointer;
    font-weight: 600; list-style: none; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc summary::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform var(--fast); }
  .toc[open] summary::after { transform: rotate(-135deg); }
  .toc-links { position: absolute; left: 0; right: 0; max-height: 70vh; padding: var(--s2) var(--s4) var(--s4);
    background: var(--bg); border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow); }
  .toc a { border-left: 0; padding: 7px 0; }
  .toc .grp { margin: var(--s3) 0 0; }
  .ref section { scroll-margin-top: 104px; }   /* below the sticky bar */
  /* two-column tables stack: the name on its own line, then the description, at full width */
  .t:not(:has(thead)), .t:not(:has(thead)) tbody, .t:not(:has(thead)) tr,
  .t:not(:has(thead)) th, .t:not(:has(thead)) td { display: block; width: auto; }
  .t:not(:has(thead)) tr { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .t:not(:has(thead)) th, .t:not(:has(thead)) td { border: 0; padding: 0; white-space: normal; }
  .t:not(:has(thead)) tr > :first-child { color: var(--text); font-weight: 600; margin-bottom: 2px; }
  .t.params td:first-child, .t th { white-space: normal; width: auto; }   /* not the desktop 1% name column */
  .t td code, .t th code { white-space: normal; overflow-wrap: break-word; word-break: normal; }
  /* the plans table keeps its columns, a little tighter */
  .t:has(thead) { font-size: var(--fs-13); }
  .t:has(thead) th, .t:has(thead) td { padding-right: var(--s2); }
  .ref pre { font-size: 11px; }
}

.ref .btn.get { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--s4); font-size: var(--fs-14); color: var(--bg); text-decoration: none; }