/* =============================================================
   ARK LABS — DOCS + API REFERENCE (on top of ark.css)
   ============================================================= */

body.docs { background: var(--card); }

.docs-shell {
  max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 248px minmax(0, 1fr) 220px; gap: 56px;
}
.docs-side {
  position: sticky; top: var(--nav-h); align-self: start;
  height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: 32px 8px 48px 0;
  border-right: 1px solid var(--line); scrollbar-width: thin;
}
.docs-side [data-include] { min-height: 600px; }
.docs-nav-toggle { display: none; }
.docs-nav .docs-search-hint { display: none; }
.docs-nav h2 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 8px; font-stretch: 100%; line-height: 1.4;
}
.docs-nav h2:first-child { margin-top: 0; }
.docs-nav ul { list-style: none; }
.docs-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; margin-left: -10px; border-radius: 7px;
  text-decoration: none; font-size: 0.92rem; color: #343a38;
}
.docs-nav a:hover { background: var(--paper); color: var(--text); }
.docs-nav a.is-active { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: 600; }
.docs-nav .method {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: var(--muted);
}

.doc { padding: 48px 0 96px; min-width: 0; }
.doc-body { max-width: 760px; }
.doc-crumbs { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); margin-bottom: 18px; }
.doc-crumbs a { color: inherit; text-decoration: none; }
.doc-crumbs a:hover { color: var(--text); }
.doc-body h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.08; }
.doc-body .doc-lead { font-size: 1.15rem; color: var(--muted); margin-top: 16px; line-height: 1.6; }
.doc-body h2 {
  font-size: 1.55rem; margin-top: 56px; padding-top: 8px; line-height: 1.15;
}
.doc-body h3 { font-size: 1.15rem; margin-top: 36px; }
.doc-body h4 { margin-top: 24px; }
.doc-body p, .doc-body ul, .doc-body ol, .doc-body .code, .doc-body .callout, .doc-body .table-wrap, .doc-body dl, .doc-body figure { margin-top: 16px; }
.doc-body p, .doc-body li { line-height: 1.72; }
.doc-body ul, .doc-body ol { padding-left: 1.3em; }
.doc-body li + li { margin-top: 6px; }
.doc-body a:not(.btn):not(.card) { color: var(--accent); text-underline-offset: 3px; }
.doc-body :not(pre) > code {
  font-size: 0.86em; background: var(--paper); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px;
  overflow-wrap: anywhere;
}
.doc-body h2 code, .doc-body h3 code { font-size: 0.85em; }
.doc-body .table { font-size: 0.9rem; }
.doc-body .table td, .doc-body .table th { padding: 11px 14px; }
.doc-body .table td code { white-space: nowrap; }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.anchor { color: var(--line-2); text-decoration: none; margin-left: 8px; font-weight: 400; opacity: 0; }
h2:hover > .anchor, h3:hover > .anchor { opacity: 1; }

.doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.doc-cards .card { padding: 22px; }
.doc-cards .card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.doc-cards .card p { font-size: 0.92rem; margin: 0; }

.doc-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 760px; }
.doc-pager a { text-decoration: none; display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; flex: 1; }
.doc-pager a:hover { border-color: var(--text); }
.doc-pager a span { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.doc-pager a b { font-weight: 600; }
.doc-pager .next { text-align: right; }

.doc-toc { position: sticky; top: var(--nav-h); align-self: start; padding: 48px 0; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
.toc-title { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.doc-toc ul { list-style: none; border-left: 1px solid var(--line); }
.doc-toc li a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.doc-toc li.toc-sub a { padding-left: 26px; font-size: 0.8rem; }
.doc-toc li a:hover { color: var(--text); }
.doc-toc li a.is-active { color: var(--accent); border-left-color: var(--accent); }
.doc-toc .toc-foot { margin-top: 24px; display: grid; gap: 8px; font-size: 0.82rem; }
.doc-toc .toc-foot a { color: var(--muted); text-decoration: none; }
.doc-toc .toc-foot a:hover { color: var(--accent); }

/* parameter lists */
.params { border-top: 1px solid var(--line); }
.param { padding: 16px 0; border-bottom: 1px solid var(--line); }
.param-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.param-name { font-family: var(--mono); font-size: 0.88rem; font-weight: 600; color: var(--text); }
.param-type { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.param-req { font-family: var(--mono); font-size: 0.68rem; color: var(--err); text-transform: uppercase; letter-spacing: 0.05em; }
.param-opt { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.param-ext { font-family: var(--mono); font-size: 0.66rem; color: var(--accent-soft-ink); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.param-ignored { font-family: var(--mono); font-size: 0.66rem; color: #7a4a00; background: #fbefd9; padding: 1px 7px; border-radius: 999px; }
.param dd, .param .param-body { margin-top: 6px; color: #3d4442; font-size: 0.93rem; line-height: 1.65; }
.param .param-body p + p { margin-top: 8px; }
.param .params { margin-top: 12px; margin-left: 4px; padding-left: 16px; border-top: 0; border-left: 2px solid var(--line); }
.param .params .param { padding: 12px 0; }
.param .params .param:last-child { border-bottom: 0; }
.enum { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* method + path pill */
.endpoint {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.86rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; margin-top: 16px;
  max-width: 100%; overflow-x: auto; white-space: nowrap;
}
.verb { font-weight: 700; font-size: 0.74rem; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.03em; }
.verb--post { background: #e2f4ea; color: #12663e; }
.verb--get { background: var(--accent-soft); color: var(--accent-soft-ink); }

/* =============================================================
   API REFERENCE (two columns per endpoint)
   ============================================================= */
.ref-shell {
  max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 56px;
}
.ref { min-width: 0; padding: 48px 0 96px; }
.ref-intro { max-width: 760px; }
.ref-section { padding: 56px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.ref-section:first-of-type { border-top: 0; }
.ref-section > .ref-text { min-width: 0; }
.ref-section > .ref-code { min-width: 0; position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: grid; gap: 16px; }
.ref-section h2 { font-size: 1.6rem; margin: 0; padding: 0; }
.ref-section h3 { font-size: 1rem; margin-top: 32px; font-family: var(--mono); font-weight: 600; font-stretch: 100%; letter-spacing: 0; text-transform: uppercase; font-size: 0.74rem; color: var(--muted); }
.ref-section .ref-text > p { margin-top: 14px; color: #3d4442; }
.ref-section .ref-text > ul { margin-top: 12px; padding-left: 1.2em; color: #3d4442; }
.ref-section .ref-text a { color: var(--accent); }
.ref-section .ref-text :not(pre) > code { font-size: 0.86em; background: var(--paper); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; }
.ref-section .params { margin-top: 12px; }
.ref-code .code pre { max-height: 560px; }
.ref-code .code-title b { color: #fff; font-weight: 500; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1240px) {
  .docs-shell { grid-template-columns: 232px minmax(0, 1fr); gap: 48px; }
  .doc-toc { display: none; }
  .ref-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ref-section > .ref-code { position: static; }
}
@media (max-width: 900px) {
  .docs-shell, .ref-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-side {
    position: sticky; top: var(--nav-h); z-index: 50; height: auto; max-height: none; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line); background: var(--card); padding: 0;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
  }
  .docs-side [data-include] { min-height: 0; }
  .docs-nav-toggle {
    display: flex; width: 100%; height: 52px; align-items: center; justify-content: space-between;
    font-weight: 600; font-size: 0.95rem;
  }
  .docs-nav-toggle::after {
    content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
  }
  .docs-nav { display: none; max-height: 70vh; overflow-y: auto; padding: 4px 0 20px; }
  .docs-nav.is-open { display: block; }
  .doc { padding-top: 32px; }
  .doc-cards { grid-template-columns: minmax(0, 1fr); }
  .ref { padding-top: 32px; }
}
@media (max-width: 640px) {
  .doc-body .table td code { white-space: normal; overflow-wrap: anywhere; }
}

/* API reference pages inside the docs shell: no table of contents, the endpoint sections use the full width */
.docs-shell--ref { grid-template-columns: 248px minmax(0, 1fr); }
.doc--ref .doc-body { max-width: none; }
.doc--ref .doc-body > h1, .doc--ref .doc-body > .doc-lead, .doc--ref .doc-body > p,
.doc--ref .doc-body > h2, .doc--ref .doc-body > .table-wrap { max-width: 820px; }
.doc--ref .doc-body > h1 + .doc-lead + .ref-section { margin-top: 24px; }
.doc--ref .ref-section h2 { border-top: 0; margin-top: 0; padding-top: 0; }
@media (max-width: 1240px) { .docs-shell--ref { grid-template-columns: 232px minmax(0, 1fr); gap: 48px; } }
@media (max-width: 900px) { .docs-shell--ref { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.doc-body .doc-reflink { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-top: 12px; }
.doc-body .doc-reflink a { color: var(--accent); }