/* One paper surface per content panel; inner fields stay on the same sheet. */
.postit-panel, .note-card {
    /* Yellow paper has the cream tape; green paper sets the green tape together with its colour. */
    --postit-tape: url("../images/postit-tape.svg");
    overflow: visible;
    background: var(--postit-color, var(--wn-note-paper));
    border: 0;
    border-radius: 1px 2px 3px 2px;
    /* A single shadow layer on the element: a second offset layer shows as a doubled bottom edge. */
    box-shadow: var(--wn-shadow-paper);
}
.postit-panel { position: relative; --postit-color: var(--wn-note-sage); --postit-tape: url("../images/postit-tape-sage.svg"); }
/* The sage panel is close to the selection green, so selections and ghost hovers on it use the note yellow. */
.postit-panel ::selection { background: var(--wn-note-paper); }
.postit-panel .btn-ghost:hover { background: var(--wn-note-paper); }
/* The tape straddles the top edge. As a pseudo-element it is decoration and never captures pointer input. On the
   owner's cards it is an element instead (note-card__tape), in the same place: the handle for dragging the card. */
.postit-panel::before, .note-card::before, .note-card__tape {
    position: absolute;
    z-index: 1;
    top: -1rem;
    left: 50%;
    width: 5rem;
    height: 2.2rem;
    background: var(--postit-tape) center / contain no-repeat;
    transform: translateX(-50%) rotate(-2deg);
}
.postit-panel::before, .note-card::before { content: ""; pointer-events: none; }
.note-card:has(> .note-card__tape)::before { content: none; }
.note-card--sage { --postit-color: var(--wn-note-sage); --postit-tape: url("../images/postit-tape-sage.svg"); }
/* Journals are paper yellow, articles sage; the unsaved card previews the colour of the chosen type. */
.note-card--article, .note-card--draft:has(.note-type-switch input[value="Article"]:checked) {
    --postit-color: var(--wn-note-sage);
    --postit-tape: url("../images/postit-tape-sage.svg");
}
.note-card--peach { --postit-color: var(--wn-note-peach); }
.note-card--blue { --postit-color: var(--wn-note-blue); }
.note-card[aria-current="page"], .note-card[aria-pressed="true"] {
    outline: 2px solid var(--wn-primary);
    outline-offset: 2px;
}
@media (forced-colors: active) {
    .postit-panel, .note-card { background: Canvas; border: 1px solid CanvasText; }
    .postit-panel::before, .note-card::before { display: none; }
    /* The handle stays, drawn as a small bar. */
    .note-card__tape { background: ButtonFace; border: 1px solid ButtonText; }
}