/* WYSIWYG markdown editor chrome. Typography is inherited from `.lotics-markdown`
   (markdown.css) — this file only covers the editing surface and ProseMirror. */

/* The frame around the DOCUMENT — the toolbar is a sibling above it. A softer
   radius than a control's, because it is a sheet of writing rather than a field. */
.md-editor {
  border: 1px solid rgba(228, 228, 231, 1);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
  /* The ProseMirror editable element is this node's only child and fills the line
     budget, so a click anywhere in the field focuses the editor. The budget is a
     FLOOR: lines × the input rung's leading at THIS width plus the content's own
     padding, read from the token rather than a JS width bucket
     (`constitution.md` §10). */
  display: flex;
  flex-direction: column;
  min-height: calc(var(--lotics-input-leading) * var(--lotics-markdown-editor-lines) + 16px);
}

/* The kit's field grammar: hover moves the BORDER, focus adds the RING. Literal
   rgba because this is plain CSS with no access to the tokens — the values mirror
   `--lotics-border-hover` and the 2px `--ring`, and move with them. */
.md-editor:hover {
  border-color: rgba(113, 113, 122, 1);
}

.md-editor:focus-within {
  box-shadow: 0 0 0 2px rgba(24, 24, 27, 1);
}

.md-editor[data-disabled="true"] {
  opacity: 0.6;
}

/* THE FIELD SURFACE. Everything above is the `document` default. Named
   explicitly rather than matched as "has a surface at all": `document` reaches
   the DOM too, so a bare `[data-surface]` selector would catch the sheet. */
.md-editor[data-surface="field"] {
  border-radius: 10px;
}

.md-editor[data-surface="field"] > .md-editor-content {
  padding-left: 8px;
  padding-right: 8px;
}

/* The two numbers the field surface moves are the KIT's: `CONTROL_RADIUS` (10)
   for the sheet's 16, and `CONTROL_TEXT_INSET` (9) for its 13, which is what puts
   the prose on the x of the plain-text field above it. Vertical padding stays. */

/* THE HOST PAINTS THE SURFACE — one box, one owner. `border-width: 0`, not a
   transparent colour: a transparent border still occupies its pixel, stacking the
   host's inset on a second one. */
.md-editor[data-seamless] {
  border-width: 0;
  background-color: transparent;
}

.md-editor[data-seamless]:focus-within {
  box-shadow: none;
}

.md-editor-content {
  flex: 1 1 auto;
  /* position:relative anchors the absolutely-positioned gap cursor. */
  position: relative;
  padding: 8px 12px;
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.md-editor-content .ProseMirror-selectednode {
  outline: 2px solid rgba(59, 130, 246, 0.6);
}

.md-editor-content > :first-child {
  padding-top: 0;
  margin-top: 0;
}

.md-editor-content > :last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Empty-document placeholder */

.md-editor-placeholder::before {
  content: attr(data-placeholder);
  color: rgba(161, 161, 170, 1);
  pointer-events: none;
  height: 0;
  float: left;
}

/* ProseMirror selection / gap cursor */

.ProseMirror[contenteditable="false"] {
  cursor: default;
}

.ProseMirror-hideselection *::selection {
  background: transparent;
}

.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 rgba(24, 24, 27, 1);
  animation: md-editor-blink 1.1s steps(2, start) infinite;
}

@keyframes md-editor-blink {
  to {
    visibility: hidden;
  }
}

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

/* Table editing (prosemirror-tables) */

.md-editor-content .tableWrapper {
  overflow-x: auto;
  margin: 4px 0;
}

.md-editor-content td,
.md-editor-content th {
  position: relative;
}

.md-editor-content .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.16);
  pointer-events: none;
  z-index: 2;
}

.md-editor-content .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: rgba(59, 130, 246, 1);
  pointer-events: none;
  z-index: 3;
}

.md-editor-content.resize-cursor {
  cursor: col-resize;
}