/**
 * Flow editor: block container, inline-edit textarea variants, and table cells.
 */

.flow-editor {
  width: min(100%, 860px);
  margin-inline: auto;
  padding: clamp(1.15rem, 3vw, 2.35rem);
  color: var(--text);
  font-family: var(--ui-font);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.1rem);
  line-height: 1.75;
  text-align: start;
  user-select: text;
}

.flow-editor[dir="rtl"] {
  direction: rtl;
}

.flow-editor[dir="ltr"] {
  direction: ltr;
}

.flow-block {
  position: relative;
  margin-block: 0.1rem;
}

.flow-block:not(.is-active) {
  cursor: text;
}

.flow-block:not(.is-active):hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.flow-block.is-active {
  background: transparent;
  user-select: text;
}

.flow-block-preview.markdown-body {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.65rem;
  font-size: inherit;
  line-height: inherit;
  user-select: text;
}

.flow-block-preview.markdown-body * {
  user-select: text;
}

.flow-block-preview.markdown-body.is-empty {
  min-height: 0.65rem;
  padding-block: 0.15rem;
}

.flow-block-preview.markdown-body > :first-child {
  margin-top: 0.35rem;
}

.flow-block-preview.markdown-body > :last-child {
  margin-bottom: 0.35rem;
}

.flow-block-editor {
  display: block;
  width: 100%;
  min-height: 1.5em;
  resize: none;
  overflow: hidden;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  margin: 0;
  padding: 0.25rem 0.65rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: start;
  tab-size: 2;
  unicode-bidi: normal;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.flow-block-editor::placeholder {
  color: var(--muted);
}

.flow-block.is-active.kind-heading-1 .flow-block-editor {
  font-size: 2.15em;
  font-weight: 800;
  line-height: 1.2;
}

.flow-block.is-active.kind-heading-2 .flow-block-editor {
  font-size: 1.65em;
  font-weight: 800;
  line-height: 1.25;
}

.flow-block.is-active.kind-heading-3 .flow-block-editor {
  font-size: 1.35em;
  font-weight: 800;
  line-height: 1.35;
}

.flow-block.is-active.kind-heading-4 .flow-block-editor {
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.35;
}

.flow-block.is-active.kind-heading-5 .flow-block-editor,
.flow-block.is-active.kind-heading-6 .flow-block-editor {
  font-size: 1em;
  font-weight: 800;
  line-height: 1.35;
}

.flow-block.is-active.kind-heading-6 .flow-block-editor {
  color: var(--muted);
}

.flow-block.is-active.kind-blockquote .flow-block-editor {
  color: var(--muted);
}

.flow-block.is-active.kind-list .flow-block-editor {
  padding-inline-start: 1.45rem;
}

.flow-block.is-active.kind-code .flow-block-editor {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
  font-family: var(--mono-font);
  font-size: 0.9em;
  line-height: 1.65;
}

.flow-table-editor {
  padding: 0.25rem 0.65rem;
}

.flow-table-editor > table {
  margin-block: 0.8em;
}

.flow-table-cell {
  min-width: 2.5rem;
  min-height: 1.35em;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.flow-table-cell:focus-visible {
  border-radius: 3px;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.flow-empty {
  margin: 0;
  padding: 0.7rem 0.65rem;
  color: var(--muted);
}

.panes[data-mode="edit"] {
  grid-template-columns: minmax(0, 1fr);
}

.panes[data-mode="edit"] .preview-pane {
  display: none;
}

.panes[data-mode="preview"] {
  grid-template-columns: minmax(0, 1fr);
}

.panes[data-mode="preview"] .editor-pane {
  display: none;
}

.panes[data-mode="flow"] {
  grid-template-columns: minmax(0, 1fr);
}

.panes[data-mode="flow"] .editor-pane,
.panes[data-mode="flow"] .preview-pane {
  display: none;
}

.panes[data-mode="flow"] .flow-pane {
  display: block;
}