/* The editor derives its palette from the app's shared tokens (application.css).
   It used to own a separate one, which is how we ended up with a cool blue-black
   shell wrapped around a warm charcoal editor -- two different blacks, neither
   intentional. Change the palette in one place now. */
.brainlog-editor {
  --editor-bg: var(--bg);
  --editor-fg: var(--text);
  --editor-muted: var(--text-muted);
  --editor-border: var(--border);
  --editor-soft: var(--bg-sidebar);
  --editor-accent: var(--accent);
  box-sizing: border-box;
  min-height: 60vh;
  position: relative;
  color: var(--editor-fg);
  background: var(--editor-bg);
}

.brainlog-editor *,
.brainlog-editor *::before,
.brainlog-editor *::after {
  box-sizing: inherit;
}

.brainlog-editor__surface {
  min-height: inherit;
}

.brainlog-editor .milkdown {
  min-height: inherit;
}

/* The writing column starts at the LEFT edge of the pane rather than floating in
   the middle of it. A measure is still capped for readability, but the text lines
   up with the page title and the rest of the chrome instead of drifting away. */
.brainlog-editor .ProseMirror {
  width: 100%;
  /* The MEASURE lives on the prose blocks below, not here, so that a board can use
     the whole pane. Trapped inside a 46rem column it was scrolling sideways with a
     column cut off -- a kanban that needs a scrollbar to show three columns is not
     a kanban. */
  max-width: none;
  min-height: inherit;
  margin: 0;
  padding: var(--space-4) var(--space-6) 9rem;
  outline: none;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.003em;
  overflow-wrap: anywhere;
}

.brainlog-editor .ProseMirror.is-empty::before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--editor-muted);
  pointer-events: none;
  opacity: 0.72;
}

.brainlog-editor .ProseMirror-yjs-cursor {
  position: relative;
  margin-left: -1px;
  border-left: 2px solid;
  border-right: 2px solid transparent;
  pointer-events: none;
  word-break: normal;
}

.brainlog-editor .ProseMirror-yjs-cursor > div {
  position: absolute;
  bottom: 100%;
  left: -2px;
  border-radius: 0.25rem 0.25rem 0.25rem 0;
  padding: 0.2rem 0.35rem;
  color: white;
  font: 600 0.7rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}

.brainlog-editor .ProseMirror-yjs-selection {
  border-radius: 0.1rem;
}

.brainlog-editor .ProseMirror > :first-child {
  margin-top: 0;
}

.brainlog-editor .ProseMirror p,
.brainlog-editor .ProseMirror ul,
.brainlog-editor .ProseMirror ol,
.brainlog-editor .ProseMirror blockquote,
.brainlog-editor .ProseMirror pre,
.brainlog-editor .ProseMirror table {
  margin: 1em 0;
}

.brainlog-editor .ProseMirror h1,
.brainlog-editor .ProseMirror h2,
.brainlog-editor .ProseMirror h3,
.brainlog-editor .ProseMirror h4,
.brainlog-editor .ProseMirror h5,
.brainlog-editor .ProseMirror h6 {
  margin: 1.8em 0 0.55em;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.brainlog-editor .ProseMirror h1 { font-size: 2rem; }
.brainlog-editor .ProseMirror h2 { font-size: 1.55rem; }
.brainlog-editor .ProseMirror h3 { font-size: 1.25rem; }

/* A pointer, because it really is clickable -- see handleClick in editor.js. */
.brainlog-editor .ProseMirror a {
  color: var(--editor-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  cursor: pointer;
}

.brainlog-editor .ProseMirror blockquote {
  margin-left: 0;
  padding-left: 1.15rem;
  border-left: 3px solid var(--editor-border);
  color: var(--editor-muted);
}

.brainlog-editor .ProseMirror code {
  padding: 0.15em 0.35em;
  border-radius: 0.3em;
  background: var(--editor-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.brainlog-editor .ProseMirror pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  border: 1px solid var(--editor-border);
  border-radius: 0.55rem;
  background: var(--editor-soft);
  line-height: 1.55;
}

.brainlog-editor .ProseMirror pre code {
  padding: 0;
  background: transparent;
}

.brainlog-editor .ProseMirror hr {
  margin: 2.5rem auto;
  border: 0;
  border-top: 1px solid var(--editor-border);
}

.brainlog-editor .ProseMirror img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
  border-radius: 0.35rem;
}

.brainlog-editor .ProseMirror li[data-item-type="task"] {
  margin-left: -1.25rem;
  list-style: none;
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.brainlog-editor__task-check {
  /* The hit area a thumb needs, without moving the glyph: the label carries
     the size (23px of native checkbox was the whole target before) and a
     negative margin gives the padding back to the layout. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  margin: -0.25rem 0 0 -0.6rem;
  padding-top: 0.4em;
  user-select: none;
  cursor: pointer;
}

.brainlog-editor__task-content {
  min-width: 0;
  flex: 1;
}

.brainlog-editor__task-content > p:first-child {
  margin-top: 0;
}

.brainlog-editor__task-content > p:last-child {
  margin-bottom: 0;
}

.brainlog-board__drag-handle {
  display: none;
}

.brainlog-editor .ProseMirror input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--editor-accent);
}

.brainlog-editor .ProseMirror input[type="checkbox"]:indeterminate {
  accent-color: var(--editor-accent);
}

/* The state, readable from the row -- a 16px glyph changing is not feedback a
   glance (or a thumb) can pick up. data-checked is synced by the node view. */
.brainlog-editor .ProseMirror li[data-checked="true"] > .brainlog-editor__task-content {
  color: var(--editor-muted, var(--text-muted));
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.brainlog-editor .ProseMirror li[data-checked="doing"] > .brainlog-editor__task-content {
  color: var(--editor-accent);
}

.brainlog-editor .ProseMirror[aria-readonly="true"] input[type="checkbox"] {
  pointer-events: none;
}

.brainlog-editor .tableWrapper {
  overflow-x: auto;
  margin: 1.25rem 0;
}

.brainlog-editor .ProseMirror table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  line-height: 1.5;
}

.brainlog-editor .ProseMirror th,
.brainlog-editor .ProseMirror td {
  position: relative;
  min-width: 5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--editor-border);
  vertical-align: top;
  text-align: left;
}

.brainlog-editor .ProseMirror th {
  background: var(--editor-soft);
  font-weight: 650;
}

.brainlog-editor .ProseMirror .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--editor-accent) 16%, transparent);
}

.brainlog-editor .ProseMirror .column-resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: -1px;
  z-index: 3;
  width: 4px;
  background: var(--editor-accent);
  pointer-events: none;
}

.brainlog-editor__insert,
.brainlog-editor__table-tools,
.brainlog-editor__language {
  z-index: 10;
  width: max-content;
  border: 1px solid var(--editor-border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--editor-bg) 94%, transparent);
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 6%);
  /* backdrop-filter removed: Chrome hit-tests it inconsistently, making the
     toolbar visually present but unclickable. Not worth a broken table button. */
}

/* The insert bar now lives in the page toolbar (see application.css), which sticks to
   the top of the scrolling pane. Sticky inside the editor content did not hold -- the
   buttons scrolled away with the text. This rule only matters if the editor is mounted
   without a toolbar to host them. */
.brainlog-editor__insert {
  position: sticky;
  top: 0.75rem;
  margin-left: auto;
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Floated NEXT TO the table / code block being edited (updateChrome sets `top`
   inline against the position:relative .brainlog-editor). They used to sit
   pinned at the top of the note, which put them out of sight exactly when the
   table was at the bottom of a long page. */
.brainlog-editor__table-tools,
.brainlog-editor__language {
  position: absolute;
  top: 0;
  right: 0.75rem;
  display: flex;
  align-items: center;
}

.brainlog-editor__table-tools[hidden],
.brainlog-editor__language[hidden],
.brainlog-editor__insert[hidden] {
  display: none;
}

.brainlog-editor__language {
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding-left: 0.6rem;
  color: var(--editor-muted);
  font: 500 0.75rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brainlog-editor__button,
.brainlog-editor__select {
  min-height: 2rem;
  border: 0;
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  color: var(--editor-fg);
  background: transparent;
  font: 500 0.78rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.brainlog-editor__button:hover,
.brainlog-editor__button:focus-visible,
.brainlog-editor__select:hover,
.brainlog-editor__select:focus-visible {
  outline: none;
  background: var(--editor-soft);
}

.brainlog-editor__button:focus-visible,
.brainlog-editor__select:focus-visible {
  box-shadow: inset 0 0 0 2px var(--editor-accent);
}


@media (max-width: 820px) {
  /* 32px of gutter on each side of a 390px screen is a sixth of the measure
     spent on nothing. The writing column keeps its left edge; it just stops
     paying desktop margins for it. */
  .brainlog-editor .ProseMirror {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}

@media (max-width: 760px) {
  .brainlog-editor .ProseMirror {
    padding-top: 4.5rem;
  }

  .brainlog-editor__table-tools {
    max-width: calc(100vw - 1.5rem);
    overflow-x: auto;
  }
}

/* Boards are document structure, not a separate editor. The node views provide
   chrome around ordinary headings and blocks while the schema content remains
   directly editable and serializes back to comment-delimited markdown. */
.brainlog-editor .ProseMirror .brainlog-board {
  width: 100%;
  margin: 1.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--editor-border);
  border-radius: 0.65rem;
  background: var(--editor-soft);
}

.brainlog-editor .ProseMirror .brainlog-board__columns {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  overflow-x: auto;
  padding: 0.1rem 0.1rem 0.6rem;
  overscroll-behavior-x: contain;
}

.brainlog-editor .ProseMirror .brainlog-board__column {
  position: relative;
  flex: 1 0 14rem;
  min-width: 14rem;
  max-width: 22rem;
  min-height: 12rem;
  padding: 0.8rem;
  border: 1px solid var(--editor-border);
  border-radius: 0.55rem;
  background: var(--editor-bg);
}

.brainlog-editor .ProseMirror .brainlog-board__column-content {
  min-height: 100%;
}

.brainlog-editor .ProseMirror .brainlog-board__column-content > h2:first-child {
  margin: 0 2rem 0.8rem 0;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--editor-border);
  font-size: 1rem;
  line-height: 1.35;
}

.brainlog-editor .ProseMirror .brainlog-board__column-content > :nth-child(2) {
  margin-top: 0;
}

.brainlog-editor .ProseMirror .brainlog-board__column-content > :last-child {
  margin-bottom: 0;
}

.brainlog-editor .ProseMirror .brainlog-board__tools {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.15rem;
}

.brainlog-editor .ProseMirror .brainlog-board__column-tools {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
}

.brainlog-editor .ProseMirror .brainlog-board__button {
  color: var(--editor-muted);
}

.brainlog-editor .ProseMirror .brainlog-board__button:hover,
.brainlog-editor .ProseMirror .brainlog-board__button:focus-visible {
  color: var(--editor-fg);
  background: color-mix(in srgb, var(--editor-accent) 12%, var(--editor-bg));
}

.brainlog-editor .ProseMirror .brainlog-board__column-tools .brainlog-board__button {
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.2rem;
  font-size: 1rem;
}

/* Only direct list items are cards. Nested checkboxes remain editable children of
   their parent card, and the parent's node move carries that entire subtree. */
.brainlog-editor .ProseMirror .brainlog-board__column-content > ul > li[data-board-card] {
  position: relative;
  padding-right: 1.8rem;
}

.brainlog-editor .ProseMirror .brainlog-board__column-content > ul > li[data-board-card]
  > .brainlog-board__drag-handle {
  position: absolute;
  top: 0.05rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.3rem;
  color: var(--editor-muted);
  cursor: grab;
  user-select: none;
  touch-action: none;
  opacity: 0.45;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.brainlog-editor .ProseMirror .brainlog-board__column-content > ul > li[data-board-card]
  > .brainlog-board__drag-handle:hover {
  color: var(--editor-fg);
  background: color-mix(in srgb, var(--editor-accent) 12%, var(--editor-bg));
  opacity: 1;
}

.brainlog-editor .ProseMirror .brainlog-board__card--dragging {
  opacity: 0.55;
}

.brainlog-editor .ProseMirror .brainlog-board__card--drop-before::before,
.brainlog-editor .ProseMirror .brainlog-board__card--drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 2px;
  border-radius: 999px;
  background: var(--editor-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--editor-accent) 18%, transparent);
  pointer-events: none;
}

.brainlog-editor .ProseMirror .brainlog-board__card--drop-before::before {
  top: -0.35rem;
}

.brainlog-editor .ProseMirror .brainlog-board__card--drop-after::after {
  bottom: -0.35rem;
}

.brainlog-editor .ProseMirror .brainlog-board__column--drop-empty {
  border-color: var(--editor-accent);
  box-shadow: inset 0 0 0 1px var(--editor-accent);
  background: color-mix(in srgb, var(--editor-accent) 5%, var(--editor-bg));
}

@media (prefers-reduced-motion: reduce) {
  .brainlog-editor .ProseMirror .brainlog-board__drag-handle,
  .brainlog-editor .ProseMirror .brainlog-board__card--dragging,
  .brainlog-editor .ProseMirror .brainlog-board__column--drop-empty {
    transition: none;
  }
}

/* No measure. Prose used to be capped at 46rem for line length, which is the
   typographic default and was the wrong call for this app: on a wide screen it
   left most of the pane empty while tables and wide content had to squeeze into
   a column. A note now uses the width it is given, the same as the board always
   did. The pane's own padding still keeps text off the edge. */

/* Give a column room enough that a card reads as a sentence, not a word ladder.
   Once dragged, the inline width the node view writes wins over the flex basis. */
.brainlog-editor .ProseMirror [data-type="board-column"] {
  min-width: 16rem;
}

/* ------------------------------------------------------------ resize handles

   The grab strip on the right edge of a board column or a task-table header
   cell. Invisible until the pointer is near it: a board should not look like a
   spreadsheet just because its columns CAN be dragged. Wider than it looks
   (10px of target, 2px of paint) because a 2px hit area is a cursor hunt. */
.brainlog-editor .ProseMirror .brainlog-resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  z-index: 4;
  width: 10px;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
  user-select: none;
}

.brainlog-editor .ProseMirror .brainlog-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--editor-accent);
  opacity: 0;
  transition: opacity 120ms ease;
}

.brainlog-editor .ProseMirror .brainlog-resize-handle:hover::after,
.brainlog-editor .ProseMirror .brainlog-resize-handle:focus-visible::after,
.brainlog-editor .ProseMirror .brainlog-resize-handle.is-dragging::after {
  opacity: 1;
}

.brainlog-editor .ProseMirror .brainlog-resize-handle:focus-visible {
  outline: none;
}

/* A dragged column is sized by an inline width, which only sticks under a
   fixed layout -- otherwise the browser re-negotiates every column on the
   next keystroke and the drag appears to be ignored. */
.brainlog-editor .ProseMirror .brainlog-task-table table {
  table-layout: fixed;
}

.brainlog-editor .ProseMirror .brainlog-task-table th {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .brainlog-editor .ProseMirror .brainlog-resize-handle::after {
    transition: none;
  }
}

/* Comment-delimited task regions remain ordinary checkbox lines in markdown;
   these node views are only a table-shaped editing surface over those lines. */
.brainlog-editor .ProseMirror .brainlog-task-table {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 1.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--editor-border);
  border-radius: 0.65rem;
  background: var(--editor-bg);
}

.brainlog-editor .ProseMirror .brainlog-task-table__tools {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.brainlog-editor .ProseMirror .brainlog-task-table__menu,
.brainlog-editor .ProseMirror .brainlog-board__menu {
  position: relative;
}

.brainlog-editor .ProseMirror .brainlog-task-table__menu > summary,
.brainlog-editor .ProseMirror .brainlog-board__menu > summary {
  list-style: none;
  cursor: pointer;
}

.brainlog-editor .ProseMirror .brainlog-task-table__menu > summary::-webkit-details-marker,
.brainlog-editor .ProseMirror .brainlog-board__menu > summary::-webkit-details-marker {
  display: none;
}

.brainlog-editor .ProseMirror .brainlog-task-table__menu .overflow-menu__items,
.brainlog-editor .ProseMirror .brainlog-board__menu .overflow-menu__items {
  right: 0;
  z-index: 20;
}

.brainlog-editor .ProseMirror .brainlog-task-table table {
  margin: 0;
}

.brainlog-editor .ProseMirror .brainlog-task-table th:first-child,
.brainlog-editor .ProseMirror .brainlog-task-table td:first-child {
  width: 48%;
}

.brainlog-editor .ProseMirror .brainlog-task-table th:last-child,
.brainlog-editor .ProseMirror .brainlog-task-table td:last-child {
  width: 8rem;
}

/* On a phone the fixed layout above has nothing to be fixed in: 48% of 360px
   for the task and 8rem for the status left "Assigned" and "Due" one letter
   per line. Let the columns be as wide as they need and scroll inside the
   widget instead. (display:block on the table is what makes it scroll; the
   row boxes inside still lay out as a table.) */
@media (max-width: 820px) {
  .brainlog-editor .ProseMirror .brainlog-task-table table {
    display: block;
    overflow-x: auto;
    table-layout: auto;
  }

  .brainlog-editor .ProseMirror .brainlog-task-table th {
    white-space: nowrap;
  }

  .brainlog-editor .ProseMirror .brainlog-task-table th:first-child,
  .brainlog-editor .ProseMirror .brainlog-task-table td:first-child {
    width: auto;
    min-width: 12rem;
  }

  .brainlog-editor .ProseMirror .brainlog-task-table th:last-child,
  .brainlog-editor .ProseMirror .brainlog-task-table td:last-child {
    width: auto;
  }
}

.brainlog-editor .ProseMirror .brainlog-task-table__task-content > p:first-child,
.brainlog-editor .ProseMirror .brainlog-task-table__task-content > p:last-child {
  margin-top: 0;
  margin-bottom: 0;
}

.brainlog-editor .ProseMirror .brainlog-task-table__field {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0.3rem;
  padding: 0.25rem 0.35rem;
  color: var(--editor-fg);
  background: transparent;
  font: inherit;
}

.brainlog-editor .ProseMirror .brainlog-task-table__field:focus {
  outline: 2px solid var(--editor-accent);
  outline-offset: 1px;
}

.brainlog-editor .ProseMirror .brainlog-task-table__token {
  display: none;
}

.brainlog-editor .ProseMirror-gapcursor {
  display: none;
  position: absolute;
  pointer-events: none;
}

.brainlog-editor .ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

.brainlog-editor .ProseMirror-gapcursor::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid var(--editor-accent);
  border-top-color: var(--editor-accent);
  animation: brainlog-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes brainlog-cursor-blink {
  to { visibility: hidden; }
}