/* ==========================================================================
   preview.css — GitHub-inspired markdown styling
   Scope: everything is nested under .markdown-body so it can never leak
   into the app chrome. Colors come from the shared theme tokens, so the
   preview follows light/dark automatically.
   ========================================================================== */

.markdown-body {
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  word-wrap: break-word;
}

/* ---- Vertical rhythm: space between consecutive blocks ---- */
.markdown-body > * + * {
  margin-top: var(--space-4);
}

/* ---- Headings ---- */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  line-height: var(--leading-tight);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.markdown-body h1 {
  font-size: 1.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border);
}

.markdown-body h2 {
  font-size: 1.35em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border);
}

.markdown-body h3 {
  font-size: 1.1em;
}

.markdown-body h4 {
  font-size: 1em;
}

/* Extra breathing room above headings that follow content */
.markdown-body * + h1,
.markdown-body * + h2,
.markdown-body * + h3 {
  margin-top: var(--space-6);
}

/* ---- Text ---- */
.markdown-body p {
  margin-top: var(--space-4);
}

.markdown-body strong {
  font-weight: 650;
}

.markdown-body a {
  color: var(--color-accent);
}

.markdown-body a:hover {
  text-decoration: underline;
}

/* ---- Lists ---- */
.markdown-body ul,
.markdown-body ol {
  padding-left: var(--space-5);
}

.markdown-body li + li {
  margin-top: var(--space-1);
}

/* ---- Inline code ---- */
.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.2em 0.4em;
  background: var(--color-bg-inset);
  border-radius: var(--radius-sm);
}

/* ---- Code blocks ---- */
.markdown-body pre {
  padding: var(--space-4);
  overflow-x: auto;
  background: var(--color-bg-inset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  line-height: 1.45;
}

.markdown-body pre code {
  padding: 0;
  background: transparent;
  font-size: var(--text-sm);
}

/* ---- Blockquote ---- */
.markdown-body blockquote {
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

/* ---- Horizontal rule ---- */
.markdown-body hr {
  height: 1px;
  border: 0;
  background: var(--color-border);
  margin: var(--space-6) 0;
}

/* ---- Tables ---- */
.markdown-body table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
}

.markdown-body th,
.markdown-body td {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
}

.markdown-body th {
  background: var(--color-bg-elevated);
  font-weight: 600;
}

/* ---- Images & badges ---- */
.markdown-body img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

/* Badge rows (shields.io style) sit inline with small gaps */
.markdown-body p img + img {
  margin-left: var(--space-1);
}