/* markdown — rendered ToDo documents (js/markdown.js). Scoped by the md-* classes the
 * renderer emits, so it applies inside whatever container the page supplies. */

/* · the rendered document is where people read and copy from, so it is always selectable */
.md-doc { user-select: text; cursor: text; }
.md-doc button,
.md-doc input { user-select: none; cursor: pointer; }

/* · each source line of a paragraph or quote is its own row, which is also how it copies */
.md-p > .md-line { display: block; }

/* · a line open for editing keeps its rendered look; only a soft well says it is live */
.md-line.is-editing,
.md-pre.is-editing {
  outline: 0;
  border-radius: var(--r-sm);
  background: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-dim);
  caret-color: var(--accent);
}
.md-li > .md-line.is-editing { display: inline-block; min-width: 40%; }
.md-pre.is-editing { box-shadow: 0 0 0 2px var(--accent); }
.md-pre.is-editing code { display: block; outline: 0; min-height: 1.5em; }
.md-line.is-editing:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  pointer-events: none;
}

.md-h {
  margin: 1.1em 0 0.45em;
  color: var(--text);
  font-weight: 650;
  line-height: 1.3;
}
.md-h:first-child { margin-top: 0; }
h1.md-h { font-size: 1.6em; padding-bottom: 0.25em; border-bottom: 1px solid var(--line); }
h2.md-h { font-size: 1.35em; padding-bottom: 0.2em; border-bottom: 1px solid var(--line); }
h3.md-h { font-size: 1.15em; }
h4.md-h { font-size: 1em; }
h5.md-h { font-size: 0.95em; color: var(--text-2); }
h6.md-h { font-size: 0.9em; color: var(--text-3); }

.md-p {
  margin: 0 0 0.75em;
  color: var(--text);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.md-link {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-link:hover { color: var(--accent); }

.md-code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-hover);
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.md-pre {
  margin: 0 0 0.85em;
  padding: 10px 12px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-input);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  white-space: pre;
  tab-size: 2;
}
.md-pre code { font: inherit; }

.md-quote {
  margin: 0 0 0.85em;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line-2);
  color: var(--text-2);
}
.md-quote .md-p { color: inherit; margin-bottom: 0.4em; }
.md-quote .md-p:last-child { margin-bottom: 0; }

.md-hr {
  margin: 1.1em 0;
  border: 0;
  border-top: 1px solid var(--line-2);
}

.md-list {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
  color: var(--text);
  line-height: 1.5;
}
.md-list .md-list { margin: 0.15em 0 0; }
.md-li { margin: 0.15em 0; overflow-wrap: anywhere; }

.md-task {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2px 8px;
  /* · pulls the checkbox back into the gutter a bullet would occupy */
  margin: 0.1em 0 0.1em -1.25em;
  padding: 1px 0;
  list-style: none;
  border-radius: var(--r-sm);
}
.md-task:hover { background: var(--bg-hover); }

.md-check {
  flex: none;
  width: 14px;
  height: 14px;
  /* · centres the box on the first text line: 1.5em is the list's line-height */
  margin: calc((1.5em - 14px) / 2) 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.md-task-text {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.md-task-done {
  color: var(--text-3);
  text-decoration: line-through;
}

.md-promote,
.md-del-line {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 1.5em;
  padding: 0 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.md-task:hover > .md-promote,
.md-task:hover > .md-del-line,
.md-task:focus-within > .md-promote,
.md-task:focus-within > .md-del-line { opacity: 1; }
.md-promote:hover,
.md-promote:focus-visible { color: var(--accent-2); background: var(--bg-active); }
.md-del-line:hover,
.md-del-line:focus-visible { color: var(--danger); background: var(--danger-dim); }

/* · a nested list inside a task row has to drop below it, not sit beside the buttons */
.md-task > .md-list { flex-basis: 100%; }