.notesButton { display:inline-flex; align-items:center; gap:7px; }
.noteCount { display:inline-grid; min-width:22px; height:22px; padding:0 6px; place-items:center; border-radius:999px; background:#dfe9d0; color:#244b34; font-size:12px; font-weight:850; }
.notesButton.hasOpenNotes { border-color:#99af80; background:#f5faed; }
#notesDialog { width:min(620px,94vw); max-height:88vh; padding:0; }
.notesDialogPanel { padding:22px; }
.notesEyebrow { display:block; margin-bottom:3px; color:#6b776f; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.notesDialogPanel h2 { margin:0; }
.notesSummary { margin:10px 0 16px; color:#647168; font-size:13px; }
.notesList { display:grid; gap:9px; max-height:43vh; overflow:auto; padding-right:3px; }
.noteItem { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:start; padding:13px; border:1px solid #d7dfd7; border-radius:11px; background:#fff; }
.noteItem.completed { background:#f4f6f3; color:#778078; }
.noteCheck { display:grid; width:24px; height:24px; place-items:center; margin-top:1px; }
.noteCheck input { width:18px; height:18px; margin:0; accent-color:#4d7659; }
.noteContent p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.noteItem.completed .noteContent p { text-decoration:line-through; }
.noteContent time { display:block; margin-top:6px; color:#7a857d; font-size:11px; }
.deleteNote { padding:5px 8px; border:0; background:transparent; color:#8a5147; font-size:12px; }
.deleteNote:hover { background:#f8ebe8; }
.notesEmpty { padding:20px; border:1px dashed #c8d1c8; border-radius:11px; color:#737f77; text-align:center; background:#fafbfa; }
.addNoteForm { margin-top:18px; padding-top:16px; border-top:1px solid #e0e5e0; }
.addNoteForm > label { display:block; margin-bottom:6px; font-size:13px; font-weight:750; }
.addNoteForm textarea { width:100%; min-height:82px; resize:vertical; }
.addNoteForm > div { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:9px; }

@media(max-width:700px) {
  .notesButton { width:auto !important; }
  #notesDialog { width:96vw; }
  .notesDialogPanel { padding:17px; }
  .noteItem { grid-template-columns:auto 1fr; }
  .deleteNote { grid-column:2; justify-self:start; }
  .addNoteForm > div { align-items:stretch; flex-direction:column; }
}