/* Pinned notes: a small yellow pin on any box with open notes, and the notes list in the
   inspector. The yellow is fixed and the text on it dark, so it reads on every theme. */
.pin { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px;
  border-radius: 3px 3px 3px 0; background: #f2d14b; color: #2a1b0c; font: 700 10px var(--mono); box-shadow: 0 1px 2px var(--shadow); vertical-align: middle; }
.pin::before { content: "\270E"; font-weight: 400; margin-right: 2px; }
.lcard .pin { position: absolute; bottom: 8px; right: 8px; }
.notes-panel { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 12px; }
.note-pin { background: color-mix(in srgb, #f2d14b 16%, var(--panel)); border: 1px solid color-mix(in srgb, #c9a92a 55%, var(--line)); border-left: 4px solid #d8b52f;
  border-radius: 0 6px 6px 0; padding: 7px 10px; display: flex; flex-direction: column; gap: 5px; }
.note-pin.resolved { background: var(--raise); border-left-color: var(--line); opacity: .75; }
.note-pin.resolved .note-text { text-decoration: line-through; text-decoration-color: var(--muted); }
.note-meta { font-size: 11.5px; color: var(--muted); }
.note-meta b { color: var(--fg); }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.note-pin .row { gap: 6px; }