/* ── Reset ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--xpulse-bg, #0d0d0d); color: var(--xpulse-text, #c8c8c8); font-size: 15px; line-height: 1.7; }
a { color: var(--xpulse-accent, #8703b0); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Topbar ─────────────────────────────────────────────────────────────────── */

.doc-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 48px;
  border-bottom: 1px solid var(--xpulse-border, #222);
  background: var(--xpulse-surface, #111);
  font-size: 13px;
}
.doc-topbar__home {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--xpulse-text, #c8c8c8);
  flex-shrink: 0;
}

/* Breadcrumb — uses .xpulse-breadcrumb base, doc-specific separator + overflow */
.doc-topbar__breadcrumb {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  flex-wrap: nowrap;
}
.doc-topbar__breadcrumb > * { white-space: nowrap; }
.doc-topbar__breadcrumb > * + *::before { content: '›'; margin: 0 6px; color: var(--xpulse-text-dim, #444); }

.doc-topbar__search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.doc-topbar__search input {
  background: var(--xpulse-bg, #0d0d0d);
  color: var(--xpulse-text, #c8c8c8);
  border: 1px solid var(--xpulse-border, #222);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 12px;
  width: 160px;
  outline: none;
}
.doc-topbar__search input:focus { border-color: var(--xpulse-accent, #8703b0); }
.doc-topbar__search button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--xpulse-text-dim, #666);
  line-height: 1;
}
.doc-topbar__search button:hover { color: var(--xpulse-text, #c8c8c8); }

/* ── Page layout ────────────────────────────────────────────────────────────── */

.doc-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 48px); }

.doc-sidebar {
  padding: 24px 16px;
  border-right: 1px solid var(--xpulse-border, #222);
  background: var(--xpulse-surface, #111);
  overflow: auto;
}
.doc-sidebar__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--xpulse-text-dim, #666);
  margin: 0 0 8px 4px;
}
.doc-sidebar__select {
  width: 100%;
  padding: 6px 8px;
  background: var(--xpulse-bg, #0d0d0d);
  color: var(--xpulse-text, #c8c8c8);
  border: 1px solid var(--xpulse-border, #222);
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 24px;
}

/* ── Content ────────────────────────────────────────────────────────────────── */

.doc-content { padding: 40px 48px; max-width: 860px; }
.doc-content h1 { margin-top: 0; font-size: 26px; }
.doc-content h2 { font-size: 20px; border-bottom: 1px solid var(--xpulse-border, #222); padding-bottom: 6px; margin-top: 40px; }
.doc-content h3 { font-size: 16px; margin-top: 28px; }
.doc-content pre { background: var(--xpulse-surface, #111); border: 1px solid var(--xpulse-border, #222); border-radius: 4px; padding: 16px; overflow: auto; font-size: 13px; }
.doc-content code { font-family: ui-monospace, monospace; font-size: 0.88em; background: var(--xpulse-surface, #111); padding: 2px 5px; border-radius: 3px; }
.doc-content pre code { background: none; padding: 0; }
.doc-content blockquote { border-left: 3px solid var(--xpulse-accent, #8703b0); margin: 16px 0; padding: 8px 16px; color: var(--xpulse-text-dim, #888); }
.doc-content a { color: var(--xpulse-accent2, #7eb8a4); }
.doc-content a:hover { color: var(--xpulse-accent, #8703b0); }

/* Markdown tables — styled as xpulse-table--lined without needing a class */
.doc-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.doc-content th, .doc-content td { padding: 8px 12px; border-bottom: 1px solid var(--xpulse-border, #222); font-size: 13px; text-align: left; }
.doc-content thead th { background: var(--xpulse-surface, #111); }

/* ── Syntax highlighting ────────────────────────────────────────────────────── */

.hljs { color: var(--xpulse-text, #c8c8c8); background: none; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: var(--xpulse-accent, #8703b0); }
.hljs-string, .hljs-attr { color: var(--xpulse-accent2, #7eb8a4); }
.hljs-comment, .hljs-quote { color: var(--xpulse-text-dim, #666); font-style: italic; }
.hljs-number, .hljs-literal { color: var(--xpulse-warning, #c8a44a); }
.hljs-title, .hljs-name { color: var(--xpulse-text, #c8c8c8); font-weight: 600; }
.hljs-type, .hljs-class .hljs-title { color: var(--xpulse-accent, #8703b0); font-style: italic; }
.hljs-meta { color: var(--xpulse-text-dim, #666); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.mermaid { background: var(--xpulse-surface, #111); border: 1px solid var(--xpulse-border, #222); border-radius: 4px; padding: 24px; margin: 16px 0; text-align: center; overflow: auto; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.doc-footer { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--xpulse-border, #222); font-size: 12px; color: var(--xpulse-text-dim, #666); }

/* ── Landing ────────────────────────────────────────────────────────────────── */

.doc-landing { max-width: 860px; margin: 0 auto; padding: 48px 24px; }
.doc-landing h1 { font-size: 28px; margin: 0 0 8px 0; }
.doc-landing__subtitle { color: var(--xpulse-text-dim, #666); margin-bottom: 40px; }
.doc-group { margin-bottom: 40px; }
.doc-group__title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--xpulse-text-dim, #666); border-bottom: 1px solid var(--xpulse-border, #222); padding-bottom: 8px; margin-bottom: 16px; }
.doc-group__title a { color: inherit; }
.doc-group__title a:hover { color: var(--xpulse-text, #c8c8c8); text-decoration: none; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

/* Doc card content — uses .xpulse-card as wrapper */
.doc-card__name { font-weight: 600; font-size: 14px; }
.doc-card__type { font-size: 12px; color: var(--xpulse-text-dim, #666); margin-top: 4px; }
.doc-card__desc { font-size: 12px; color: var(--xpulse-text-dim, #666); margin-top: 8px; line-height: 1.5; }
/* Make xpulse-card a block link in doc context */
a.xpulse-card { display: block; color: var(--xpulse-text, #c8c8c8); text-decoration: none; }
a.xpulse-card:hover { border-color: var(--xpulse-accent, #8703b0); text-decoration: none; }

/* ── Search ─────────────────────────────────────────────────────────────────── */

.doc-search { max-width: 860px; margin: 0 auto; padding: 48px 24px; }
.doc-search h1 { font-size: 24px; margin: 0 0 32px 0; }
.doc-search__empty { color: var(--xpulse-text-dim, #666); }
.doc-result { padding: 20px 0; border-bottom: 1px solid var(--xpulse-border, #222); }
.doc-result__title { font-size: 17px; font-weight: 600; }
.doc-result__title a { color: var(--xpulse-accent2, #7eb8a4); text-decoration: none; }
.doc-result__title a:hover { color: var(--xpulse-accent, #8703b0); }
.doc-result__breadcrumb { font-size: 12px; color: var(--xpulse-text-dim, #666); margin: 2px 0 6px; }
.doc-result__excerpt { font-size: 13px; color: var(--xpulse-text-dim, #999); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Desktop only: sticky topbar with shadow */
@media (min-width: 1200px) {
  .doc-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }
}

/* Tablet: two-row topbar, search input collapses to icon */
@media (max-width: 1199px) {
  .doc-topbar { flex-wrap: wrap; height: auto; padding: 0 1.5rem; }
  .doc-topbar__home { height: 48px; display: flex; align-items: center; }
  .doc-topbar__search { height: 48px; align-items: center; }
  .doc-topbar__search input { display: none; }
  .doc-topbar__breadcrumb {
    order: 2;
    flex-basis: 100%;
    padding: 0.3rem 0;
    border-top: 1px solid var(--xpulse-border, #222);
    overflow-x: auto;
    height: auto;
  }
}

/* Mobile: single column */
@media (max-width: 767px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-sidebar { display: none; }
  .doc-content { padding: 24px 20px; }
}

@media print {
  .doc-topbar, .doc-sidebar { display: none; }
  .doc-layout { grid-template-columns: 1fr; }
}