/* editor.css | Versie 1.6 -- 2026-10-15 | Knoppen voor rij en kolom verschijnen alleen in een tabel. Eerder 1.5 | Het stempel staat gecentreerd. Eerder 1.4 | Stempel en werkbalk delen een plek (n2-balkslot): het stempel staat er tot je in de tekst zit. Eerder 1.3 | De werkbalk verschijnt pas als je in de tekst klikt (article.n2-typt). Eerder 1.2 | Links blauw en onderstreept (ook in de leesweergave). Eerder 1.1 | Werkbalk met iconen en het linkvenster. Eerder 1.0 | Eerste versie (met tekstvak-terugval): opmaak van de documenteditor (TipTap); gebruikt de tokens van de huisstijl, geen inline stijl. Bevat ook de basisregels van ProseMirror die TipTap anders als <style> zou invoegen (dat blokkeert de CSP) */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror pre { white-space: pre-wrap; }
.ProseMirror li { position: relative; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }
.ProseMirror [contenteditable="false"] { white-space: normal; }
.ProseMirror [contenteditable="false"] [contenteditable="true"] { white-space: pre-wrap; }
.editor { cursor: text; }
.tiptap-inhoud { outline: none; min-height: 140px; overflow-wrap: anywhere; line-height: 1.6; }
.tiptap-inhoud > *:first-child { margin-top: 0; }
.tiptap-inhoud p { margin: 0 0 0.6em; }
.tiptap-inhoud h1 { font-size: 1.5em; margin: 0.9em 0 0.4em; }
.tiptap-inhoud h2 { font-size: 1.25em; margin: 0.9em 0 0.4em; }
.tiptap-inhoud h3, .tiptap-inhoud h4, .tiptap-inhoud h5, .tiptap-inhoud h6 { font-size: 1.1em; margin: 0.8em 0 0.3em; }
.tiptap-inhoud ul, .tiptap-inhoud ol { margin: 0 0 0.6em; padding-left: 1.6em; }
.tiptap-inhoud li > p { margin: 0 0 0.2em; }
.tiptap-inhoud ul[data-type="taskList"] { list-style: none; padding-left: 0.2em; }
.tiptap-inhoud ul[data-type="taskList"] ul[data-type="taskList"] { padding-left: 1.4em; }
.tiptap-inhoud ul[data-type="taskList"] > li { display: flex; gap: var(--space-2); align-items: flex-start; padding: 2px 4px; border-radius: var(--radius-sm); }
.tiptap-inhoud ul[data-type="taskList"] > li > label { flex: 0 0 auto; padding-top: 0.2em; user-select: none; }
.tiptap-inhoud ul[data-type="taskList"] > li > label input { width: 22px; height: 22px; accent-color: var(--ink); margin: 0; cursor: pointer; }
.tiptap-inhoud ul[data-type="taskList"] > li > div { flex: 1; min-width: 0; }
/* Een vinkje betekent nog nodig: aangevinkte regels vallen op, er wordt niets doorgehaald. */
.tiptap-inhoud ul[data-type="taskList"] > li[data-checked="true"] { background: var(--tag-bg); font-weight: 700; }
.tiptap-inhoud blockquote { margin: 0 0 0.6em; padding-left: var(--space-2); border-left: 3px solid var(--line); color: var(--ink-soft); }
.tiptap-inhoud code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--surface-sunken); padding: 0 4px; border-radius: var(--radius-sm); }
.tiptap-inhoud pre { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--surface-sunken); padding: 8px 10px; border-radius: var(--radius-sm); overflow-x: auto; margin: 0 0 0.6em; }
.tiptap-inhoud pre code { background: transparent; padding: 0; }
.tiptap-inhoud hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
/* Links zijn blauw en onderstreept (wens Jeroen 15-okt-2026); de huisstijl kent geen linkkleur, dus een eigen waarde hier. */
:root { --n2-link: #1b5fb5; }
.tiptap-inhoud a, .inhoud a { color: var(--n2-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tiptap-inhoud a:hover, .inhoud a:hover { text-decoration-thickness: 2px; }
.tiptap-inhoud table { border-collapse: collapse; margin: 0 0 0.8em; max-width: 100%; display: block; overflow-x: auto; }
.tiptap-inhoud th, .tiptap-inhoud td { border: 1px solid var(--line); padding: 4px 8px; min-width: 3em; vertical-align: top; }
.tiptap-inhoud th { background: var(--surface-sunken); text-align: left; }
.tiptap-inhoud th > p, .tiptap-inhoud td > p { margin: 0; }
.tiptap-inhoud .rij-beeld { margin: 0.4em 0 0.8em; }
.tiptap-inhoud .rij-beeld img.notitie-afbeelding { max-width: 100%; height: auto; display: block; }
.tiptap-inhoud .ProseMirror-selectednode { outline: 2px solid var(--focus); outline-offset: 2px; }
.tiptap-inhoud .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.tiptap-inhoud .ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--ink); }
.tiptap-inhoud .ProseMirror-gapcursor.ProseMirror-focused { display: block; }
.balk button.aan { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.balk button:disabled { opacity: 0.4; cursor: default; }
.editor-tekstvak { width: 100%; min-height: 280px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; line-height: 1.5; border: 0; background: transparent; color: inherit; resize: vertical; box-sizing: border-box; }
.editor-tekstvak:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.balk button { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; }
.balk button svg { display: block; }
.link-paneel { display: grid; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
.link-paneel[hidden] { display: none; }
.link-paneel label { display: grid; gap: 4px; font-weight: 600; font-size: 0.9em; color: var(--ink-soft); }
.link-paneel input { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 40px; box-sizing: border-box; width: 100%; }
.link-paneel input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.link-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.link-knoppen button { font: inherit; font-weight: 700; font-size: 0.9em; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px; min-height: 38px; cursor: pointer; }
.link-knoppen button.link-ok { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.link-knoppen a { font-weight: 700; font-size: 0.9em; color: var(--ink); }
.link-fout { margin: 0; color: #c0392b; font-weight: 600; font-size: 0.9em; }
.link-fout[hidden] { display: none; }
/* Boven de editor delen het stempel en de werkbalk een plek: het stempel staat er tot je in de tekst zit, dan komt de werkbalk ervoor in de plaats. */
.n2-balkslot { display: grid; position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 4px 0; margin-bottom: var(--space-2); }
.n2-balkslot > * { grid-area: 1 / 1; }
.n2-balkslot > .n2-stempel { align-self: center; justify-self: center; }
.n2-balkslot > .balk { position: static; margin: 0; visibility: hidden; opacity: 0; transition: opacity 0.15s; }
article.notitie.n2-typt .n2-balkslot > .balk { visibility: visible; opacity: 1; }
article.notitie.n2-typt .n2-balkslot > .n2-stempel { visibility: hidden; }
.tiptap-inhoud { min-height: 80px; }
/* Knoppen voor een tabel: alleen zichtbaar als de cursor in een tabel staat */
.balk .balk-tabel { display: none; }
.balk.in-tabel .balk-tabel { display: inline-flex; }
.balk.in-tabel .balk-scheiding.balk-tabel { display: inline-block; align-self: stretch; width: 1px; min-width: 1px; background: var(--line); margin: 2px 4px; }
.balk button.balk-tabel { font-size: 0.8em; min-width: 0; padding: 6px 9px; }