.prose {
  /* Long-form reading line-height per the design system —
     reading surfaces (notes, tasks, journal, assistant bubbles) want 1.7
     so prose breathes like a book, not a UI snippet. */
  line-height: 1.7;
}

.prose h1 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.5rem;
}

.prose h2 {
  margin: 1rem 0 0.4rem;
  font-size: 1.3rem;
}

.prose h3 {
  margin: 0.75rem 0 0.3rem;
  font-size: 1.1rem;
}

.prose h4,
.prose h5,
.prose h6 {
  margin: 0.5rem 0 0.25rem;
}

.prose p {
  margin: 0 0 0.6rem;
}

.prose ul,
.prose ol {
  margin: 0 0 0.6rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: 0.2rem;
}

.prose pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.75rem;
  overflow-x: auto;
  margin: 0 0 0.6rem;
}

.prose pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.9em;
}

.prose code {
  background: var(--color-code-inline-bg);
  border-radius: 3px;
  padding: 0.15rem 0.35rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.9em;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 0.6rem;
}

.prose th,
.prose td {
  border: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.prose thead th {
  background: var(--color-bg-secondary);
  font-weight: 600;
}

.prose tbody tr:nth-child(even) {
  background: var(--color-table-stripe);
}

.prose blockquote {
  border-left: 3px solid var(--color-border);
  margin: 0 0 0.6rem;
  padding: 0.25rem 0 0.25rem 0.75rem;
  color: var(--color-text-secondary);
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1rem 0;
}

.prose img {
  max-width: 100%;
  height: auto;
}

.prose a {
  color: var(--color-primary);
  text-decoration: none;
}

.prose a:hover {
  text-decoration: underline;
}

.prose .inline-tag {
  color: var(--color-tag-text);
  background: var(--color-tag-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
}

.prose .inline-tag:hover {
  filter: brightness(0.9);
  text-decoration: none;
}

.prose .wikilink {
  color: var(--color-wikilink);
  background: var(--color-wikilink-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
  cursor: pointer;
}

.prose .wikilink:hover {
  filter: brightness(0.9);
  text-decoration: none;
}

/* Task list */
.prose ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0.25rem;
}

.prose ul[data-type="taskList"] li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.prose ul[data-type="taskList"] li > label {
  flex-shrink: 0;
  user-select: none;
  line-height: 1.6;
}

.prose ul[data-type="taskList"] li > label input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--color-primary);
  width: 0.95em;
  height: 0.95em;
  margin: 0;
}

.prose ul[data-type="taskList"] li > div {
  flex: 1;
}

.prose ul[data-type="taskList"] li[data-checked="true"] > div {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Interactive checkboxes — marked output in the list-note viewer */
.prose--checklist ul {
  list-style: none;
  padding-left: 0.25rem;
}
.prose--checklist li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.prose--checklist li input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
  width: 0.95em;
  height: 0.95em;
  margin: 0;
}
.prose--checklist li:has(input[type="checkbox"]:checked) > p,
.prose--checklist li:has(input[type="checkbox"]:checked) {
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.prose--checklist li:has(input[type="checkbox"]:checked) input[type="checkbox"] {
  text-decoration: none; /* don't strike through the checkbox itself */
}

/* Tiptap editor */
.tiptap-editor .ProseMirror {
  outline: none;
  min-height: 200px;
  padding: 0.75rem;
}

.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
  color: var(--color-text-muted, var(--color-text-secondary));
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap-wrapper {
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-card);
  color: var(--color-text);
}

.tiptap-wrapper:focus-within {
  box-shadow: var(--focus-ring, 0 0 0 2px var(--color-primary));
}