/* ═══════════════════════════════════════════════════════════════════════
   DEBT DIGEST: Developer-Docs Shared Vocabulary (v1.0)
   Date: 2026-05-29

   Scope: the three /docs surfaces only (docs-api, docs-webhooks,
   docs-csv-schema). Loaded AFTER /assets/css/dd-design-system.css and
   BEFORE each page's local <style>. Token base + brand palette live in
   dd-design-system.css; this file adds the docs-only vocabulary that was
   previously triplicated byte-for-byte across the three pages.

   What lives here (was identical on all 3 pages, now defined once):
     - --mono / --code-fg tokens
     - .lead (page intro paragraph)
     - .doc-eyebrow, .doc-chips family (capability badges)
     - .doc-sample family (titled code-sample cards)
     - base pre (dark code block; .doc-sample pre canonicalizes line-height
       to 1.6, reconciling the prior 1.55-vs-1.6 split)
     - .endpoint + .method.* (HTTP method/path pills)

   What deliberately stays page-local (NOT drift, do not pull here):
     - Layout shells (.layout/.sidebar on api; main max-width on csv/webhooks)
     - table / th / td: api uses light param tables, csv uses bordered card
       tables. Genuinely page-specific density, not duplication.
     - chip-code (<code> inside .doc-chips li): currently renders three
       different ways across the pages. Harmonizing is a visible change,
       so it is left per-page pending an explicit reconciliation pass.
     - .note (webhooks), .download-btn/.required/.optional (csv),
       code{font-size} + p code/li code: single-page or divergent.

   Zero visual regression on all three /docs pages is the gold standard.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    --code-fg: #F3F4F6;
}

/* ── Page intro ─────────────────────────────────────────────────── */
.lead { color: var(--ink-mid); margin-bottom: 1.25rem; max-width: 60ch; }

/* ── Capability badges (eyebrow + chip row) ─────────────────────── */
.doc-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--green); margin-bottom: 0.6rem; }
.doc-chips { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.doc-chips li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--navy); background: var(--white); border: 1px solid var(--border-soft); padding: 0.35rem 0.7rem; border-radius: 100px; }
.doc-chips li::before { content: '✓'; color: var(--green); font-weight: 700; }

/* ── Titled code-sample card ────────────────────────────────────── */
.doc-sample { background: var(--white); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; margin: 0 0 2rem; }
.doc-sample-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border-soft); background: var(--gray-100); }
.doc-sample pre { margin: 0; border-radius: 0; }

/* ── Code block ─────────────────────────────────────────────────── */
pre { background: var(--ink); color: var(--code-fg); padding: 1rem 1.2rem; border-radius: var(--radius-sm); overflow-x: auto; font-family: var(--mono); font-size: 0.82rem; line-height: 1.6; }

/* ── HTTP method / path pills ───────────────────────────────────── */
.endpoint { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.85rem; background: white; border: 1px solid var(--border-cool); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 0.88rem; margin-bottom: 0.5rem; }
.method { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 100px; }
.method.get { background: var(--blue-tint); color: var(--blue-700); }
.method.post { background: var(--green-100); color: var(--green-700); }
.method.put { background: var(--amber-100); color: var(--amber-900); }
.method.del { background: var(--red-100); color: var(--red-700); }