.client-document-intro { margin: 1rem 0; color: #475569; line-height: 1.5; }
.client-document-groups { display: grid; gap: .75rem; }
.client-document-group { min-width: 0; border: 1px solid #cbd5e1; border-radius: .75rem; background: #fff; }
.client-document-group summary { min-height: 3.5rem; padding: 1rem; cursor: pointer; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.client-document-group summary:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; border-radius: .75rem; }
.client-document-count { float: right; margin-left: .75rem; font-size: .8rem; font-weight: 400; color: #475569; }
.client-document-group-body { display: grid; gap: 1rem; padding: 0 1rem 1rem; }
.client-document-dropzone { max-width: none; transition: background-color .15s; }
.client-document-dropzone.is-dragging { background: #eff6ff; outline: 2px solid #1d4ed8; outline-offset: 2px; }
.client-document-selection { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.client-document-selection li { display: flex; align-items: center; gap: .75rem; justify-content: space-between; padding: .5rem; background: #f8fafc; border-radius: .5rem; }
.client-document-selection li span { min-width: 0; overflow-wrap: anywhere; font-size: .875rem; }
.client-document-selection button { flex: 0 0 auto; min-height: 44px; padding: .5rem; color: #1e40af; border: 1px solid #94a3b8; border-radius: .5rem; background: #fff; font-size: .8rem; }
.client-document-selection button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
@media (max-width: 430px) { .client-document-count { float: none; display: block; margin: .25rem 0 0; } .client-document-selection li { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .client-document-dropzone { transition: none; } }