/* Notebook paper ("Caiet liniat"): the surface of the pages, of the dialogs over them and of the note editor. A sheet
   almost white, with a small sage tape on the top edge; its headings are serif and underlined in the accent colour.
   The board keeps its post-its (postit.css); the ruled lines and the margin of the editor's text are in note-editor.css. */
.notebook-panel { position: relative; color: var(--wn-text); background: var(--wn-notebook-paper); border: 0; border-radius: 6px; box-shadow: var(--wn-shadow-notebook); }
/* The tape straddles the top edge; decoration only, it never captures pointer input. */
.notebook-panel::before { content: ""; position: absolute; z-index: 1; top: -.75rem; left: 50%; width: 4rem; height: 1.6rem; background: url("../images/postit-tape-sage.svg") center / contain no-repeat; transform: translateX(-50%) rotate(-2deg); pointer-events: none; }
/* The note editor has its tabs at the top edge: no tape there. */
.notebook-panel.note-sheet::before { content: none; }
:is(.notebook-panel > h1, .notebook-panel > h2, .notebook-panel .page-heading h1) { width: fit-content; max-width: 100%; padding-bottom: .4rem; border-bottom: 2px solid var(--wn-primary); font-family: var(--wn-font-display); font-weight: 600; letter-spacing: -.005em; }
.notebook-panel .data-table th, .notebook-panel .data-table td { border-bottom-color: var(--wn-notebook-rule); }
/* The folded corner of a note's sheet (the editor window and its minimized form) has the colour of the note type, like
   its card on the board. Under the header, so the Close button stays on top of it. */
.note-sheet { --note-corner: var(--wn-notebook-corner-journal); --note-corner-size: 3rem; }
.note-sheet--article { --note-corner: var(--wn-notebook-corner-article); }
.notebook-panel.note-sheet::after { content: ""; position: absolute; top: 0; right: 0; width: var(--note-corner-size); height: var(--note-corner-size); border-top-right-radius: 6px; background: linear-gradient(225deg, var(--note-corner) 50%, transparent 50%); pointer-events: none; }
@media (max-width: 700px) { .note-sheet { --note-corner-size: 2rem; } }
@media (forced-colors: active) {
    .notebook-panel { background: Canvas; border: 1px solid CanvasText; }
    .notebook-panel::before, .notebook-panel.note-sheet::after { display: none; }
    :is(.notebook-panel > h1, .notebook-panel > h2, .notebook-panel .page-heading h1) { border-bottom-color: CanvasText; }
}