/* shared inline-WYSIWYG markdown editor styles — see md-editor.js */
.md-editor{
  outline:none;
  font-family:var(--font, inherit);
  font-size:14.5px;
  line-height:1.6;
  white-space:pre-wrap;
  word-wrap:break-word;
}
.md-line{ min-height:1.6em; }
.md-line.md-raw{ opacity:.7; }
.md-line.md-h1{ font-family:var(--font-display, inherit); font-size:1.6em; font-weight:700; margin:.3em 0; }
.md-line.md-h2{ font-family:var(--font-display, inherit); font-size:1.3em; font-weight:700; margin:.25em 0; }
.md-line.md-h3{ font-family:var(--font-display, inherit); font-size:1.1em; font-weight:700; margin:.2em 0; }
.md-line.md-quote{ border-left:3px solid var(--border); padding-left:10px; opacity:.85; font-style:italic; }
.md-line.md-ul{ padding-left:calc(1.4em + var(--indent, 0) * 1.6em); position:relative; }
.md-line.md-ul::before{ content:'\2022'; position:absolute; left:calc(.3em + var(--indent, 0) * 1.6em); opacity:.55; }
.md-line.md-ol{ padding-left:calc(1.6em + var(--indent, 0) * 1.6em); position:relative; }
.md-line.md-ol::before{ content:attr(data-num) '.'; position:absolute; left:calc(var(--indent, 0) * 1.6em); opacity:.55; }
.md-line.md-hr{ border-top:1px solid var(--border); margin:.6em 0; height:0; }
.md-line code{ background:rgba(127,127,127,.18); border-radius:4px; padding:1px 5px; font-family:ui-monospace, 'SF Mono', Consolas, monospace; font-size:.9em; }
.md-line.md-fence-marker{ height:6px; min-height:6px; background:rgba(127,127,127,.12); border-radius:3px; margin:2px 0; }
.md-line.md-table-sep{ height:1px; min-height:1px; background:var(--border); margin:2px 0; }
.md-line.md-table-row{ display:flex; gap:1px; margin:1px 0; }
.md-table-cell{
  flex:1 1 0;
  min-width:0;
  padding:4px 8px;
  background:rgba(127,127,127,.08);
  border-radius:3px;
  overflow-wrap:break-word;
}
.md-line.md-code-line{
  font-family:ui-monospace, 'SF Mono', Consolas, monospace;
  font-size:.9em;
  background:rgba(127,127,127,.1);
  padding:0 10px;
  white-space:pre;
}
.md-line strong{ font-weight:700; }
.md-line em{ font-style:italic; }
.md-line del{ text-decoration:line-through; opacity:.7; }
.md-line mark{ background:rgba(251,191,36,.35); color:inherit; border-radius:2px; padding:0 1px; }
.md-line.md-task{ padding-left:calc(1.4em + var(--indent, 0) * 1.6em); position:relative; }
.md-line.md-task-done{ opacity:.6; text-decoration:line-through; }
.md-checkbox{
  display:inline-block;
  width:13px;height:13px;
  border:1.5px solid var(--border);
  border-radius:3px;
  margin-right:7px;
  vertical-align:-2px;
  cursor:pointer;
  position:relative;
}
.md-checkbox.checked{ background:var(--accent); border-color:var(--accent); }
.md-checkbox.checked::after{
  content:'';
  position:absolute; left:3px; top:1px;
  width:4px; height:7px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* touch devices: the 13px checkbox box and single-line TOC entries are too small to tap
   reliably — grow the actual hit area (via an invisible oversized ::before) without changing
   how either looks on a mouse-driven desktop layout */
@media (pointer: coarse){
  .md-checkbox::before{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:34px; height:34px;
    transform:translate(-50%,-50%);
  }
  .md-toc-entry{ display:block; padding:6px 0; }
}

/* [TOC] block: a live, self-updating outline embedded in the document (Typora's convention).
   Rebuilt from the current headings every render — see renderLineDisplay in md-editor.js. */
.md-line.md-toc{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 14px;
  background:rgba(127,127,127,.08);
  border:1px solid var(--border);
  border-radius:8px;
}
.md-toc-entry{ cursor:pointer; opacity:.85; }
.md-toc-entry:hover{ opacity:1; text-decoration:underline; }
.md-toc-h1{ font-weight:700; }
.md-toc-h2{ padding-left:16px; font-size:.95em; }
.md-toc-h3{ padding-left:32px; font-size:.9em; opacity:.7; }
.md-toc-empty{ font-size:.9em; opacity:.6; font-style:italic; }

/* brief flash when a table-of-contents entry scrolls a heading into view */
.md-jump-flash{ animation:mdJumpFlash .9s ease-out; border-radius:4px; }
@keyframes mdJumpFlash{
  0%{ background:rgba(79,142,247,.35); }
  100%{ background:rgba(79,142,247,0); }
}
.md-line a{ color:var(--accent); text-decoration:underline; }

/* opt-in (add .md-title-mode to the editor container): Apple-Notes-style single content area
   where the first line doubles as the title, so it reads as one even before it's a real
   markdown heading. Once it *is* one (e.g. "# Title"), that heading's own size wins instead. */
.md-editor.md-title-mode > .md-line:first-child:not(.md-h1):not(.md-h2):not(.md-h3){
  font-family:var(--font-display, inherit);
  font-size:1.4em;
  font-weight:700;
  margin-bottom:.2em;
}