/*
  The api docs (/api/). Long-form reading in the system: a head, the table of contents (a
  collapsed disclosure on a phone, a sticky column from 900px), and the article with its limits
  strip, endpoint headings and code blocks that scroll sideways instead of widening the page.
  Loaded by the <!-- style: /assets/page-api.css --> marker in pages/api.html and pages/zh/api.html.
  The page has no script: the contents are plain links to section ids.

  Design v3: the base url as a pill under the lead, method badges tinted by kind (get teal, post
  lime), the limits as one hairline panel, code in a lit well, and the phone contents as a
  closed panel like details.learn.
*/

html {
  scroll-behavior: smooth;
}

/* The title's top and the lead under it come from the shared page head (ui.css). */
.docs-head {
  margin-bottom: var(--s5);
}
/* The base url, the one thing everyone reading this page needs first. */
.docs-base {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s3);
  max-width: 100%;
  margin: var(--s4) 0 0;
  padding: var(--s2) var(--s4);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.docs-base code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--lime);
  background: none;
  padding: 0;
  overflow-wrap: anywhere;
}
.docs-base-l {
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---- table of contents */

.docs-toc ol {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
}
.docs-toc a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--hit);
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}
.docs-toc a:hover {
  color: var(--text);
  background: var(--raised);
}
.docs-toc-group {
  margin: var(--s3) 0 var(--s1);
  padding: 0 var(--s3);
  color: var(--text3);
  font-size: var(--fs-sm);
  font-weight: 700;
}
/* The phone contents: a closed panel in the learn style. */
details.docs-toc-phone {
  margin-bottom: var(--s6);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
details.docs-toc-phone > summary {
  padding: 0 var(--s4);
  font-weight: 700;
}
.docs-toc-phone > nav {
  padding: 0 var(--s2) var(--s2);
  border-top: 1px solid var(--hair);
}
.docs-toc-phone .docs-toc-group:first-child {
  margin-top: 0;
}

/* ---- endpoint names: method badge plus a mono path */

.docs-method {
  display: inline-block;
  padding: 0 var(--s2);
  border-radius: 6px;
  background: var(--teal-soft);
  box-shadow: inset 0 0 0 1px rgba(111, 227, 205, 0.22);
  color: var(--teal);
  font-family: var(--mono);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
  vertical-align: 0.12em;
}
.docs-method.docs-post {
  background: var(--lime-soft);
  box-shadow: inset 0 0 0 1px rgba(198, 240, 0, 0.22);
  color: var(--lime);
}
.docs-path {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.docs-toc .docs-method {
  font-size: var(--fs-sm);
  min-width: 3.6em;
  text-align: center;
}
.docs-toc .docs-path {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

/* ---- the article */

.docs {
  max-width: 72ch;
  min-width: 0;
}
.docs .docs-sec {
  scroll-margin-top: calc(var(--headh) + var(--s4));
}
.docs .docs-sec + .docs-sec {
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--hair);
}
.docs.prose h2 {
  margin: 0 0 var(--s3);
  font-size: var(--fs-xl);
  line-height: 1.35;
}
/* Sentences under an example: body size, one step quieter only in colour. */
.docs p.sub {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text2);
}
html[lang|="zh"] .docs p.sub {
  line-height: 1.75;
}
.docs code {
  font-size: var(--fs-sm);
}

.docs-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s5) 0 0;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.docs-limits > div {
  background: var(--panel);
  padding: var(--s3) var(--s4);
  min-width: 0;
}
.docs-limits > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.docs-limits dt {
  color: var(--text2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}
.docs-limits dd {
  margin: var(--s1) 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.docs-list {
  margin: 0 0 var(--s4);
  padding-left: 1.4em;
}
.docs-list li {
  line-height: 1.65;
  margin-bottom: var(--s2);
}
html[lang|="zh"] .docs-list li {
  line-height: 1.8;
}
.docs-list li::marker {
  color: var(--text2);
  font-weight: 700;
}

/* Code blocks scroll sideways inside themselves; the page never does. */
.docs-code {
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--well);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--edge);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  tab-size: 2;
  max-width: 100%;
}
.docs-code:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.docs-top {
  margin: var(--s8) 0 0;
}
.docs-top .textbtn {
  margin-left: 0;
}

@media (min-width: 900px) {
  .docs-head {
    margin-bottom: var(--s7);
  }
  .docs-grid {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--s8);
    align-items: start;
  }
  .docs-toc-desk {
    position: sticky;
    top: calc(var(--headh) + var(--s5));
    max-height: calc(100vh - var(--headh) - var(--s7));
    overflow-y: auto;
    margin-left: calc(-1 * var(--s3));
    padding-bottom: var(--s4);
  }
  .docs-toc-title {
    padding: 0 var(--s3);
    margin-bottom: var(--s2);
  }
  .docs-limits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .docs-limits > div:last-child:nth-child(odd) {
    grid-column: auto;
  }
  /* five limits in three columns: the last one takes the two cells left in its row */
  .docs-limits > div:nth-child(3n + 2):last-child {
    grid-column: span 2;
  }
}