/* The new editor (design/editor-rebuild/plan.md, Phase 2; js/editor2/view.js).

   It draws with the same .markdown-body rules as today's editor, so a note
   looks the same in either. What is here is only what ProseMirror needs
   (prosemirror-view/style/prosemirror.css and prosemirror-gapcursor's, MIT)
   and the few shapes that are drawn differently: a to-do's box, a collapsible
   section's triangle. */

#editor2-host { width: 100%; }
.editor2 {
  width: 100%;
  min-height: calc(100vh - 300px);
  outline: none;
  caret-color: var(--accent);
  word-break: break-word;
  font-family: var(--editor-font-family, var(--font-ui));
}

/* ProseMirror's own requirements. */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror pre { white-space: pre-wrap; }
.ProseMirror li { position: relative; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror [draggable][contenteditable=false] { user-select: text; }
.ProseMirror-selectednode { outline: 2px solid var(--accent); outline-offset: 1px; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--text-heading); animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; }
@keyframes ProseMirror-cursor-blink { to { visibility: hidden; } }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }

/* An empty note says where to start, as today's editor does. */
.editor2 > p:only-child:has(> br.ProseMirror-trailingBreak:only-child)::before {
  content: 'Start writing…';
  color: var(--text-faint);
  position: absolute;
  pointer-events: none;
}

/* A list item's words sit beside its marker; a to-do's box beside its words. */
.editor2 li > .pm-li-body > .pm-li-text { display: block; }
.editor2 li.pm-todo { display: flex; align-items: baseline; }
.editor2 li.pm-todo > .pm-li-body { flex: 1; min-width: 0; }
.editor2 li.pm-todo.pm-done > .pm-li-body > .pm-li-text { color: var(--text-faint); text-decoration: line-through; }

/* A collapsible section: a triangle, the summary line, the body when open. */
.editor2 .pm-details { position: relative; padding-left: 1.5em; margin: 0.6em 0; }
.editor2 .pm-details-toggle {
  position: absolute; left: 0; top: 0.15em; width: 1.2em; padding: 0;
  border: none; background: none; cursor: pointer; color: var(--text-faint); font-size: 0.9em; line-height: 1.4;
}
.editor2 .pm-details-toggle:hover { color: var(--text-heading); }
.editor2 .pm-summary { font-weight: 600; }
.editor2 .pm-details:not(.is-open) > .pm-details-content > :not(.pm-summary) { display: none; }

/* The status bar says which editor the open note is in. */
#status-editor { color: var(--text-faint); }
body.editor2-on #status-editor { color: var(--accent); }

/* A quiz or chart selected as a whole — Backspace beside one selects it
   first, and a second press deletes it (editor2/view.js besideLive). */
.editor2 .pm-live-selected { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* A piece kept as raw HTML (editor2-islands.js): its own HTML in a box you type
   into, as today; outlined when selected as a whole. */
.editor2 .pm-island-box { outline: none; }
.editor2 .pm-island-selected { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Cells selected together (drag across cells, Shift-click, Shift-arrows —
   prosemirror-tables): tinted as one block, as in a spreadsheet. */
.editor2 td.selectedCell, .editor2 th.selectedCell { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.editor2 td.selectedCell *::selection, .editor2 th.selectedCell *::selection { background: transparent; }


/* Column widths (editor2/table-widths.js). A resized table lays its columns
   out by the shares it keeps, long words wrapping inside them. Near a column
   line the pointer turns into a resize arrow and the line is drawn. */
.editor2 table.pm-fixed-cols { table-layout: fixed; }
.editor2 table.pm-fixed-cols :is(th, td) { overflow-wrap: anywhere; }
body.vn-col-resize .editor2 :is(th, td) { cursor: col-resize; }
body.vn-col-resizing, body.vn-col-resizing * { cursor: col-resize !important; user-select: none; }
.pm-col-guide { position: fixed; display: none; width: 2px; background: var(--accent); border-radius: 1px; pointer-events: none; z-index: 60; }

/* Embeds (app/editor2-embeds.js): selected as one piece, as a quiz or chart is. */
.editor2 .embed.pm-embed-selected { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-card); }

/* Database notes (app/editor2-database.js): the row list is the note, the view is drawn over it. */
.editor2 .pm-db-rows { display: none; }
/* The view is today's page, not editable text: it must not inherit the editor's
   break-anywhere wrapping (a table column collapsed to one letter wide). */
.editor2 .pm-dbv { white-space: normal; word-wrap: normal; overflow-wrap: normal; }

/* Another device's caret and selection on a note's live copy (editor2/collab.js,
   Phase 4) — the Google Docs "|" in that device's colour, its name on a flag
   above. A decoration: never part of the document, so it cannot reach a saved
   file, move your caret or land in your undo; and it never takes a click. The
   flag shows while the caret is hovered or just placed, like today's. */
.editor2 .pm-peer-caret {
  position: relative; display: inline; margin: 0 -1px;
  border-left: 2px solid var(--peer, var(--accent)); pointer-events: none;
  word-break: normal;
}
.editor2 .pm-peer-flag {
  position: absolute; bottom: 100%; left: -2px; margin-bottom: 1px;
  font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; font-style: normal;
  color: #fff; background: var(--peer, var(--accent));
  padding: 0 5px; border-radius: 4px 4px 4px 0; white-space: nowrap; user-select: none;
  animation: pm-peer-flag 3s ease-out forwards;
}
@keyframes pm-peer-flag { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.editor2 .pm-peer-selection { border-radius: 2px; }