/* ============================================================
   .mcc-md — single source of truth for rendered-markdown styling.

   Replaces the Tailwind `prose prose-slate` plugin everywhere
   inside MCC. Everything here is theme-aware via the CSS
   variables defined in theme.css, so it works on every theme
   (sage, sage-light, plum, amber, etc.) without per-template
   overrides.

   Selectors target real tags, not utility classes. No `!important`.
   No `page-default` scoping. A consumer puts `class="mcc-md"` on
   any wrapper around rendered HTML and gets correct formatting.

   Usage in templates:
       <div class="mcc-md">{{ body_markdown | markdown }}</div>

   Or on pre-rendered HTML (playbooks, project CLAUDE.md):
       <article class="mcc-md">{{ rendered_html | safe }}</article>

   Subsumes the scoped <style> block at the top of
   playbooks/detail.html and projects/detail.html (dark code
   blocks + inline-code chip). Those <style> blocks should be
   removed when those templates migrate.
   ============================================================ */

.mcc-md {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.62;
  word-wrap: break-word;
}

/* ---- Vertical rhythm ---- */
.mcc-md > *:first-child { margin-top: 0; }
.mcc-md > *:last-child  { margin-bottom: 0; }

.mcc-md p,
.mcc-md ul,
.mcc-md ol,
.mcc-md dl,
.mcc-md pre,
.mcc-md blockquote,
.mcc-md table,
.mcc-md figure {
  margin: 0 0 12px;
}

/* ---- Headings ---- */
.mcc-md h1,
.mcc-md h2,
.mcc-md h3,
.mcc-md h4,
.mcc-md h5,
.mcc-md h6 {
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 22px 0 8px;
}
.mcc-md h1 { font-size: 22px; margin-top: 0; }
.mcc-md h2 { font-size: 19px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.mcc-md h3 { font-size: 16.5px; }
.mcc-md h4 { font-size: 15px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.mcc-md h5 { font-size: 14px; color: var(--ink-2); }
.mcc-md h6 { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Inline ---- */
.mcc-md strong { color: var(--ink); font-weight: 600; }
.mcc-md em     { font-style: italic; }
.mcc-md del    { color: var(--ink-3); text-decoration: line-through; }
.mcc-md kbd {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line-strong);
}

/* ---- Links ---- */
.mcc-md a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 2px;
  transition: color 120ms;
}
.mcc-md a:hover {
  color: var(--accent-2);
  text-decoration-color: var(--accent);
}

/* ---- Lists ---- */
.mcc-md ul, .mcc-md ol { padding-left: 1.4em; }
.mcc-md li { margin: 3px 0; }
.mcc-md li > ul,
.mcc-md li > ol { margin: 3px 0 3px; }
.mcc-md ul > li::marker { color: var(--ink-3); }
.mcc-md ol > li::marker { color: var(--ink-3); }
.mcc-md li > p { margin: 0 0 6px; }

/* Definition lists (def_list extension) */
.mcc-md dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.mcc-md dt { font-weight: 600; color: var(--ink); }
.mcc-md dd { margin: 0; color: var(--ink-2); }

/* ---- Blockquotes ---- */
.mcc-md blockquote {
  margin: 12px 0;
  padding: 6px 14px;
  color: var(--ink-2);
  border-left: 3px solid var(--accent-3);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 0 6px 6px 0;
}
.mcc-md blockquote > *:last-child { margin-bottom: 0; }

/* ---- Horizontal rule ---- */
.mcc-md hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 18px 0;
}

/* ---- Tables ---- */
.mcc-md table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13.5px;
}
.mcc-md thead th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-strong);
}
.mcc-md tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.mcc-md tbody tr:nth-child(2n) td {
  background: color-mix(in srgb, var(--bg-3) 50%, transparent);
}
.mcc-md tbody tr:last-child td { border-bottom: 0; }

/* ---- Inline code (chip) ---- */
.mcc-md :not(pre) > code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.88em;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-3));
  color: var(--accent-2, var(--accent));
  white-space: nowrap;
}

/* ---- Fenced code blocks ---- */
.mcc-md pre {
  position: relative;
  background: var(--bg-3);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow-x: auto;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
}
html[data-theme="sage"] .mcc-md pre,
html[data-theme="plum"] .mcc-md pre,
html[data-theme="amber"] .mcc-md pre {
  /* On dark themes deepen the code-block surface so it sits a step below
     the panel it lives inside. */
  background: var(--bg-1);
}
.mcc-md pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* ---- Images ---- */
.mcc-md img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
  display: inline-block;
}

/* ---- Callouts (opt-in via attr_list: `{: .callout }` or .callout--warn etc) ---- */
.mcc-md .callout {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-3));
  border-left: 3px solid var(--accent);
  color: var(--ink);
}
.mcc-md .callout--warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--bg-3));
  border-left-color: var(--warn);
}
.mcc-md .callout--alert {
  background: color-mix(in srgb, var(--alert) 12%, var(--bg-3));
  border-left-color: var(--alert);
}
.mcc-md .callout > *:first-child { margin-top: 0; }
.mcc-md .callout > *:last-child  { margin-bottom: 0; }

/* ---- TOC (toc extension wraps with .toc) ---- */
.mcc-md .toc {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
}
.mcc-md .toc > ul { padding-left: 1.2em; margin: 0; }
.mcc-md .toc::before {
  content: "Contents";
  display: block;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  margin-bottom: 6px;
}