/* tools/markdown-preview/css/style.css */

/* Action bar */
#action-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #1e1e2e; border-bottom: 2px solid #45475a;
}
#action-buttons { display: flex; gap: 6px; }
#action-buttons button {
  background: #313244; color: #cdd6f4; border: 1px solid #45475a;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
#action-buttons button:hover { background: #45475a; }
#btn-copy-html { background: #89b4fa; color: #1e1e2e; border-color: #89b4fa; font-weight: 600; }
#btn-copy-html:hover { background: #74c7ec; border-color: #74c7ec; }

/* Status bar (word/char/line counts) */
#status-bar {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #6c7086;
}
#status-bar .sep { color: #45475a; }

/* Main area */
#main { display: flex; flex: 1; min-height: 0; }

/* Editor pane */
#editor-pane {
  flex: 1; display: flex; flex-direction: column;
  border-right: 2px solid #45475a; min-width: 0;
}
.pane-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; background: #181825; font-size: 12px; color: #6c7086;
  border-bottom: 1px solid #313244; flex-shrink: 0;
}
#md-input {
  flex: 1; background: #1e1e2e; color: #cdd6f4; border: none; outline: none;
  padding: 16px; font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px; line-height: 1.7; resize: none; white-space: pre-wrap;
  overflow: auto;
}

/* Preview pane */
#preview-pane {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
}
#preview-scroll {
  flex: 1; overflow: auto; background: #f8f8f8;
  padding: 24px 32px;
}

/* ─── Markdown body — light document styling ─── */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px; line-height: 1.7; color: #24292e;
  max-width: 720px;
}

/* Headings */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px; margin-bottom: 12px; font-weight: 600; line-height: 1.3; color: #111827;
}
.markdown-body h1 { font-size: 2em; border-bottom: 2px solid #e1e4e8; padding-bottom: 8px; }
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #e1e4e8; padding-bottom: 6px; }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1.1em; }
.markdown-body h5 { font-size: 0.95em; }
.markdown-body h6 { font-size: 0.85em; color: #6a737d; }

/* Paragraphs & spacing */
.markdown-body p { margin-top: 0; margin-bottom: 14px; }
.markdown-body > *:first-child { margin-top: 0; }

/* Links */
.markdown-body a { color: #0366d6; text-decoration: underline; }
.markdown-body a:hover { color: #0256c9; }

/* Strong / em */
.markdown-body strong { font-weight: 600; color: #111827; }
.markdown-body em { font-style: italic; }

/* Code blocks */
.markdown-body pre {
  background: #1e1e2e; border-radius: 6px; padding: 16px;
  overflow: auto; margin: 16px 0;
  border: 1px solid #313244;
}
.markdown-body pre code {
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px; line-height: 1.6; color: #cdd6f4;
  background: none; padding: 0; border-radius: 0; border: none;
}

/* Inline code */
.markdown-body code {
  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.875em; background: #f0f0f5; color: #d63384;
  padding: 2px 5px; border-radius: 4px; border: 1px solid #e1e4e8;
}

/* Blockquotes */
.markdown-body blockquote {
  margin: 16px 0; padding: 10px 16px;
  border-left: 4px solid #89b4fa;
  background: #f0f4ff; color: #555f70; border-radius: 0 4px 4px 0;
}
.markdown-body blockquote p { margin-bottom: 0; }

/* Lists */
.markdown-body ul,
.markdown-body ol {
  margin: 0 0 14px 0; padding-left: 28px;
}
.markdown-body li { margin-bottom: 4px; }
.markdown-body li:has(> input[type="checkbox"]) { list-style: none; margin-left: -20px; }
.markdown-body li > input[type="checkbox"] { margin-right: 6px; vertical-align: middle; }
.markdown-body li > ul,
.markdown-body li > ol { margin-top: 4px; margin-bottom: 4px; }

/* Tables */
.markdown-body table {
  width: 100%; border-collapse: collapse; margin: 16px 0;
  font-size: 14px;
}
.markdown-body th {
  background: #f3f4f6; color: #111827; font-weight: 600;
  text-align: left; padding: 8px 12px;
  border: 1px solid #d0d7de;
}
.markdown-body td {
  padding: 8px 12px; border: 1px solid #d0d7de; color: #24292e;
}
.markdown-body tr:nth-child(even) td { background: #f8f9fa; }
.markdown-body tr:hover td { background: #eef2ff; }

/* Horizontal rule */
.markdown-body hr {
  border: none; border-top: 1px solid #d0d7de; margin: 24px 0;
}

/* Images */
.markdown-body img {
  max-width: 100%; height: auto; border-radius: 4px;
  display: block; margin: 12px 0;
}