/* Живая разметка: текст выглядит так, как размечен.
 *
 * Правило, которому подчинены все размеры: символы разметки НЕ исчезают и НЕ меняют
 * ширину строки. Они приглушены цветом. Если бы «**» пропадали при вводе, текст
 * прыгал бы под курсором, а вернуть разметку было бы нечем.
 */

.ed {
  flex: 1; outline: none; overflow: auto;
  padding: 30px 34px;
  font: 17px/1.72 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  caret-color: var(--accent);
  white-space: pre-wrap;
  word-break: break-word;
}
body.zen .ed {
  max-width: 760px; margin: 0 auto;
  padding: 9vh 20px 30vh; font-size: 19px; line-height: 1.8;
}

.ln { min-height: 1.72em; }

/* знаки разметки: видны, но не спорят с текстом */
.md { color: var(--dim); opacity: .45; }

/* заголовки */
.ln.h1 { font-size: 1.72em; font-weight: 700; line-height: 1.3; margin: .5em 0 .1em; }
.ln.h2 { font-size: 1.4em;  font-weight: 700; line-height: 1.35; margin: .5em 0 .1em; }
.ln.h3 { font-size: 1.18em; font-weight: 700; margin: .4em 0 .1em; }
.ln.h4 { font-size: 1.05em; font-weight: 700; }
.ln.h5, .ln.h6 { font-size: 1em; font-weight: 700; color: var(--dim); }
.ln.h1 .md, .ln.h2 .md, .ln.h3 .md { font-weight: 400; }

/* начертания */
.b { font-weight: 700; }
.i { font-style: italic; }
.b.i { font-weight: 700; font-style: italic; }
.strike { text-decoration: line-through; opacity: .6; }
.mark { background: var(--sel); border-radius: 3px; }
.code {
  background: var(--sel); border-radius: 4px; padding: 0 3px;
  font-size: .95em;
}
.link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.url { color: var(--dim); opacity: .55; font-size: .92em; }
.img { color: var(--accent); }

/* цитата */
.ln.quote { color: var(--dim); font-style: italic; }

/* разделитель — рисуем чертой под строкой, сами дефисы остаются видны */
.ln.hr { position: relative; color: var(--dim); }
.ln.hr::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line);
}

/* блок кода */
.ln.fence {
  background: var(--sel); font-size: .95em;
  padding-left: 8px; border-left: 2px solid var(--line);
}

/* списки: отступ по уровню вложенности, маркер вместо дефиса */
.ln.li { padding-left: 1.4em; text-indent: -1.4em; }
.ln.ind1 { padding-left: 3.2em; text-indent: -1.4em; }
.ln.ind2 { padding-left: 5em;   text-indent: -1.4em; }
.ln.ind3 { padding-left: 6.8em; text-indent: -1.4em; }
.ln.ind4 { padding-left: 8.6em; text-indent: -1.4em; }
/* Дефис списка и есть маркер: красим его, а не рисуем второй значок рядом —
   текст в поле обязан совпадать с файлом. */
.bullet { color: var(--accent); opacity: .8; font-weight: 700; }
.num { color: var(--accent); opacity: .75; }

/* задачи: сделанное бледнее и зачёркнуто — видно, что осталось */
.box { color: var(--accent); font-weight: 700; }
.ln.todo.done { opacity: .45; text-decoration: line-through; }
.ln.todo.done .box { color: var(--dim); }

/* таблица */
.ln.table { font-size: .95em; color: var(--ink); }