/* markdown-editor — extracted from inline <style> */
.mde-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-bottom: none; border-radius: var(--evvy-radius-lg, 12px) var(--evvy-radius-lg, 12px) 0 0;
  background: var(--cluster-surface, #f8f9fa);
}
.mde-toolbar-btn {
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 0.3rem 0.5rem; font-size: 0.875rem; color: var(--bs-body-color);
  cursor: pointer; display: flex; align-items: center; gap: 0.25rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mde-toolbar-btn:hover { background: var(--evvy-border-color, #DEE2E6); }
.mde-toolbar-sep { width: 1px; background: var(--evvy-border-color); margin: 0 0.25rem; align-self: stretch; }
.mde-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: 0 0 var(--evvy-radius-lg, 12px) var(--evvy-radius-lg, 12px);
  overflow: hidden; min-height: 400px;
}
.mde-split.editor-only { grid-template-columns: 1fr; }
.mde-split.preview-only { grid-template-columns: 1fr; }
.mde-editor {
  border-right: 1px solid var(--evvy-border-color);
  position: relative;
}
.mde-editor textarea {
  width: 100%; height: 100%; min-height: 400px; border: none; padding: 1rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem; line-height: 1.7; resize: none; background: transparent;
  color: var(--bs-body-color); outline: none; tab-size: 4;
}
.mde-preview {
  padding: 1rem; overflow-y: auto; max-height: 600px;
  font-size: 0.9375rem; line-height: 1.8;
}
.mde-preview h1 { font-size: 1.75rem; font-weight: 800; margin: 1rem 0 0.5rem; border-bottom: 2px solid var(--evvy-border-color); padding-bottom: 0.35rem; }
.mde-preview h2 { font-size: 1.375rem; font-weight: 700; margin: 1rem 0 0.4rem; border-bottom: 1px solid var(--evvy-border-color); padding-bottom: 0.25rem; }
.mde-preview h3 { font-size: 1.125rem; font-weight: 700; margin: 0.75rem 0 0.35rem; }
.mde-preview h4 { font-size: 1rem; font-weight: 700; margin: 0.5rem 0 0.25rem; }
.mde-preview p { margin: 0.5rem 0; }
.mde-preview ul, .mde-preview ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.mde-preview li { margin: 0.25rem 0; }
.mde-preview blockquote {
  border-left: 4px solid var(--cluster-dark, #002040); padding: 0.5rem 1rem;
  margin: 0.75rem 0; background: var(--cluster-surface, #f8f9fa);
  border-radius: 0 8px 8px 0;
}
.mde-preview code {
  background: color-mix(in srgb, var(--cluster-dark) 8%, transparent);
  padding: 0.15rem 0.4rem; border-radius: 4px;
  font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8125rem;
}
.mde-preview pre {
  background: #1e1e2e; color: #cdd6f4; padding: 1rem; border-radius: 8px;
  overflow-x: auto; margin: 0.75rem 0;
}
.mde-preview pre code { background: none; padding: 0; color: inherit; font-size: 0.8125rem; }
.mde-preview table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.8125rem; }
.mde-preview th { text-align: left; font-weight: 700; padding: 0.5rem; border-bottom: 2px solid var(--evvy-border-color); background: var(--cluster-surface); }
.mde-preview td { padding: 0.5rem; border-bottom: 1px solid var(--evvy-border-color); }
.mde-preview hr { border: none; border-top: 2px solid var(--evvy-border-color); margin: 1rem 0; }
.mde-preview img { max-width: 100%; border-radius: 8px; }
.mde-preview a { color: var(--cluster-dark); text-decoration: underline; }
.mde-preview .task-item { list-style: none; margin-left: -1.25rem; }
.mde-preview .task-item input { margin-right: 0.4rem; }
.mde-stats {
  display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.5rem 0.75rem;
  font-size: 0.75rem; color: var(--evvy-text-secondary); font-weight: 500;
  border: 1px solid var(--evvy-border-color); border-top: none;
  border-radius: 0 0 var(--evvy-radius-lg, 12px) var(--evvy-radius-lg, 12px);
  background: var(--cluster-surface, #f8f9fa);
}
.mde-stats span { white-space: nowrap; }
[data-bs-theme="dark"] .mde-toolbar { background: var(--evvy-gray-100, #1E1E1E); }
[data-bs-theme="dark"] .mde-stats { background: var(--evvy-gray-100, #1E1E1E); }
@media (max-width: 767.98px) {
  .mde-split { grid-template-columns: 1fr; }
  .mde-editor { border-right: none; border-bottom: 1px solid var(--evvy-border-color); }
  .mde-editor textarea { min-height: 250px; }
  .mde-preview { max-height: 400px; }
}