/* ==========================================================================
   Kamiwaza AI — kmw-docs.css
   Docs sidebar layout + content styles
   ========================================================================== */

/* ---- Docs layout ---- */
.kmw-docs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 64px);
  max-width: var(--kmw-container, 1200px);
  margin: 0 auto;
  padding: 0 24px;
  gap: 0;
}

/* ---- Sidebar ---- */
.kmw-docs-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 32px 0 32px 0;
  border-right: 1px solid var(--kmw-border-light, #E2E8F0);
  flex-shrink: 0;
}
.kmw-docs-sidebar__section-label {
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kmw-fg-light-secondary, #4B5563);
  padding: 0 16px;
  margin-top: 24px;
  margin-bottom: 8px;
}
.kmw-docs-sidebar__section-label:first-child { margin-top: 0; }
.kmw-docs-sidebar__nav { list-style: none; padding: 0; margin: 0; }
.kmw-docs-sidebar__link {
  display: block;
  padding: 7px 16px;
  font-size: 0.875rem;
  color: var(--kmw-fg-light-secondary, #4B5563);
  border-radius: 0 4px 4px 0;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}
.kmw-docs-sidebar__link:hover {
  color: var(--kmw-fg-light-primary, #0F1419);
  background: rgba(0,0,0,0.03);
}
.kmw-docs-sidebar__link.is-active {
  color: var(--kmw-magenta-aa, #9B23B8);
  border-left-color: var(--kmw-magenta-aa, #9B23B8);
  background: rgba(155,35,184,0.05);
  font-weight: 500;
}

/* ---- Content area ---- */
.kmw-docs-content {
  padding: 48px 0 72px 56px;
  max-width: 800px;
}

/* Content headings — MUST be theme-scoped */
body.kmw-page--light-top .kmw-docs-content h1 {
  font-family: var(--kmw-font-mono, monospace);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--kmw-fg-light-primary, #0F1419);
  line-height: 1.2;
  margin-bottom: 12px;
}
body.kmw-page--light-top .kmw-docs-content h2 {
  font-family: var(--kmw-font-mono, monospace);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--kmw-fg-light-primary, #0F1419);
  margin-top: 48px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--kmw-border-light, #E2E8F0);
}
body.kmw-page--light-top .kmw-docs-content h3 {
  font-family: var(--kmw-font-mono, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kmw-fg-light-primary, #0F1419);
  margin-top: 32px;
  margin-bottom: 12px;
}
body.kmw-page--light-top .kmw-docs-content p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--kmw-fg-light-secondary, #4B5563);
  margin-bottom: 16px;
}
body.kmw-page--light-top .kmw-docs-content ul,
body.kmw-page--light-top .kmw-docs-content ol {
  padding-left: 20px;
  margin-bottom: 16px;
}
body.kmw-page--light-top .kmw-docs-content ul { list-style: disc; }
body.kmw-page--light-top .kmw-docs-content ol { list-style: decimal; }
body.kmw-page--light-top .kmw-docs-content li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--kmw-fg-light-secondary, #4B5563);
  margin-bottom: 6px;
}
body.kmw-page--light-top .kmw-docs-content a {
  color: var(--kmw-magenta-aa, #9B23B8);
  text-decoration: underline;
}
body.kmw-page--light-top .kmw-docs-content a:hover { text-decoration: none; }
body.kmw-page--light-top .kmw-docs-content code {
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.85em;
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--kmw-border-light, #E2E8F0);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--kmw-fg-light-primary, #0F1419);
}
body.kmw-page--light-top .kmw-docs-content pre {
  margin-bottom: 20px;
}
body.kmw-page--light-top .kmw-docs-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.875rem;
}
body.kmw-page--light-top .kmw-docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.875rem;
}
body.kmw-page--light-top .kmw-docs-content th {
  background: var(--kmw-bg-light, #F8FAFC);
  font-family: var(--kmw-font-mono, monospace);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--kmw-fg-light-primary, #0F1419);
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--kmw-border-light, #E2E8F0);
}
body.kmw-page--light-top .kmw-docs-content td {
  padding: 10px 14px;
  color: var(--kmw-fg-light-secondary, #4B5563);
  border: 1px solid var(--kmw-border-light, #E2E8F0);
  vertical-align: top;
}

/* Sidebar groups + active state */
.kmw-docs-sidebar__group { margin-bottom: 24px; }
.kmw-docs-sidebar__group:last-child { margin-bottom: 0; }
.kmw-docs-sidebar__label {
  display: block;
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kmw-fg-light-secondary, #4B5563);
  padding: 0 16px;
  margin-bottom: 6px;
}
.kmw-docs-sidebar__link--active {
  color: var(--kmw-magenta-aa, #9B23B8);
  border-left-color: var(--kmw-magenta-aa, #9B23B8);
  background: rgba(155,35,184,0.05);
  font-weight: 500;
}

/* Docs page wrapper */
.kmw-docs-page { max-width: 720px; }
.kmw-docs-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--kmw-fg-light-secondary); margin-bottom: 20px; }
.kmw-docs-breadcrumb a { color: var(--kmw-magenta-aa, #9B23B8); }
.kmw-docs-breadcrumb span { color: var(--kmw-fg-light-secondary); }
.kmw-docs-lead { font-size: 1.0625rem; line-height: 1.75; color: var(--kmw-fg-light-secondary, #4B5563); margin-bottom: 32px; }

/* TOC */
.kmw-docs-toc { background: var(--kmw-bg-light); border: 1px solid var(--kmw-border-light); border-radius: 6px; padding: 16px 20px; margin: 28px 0 36px; }
.kmw-docs-toc__label { display: block; font-family: var(--kmw-font-mono, monospace); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kmw-fg-light-secondary); margin-bottom: 10px; }
.kmw-docs-toc__list { list-style: decimal; padding-left: 20px; }
.kmw-docs-toc__list li { font-size: 0.875rem; margin-bottom: 4px; }
.kmw-docs-toc__list a { color: var(--kmw-magenta-aa, #9B23B8); text-decoration: none; }
.kmw-docs-toc__list a:hover { text-decoration: underline; }

/* Code blocks */
.kmw-docs-code {
  background: var(--kmw-code-bg, #0B1017);
  border-radius: var(--kmw-radius-code, 4px);
  overflow: hidden;
  margin: 16px 0 20px;
}
.kmw-docs-code__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kmw-docs-code__lang { font-family: var(--kmw-font-mono, monospace); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #94A3B8; }
.kmw-docs-code__filename { font-family: var(--kmw-font-mono, monospace); font-size: 0.75rem; color: #64748B; }
.kmw-docs-code pre { margin: 0; }
.kmw-docs-code pre code {
  display: block;
  padding: 18px 20px;
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #a8c0d8;
  white-space: pre;
  overflow-x: auto;
}

/* Callouts */
.kmw-docs-callout {
  padding: 14px 18px;
  border-radius: 4px;
  border-left: 3px solid;
  margin: 20px 0;
  font-size: 0.9375rem;
  line-height: 1.65;
}
.kmw-docs-callout--note { background: rgba(155,35,184,0.05); border-color: var(--kmw-magenta-aa); color: var(--kmw-fg-light-secondary); }
.kmw-docs-callout--note strong { color: var(--kmw-fg-light-primary); }
.kmw-docs-callout--note a { color: var(--kmw-magenta-aa); }
.kmw-docs-callout--tip { background: rgba(22,163,74,0.05); border-color: #16a34a; color: var(--kmw-fg-light-secondary); }
.kmw-docs-callout--tip strong { color: var(--kmw-fg-light-primary); }
.kmw-docs-callout--warn { background: rgba(217,119,6,0.06); border-color: #d97706; color: var(--kmw-fg-light-secondary); }
.kmw-docs-callout--warn strong { color: var(--kmw-fg-light-primary); }

/* Tables */
.kmw-docs-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 16px 0 24px; }
.kmw-docs-table th { background: var(--kmw-bg-light); font-family: var(--kmw-font-mono, monospace); font-weight: 700; font-size: 0.8125rem; padding: 10px 14px; text-align: left; border: 1px solid var(--kmw-border-light); color: var(--kmw-fg-light-primary); }
.kmw-docs-table td { padding: 10px 14px; border: 1px solid var(--kmw-border-light); color: var(--kmw-fg-light-secondary); vertical-align: top; }
.kmw-docs-table td code, .kmw-docs-table th code { font-family: var(--kmw-font-mono, monospace); font-size: 0.8125rem; }

/* Endpoint method badges */
.kmw-docs-endpoint { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; }
.kmw-docs-endpoint__method { font-family: var(--kmw-font-mono, monospace); font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 3px; text-transform: uppercase; }
.kmw-docs-endpoint__method--post { background: rgba(155,35,184,0.1); color: var(--kmw-magenta-aa); }
.kmw-docs-endpoint__method--get { background: rgba(22,163,74,0.1); color: #15803d; }
.kmw-docs-endpoint__path { font-family: var(--kmw-font-mono, monospace); font-size: 0.9375rem; font-weight: 600; color: var(--kmw-fg-light-primary); }

/* Diagram image */
.kmw-docs-diagram { width: 100%; max-width: 700px; border-radius: 6px; border: 1px solid var(--kmw-border-light); margin: 24px 0 32px; }

/* List */
.kmw-docs-list { list-style: disc; padding-left: 20px; margin: 12px 0 16px; }
.kmw-docs-list li { font-size: 0.9375rem; line-height: 1.7; color: var(--kmw-fg-light-secondary); margin-bottom: 6px; }

/* Ordered steps in docs prose */
ol.kmw-docs-steps { list-style: none; padding: 0; counter-reset: step; }
ol.kmw-docs-steps li { counter-increment: step; display: flex; gap: 14px; margin-bottom: 16px; font-size: 0.9375rem; line-height: 1.7; color: var(--kmw-fg-light-secondary); }
ol.kmw-docs-steps li::before { content: counter(step); font-family: var(--kmw-font-mono); font-size: 0.75rem; font-weight: 700; min-width: 24px; height: 24px; border-radius: 50%; background: var(--kmw-magenta-aa); color: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
ol.kmw-docs-steps strong { color: var(--kmw-fg-light-primary); }

/* Nav links at bottom */
.kmw-docs-nav-links { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--kmw-border-light); }
.kmw-docs-nav-links__prev, .kmw-docs-nav-links__next { font-size: 0.875rem; color: var(--kmw-magenta-aa); display: flex; align-items: center; gap: 8px; }
.kmw-docs-nav-links__prev:hover, .kmw-docs-nav-links__next:hover { color: var(--kmw-coal); }

/* Docs intro badge */
.kmw-docs-content__intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.kmw-docs-content__badge {
  display: inline-block;
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(155,35,184,0.1);
  color: var(--kmw-magenta-aa, #9B23B8);
}

/* Step guide */
.kmw-docs-steps { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.kmw-docs-step {
  display: flex;
  gap: 20px;
  padding-bottom: 32px;
  position: relative;
}
.kmw-docs-step::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--kmw-border-light, #E2E8F0);
}
.kmw-docs-step:last-child::before { display: none; }
.kmw-docs-step__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kmw-magenta-aa, #9B23B8);
  color: white;
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.kmw-docs-step__content { flex: 1; }
.kmw-docs-step__title {
  font-family: var(--kmw-font-mono, monospace);
  font-size: 1rem;
  font-weight: 700;
  color: var(--kmw-fg-light-primary, #0F1419);
  margin-bottom: 8px;
  padding-top: 4px;
}
.kmw-docs-step__body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--kmw-fg-light-secondary, #4B5563);
  margin-bottom: 12px;
}

/* API Endpoint cards */
.kmw-api-endpoint {
  border: 1px solid var(--kmw-border-light, #E2E8F0);
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}
.kmw-api-endpoint__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--kmw-bg-light, #F8FAFC);
  border-bottom: 1px solid var(--kmw-border-light, #E2E8F0);
}
.kmw-api-endpoint__method {
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
}
.kmw-api-endpoint__method--post { background: rgba(155,35,184,0.1); color: var(--kmw-magenta-aa, #9B23B8); }
.kmw-api-endpoint__method--get  { background: rgba(22,163,74,0.1); color: #15803d; }
.kmw-api-endpoint__path {
  font-family: var(--kmw-font-mono, monospace);
  font-size: 0.9rem;
  color: var(--kmw-fg-light-primary, #0F1419);
}
.kmw-api-endpoint__desc {
  font-size: 0.875rem;
  color: var(--kmw-fg-light-secondary, #4B5563);
  margin-left: auto;
}
.kmw-api-endpoint__body { padding: 16px 18px; }
.kmw-api-endpoint__body p {
  font-size: 0.875rem;
  color: var(--kmw-fg-light-secondary, #4B5563);
  margin: 0 0 12px;
}

/* Mobile docs */
@media (max-width: 900px) {
  .kmw-docs-layout { grid-template-columns: 1fr; }
  .kmw-docs-sidebar {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--kmw-border-light, #E2E8F0);
    padding: 20px 0;
  }
  .kmw-docs-content { padding: 32px 0; }
}