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

.editor {
  position: relative;
  z-index: 1;
  min-width: 0;
  /* room below the last line to click into, so the whole column feels like the page */
  min-height: max(240px, calc(100vh - 380px));
  padding: 4px 0 0;
  outline: none;
  color: var(--fg);
  font: 400 13px/1.6 var(--font-ui);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
  /* the standard thin caret, in the accent (selection, focus and the caret are the accent's one job) */
  caret-color: var(--accent);
}

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


.editor b,
.editor strong { font-weight: 600; }

/* 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: 4px;
  background: transparent;
  content: "";
  cursor: default;
}

.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 solid var(--sep); }

/* 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 {
  border: 1px solid var(--sep);
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
}

.editor table.ntable td {
  box-sizing: content-box;
  min-width: 6ch;
  height: 20px;
  padding: 6px 10px;
  border-right: 1px solid var(--sep);
  border-bottom: 1px solid var(--sep);
  vertical-align: top;
  white-space: pre-wrap;
}
.editor table.ntable td:last-child { border-right: 0; }
.editor table.ntable tr:last-child td { border-bottom: 0; }

/* a table aligned (UI-14b): the table moves, its cells' words stay as they were */
.editor table.ntable[data-align] { text-align: left; }
.editor table.ntable[data-align="center"] { margin-right: auto; margin-left: auto; }
.editor table.ntable[data-align="right"] { margin-right: 0; margin-left: auto; }

.editor table.ntable[data-head] tr:first-child td {
  background: var(--fill);
  color: var(--fg-strong);
  font-weight: 600;
}

/* Sections: a heading that folds its lines away. It takes its new state at once and what follows slides
   there on transforms while its lines fade (workspace/fold-motion.js, UI-9e: an animated height made
   Safari lay the note out on every frame). The heading never moves; once shut, the body leaves the
   layout so the caret passes it by. A plain block, no longer a grid: WebKit kept a grid row's old
   height when the pane narrowed, so the lines after a section ran over its re-wrapped text. */
.editor .fold {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  white-space: normal;
}

/* the heading is one pill (UI-10f): arrow · name · ⋯, its left end on the text's left edge, so nothing hangs
   into the margin or onto the line numbers at any width; the name starts 22 in, and an open section's lines
   line up under it (.fold-body). It's one line of the note like any other (UI-9h): no room above it (that
   was an 18 px margin, which read as a missing line between two line numbers), and room above it is a line
   Tom types. Its pill is 22 (below), so the line is at least that: 1.2 px taller than a note line, so two
   folded sections on back-to-back lines touch and never overlap (UI-10e review) */
.editor .fold-head {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  height: max(1.6em, 22px);
  color: var(--fg);
  user-select: none;
}
/* the arrow: an 18 px circle like the ⋯ at the pill's other end, inset by the pill's 2 */
.editor .fold-tw {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  color: var(--muted);
  transition: background-color 120ms var(--ease), color 120ms var(--ease);
}
/* it's the fold's button: 18 drawn, the pill's full 22 high and 24 wide to click (from the pill's left end
   to 2 px into the name's box, before its first letter's ink). Only the glyph turns when it opens, so this never turns over the words */
.editor .fold-tw::after { position: absolute; inset: -2px -4px -2px -2px; content: ""; }
/* the glyph: a "›" is the right half of a turned square, so the square sits left of the slot's middle; open,
   it turns a quarter to a "⌄", sitting that much above the middle. Both 1.5 px lower than that: optically
   centred on the words' x-height, which sits 1.5 px below the middle of their line (SF Pro's, measured in
   Safari and Chrome) */
.editor .fold-tw::before {
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: translate(-1.5px, 1.5px) rotate(-45deg);
  transition: transform 200ms var(--ease);
}
.editor .fold[data-open] > .fold-head .fold-tw::before { transform: translate(0, 0) rotate(45deg); }
/* the pill (UI-9h), as tall as the note header group's control with words in it (UI-10e: Note Width's
   switch, 22, its options 18 inset 2), as tall as fits a note line: the arrow and the ⋯ (18 each) inset 2
   at its ends, the name 2 from the arrow and 4 from the ⋯ (as seen, ink to ink: 8 to the arrow, 9 on to the
   name, 8 on to the ⋯; the audit measured 8 · 11 · 8 with 4 on both sides); it's the header the ⋯'s actions grow from */
.editor .fold-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 22px;
  padding: 0 2px;
  border-radius: 11px;
  transition: background-color 120ms var(--ease);
}
/* folded, it's clearly one pill (UI-10e): the quiet fill round the arrow, the name and the ⋯, which shows.
   Open, the same shape with no fill at rest and the fill under the pointer, so it still reads as one object */
.editor .fold:not([data-open]) > .fold-head .fold-pill:not(.acting, :has(.fold-in)) { background: var(--fill); }
@media (hover: hover) {
  .editor .fold[data-open]:not(.sel-whole) > .fold-head .fold-pill:not(.acting, :has(.fold-in)):hover { background: var(--fill); }
}
/* held whole by the selection, open or folded: the pill shows it, in the text selection's colour (a folded
   one's lines are hidden, and an open one's header isn't text the browser can select: UI-10f) */
.editor .fold.sel-whole > .fold-head .fold-pill:not(.acting, :has(.fold-in)) { background: var(--sel-text); }
/* (the pill is the selection there: Safari would also paint the name's own letters as selected) */
.editor .fold.sel-whole > .fold-head .fold-name::selection { background: transparent; }
.editor .fold:not([data-open]) > .fold-head .fold-more,
/* (and an open one's while the caret is beside it: the caret sits after the ⋯, never under it) */
.editor .fold.caret-by > .fold-head .fold-more { opacity: 1; }
/* its actions out (UI-10 §3): the pill grows sideways, its fill behind the words; the buttons inset by the
   pill's 2 px padding on the right and 2 apart, so the last one's words end 10 from its end */
.editor .fold-pill.acting { position: relative; isolation: isolate; }
.editor .fold-fill { position: absolute; inset: 0; z-index: -1; border-radius: 11px; pointer-events: none; }
.editor .fold-fill-in { border-radius: 11px; background: var(--fill); }
/* (the buttons fade as Find's field does, on the board's `.grow`: in over 160 after 140, out over 160) */
.editor .fold-acts { display: inline-flex; flex: none; align-items: center; gap: 2px; height: 18px; border-radius: 9px; opacity: 0; transition: opacity 160ms var(--ease); }
.editor .fold-acts.in { opacity: 1; transition: opacity 160ms var(--ease) 140ms; }
.editor .fold-acts-in { display: flex; align-items: center; gap: 2px; }
/* (a reveal's host, whose transitions shared.css stops: its fade is its own, UI-10 audit) */
:root .editor .fold-acts { transition: opacity 160ms var(--ease) !important; }
:root .editor .fold-acts.in { transition: opacity 160ms var(--ease) 140ms !important; }
/* while its actions are out the name keeps its width, so the ⋯ never moves, as long as they end inside the
   note's column; past it the name gives way, and where even that's not enough they drop as a menu
   (sections-acts.js, UI-14d) */
.editor .fold-pill.acting.keep .fold-name { flex: none; }
.editor .fold-act { flex: none; height: 18px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--fg); font: 500 12px/18px var(--font-ui); white-space: nowrap; transition: background-color 120ms var(--ease); }
@media (hover: hover) { .editor .fold-act:hover { background-color: var(--fill); } }
.editor .fold-act:active { background-color: var(--press); }
.editor .fold-name { min-width: 0; margin-left: -2px; overflow: hidden; color: var(--fg); font-size: 13px; font-weight: 600; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
/* renaming: the field's outline and the padding it hangs out to the left are never cut off */
.editor .fold-name:has(> .fold-in) { overflow: visible; }
.editor .fold-more {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  font: 700 13px/1 var(--font-ui);
  opacity: 0;
  transition: opacity 120ms var(--ease), background-color 120ms var(--ease);
}
/* 18 drawn, 28 to click */
.editor .fold-more::after { position: absolute; inset: -5px; border-radius: 14px; content: ""; }
/* shown while its pill is hovered (UI-10f: the pill fills under the pointer, so the ⋯ never shows alone); filled like any button: a step on its own hover, pressed, and the
   selected fill only while the keyboard is on it or its menu is open (UI-9i audit: it was .13 on any hover) */
.editor .fold-pill:hover .fold-more,
.editor .fold-more:focus-visible,
.editor .fold-more[aria-expanded="true"] { opacity: 1; }
.editor .fold-more:focus-visible,
.editor .fold-more[aria-expanded="true"] { background-color: var(--sel); }
@media (hover: none) { .editor .fold-more { opacity: 1; } }
@media (hover: hover) {
  .editor .fold-tw:hover,
  .editor .fold-more:hover { background-color: var(--fill); }
  .editor .fold-tw:hover { color: var(--fg); }
}
.editor .fold-tw:active,
.editor .fold-more:active { background-color: var(--press); }

/* an open section's lines start under its name (UI-10f: 22 in, past the arrow) */
.editor .fold-body {
  min-height: 0;
  padding-left: 22px;
  outline: none;
  opacity: 0;
  visibility: hidden;
  overflow-x: visible;
  overflow-y: clip;
  white-space: pre-wrap;
  transition: visibility 0s linear 300ms;
}
.editor .fold[data-open] > .fold-body { opacity: 1; visibility: visible; transition-delay: 0s; }
.editor .fold:not([data-open]):not(.fold-slide) > .fold-body { display: none; }
/* shutting: its lines stay where they lay, out of the flow, fading, as what follows slides up */
.editor .fold.fold-slide:not([data-open]) > .fold-body { position: absolute; top: 100%; right: 0; left: 0; }
/* folded, its lines are counted at the note's width now: laid out for a moment, out of the flow and
   unseen (gutter.js) */
.editor .fold.fold-measure { position: relative; }
/* (as specific as the rule that hides it, and later, so it wins) */
.editor .fold.fold-measure:not([data-open]):not(.fold-slide) > .fold-body { position: absolute; top: 0; right: 0; left: 0; display: block; visibility: hidden; }
/* 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: default;
}
.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(--fill);
}

/* 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: default;
  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 beside a selected attachment (att-bar.js): floating glass just above it (or below), with
   plain buttons; pressed ones show the selected fill */
.attbar[hidden] { display: none; }
.attbar {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: 18px;
  white-space: nowrap;
  transform-origin: bottom center;
}
.attbar.below { transform-origin: top center; }
.ab-btn {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--fg);
  font: 500 12px var(--font-ui);
}
.ab-btn.words { min-width: 26px; padding: 0 4px; }
.ab-btn.danger { color: var(--drift-text); }
.ab-sep { flex: none; width: 1px; height: 16px; margin: 0 4px; background: var(--sep); }
.ab-name { max-width: 220px; padding: 0 8px 0 10px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; }

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