/* ============================================================
   VoxParse Docs — Stripe/OpenAI-inspired documentation layout
   ============================================================ */
.docs { display: flex; padding-top: 72px; min-height: 100vh; }

/* Sidebar */
.docs__sidebar { width: 260px; position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; padding: var(--space-8) var(--space-6); border-right: 1px solid var(--color-border); flex-shrink: 0; background: var(--color-surface-alt); }
.docs__sidebar-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.docs__nav { list-style: none; }
.docs__nav-link { display: block; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--color-ink-secondary); text-decoration: none; border-radius: var(--radius-sm); margin-bottom: 2px; transition: all var(--duration-fast); border-left: 2px solid transparent; }
.docs__nav-link:hover { color: var(--color-ink); background: var(--color-surface); }
.docs__nav-link.active { color: var(--color-accent); border-left-color: var(--color-accent); background: var(--color-accent-bg); font-weight: 600; }
.docs__nav-group { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-muted); margin-top: var(--space-5); margin-bottom: var(--space-2); padding-left: var(--space-3); }

/* Content */
.docs__content { flex: 1; max-width: 860px; padding: var(--space-10) var(--space-10); }
.docs__content section { margin-bottom: var(--space-16); padding-top: var(--space-4); }
.docs__content h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.docs__content h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.docs__content h3 { font-size: var(--text-lg); margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--color-ink); }
.docs__content p { margin-bottom: var(--space-4); color: var(--color-ink-secondary); line-height: 1.7; }
.docs__content code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-surface-alt); padding: 1px 6px; border-radius: 4px; color: var(--color-accent-hover); }
.docs__lead { font-size: var(--text-lg); color: var(--color-ink-secondary); line-height: 1.7; }

/* Endpoint badge */
.docs__endpoint { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.docs__endpoint code { background: none; font-size: var(--text-base); color: var(--color-ink); font-weight: 500; }
.docs__method { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.05em; }
.docs__method--get { background: #DBEAFE; color: #1E40AF; }
.docs__method--post { background: #DCFCE7; color: #166534; }
.docs__status { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); margin-left: var(--space-2); }

/* Tables */
.docs__table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; font-size: var(--text-sm); }
.docs__table thead { background: var(--color-surface-alt); }
.docs__table th { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--color-ink-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); }
.docs__table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-ink); vertical-align: top; }
.docs__table tr:last-child td { border-bottom: none; }
.docs__table code { font-size: var(--text-xs); }

/* Code blocks */
.docs__code-block { margin-bottom: var(--space-6); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-code-bg); }
.docs__code-header { background: var(--color-code-bg); color: var(--color-ink-muted); font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-2) var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.05); font-weight: 500; }
.docs__code-block pre { background: #1a2332; color: var(--color-code-text); padding: var(--space-4) var(--space-4); margin: 0; overflow-x: auto; }
.docs__code-block code { background: none; color: inherit; padding: 0; font-size: var(--text-sm); line-height: 1.6; }

/* Notes */
.docs__note { background: var(--color-accent-bg); border-left: 3px solid var(--color-accent); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); color: var(--color-ink-secondary); }
.docs__note strong { color: var(--color-ink); }

/* Info cards */
.docs__info-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.docs__info-card strong { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-ink); min-width: 120px; }
.docs__info-card code { font-size: var(--text-sm); }

/* Footer */
.docs__footer { padding: var(--space-10) 0; border-top: 1px solid var(--color-border); margin-top: var(--space-16); text-align: center; color: var(--color-ink-muted); font-size: var(--text-sm); }
.docs__footer a { color: var(--color-accent); }

/* Mobile */
@media (max-width: 900px) {
  .docs { flex-direction: column; }
  .docs__sidebar { width: 100%; position: static; height: auto; border-right: none; border-bottom: 1px solid var(--color-border); padding: var(--space-4) var(--space-6); }
  .docs__nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .docs__nav-group { display: none; }
  .docs__nav-link { border-left: none; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
  .docs__content { padding: var(--space-6); }
}