/* Note editor: a dialog over the board, 90% of the window, holding the note's sheet and the CodeMirror editor.
   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; margin: -.5rem -.5rem 0 0; padding-bottom: .35rem; border-bottom: 1px dashed var(--wn-input-border); }
/* 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 active tab is lighter 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%); }
.note-editor-tab--active, .note-editor-tab--active:hover { color: var(--wn-text); background: rgb(255 255 255 / 60%); 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-note-paper); box-shadow: inset 0 0 0 1px rgb(36 58 54 / 30%); }
.note-editor-tab--article .note-editor-tab__select::before { background: var(--wn-note-sage); }
.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 sheet has the colour of the note type, like its card on the board. */
.postit-panel.note-sheet--journal { --postit-color: var(--wn-note-paper); --postit-tape: url("../images/postit-tape.svg"); }
.postit-panel.note-sheet--article { --postit-color: var(--wn-note-sage); --postit-tape: url("../images/postit-tape-sage.svg"); }
/* Selections on the yellow sheet of a journal (its title, the text read without JavaScript) use the selection green: the
   note yellow other paper panels use would not show on it. */
.postit-panel.note-sheet--journal ::selection { background: var(--wn-selection); }
.note-sheet__title { flex: none; width: 100%; margin: 0; padding: .25rem 0; border: 0; border-bottom: 1px dashed var(--wn-input-border); border-radius: 0; color: var(--wn-text); background: transparent; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 650; 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 green on the yellow sheet of a
   journal and yellow on the sage sheet of an article, where the green would hardly show. */
.note-sheet__editor { --editor-selection: var(--wn-selection); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; }
.note-sheet--article .note-sheet__editor { --editor-selection: var(--wn-note-paper); }
.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: rgb(255 255 255 / 45%); 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: 1.7; }
.note-sheet__editor .cm-content { padding: 1rem 0; caret-color: var(--wn-text); }
.note-sheet__editor .cm-line { padding: 0 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-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; }
@media (forced-colors: active) {
    .note-sheet__editor .cm-editor .cm-note-reference { color: LinkText; }
}
/* The popup of a reference just typed (note-references.js), above it: a small white sheet, as the first suggestion of
   references had. The search shows only when the answer takes a moment (a text that is no reference closes it before);
   then the notes the reference opens (the type in the colour of its paper, the title) with the button that makes it a
   link, or the message that no note has it in its title. It never takes the focus by itself. */
.note-sheet__editor .cm-editor .note-reference-lookup { display: grid; gap: .4rem; width: max-content; max-width: min(24rem, calc(100vw - 2rem)); max-height: 16rem; padding: .55rem .65rem; 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-lookup--searching { color: var(--wn-muted); animation: note-reference-lookup-appear var(--wn-motion) 250ms both; }
.note-reference-lookup__status { display: grid; gap: .35rem; }
.note-reference-lookup__message { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 600; }
.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--found .note-reference-lookup__icon--found { display: block; color: var(--wn-primary); }
.note-reference-lookup--missing .note-reference-lookup__icon--missing { display: block; color: var(--wn-warning); }
.note-reference-lookup__notes { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.note-reference-lookup__note { display: flex; align-items: baseline; gap: .5rem; }
.note-reference-lookup__type { flex: none; padding: .05rem .4rem; border-radius: 4px; background: var(--wn-note-paper); 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__note--article .note-reference-lookup__type { background: var(--wn-note-sage); }
.note-reference-lookup__name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.note-reference-lookup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: .1rem 0 0; }
.note-reference-lookup .note-reference-lookup__create { min-height: 36px; padding: .3rem .8rem; }
@media (pointer: coarse) {
    .note-reference-lookup .note-reference-lookup__create { min-height: 44px; }
}
.note-reference-lookup__hint { color: var(--wn-muted); font-size: .75rem; }
.note-reference-lookup:not(.note-reference-lookup--found) :is(.note-reference-lookup__notes, .note-reference-lookup__actions) { display: none; }
@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; }
}
/* 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 the sheet's colour lightened as under the text, but opaque, so the list passes under its sticky header. */
.note-references { --references-paper: color-mix(in srgb, var(--postit-color, var(--wn-note-paper)) 55%, var(--wn-surface)); 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 dashed var(--wn-input-border); border-radius: var(--wn-radius) var(--wn-radius) 0 0; color: var(--wn-text); background-color: color-mix(in srgb, var(--postit-color, var(--wn-note-paper)) 85%, var(--wn-surface)); }
.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; }
/* 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; }
}
/* 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 dashed var(--wn-input-border); 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; } }
/* 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 { display: flex; 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-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, .note-sheet--article .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; }
}