/* Rendered-Markdown prose — the ONE place the output of utils/newsMarkdown.js is
   styled.
 *
 * Both surfaces that display rendered Markdown load this file:
 *   - the public update feed (/news, views/news.ejs)
 *   - the admin editor preview (views/admin-dashboard.ejs)
 *
 * They previously carried their own copies of these rules, which is how the admin
 * preview ended up with no blockquote, inline-code, link or rule styling at all —
 * a quoted line looked exactly like a paragraph, so the editor appeared broken
 * while the renderer was fine. One stylesheet means the preview cannot drift from
 * the published page again.
 *
 * The two surfaces use different token namespaces (app theme vs admin palette), so
 * the rules below read from --md-* custom properties and each surface maps its own
 * tokens onto them. Add a construct here only when the renderer can emit it. */

.markdown-body {
  color: var(--md-text);
  line-height: var(--md-line-height, 1.7);
}

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

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

.markdown-body p,
.markdown-body li {
  margin: 0 0 var(--md-gap);
}

.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: var(--md-heading-gap) 0 var(--space-2);
  color: var(--md-heading);
  font-size: var(--md-heading-size);
}

.markdown-body ul,
.markdown-body ol {
  margin: 0 0 var(--md-gap) var(--space-7);
}

/* Pinned explicitly: rendered Markdown can sit inside a list item (roadmap
   detail does), where a bare ul would inherit the hollow "circle" marker. */
.markdown-body ul {
  list-style: disc;
}

.markdown-body ol {
  list-style: decimal;
}

.markdown-body a {
  color: var(--md-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.markdown-body a:hover,
.markdown-body a:focus-visible {
  color: var(--md-link-hover);
  text-decoration: underline;
}

.markdown-body code {
  padding: 0.1em 0.4em;
  border: 1px solid var(--md-border);
  border-radius: var(--radius-xs);
  background: var(--md-code-bg);
  color: var(--md-heading);
  font-size: 0.9em;
}

/* Code blocks scroll inside their own box so a long command can never push the
   page into a horizontal scroll on a phone. */
.markdown-body pre {
  overflow-x: auto;
  margin: 0 0 var(--md-gap);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--md-border);
  border-radius: var(--radius-md);
  background: var(--md-code-bg);
}

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

.markdown-body blockquote {
  margin: 0 0 var(--md-gap);
  padding-left: var(--space-4);
  border-left: 3px solid var(--md-quote-border);
  color: var(--md-quote-text);
}

.markdown-body hr {
  margin: var(--md-heading-gap) 0;
  border: 0;
  border-top: 1px solid var(--md-border);
}