/* prose.css — TipTap frontend output styles
 * GitHub-inspired prose for WBCE TipTap content.
 * Scope: .wbce-prose wrapper around rendered HTML.
 */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
.wbce-prose {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #1f2328;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.wbce-prose > *:first-child { margin-top: 0 !important; }
.wbce-prose > *:last-child  { margin-bottom: 0 !important; }

/* ── Headings ─────────────────────────────────────────────────────────────── */
.wbce-prose h1,
.wbce-prose h2,
.wbce-prose h3,
.wbce-prose h4,
.wbce-prose h5,
.wbce-prose h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  line-height: 1.25;
  color: #1f2328;
}

.wbce-prose h1 {
  font-size: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #d8dee4;
}

.wbce-prose h2 {
  font-size: 1.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #d8dee4;
}

.wbce-prose h3 { font-size: 1.25em; }
.wbce-prose h4 { font-size: 1em; }
.wbce-prose h5 { font-size: 0.875em; }
.wbce-prose h6 { font-size: 0.85em; color: #636c76; }

/* ── Paragraph ────────────────────────────────────────────────────────────── */
.wbce-prose p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* ── Inline formatting ────────────────────────────────────────────────────── */
.wbce-prose strong, .wbce-prose b { font-weight: 600; }
.wbce-prose em, .wbce-prose i     { font-style: italic; }
.wbce-prose u                     { text-decoration: underline; text-underline-offset: 2px; }
.wbce-prose s, .wbce-prose del    { text-decoration: line-through; color: #636c76; }

.wbce-prose mark {
  padding: 0.1em 0.25em;
  border-radius: 3px;
}

/* ── Links ────────────────────────────────────────────────────────────────── */
.wbce-prose a {
  color: #0969da;
  text-decoration: none;
}
.wbce-prose a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Inline code ──────────────────────────────────────────────────────────── */
.wbce-prose :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 85%;
  padding: 0.2em 0.45em;
  background-color: #eaeef2;
  border-radius: 6px;
  white-space: break-spaces;
}

/* ── Code blocks ──────────────────────────────────────────────────────────── */
.wbce-prose pre {
  position: relative;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 85%;
  line-height: 1.5;
  background-color: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 1em;
  tab-size: 2;
}

/* Language badge — floats over code, top right */
.ev-code-lang {
  position: absolute;
  top: 15px;
  right: 40px;
  font-size: 12px;
  font-weight: 500;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6e8daa;
  letter-spacing: 0.05em;
  background: #d3e1ee;
  padding: 0 6px;
  user-select: none;
  pointer-events: none;
  border-radius: 6px;
  text-transform: uppercase;
}

/* Copy button — top right */
.ev-code-copy {
  position: absolute;
  top: 0;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  color: #8c959f;
  opacity: 0;
  transition: opacity .15s, background .12s, color .12s, border-color .12s;
  line-height: 1;
}

.wbce-prose pre:hover .ev-code-copy { opacity: 1; }

.ev-code-copy:hover {
  background: rgba(255,255,255,.85);
  border-color: #d0d7de;
  color: #1f2328;
}

.ev-code-copy.ev-code-copied {
  color: #1a7f37;
  border-color: #2da44e;
  background: #dafbe1;
  opacity: 1;
}

.wbce-prose pre code {
  display: block;
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 100%;
  white-space: pre;
  color: inherit;
}

/* ── Syntax highlighting — matches TipTap editor color scheme exactly ─────── */
.wbce-prose pre .hljs-comment,
.wbce-prose pre .hljs-quote                                        { color: #8a9097; font-style: italic; }
.wbce-prose pre .hljs-keyword,
.wbce-prose pre .hljs-selector-tag,
.wbce-prose pre .hljs-built_in,
.wbce-prose pre .hljs-name,
.wbce-prose pre .hljs-tag                                          { color: #c026d3; }
.wbce-prose pre .hljs-string,
.wbce-prose pre .hljs-attr,
.wbce-prose pre .hljs-symbol,
.wbce-prose pre .hljs-bullet,
.wbce-prose pre .hljs-template-tag                                 { color: #018a26; }
.wbce-prose pre .hljs-number,
.wbce-prose pre .hljs-literal,
.wbce-prose pre .hljs-variable,
.wbce-prose pre .hljs-template-variable                            { color: #b45309; }
.wbce-prose pre .hljs-title,
.wbce-prose pre .hljs-section                                      { color: #1d6fd6; }
.wbce-prose pre .hljs-attribute                                    { color: #7c3aed; }
.wbce-prose pre .hljs-type,
.wbce-prose pre .hljs-selector-id,
.wbce-prose pre .hljs-selector-class                               { color: #0f766e; }
.wbce-prose pre .hljs-meta                                         { color: #9098a0; }
.wbce-prose pre .hljs-addition                                     { color: #116329; background: #dafbe1; }
.wbce-prose pre .hljs-deletion                                     { color: #82071e; background: #ffebe9; }
.wbce-prose pre .hljs-emphasis                                     { font-style: italic; }
.wbce-prose pre .hljs-strong                                       { font-weight: 600; }

/* ── Blockquote ───────────────────────────────────────────────────────────── */
.wbce-prose blockquote {
  margin: 0 0 1em;
  padding: 0 1em;
  color: #636c76;
  border-left: 4px solid #d0d7de;
}
.wbce-prose blockquote > *:last-child { margin-bottom: 0; }

/* ── Horizontal rule ──────────────────────────────────────────────────────── */
.wbce-prose hr {
  height: 0;
  margin: 1.5em 0;
  border: none;
  border-top: 2px solid #d0d7de;
}

/* ── Lists ────────────────────────────────────────────────────────────────── */
.wbce-prose ul,
.wbce-prose ol {
  margin-top: 0;
  margin-bottom: 1em;
  padding-left: 2em;
}

.wbce-prose ul { list-style-type: disc; }
.wbce-prose ol { list-style-type: decimal; }

.wbce-prose ul ul  { list-style-type: circle; }
.wbce-prose ul ul ul { list-style-type: square; }

.wbce-prose li {
  margin-bottom: 0.3em;
}

.wbce-prose li > p { margin-bottom: 0.4em; }

.wbce-prose li > ul,
.wbce-prose li > ol {
  margin-top: 0.3em;
  margin-bottom: 0;
}

/* ── Task list — 4 states: todo / doing / done / cancelled ───────────────── */
.wbce-prose ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}

.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"] {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 0.4em;
}

/* label is the clickable area in the editor — in the frontend it just wraps the indicator */
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"] > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.18em;
  cursor: default;
  pointer-events: none;
}

/* hide the native <input type="checkbox"> */
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"] input[type="checkbox"] {
  display: none;
}

/* The <span> inside <label> is the visual state box */
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"] > label > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid #d0d7de;
  background: #fff;
  box-sizing: border-box;
  flex-shrink: 0;
  user-select: none;
}

/* ── todo: empty box (default) ─────────────────────────────────────────────── */
/* (covered by the base span styles above) */

/* ── doing: blue box with ▶ ────────────────────────────────────────────────── */
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="doing"] > label > span {
  border-color: #0969da;
  background: #ddf4ff;
}
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="doing"] > label > span::before {
  content: '▶';
  font-size: 7px;
  line-height: 1;
  color: #0969da;
}

/* ── done: green box with ✓ ─────────────────────────────────────────────────── */
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="done"] > label > span,
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-checked="true"] > label > span {
  border-color: #2da44e;
  background: #dafbe1;
}
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="done"] > label > span::before,
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-checked="true"] > label > span::before {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #1a7f37;
}
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="done"] > div,
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-checked="true"] > div {
  color: #636c76;
  text-decoration: line-through;
  text-decoration-color: #a0aab4;
}

/* ── cancelled: gray box with ✕ ─────────────────────────────────────────────── */
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="cancelled"] > label > span {
  border-color: #d0d7de;
  background: #f6f8fa;
}
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="cancelled"] > label > span::before {
  content: '✕';
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #8c959f;
}
.wbce-prose ul[data-type="taskList"] li[data-type="taskItem"][data-state="cancelled"] > div {
  color: #8c959f;
  text-decoration: line-through;
  text-decoration-color: #c6cdd5;
}

/* ── Images ───────────────────────────────────────────────────────────────── */
.wbce-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin: 1em 0;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.wbce-prose .tableWrapper,
.wbce-prose table {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 1em;
}

.wbce-prose table {
  border-collapse: collapse;
  font-size: 0.9em;
  display: table;
}

.wbce-prose table th,
.wbce-prose table td {
  padding: 8px 13px;
  border: 1px solid #d0d7de;
  text-align: left;
  vertical-align: top;
}

.wbce-prose table th {
  font-weight: 600;
  background-color: #f6f8fa;
  white-space: nowrap;
}

.wbce-prose table tr:nth-child(2n) td {
  background-color: #f6f8fa;
}

/* ── Toggle (details/summary) ─────────────────────────────────────────────── */
.wbce-prose details.ev-toggle {
  margin-bottom: 1em;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  overflow: hidden;
}

.wbce-prose details.ev-toggle > summary {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  background-color: #f6f8fa;
  user-select: none;
  list-style: none;
}

.wbce-prose details.ev-toggle > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #636c76;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.wbce-prose details.ev-toggle[open] > summary::before {
  transform: rotate(90deg);
}

.wbce-prose details.ev-toggle > .ev-toggle-body {
  padding: 14px 18px;
  border-top: 1px solid #d0d7de;
}

.wbce-prose details.ev-toggle > .ev-toggle-body > *:first-child { margin-top: 0; }
.wbce-prose details.ev-toggle > .ev-toggle-body > *:last-child  { margin-bottom: 0; }

/* ── Callout ──────────────────────────────────────────────────────────────── */
.wbce-prose .ev-callout {
  position: relative;
  padding: 14px 18px 14px 50px;
  margin-bottom: 1em;
  border-radius: 8px;
  border: 1px solid #bee3cb;
  background-color: #f0faf4;
  color: #1a4731;
}

.wbce-prose .ev-callout::before {
  content: "💡";
  position: absolute;
  left: 15px;
  top: 13px;
  font-size: 17px;
  line-height: 1;
}

.wbce-prose .ev-callout > *:first-child { margin-top: 0; }
.wbce-prose .ev-callout > *:last-child  { margin-bottom: 0; }

/* ── DateTime chip ────────────────────────────────────────────────────────── */
.wbce-prose .ev-dt-chip,
.wbce-prose span[data-datetime] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px 2px 7px;
  border-radius: 20px;
  background-color: #f0edff;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  font-size: 0.82em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  vertical-align: middle;
}

.wbce-prose span[data-datetime]::before {
  content: "📅";
  font-style: normal;
  font-size: 13px;
}

/* ── FileTree / PageTree (label badges, before filetree.js runs) ──────────── */
.wbce-prose pre.file-tree,
.wbce-prose pre.page-tree {
  position: relative;
}

.wbce-prose pre.file-tree::after {
  content: "FileTree";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 10px; font-weight: 600; font-family: inherit;
  color: #1d6fd6; background: #e0efff;
  padding: 2px 7px; border-radius: 4px;
}

.wbce-prose pre.page-tree::after {
  content: "PageTree";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 10px; font-weight: 600; font-family: inherit;
  color: #7c3aed; background: #ede9fe;
  padding: 2px 7px; border-radius: 4px;
}

/* Once filetree.js runs, .file-tree-container replaces the <pre> */
.wbce-prose .file-tree-container {
  margin-bottom: 1em;
}

/* Reset prose ul/li styles that break the pixel-precise 24px tree grid */
.wbce-prose .file-tree-container .treeview-root {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.wbce-prose .file-tree-container .treeview-item {
  list-style: none;
  margin-bottom: 0;
}