/* Content: shared editor surface */
.tiptap {
  position: relative;
  color: var(--color-zinc-300);
  font-family: var(--font-sans);
  line-height: 1.7;
  outline: none;
}

.tiptap-document-lead {
  padding-top: 1rem;
}

.tiptap-editor-surface {
  padding-inline-start: 16px;
  padding-inline-end: 0;
}

.tiptap-page-body {
  padding-bottom: clamp(5rem, 10vh, 8rem);
}

.tiptap:focus-visible,
.tiptap [contenteditable]:focus-visible {
  outline: none;
  box-shadow: none;
}

@media (min-width: 640px) {
  .tiptap-editor-surface {
    padding-inline-start: 28px;
  }
}

.tiptap :where(p) {
  margin: 0;
}

.tiptap > * + * {
  margin-top: 0.75em;
}

.tiptap h1,
.tiptap h2,
.tiptap h3 {
  font-weight: 600;
  color: var(--color-zinc-100);
}

.tiptap h1 {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.tiptap h2 {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}

.tiptap h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

.tiptap ul,
.tiptap ol {
  padding-left: 1.5rem;
}

.tiptap ul {
  list-style-type: disc;
}

.tiptap ol {
  list-style-type: decimal;
}

.tiptap li {
  margin-top: 0.25em;
}

.tiptap li p {
  margin: 0;
}

.tiptap blockquote {
  border-left: 3px solid var(--color-zinc-700);
  padding-left: 1rem;
  color: var(--color-zinc-400);
}

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

.tiptap a {
  color: var(--color-accent-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tiptap a:hover {
  color: var(--color-accent-300);
}

/* Content: fallback inline code outside the managed code-block node view. */
.tiptap code:not(.tiptap-code-block-content) {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-zinc-800);
  border-radius: 0.25rem;
  padding: 0.15em 0.35em;
  color: var(--color-zinc-200);
}

/* Content: fallback preformatted blocks outside the managed code-block node view. */
.tiptap pre:not(.tiptap-code-block-pre) {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background-color: var(--color-zinc-900);
  border: 1px solid var(--color-zinc-800);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}

.tiptap pre:not(.tiptap-code-block-pre) code:not(.tiptap-code-block-content) {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Content: fallback images outside the managed image node view. */
.tiptap img:not(.tiptap-image) {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.tiptap s {
  text-decoration: line-through;
}

.tiptap u {
  text-underline-offset: 3px;
}

/* Content: placeholder */
.tiptap > p.is-empty::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: var(--color-zinc-500);
}

/* Content: collaboration carets */
.collaboration-carets__caret {
  position: relative;
  margin-left: -1px;
  margin-right: -1px;
  border-left: 2px solid;
  word-break: normal;
  pointer-events: none;
}

.collaboration-carets__label {
  position: absolute;
  top: -1.4em;
  left: -1px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: 3px 3px 3px 0;
  white-space: nowrap;
  color: #fff;
  user-select: none;
  pointer-events: none;
}

/* When a collaboration cursor widget sits between top-level block nodes
   (e.g. remote user has a NodeSelection on an image), the inline <span>
   creates an anonymous line box that displaces content. Taking it out of
   flow removes the visible gap while keeping the cursor at its natural
   static position. Does not affect inline cursors inside paragraphs. */
.tiptap > .collaboration-carets__caret {
  position: absolute;
}

/* Content: task lists */
.tiptap ul[data-type="taskList"] {
  list-style: none;
  padding-left: 0;
}

.tiptap ul[data-type="taskList"] > li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.tiptap ul[data-type="taskList"] > li > label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0.35em;
  user-select: none;
}

.tiptap ul[data-type="taskList"] > li > div {
  flex: 1;
  min-width: 0;
}

.tiptap ul[data-type="taskList"] > li > label input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-zinc-500);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.tiptap ul[data-type="taskList"] > li > label input[type="checkbox"]:checked {
  background-color: var(--color-accent-500);
  border-color: var(--color-accent-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

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