/* ============================================================
   Prose — styles every HTML element a Markdown renderer can emit
   Scope: .prose  ·  uses design tokens from styles.css
   ============================================================ */

.prose {
  color: var(--ink);
  font-size: 17.6px;
  line-height: 1.72;
  max-width: 72ch;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- vertical rhythm: space between flow children ---- */
.prose > * + * { margin-top: 1.1em; }

/* ---- headings ---- */
.prose h1, .prose h2, .prose h3,
.prose h4, .prose h5, .prose h6 {
  color: var(--ink); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; text-wrap: balance;
}
.prose h1 { font-size: 2em; margin: 0 0 0.6em; letter-spacing: -0.03em; }
.prose h2 {
  font-size: 1.55em; margin: 1.8em 0 0.5em;
  padding-bottom: 0.3em; border-bottom: 1px solid var(--line-soft);
}
.prose h3 { font-size: 1.27em; margin: 1.6em 0 0.4em; }
.prose h4 { font-size: 1.1em; margin: 1.5em 0 0.4em; }
.prose h5 { font-size: 1em; margin: 1.5em 0 0.4em; }
.prose h6 {
  font-size: 0.86em; margin: 1.5em 0 0.4em;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }

/* ---- paragraphs & inline ---- */
.prose p { margin: 0; }
.prose p + p { margin-top: 1.1em; }
.prose a {
  color: var(--accent-deep, var(--ink)); font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; text-decoration-color: var(--accent-line, var(--line));
  transition: text-decoration-color .2s ease;
}
@media (hover: hover) {
  .prose a:hover { text-decoration-color: currentColor; }
}
.prose strong, .prose b { font-weight: 700; color: var(--ink); }
.prose em, .prose i { font-style: italic; }
.prose del, .prose s { text-decoration: line-through; color: var(--muted); }
.prose ins { text-decoration: underline; text-decoration-style: dotted; }
.prose small { font-size: 0.85em; color: var(--muted); }
.prose sub, .prose sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
.prose sup { top: -0.5em; }
.prose sub { bottom: -0.25em; }
.prose mark {
  background: var(--accent-tint, oklch(0.96 0.04 95)); color: var(--ink);
  padding: 0.05em 0.3em; border-radius: 4px;
}
.prose abbr[title] { text-decoration: underline dotted; cursor: help; }
.prose kbd {
  font-family: var(--mono); font-size: 0.82em;
  background: var(--bg); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 6px; padding: 0.15em 0.45em;
  color: var(--ink); white-space: nowrap;
}

/* ---- inline code & code blocks ---- */
.prose code {
  font-family: var(--mono); font-size: 0.88em;
  background: oklch(0.96 0.004 250); color: oklch(0.34 0.02 280);
  padding: 0.15em 0.4em; border-radius: 6px; border: 1px solid var(--line-soft);
}
.prose pre {
  margin: 1.4em 0; padding: 18px 20px; overflow-x: auto;
  background: oklch(0.21 0.012 265); color: oklch(0.92 0.01 250);
  border-radius: 12px; font-family: var(--mono); font-size: 14.5px; line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}
.prose pre code {
  background: none; border: none; padding: 0; color: inherit;
  font-size: inherit; border-radius: 0;
}

/* ---- blockquote ---- */
.prose blockquote {
  margin: 1.4em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent, var(--line));
  color: var(--muted); font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose blockquote > * + * { margin-top: 0.8em; }
.prose blockquote cite { display: block; margin-top: 0.6em; font-size: 0.85em; font-style: normal; color: var(--faint); }

/* ---- lists ---- */
.prose ul, .prose ol { margin: 0; padding-left: 1.5em; }
.prose li { margin: 0.35em 0; padding-left: 0.2em; }
.prose li::marker { color: var(--accent, var(--muted)); }
.prose ul { list-style: disc; }
.prose ul ul { list-style: circle; }
.prose ul ul ul { list-style: square; }
.prose ol { list-style: decimal; }
.prose ol ol { list-style: lower-alpha; }
.prose ol ol ol { list-style: lower-roman; }
.prose li > ul, .prose li > ol { margin-top: 0.35em; }
.prose li > p { margin: 0; }
.prose li > p + p { margin-top: 0.6em; }

/* task lists (GitHub-flavoured) */
.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.3em; }
.prose input[type="checkbox"] {
  margin-right: 0.5em; width: 1em; height: 1em; vertical-align: -0.1em;
  accent-color: var(--accent-deep, var(--ink));
}

/* ---- definition lists ---- */
.prose dl { margin: 1.2em 0; }
.prose dt { font-weight: 700; color: var(--ink); margin-top: 0.8em; }
.prose dd { margin: 0.2em 0 0 1.2em; color: var(--muted); }

/* ---- horizontal rule ---- */
.prose hr {
  margin: 2em 0; border: none; height: 1px; background: var(--line);
}

/* ---- tables ---- */
.prose table {
  width: 100%; margin: 1.5em 0; border-collapse: collapse;
  font-size: 0.95em; display: block; overflow-x: auto; white-space: nowrap;
}
.prose thead { border-bottom: 2px solid var(--line); }
.prose th {
  text-align: left; font-weight: 700; color: var(--ink);
  padding: 10px 14px; vertical-align: bottom;
}
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
@media (hover: hover) {
  .prose tbody tr:hover { background: oklch(0.97 0.003 250); }
}
.prose table caption { caption-side: bottom; margin-top: 0.6em; font-size: 0.85em; color: var(--faint); }

/* ---- media ---- */
.prose img, .prose video {
  max-width: 100%; height: auto; border-radius: 12px; display: block;
  margin: 1.4em 0;
}
.prose figure { margin: 1.6em 0; }
.prose figure img { margin: 0; }
.prose figcaption { margin-top: 0.6em; font-size: 0.85em; color: var(--faint); text-align: center; }

/* ---- details / summary ---- */
.prose details {
  margin: 1.2em 0; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.prose summary { font-weight: 600; cursor: pointer; color: var(--ink); }
.prose details[open] summary { margin-bottom: 0.8em; }

/* ---- footnotes (common renderer output) ---- */
.prose .footnotes { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: 0.9em; color: var(--muted); }
.prose .footnotes ol { padding-left: 1.3em; }
.prose sup a, .prose .footnote-ref { text-decoration: none; font-weight: 600; }