/* Breizhkemp — Markdown editor (TipTap). Bootstrap variables only: works in light and dark. */
.md-editor {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.md-editor.is-focused {
  border-color: var(--bs-primary-border-subtle);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.md-editor.is-invalid { border-color: var(--bs-form-invalid-border-color); }
.md-editor.is-invalid.is-focused { box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25); }

/* TipTap toolbar */
.md-editor-toolbar {
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: .25rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius);
  position: sticky; top: 0; z-index: 2;
}
.md-editor-group { display: flex; gap: 1px; }
.md-editor-group + .md-editor-group { border-left: var(--bs-border-width) solid var(--bs-border-color); padding-left: .25rem; }
.md-editor-btn {
  --bs-btn-padding-x: .45rem; --bs-btn-padding-y: .2rem;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--bs-primary-bg-subtle); --bs-btn-active-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-primary-border-subtle);
  --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-border-color: transparent;
  line-height: 1.25;
}

/* TipTap content */
.md-editor-content { cursor: text; }
.md-editor-prose {
  min-height: var(--md-editor-min-height, 10rem);
  max-height: 70vh; overflow-y: auto;
  padding: .5rem .75rem; outline: none;
  word-wrap: break-word; white-space: pre-wrap;
}
.md-editor-prose > :first-child { margin-top: 0; }
.md-editor-prose p { margin-bottom: .75rem; }
.md-editor-prose h2, .md-editor-prose h3, .md-editor-prose h4 { margin-top: 1rem; }
.md-editor-prose h2 { font-size: 1.5rem; }
.md-editor-prose h3 { font-size: 1.25rem; }
.md-editor-prose h4 { font-size: 1.1rem; }
.md-editor-prose ul, .md-editor-prose ol { padding-left: 1.5rem; margin-bottom: .75rem; }
.md-editor-prose li > p { margin-bottom: .25rem; }
.md-editor-prose a { cursor: text; }
.md-editor-prose code {
  color: var(--bs-code-color); background: var(--bs-secondary-bg);
  padding: .1rem .25rem; border-radius: .25rem; font-size: .875em;
}
.md-editor-prose pre {
  background: var(--bs-secondary-bg); color: var(--bs-body-color);
  padding: .5rem .75rem; border-radius: var(--bs-border-radius); white-space: pre-wrap;
}
.md-editor-prose pre code { background: none; padding: 0; color: inherit; }
.md-editor-prose hr { margin: 1rem 0; }
.md-editor-prose img { max-width: 100%; height: auto; }
.md-editor-prose img.ProseMirror-selectednode { outline: 2px solid var(--bs-primary); }
.md-editor-prose p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left; height: 0; pointer-events: none;
  color: var(--bs-secondary-color);
}
.md-editor-prose .ProseMirror-gapcursor:after { border-top-color: var(--bs-body-color); }

.md-editor-status { border-top: var(--bs-border-width) solid var(--bs-border-color); }