/* The TipTap task-editor trial (Phase 7g): looks like the usual task editor, plus a drag handle */
.task-editor-tiptap[hidden] { display: none; }
.task-editor-tiptap .ProseMirror { outline: none; min-height: 120px; }
.task-editor-tiptap .ProseMirror > * + * { margin-top: 0.4em; }
.task-editor-tiptap .ProseMirror p.is-empty:first-child::before { content: none; }

.tiptap-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 24px;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    cursor: grab;
    transition: background-color var(--duration-fast) var(--ease-in-out);
}
/* A wider target than the 18×24 grip, without moving it (it is placed by its own box): out into the empty
   margin and a little above and below — never right, where a paragraph's text or a list's marker starts */
.tiptap-drag-handle::before { content: ""; position: absolute; inset: -4px 0 -4px -10px; }
.tiptap-drag-handle:hover { background: var(--bg-hover, rgba(0, 0, 0, 0.05)); color: var(--text-secondary); }
.tiptap-drag-handle:active { cursor: grabbing; }
.tiptap-drag-handle svg { width: 14px; height: 14px; fill: currentColor; }

/* iOS checklists and the Mac's to-do markers, as the other editors show them */
.task-editor-tiptap ul[data-type="checklist"] { list-style: none; padding-left: 24px; }
.task-editor-tiptap ul[data-type="checklist"] > li { position: relative; }
.task-editor-tiptap ul[data-type="checklist"] > li::before {
    content: "○";
    position: absolute;
    left: -20px;
    color: var(--accent-blue);
}
.task-editor-tiptap ul[data-type="checklist"] > li[data-checked="true"]::before { content: "●"; }
.task-editor-tiptap .cadeo-todo-marker { cursor: pointer; }

/* Kept-as-is blocks: one piece, moved by the handle, not edited inside (yet) */
.task-editor-tiptap .ProseMirror-selectednode { outline: 2px solid var(--accent-blue); outline-offset: 2px; border-radius: var(--radius-md); }

/* Lists line up as in the usual editor: no paragraph spacing inside an item, and the Mac's to-do
   marker hanging in the bullet column so every list's text starts on one edge. The usual editor's
   rules (note-modal-tables.css) match li > span:first-child; in TipTap the marker is li > p > span. */
.task-editor-tiptap li > p { margin: 0; }
/* (ProseMirror puts an invisible <img class="ProseMirror-separator"> before an inline node that
   starts a line, so the marker is its first child or comes straight after that) */
.task-editor-tiptap ul[style*="list-style: none"] li > p > .cadeo-todo-marker:first-child,
.task-editor-tiptap ul[style*="list-style: none"] li > p > .ProseMirror-separator:first-child + .cadeo-todo-marker {
    position: relative;
    display: inline-block;
    width: 16px;
    margin-left: calc(-1 * var(--todo-marker-col));
    text-align: center;
    line-height: inherit;
    color: transparent !important;
    -webkit-user-select: none;
    user-select: none;
}
.task-editor-tiptap ul[style*="list-style: none"] li > p > .cadeo-todo-marker:first-child:not(.todo-completed)::before,
.task-editor-tiptap ul[style*="list-style: none"] li > p > .ProseMirror-separator:first-child + .cadeo-todo-marker:not(.todo-completed)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: var(--radius-circle);
    border: 2px solid var(--accent-blue);
    background: transparent;
}
.task-editor-tiptap li:has(> p > .cadeo-todo-marker.todo-completed) { color: var(--text-completed); }

/* A toggle's title, as the usual editor styles it — its rule matches span[contenteditable="true"],
   and in TipTap the title inherits editability instead (one editing host: tiptap-blocks.js) */
.task-editor-tiptap .toggle-header > span { flex: 1; outline: none; font-weight: 500; min-width: 50px; }
.task-editor-tiptap .toggle-header > span:is(:empty, :has(> br:only-child))::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

/* A surface's placeholder (TipTapTrial.create's `placeholder`), while it holds one empty line */
.task-editor-tiptap .ProseMirror[data-placeholder] { position: relative; }
.task-editor-tiptap .ProseMirror[data-placeholder]:has(> p:only-child > br.ProseMirror-trailingBreak:only-child)::before {
    content: attr(data-placeholder);
    position: absolute;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Event notes: "/task"'s inline input (MeetingTasks.showTaskInput) floats over the notes' empty line, in their host */
#eventNotesEditorTipTap { position: relative; }
.task-inline-wrapper.task-inline-floating {
    position: absolute;
    z-index: 2;
    margin: 0;
    transform: translateY(-6px); /* its text on the line's */
}

/* Compact surfaces (descriptions, comments): a line or a few, their own height rules, no gap above the first block */
.tiptap-compact .ProseMirror { min-height: 1.4em; }
.tiptap-compact .ProseMirror > * + * { margin-top: 0.2em; }
.tiptap-compact .ProseMirror p { margin: 0; }

/* A comment box (TipTapCommentInput): the panel's input look on its host; the text scrolls inside it */
.tiptap-comment .ProseMirror { min-height: 0; }
.tiptap-comment .ProseMirror p { margin: 0; }

/* The caret between blocks (beside an image with no line to type in): TipTap's is a black line — the text's colour instead */
.task-editor-tiptap .ProseMirror-gapcursor::after { border-top-color: var(--text-primary); }