style.css

@import './extensions/color/color-styles.css';
@import './extensions/highlight/highlight-styles.css';

.ProseMirror {
  outline: none;
  caret-color: var(--ink-gray-9);
  word-break: break-word;
}

/* Firefox */
.ProseMirror-focused:focus-visible {
  outline: none;
}

/* Placeholder */
.ProseMirror:not(.ProseMirror-focused) p.is-editor-empty::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--ink-gray-4);
  pointer-events: none;
  height: 0;
}

.ProseMirror-selectednode video,
img.ProseMirror-selectednode {
  outline: 2px solid var(--outline-gray-2);
}

.table-of-contents-node {
  padding: 0 10px;
}
.table-of-contents-node li p {
  width: fit-content;
  padding: 0 3px;
  border-radius: 4px;
}

.table-of-contents-node li p:hover {
  background-color: var(--surface-gray-2);
}

.table-of-contents-node.ProseMirror-selectednode {
  outline: 2px solid var(--outline-gray-2);
  outline-offset: 2px;
  border-radius: 4px;
}

.ProseMirror ul[data-type='taskList'] {
  list-style: none;
  padding: 0;

  li {
    align-items: flex-start;
    display: flex;
    margin: 0;

    > label {
      flex: 0 0 auto;
      margin-right: 0.5rem;
      margin-top: 0.25rem;
      height: 1lh;
      display: flex;
      align-items: center;
      user-select: none;
    }

    > div {
      flex: 1 1 auto;
      margin-bottom: 0;

      > p {
        margin: 0.25rem 0;
      }
    }
  }
  ul[data-type='taskList'] {
    margin: 0;
  }

  input[type='checkbox'] {
    cursor: pointer;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    color: theme('colors.gray.900');
  }
}

.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

.tag-item,
.tag-suggestion-active {
  background-color: var(--surface-gray-1, #f8f8f8);
  color: inherit;
  border: 1px solid transparent;
  padding: 0px 2px;
  border-radius: 4px;
  font-size: 1em;
  white-space: nowrap;
  cursor: default;
}

.tag-item.ProseMirror-selectednode {
  border-color: var(--outline-gray-3, #c7c7c7);
}

.tag-suggestion-active {
  background-color: var(--surface-gray-2, #f3f3f3);
}

.ProseMirror table {
  table-layout: fixed;
}

.ProseMirror td,
.ProseMirror th {
  padding: 0.5rem;
  border: 1px solid var(--outline-gray-2);
  position: relative;
}

.ProseMirror td p,
.ProseMirror th p {
  margin: 0;
}

.ProseMirror th {
  background-color: var(--surface-gray-2);
}

/* Applies the current color to the link's underline */
.ProseMirror a span[style] {
  text-decoration: underline;
}

.ProseMirror .tableWrapper {
  overflow-x: scroll;
}

/* Edit prose classes to be more functional */
.prose-v2 {
  line-height: 1.5 !important;
  blockquote {
    quotes: none;
    font-style: normal;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  p,
  ul,
  ol,
  pre,
  blockquote,
  table {
    margin-top: 0;
    margin-bottom: 0;
  }
  /* fix: heading bottom margin */
  :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
  }
  :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
  }

  hr {
    margin: 2.25em 0;
  }
}

/* Empty paragraph height in prose-v3.
   ProseMirror always renders empty paragraphs as <p><br class="ProseMirror-trailingBreak"></p>
   even in readonly mode, so p:empty never matches.
   Edit mode:    no override — natural 14px × 1.7 = 23.8px, avoids jump when typing
   Readonly mode: scoped via [contenteditable=false] + ProseMirror-trailingBreak class
   to precisely target empty paragraphs (not inline <br> in content) */
.ProseMirror[contenteditable='false'] .prose-v3 p:has(> br.ProseMirror-trailingBreak:only-child),
.prose-v3.ProseMirror[contenteditable='false'] p:has(> br.ProseMirror-trailingBreak:only-child) {
  line-height: 20px;
}

/* prose-v3 blockquote: 2px left border — overrides Tailwind Typography's 0.25rem
   using element specificity (0,1,1) to beat the plugin's :where() (0,1,0) */
.prose-v3 blockquote {
  border-inline-start-width: 2px;
}