@import "https://assets.elements.dev/assets/app/shared/styles/syntax-highlight.6ad8d869f87a7324.css";

/* Shared prose styles for rendered post bodies — used by /posts/:id,
   /docs/concepts/:c/:p, /docs/recipes/:id, /docs/cli, and anywhere else
   that renders bodyHtml from the renderPost pipeline. Single source of
   truth so concept docs, recipes, and regular posts read identically. */

.post-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}
.post-body p { margin: 0 0 1.25rem; }
.post-body h2 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin: 2.25rem 0 0.75rem;
}
.post-body h3 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--weight-semibold);
  margin: 1.75rem 0 0.5rem;
}
.post-body ul,
.post-body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}
.post-body li { margin: 0 0 0.4rem; }
.post-body li > p { margin: 0 0 0.5rem; }

.post-body table {
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.9375rem;
}
.post-body th,
.post-body td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.post-body th { background: var(--bg-panel); font-weight: var(--weight-semibold); }

.post-body a {
  color: var(--accent);
  text-decoration: underline;
}

.post-body code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--bg-panel);
  padding: 2px 6px;
  border-radius: 3px;
}
/* Code blocks. Compact dark surface with proper monospace font
   (JetBrains Mono, via --font-mono). Background + syntax-highlight token
   colors come from app/shared/styles/syntax-highlight.css; this rule sets
   the surface metrics (padding, radius, type). */
.post-body pre,
.post-body pre.code-fence {
  font-family: var(--font-mono) !important;
  font-size: 0.8125rem;
  line-height: 1.6;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.25rem 0;
}

.post-body pre code,
.post-body pre.code-fence code {
  font-family: var(--font-mono) !important;
}

.post-body pre code,
.post-body pre.code-fence code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
.post-body blockquote {
  border-left: 3px solid var(--rule);
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--ink-soft);
  margin: 1.25rem 0;
  font-style: italic;
}

/* Syntax-highlight token colors are owned by app/shared/styles/syntax-highlight.css
   (the VSCode Dark+ palette). Don't redefine them here — that path
   was the source of the "doesn't look like VSCode" drift. */