/* Notes and needs on the household and person pages (HouseholdDesktop, HouseholdPhone, PersonDesktop, PersonPhone):
   the Needs card, the add-note form, the note entries in the timeline and the note's edit form.  On phones the
   Needs card and the note form come first, above the details, as the phone designs stack them. */

@media (max-width: 1023px) {
  .members-detail-notes .members-detail-side, .members-detail-notes .members-detail-main { display: contents; }
  .members-detail-notes .notes-first { order: -1; }
}

/* The Needs card's rows.  The check box comes from needs/check. */
.need-rows { list-style: none; margin: 0; padding: 0; }
.need-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--border-row); }
.need-row-text { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.need-row-title { font-size: 15px; font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; }
.need-row.is-done .need-row-title { text-decoration: line-through; color: var(--ink-500); }
.need-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--ink-500); }
.need-row-done { font-size: 12px; font-weight: 700; color: var(--green-800); }
@media (max-width: 1023px) { .need-row { padding: 12px 14px; } }

/* Add a note, and a note's edit form. */
.note-form-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border: 1px solid var(--border-card);
  border-radius: var(--radius-card); background: #FFFFFF;
}
.note-form { display: flex; flex-direction: column; gap: 10px; }
.note-form .textarea { resize: vertical; }
.note-form-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; }
.note-form .checkbox { min-height: 36px; font-size: 14px; }
.checkbox-ruby { color: var(--ruby-800); }
.checkbox-ruby input { accent-color: var(--ruby-800); }
.checkbox input:disabled { cursor: not-allowed; }
.checkbox:has(input:disabled) { cursor: not-allowed; }
.note-form-hint { font-size: 12px; color: var(--ink-500); }
.note-form-save { margin-left: auto; }
.note-form-actions { display: flex; align-items: center; gap: var(--space-12); }
.note-confidential-line { display: none; font-size: 12px; color: var(--ruby-800); }
.note-form:has(.note-confidential input:checked) .note-confidential-line { display: block; }
.note-form-card .status-card, .note-edit-frame .status-card { padding: 16px; box-shadow: none; }
@media (max-width: 1023px) {
  .note-form-card { padding: 14px; }
  .note-form .checkbox { min-height: 40px; }
  .note-form .checkbox input { width: 20px; height: 20px; }
  .note-form-hint { flex-basis: 100%; }
  .note-form-save { margin-left: 0; height: 48px; padding: 0 24px; font-size: 15px; }
}

/* A note on its own edit page. */
.note-edit-page { padding: 16px 20px; max-width: 720px; }
.note-edit-frame { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1023px) { .note-edit-page { padding: 14px; } }

/* Note and need entries in the timeline (data/ActivityFeed glyphs). */
.timeline-glyph-note { background: var(--navy-50); color: var(--navy-900); }
.timeline-glyph-need, .timeline-glyph-confidential { background: var(--ruby-50); color: var(--ruby-800); }
.timeline-glyph-done { background: var(--green-50); color: var(--green-800); }
.timeline-glyph-reopened { background: var(--walnut-100); color: var(--walnut-900); }
.timeline-edit { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; font-weight: 700; text-decoration: none; }
.timeline-quote { font-size: 14px; font-style: italic; color: var(--ink-700); line-height: var(--leading-note); overflow-wrap: anywhere; }
.timeline-carried { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--gold-900); }
.timeline-versions summary { min-height: 32px; display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--navy-700); cursor: pointer; }
.timeline-version-list { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--paper-300); }
.timeline-version { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.timeline-version .timeline-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1023px) {
  .timeline-head .timeline-edit { min-height: 44px; }
}