/* ============ MONTHLY NOTES (month-notes.js) ============ */
#monthNotes[hidden] { display: none; }
.mn-card { margin: 14px 0 6px; padding-bottom: 10px; }
.mn-ico { display: flex; color: var(--text-subtle); flex-shrink: 0; }
.mn-ico svg { width: 18px; height: 18px; }
.mn-card .pl-group-head { gap: 8px; }
.mn-input {
  display: block; width: 100%; min-height: 150px; margin: 10px 0 0; padding: 4px 0;
  background: none; border: none; border-radius: 0; resize: none; overflow: hidden;
  color: var(--text); font: inherit; font-size: 16px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mn-input::placeholder { color: var(--placeholder); }
.mn-input:focus { outline: none; }
.mn-input:disabled { background: none; opacity: 1; }
.mn-msg { font-size: 0.82em; color: var(--red); line-height: 1.45; }
.mn-msg:empty { display: none; }

/* A small icon on the 12-month grid for months with a note */
.ym-tile.has-note { position: relative; }
.ym-tile.has-note .ym-name { padding-right: 14px; }
.mn-tile-ico { position: absolute; top: 10px; right: 9px; display: flex; color: var(--text-subtle); opacity: 0.75; pointer-events: none; }
.mn-tile-ico svg { width: 11px; height: 11px; }
@media (min-width: 700px) {
  .mn-tile-ico { top: 12px; right: 12px; }
}