/* Scoped styles for rendered Markdown content in transcript entries.
 *
 * All colors use CSS custom properties from Kiso theming so dark mode
 * works automatically. No `dark:` prefixes.
 *
 * Spec: docs/superpowers/specs/2026-03-11-transcript-markdown-rendering.md
 */

.markdown-content {
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* ── Block spacing ─────────────────────────────────────────────── */

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

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

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content blockquote,
.markdown-content pre,
.markdown-content table {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* ── Headings ──────────────────────────────────────────────────── */

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1em;
  margin-bottom: 0.25em;
}

.markdown-content h1 { font-size: 1.25rem; }
.markdown-content h2 { font-size: 1.125rem; }
.markdown-content h3 { font-size: 1rem; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 0.875rem; }

/* ── Lists ─────────────────────────────────────────────────────── */

.markdown-content ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.markdown-content ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}

.markdown-content ul ul { list-style-type: circle; }
.markdown-content ul ul ul { list-style-type: square; }

.markdown-content li {
  margin-top: 0.125em;
  margin-bottom: 0.125em;
}

/* ── Inline code ───────────────────────────────────────────────── */

.markdown-content code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  background-color: var(--color-muted);
}

/* Reset for code inside pre blocks */
.markdown-content pre code {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 0.8125rem;
}

/* ── Code blocks ───────────────────────────────────────────────── */

.markdown-content pre {
  font-family: var(--font-mono);
  background-color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  line-height: 1.5;
}

/* ── Blockquotes ───────────────────────────────────────────────── */

.markdown-content blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: 0.75em;
  color: var(--color-muted-foreground);
}

.markdown-content blockquote p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

/* ── Horizontal rules ──────────────────────────────────────────── */

.markdown-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-top: 1em;
  margin-bottom: 1em;
}

/* ── Links ─────────────────────────────────────────────────────── */

.markdown-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.markdown-content a:hover {
  text-decoration: none;
}

/* ── Tables ────────────────────────────────────────────────────── */

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid var(--color-border);
  padding: 0.375rem 0.75rem;
  text-align: left;
}

.markdown-content th {
  font-weight: 600;
  background-color: var(--color-muted);
}

/* ── Task lists ────────────────────────────────────────────────── */

.markdown-content li:has(> input[type="checkbox"]) {
  list-style-type: none;
  margin-left: -1.5em;
}

.markdown-content input[type="checkbox"] {
  margin-right: 0.375em;
  vertical-align: middle;
}

/* ── Strikethrough ─────────────────────────────────────────────── */

.markdown-content del {
  text-decoration: line-through;
  color: var(--color-muted-foreground);
}