/* API documentation */

.container-wide { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.docs-tag { font-size: 12px; font-weight: 600; color: var(--primary-text); background: var(--primary-soft);
  border: 1px solid var(--primary-line); padding: 1px 8px; border-radius: 999px; margin-left: 2px; }
.docs-menu { display: none; }

.docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }

.docs-sidebar { position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 28px 8px 40px 0;
  border-right: 1px solid var(--border); scrollbar-width: thin; }
.toc { display: grid; gap: 1px; }
.toc-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 20px 0 6px 12px; }
.toc-title:first-child { margin-top: 0; }
.toc a { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; color: var(--text-2); font-size: 14px;
  border-left: 2px solid transparent; }
.toc a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.toc a.active { background: var(--primary-soft); color: var(--primary-text); border-left-color: var(--primary); font-weight: 600; }

.m { font: 700 10px/1 var(--mono); letter-spacing: .03em; padding: 4px 6px; border-radius: 5px; flex: none; }
.m-post { color: #86efac; background: rgba(134, 239, 172, .1); border: 1px solid rgba(134, 239, 172, .25); }
.m-get { color: #7dd3fc; background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .25); }

.docs-content { min-width: 0; max-width: 820px; padding: 44px 0 64px; }
.doc-section { padding: 36px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 80px; }
.doc-section:first-child { padding-top: 0; }
.doc-section h1 { font-size: clamp(32px, 4vw, 42px); margin: 10px 0 14px; font-weight: 750; letter-spacing: -0.03em; }
.doc-section h2 { font-size: 26px; margin-bottom: 14px; font-weight: 700; }
.doc-section h3 { font-size: 17px; margin: 28px 0 10px; }
.doc-section > p, .doc-section > .tabs + p { color: var(--text-2); margin: 12px 0; }
.doc-section .lead { font-size: 17px; }
.doc-section .codeblock { margin: 16px 0; }
.doc-section .codeblock pre { margin: 0; }
.small { font-size: 13px; }

.doc-list { color: var(--text-2); padding-left: 20px; margin: 12px 0; display: grid; gap: 8px; }
.doc-list li::marker { color: var(--primary); }
.doc-steps { color: var(--text-2); padding-left: 22px; display: grid; gap: 10px; margin: 16px 0; }
.doc-steps li::marker { color: var(--primary-text); font-weight: 700; }
.doc-steps strong, .doc-list strong { color: var(--text); }

.callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.callout-card { display: grid; gap: 4px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  transition: border-color .15s, background-color .15s; }
.callout-card:hover { border-color: var(--primary-line); background: var(--surface-2); text-decoration: none; }
.callout-card strong { color: var(--text); }
.callout-card span { color: var(--muted); font-size: 13.5px; }

.endpoint-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.endpoint-head h2 { font-family: var(--mono); font-size: 24px; margin: 0; letter-spacing: -0.01em; }
.endpoint-head .m { font-size: 12px; padding: 6px 9px; }

.doc-table { margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.doc-table td { padding: 11px 14px; color: var(--text-2); font-size: 14px; }
.doc-table th { padding: 10px 14px; }
.doc-table td:first-child { color: var(--text); white-space: nowrap; }

.note { margin: 18px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--warning-soft); border: 1px solid rgba(251, 191, 36, .25);
  color: var(--text-2); font-size: 14px; }
.note strong { color: #fde68a; }
.note-primary { background: var(--primary-soft); border-color: var(--primary-line); }
.note-primary strong { color: var(--primary-text); }

/* Code blocks (built by docs.js) */
.copy-btn { margin-left: auto; }
.copy-btn.copied { color: var(--success); }

.tabs { margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #0d0b16; }
.tab-list { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab-list button { font: 600 13px/1 var(--font); color: var(--muted); background: none; border: 0; padding: 10px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; border-radius: 6px 6px 0 0; }
.tab-list button:hover { color: var(--text); }
.tab-list button[aria-selected="true"] { color: var(--primary-text); border-bottom-color: var(--primary); }
.tabs .codeblock { border: 0; border-radius: 0; margin: 0; }
.tabs .codeblock-head { display: none; }
.tabs .codeblock .copy-btn { position: absolute; top: 8px; right: 8px; }

.practice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.practice { padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.practice strong { display: block; margin-bottom: 6px; }
.practice p { color: var(--text-2); font-size: 14px; }

.docs-footer { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding-top: 32px; font-size: 14px; }

@media (max-width: 960px) {
  .docs-layout { grid-template-columns: 1fr; gap: 0; }
  .docs-menu { display: inline-flex; }
  .docs-sidebar { position: fixed; inset: 64px auto 0 0; width: 280px; z-index: 30; background: var(--bg-elev); padding: 20px 12px 40px;
    transform: translateX(-100%); transition: transform .2s ease; border-right: 1px solid var(--border-strong); height: auto; }
  .docs-sidebar.open { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .6); }
  .callouts, .practice-grid { grid-template-columns: 1fr; }
  .docs-content { padding-top: 28px; }
}
@media (max-width: 720px) {
  .container-wide { padding: 0 16px; }
  .nav-inner { gap: 12px; }
}
@media (max-width: 720px) {
  /* Wide reference tables scroll inside their frame instead of widening the page. */
  .doc-table { display: block; overflow-x: auto; }
}
@media (max-width: 480px) {
  .docs .nav-cta { display: none; }
}