/* @research/editor — the editor's toolbar, link form and document.
 *
 * Colours come from custom properties each app sets (on :root, say) from its
 * own palette; the fallbacks are the browser's, so it is legible unthemed:
 *   --editor-bg       background of the editor and its toolbar
 *   --editor-fg       text
 *   --editor-muted    placeholder, quotes, done to-dos
 *   --editor-rule     borders
 *   --editor-accent   focus, links, pressed buttons
 *   --editor-sticky-top  where the toolbar sticks (below an app's own fixed bar)
 *
 * Selectors are scoped to .note-editor, so they outrank an app's element-wide
 * rules (`input { … }`, `pre { … }`) without !important. An app with cascade
 * layers imports this into a layer of its own, below the one it themes from.
 */

.note-editor {
  border: 1px solid var(--editor-rule, GrayText);
  border-radius: 4px;
  background: var(--editor-bg, Canvas);
  color: var(--editor-fg, CanvasText);

  &:focus-within { border-color: var(--editor-accent, Highlight); }
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.note-toolbar {
  position: sticky;
  top: var(--editor-sticky-top, 0);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 4px;
  background: var(--editor-bg, Canvas);
  border-block-end: 1px solid var(--editor-rule, GrayText);
  border-start-start-radius: 4px;
  border-start-end-radius: 4px;
}

.note-editor.is-compact .note-toolbar { position: static; gap: 2px 4px; padding: 2px; }

.note-toolbar-group { display: flex; gap: 2px; }

.note-editor .note-tool {
  min-width: 28px;
  height: 28px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--editor-fg, CanvasText);
  font: inherit;
  font-size: 0.75em;
  line-height: 1;
  cursor: pointer;

  &:hover { background: color-mix(in srgb, var(--editor-fg, CanvasText) 8%, transparent); }
  &:focus-visible { outline: 1px solid var(--editor-accent, Highlight); outline-offset: -1px; }
  &[aria-pressed="true"] {
    background: color-mix(in srgb, var(--editor-accent, Highlight) 16%, transparent);
    color: var(--editor-accent, Highlight);
  }
  &:disabled { opacity: 0.35; cursor: default; background: transparent; }
  &[aria-label="Bold"] { font-weight: 700; }
  &[aria-label="Italic"] { font-style: italic; font-family: Georgia, serif; }
  &[aria-label="Strikethrough"] { text-decoration: line-through; }
}

.note-editor.is-compact .note-tool { min-width: 24px; height: 24px; padding: 0 4px; }

/* ── Link form ──────────────────────────────────────────────────────────── */

.note-editor .note-link-form {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 6px;
  border-block-end: 1px solid var(--editor-rule, GrayText);
  font-size: 0.75em;

  &[hidden] { display: none; }

  & input {
    flex: 1;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 4px 6px;
    border: 1px solid var(--editor-rule, GrayText);
    border-radius: 3px;
    background: var(--editor-bg, Canvas);
    color: var(--editor-fg, CanvasText);
    font: inherit;
    outline: none;

    &:focus { border-color: var(--editor-accent, Highlight); }
  }
  & button {
    margin: 0;
    padding: 4px 8px;
    border: 1px solid var(--editor-rule, GrayText);
    border-radius: 3px;
    background: transparent;
    color: var(--editor-fg, CanvasText);
    font: inherit;
    cursor: pointer;
  }
}

/* ── Document ───────────────────────────────────────────────────────────── */

.note-editor-content .ProseMirror {
  min-height: 7em;
  padding: 4px 10px;
  color: var(--editor-fg, CanvasText);
  font-size: 0.8em;
  line-height: 1.5;
  outline: none;

  & > :first-child { margin-block-start: 0.5em; }
}

/* Text shown formatted rather than edited (renderMarkdown's output, put in an
   element with this class). The document rules below are shared with the
   editor, so what was written looks the same when read. */
.note-rendered {
  color: var(--editor-fg, CanvasText);
  line-height: 1.5;
  overflow-wrap: anywhere;

  & > :first-child { margin-block-start: 0; }
  & > :last-child { margin-block-end: 0; }
  /* A single newline is a line break, as in the editor (see tidyMarkdown). */
  & :is(p, li, td, th) { white-space: pre-line; }
}

:is(.note-editor-content .ProseMirror, .note-rendered) {
  & p { margin-block: 0.5em; }
  /* Weights and markers set outright: CSS resets such as Tailwind's take them away. */
  & :is(h2, h3) { margin-block: 0.8em 0.4em; line-height: 1.25; font-weight: 600; }
  & h2 { font-size: 1.3em; }
  & h3 { font-size: 1.1em; }
  & strong { font-weight: 700; }
  & em { font-style: italic; }
  & a { color: var(--editor-accent, LinkText); text-decoration: underline; }
  & :is(ul, ol) { margin-block: 0.5em; padding-inline-start: 1.4em; }
  & ul { list-style: disc; }
  & ol { list-style: decimal; }
  & blockquote {
    margin-inline: 0;
    padding-inline-start: 1em;
    border-inline-start: 3px solid var(--editor-rule, GrayText);
    color: var(--editor-muted, GrayText);
  }
  & code {
    padding: 0.1em 0.3em;
    border-radius: 3px;
    background: color-mix(in srgb, var(--editor-fg, CanvasText) 8%, transparent);
    color: inherit;
    font-size: 0.9em;
  }
  & pre {
    margin-block: 0.5em;
    padding: 0.6em 0.8em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--editor-fg, CanvasText) 6%, transparent);
    color: var(--editor-fg, CanvasText);
    overflow-x: auto;

    & code { padding: 0; background: none; color: inherit; }
  }
  & hr { border: 0; border-block-start: 1px solid var(--editor-rule, GrayText); }

  /* A to-do is <li><label><input type=checkbox><span/></label><div>…</div></li>;
     the label and input are reset from whatever an app gives every label and input. */
  & ul[data-type="taskList"] {
    list-style: none;
    padding-inline-start: 0.2em;

    & li { display: flex; gap: 0.5em; align-items: baseline; }
    & li > label { flex: none; display: inline-flex; width: auto; margin: 0; padding: 0; }
    & li > label input {
      width: auto;
      margin: 0;
      padding: 0;
      border: 0;
      accent-color: var(--editor-accent, Highlight);
      cursor: pointer;
    }
    & li > div { flex: 1; min-width: 0; }
    & li > div > p { margin: 0; }
    & li[data-checked="true"] > div { color: var(--editor-muted, GrayText); text-decoration: line-through; }
  }

  & table {
    border-collapse: collapse;
    width: 100%;
    margin-block: 0.5em;
    table-layout: fixed;
  }
  & :is(th, td) {
    position: relative;
    padding: 4px 6px;
    border: 1px solid var(--editor-rule, GrayText);
    vertical-align: top;

    & > p { margin: 0; }
  }
  & th { background: color-mix(in srgb, var(--editor-fg, CanvasText) 5%, transparent); text-align: start; }
  & .selectedCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--editor-accent, Highlight) 14%, transparent);
    pointer-events: none;
  }

  & p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: inline-start;
    height: 0;
    color: var(--editor-muted, GrayText);
    pointer-events: none;
  }
}

@media print {
  .note-toolbar, .note-link-form { display: none; }
  .note-editor { border: 0; }
}