/**
 * Typora-like editor: a single contenteditable that renders markdown inline.
 * Syntax markers (.md-mark) are hidden until the caret enters their span,
 * at which point they become visible at 50% opacity for editing.
 *
 * Used by: src/editor/typora-core.js, src/editor/typora-render.js,
 *          src/editor/typora-interaction.js
 */
.typora-pane {
  display: none;
  overflow: auto;
  background: var(--panel);
}
.panes[data-mode="typora"] {
  grid-template-columns: minmax(0, 1fr);
}
.panes[data-mode="typora"] .editor-pane,
.panes[data-mode="typora"] .preview-pane,
.panes[data-mode="typora"] .flow-pane {
  display: none;
}
.panes[data-mode="typora"] .typora-pane {
  display: block;
}
.typora-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.85;
  text-align: start;
  outline: none; position: relative;
  unicode-bidi: normal; overflow-wrap: anywhere; word-break: break-word;
  min-height: calc(100vh - 9rem);
  /* Prevent iOS Safari's native long-press callout so our custom context
     menu can take over via the `contextmenu` event + long-press handler. */
  -webkit-touch-callout: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.typora-editor[dir="rtl"] {
  direction: rtl;
}
.typora-editor[dir="ltr"] {
  direction: ltr;
}

.typora-editor .md-text-run[dir="ltr"] { font-family: var(--latin-font); }.typora-editor .md-text-run { unicode-bidi: isolate; }
.typora-editor [data-md-block] {
  margin-block: 0.55em;
  direction: inherit;
  unicode-bidi: normal;
}

.typora-editor [data-md-block]:first-child {
  margin-top: 0;
}

/* Hide all syntax markers by default. */
.typora-editor .md-mark {
  display: none;
  white-space: pre;
}

/* Reveal markers when the caret is inside their owning span/block. */
.typora-editor .md-inline.is-caret > .md-mark,
.typora-editor [data-md-block].is-caret > .md-mark {
  display: inline;
  opacity: 0.5;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: inherit;
}

/* Root placeholder for the empty startup draft. */
.typora-editor.is-empty::before {
  content: attr(data-placeholder);
  position: absolute; inset-block-start: clamp(1.15rem, 3vw, 2.35rem); inset-inline-start: clamp(1.15rem, 3vw, 2.35rem);
  color: var(--muted); pointer-events: none;
}

/* ---------- Inline styles ---------- */

.typora-editor .md-bold { font-weight: 700; }
.typora-editor .md-italic { font-style: italic; }
.typora-editor .md-strike { text-decoration: line-through; }

.typora-editor .md-highlight {
  background: color-mix(in srgb, #facc15 70%, transparent);
  padding-block: 0.05em;
  border-radius: 2px;
}

.typora-editor .md-code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, monospace);
  background: var(--subtle);
  padding: 0 0.3em;
  border-radius: 3px;
  font-size: 0.92em;
}

.typora-editor .md-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.typora-editor .md-image { display: inline-block; max-width: min(100%, 32rem); vertical-align: top; overflow-wrap: anywhere; }
.typora-editor .md-image-source { display: none; white-space: normal; overflow-wrap: anywhere; }
.typora-editor .md-image-preview { display: block; max-width: min(100%, 28rem); max-height: 20rem; object-fit: contain; border-radius: 8px; margin-block: 0.35em; }
.typora-editor .md-image.is-caret .md-image-source { display: inline; }
.typora-editor .md-image.is-caret .md-image-preview { display: none; }

/* ---------- Headings ---------- */

.typora-editor h1,
.typora-editor h2,
.typora-editor h3,
.typora-editor h4,
.typora-editor h5,
.typora-editor h6 {
  margin-block: 0.85em 0.4em;
  line-height: 1.3;
  font-weight: 800;
}

.typora-editor h1 { font-size: 2.15em; }
.typora-editor h2 { font-size: 1.65em; }
.typora-editor h3 { font-size: 1.35em; }
.typora-editor h4 { font-size: 1.15em; }
.typora-editor h5 { font-size: 1em; }
.typora-editor h6 { font-size: 1em; color: var(--muted); }

/* ---------- Blockquote ---------- */

.typora-editor blockquote {
  margin-block: 0.55em;
  padding-inline-start: 1em;
  border-inline-start: 3px solid var(--line);
  color: var(--muted);
}

/* ---------- Horizontal rule ---------- */

.typora-editor hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 1.2em;
}

.typora-editor [data-md-block="hr"].is-caret {
  display: block;
  border: 0;
  text-align: center;
  color: var(--muted);
  opacity: 0.6;
}

/* ---------- Lists ---------- */

.typora-editor [data-md-block="list-item"] {
  display: list-item;
  margin-inline-start: 1.5em;
  list-style: disc inside;
}

.typora-editor [data-md-block="list-item"][data-md-ordered="true"] {
  list-style: decimal inside;
}

.typora-editor [data-md-block="list-item"].is-caret {
  list-style: none;
  margin-inline-start: 0;
}

.typora-editor [data-md-block="list-item"][data-md-task="true"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  list-style: none;
}

.typora-editor [data-md-block="list-item"][data-md-task="true"].is-caret {
  display: block;
}

.typora-editor .md-task-rendered {
  display: inline-grid;
  place-items: center;
  min-height: 1.6em;
}

.typora-editor .md-task-rendered input {
  width: 1rem;
  height: 1rem;
  margin: 0.34em 0 0;
  accent-color: var(--accent);
}

.typora-editor .md-task-source {
  display: none;
}

.typora-editor [data-md-block="list-item"][data-md-task="true"].is-caret .md-task-rendered {
  display: none;
}

.typora-editor [data-md-block="list-item"][data-md-task="true"].is-caret .md-task-source {
  display: inline;
}

.typora-editor [data-md-block="list-item"][data-md-task="true"].is-caret .md-task-source .md-mark {
  display: inline;
  opacity: 0.5;
  color: var(--muted);
}

/* ---------- Tables ---------- */

.typora-editor [data-md-block="table"] {
  margin-block: 1em;
}

.typora-editor [data-md-block="table"] .md-source {
  display: none;
  margin: 0;
  padding: 0.75em 0.85em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--subtle);
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.9em;
  line-height: 1.65;
  overflow-x: auto; max-width: 100%; box-sizing: border-box;
  white-space: pre;
}

.typora-editor [data-md-block="table"] .md-rendered {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  cursor: text;
}

.typora-editor table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.typora-editor thead,
.typora-editor tr:nth-child(2n) {
  background: var(--subtle);
}

.typora-editor th,
.typora-editor td {
  border: 1px solid var(--line);
  padding: 0.42rem 0.75rem;
  text-align: start;
  vertical-align: top;
}

.typora-editor th {
  font-weight: 800;
}

.typora-editor .md-table-cell {
  min-height: 1.5em;
  outline: none;
}

.typora-editor .md-table-cell:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
  border-radius: 3px;
}

/* ---------- Math (inline + block) ---------- */

/* Inline math: hide the raw source by default, show the KaTeX render. */
.typora-editor .md-math .md-source {
  display: none;
}

.typora-editor .md-math .md-rendered {
  display: inline-block;
  cursor: text;
  vertical-align: middle;
}

.typora-editor .md-math.is-caret .md-source {
  display: inline;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, monospace);
  color: var(--text);
}

.typora-editor .md-math.is-caret .md-rendered {
  display: none;
}

/* Block math: stand-alone block centered on its own line. */
.typora-editor [data-md-block="math"] {
  margin-block: 1em;
  text-align: center;
}

.typora-editor [data-md-block="math"] .md-source {
  display: none;
  text-align: start;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, monospace);
  padding: 0.65em 0.85em;
  background: var(--subtle);
  border-radius: 8px;
  white-space: pre-wrap;
}

.typora-editor [data-md-block="math"] .md-rendered {
  display: block;
  cursor: text;
  padding: 0.5em;
}

.typora-editor [data-md-block="math"].is-caret .md-source {
  display: block;
}

.typora-editor [data-md-block="math"].is-caret .md-rendered {
  display: none;
}

/* ---------- Code blocks ---------- */

.typora-editor pre[data-md-block="code"] {
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: left;
  margin-block: 0.8em;
  padding: 0.85em 1em;
  background: var(--subtle);
  border-radius: 8px;
  overflow-x: auto; max-width: 100%; box-sizing: border-box;
  font-family: var(--mono-font, ui-monospace, SFMono-Regular, monospace); font-variant-ligatures: none; tab-size: 2;
  font-size: 0.92em;
  line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}

.typora-editor pre[data-md-block="code"] .md-mark {
  color: var(--muted);
}

.typora-editor pre[data-md-block="code"].is-caret .md-mark {
  display: inline;
  opacity: 0.7;
}

/* ---------- Responsive (mobile + tablet) ---------- */

@media (max-width: 740px) {
  .typora-editor {
    padding: 0.95rem 0.85rem;
    font-size: 1rem;
    line-height: 1.7;
    min-height: calc(100vh - 8rem);
  }

  .typora-editor [data-md-block="math"] .md-source,
  .typora-editor .md-math.is-caret .md-source {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .typora-editor [data-md-block="math"] .md-rendered {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .typora-editor pre[data-md-block="code"] {
    font-size: 0.86em;
  }
}

@media (max-width: 520px) {
  .typora-editor {
    padding: 0.75rem 0.7rem;
    font-size: 0.98rem;
  }

  .typora-editor h1 { font-size: 1.85em; }
  .typora-editor h2 { font-size: 1.45em; }
  .typora-editor h3 { font-size: 1.22em; }
}