/* What's inside a note: text, lists, checklists, colours, tables, sections, attachments. */

.editor {
  flex: 1;
  min-width: 0;
  padding: 18px 22px 64px;
  overflow-y: auto;
  outline: none;
  color: var(--fg);
  font: 400 12px/1.6 var(--font-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
  /* the block cursor (caret.js) is drawn instead of the thin native one */
  caret-color: transparent;
}

.editor.is-empty::before {
  position: absolute;
  color: var(--muted);
  content: attr(data-placeholder);
  pointer-events: none;
}

/* the block cursor sits at the start of an empty page: move the hint clear of it */
.editor.is-empty:focus::before { margin-left: 12px; }

/* bold reads clearly heavier than the body text */
.editor b,
.editor strong { font-weight: 800; -webkit-text-stroke: .012em currentColor; }

/* Colours and alignment are stored as data attributes; the CSP blocks style="" in notes. */
.editor [data-tc="red"] { color: var(--tc-red); }
.editor [data-tc="orange"] { color: var(--tc-orange); }
.editor [data-tc="green"] { color: var(--tc-green); }
.editor [data-tc="blue"] { color: var(--tc-blue); }
.editor [data-tc="purple"] { color: var(--tc-purple); }
.editor [data-tc="gray"] { color: var(--tc-gray); }
.editor [data-hl="yellow"] { background-color: var(--hl-yellow); }
.editor [data-hl="green"] { background-color: var(--hl-green); }
.editor [data-hl="blue"] { background-color: var(--hl-blue); }
.editor [data-hl="pink"] { background-color: var(--hl-pink); }
.editor [data-hl="orange"] { background-color: var(--hl-orange); }
.editor [data-align="center"] { text-align: center; }
.editor [data-align="right"] { text-align: right; }
.editor [data-align] li,
.editor li[data-align] { list-style-position: inside; }

/* Lists: bullet style by depth, then loop */
.editor ul,
.editor ol { margin: 2px 0; padding-left: 26px; }
.editor li::marker { color: var(--muted); }
.editor ul { list-style-type: disc; }
.editor ul ul { list-style-type: circle; }
.editor ul ul ul { list-style-type: square; }
.editor ul ul ul ul { list-style-type: "◆  "; }
.editor ul ul ul ul ul { list-style-type: disc; }
.editor ul ul ul ul ul ul { list-style-type: circle; }
.editor ul ul ul ul ul ul ul { list-style-type: square; }
.editor ul ul ul ul ul ul ul ul { list-style-type: "◆  "; }
.editor ol { list-style-type: decimal; }
.editor ol ol { list-style-type: lower-alpha; }
.editor ol ol ol { list-style-type: lower-roman; }
.editor ol ol ol ol { list-style-type: decimal; }
.editor ul.dash,
.editor ul.dash ul { list-style-type: "–  "; }

/* Checklist items: the box sits where the bullet would. The tick is drawn with borders (no images). */
.editor li[data-check] { position: relative; list-style: none; }

.editor li[data-check]::before {
  position: absolute;
  top: .3em;
  left: -21px;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--muted);
  border-radius: 2px;
  background: var(--sheet);
  content: "";
  cursor: pointer;
}

.editor li[data-check][data-checked]::before { border-color: var(--accent); background: var(--accent) var(--check-img) center / contain no-repeat; }

.editor li[data-check][data-checked] { color: var(--muted); text-decoration: line-through; }

.editor hr { height: 0; margin: 12px 0; border: none; border-top: 1px dashed var(--muted); }

/* Tables */
.editor table.ntable {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 6px 0;
  overflow-x: auto;
  border-collapse: collapse;
  white-space: normal;
}

.editor table.ntable td {
  box-sizing: content-box;
  min-width: 6ch;
  padding: 3px 10px;
  border: 1px solid var(--tline);
  vertical-align: top;
  white-space: pre-wrap;
}

.editor table.ntable[data-head] tr:first-child td {
  border-bottom-width: 2px;
  background: var(--tab);
  font-weight: 600;
}

/* Sections */
/* a folded section is exactly one line tall, so sections can stack one per line */
.editor .fold { margin: 0; padding: 0; line-height: 1.6; white-space: normal; }

.editor .fold-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
  height: 1.6em;
  padding: 0 2px 0 8px;
  border: 1px solid var(--tedge);
  border-bottom-width: 2px;
  border-radius: 2px;
  background: var(--tab);
  color: var(--fg);
  line-height: 1;
  vertical-align: top;
  user-select: none;
  transition: border-color .12s;
}

@media (hover: hover) {
  .editor .fold-head:hover { border-color: var(--accent); }
  .editor .fold-more:hover { color: var(--accent); }
}

.editor .fold[data-open] > .fold-head { border-color: var(--accent); background: var(--sel-bg); }
.editor .fold-tw { display: inline-block; color: var(--accent); transition: transform .12s; }
.editor .fold[data-open] .fold-tw { transform: rotate(90deg); }
.editor .fold-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.editor .fold-more {
  padding: 0 6px;
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.editor .fold-body {
  margin: 2px 0 4px 6px;
  padding-left: 12px;
  border-left: 1px solid var(--tline);
  outline: none;
  white-space: pre-wrap;
}

.editor .fold:not([data-open]) > .fold-body { display: none; }
/* an aligned section aligns its text; the header stays at the left */
.editor .fold[data-align] { text-align: left; }
.editor .fold[data-align="center"] > .fold-body { text-align: center; }
.editor .fold[data-align="right"] > .fold-body { text-align: right; }

/* Attachments. A figure's media is added by att-media.js; until then it shows its stand-in (.att-ph). */
.editor::after { content: ""; display: block; clear: both; }

.editor figure.att {
  position: relative;
  max-width: 100%;
  margin: 10px 0;
  border-radius: 3px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
}
.editor figure.att[data-size="s"] { width: 33%; }
.editor figure.att[data-size="m"] { width: 60%; }
.editor figure.att[data-size="l"] { width: 100%; }
.editor figure.att[data-align="center"] { margin-right: auto; margin-left: auto; }
.editor figure.att[data-align="left"]:not([data-size="l"]) { float: left; margin: 4px 16px 10px 0; }
.editor figure.att[data-align="right"]:not([data-size="l"]) { float: right; margin: 4px 0 10px 16px; }
.editor figure.att.selected,
.editor .att-file.selected { outline-color: var(--accent); }
.editor figure.att.dragging-att { opacity: .5; }

.editor .att-media {
  display: block;
  width: 100%;
  height: auto;
  min-height: 40px;
  border-radius: 3px;
  background: var(--tab);
}

/* the words shown while there's no media: why it isn't here */
.editor figure.att .att-ph {
  display: block;
  padding: 10px 12px;
  border: 1px dashed var(--tedge);
  border-radius: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.editor .att-file {
  display: inline-block;
  max-width: 100%;
  padding: 1px 6px;
  border: 1px solid var(--tedge);
  border-radius: 3px;
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--tab);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
  -webkit-user-select: none;
  user-select: none;
}

.editor .att-pending {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px dashed var(--tedge);
  border-radius: 4px;
  color: var(--muted);
}

.page.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The bar over a selected attachment */
.attbar[hidden] { display: none; }

.attbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--tline);
  font-size: 12px;
  color: var(--muted);
}

.attbar .chip-btn.danger { color: var(--danger); }

@media (max-width: 720px) {
  .editor figure.att[data-size="s"] { width: 50%; }
  .editor figure.att[data-size="m"] { width: 100%; }
}