/* /docs and /docs/:page */
.mk-docs { padding: clamp(40px, 5cqw, 72px) var(--gutter) clamp(56px, 7cqw, 112px); display: flex; flex-wrap: wrap; gap: clamp(28px, 4cqw, 64px); align-items: flex-start; }
.mk-docs-side { flex: 1 1 200px; min-width: 0; max-width: 240px; display: flex; flex-direction: column; }
.mk-docs-side-extra { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.mk-docs-side-extra a { color: var(--ink-2); }
.mk-docs .mk-article { flex: 1.6 1 420px; min-width: 0; }
.mk-docs .mk-article > h1 { margin-top: 0; }

.mk-docs-nav-toggle { display: none; }
.mk-docs-drawer { position: fixed; inset: 0; z-index: 50; background: rgba(21, 21, 19, 0.3); }
.mk-docs-drawer.hidden { display: none; }
.mk-docs-drawer-panel { position: absolute; inset: 0 auto 0 0; width: min(320px, 88vw); background: var(--paper); border-right: 1px solid var(--rule); padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.mk-docs-drawer-close { align-self: flex-start; }
.mk-docs-drawer .mk-sidebar { position: static; width: auto; }
.mk-docs-nav-open { overflow: hidden; }

@media (min-width: 900px) {
  .mk-docs-side { flex: none; width: 240px; position: sticky; top: 88px; }
  .mk-docs-side .mk-sidebar { position: static; width: auto; }
}
@media (max-width: 899px) {
  .mk-docs-side { display: none; }
  .mk-docs-nav-toggle { display: inline-flex; }
}

/* eyebrow above an article H1 */
.mk-docs-eyebrow { margin: 0 0 8px; }

/* start-here / resource rows on the index */
.mk-docs-start { display: flex; flex-direction: column; margin: 0 0 20px; border-bottom: 1px solid var(--rule); }
.mk-docs-start-item { display: block; padding: 16px 0; border-top: 1px solid var(--rule); color: inherit; }
.mk-docs-start-item:hover { color: inherit; text-decoration: none; }
.mk-docs-start-item:hover .mk-docs-start-title { text-decoration: underline; }
.mk-docs-start-title { display: block; font-family: var(--f-head); font-size: 22px; line-height: 1.2; }
.mk-docs-start-summary { display: block; margin-top: 4px; font-size: 16px; color: var(--ink-2); }

/* endpoint heading: method tag + path, then the H2 */
.mk-docs-endpoint { margin: 40px 0 12px; }
.mk-docs-endpoint-meta { display: flex; align-items: center; gap: 10px; }
.mk-docs-endpoint h2 { margin: 8px 0 0; scroll-margin-top: 88px; }
.mk-docs-endpoint h2 a { color: var(--ink); }
.mk-docs-endpoint h2 a:hover { color: var(--ink); text-decoration: none; }
.mk-docs-path { font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); }
.mk-docs-method { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--rule-2); color: var(--ink-2); background: var(--card); }
.mk-docs-method[data-method="post"], .mk-docs-method[data-method="patch"], .mk-docs-method[data-method="put"], .mk-docs-method[data-method="delete"] { border-color: var(--accent); color: var(--accent); }

/* parameter / field tables */
.mk-docs-table-wrap { margin: 24px 0; overflow-x: auto; }
.mk-docs-params { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 24px 0; }
.mk-docs-table-wrap .mk-docs-params { margin: 0; }
.mk-docs-params th { padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.mk-docs-params td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.mk-docs-params :is(th, td):first-child { padding-left: 0; }
.mk-docs-params :is(th, td):last-child { padding-right: 0; }
.mk-docs-params-name { font-family: var(--f-mono); font-size: 13px; overflow-wrap: anywhere; }
.mk-docs-params-type { color: var(--ink-3); }
.mk-docs-params-desc { color: var(--ink-2); }
.mk-docs-params-desc > :first-child { margin-top: 0; }
.mk-docs-params-desc > :last-child { margin-bottom: 0; }
.mk-docs-required { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }

/* code group: same shell as .mk-code, plus a tab strip and a request line */
.mk-docs-code { position: relative; margin: 24px 0; }
.mk-docs-code .mk-code-head { flex-wrap: wrap; padding-right: 84px; }
.mk-docs-code-title { margin-right: auto; }
.mk-docs-code .mk-docs-method { border-color: var(--ink-2); color: var(--paper); background: transparent; }
.mk-docs-code .mk-docs-path { color: var(--code-quiet); text-transform: none; letter-spacing: 0; }
.mk-docs-tabs { display: flex; gap: 16px; padding: 0 14px; border-bottom: 1px solid var(--code-rule); }
.mk-docs-tab { padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--code-quiet); font-family: var(--f-mono); font-size: 11.5px; cursor: pointer; }
.mk-docs-tab.is-active { color: var(--paper); border-bottom-color: var(--paper); }
.mk-docs-code pre { margin: 0; padding: 16px; overflow: auto; font: inherit; }

.mk-docs-subhead { margin: 24px 0 10px; font-size: 13px; font-weight: 500; }
.mk-docs .mk-article hr { margin: 40px 0; border: 0; border-top: 1px solid var(--rule); }

@media (min-width: 1800px) {
  .mk-docs { padding-top: 88px; padding-bottom: 128px; gap: 80px; }
  .mk-docs-side { width: 240px; }
}

.mk-docs-panel[hidden] { display: none; }
.mk-docs-panel-copy { position: absolute; top: 8px; right: 14px; margin-left: 0; }
.mk-docs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-docs .mk-callout p { margin: 0 0 8px; }
.mk-docs .mk-callout p:last-child { margin-bottom: 0; }