/* Follow-ups (ADR-0173): two columns, call-backs left and notes for
 * management right (owner, 2026-10-16). The call-backs are the injury list row
 * (css/injuries.css), stacked here to fit a column like the note rows: who and
 * the date or actions on the first line, the text under it (two lines), chips
 * last. One column below 1080px. */

.follow-ups-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.follow-ups-cols > .titled-section { min-width: 0; }
.follow-ups-cols > .titled-section:not(.hidden) + .titled-section:not(.hidden) { margin-top: 0; }

.follow-ups-cols .injury-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main when" "chips chips";
  align-items: start;
  row-gap: var(--space-2);
}

.follow-ups-cols .injury-row-when { grid-area: when; text-align: right; }
.follow-ups-cols .injury-row-main { grid-area: main; }
.follow-ups-cols .injury-row-chips { grid-area: chips; justify-content: flex-start; }

.follow-ups-cols .injury-row-what {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.follow-up-notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A note row is stacked to fit its column: who and text, then the row's
 * actions (auto-placed into the free cell, so `.row-actions` keeps its one
 * owner), chips on their own line. */
.follow-up-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main actions" "chips chips";
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
}

.follow-up-note.is-important { background: var(--color-warning-tint); }

.follow-up-note-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.follow-up-note-who { font-weight: var(--font-semibold); }

.follow-up-note-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.follow-up-note-text p { margin: 0; }

.follow-up-note-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}


@media (max-width: 1080px) {
  .follow-ups-cols { grid-template-columns: minmax(0, 1fr); }
}