/* The person's step in the profile's modal, and the confirmation of what a save would take away. */
.cs-person-edit { display: flex; flex-direction: column; gap: var(--ds-space-3); }

/* The step's title names the kind the segmented control holds, as the fields under it do. */
#profile_modal:has(input[name$="[kind]"][value="company"]:checked) .cs-modal__title [data-kind="individual"],
#profile_modal:has(input[name$="[kind]"][value="individual"]:checked) .cs-modal__title [data-kind="company"] { display: none; }
/* Who the person is on top; the rest of their kind below a hairline. */
.cs-person-edit__part { padding-block-start: var(--ds-space-3); border-block-start: 1px solid var(--ds-border-elevated); }

/* Two columns where the sheet has room for them, one on the phone. */
.cs-profile-modal .cs-person-form__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--ds-space-3); }
.cs-person-edit__custom { display: flex; flex-direction: column; gap: var(--ds-space-2); margin-block-start: var(--ds-space-2); }
/* A group's name inside the sheet, in the label's own type: no capitals, a step above the labels by weight only. */
.cs-person-edit__group { margin: 0; font-size: var(--ds-font-size-compact); font-weight: var(--ds-weight-semibold); color: var(--ds-text); }

.cs-person-edit__changes { display: flex; flex-direction: column; gap: var(--ds-space-1); margin: 0; padding-inline-start: 1.1em; list-style: disc; }
.cs-person-edit__changes li { font-size: var(--ds-font-size-compact); color: var(--ds-text-secondary); }

/* Who already has the document, and the two ways out; the field keeps what was typed. */
.cs-document-lookup__existing[hidden] { display: none; }
.cs-document-lookup__existing-body { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.cs-document-lookup__existing-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.cs-document-lookup__existing-actions [hidden] { display: none; }
/* The Receita's value beside one already typed: a thin line under the field, with its action. */
.cs-document-lookup__suggestion { align-self: flex-start; }
.cs-document-lookup__offer { align-self: flex-start; }
.cs-document-lookup__offer[hidden] { display: none; }

/* The photo step: the face as it will look, round at the profile's own size, beside the file to pick. */
.cs-person-photo { display: flex; align-items: center; gap: var(--ds-space-4); }
.cs-person-photo__preview { flex: none; inline-size: 72px; block-size: 72px; border-radius: var(--ds-radius-full); object-fit: cover; background: var(--ds-fill); }
.cs-person-photo__pick { display: flex; flex-direction: column; gap: var(--ds-space-1); min-inline-size: 0; }
.cs-person-photo__pick .cs-form-field__hint { margin: 0; }