/*
  Public docs page (docs.html) — layered over jarvis-design-system.css and
  site.css. Same light look as the rest of the public site: a sticky
  contents rail on the left, one readable column of guide sections on the
  right. Copy explains what Nervus does, never how it decides (see the
  "Docs and IP rule" fact in .claude/grounded/seed.json).
*/

.docs-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

.docs-layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px; align-items: start;
}

.docs-toc {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 2px;
}
.docs-toc p {
  margin: 0 0 10px; color: var(--n-400);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.docs-toc a {
  padding: 7px 0 7px 14px; border-left: 2px solid var(--n-200);
  color: var(--n-500); font-size: 14.5px; font-weight: 500;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.docs-toc a:hover { color: var(--db-text); }
.docs-toc a.is-current { color: var(--db-primary); border-left-color: var(--db-primary); }

.docs-body { min-width: 0; max-width: 760px; }

.docs-sec { padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--n-150); }
.docs-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.docs-sec > .eyebrow { margin-bottom: 14px; }
.docs-sec h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; color: var(--n-900);
  text-wrap: balance;
}
.docs-sec h2 .chip { vertical-align: middle; margin-left: 10px; font-family: var(--font-body); }
.docs-sec h3 { margin: 30px 0 0; font-size: 17px; font-weight: 650; color: var(--n-900); }
.docs-sec p { margin-top: 14px; color: var(--n-600); font-size: 16.5px; line-height: 1.65; }
.docs-sec .check-list li { font-size: 16px; }

.docs-def {
  margin-top: 22px; padding: 20px 22px;
  background: var(--db-primary-soft); border-radius: var(--db-radius);
  color: var(--n-800); font-size: 17.5px; line-height: 1.55;
}
.docs-def strong {
  display: block; margin-bottom: 6px; color: var(--db-primary);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.docs-test {
  margin-top: 20px; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--db-accent);
  color: var(--n-800) !important; font-weight: 600;
}

.docs-table-wrap {
  margin-top: 22px; overflow-x: auto;
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--db-radius);
}
.docs-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
.docs-table th, .docs-table td { padding: 12px 16px; border-bottom: 1px solid var(--n-150); text-align: left; vertical-align: top; }
.docs-table tr:last-child td { border-bottom: 0; }
.docs-table thead th { color: var(--n-400); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.docs-table td:first-child { width: 24%; color: var(--n-500); font-weight: 600; }
.docs-table td { color: var(--n-700); }

.docs-steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: dstep; display: grid; gap: 14px; }
.docs-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; color: var(--n-600); font-size: 16px; line-height: 1.6; }
.docs-steps li::before {
  counter-increment: dstep; content: counter(dstep);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--n-200);
  color: var(--db-primary); font-weight: 700; font-size: 13px;
}
.docs-steps b { color: var(--n-900); }

.docs-note {
  margin-top: 22px; padding: 14px 16px;
  background: var(--n-50); border: 1px solid var(--n-150); border-radius: var(--db-radius-sm);
  color: var(--n-600); font-size: 14.5px; line-height: 1.55;
}
.docs-note b { color: var(--n-800); }

/* Concept map: one concept, everything that belongs to it */
.concept-map { margin-top: 26px; }
.concept-map .app-card { overflow: hidden; }
.cmap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 22px; }
.cmap-col { display: grid; gap: 12px; min-width: 0; }
.cmap-node {
  padding: 12px 14px; border: 1px solid var(--n-200); border-radius: 10px; background: var(--n-50);
}
.cmap-node strong { display: block; color: var(--n-900); font-size: 13.5px; font-weight: 600; }
.cmap-node small { color: var(--n-500); font-size: 12px; }
.cmap-node.is-suggested { border-style: dashed; border-color: var(--db-warning); background: var(--db-warning-soft); }
.cmap-node.is-suggested small { color: var(--db-warning-hover); font-weight: 600; }
.cmap-hub {
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--db-primary); color: #fff;
  font-family: var(--font-display); font-size: 21px; line-height: 1.1;
  box-shadow: 0 0 0 8px var(--db-primary-soft);
}
.cmap-caption { padding: 12px 22px; border-top: 1px solid var(--n-150); color: var(--n-500); font-size: 13px; }

.docs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip-suggested { background: var(--db-warning-soft); color: var(--db-warning-hover); border: 1px dashed var(--db-warning); }

.docs-faq { margin-top: 10px; max-width: none; }

@media (max-width: 880px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-toc { display: none; }
}

@media (max-width: 600px) {
  .cmap { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .cmap-hub { justify-self: center; order: -1; width: 96px; height: 96px; font-size: 19px; }
  .docs-sec { padding-bottom: 44px; margin-bottom: 44px; }
  .docs-sec p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-toc a { transition: none; }
}

.docs-inline-link { color: var(--db-primary) !important; font-weight: 600; white-space: nowrap; }
.docs-inline-link:hover { text-decoration: underline; }