/* Unlayered on purpose: CodeMirror injects unlayered styles, which beat anything in a layer.
   The extra .cm-editor in each selector outranks its base theme. */
  
.editor .cm-editor { background: transparent; color: var(--ink); font-size: 1em; }
  .editor .cm-editor.cm-focused { outline: none; }
  .editor .cm-editor .cm-scroller { font-family: var(--font); line-height: 1.55; overflow: visible; }
  .editor .cm-editor .cm-content { padding: 0; caret-color: var(--caret); max-width: var(--measure); }
  .editor .cm-editor .cm-line { padding: 0; }
  .editor .cm-editor .cm-cursor { border-left: 3px solid var(--caret); margin-left: -1px; border-radius: 1px; }
  .editor .cm-editor .cm-selectionBackground, .editor .cm-editor.cm-focused .cm-selectionBackground,
  .editor .cm-editor .cm-content ::selection { background: color-mix(in oklab, var(--accent), transparent 65%) !important; }

  .cm-h { font-weight: 700; line-height: 1.25; }
  .cm-h1 { font-size: 1.6em; padding-block-start: 0.5em; }
  .cm-h2 { font-size: 1.3em; padding-block-start: 0.9em; }
  .cm-h3 { font-size: 1.1em; padding-block-start: 0.6em; }
  .cm-h4, .cm-h5, .cm-h6 { font-size: 1em; padding-block-start: 0.4em; }
  /* A paper's first line is its title, "#" or not (lib/title_line): the largest heading, at the top. */
  .editor .cm-editor .cm-line.cm-title { font-weight: 700; font-size: 1.6em; line-height: 1.25; padding-block-start: 0; }
  .cm-em { font-style: italic; }
  .cm-strong { font-weight: 700; }
  .cm-strike { text-decoration: line-through; text-decoration-color: var(--ink-soft); }
  .cm-code { font-family: var(--mono); font-size: 0.86em; background: var(--desk); border-radius: 3px; padding: 0.05em 0.2em; }
  .cm-link { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
  .cm-url { color: var(--ink-soft); }
  .cm-wikilink { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--ink-soft); text-underline-offset: 0.2em; cursor: pointer; }
  .cm-syntax { color: var(--ink-soft); }
  .cm-bullet { color: var(--ink-soft); display: inline-block; width: 1ch; }
  .editor .cm-editor .cm-quote { border-inline-start: 3px solid var(--rule); padding-inline-start: 1.25ch !important; color: var(--ink-soft); }
  .editor .cm-editor .cm-fence { font-family: var(--mono); font-size: 0.82em; background: var(--desk); padding-inline: 1.25ch !important; }
  .editor .cm-editor .cm-table { font-family: var(--mono); font-size: 0.78em; }
  .cm-rule { display: inline-block; width: 100%; border-block-start: 1px solid var(--rule); vertical-align: middle; }

  /* The shimmer when someone else's text lands: one sweep, then it rests in their colour. */
  .shimmer {
    background-image: linear-gradient(100deg, transparent 20%, var(--accent-wash) 50%, transparent 80%);
    background-size: 300% 100%; background-repeat: no-repeat;
    animation: shimmer 900ms ease-out 1 both;
  }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
  @media (prefers-reduced-motion: reduce) { .shimmer { animation: none; background: var(--accent-wash); } }

/* Agent text Joey has already seen settles toward ink, so a page an agent wrote reads as paper
   again; the History facet keeps the record. Fresh text keeps the author's full colour. */
.editor .cm-content .au.is-settled { color: color-mix(in oklab, var(--au), var(--ink) 55%); }

/* Tables render as tables until the cursor goes in. */
/* A picture on the sheet: full measure, a hairline frame like a print pasted in, caption beneath. */
.editor .cm-image-widget { margin: 0.6rem 0 1rem; cursor: text; }
.editor .cm-image-widget img { display: block; max-width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule), 0 8px 20px -16px oklch(var(--lch-shade) / 0.5); }
.editor .cm-image-widget figcaption { margin-block-start: 0.45rem; font-size: 0.78em; color: var(--ink-soft); line-height: 1.4; }
.editor .cm-table-widget table { border-collapse: collapse; font-size: 0.88em; line-height: 1.4; min-width: 60%; }
.editor .cm-table-widget th, .editor .cm-table-widget td { text-align: start; vertical-align: top; padding: 0.4em 0.9em 0.4em 0; border-block-end: 1px solid var(--rule); overflow-wrap: normal; word-break: normal; }
/* A cell wraps between words, never inside one: the editor breaks anywhere, a table must not. */
.editor .cm-table-widget th { font-weight: 700; border-block-end-color: var(--ink-soft); }
.editor .cm-table-widget code { font-family: var(--mono); font-size: 0.9em; background: var(--desk); border-radius: 3px; padding: 0.05em 0.25em; }

/* To-dos and callouts. */
.editor .cm-task { width: 0.95em; height: 0.95em; margin: 0 0.45em 0 0; vertical-align: -0.1em; accent-color: var(--ink); cursor: pointer; }
/* A callout is a tinted panel in its colour; its "> [!TYPE]" line is the top margin until the cursor goes there. */
.editor .cm-editor .cm-callout { --tint: var(--c-gray); background: color-mix(in oklab, var(--tint), var(--paper) 86%); border-inline-start: 3px solid var(--tint); padding-inline: 1.5ch !important; }
.editor .cm-editor .cm-callout + .cm-line:not(.cm-callout) { margin-block-start: 0; }
.editor .cm-editor .cm-callout-title { font-weight: 700; padding-block-start: 0.6em; }
.editor .cm-editor .cm-callout-last { padding-block-end: 0.6em; }
.editor .cm-editor .cm-callout-head { font-size: 0.6em; line-height: 1; padding-block: 0; }
.editor .cm-editor .cm-tint-gray { --tint: var(--c-gray); } .editor .cm-editor .cm-tint-brown { --tint: var(--c-brown); }
.editor .cm-editor .cm-tint-orange { --tint: var(--c-orange); } .editor .cm-editor .cm-tint-yellow { --tint: var(--c-yellow); }
.editor .cm-editor .cm-tint-green { --tint: var(--c-green); } .editor .cm-editor .cm-tint-blue { --tint: var(--c-blue); }
.editor .cm-editor .cm-tint-purple { --tint: var(--c-purple); } .editor .cm-editor .cm-tint-pink { --tint: var(--c-pink); }
.editor .cm-editor .cm-tint-red { --tint: var(--c-red); }

/* Coloured words, and words underlined in ballpoint. */
.cm-colour-gray { color: var(--c-gray); } .cm-colour-brown { color: var(--c-brown); }
.cm-colour-orange { color: var(--c-orange); } .cm-colour-yellow { color: var(--c-yellow); }
.cm-colour-green { color: var(--c-green); } .cm-colour-blue { color: var(--c-blue); }
.cm-colour-purple { color: var(--c-purple); } .cm-colour-pink { color: var(--c-pink); }
.cm-colour-red { color: var(--c-red); }
/* A plain underline is drawn in ballpoint by the marks layer (lib/circles), the same way as a card's. */
.cm-underline { text-decoration: none; }

/* The "+" beside the line pointed at, and the menu of things to add. */
.editor .cm-editor { position: relative; }
.editor .cm-plus {
  position: absolute; left: -3.4ch; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 6px; color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}
.editor .cm-plus:hover { background: var(--desk); color: var(--ink); }
/* The block's handle, beside the "+": turn into, move, delete; dragged, a line shows where it lands. */
.editor .cm-handle {
  position: absolute; left: calc(-3.4ch - 26px); width: 22px; height: 26px; display: grid; place-items: center;
  border-radius: 6px; color: var(--ink-soft); font-size: 15px; line-height: 1; cursor: grab; z-index: 2; touch-action: none;
}
.editor .cm-handle:hover, .editor .cm-handle.is-dragging { background: var(--desk); color: var(--ink); }
.editor .cm-handle.is-dragging { cursor: grabbing; }
.editor .cm-handle[hidden], .editor .cm-drop-line[hidden] { display: none; }
.editor .cm-drop-line { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: var(--ink-soft); z-index: 3; pointer-events: none; }
.editor.is-card .cm-handle { display: none !important; }
/* A touch screen has no pointer to drag with and no room left of the words: the handle is a computer's. */
@media (pointer: coarse) { .editor .cm-handle { display: none !important; } }
.cm-menu-item.is-bin { color: var(--c-red); }
.cm-inserter {
  position: absolute; z-index: 50; min-width: 15rem; max-height: 24rem; overflow-y: auto; padding: 0.35rem;
  background: var(--raised); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 12px 30px -12px oklch(var(--lch-shade) / 0.45);
  font-family: var(--font); font-size: 0.85rem;
}
.cm-inserter-search {
  display: block; width: 100%; margin-block-end: 0.3rem; padding: 0.35rem 0.6rem; border: 0; border-block-end: 1px solid var(--rule);
  background: transparent; outline: none; font: inherit; color: var(--ink); caret-color: var(--caret);
}
.cm-inserter-search[hidden] { display: none; }
.cm-inserter-none { padding: 0.4rem 0.6rem; color: var(--ink-soft); }
.cm-inserter-row { display: grid; gap: 0.05rem; padding: 0.4rem 0.6rem; border-radius: 5px; cursor: pointer; }
.cm-inserter-row.is-active, .cm-inserter-row:hover { background: var(--desk); }
.cm-inserter-name { font-weight: 700; }
.cm-inserter-hint { font-size: 0.75rem; color: var(--ink-soft); }

.editor .cm-plus[hidden], .cm-inserter[hidden] { display: none; }

/* The right-click menu, in HEY's manner: a white card, plain words a line each with their keys on the
   right, small labels over the groups, and colours as a spaced row of swatches. */
.cm-menu {
  position: absolute; z-index: 60; width: 16.5rem; padding: 0.4rem;
  background: var(--raised); border: 1px solid color-mix(in oklab, var(--rule), transparent 30%); border-radius: 12px;
  box-shadow: 0 1px 2px oklch(var(--lch-shade) / 0.08), 0 16px 36px -14px oklch(var(--lch-shade) / 0.4);
  font-family: var(--font); font-size: 0.8rem; color: var(--ink);
}
.cm-menu-section { padding: 0.25rem 0; }
.cm-menu-section + .cm-menu-section { border-block-start: 1px solid var(--rule); margin-block-start: 0.25rem; padding-block-start: 0.5rem; }
.cm-menu-title { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 0 0.6rem 0.3rem; }
.cm-menu-section.is-list .cm-menu-row { display: grid; }
.cm-menu-section.is-grid .cm-menu-row { display: grid; grid-template-columns: 1fr 1fr; }
.cm-menu-section.is-swatches .cm-menu-row { display: flex; flex-wrap: wrap; gap: 0.42rem; padding: 0.15rem 0.6rem 0.25rem; align-items: center; }
.cm-menu-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0.6rem; border-radius: 7px; text-align: start; }
.cm-menu-item:hover { background: color-mix(in oklab, var(--accent), var(--paper) 78%); }
.cm-menu-item kbd { font-family: var(--font); font-size: 0.7rem; color: var(--ink-soft); }
.cm-menu-item.is-bold .cm-menu-label { font-weight: 700; } .cm-menu-item.is-italic .cm-menu-label { font-style: italic; }
.cm-menu-item.is-strike .cm-menu-label { text-decoration: line-through; } .cm-menu-item.is-code .cm-menu-label { font-family: var(--mono); font-size: 0.92em; }
.cm-menu-item.is-underline .cm-menu-label { text-decoration: underline; text-decoration-color: var(--ink-blue); text-decoration-thickness: 1.6px; text-underline-offset: 0.2em; }
.cm-swatch { width: 1.05rem; height: 1.05rem; padding: 0; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 1px oklch(var(--lch-shade) / 0.12); }
.cm-swatch:hover { background: currentColor; transform: scale(1.15); }
.cm-swatch.is-current { outline: 2px solid var(--ink); outline-offset: 2px; }
.cm-menu-section.is-swatches .cm-menu-item:not(.cm-swatch) { padding: 0.15rem 0.4rem; margin-inline-start: auto; }
.cm-swatch.cm-colour-default { color: var(--ink); }
.cm-swatch.cm-pen-blue { color: var(--ink-blue); } .cm-swatch.cm-pen-black { color: var(--ink-black); }
.cm-swatch.cm-pen-red { color: var(--ink-red); } .cm-swatch.cm-pen-green { color: var(--ink-green); }
.cm-swatch.cm-tint-gray { color: var(--c-gray); } .cm-swatch.cm-tint-brown { color: var(--c-brown); }
.cm-swatch.cm-tint-orange { color: var(--c-orange); } .cm-swatch.cm-tint-yellow { color: var(--c-yellow); }
.cm-swatch.cm-tint-green { color: var(--c-green); } .cm-swatch.cm-tint-blue { color: var(--c-blue); }
.cm-swatch.cm-tint-purple { color: var(--c-purple); } .cm-swatch.cm-tint-pink { color: var(--c-pink); }
.cm-swatch.cm-tint-red { color: var(--c-red); }

/* Tables are typed in cell by cell; a + under the table adds a row, one beside it a column. */
.editor .cm-table-widget { position: relative; width: fit-content; max-width: 100%; padding-block: 0.4rem 1.4rem; padding-inline-end: 1.6rem; overflow-x: auto; cursor: auto; }
.editor .cm-table-widget [contenteditable] { outline: none; cursor: text; caret-color: var(--caret); min-width: 4ch; }
/* The cell being written in is underlined in the caret's blue, and nothing more (DESIGN). */
.editor .cm-table-widget [contenteditable]:focus { box-shadow: inset 0 -2px 0 var(--caret); }
.cm-table-add-row, .cm-table-add-col {
  position: absolute; display: grid; place-items: center; color: var(--ink-soft); font-size: 15px; line-height: 1;
  border-radius: 4px; opacity: 0;
}
.cm-table-add-row { left: 0; right: 1.6rem; bottom: 0.1rem; height: 1.1rem; }
.cm-table-add-col { top: 0.4rem; bottom: 1.4rem; right: 0; width: 1.3rem; }
.editor .cm-table-widget:hover .cm-table-add-row, .editor .cm-table-widget:hover .cm-table-add-col,
.editor .cm-table-widget:focus-within .cm-table-add-row, .editor .cm-table-widget:focus-within .cm-table-add-col { opacity: 1; }
.cm-table-add-row:hover, .cm-table-add-col:hover { background: var(--desk); color: var(--ink); }

/* A card is too small for the + beside its lines; its words are added by writing. */
.editor.is-card .cm-plus { display: none !important; }

/* Word colours, iA Writer's: they take the place of authorship colour while they are on, except for
   words another writer added that the reader has not seen yet, which keep their writer's hue until
   seen, so the moment someone else changes the page always shows who did. */
.cm-editor.is-word-colours .cm-content .au:not(.is-fresh), .cm-editor.is-word-colours .cm-content .au.is-settled { color: inherit; }
.cm-editor.is-word-colours .cm-content .au.is-fresh .cm-pos { color: var(--au) !important; }
.cm-pos-noun { color: var(--c-red) !important; }
.cm-pos-verb { color: var(--c-blue) !important; }
.cm-pos-adjective { color: var(--c-brown) !important; }
.cm-pos-adverb { color: var(--c-purple) !important; }
.cm-pos-conjunction { color: var(--c-green) !important; }

/* Code: monospace, unwrapped, scrolled sideways if it must be. */
.editor.is-code .cm-editor .cm-scroller { font-family: var(--mono); font-size: 0.82em; line-height: 1.6; overflow-x: auto; }
.editor.is-code .cm-editor .cm-content { max-width: none; }
.cm-table-widget u { text-decoration: underline; text-decoration-color: var(--ink-blue); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
/* Toggles: a triangle that turns, the edge lines out of the way, and a folded toggle's dots. */
.cm-toggle-arrow { display: inline-block; width: 1em; margin-inline-end: 0.25em; color: var(--ink-soft); cursor: pointer; user-select: none; }
.cm-toggle-arrow.is-open { transform: rotate(90deg); }
.cm-toggle-arrow:hover { color: var(--ink); }
.cm-line.cm-toggle-edge { line-height: 0.5; }
.cm-foldPlaceholder { margin-inline-start: 0.4em; padding: 0 0.35em; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--ink-soft); font-size: 0.8em; cursor: pointer; }
/* A code block names its language on its first line, small, at the right. No syntax colours. */
.cm-code-language { float: right; font-family: var(--font); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-soft); }
/* Equations: drawn by KaTeX off the cursor's line; one set apart sits centred on its own line. */
.cm-maths .katex { font-size: 1.05em; }
.cm-maths.is-display { display: block; text-align: center; margin-block: 0.3rem; }

.cm-menu-field {
  width: 100%; padding: 0.35em 0.6em; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper);
  font: inherit; color: var(--ink); caret-color: var(--caret); outline: none;
}
.cm-menu-field:focus { border-color: var(--ink-soft); }

/* A deck's directive, off the cursor's line: a small label, not words. */
.cm-directive { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 4px; padding: 0.05rem 0.4rem; }

/* On a touch screen, selected words offer Circle and Underline in a small pill under them. */
.cm-touch-marks { position: absolute; z-index: 40; display: flex; gap: 0.2rem; padding: 0.25rem; border-radius: 999px;
  background: var(--raised); border: 1px solid color-mix(in oklab, var(--rule), transparent 30%);
  box-shadow: 0 1px 2px oklch(var(--lch-shade) / 0.08), 0 10px 24px -12px oklch(var(--lch-shade) / 0.4); }
.cm-touch-marks button { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.8rem; border-radius: 999px; color: var(--ink); background: none; border: 0; }
.cm-touch-marks button:hover, .cm-touch-marks button:active { background: color-mix(in oklab, var(--accent), var(--paper) 70%); }
.cm-touch-marks.is-docked { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--keyboard-inset, 0px) + max(16px, env(safe-area-inset-bottom))); }
.cm-touch-marks.is-docked button { font-size: 0.95rem; padding: 0.5rem 1.1rem; }

/* A bookmark (2026-10-09, after Notion's): an address alone on its line, drawn as a rectangle that
   breaks the text, the hairline and corners of the paper's own cards, its words on the left (the
   title in ink, a line of description and the site in soft ink), the page's picture on the right. */
.cm-bookmark { position: relative; display: flex; align-items: stretch; height: 6.6rem; margin-block: 0.6rem; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); text-decoration: none; }
.cm-bookmark:hover { background: color-mix(in oklab, var(--desk), var(--paper) 55%); }
/* As a card's title, the frame opens the card and only its words are the link (margin/_slip). */
.cm-bookmark a { color: inherit; text-decoration: none; }
.cm-bookmark a:hover { text-decoration: underline; }
.cm-bookmark-words { display: grid; align-content: center; gap: 0.25rem; flex: 1 1 auto; min-width: 0; padding: 0.7rem 0.9rem; }
.cm-bookmark-title { font-size: 0.92rem; font-weight: 600; line-height: 1.3; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm-bookmark-about { font-size: 0.8rem; line-height: 1.35; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-bookmark-about:empty { display: none; }
.cm-bookmark-site { font-size: 0.76rem; color: var(--ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm-bookmark-picture { flex: 0 0 auto; width: min(33%, 15rem); height: 100%; object-fit: cover; border-inline-start: 1px solid var(--rule); }
.cm-bookmark-edit { position: absolute; top: 0.35rem; right: 0.4rem; padding: 0.1rem 0.5rem; font: inherit; font-size: 0.72rem; color: var(--ink-soft);
  background: var(--raised); border: 1px solid var(--rule); border-radius: 999px; opacity: 0; transition: opacity 120ms; }
.cm-bookmark:hover .cm-bookmark-edit, .cm-bookmark-edit:focus-visible { opacity: 1; }
@media (pointer: coarse) { .cm-bookmark-edit { opacity: 1; } }
@media (max-width: 40rem) { .cm-bookmark { height: 5.8rem; } .cm-bookmark-picture { width: 30%; } }

/* The @ picker: the + menu's card, each choice its name, then in soft ink what it is and where. */
.cm-mentions .cm-inserter-row { display: flex; align-items: baseline; gap: 0.6rem; }
.cm-mention-where { color: var(--ink-soft); font-size: 0.75rem; margin-inline-start: auto; white-space: nowrap; }