/* mlp-markdown-editor styles. Import after platform.css, same convention as every other
 * library here. Content inside `.mlp-markdown` is mlp-markdown.css's own concern — this file
 * only lays out the editor's own two panes and its status line.
 */

.mlp-markdown-editor__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-2);
  padding: var(--s-1);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface-raised);
}

.mlp-markdown-editor__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
}

.mlp-markdown-editor__tool:hover {
  background: var(--c-accent-wash);
  color: var(--c-accent);
}

.mlp-markdown-editor__tool:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

.mlp-markdown-editor__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

/* Both panes get the same minimum height and independent scrolling — a long document scrolls
   its own pane, not the whole page, so the two stay side by side regardless of which one is
   currently taller. 60vh, not a fixed px value: comfortable on both a laptop and a phone turned
   landscape, without hardcoding an assumption about viewport height. */
.mlp-markdown-editor__panes textarea,
.mlp-markdown-editor__panes .mlp-markdown {
  min-height: 60vh;
  overflow: auto;
}

.mlp-markdown-editor__panes textarea {
  font-family: var(--f-mono);
  resize: vertical;
}

/* Below 768px (matches mlp-table's own existing card-mode breakpoint, not a new one invented
   here) there isn't room for two side-by-side panes — stack them, source first, so typing stays
   the primary action and the preview is a scroll away, not the other way around. */
@media (max-width: 768px) {
  .mlp-markdown-editor__panes {
    grid-template-columns: 1fr;
  }
}

.mlp-markdown-editor__status--error {
  color: var(--c-danger);
}