/* Docs template (site/docs/**): rules on top of the shared content
 * components in design.css. Loaded before design.css (sync-nav keeps
 * design.css last), so every selector here carries .article.article-doc
 * to outrank the shared .article rules. Markup contract: article.article
 * gets class article-doc and id main. */

/* Sections: a full-column hairline above each h2, matching the landing
   bands. The first h2 after the contents block skips it, because the
   contents block already ends on a hairline. */
.article.article-doc > h2 { max-width:none; margin-top:64px; padding-top:28px; border-top:1px solid var(--border); }
.article.article-doc > :is(.doc-toc, .article-toc) + h2,
.article.article-doc > .lead + h2 { margin-top:48px; padding-top:0; border-top:0; }
.article.article-doc > h3 { margin-top:36px; }

/* API reference: HTTP method inside an endpoint code span. */
.article.article-doc code .http-m { color:var(--accent); font-weight:700; margin-right:2px; }

/* Wide screens: the static contents list becomes a sticky rail to the
   right of the column. The float sits fully outside the content box (its
   negative right margin exceeds its width plus the gap), so it never
   narrows the text, and sticky keeps it in view until the article ends.
   Below 1360px there is no room, and it stays inline. */
@media (min-width:1360px) {
  .article.article-doc > .doc-toc { float:right; position:sticky; top:104px; width:200px; margin:0 -264px 0 0; padding:14px 0 6px; border-bottom:0; }
  .article.article-doc > .doc-toc ol { columns:auto; font-size:13.5px; }
  .article.article-doc > .doc-toc li a { padding:5px 0; }
  .article.article-doc > .doc-toc + h2 { margin-top:56px; }
  /* The shared 5+ column breakout would run under the rail; keep it in the column (it scrolls). */
  .article.article-doc:has(> .doc-toc) > .bench-table:has(tr > :nth-child(5)) { width:auto; max-width:100%; margin-left:0; }
}

/* Step guide sub-steps. The shared .doc-steps > ol > li is a two-column
   grid, which turns inline children (<strong>, <a>) into grid items and
   breaks the sentence apart. Keep the item a block and hang the number. */
.article.article-doc.doc-steps > ol > li { display:block; position:relative; padding:12px 0 12px 2.2em; }
.article.article-doc.doc-steps > ol > li::before { position:absolute; left:0; top:12px; }

/* td.good carries <span class="sr-only"> (position:absolute). Without a
   positioned ancestor inside the scroll wrapper, that span is placed
   against the page and widens it on phones (the table scrolls, the page
   should not). Make the wrapper the containing block so it is clipped. */
.article.article-doc > .bench-table { position:relative; }

/* Phones: two-column reference tables (endpoint | returns, status |
   meaning) stack the key over its value instead of squeezing the endpoint
   into a narrow column where it breaks mid-word. The header row stays in
   the accessibility tree. */
@media (max-width:560px) {
  .article.article-doc > .bench-table table:not(:has(tr > :nth-child(3))) thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .article.article-doc > .bench-table table:not(:has(tr > :nth-child(3))) :is(tbody, tr, td) { display:block; }
  .article.article-doc > .bench-table table:not(:has(tr > :nth-child(3))) tr { padding:12px 0; border-bottom:1px solid var(--border); }
  .article.article-doc > .bench-table table:not(:has(tr > :nth-child(3))) td { padding:2px 0; border:0; }
  .article.article-doc > .bench-table table:not(:has(tr > :nth-child(3))) td:first-child { padding-bottom:6px; }
}