/* docs.lupedata.com — public documentation site (server-rendered by src/api/public-docs).
   The article rules (doc-*) at the bottom are copied from client/src/pages/docs/docs.css so an
   article looks the same in Lupe and here; keep them in step when that file changes. No external
   fonts or assets (the Content-Security-Policy allows 'self' only). */
:root {
  --brand: #7653ff; --brand-dark: #5b3ee0; --brand-soft: #f1edff; --white: #fff;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #6b7280; --gray-500: #4b5563; --gray-600: #374151; --gray-700: #374151; --gray-900: #111827;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fafafb; color: var(--gray-700);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); }

/* Header */
.pd-header { position: sticky; top: 0; z-index: 10; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.pd-header-in { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 12px 24px; }
.pd-brand { display: flex; align-items: center; gap: 10px; color: var(--gray-900); text-decoration: none; font-weight: 800; font-size: 17px; white-space: nowrap; }
.pd-brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.pd-brand small { font-weight: 600; color: var(--gray-400); font-size: 14px; }
.pd-search { flex: 1; max-width: 520px; margin-left: auto; display: flex; gap: 8px; }
.pd-search input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--gray-300); border-radius: 9px; font-size: 14px; font-family: inherit; }
.pd-search input:focus, .pd-ask input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(118,83,255,.15); }
.pd-btn { padding: 9px 14px; border-radius: 9px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.pd-btn:hover { background: var(--brand-dark); }
.pd-btn:disabled { opacity: .6; cursor: default; }
.pd-site-link { color: var(--gray-500); text-decoration: none; font-size: 14px; white-space: nowrap; }

/* Shell: tree | page */
.pd-shell { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.pd-nav { border-right: 1px solid var(--gray-200); padding: 18px 12px 40px; position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; }
.pd-nav > summary { display: none; }
.pd-nav-group { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); margin: 18px 8px 6px; }
.pd-nav-group:first-child { margin-top: 0; }
.pd-nav-section { font-size: 13px; font-weight: 700; color: var(--gray-900); margin: 12px 8px 4px; }
.pd-nav a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; color: var(--gray-600); text-decoration: none; font-size: 14px; line-height: 1.3; }
.pd-nav a:hover { background: var(--gray-100); color: var(--gray-900); }
.pd-nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.pd-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--white); border: 1px solid var(--gray-200); display: grid; place-items: center; flex: none; overflow: hidden; }
.pd-icon img { width: 15px; height: 15px; object-fit: contain; }
.pd-icon.lg { width: 34px; height: 34px; border-radius: 8px; }
.pd-icon.lg img { width: 22px; height: 22px; }
.pd-main { min-width: 0; background: var(--white); display: flex; flex-direction: column; }
.pd-main > :first-child { flex: 1; }

/* Article page */
.docs-page { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; padding: 32px 32px 80px; max-width: 1180px; }
.docs-page.no-toc { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.docs-toc { position: sticky; top: 80px; align-self: start; font-size: 13px; }
.docs-toc-h { font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.docs-toc a { display: block; padding: 4px 0 4px 10px; border-left: 2px solid var(--gray-200); color: var(--gray-500); text-decoration: none; line-height: 1.3; }
.docs-toc a.l3 { padding-left: 20px; font-size: 12px; }
.docs-toc a:hover { color: var(--gray-900); }
.docs-toc a.active { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
.pd-article { min-width: 0; }
#pd-done-bar { width: 0; }
.pd-crumbs { font-size: 13px; color: var(--gray-400); margin-bottom: 14px; }
.pd-crumbs a { color: var(--gray-500); text-decoration: none; }

/* Home + search */
.pd-hero { padding: 40px 32px 8px; max-width: 1180px; }
.pd-hero h1 { font-size: 30px; font-weight: 800; color: var(--gray-900); margin: 0 0 8px; }
.pd-hero p { font-size: 16px; color: var(--gray-500); margin: 0; }
.pd-cat { padding: 10px 32px 8px; max-width: 1180px; }
.pd-cat h2 { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-400); margin: 22px 0 10px; }
.pd-cat h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 16px 0 10px; }
.pd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pd-card { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: 12px; text-decoration: none; color: var(--gray-700); background: var(--white); }
.pd-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(17,24,39,.06); }
.pd-card strong { display: block; color: var(--gray-900); font-size: 15px; margin-bottom: 3px; }
.pd-card span { font-size: 13px; color: var(--gray-500); line-height: 1.45; }
.pd-results { padding: 28px 32px 80px; max-width: 900px; }
.pd-results h1 { font-size: 22px; color: var(--gray-900); margin: 0 0 18px; }
.pd-hit { display: block; padding: 14px 0; border-bottom: 1px solid var(--gray-100); text-decoration: none; }
.pd-hit strong { color: var(--gray-900); font-size: 16px; }
.pd-hit p { margin: 4px 0 0; color: var(--gray-500); font-size: 14px; line-height: 1.5; }
.pd-ask { border: 1px solid rgba(118,83,255,.25); background: var(--brand-soft); border-radius: 12px; padding: 16px 18px; margin-bottom: 24px; }
.pd-ask-h { font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.pd-ask form { display: flex; gap: 8px; }
.pd-ask input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--gray-300); border-radius: 9px; font-size: 14px; font-family: inherit; }
.pd-ask-answer { background: var(--white); border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.pd-ask-answer .doc-body { font-size: 14px; }
.pd-ask-note { font-size: 12px; color: var(--gray-500); margin-top: 8px; }
.pd-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pd-empty { color: var(--gray-500); font-size: 15px; }
.pd-footer { border-top: 1px solid var(--gray-200); padding: 18px 32px; font-size: 13px; color: var(--gray-400); }
.pd-footer a { color: var(--gray-500); }

@media (max-width: 1000px) { .docs-page { grid-template-columns: minmax(0, 1fr); } .docs-toc { display: none; } }
@media (max-width: 760px) {
  .pd-shell { grid-template-columns: 1fr; }
  .pd-nav { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--gray-200); padding: 0 16px; }
  .pd-nav > summary { display: block; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--gray-900); cursor: pointer; }
  .pd-nav[open] > nav { padding-bottom: 14px; }
  .pd-header-in { flex-wrap: wrap; padding: 10px 16px; }
  .pd-search { max-width: none; order: 3; flex-basis: 100%; }
  .pd-site-link { margin-left: auto; }
  .docs-page, .pd-hero, .pd-cat, .pd-results { padding-left: 16px; padding-right: 16px; }
  .doc-parts { grid-template-columns: 1fr; }
  .pd-ask form { flex-direction: column; }
}

/* ── article (doc-*) — copied from client/src/pages/docs/docs.css ── */
.doc-kicker { font-size: 13px; color: var(--gray-500); margin-bottom: 6px; }
.doc-title-row { display: flex; align-items: center; gap: 12px; }
.doc-title-row .docs-tree-icon { width: 34px; height: 34px; border-radius: 8px; }
.doc-title-row .docs-tree-icon img { width: 22px; height: 22px; }
.doc-title { font-size: 28px; font-weight: 800; color: var(--gray-900); margin: 0; line-height: 1.2; }
.doc-summary { font-size: 16px; color: var(--gray-600); margin: 10px 0 14px; }
.doc-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.doc-pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.doc-pill.green { background: #dcfce7; color: #15803d; }
.doc-pill.gray { background: var(--white); color: var(--gray-600); border: 1px solid var(--gray-200); text-transform: none; letter-spacing: 0; font-weight: 600; }
.doc-pill.purple { background: var(--brand-soft); color: var(--brand); }
.doc-pill.amber { background: #fef3c7; color: #b45309; }
.doc-progress { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-500); }
.doc-progress-bar { width: 90px; height: 5px; background: var(--gray-200); border-radius: 999px; overflow: hidden; }
.doc-progress-bar span { display: block; height: 100%; background: #22c55e; }
.doc-updated { font-size: 12px; color: var(--gray-400); margin-bottom: 22px; }

/* ── Article body (shared/docsRender.js output) ── */
.doc-body { font-size: 15px; line-height: 1.65; color: var(--gray-700); }
.doc-body h2 { font-size: 20px; font-weight: 800; color: var(--gray-900); margin: 34px 0 12px; scroll-margin-top: 16px; }
.doc-body h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 22px 0 8px; scroll-margin-top: 16px; }
.doc-body h4 { font-size: 14px; font-weight: 700; color: var(--gray-900); margin: 18px 0 6px; }
.doc-body p { margin: 0 0 12px; }
.doc-body ul, .doc-body ol { margin: 0 0 14px; padding-left: 22px; }
.doc-body li { margin: 4px 0; }
.doc-body a { color: var(--brand); }
.doc-body code { background: var(--gray-100); padding: 1px 6px; border-radius: 5px; font-size: 13px; }
.doc-body pre { background: var(--gray-900); color: #f9fafb; padding: 14px 16px; border-radius: 10px; overflow: auto; font-size: 13px; }
.doc-body pre code { background: none; padding: 0; color: inherit; }
.doc-body blockquote { margin: 0 0 14px; padding: 4px 16px; border-left: 3px solid var(--gray-300); color: var(--gray-500); }
.doc-body hr { border: 0; border-top: 1px solid var(--gray-200); margin: 28px 0; }
.doc-body img { max-width: 100%; border: 1px solid var(--gray-200); border-radius: 10px; display: block; margin: 8px 0 4px; }
.doc-body img[data-doc-image]:not([src]) { min-height: 80px; background: var(--gray-100); }
.doc-img-external { display: inline-block; padding: 6px 10px; border: 1px dashed var(--gray-300); border-radius: 8px; color: var(--gray-500); font-size: 13px; background: var(--gray-50); }
.doc-table { overflow-x: auto; margin: 6px 0 16px; border: 1px solid var(--gray-200); border-radius: 10px; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.doc-table th { text-transform: uppercase; font-size: 11px; letter-spacing: .05em; color: var(--gray-500); background: var(--gray-50);
  padding: 10px 14px; border: 0; border-bottom: 1px solid var(--gray-200); text-align: left; }
.doc-table td { padding: 10px 14px; border: 0; border-top: 1px solid var(--gray-100); vertical-align: top; }
.doc-table tr:hover td { background: none; }
.doc-table td:first-child { font-weight: 600; color: var(--gray-900); }

.doc-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 20px; }
.doc-part { border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.doc-part.your { background: #ecfdf3; border: 1px solid #bbf7d0; }
.doc-part.our { background: var(--brand-soft); border: 1px solid rgba(118,83,255,.2); }
.doc-part-h { font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
.doc-part ul { margin: 0; padding-left: 18px; }

.doc-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 22px; scroll-margin-top: 16px; }
.doc-step::before { content: ''; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; background: #dcfce7; }
.doc-step:last-of-type::before { display: none; }
.doc-step-num { width: 30px; height: 30px; border-radius: 50%; background: #22c55e; color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.doc-step.done .doc-step-num { background: #15803d; }
.doc-step-owner { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #16a34a; margin-top: 5px; }
.doc-step-owner.us { color: var(--brand); }
.doc-step-body h3 { margin-top: 2px; }
.doc-done { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gray-300); background: var(--white); border-radius: 999px;
  padding: 5px 14px 5px 10px; font-size: 13px; color: var(--gray-600); cursor: pointer; margin-top: 4px; }
.doc-done:hover { border-color: #22c55e; color: #15803d; }
.doc-done-box { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gray-300); }
.doc-step.done .doc-done { background: #ecfdf3; border-color: #86efac; color: #15803d; }
.doc-step.done .doc-done-box { border-color: #22c55e; background: #22c55e; box-shadow: inset 0 0 0 2px #fff; }

.doc-note { border-radius: 10px; padding: 12px 16px 2px; margin: 6px 0 16px; font-size: 14px; }
.doc-note.success { background: #ecfdf3; border: 1px solid #bbf7d0; color: #166534; }
.doc-note.info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.doc-note.warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }