/* Markdown live preview (kilaz.com/markdown/) */
@media (min-width: 900px) { main:has(.md-layout) { max-width: 1200px; } }
.md-toolbar { margin: 0 0 1rem; gap: 0.5rem; }
.md-toolbar .btn { padding: 0.5rem 0.9rem; }
.md-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.md-pane { min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.md-pane-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.md-layout textarea, .md-preview { height: 65vh; min-height: 320px; }
.field.md-pane textarea { resize: vertical; line-height: 1.5; }
.md-preview {
    overflow: auto; padding: 0.75rem 1rem; border: 2px solid var(--border-color); border-radius: 8px;
    background-color: var(--bg-secondary); color: var(--text-primary); line-height: 1.6; overflow-wrap: anywhere;
}
.md-preview > :first-child { margin-top: 0; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5, .md-preview h6 { margin: 1.2em 0 0.5em; line-height: 1.25; text-align: left; }
.md-preview h1 { font-size: 1.9rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
.md-preview h2 { font-size: 1.45rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
.md-preview h3 { font-size: 1.2rem; }
.md-preview p, .md-preview ul, .md-preview ol, .md-preview blockquote, .md-preview pre, .md-preview table { margin: 0 0 1em; }
.md-preview ul, .md-preview ol { padding-left: 1.75em; }
.md-preview li > input[type="checkbox"] { margin: 0 0.4em 0 -1.3em; vertical-align: middle; }
.md-preview li:has(> input[type="checkbox"]) { list-style: none; }
.md-preview a { color: var(--accent-color); }
.md-preview blockquote { border-left: 4px solid var(--border-color); padding: 0 1em; color: var(--text-secondary); }
.md-preview code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--bg-primary); padding: 0.15em 0.35em; border-radius: 4px; }
.md-preview pre { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.8rem 1rem; overflow: auto; }
.md-preview pre code { background: none; padding: 0; font-size: 0.85rem; }
.md-preview table { border-collapse: collapse; display: block; max-width: 100%; overflow: auto; }
.md-preview th, .md-preview td { border: 1px solid var(--border-color); padding: 0.35em 0.75em; }
.md-preview th { background: var(--bg-primary); }
.md-preview img { max-width: 100%; height: auto; }
.md-preview hr { border: 0; border-top: 2px solid var(--border-color); margin: 1.5em 0; }
@media (max-width: 760px) {
    .md-layout { grid-template-columns: 1fr; }
    .md-layout textarea, .md-preview { height: 45vh; }
}