stack/apps/web/src/components/knowledge/KnowledgeEditor.css

/* KnowledgeEditor — Tiptap/ProseMirror styles
   Uses CSS variables for theme compatibility */

.knowledge-editor-content .tiptap {
  min-height: 300px;
  padding: 16px 20px;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Placeholder */
.knowledge-editor-content .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--muted);
  opacity: 0.6;
  pointer-events: none;
  height: 0;
}

/* Headings */
.knowledge-editor-content .tiptap h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 1.5em 0 0.5em;
  color: var(--text);
  line-height: 1.3;
}

.knowledge-editor-content .tiptap h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 1.3em 0 0.4em;
  color: var(--text);
  line-height: 1.35;
}

.knowledge-editor-content .tiptap h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.2em 0 0.3em;
  color: var(--text);
  line-height: 1.4;
}

.knowledge-editor-content .tiptap h1:first-child,
.knowledge-editor-content .tiptap h2:first-child,
.knowledge-editor-content .tiptap h3:first-child {
  margin-top: 0;
}

/* Paragraphs */
.knowledge-editor-content .tiptap p {
  margin: 0.5em 0;
}

/* Bold / Italic / Strikethrough */
.knowledge-editor-content .tiptap strong {
  font-weight: 700;
}

.knowledge-editor-content .tiptap em {
  font-style: italic;
}

.knowledge-editor-content .tiptap s {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Inline code */
.knowledge-editor-content .tiptap code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--primary-l);
}

/* Code blocks */
.knowledge-editor-content .tiptap pre {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  margin: 0.75em 0;
  overflow-x: auto;
}

.knowledge-editor-content .tiptap pre code {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.83rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* Lists */
.knowledge-editor-content .tiptap ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.knowledge-editor-content .tiptap ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.knowledge-editor-content .tiptap li {
  margin: 0.2em 0;
}

.knowledge-editor-content .tiptap li > p {
  margin: 0;
}

/* Blockquote */
.knowledge-editor-content .tiptap blockquote {
  border-left: 3px solid var(--primary);
  padding: 4px 16px;
  margin: 0.75em 0;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.knowledge-editor-content .tiptap blockquote p {
  margin: 0.25em 0;
}

/* Horizontal rule */
.knowledge-editor-content .tiptap hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}

/* Links */
.knowledge-editor-content .tiptap a,
.knowledge-editor-content .tiptap .knowledge-editor-link {
  color: var(--primary-l);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Tables */
.knowledge-editor-content .tiptap table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75em 0;
  overflow: hidden;
  border-radius: var(--r-sm);
}

.knowledge-editor-content .tiptap th,
.knowledge-editor-content .tiptap td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
  min-width: 80px;
}

.knowledge-editor-content .tiptap th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 0.85rem;
}

.knowledge-editor-content .tiptap td {
  font-size: 0.88rem;
}

/* Table selected cell highlight */
.knowledge-editor-content .tiptap .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

.knowledge-editor-content .tiptap th.selectedCell::after,
.knowledge-editor-content .tiptap td.selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  opacity: 0.08;
  pointer-events: none;
}

/* Table cell relative positioning for selection overlay */
.knowledge-editor-content .tiptap th,
.knowledge-editor-content .tiptap td {
  position: relative;
}

/* Column resize handle */
.knowledge-editor-content .tiptap .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
  cursor: col-resize;
  z-index: 2;
}

.knowledge-editor-content .tiptap .tableWrapper {
  overflow-x: auto;
}

/* Syntax highlighting tokens (lowlight/highlight.js) */
.knowledge-editor-content .tiptap pre .hljs-keyword { color: var(--ms-purple-400); }
.knowledge-editor-content .tiptap pre .hljs-string { color: var(--ms-teal-400); }
.knowledge-editor-content .tiptap pre .hljs-number { color: var(--ms-amber-400); }
.knowledge-editor-content .tiptap pre .hljs-comment { color: var(--muted); font-style: italic; }
.knowledge-editor-content .tiptap pre .hljs-function { color: var(--ms-blue-400); }
.knowledge-editor-content .tiptap pre .hljs-title { color: var(--ms-blue-400); }
.knowledge-editor-content .tiptap pre .hljs-params { color: var(--text-2); }
.knowledge-editor-content .tiptap pre .hljs-built_in { color: var(--ms-cyan-500); }
.knowledge-editor-content .tiptap pre .hljs-literal { color: var(--ms-amber-400); }
.knowledge-editor-content .tiptap pre .hljs-type { color: var(--ms-teal-400); }
.knowledge-editor-content .tiptap pre .hljs-attr { color: var(--ms-purple-400); }
.knowledge-editor-content .tiptap pre .hljs-selector-class { color: var(--ms-blue-400); }
.knowledge-editor-content .tiptap pre .hljs-selector-tag { color: var(--ms-red-400); }
.knowledge-editor-content .tiptap pre .hljs-variable { color: var(--text); }
.knowledge-editor-content .tiptap pre .hljs-meta { color: var(--muted); }
.knowledge-editor-content .tiptap pre .hljs-tag { color: var(--ms-red-400); }
.knowledge-editor-content .tiptap pre .hljs-name { color: var(--ms-red-400); }
.knowledge-editor-content .tiptap pre .hljs-attribute { color: var(--ms-purple-400); }