/* /docs/: the merchant API document, on top of /ui/ui.css and /ui/pages.css. */
.docbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 10px var(--s6); background: var(--glass-thick); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: .5px solid var(--separator); }
.docbar .shop-brand { display: flex; align-items: center; gap: 10px; color: var(--label); }
.docbar .shop-brand:hover { text-decoration: none; }
.docbar .shop-brand b { display: block; font: 600 15px/1.15 var(--font-display); letter-spacing: -.02em; }
.docbar .shop-brand small { display: block; font-size: 11px; color: var(--label-2); }
.docs { max-width: 1120px; margin: 0 auto; padding: var(--s8) var(--s6) var(--s10); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s10); }
.toc { position: sticky; top: 84px; align-self: start; display: grid; gap: 2px; }
.toc .eyebrow { font: 600 13px/1.3 var(--font); color: var(--label-2); margin: 0 0 var(--s2) 10px; }
.toc a { padding: 6px 10px; border-radius: var(--r-sm); color: var(--label); font-size: 14px; }
.toc a:hover { background: var(--fill-4); text-decoration: none; }
.doc { min-width: 0; max-width: 760px; font-size: 16px; line-height: 1.6; }
.doc h1 { font-size: 40px; letter-spacing: -.03em; margin-bottom: var(--s5); }
.doc h2 { font-size: 26px; letter-spacing: -.025em; margin: var(--s10) 0 var(--s3); scroll-margin-top: 80px; }
.doc h3 { font-size: 18px; margin: var(--s6) 0 var(--s2); }
.doc p { margin: 0 0 var(--s3); }
.doc ul { margin: 0 0 var(--s3); padding-left: 22px; }
.doc li { margin: 4px 0; }
.doc code { background: var(--fill-4); border-radius: 6px; padding: 1px 6px; font-size: .86em; }
.doc pre.code { margin: var(--s3) 0 var(--s5); font-size: 13px; }
.doc pre.code code { background: none; padding: 0; }
.doc .card { margin: var(--s3) 0 var(--s5); }
.doc .card + * { margin-top: 0; }
.doc table { font-size: 14px; }
.doc td.wrap { min-width: 0; white-space: normal; }
.doc td code { white-space: nowrap; }
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); padding: var(--s5) var(--s4) var(--s8); gap: var(--s4); }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .toc .eyebrow { display: none; }
  .toc a { background: var(--fill-3); border-radius: var(--r-pill); font-size: 13px; padding: 6px 12px; }
  .doc h1 { font-size: 30px; }
  .docbar { padding: 10px var(--s4); }
}