/* Receipt notes with @-mentions (087) — the Notes section in a receipt's pop-up. */
.notes-list { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 8px; }
.notes-list .note { margin: 0; }
li.note { background: var(--raised); border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 10px; }
li.note.auto { border-left: 3px solid var(--accent); }
.note-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.note-head .linkish { margin-left: auto; padding: 0; min-height: 32px; }
.note-body { margin-top: 4px; line-height: 1.45; overflow-wrap: anywhere; }
.note-delivery { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.note-chip { display: inline-block; border-radius: 6px; padding: 0 6px; font: inherit; line-height: 1.5;
             background: rgba(48, 209, 88, .14); color: #86e8a4; border: 0; }
.note-chip.receipt { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; }
.note-chip.receipt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-chip.group { background: rgba(255, 196, 87, .13); color: #ffd98a; }
.note-compose textarea { width: 100%; min-height: 64px; resize: vertical; }
.note-input-wrap { position: relative; }
.note-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; list-style: none; margin: 2px 0 0;
                padding: 4px; background: var(--surface-solid); border: 1px solid var(--hairline-strong);
                border-radius: 10px; max-height: 260px; overflow-y: auto; }
.note-suggest li { padding: 8px 10px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.note-suggest li.on, .note-suggest li:hover { background: var(--hover); }
/* "edited": a quiet tag, no underline (Jay, 2026-10-14), that opens every version. */
.note-edited { background: none; border: 0; padding: 2px 4px; margin: 0; font: inherit; font-size: 12px;
               color: var(--ink-faint); text-decoration: none; cursor: pointer; border-radius: 4px; min-height: 24px; }
.note-edited:hover, .note-edited[aria-expanded="true"] { color: var(--ink-dim); background: var(--hover); }
.note-edited:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.note-history { margin-top: 6px; padding: 6px 8px; border-left: 2px solid var(--hairline-strong); }
.note-history ol { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.note-history-title { font-size: 12px; color: var(--ink-faint); }
.note-history-body { overflow-wrap: anywhere; }
.note-edit-box { margin-top: 6px; }
.note-ro { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.note-ro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }