/* The profile's lists, notes, addresses and documents: their rows and the steps they open in the profile's modal. */

/* Lists: the x is 16 px, its target reaches 24 so a click beside it still takes the list off. */
.cs-profile .cs-lists-block .ds-chip__remove::after { content: ""; position: absolute; inset: -4px; }
.cs-lists-block__empty { margin: 0; font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); }

.cs-profile-lists__search { margin-block-start: var(--ds-space-4); }
.cs-profile-lists { display: flex; flex-direction: column; gap: var(--ds-space-1); margin-block-start: var(--ds-space-2); }
.cs-profile-lists__options { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cs-profile-lists__option {
  --hover-size: 0;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  inline-size: 100%;
  min-block-size: var(--ds-menu-choice-height);
  padding: 4px var(--ds-space-2);
  border: 0;
  border-radius: var(--ds-menu-item-radius);
  background: transparent;
  color: var(--ds-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.cs-profile-lists__option:hover { background: var(--ds-fill-hover); }
.cs-profile-lists__option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-profile-lists__option .ds-chip { min-inline-size: 0; max-inline-size: 60%; }
.cs-profile-lists__members { margin-inline-start: auto; font-size: var(--ds-status-font-sm); color: var(--ds-text-muted); white-space: nowrap; }
.cs-profile-lists__new { align-self: flex-start; }
.cs-profile-lists__note { margin: 0; padding-inline: var(--ds-space-2); font-size: var(--ds-font-size-xs); color: var(--ds-text-muted); }

@media (pointer: coarse) {
  .cs-profile-lists__option { min-block-size: 40px; }
}

/* Notes: edit and remove are icons at the end of the head line, not a row of words under the text. */
.cs-note-card--person .cs-note-card__head { justify-content: flex-start; }
.cs-note-card--person .cs-note-card__actions { display: flex; gap: 2px; margin-block-start: 0; margin-inline-start: auto; }
.cs-note-card--person .cs-note-card__actions :where(a, button):hover { background: var(--ds-fill-hover); }

/* Addresses: the Receita's missing CEP opens the same modal, filled in, from a link-like button. */
.cs-address-missing-cep__fill {
  --hover-size: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-cta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cs-address-missing-cep__fill:hover { text-decoration: underline; }
.cs-address-missing-cep__fill:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; border-radius: 0.25rem; }

/* In the sheet, or a form modal, the address is a grid of six: CEP, País, Rua | Número, Complemento | Bairro, Cidade | UF. */
:is(.cs-profile-modal, .cs-modal--form) .cs-address { gap: var(--ds-space-3); }
:is(.cs-profile-modal, .cs-modal--form) .cs-address .cs-person-form__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ds-space-3); }
:is(.cs-profile-modal, .cs-modal--form) .cs-address .cs-person-form__grid > * { grid-column: span 3; }
:is(.cs-profile-modal, .cs-modal--form) .cs-address .cs-person-form__grid > :is(.cs-address__wide, :has(> [name$="[city]"])) { grid-column: span 4; }
:is(.cs-profile-modal, .cs-modal--form) .cs-address .cs-person-form__grid > :is(:has(.cs-address__number), :has([name$="[state]"])) { grid-column: span 2; }
/* The CEP cell is also the street search, which needs the sheet's width: it and the country each take the row, at every width. */
:is(.cs-profile-modal, .cs-modal--form) .cs-address .cs-person-form__grid > :is(:has([name$="[postal_code]"]), :has(> [name$="[country]"])) { grid-column: 1 / -1; }
/* On a phone a third is too narrow for "Paraná" in a select, or for "Sem número" under the number: the UF and the number take half. */
@media (max-width: 30rem) {
  :is(.cs-profile-modal, .cs-modal--form) .cs-address .cs-person-form__grid > :is(:has(> [name$="[city]"]), :has([name$="[state]"]), .cs-address__wide, :has(.cs-address__number)) {
    grid-column: span 3;
  }
}
/* "Sem número" goes under its narrow field. */
:is(.cs-profile-modal, .cs-modal--form) .cs-address__number { display: flex; flex-direction: column; gap: var(--ds-space-1); }
:is(.cs-profile-modal, .cs-modal--form) .cs-address__number .input { padding-inline-end: 12px; }
:is(.cs-profile-modal, .cs-modal--form) .cs-address__number .cs-address__no-number { position: static; white-space: nowrap; }

/* Field labels in the profile's sheets are the info line's label: a step under the value, muted, regular. */
.cs-profile-modal .cs-form-field__label { font-size: var(--ds-info-label); font-weight: var(--ds-weight-regular); color: var(--ds-text-muted); }