/* Formatted text: the display (.md) and the editor (.ed, see scripts/editor). */
.md{overflow-wrap:anywhere}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p,.md ul,.md ol,.md blockquote,.md pre{margin:0 0 .5em}
.md ul,.md ol,.ed .ProseMirror ul,.ed .ProseMirror ol{padding-left:1.4em}
.md li>p{margin:0}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{font:700 1.05em/1.3 var(--font);margin:.6em 0 .25em}
.md blockquote,.ed .ProseMirror blockquote{border-left:3px solid var(--line);padding-left:10px;margin-left:0;color:var(--ink2)}
.md code,.ed .ProseMirror code{background:var(--wash);padding:0 3px;border-radius:3px;font-size:.92em}
.md pre,.ed .ProseMirror pre{background:var(--wash);padding:6px 9px;border-radius:var(--r-ctl);overflow-x:auto;white-space:pre-wrap}
.md pre code,.ed .ProseMirror pre code{background:none;padding:0}
.md hr,.ed .ProseMirror hr{border:0;border-top:1px solid var(--line);margin:.6em 0}

/* The textarea stays in the form: reachable for the browser's validation, invisible to people */
textarea.ed-src{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;pointer-events:none;resize:none}
.ed{position:relative;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--s2);color:var(--ink);min-width:0}
.ed:focus-within{outline:2px solid var(--accent);outline-offset:-1px}
/* The bar is smaller than the text it serves: it only shows while typing and floats, so nothing jumps */
.ed-bar{display:none;gap:1px;padding:1px;position:absolute;right:4px;bottom:100%;margin-bottom:-1px;z-index:5;background:var(--s2);border:1px solid var(--line);border-radius:var(--r-ctl) var(--r-ctl) 0 0}
.ed:focus-within .ed-bar{display:flex}
.ed-bar button{width:22px;height:20px;min-height:0;margin:0;padding:0;border:0;border-radius:3px;background:none;color:var(--ink);font:12px/1 var(--font);cursor:pointer;touch-action:manipulation}
.ed-bar button:hover{background:var(--wash)}
.ed-bar button[aria-pressed=true]{background:var(--brand);color:var(--on-brand)}
.ed-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ed-b{font-weight:700!important}.ed-i{font-style:italic!important}.ed-s{text-decoration:line-through}.ed-l{font-size:14px!important}
.ed .ProseMirror{min-height:30px;max-height:50vh;overflow-y:auto;padding:6px 9px;white-space:pre-wrap;white-space:break-spaces;overflow-wrap:anywhere;outline:0;font-variant-ligatures:none}
.ed .ProseMirror p,.ed .ProseMirror ul,.ed .ProseMirror ol,.ed .ProseMirror blockquote,.ed .ProseMirror pre{margin:0 0 .5em}
.ed .ProseMirror>:last-child{margin-bottom:0}
.ed .ProseMirror li>p{margin:0}
.ed .ProseMirror h1,.ed .ProseMirror h2,.ed .ProseMirror h3,.ed .ProseMirror h4,.ed .ProseMirror h5,.ed .ProseMirror h6{font:700 1.05em/1.3 var(--font);margin:.6em 0 .25em}
.ed .ProseMirror-hideselection *::selection{background:transparent}
.ed .ProseMirror-selectednode{outline:2px solid var(--accent)}
.ed-empty .ProseMirror::before{content:attr(data-placeholder);color:var(--ink2);position:absolute;pointer-events:none}
fieldset:disabled .ed{background:none}
fieldset:disabled .ed .ProseMirror{min-height:0;color:var(--ink2)}
@media (pointer:coarse),(max-width:720px){
  /* Fingers need the big targets: under the text, so it doesn't hide what is being typed */
  .ed-bar{gap:4px;position:static;margin:0;padding:3px;border-width:1px 0 0;border-radius:0;order:1}
  .ed:focus-within{display:flex;flex-direction:column}
  .ed-bar button{width:44px;height:44px;font-size:17px}
  .ed .ProseMirror{font-size:16px}
}