.client-followups { margin: 1rem 0; padding: 1rem; border: 1px solid var(--warm-200); background: var(--warm-50); color: var(--ink-900); }
.client-followups > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.client-followups h2 { margin: 0; font: 650 1rem/1.4 var(--interface-font); }
.client-followups header p, .client-followups__status { margin: .3rem 0; color: var(--ink-500); font-size: .75rem; }
.client-followups__status:empty { display: none; }
.client-followups__form { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; margin-top: 1rem; }
.client-followups [hidden] { display: none !important; }
.client-followups label { display: grid; min-width: 0; gap: .3rem; font-size: .72rem; font-weight: 650; }
.client-followups input, .client-followups textarea { width: 100%; min-width: 0; padding: .65rem; border: 1px solid var(--warm-200); border-radius: 4px; background: white; color: var(--ink-900); font: 400 .8rem/1.4 var(--interface-font); }
.client-followups__notes, .client-followups__form-actions { grid-column: 1 / -1; }
.client-followups__form-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.client-followups__list { margin: .7rem 0 0; padding: 0; list-style: none; }
.client-followups__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--warm-200); }
.client-followups h3 { margin: 0; font: 650 .82rem/1.4 var(--interface-font); overflow-wrap: anywhere; }
.client-followups time { font-size: .72rem; color: var(--ink-500); }
.client-followups__list p { margin: .25rem 0 0; font-size: .78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.client-followups__actions { display: flex; align-items: flex-start; gap: .5rem; flex-shrink: 0; }
.client-followups__actions button, .client-followups__status button { padding: .35rem .5rem; border: 1px solid var(--warm-200); border-radius: 4px; background: white; color: var(--evergreen-900); font: 650 .7rem/1.4 var(--interface-font); }
.client-followups__empty { color: var(--ink-500); font-size: .78rem; }
.client-followups [data-status="complete"] h3 { color: var(--ink-500); }
.client-followups :is(input, textarea, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .client-followups__form { grid-template-columns: minmax(0,1fr); } .client-followups__list li { flex-direction: column; gap: .5rem; } .client-followups > header { flex-wrap: wrap; } }