/* Typography for `renderMarkdown()`'s own output — the mechanism (render-markdown.js) only ever
   emits plain semantic tags (h1-h6, p, ul/ol/li, blockquote, code/pre, hr, a), so all of this
   package's own CSS surface is scoping those tags under one wrapper class rather than a
   component-specific class per element, the way `mlp-checklist.css`'s own `.mlp-checklist__*`
   classes do for its interactive markup. A consuming page wraps rendered output in
   `.mlp-markdown` and gets sane defaults for free; nothing here assumes any particular page
   layout around it (mechanism, not content — same boundary every library here draws). */

.mlp-markdown {
  color: var(--c-text);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}

.mlp-markdown > *:first-child {
  margin-top: 0;
}

.mlp-markdown > *:last-child {
  margin-bottom: 0;
}

.mlp-markdown h1,
.mlp-markdown h2,
.mlp-markdown h3,
.mlp-markdown h4,
.mlp-markdown h5,
.mlp-markdown h6 {
  margin: var(--s-5) 0 var(--s-2);
  line-height: var(--lh-tight);
  font-weight: 600;
}

.mlp-markdown h1 {
  font-size: var(--t-xl);
}
.mlp-markdown h2 {
  font-size: var(--t-lg);
}
.mlp-markdown h3 {
  font-size: var(--t-md);
}
.mlp-markdown h4,
.mlp-markdown h5,
.mlp-markdown h6 {
  font-size: var(--t-base);
}

.mlp-markdown p {
  margin: 0 0 var(--s-3);
}

.mlp-markdown ul,
.mlp-markdown ol {
  margin: 0 0 var(--s-3);
  padding-left: var(--s-5);
}

.mlp-markdown li {
  margin: var(--s-1) 0;
}

.mlp-markdown li input[type='checkbox'] {
  margin-right: var(--s-2);
}

.mlp-markdown blockquote {
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-left: 3px solid var(--c-border-strong);
  color: var(--c-text-muted);
}

.mlp-markdown code {
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font-family: var(--f-mono);
  font-size: 0.9em;
}

.mlp-markdown pre {
  margin: 0 0 var(--s-3);
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--c-bg);
  overflow-x: auto;
}

.mlp-markdown pre code {
  padding: 0;
  background: none;
}

.mlp-markdown hr {
  margin: var(--s-5) 0;
  border: none;
  border-top: 1px solid var(--c-border);
}

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