/* Note editor: a dialog over the board, 90% of the window, holding the note's sheet and the CodeMirror editor. The window
   is notebook paper (notebook.css): ruled lines and a margin under the text, the note type only in the folded corner
   and on the tabs. CodeMirror injects its own base styles; everything WorkNotes adds is here, on normal classes, with the palette tokens. */
.modal-panel--editor { display: flex; flex-direction: column; gap: 1rem; width: 90vw; max-width: none; height: 90vh; height: 90dvh; margin: 0; padding: clamp(1rem, 2.5vw, 2rem); }
/* Header: the WN mark, the tabs of the open notes and, on the right, Minimize and Close. Each note's footer: the paragraph
   info, then the details, the save status and Save. */
.note-editor-header { display: flex; flex: none; align-items: center; gap: .15rem .35rem; position: relative; z-index: 1; margin: -.5rem -.5rem 0 0; padding-bottom: .35rem; border-bottom: 1px solid var(--wn-notebook-rule); }
/* The WN mark (images/logo-wn.svg): on the left of the editor's header and of its minimized form. */
.note-editor-logo { flex: none; width: 2rem; height: 2rem; }
.note-editor-header > .note-editor-logo { margin-inline-end: .35rem; }
/* Tabs: one per open note. They share the width left in the header, shrink down to a readable minimum (the title is cut
   with an ellipsis, its full text is the tooltip) and scroll sideways when there are more. The dot has the colour of the
   note type (the colour of the sheet's corner); the active tab is white and underlined in the accent colour. */
.note-editor-tabs { display: flex; flex: 1 1 auto; align-items: flex-end; gap: .25rem; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.note-editor-tab { display: flex; flex: 0 1 13rem; align-items: center; min-width: 7.5rem; border-radius: var(--wn-radius) var(--wn-radius) 0 0; color: var(--wn-muted); background: rgb(36 58 54 / 6%); }
.note-editor-tab:hover { color: var(--wn-text); background: rgb(36 58 54 / 10%); }
/* Drag and drop of the tabs (note-editor.js): the dragged tab is dimmed with a dashed outline; the tab it will be inserted
   before gets an accent bar on its leading edge (the last tab, on its trailing edge, for the end). */
.note-editor-tab { position: relative; }
.note-editor-tab--dragging { opacity: .55; outline: 2px dashed var(--wn-primary); outline-offset: -2px; }
.note-editor-tab--drop-before::before, .note-editor-tab--drop-after::after { content: ""; position: absolute; z-index: 1; inset-block: 4px; width: 3px; border-radius: 2px; background: var(--wn-primary); pointer-events: none; }
.note-editor-tab--drop-before::before { inset-inline-start: 0; }
.note-editor-tab--drop-after::after { inset-inline-end: 0; }
.note-editor-tab--active, .note-editor-tab--active:hover { color: var(--wn-text); background: var(--wn-surface); box-shadow: inset 0 -3px var(--wn-primary); }
.note-editor-tab__select { display: flex; flex: 1; align-items: center; gap: .45rem; min-width: 0; min-height: 40px; padding: .35rem .2rem .35rem .65rem; border: 0; color: inherit; background: transparent; font: inherit; font-size: clamp(.8rem, 1.1vw, .9rem); font-weight: 600; text-align: start; cursor: pointer; }
.note-editor-tab--active .note-editor-tab__select { font-weight: 700; }
.note-editor-tab__select::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 2px; background: var(--wn-notebook-corner-journal); box-shadow: inset 0 0 0 1px rgb(36 58 54 / 30%); }
.note-editor-tab--article .note-editor-tab__select::before { background: var(--wn-notebook-corner-article); }
/* The selected tab's dot is a lit LED in the colour of the note type (yellow journal, green article): the same .6rem
   square, radius and place (only its background and shadows change, so nothing moves), brighter at the centre, with an
   edge of its colour and a discreet glow. No animation. */
.note-editor-tab__select[aria-selected="true"]::before {
    --led-core: var(--wn-led-journal-core);
    --led-on: var(--wn-led-journal-on);
    --led-edge: var(--wn-led-journal-edge);
    --led-glow: var(--wn-led-journal-glow);
    background: radial-gradient(circle at 50% 42%, var(--led-core) 0 25%, var(--led-on) 65%, var(--led-edge) 100%);
    box-shadow: inset 0 0 0 1px var(--led-edge), 0 0 3px 0 var(--led-glow);
}
.note-editor-tab--article .note-editor-tab__select[aria-selected="true"]::before {
    --led-core: var(--wn-led-article-core);
    --led-on: var(--wn-led-article-on);
    --led-edge: var(--wn-led-article-edge);
    --led-glow: var(--wn-led-article-glow);
}
@media (forced-colors: active) {
    .note-editor-tab__select[aria-selected="true"]::before { forced-color-adjust: none; background: Highlight; box-shadow: none; }
    .note-editor-tab--drop-before::before, .note-editor-tab--drop-after::after { forced-color-adjust: none; background: Highlight; }
    .note-editor-tab--dragging { outline-color: Highlight; }
}
.note-editor-tab__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-editor-tab__close { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; margin-inline-end: .2rem; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-muted); background: transparent; cursor: pointer; }
.note-editor-tab__close:hover { color: var(--wn-text); background: rgb(36 58 54 / 12%); }
.note-editor-tab__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Only the active tab's panel is shown; the others keep their editors, hidden. */
.note-editor-panels, .note-editor-panel { display: flex; flex: 1 1 auto; flex-direction: column; gap: 1rem; min-height: 0; }
.note-editor-icon { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-muted); background: transparent; cursor: pointer; }
.note-editor-icon:hover { color: var(--wn-text); background: rgb(36 58 54 / 8%); }
.note-editor-icon:active { background: rgb(36 58 54 / 14%); }
.note-editor-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note-editor-footer { display: flex; flex: none; flex-direction: column; gap: .75rem; }
.note-editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.note-editor-toolbar__meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; color: var(--wn-muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.note-editor-toolbar__status { flex: 1 1 14rem; margin: 0; color: var(--wn-muted); font-size: .875rem; text-align: end; }
.note-editor-toolbar__status--error { color: var(--wn-danger); font-weight: 600; }
.note-editor-toolbar .actions { flex-wrap: nowrap; }
.modal-panel--editor [hidden] { display: none; }
/* The title is written in the serif of the notebook headings, on the sheet's top rule. */
.note-sheet__title { flex: none; width: 100%; margin: 0; padding: .25rem 0; border: 0; border-bottom: 1px solid var(--wn-notebook-rule); border-radius: 0; color: var(--wn-text); background: transparent; font-family: var(--wn-font-display); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.25; }
h2.note-sheet__title { margin: 0; border-bottom: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.note-sheet__title::placeholder { color: var(--wn-muted); font-weight: 500; }
input.note-sheet__title:focus-visible { outline: none; border-bottom: 2px solid var(--wn-primary); }
/* The editor fills the space left in the dialog and scrolls on its own; its selection is the selection green on both
   note types. The text is written on ruled lines, one per visual line (the line height is the rule spacing, so wrapped
   lines stay on the rules), right of a reddish margin. The lines and the margin are the scroller's background, which
   scrolls with the text (local) and lies under CodeMirror's selection layer: on the content they would hide it. */
.note-sheet__editor { --editor-selection: var(--wn-selection); --editor-margin: 2.2rem; --editor-padding: .875rem; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; }
.note-sheet__paragraph { white-space: pre-wrap; }
.note-sheet__editor .cm-editor { flex: 1 1 auto; min-height: 0; border-radius: var(--wn-radius); color: var(--wn-text); background: transparent; font-size: 1rem; }
.note-sheet__editor .cm-editor.cm-focused { outline: 2px solid var(--wn-primary); outline-offset: 2px; }
.note-sheet__editor .cm-scroller { overflow: auto; font-family: var(--wn-font); line-height: var(--wn-notebook-line-height);
    background-image: linear-gradient(var(--wn-notebook-margin), var(--wn-notebook-margin)), linear-gradient(transparent calc(var(--wn-notebook-line-height) - 1px), var(--wn-notebook-rule) calc(var(--wn-notebook-line-height) - 1px));
    background-size: 1px 100%, 100% var(--wn-notebook-line-height); background-position: var(--editor-margin) 0, 0 var(--editor-padding); background-repeat: no-repeat, repeat-y; background-attachment: local; }
.note-sheet__editor .cm-content { padding: var(--editor-padding) 0; caret-color: var(--wn-text); }
.note-sheet__editor .cm-line { padding: 0 1.25rem 0 calc(var(--editor-margin) + .7rem); }
@media (max-width: 450px) { .note-sheet__editor { --editor-margin: 1.25rem; } }
.note-sheet__editor .cm-placeholder { color: var(--wn-muted); }
/* Paragraph under the mouse: the one the info bar describes. */
.note-sheet__editor .cm-editor .cm-hoveredParagraph { background: rgb(36 58 54 / 5%); box-shadow: inset 3px 0 var(--wn-input-border); }
/* Active line: the "rând activ" style of the palette. */
.note-sheet__editor .cm-editor .cm-activeLine { background: var(--wn-notebook-active-line); box-shadow: inset 3px 0 var(--wn-primary); }
/* CodeMirror draws the selection in a layer under the lines (drawSelection), so a line's own background would hide it:
   while text is selected, the active line and the hovered paragraph keep only their bar on the left. */
.note-sheet__editor .cm-editor .cm-selectionLayer .cm-selectionBackground,
.note-sheet__editor .cm-editor.cm-focused .cm-selectionLayer .cm-selectionBackground { background: var(--editor-selection); }
.note-sheet__editor .cm-editor:has(.cm-selectionBackground) :is(.cm-activeLine, .cm-hoveredParagraph) { background: transparent; }
.note-sheet__editor .cm-editor .cm-selectionMatch { background: rgb(245 223 147 / 55%); }
.note-sheet__editor .cm-editor .cm-searchMatch { background: var(--wn-highlight); outline: 1px solid rgb(153 111 26 / 35%); }
.note-sheet__editor .cm-editor .cm-searchMatch-selected { background: #efc95c; }
/* Search panel, opened with Ctrl+F. */
.note-sheet__editor .cm-editor .cm-panels { border-color: var(--wn-border); color: var(--wn-text); background: var(--wn-surface); }
.note-sheet__editor .cm-editor .cm-panel.cm-search { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .6rem 2.5rem .6rem .75rem; font-size: .875rem; }
.note-sheet__editor .cm-editor .cm-panel.cm-search br { display: none; }
.note-sheet__editor .cm-editor .cm-panel.cm-search .cm-textfield { min-height: 36px; margin: 0; padding: .3rem .5rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); font: inherit; }
.note-sheet__editor .cm-editor .cm-panel.cm-search .cm-button { min-height: 36px; margin: 0; padding: .3rem .7rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); background-image: none; font: inherit; cursor: pointer; }
.note-sheet__editor .cm-editor .cm-panel.cm-search .cm-button:hover { color: var(--wn-primary-hover); background: var(--wn-active-line); }
.note-sheet__editor .cm-editor .cm-panel.cm-search label { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }
.note-sheet__editor .cm-editor .cm-panel.cm-search [name=close] { top: .5rem; right: .6rem; width: 28px; height: 28px; color: var(--wn-muted); font-size: 1.25rem; }
/* Internal references (note-references.js): the whole reference as written (CR 30080, bug_1234) reads as a link in the
   accent colour, with the title and type of its note as its tooltip; the text itself is unchanged. */
.note-sheet__editor .cm-editor .cm-note-reference { color: var(--wn-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.note-sheet__editor .cm-editor .cm-note-reference:hover { color: var(--wn-primary-hover); text-decoration-thickness: 2px; }
/* A status link (#RFT): discreet, a soft sage background and a dotted underline instead of the note link's line, so it
   reads as a state, not as a way to another note. */
.note-sheet__editor .cm-editor .cm-status-reference { padding-inline: .1em; border-radius: 3px; background: var(--wn-active-line); text-decoration-style: dotted; }
.note-sheet__editor .cm-editor .cm-status-reference:hover { text-decoration-style: solid; }
@media (forced-colors: active) {
    .note-sheet__editor .cm-editor .cm-note-reference { color: LinkText; }
}
/* The popup of a reference (note-references.js), above it: a small white sheet of a fixed width with its header (the
   reference, its point of discussion, Back in an add mode, its X: the only way to close it), which moves it by drag-and-drop,
   its body and its footer (the add buttons, smaller). It never scrolls: its lists are paged and its long names end with an
   ellipsis (the whole name in the tooltip). The search shows only when the answer takes a moment (a text that is no
   reference closes it before). With neither an article nor Git, the message says so. It never takes the focus by itself. */
.note-sheet__editor .cm-editor .note-reference-lookup { display: grid; gap: .45rem; width: max-content; min-width: min(17rem, calc(100vw - 2rem)); max-width: min(26rem, calc(100vw - 2rem)); max-height: min(30rem, 60dvh); padding: .5rem .6rem .6rem; overflow-y: auto; border: 1px solid var(--wn-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); box-shadow: var(--wn-shadow-raised); font-family: var(--wn-font); font-size: .875rem; line-height: 1.4; }
.note-sheet__editor .cm-editor .note-reference-popup { width: min(26rem, calc(100vw - 2rem)); min-width: 0; max-width: none; max-height: none; overflow: hidden; }
.note-sheet__editor .cm-editor .note-reference-lookup--searching { color: var(--wn-muted); animation: note-reference-lookup-appear var(--wn-motion) 250ms both; }
.note-reference-lookup [hidden] { display: none; }
.note-reference-lookup__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.note-reference-popup .note-reference-lookup__heading { align-items: center; margin: -.5rem -.6rem 0; padding: .4rem .6rem; border-bottom: 1px solid var(--wn-notebook-rule); cursor: move; user-select: none; touch-action: none; }
.note-reference-popup .note-reference-lookup__heading :is(button, a) { cursor: pointer; }
.note-reference-lookup--dragging { box-shadow: var(--wn-shadow-raised), 0 0 0 2px var(--wn-primary); }
.note-reference-lookup--dragging .note-reference-lookup__heading { cursor: grabbing; }
.note-reference-lookup__title { display: grid; flex: 1; min-width: 0; }
.note-reference-lookup__reference { min-width: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.note-reference-popup .note-reference-lookup__reference { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-reference-lookup__back { margin: 0; }
.note-reference-lookup__back svg { stroke-width: 2; }
.note-reference-lookup__message { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 600; }
.note-reference-lookup__message:has([data-lookup-message]:empty) { display: none; }
.note-reference-lookup__icon { display: none; flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note-reference-lookup--searching .note-reference-lookup__icon--search { display: block; animation: note-reference-lookup-search .8s ease-in-out infinite alternate; }
.note-reference-lookup--missing .note-reference-lookup__icon--missing { display: block; color: var(--wn-warning); }
.note-reference-lookup__body { display: grid; gap: .4rem; min-width: 0; }
.note-reference-lookup__help { margin: 0; color: var(--wn-muted); font-size: .85rem; overflow-wrap: anywhere; }
/* One row per reference, articles and Git alike: icon and type on the left, the name in the middle (an ellipsis), the
   actions as small icons on the right, the owner's delete icon in its corner. */
.note-reference-lookup__rows { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.note-reference-lookup__row { position: relative; display: flex; align-items: center; gap: .4rem; min-width: 0; min-height: 36px; padding: .15rem .35rem; border: 1px dashed var(--wn-input-border); border-radius: var(--wn-radius); }
.note-reference-lookup__row:has(.note-reference-lookup__delete:not([hidden])) { padding-right: 1.7rem; }
.note-reference-lookup__row--candidate { padding: 0; }
.note-reference-lookup__type { flex: none; padding: .05rem .4rem; border-radius: 4px; background: var(--wn-notebook-corner-journal); box-shadow: inset 0 0 0 1px rgb(36 58 54 / 18%); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.note-reference-lookup__article-card .note-reference-lookup__type { background: var(--wn-notebook-corner-article); }
.note-reference-lookup__type--git { color: var(--wn-git-merged); background: var(--wn-git-merged-bg); }
.note-reference-lookup__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-reference-lookup__actions { display: flex; flex: none; align-items: center; gap: .1rem; margin: 0; }
.note-reference-lookup__action { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--wn-radius); color: var(--wn-primary); background: transparent; cursor: pointer; }
.note-reference-lookup__action:hover:not([aria-disabled="true"]) { border-color: var(--wn-input-border); background: var(--wn-active-line); }
.note-reference-lookup__action:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.note-reference-lookup__action[aria-disabled="true"] { color: var(--wn-disabled-text); cursor: default; }
.note-reference-lookup__action svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* The pager of a list (‹ 1 / 3 ›), compact, under it. */
.note-reference-lookup__pager { display: flex; align-items: center; justify-content: center; gap: .35rem; color: var(--wn-muted); font-size: .8rem; }
.note-reference-lookup__pager[hidden] { display: none; }
.note-reference-lookup__pager-text { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
/* The footer: the add buttons in the view (small, side by side), Cancel and Add in an add mode. */
.note-reference-lookup__footer { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding-top: .45rem; border-top: 1px solid var(--wn-notebook-rule); }
.note-reference-lookup__footer[hidden] { display: none; }
.note-reference-lookup .note-reference-lookup__add { min-height: 30px; padding: .15rem .6rem; font-size: .8rem; }
@media (pointer: coarse) {
    .note-reference-lookup .note-reference-lookup__add { min-height: 44px; }
    .note-reference-lookup__action { width: 40px; height: 40px; }
}
.note-reference-lookup__git { display: grid; gap: .4rem; }
.note-reference-lookup__git-field { display: grid; gap: .2rem; color: var(--wn-muted); font-size: .75rem; font-weight: 600; }
.note-reference-lookup__git-field :is(select, input) { min-height: 36px; max-width: 100%; padding: .25rem .5rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); font: inherit; font-weight: 400; }
.note-reference-lookup__git-field :is(select, input):disabled { color: var(--wn-disabled-text); }
.note-reference-lookup__git-message, .note-reference-lookup__git-none { margin: 0; color: var(--wn-muted); font-size: .8rem; }
.note-reference-lookup__git-message:empty { display: none; }
/* The other search of the branch names, when none contains the reference: a small field and its button on one row. */
.note-reference-lookup__git-other { display: flex; flex-wrap: wrap; align-items: end; gap: .4rem; }
.note-reference-lookup__git-other[hidden] { display: none; }
.note-reference-lookup__git-other-field { flex: 1 1 10rem; min-width: 0; min-height: 32px; padding: .2rem .5rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); font: inherit; font-size: .85rem; font-weight: 400; }
.note-reference-lookup__git-other-field::placeholder { color: var(--wn-muted); opacity: 1; }
.note-reference-lookup__git-other-field:disabled { color: var(--wn-disabled-text); }
.note-reference-lookup__git-other-field:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.note-reference-lookup .note-reference-lookup__git-search { min-height: 32px; padding: .2rem .7rem; }
.note-reference-lookup__branches { display: grid; gap: .2rem; max-height: 9rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.note-reference-popup .note-reference-lookup__branch { min-width: 0; }
.note-reference-popup .note-reference-lookup__branch-added { flex: none; }
/* The owner's delete icon, in the top right corner of a row: discreet, plain on hover or focus; while the reference is
   being deleted it turns and the row is dimmed (the row cannot be used meanwhile). */
.note-reference-lookup__delete { position: absolute; top: .1rem; right: .1rem; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-muted); background: transparent; opacity: .55; cursor: pointer; }
.note-reference-lookup__delete[hidden] { display: none; }
.note-reference-lookup__row:hover .note-reference-lookup__delete, .note-reference-lookup__delete:focus-visible { opacity: 1; }
.note-reference-lookup__delete:hover { color: var(--wn-danger); background: var(--wn-danger-bg); }
.note-reference-lookup__delete:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.note-reference-lookup__delete:disabled { cursor: progress; }
.note-reference-lookup__delete svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note-reference-lookup__delete-wait { display: none; }
.note-reference-lookup__row[aria-busy="true"] { opacity: .6; pointer-events: none; }
.note-reference-lookup__row[aria-busy="true"] .note-reference-lookup__delete { opacity: 1; }
.note-reference-lookup__row[aria-busy="true"] .note-reference-lookup__delete-icon { display: none; }
.note-reference-lookup__row[aria-busy="true"] .note-reference-lookup__delete-wait { display: block; animation: note-reference-delete-wait .8s linear infinite; }
@keyframes note-reference-delete-wait { to { transform: rotate(360deg); } }
@media (pointer: coarse) {
    .note-reference-lookup__delete { width: 40px; height: 40px; opacity: 1; top: 50%; translate: 0 -50%; }
    .note-reference-lookup__row:has(.note-reference-lookup__delete:not([hidden])) { padding-right: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .note-reference-lookup__row[aria-busy="true"] .note-reference-lookup__delete-wait { animation-duration: 3s; }
}
@media (forced-colors: active) {
    .note-reference-lookup__delete, .note-reference-lookup__action { opacity: 1; border: 1px solid ButtonText; }
    .note-reference-lookup__delete:hover, .note-reference-lookup__action:hover { color: Highlight; background: Canvas; }
    .note-reference-lookup__row { border-color: CanvasText; }
    .note-reference-lookup--dragging { outline: 2px solid Highlight; }
}
/* The confirmation of a deleted reference (reference-delete.js), over the editor: hidden until opened; its X is a button,
   like the link of the other overlays. */
.reference-delete:not([open]) { display: none; }
.reference-delete .modal-close { padding: 0; border: 0; background: transparent; cursor: pointer; }
.note-reference-lookup__branch-added { display: inline-flex; align-items: center; gap: .2rem; color: var(--wn-primary); font-size: .8rem; font-weight: 600; }
.note-reference-lookup__branch-added[hidden] { display: none; }
.note-reference-popup .note-reference-lookup__branch-borrowed { flex: none; }
.note-reference-lookup__branch-borrowed { color: var(--wn-muted); font-size: .75rem; font-style: italic; }
.note-reference-lookup__branch-borrowed[hidden] { display: none; }
/* The two groups of the view when another occurrence lends Git references: this occurrence's, then the borrowed ones. */
.note-reference-lookup__group { margin: .15rem 0 0; color: var(--wn-muted); font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A borrowed Git reference: when and where it was linked, discreetly, on a second line of the card. */
.note-reference-lookup__row--borrowed { flex-wrap: wrap; row-gap: 0; border-style: dotted; }
.note-reference-lookup__meta { flex-basis: 100%; order: 10; min-width: 0; padding-left: 1.6rem; color: var(--wn-muted); font-size: .72rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-reference-lookup__meta[hidden] { display: none; }
.note-reference-lookup__branch[aria-disabled="true"] { cursor: default; }
.note-reference-lookup__branch { display: flex; align-items: center; gap: .45rem; width: 100%; min-height: 32px; padding: .2rem .45rem; border: 1px solid transparent; border-radius: var(--wn-radius); color: var(--wn-text); background: transparent; font: inherit; text-align: start; cursor: pointer; }
.note-reference-lookup__branch:hover:not(:disabled, [aria-disabled="true"]) { border-color: var(--wn-input-border); background: var(--wn-active-line); }
.note-reference-lookup__branch:focus-visible, .note-reference-lookup__git-field select:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.note-reference-lookup__branch:disabled { color: var(--wn-disabled-text); cursor: not-allowed; }
/* The popup of a status link: the code and the catalog with the close icon, the name, the description, the state. */
.note-sheet__editor .cm-editor .note-status-popup { min-width: min(16rem, calc(100vw - 2rem)); }
.note-status-popup__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.note-status-popup__code { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.note-status-popup__category { margin-inline-start: .35rem; color: var(--wn-muted); font-size: .8rem; font-weight: 600; }
.note-status-popup__close { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; margin: -.3rem -.35rem 0 0; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-muted); background: transparent; cursor: pointer; }
.note-status-popup__close:hover { color: var(--wn-text); background: var(--wn-active-line); }
.note-status-popup__close:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.note-status-popup__close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (pointer: coarse) { .note-status-popup__close { width: 44px; height: 44px; } }
/* The suggestion after a #: a small button beside the cursor, then the configured codes by catalog. */
.note-sheet__editor .cm-editor .note-status-suggest { padding: .3rem; max-height: min(20rem, 45dvh); }
.note-status-suggest__open { min-height: 32px; padding: .2rem .6rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-primary); background: var(--wn-surface); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.note-status-suggest__open:hover { background: var(--wn-active-line); }
.note-status-suggest__open:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.note-status-suggest__groups { display: grid; gap: .5rem; padding: .2rem; }
.note-status-suggest__groups[hidden], .note-status-suggest__open[hidden] { display: none; }
.note-status-suggest__heading { margin: 0 0 .15rem; color: var(--wn-muted); font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.note-status-suggest__codes { max-height: none; }
/* Each catalog has its accent (the class from the group's kind): a rule on the left and the heading's colour. */
.note-status-suggest__group { padding-left: .45rem; border-left: 3px solid var(--wn-border); }
.note-status-suggest__group--functional { border-left-color: var(--wn-primary); }
.note-status-suggest__group--functional .note-status-suggest__heading { color: var(--wn-primary); }
.note-status-suggest__group--delivery { border-left-color: var(--wn-warning); }
.note-status-suggest__group--delivery .note-status-suggest__heading { color: var(--wn-warning); }
.note-status-suggest__group--git { border-left-color: var(--wn-git-merged); }
.note-status-suggest__group--git .note-status-suggest__heading { color: var(--wn-git-merged); }
.note-status-suggest__name { color: var(--wn-muted); overflow-wrap: anywhere; }
@media (pointer: coarse) { .note-status-suggest__open { min-height: 44px; } }
.note-status-popup__name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.note-status-popup__description { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.note-status-popup__description--empty { color: var(--wn-muted); font-style: italic; }
/* The footer of a reference's popup: the point of discussion it is (Point of discussion: CR30080), whose code opens the
   history of its statuses. */
.note-popup-discussion { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; margin: .15rem 0 0; padding-top: .45rem; border-top: 1px solid var(--wn-notebook-rule); color: var(--wn-muted); font-size: .8rem; }
.note-popup-discussion[hidden] { display: none; }
/* In the header of the reference popup: one small line under the reference. */
.note-popup-discussion--heading { flex-wrap: nowrap; margin: 0; padding-top: 0; border-top: 0; font-size: .75rem; }
.note-popup-discussion--heading .note-popup-discussion__code { min-height: 1.4rem; }
.note-popup-discussion__label { font-weight: 600; }
.note-popup-discussion__code, .note-references__discussion-code { min-height: 1.75rem; padding: 0 .3rem; border: 0; border-radius: var(--wn-radius); color: var(--wn-primary); background: transparent; font: inherit; font-weight: 700; text-decoration: underline dotted; text-underline-offset: .2em; cursor: pointer; }
.note-popup-discussion__code:hover, .note-references__discussion-code:hover { background: var(--wn-active-line); text-decoration-style: solid; }
.note-popup-discussion__code:focus-visible, .note-references__discussion-code:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
@media (pointer: coarse) { .note-popup-discussion__code, .note-references__discussion-code { min-height: 44px; } }
@media (forced-colors: active) {
    .note-sheet__editor .cm-editor .cm-status-reference { background: none; }
    .note-status-popup__close { border: 1px solid CanvasText; }
    .note-popup-discussion__code, .note-references__discussion-code { color: LinkText; }
}
.note-reference-lookup__git-card .note-reference-lookup__branch { text-decoration: none; }
.note-reference-lookup__branch-icon { flex: none; width: 1rem; height: 1rem; color: var(--wn-primary); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.note-reference-lookup__branch-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (pointer: coarse) {
    .note-reference-lookup__branch, .note-reference-lookup__git-field select, .note-reference-lookup__git-other-field,
    .note-reference-lookup .note-reference-lookup__git-search { min-height: 44px; }
}
@keyframes note-reference-lookup-appear { from { opacity: 0; } }
@keyframes note-reference-lookup-search { to { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
    .note-sheet__editor .cm-editor .note-reference-lookup--searching { animation-duration: 1ms; }
    .note-reference-lookup--searching .note-reference-lookup__icon--search { animation: none; }
}
@media (forced-colors: active) {
    .note-sheet__editor .cm-editor .note-reference-lookup { border-color: CanvasText; }
    .note-reference-lookup__type { box-shadow: none; border: 1px solid CanvasText; }
    .note-reference-lookup__git-field select, .note-reference-lookup__git-other-field { border-color: CanvasText; }
    .note-reference-lookup__branch { border-color: ButtonText; }
    .note-reference-lookup__branch:hover:not(:disabled, [aria-disabled="true"]) { border-color: Highlight; background: Canvas; }
    .note-reference-lookup__branch:disabled { color: GrayText; border-color: GrayText; }
        .note-reference-lookup__branch-added { color: CanvasText; }
        .note-reference-lookup__branch-borrowed, .note-reference-lookup__group, .note-reference-lookup__meta { color: CanvasText; }
}
/* The commits overlay (git-commits.js): a notebook sheet over the editor with the latest commits of a branch, one under
   the other, each with its summary, description, author, date (and how long ago), SHA and the link to its page. The list
   scrolls inside the sheet. A closed overlay stays hidden: .modal would show it. */
.git-commits:not([open]) { display: none; }
.git-commits [hidden] { display: none; }
.git-commits__panel { display: flex; flex-direction: column; gap: .75rem; max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); }
.git-commits__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.git-commits__header h2 { width: fit-content; max-width: 100%; margin: 0; padding-bottom: .4rem; border-bottom: 2px solid var(--wn-primary); font-family: var(--wn-font-display); font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 600; overflow-wrap: anywhere; }
.git-commits__header .note-editor-icon { margin: -.5rem -.5rem 0 0; }
.git-commits__status { margin: 0; color: var(--wn-muted); }
/* "Actualizează din GitHub" of the commits of a reference: the button, the waiting icon and what it says. */
.git-commits__refresh { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; }
.git-commits__refresh[hidden], .git-commits__refresh-waiting[hidden] { display: none; }
.git-commits__refresh-waiting { display: inline-grid; place-items: center; }
.git-commits__list { min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.git-commits__item { display: grid; gap: .35rem; padding: .85rem 0; border-bottom: 1px solid var(--wn-notebook-rule); }
.git-commits__summary { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
/* A key commit of a stored list (decision 263): a base brought into the branch or its integration into a base. */
.git-commits__role { margin: 0; color: var(--wn-git-merged); font-size: .78rem; font-weight: 700; }
.git-commits__role[hidden] { display: none; }
.git-commits__item--base { border-left: 3px dashed var(--wn-git-merged); padding-left: .6rem; }
.git-commits__item--integration { border-left: 3px solid var(--wn-git-merged); padding-left: .6rem; background: var(--wn-git-merged-bg); }
.git-commits__description { margin: 0; color: var(--wn-muted); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.git-commits__meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; color: var(--wn-muted); font-size: .8rem; }
.git-commits__meta > div { display: flex; gap: .35rem; min-width: 0; }
.git-commits__meta dt { font-weight: 650; }
.git-commits__meta dt::after { content: ":"; }
.git-commits__meta dd { margin: 0; color: var(--wn-text); overflow-wrap: anywhere; }
.git-commits__ago:not(:empty)::before { content: "· "; }
.git-commits__sha { font-family: var(--wn-font-mono); font-size: .78rem; word-break: break-all; }
.git-commits__link { justify-self: start; font-size: .85rem; font-weight: 600; }
.git-commits__note { margin: 0; }
/* A pull request: its status badge before the title and its number after it. */
.git-pull__status { display: inline-block; margin-inline-end: .35rem; padding: .05rem .5rem; border-radius: 999px; color: var(--wn-text); background: var(--wn-disabled-bg); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: .1em; }
.git-pull__status--open { color: var(--wn-on-primary); background: var(--wn-primary); }
.git-pull__status--draft { color: var(--wn-disabled-text); background: var(--wn-disabled-bg); }
.git-pull__status--merged { color: var(--wn-git-merged); background: var(--wn-git-merged-bg); }
.git-pull__status--closed { color: var(--wn-danger); background: var(--wn-danger-bg); }
.git-pull__number { color: var(--wn-muted); font-weight: 600; }
@media (forced-colors: active) {
    .git-commits__item { border-bottom-color: CanvasText; }
    .git-commits__item--base, .git-commits__item--integration { border-left-color: CanvasText; }
    .git-commits__header h2 { border-bottom-color: CanvasText; }
    .git-pull__status { border: 1px solid CanvasText; }
}
/* The text and, beside it on the right, the drawer of the note's references (_NoteEditorTabPanel). */
.note-sheet__body { display: flex; flex: 1 1 auto; gap: .75rem; min-height: 0; }
.note-sheet__body > .note-sheet__editor { min-width: 0; }
/* The references drawer: closed, a narrow strip beside the text, with its name written downwards and the number of
   references; open, a column with each reference once, a link as the text first writes it, which scrolls on its own.
   Its paper is a shade deeper than the sheet, opaque, so the list passes under its sticky header. */
.note-references { --references-paper: var(--wn-notebook-drawer); flex: none; width: 3rem; min-height: 0; overflow: auto; border-radius: var(--wn-radius); background: var(--references-paper); scrollbar-width: thin; }
.note-references[open] { width: clamp(14rem, 30%, 22rem); }
/* The toggle has its own opaque paper: the summary's parent is the details element's slot, so background: inherit would
   leave it transparent over the list scrolling under it. Open, it is a header a shade deeper than the list. */
.note-references__toggle { position: sticky; top: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .6rem; min-height: 44px; padding: .75rem .25rem; border-radius: var(--wn-radius); color: var(--wn-muted); background-color: var(--references-paper); font-size: .875rem; font-weight: 650; list-style: none; cursor: pointer; }
.note-references__toggle::-webkit-details-marker { display: none; }
.note-references__toggle:hover { color: var(--wn-text); background-image: linear-gradient(rgb(36 58 54 / 8%), rgb(36 58 54 / 8%)); }
/* Inside the drawer's scroll, the focus ring is drawn within the toggle, where it cannot be cut off. */
.note-references__toggle:focus-visible { outline-offset: -3px; }
.note-references:not([open]) > .note-references__toggle { height: 100%; }
.note-references:not([open]) .note-references__label { writing-mode: vertical-rl; }
.note-references[open] > .note-references__toggle { flex-direction: row; padding: .6rem .75rem; border-bottom: 1px solid var(--wn-notebook-rule); border-radius: var(--wn-radius) var(--wn-radius) 0 0; color: var(--wn-text); background-color: var(--wn-notebook-drawer-head); }
.note-references__icon { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note-references[open] .note-references__icon { transform: rotate(180deg); }
.note-references__count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px; color: var(--wn-on-primary); background: var(--wn-primary); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.note-references__count--none { color: var(--wn-muted); background: rgb(36 58 54 / 10%); }
.note-references__content { padding: .75rem .9rem 1rem; }
.note-references__help { margin: 0 0 .75rem; color: var(--wn-muted); font-size: .8rem; }
.note-references__empty { margin: 0; color: var(--wn-muted); font-size: .875rem; }
.note-references__list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.note-references__reference { font-weight: 700; overflow-wrap: anywhere; }
/* The branches linked to the references (the Git option of the popup): the reference, the repository and the branch
   (a link to GitHub), and the owner's button that removes the link. */
.note-references__git { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--wn-notebook-rule); }
.note-references__subtitle { margin: 0 0 .5rem; color: var(--wn-muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.note-references__git-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .4rem; align-items: start; }
.note-references__git-item > :not(.note-references__remove) { grid-column: 1; }
.note-references__git-target { display: grid; min-width: 0; font-size: .85rem; }
.note-references__repository { color: var(--wn-muted); overflow-wrap: anywhere; }
.note-references__branch { font-weight: 600; overflow-wrap: anywhere; }
.note-references__reference--manual { color: var(--wn-muted); font-size: .75rem; font-weight: 650; letter-spacing: .02em; }
/* The button that adds a Git address by hand (in the overlay form), below the list of Git references. */
.note-references__manual { display: grid; gap: .4rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed var(--wn-notebook-rule); }
.note-references__manual-field { margin-bottom: 0; }
.note-references__manual-field label { font-size: .8rem; }
.note-references__manual-field input { font-size: .85rem; }
.note-references__manual-help { margin: 0; }
.note-references__manual-error { margin: 0; overflow-wrap: anywhere; }
.note-references__manual-button { justify-self: start; }
.note-references__remove { grid-column: 2; grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--wn-radius); color: var(--wn-muted); background: transparent; cursor: pointer; }
.note-references__remove svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.note-references__remove:hover { color: var(--wn-danger); background: var(--wn-danger-bg); }
.note-references__remove:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
/* The owner's Edit beside the remove button of a Git address added by hand: it opens the overlay form. */
.note-references__git-item:has(.note-references__edit) { grid-template-columns: minmax(0, 1fr) auto auto; }
.note-references__git-item > .note-references__edit { grid-column: 2; }
.note-references__git-item:has(.note-references__edit) > .note-references__remove:not(.note-references__edit) { grid-column: 3; }
.note-references__edit:hover { color: var(--wn-primary); background: var(--wn-active-line); }
/* The popup of a Git address added by hand, under its entry (where the entry is, not placed by script): its name, where it
   points, the link, Edit and its point of discussion. */
.note-references__git-item[data-git-kind="manual"] { position: relative; }
.git-manual-popup { position: absolute; z-index: 5; top: calc(100% + .25rem); left: 0; display: grid; gap: .4rem; width: min(18rem, 100%); min-width: min(14rem, calc(100vw - 2rem)); padding: .55rem .65rem; border: 1px solid var(--wn-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); box-shadow: var(--wn-shadow-raised); font-size: .875rem; line-height: 1.4; }
.git-manual-popup__location { margin: 0; color: var(--wn-muted); overflow-wrap: anywhere; }
.git-manual-popup__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
/* The points of discussion the note's title names, at the bottom of the drawer. */
.note-references__discussions { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--wn-notebook-rule); }
.note-references__discussions[hidden] { display: none; }
.note-references__discussion { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; font-size: .85rem; }
.note-references__discussion-label { color: var(--wn-muted); font-weight: 600; }
.note-references__discussion-ambiguous { flex-basis: 100%; color: var(--wn-warning); font-size: .78rem; }
.note-references__discussion-ambiguous[hidden] { display: none; }
@media (forced-colors: active) {
    .git-manual-popup { border-color: CanvasText; }
}
@media (pointer: coarse) {
    .note-references__remove { width: 44px; height: 44px; }
}
/* On a narrow window the drawer goes under the text, as a bar that opens downwards. */
@media (max-width: 700px) {
    .note-sheet__body { flex-direction: column; }
    .note-references, .note-references[open] { width: auto; }
    .note-references[open] { flex: 0 1 auto; max-height: 45%; }
    .note-references:not([open]) > .note-references__toggle { height: auto; flex-direction: row; }
    .note-references:not([open]) .note-references__label { writing-mode: horizontal-tb; }
    .note-references__icon { transform: rotate(-90deg); }
    .note-references[open] .note-references__icon { transform: rotate(90deg); }
}
@media (forced-colors: active) {
    .note-references, .note-references__count { border: 1px solid CanvasText; }
    .note-references__remove { border: 1px solid ButtonText; color: ButtonText; }
    .note-references__remove:hover { border-color: Highlight; }
}
/* Info bar under the editor: audit of the paragraph under the mouse (or at the cursor), then the shortcuts. */
.note-editor-info { display: flex; flex: none; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; padding-top: .6rem; border-top: 1px solid var(--wn-notebook-rule); color: var(--wn-muted); font-size: .8rem; }
.note-editor-info p { margin: 0; }
.note-editor-info__paragraph { color: var(--wn-text); font-weight: 600; }
@media (max-width: 450px) { .note-editor-info__help { display: none; } }
/* The link to the editor's help: discreet, in the info bar's small muted text. */
.note-editor-info__help-link { padding: 0; border: 0; color: var(--wn-muted); background: none; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.note-editor-info__help-link:hover { color: var(--wn-primary); }
.note-editor-info__help-link:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 2px; }
/* Minimized: the dialog is no longer modal and becomes the compact sheet in the bottom-left corner of the window;
   the editor sheet stays in the page, hidden, with everything typed in it. */
.note-editor-minimized { display: none; }
/* Room below the page, so the last cards can be scrolled out from under the minimized form. */
body:has(.note-editor-dialog--minimized) .site-main { padding-bottom: 8rem; }
.note-editor-dialog--minimized { inset: auto auto 1rem 1rem; display: block; width: auto; height: auto; max-width: calc(100vw - 2rem); padding: 0; background: transparent; overflow: visible; }
.note-editor-dialog--minimized > .modal-panel--editor { display: none; }
.note-editor-dialog--minimized > .note-editor-minimized { --note-corner-size: 1.5rem; display: flex; background: var(--wn-notebook-paper); align-items: center; gap: .25rem .5rem; width: min(24rem, calc(100vw - 2rem)); padding: .75rem .5rem .75rem 1rem; cursor: default; }
.note-editor-minimized__text { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.note-editor-minimized__type { color: var(--wn-muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.note-editor-minimized__title { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.note-editor-minimized__dates { display: flex; flex-wrap: wrap; gap: 0 .75rem; color: var(--wn-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
    .note-sheet__editor .cm-editor { border: 1px solid CanvasText; }
    .note-sheet__editor .cm-scroller { background-image: none; }
    .note-sheet__editor .cm-editor .cm-activeLine, .note-sheet__editor .cm-editor .cm-hoveredParagraph { outline: 1px solid Highlight; }
    /* The drawn selection would be forced to the background colour: a light mix of the system highlight keeps the text
       readable over it. */
    .note-sheet__editor { --editor-selection: color-mix(in srgb, Highlight 40%, Canvas); }
    .note-sheet__editor .cm-editor .cm-selectionLayer .cm-selectionBackground { forced-color-adjust: none; }
}

/* The overlay form of a Git reference added by hand and the history of a point of discussion: hidden until opened. */
.git-manual:not([open]), .discussion-history:not([open]), .editor-help:not([open]) { display: none; }
/* The editor's help: the keys and the status codes written with #. */
.editor-help__panel { width: min(36rem, calc(100vw - 2rem)); }
.editor-help__body { display: grid; gap: .4rem; overflow-y: auto; }
.editor-help__heading { margin: .4rem 0 0; font-size: .95rem; }
.editor-help__list { display: grid; gap: .35rem; margin: 0; padding-inline-start: 1.1rem; }
.editor-help__keys { margin-inline-end: .3rem; white-space: nowrap; }
.editor-help kbd { padding: 0 .3rem; border: 1px solid var(--wn-input-border); border-radius: 4px; background: var(--wn-surface); font-family: var(--wn-font); font-size: .8rem; }
.discussion-history [hidden] { display: none; }
.git-manual__panel { width: min(34rem, calc(100vw - 2rem)); }
.git-manual__panel form { display: grid; gap: .25rem; }
/* The history of a point of discussion: each status written beside it, in time order, with the date as a badge. */
.discussion-history__subtitle { margin: -.4rem 0 0; color: var(--wn-muted); font-size: .85rem; }
/* The heading: the code and title on the left, the button that asks the assistant on the right, the X at the far right;
   on a narrow screen the button goes to a second row, never over the title or the X. */
.discussion-history__header { flex-wrap: wrap; align-items: center; }
.discussion-history__header h2 { flex: 1 1 12rem; }
.discussion-history__ask { flex: none; min-height: 36px; padding-block: .3rem; font-size: .85rem; }
.discussion-history__ask[hidden] { display: none; }
@media (max-width: 30rem) {
    .discussion-history__header h2 { flex-basis: calc(100% - 3.5rem); }
    .discussion-history__ask { order: 3; }
}
/* The two tabs of the dialog: the one selected underlined in the primary colour; only its panel is shown. */
.discussion-history__panel { min-height: min(24rem, calc(100dvh - 4rem)); }
.discussion-history__tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--wn-notebook-rule); }
.discussion-history__tab { min-height: 40px; margin-bottom: -1px; padding: .4rem .8rem; border: 0; border-bottom: 3px solid transparent; color: var(--wn-muted);
    background: none; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.discussion-history__tab:hover { color: var(--wn-text); }
.discussion-history__tab[aria-selected="true"] { border-bottom-color: var(--wn-primary); color: var(--wn-primary); }
.discussion-history__tab:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: -3px; }
.discussion-history__tabpanel { display: flex; flex: 1 1 auto; flex-direction: column; gap: .75rem; min-height: 0; }
.discussion-history__tabpanel > .discussion-history__list { flex: 1 1 auto; min-height: 0; }
.discussion-history__tabpanel[data-history-panel="about"] { overflow-y: auto; }
/* The external links of the point of discussion: a list to choose one from, each with its description as a link and its
   address in a compact form, cut with an ellipsis (the whole address in its tooltip). */
.discussion-links { display: grid; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--wn-notebook-rule); }
.discussion-links__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.discussion-links__heading h3 { margin: 0; font-size: 1rem; }
.discussion-links__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.discussion-links__actions .btn { min-height: 36px; padding-block: .3rem; font-size: .85rem; }
.discussion-links__status { margin: 0; color: var(--wn-muted); font-size: .85rem; }
.discussion-links__status:empty { display: none; }
.discussion-links__status--error { color: var(--wn-danger); }
.discussion-links__list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.discussion-links__item { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--wn-notebook-rule);
    border-radius: var(--wn-radius); background: var(--wn-surface); }
.discussion-links__item--chosen { border-color: var(--wn-primary); box-shadow: inset 3px 0 0 var(--wn-primary); }
.discussion-links__choose { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--wn-primary); }
.discussion-links__text { display: grid; flex: 1 1 auto; min-width: 0; }
.discussion-links__description { overflow: hidden; color: var(--wn-primary); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.discussion-links__address { overflow: hidden; color: var(--wn-muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.discussion-links__open { flex: none; }
/* The small dialog of a link and the confirmation, over the dialog of the point of discussion. */
.discussion-link-form:not([open]), .discussion-confirm:not([open]) { display: none; }
.discussion-link-form .modal-panel { display: grid; gap: .25rem; width: min(32rem, calc(100vw - 2rem)); }
.discussion-link-form .actions { align-items: center; }
@media (forced-colors: active) {
    .discussion-history__tab[aria-selected="true"] { border-bottom-color: Highlight; color: Highlight; }
    .discussion-links__item { border-color: CanvasText; }
    .discussion-links__item--chosen { border-color: Highlight; border-width: 2px; box-shadow: none; }
}
.discussion-history__list { display: grid; gap: .6rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.discussion-history__item { display: grid; gap: .3rem; padding: .6rem .7rem; border: 1px solid var(--wn-notebook-rule); border-radius: var(--wn-radius); background: var(--wn-surface); }
.discussion-history__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin: 0; overflow-wrap: anywhere; }
.discussion-history__badge { padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 650; }
.discussion-history__badge--date { color: var(--wn-git-merged); background: var(--wn-git-merged-bg); }
/* Additional information: the status's catalog and the note that wrote it, in small grey text, without a background. */
.discussion-history__meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin: 0; color: var(--wn-muted); font-size: .78rem; overflow-wrap: anywhere; }
.discussion-history__meta a { color: var(--wn-primary); }
.discussion-history__cleared { margin: 0; color: var(--wn-muted); font-size: .8rem; font-style: italic; }
.discussion-history__cleared[hidden] { display: none; }
/* From the timeline of the points of discussion: the status's description and the waiting icon while the history loads. */
.discussion-history__description { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.discussion-history__waiting { display: flex; justify-content: center; margin: .5rem 0; }
/* The general description of the point of discussion: a small text area under the title, saved in the background. */
.discussion-history__about { display: grid; gap: .3rem; margin: 0; }
.discussion-history__about[hidden] { display: none; }
.discussion-history__about-label { color: var(--wn-muted); font-size: .8rem; font-weight: 600; }
.discussion-history__about-text { box-sizing: border-box; width: 100%; min-height: 3.2rem; padding: .4rem .5rem; border: 1px solid var(--wn-input-border);
    border-radius: var(--wn-radius); background: var(--wn-surface); color: var(--wn-text); font: inherit; font-size: .875rem; line-height: 1.4; resize: vertical; }
.discussion-history__about-text:focus-visible { outline: 3px solid var(--wn-primary); outline-offset: 1px; }
.discussion-history__about-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.discussion-history__about-status { color: var(--wn-muted); font-size: .8rem; }
.discussion-history__about-status--error { color: var(--wn-danger); }
@media (forced-colors: active) {
    .discussion-history__item, .discussion-history__badge { border: 1px solid CanvasText; }
}

.discussion-history__refresh {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-block: 1rem;
}
.discussion-history__refresh[hidden] { display: none; }

.git-commits__list { max-height: min(56dvh, 34rem); overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }
.git-commits__header { flex-shrink: 0; }