/* * Prose styling for rendered markdown previews. Scoped to .md-prose so it never leaks into the app * chrome. Uses the design tokens so it adapts to light/dark like everything else. */ .md-prose { font-size: 0.875rem; line-height: 1.65; color: var(--foreground); word-wrap: break-word; overflow-wrap: anywhere; } .md-prose > :first-child { margin-top: 0; } .md-prose > :last-child { margin-bottom: 0; } .md-prose h1, .md-prose h2, .md-prose h3, .md-prose h4 { font-weight: 600; line-height: 1.3; margin: 1.2em 0 0.5em; } .md-prose h1 { font-size: 1.4em; } .md-prose h2 { font-size: 1.2em; } .md-prose h3 { font-size: 1.05em; } .md-prose h4 { font-size: 1em; } .md-prose h1, .md-prose h2 { padding-bottom: 0.25em; border-bottom: 1px solid var(--border); } .md-prose p, .md-prose ul, .md-prose ol, .md-prose blockquote, .md-prose table, .md-prose pre { margin: 0 0 0.75em; } .md-prose ul, .md-prose ol { padding-left: 1.4em; } .md-prose li { margin: 0.2em 0; } .md-prose li > ul, .md-prose li > ol { margin: 0.2em 0; } .md-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } .md-prose code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85em; background: var(--muted); padding: 0.12em 0.35em; border-radius: 4px; } .md-prose pre { background: var(--muted); padding: 0.8em 1em; border-radius: 8px; overflow-x: auto; } .md-prose pre code { background: transparent; padding: 0; font-size: 0.85em; } .md-prose blockquote { border-left: 3px solid var(--border); padding-left: 0.9em; color: var(--muted-foreground); } .md-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .md-prose th, .md-prose td { border: 1px solid var(--border); padding: 0.4em 0.6em; text-align: left; } .md-prose th { background: var(--muted); font-weight: 600; } .md-prose hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; } .md-prose img { max-width: 100%; border-radius: 6px; } .md-prose input[type='checkbox'] { margin-right: 0.4em; } /* The frontmatter block (YAML) shown above the rendered body for .md-file editors. */ .md-frontmatter { margin: 0 0 1em; padding: 0.6em 0.85em; border: 1px solid var(--border); border-radius: 8px; background: var(--muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.78rem; line-height: 1.5; color: var(--muted-foreground); white-space: pre-wrap; word-break: break-word; }