/* The editor's styles: GraphNotes' EditorWeb/src/editor.html (b99f58c), verbatim
   except the page rules, which app.css owns. */
:root {
    --fg: #1c1c1e;
    --bg: #ffffff;
    --muted: #6b6b70;
    --rule: #d8d8dc;
    --header-bg: #f2f2f7;
    --accent: #0a84ff;
    --serif: "Iowan Old Style", "Palatino", Georgia, serif;
    --sans: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
    --mono: "SF Mono", ui-monospace, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --fg: #f2f2f7; --bg: #1c1c1e; --muted: #98989f;
      --rule: #3a3a3c; --header-bg: #2c2c2e;
    }
  }
  * { -webkit-tap-highlight-color: transparent; }
  .ProseMirror {
    padding: 28px 24px 120px;
    outline: none;
    font-size: 17px;
    line-height: 1.55;
    caret-color: var(--accent);
  }
  .ProseMirror > * + * { margin-top: 0.75em; }
  .ProseMirror h1 { font-family: var(--serif); font-size: 1.9em; line-height: 1.2; margin-top: 1.1em; }
  .ProseMirror h2 { font-family: var(--serif); font-size: 1.45em; line-height: 1.25; margin-top: 1em; }
  .ProseMirror h3 { font-size: 1.15em; font-weight: 650; margin-top: 0.9em; }
  .ProseMirror p:empty::before { content: ""; display: inline-block; }
  .ProseMirror code {
    font-family: var(--mono); font-size: 0.9em;
    background: var(--header-bg); padding: 0.1em 0.3em; border-radius: 4px;
  }
  .ProseMirror ul, .ProseMirror ol { padding-left: 1.4em; }

  /* Tables: the feature that decided the whole editor choice. */
  .ProseMirror table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    margin: 1em 0;
    overflow: hidden;
    font-size: 15px;
  }
  .ProseMirror th, .ProseMirror td {
    border: 1px solid var(--rule);
    padding: 7px 10px;
    vertical-align: top;
    box-sizing: border-box;
    position: relative;
    min-width: 1em;
  }
  .ProseMirror th {
    background: var(--header-bg);
    font-weight: 600;
    text-align: left;
  }
  .ProseMirror th p, .ProseMirror td p { margin: 0; }
  .ProseMirror .selectedCell::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(10, 132, 255, 0.16); pointer-events: none;
  }
  .ProseMirror .column-resize-handle {
    position: absolute; right: -2px; top: 0; bottom: 0; width: 4px;
    background: var(--accent); pointer-events: none;
  }
  .ProseMirror .tableWrapper { overflow-x: auto; }

  /* OpenDoc (plans/05-opendoc-on-ipad.md §5). */
  .ProseMirror > [data-od-blanks] { margin-top: 1.1em; }
  .ProseMirror .od-bullet { position: relative; padding-left: 1.3em; }
  .ProseMirror .od-bullet::before { content: "•"; position: absolute; left: 0.25em; color: var(--muted); }
  .ProseMirror .od-bullet[data-indent="1"] { margin-left: 1.3em; }
  .ProseMirror .od-bullet[data-indent="1"]::before { content: "◦"; }
  .ProseMirror .od-bullet[data-indent="2"] { margin-left: 2.6em; }
  .ProseMirror .od-bullet[data-indent="2"]::before { content: "▪"; font-size: 0.8em; top: 0.2em; }
  .ProseMirror > * + .od-bullet:not([data-od-blanks]) { margin-top: 0.15em; }
  .ProseMirror .od-image { display: block; max-width: 100%; height: auto; border-radius: 6px; }
  .ProseMirror .od-part {
    border: 1px dashed var(--rule); border-radius: 10px;
    padding: 10px 14px; background: var(--header-bg); user-select: none;
  }
  .ProseMirror .od-part-label { font-weight: 600; }
  .ProseMirror .od-part-header { font-size: 0.9em; word-break: break-word; }
  .ProseMirror .od-part-detail { color: var(--muted); font-weight: normal; }
  .ProseMirror .od-part-items { margin-top: 8px; border-top: 1px solid var(--rule); max-height: 240px; overflow-y: auto; }
  .ProseMirror .od-part-item { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.85em; border-bottom: 1px solid var(--rule); }
  .ProseMirror .od-part-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ProseMirror .od-part-item-detail { color: var(--muted); white-space: nowrap; }
  .ProseMirror .od-part-actions { margin-top: 8px; }
  .ProseMirror .od-part-disclosure {
    font: inherit; background: none; border: none; color: var(--muted);
    padding: 0 6px 0 0; cursor: pointer; width: 1.4em;
  }
  .ProseMirror .od-part-items { overflow-y: auto; }
  .ProseMirror .od-part-resize {
    height: 14px; margin: 4px -14px -10px; cursor: ns-resize; touch-action: none;
    background: linear-gradient(var(--rule), var(--rule)) center / 36px 3px no-repeat;
  }
  .ProseMirror .od-part-link { cursor: pointer; color: var(--accent); justify-content: flex-start; }
  .ProseMirror .od-part-open { cursor: pointer; }
  .ProseMirror .od-part-open .od-part-item-name { color: var(--accent); }
  .ProseMirror .od-part-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
  .ProseMirror .od-part-thumb { margin: 0; font-size: 0.75em; color: var(--muted); }
  .ProseMirror .od-part-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
  .ProseMirror .od-part-thumb figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ProseMirror .od-part-figure { margin-top: 8px; }
  .ProseMirror .od-part-figure img { max-width: 100%; border-radius: 6px; background: #fff; display: block; }
  .ProseMirror .od-part-action {
    font: inherit; font-size: 0.85em; color: var(--accent); background: none;
    border: 1px solid var(--rule); border-radius: 8px; padding: 4px 10px;
  }
  .ProseMirror .od-part.ProseMirror-selectednode { outline: 2px solid var(--accent); }
  .ProseMirror .od-link { color: var(--accent); text-decoration: underline; }
  .ProseMirror .od-agent-note { margin: 2px 0; line-height: 1; }
  .ProseMirror .od-agent-note-chip {
    display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px;
    font-family: var(--sans); color: var(--muted); background: var(--header-bg); user-select: none;
  }
  .ProseMirror .od-agent-note.ProseMirror-selectednode .od-agent-note-chip { outline: 2px solid var(--accent); }
  .od-color-red { color: #d70015; }
  .od-color-amber { color: #b25000; }
  .od-color-green { color: #248a3d; }
  .od-color-teal { color: #0a7d8c; }
  .od-color-blue { color: #0040dd; }
  .od-color-purple { color: #8944ab; }
  .od-color-graphite { color: #6e6e73; }
  @media (prefers-color-scheme: dark) {
    .od-color-red { color: #ff6961; }
    .od-color-amber { color: #ffb340; }
    .od-color-green { color: #30db5b; }
    .od-color-teal { color: #5de6ff; }
    .od-color-blue { color: #409cff; }
    .od-color-purple { color: #da8fff; }
    .od-color-graphite { color: #aeaeb2; }
  }