/* The v5 of the Atendimento's people pages (Pessoas, Grupos, Campos, Importação), on top of customer_support.css. */

/* A page form: its sheets on the contact panel step's 16 px ruler, a step apart, the small buttons right under them. */
:where(html[data-visual="v5"]) .cs-settings .cs-contact-form { gap: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-settings .cs-contact-form__card { gap: var(--ds-space-3); padding: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-settings .cs-person-form__grid { gap: var(--ds-space-3) var(--ds-space-4); }

/* With the kind chosen first, "Quem é o quê" reads the tie whole, one way per row: both names in full (they wrap, never cut),
   a radio at the start, a hairline between the two, and the years following as the dates are picked. */
.cs-relationship-sides__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.cs-relationship-sides--sentences {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-border-elevated);
  border-radius: var(--ds-radius-xl);
}
.cs-relationship-side {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-3);
  font-size: var(--ds-info-value);
  line-height: 1.4;
  color: var(--ds-text-secondary);
  cursor: pointer;
}
.cs-relationship-side + .cs-relationship-side { border-block-start: 1px solid var(--ds-border-elevated); }
.cs-relationship-side:has(:checked) { color: var(--ds-text); }
/* The circle is the DS radio's (ds-radio__box): the row lights on hover, the circle only darkens its ring. */
.cs-relationship-side .ds-radio__box { margin-block-start: 0.15em; }
.cs-relationship-side__text { min-inline-size: 0; overflow-wrap: anywhere; }
.cs-relationship-side__text strong { font-weight: var(--ds-weight-medium); }
.cs-relationship-side__period { color: var(--ds-text-muted); }
@media (any-hover: hover) {
  .cs-relationship-side:hover { background: var(--ds-fill-hover-elevated); }
  .cs-relationship-side:first-child:hover { border-start-start-radius: inherit; border-start-end-radius: inherit; }
  .cs-relationship-side:last-child:hover { border-end-start-radius: inherit; border-end-end-radius: inherit; }
}

/* Step 1 of a new tie: the kinds under their group's name, the groups a step apart. */
.cs-relationship-kinds { gap: var(--ds-space-4); }
.cs-relationship-kinds .ds-options__title { margin-block-end: var(--ds-space-1); padding-inline: 0; font-size: var(--ds-info-label); }
.cs-relationship-step .cs-modal__title { overflow-wrap: anywhere; }
.cs-relationship-step .cs-modal__title strong { font-weight: inherit; }

/* Novo tipo… is a small step off the kind, not a bar; the role takes its own row so the two dates sit side by side. */
.cs-relationship-new-kind { align-self: flex-start; }
.cs-relationship-fields__role { grid-column: 1 / -1; }

:where(html[data-visual="v5"]) .cs-people-page-notice { margin-block-end: var(--ds-space-3); }

/* Picking a person, on the page or in the profile's modal: rows of 56, no borders, the hover a pill, as the panel's search results. */
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-modal__list {
  gap: 0;
  max-block-size: none;
  margin-block-start: 0;
  padding: var(--ds-space-1);
  overflow: visible;
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
}
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-modal__list:not(:has(.cs-modal__choice, .cs-person-choice__new)) { display: none; }
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-modal__list:has(> .cs-person-choice__empty) { display: flex; padding: var(--ds-space-4); }
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-modal__choice {
  min-block-size: 56px;
  padding: var(--ds-space-2) var(--ds-space-3);
  border: 0;
  border-radius: var(--ds-radius-lg);
  background: none;
}
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-modal__choice:hover { background: var(--ds-fill-hover); }
}
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-modal__choice-title { font-size: var(--ds-info-value); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-modal__choice-hint { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-person-choice__icon { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) :is(.cs-settings, .cs-profile-modal) .cs-person-choice__new { padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-1); margin: 0; }
/* In the modal the people found are rows with a hairline between them, inset like the text; the lit row hides the two
   lines around it. A long name wraps whole. */
:where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__list { padding-inline: 0; }
/* flex-shrink: in the list that scrolls, a long name's row would otherwise be squeezed under its own text. */
:where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__list > .cs-modal__choice { position: relative; flex-shrink: 0; }
:where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__list > .cs-modal__choice + .cs-modal__choice::before {
  content: "";
  position: absolute;
  inset: 0 var(--ds-space-3) auto;
  border-block-start: 1px solid var(--ds-border-elevated);
}
:where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__list > .cs-modal__choice:focus-visible::before,
:where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__list > .cs-modal__choice:focus-visible + .cs-modal__choice::before { content: none; }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__list > .cs-modal__choice:hover::before,
  :where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__list > .cs-modal__choice:hover + .cs-modal__choice::before { content: none; }
}
:where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__choice-title { overflow-wrap: anywhere; }
/* Who to tie to: the people found scroll on their own, so the search, "Cadastrar" and the buttons stay in sight. */
.cs-profile-modal .cs-relationship-pick .cs-modal__list { max-block-size: min(22rem, 45dvh); overflow-y: auto; }

/* The people list: rows as the inbox's cards, the name in the body at 500, the number and the pills under it. */
:where(html[data-visual="v5"]) .cs-people-kinds { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-person-row { gap: var(--ds-space-3); padding-block: var(--ds-space-1); }
/* The filters sit a step apart and a step above the list they cut, the same step as the search above them. */
:where(html[data-visual="v5"]) .cs-people-filters { gap: var(--ds-space-2); margin-block-end: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-people-filters__row { gap: var(--ds-space-2) var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-person-row__name { font-size: var(--ds-info-value); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-person-row :is(.cs-person-row__detail, .text-\[13px\]) { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-person-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--ds-space-2); min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-person-row__meta > .cs-person-row__detail { flex-shrink: 0; }
/* The pills always take their own line, as on the inbox's card: beside the number they were cut to "In…" on a phone. */
:where(html[data-visual="v5"]) .cs-person-row__meta > .cs-person-row__lists { flex: 1 1 100%; }

/* The profile's numbers, dates and registration are the panel's info line (item 25), in columns on a wide sheet. */
:where(html[data-visual="v5"]) .cs-profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  column-gap: var(--ds-space-4);
  padding-block: var(--ds-space-2);
}
:where(html[data-visual="v5"]) .cs-profile-facts .cs-profile-stats__scope-icon { display: inline-flex; vertical-align: -0.15em; margin-inline-start: 2px; color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-profile-facts--plain { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
:where(html[data-visual="v5"]) .cs-profile-facts--plain.ds-facts--icons .ds-facts__row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "value" "label";
}

/* The profile's rows: the name in the body at 500 and the detail a step under, as the list rows. */
:where(html[data-visual="v5"]) .cs-profile .cs-settings__list > .cs-card :is(.text-sm.font-semibold, .cs-address__label) {
  font-size: var(--ds-info-value);
  font-weight: var(--ds-weight-medium);
}
:where(html[data-visual="v5"]) .cs-profile .cs-settings__list > .cs-card .text-\[13px\] { font-size: var(--ds-info-label); }
:where(html[data-visual="v5"]) .cs-profile .cs-settings__list > .cs-card { align-items: flex-start; }
:where(html[data-visual="v5"]) .cs-profile .cs-settings__list > .cs-card > svg:first-child { block-size: calc(var(--ds-info-value) * 1.4); }
:where(html[data-visual="v5"]) .cs-profile :is(section, .cs-profile-stats-block) > :is(h2.cs-settings__subtitle, div > h2.cs-settings__subtitle),
:where(html[data-visual="v5"]) .cs-profile section > .flex > h2.cs-settings__subtitle { padding-inline: 0; }

/* The group page: the topbar names the group, so the hero keeps the photo and the description; hints a step under the body. */
:where(html[data-visual="v5"]) .cs-group-page .cs-contact-panel__hero .cs-contact-panel__name { display: none; }
:where(html[data-visual="v5"]) .cs-group-page .cs-settings__subtitle { font-size: var(--ds-info-label); line-height: var(--ds-info-leading); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-group-page .cs-group-canal__name { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: var(--ds-space-1) var(--ds-space-2); font-size: var(--ds-info-value); }
:where(html[data-visual="v5"]) .cs-group-page .cs-group-canal__name > * { margin: 0; }

/* A new group: the photo and the name on top, then the channel and the people, on the page's sheet. */
:where(html[data-visual="v5"]) .cs-group-new { gap: var(--ds-space-4); padding: var(--ds-space-4); border-radius: var(--ds-radius-2xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-group-new .cs-group-new__name { inline-size: 100%; }
:where(html[data-visual="v5"]) .cs-settings .cs-msg-info-sender__label {
  font-size: var(--ds-info-title);
  font-weight: var(--ds-weight-regular);
  line-height: var(--ds-info-leading);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ds-text-muted);
}
:where(html[data-visual="v5"]) .cs-group-page .cs-group-canal__name > :not(svg) { grid-column: 2; }
:where(html[data-visual="v5"]) .cs-group-page .cs-group-canal__name > svg { block-size: calc(var(--ds-info-value) * 1.4); }
:where(html[data-visual="v5"]) .cs-group-page .cs-group-canal__name strong { font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-person-row .cs-canal-chip { block-size: var(--ds-status-height-sm); padding-inline: 8px; font-size: var(--ds-status-font-sm); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-group-new .cs-picker__scroll { padding-block-end: 7px; }

/* Custom fields and relationship kinds: sheets of list rows, a category named above its own sheet, an inactive row muted. */
:where(html[data-visual="v5"]) .cs-people-sheet-section { display: flex; flex-direction: column; gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-people-sheet-section + .cs-people-sheet-section { margin-block-start: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-people-sheet-section > .ds-info-title { padding-inline: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-settings__sheet .cs-picker-row[data-active="false"] :is(.cs-picker-row__name, .cs-picker-row__subtitle) { color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-segmented-field { align-self: flex-start; }

/* The options only mean something for a list field. */
.cs-custom-field-form:not(:has(input[name="custom_field[field_type]"][value="choice"]:checked)) .cs-custom-field-form__options { display: none; }

/* The import's mapping: a sheet column on the left, the field it fills on the right; stacked on a phone. */
.cs-import-mapping__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(10rem, 16rem);
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) var(--ds-space-3);
}
.cs-import-mapping__source { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.cs-import-mapping__source .cs-picker-row__name { cursor: default; }
.cs-import-mapping__arrow { color: var(--ds-text-muted); }
@media (max-width: 40rem) {
  .cs-import-mapping__row { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-1); }
  .cs-import-mapping__arrow { display: none; }
}

/* A preview or failure line: the line number, the outcome and what happens, one row each. */
.cs-import-preview__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-1) var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
  font-size: var(--ds-info-value);
}
.cs-import-preview__line { flex-shrink: 0; color: var(--ds-text-muted); font-size: var(--ds-info-label); font-variant-numeric: tabular-nums; }
.cs-import-preview__text { min-inline-size: 0; color: var(--ds-text-secondary); }

/* The profile's identity line: the user of the beep and the people responsible as small chips, the labels muted. */
:where(html[data-visual="v5"]) .cs-person-header--meta { row-gap: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-person-header--meta .cs-person-header__label { font-size: var(--ds-status-font); }
:where(html[data-visual="v5"]) .cs-person-header--meta .cs-person-header__label:not(:first-child) { margin-inline-start: var(--ds-space-2); }
/* The people responsible: their faces in a stack and the names, one button that opens the picker in place. */
.cs-person-responsibles { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-inline-size: 0; }
.cs-person-responsibles__trigger {
  --hover-size: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  min-inline-size: 0;
  block-size: var(--ds-status-height);
  padding-inline: 2px var(--ds-space-2);
  border: 0;
  border-radius: var(--ds-radius-full);
  background: none;
  color: var(--ds-text);
  font-size: var(--ds-status-font);
  cursor: pointer;
}
.cs-person-responsibles__trigger:hover, .cs-person-responsibles__trigger[aria-expanded="true"] { background: var(--ds-fill-hover); }
.cs-person-responsibles__trigger:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.cs-person-responsibles__trigger:has(> .ds-avatar-group) { padding-inline-start: 2px; }
.cs-person-responsibles__trigger:not(:has(> .ds-avatar-group)) { padding-inline-start: var(--ds-space-2); color: var(--ds-text-muted); }
.cs-person-responsibles__names { overflow: hidden; max-inline-size: 28ch; text-overflow: ellipsis; white-space: nowrap; }
.cs-person-responsibles__caret { flex-shrink: 0; color: var(--ds-text-muted); }
/* A suggested user is one thin line with its action as a link, not a block of its own. */
:where(html[data-visual="v5"]) .cs-person-suggestion { align-self: flex-start; }
:where(html[data-visual="v5"]) .cs-person-suggestion__action {
  margin-inline-start: var(--ds-space-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-link);
  font: inherit;
  font-weight: var(--ds-weight-medium);
  cursor: pointer;
}
:where(html[data-visual="v5"]) .cs-person-suggestion__action:hover { text-decoration: underline; }

/* The summary two by two: four columns broke the dates in two lines, and auto-fit left three and one over. */
:where(html[data-visual="v5"]) .cs-person-activity .cs-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Remarks take the sheet's whole width, under the fields. */
:where(html[data-visual="v5"]) .cs-profile-facts .cs-profile-facts__wide { grid-column: 1 / -1; }
/* "Completar a ficha": what is still empty, one chip each, on one line that wraps. */
:where(html[data-visual="v5"]) .cs-person-complete__chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }

/* Each section opens and closes from its header: the panel's opener (ds_panel_stack.css) over the whole line, the name,
   the count and the chevron together on the left, the section's own actions on the right while it is open. */
/* The name never gives way to the actions: when both do not fit (a phone, two actions), the actions take the next line. */
:where(html[data-visual="v5"]) .cs-profile-section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-profile-section__heading { flex: 1 1 auto; max-inline-size: 100%; margin: 0; font: inherit; }
/* Doubled so it beats the opener's own padding, which loads after this file. */
:where(html[data-visual="v5"]) .cs-profile-section__toggle.ds-panel-stack__opener {
  margin-block: calc(-1 * var(--ds-space-1));
  padding-block: var(--ds-space-1);
}
:where(html[data-visual="v5"]) .cs-profile-section__toggle .ds-panel-stack__opener-label { flex: 0 1 auto; }
:where(html[data-visual="v5"]) .cs-profile-section__caret { transition: rotate var(--ds-duration) ease; }
@media (prefers-reduced-motion: reduce) {
  :where(html[data-visual="v5"]) .cs-profile-section__caret { transition: none; }
}
:where(html[data-visual="v5"]) .cs-profile-section__toggle[aria-expanded="true"] .cs-profile-section__caret { rotate: 90deg; }
/* The actions hang over the header line (the opener's own trick) instead of heightening it, so opening a section, which
   shows them, leaves its header the height it had closed. */
:where(html[data-visual="v5"]) .cs-profile-section__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--ds-space-2); margin-block: calc(-1 * var(--ds-space-1)); margin-inline-start: auto; }
:where(html[data-visual="v5"]) .cs-profile-section[data-open="false"] .cs-profile-section__actions { display: none; }
:where(html[data-visual="v5"]) .cs-profile-section__body { display: flex; flex-direction: column; gap: var(--ds-space-2); min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-profile-section__body[hidden] { display: none; }
/* Open or closed, a section keeps the profile's one gap to the next: a header never moves when it, or the one above it,
   opens or closes. */

/* An order is a row of the profile's lists: number and day in the body, the total at the end, 56 px like the others. */
:where(html[data-visual="v5"]) .cs-profile .sal-person-order {
  min-block-size: 56px;
  padding-inline: var(--ds-space-3);
  border-radius: var(--ds-radius-lg);
  font-size: var(--ds-info-value);
}
:where(html[data-visual="v5"]) .cs-profile .sal-person-order:hover { background: var(--ds-hover); }
:where(html[data-visual="v5"]) .cs-profile .sal-person-order + .sal-person-order { border-block-start: 1px solid var(--ds-border); border-start-start-radius: 0; border-start-end-radius: 0; }
:where(html[data-visual="v5"]) .cs-profile .sal-person-order__number { font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-profile :is(.sal-person-order__day, .sal-person-order__role) { font-size: var(--ds-info-label); }
:where(html[data-visual="v5"]) .cs-profile .sal-person-order__total { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-profile .sal-person-usual { margin-block-start: var(--ds-space-2); padding-inline: var(--ds-space-1); }
/* An order still open carries its ⋮ beside the row. */
:where(html[data-visual="v5"]) .cs-profile .sal-person-order-item { display: flex; align-items: center; gap: var(--ds-space-1); }
:where(html[data-visual="v5"]) .cs-profile .sal-person-order-item > .sal-person-order { flex: 1; min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-profile .sal-person-order-item + .sal-person-order-item { border-block-start: 1px solid var(--ds-border); }
:where(html[data-visual="v5"]) .cs-profile .sal-person-order-item > :is(.ds-menu-trigger, .sal-person-order-item__slot) { display: flex; flex: none; justify-content: center; inline-size: 2rem; }

/* The usual items in the profile's modal: the product search, its options in the flow of the sheet, the list below. */
:where(html[data-visual="v5"]) .cs-usual-step__add { display: flex; flex-direction: column; gap: var(--ds-space-2); margin-block-start: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-usual-step__form { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem auto; align-items: center; gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-usual-step .sal-options { position: static; margin: 0; }
:where(html[data-visual="v5"]) .cs-usual-step__list { display: flex; flex-direction: column; margin: var(--ds-space-3) 0 0; padding: 0; list-style: none; }
:where(html[data-visual="v5"]) .cs-usual-step__row { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--ds-space-2); min-block-size: 44px; font-size: var(--ds-info-value); }
:where(html[data-visual="v5"]) .cs-usual-step__row + .cs-usual-step__row { border-block-start: 1px solid var(--ds-border); }
:where(html[data-visual="v5"]) :is(.cs-usual-step__quantity, .cs-usual-step__mark) { color: var(--ds-text-muted); font-variant-numeric: tabular-nums; }
:where(html[data-visual="v5"]) .cs-usual-step__price { font-weight: var(--ds-weight-medium); font-variant-numeric: tabular-nums; }
:where(html[data-visual="v5"]) .cs-usual-step__empty { margin-block-start: var(--ds-space-3); }

/* Join, step 1: the sentence, the search and the rows of 56 on one sheet; a row that cannot join is dimmed with its reason. */
:where(html[data-visual="v5"]) .cs-join { display: flex; flex-direction: column; gap: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-join-list { display: flex; flex-direction: column; padding: var(--ds-space-1); border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-join-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  min-block-size: 56px;
  padding: var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-text);
  text-decoration: none;
}
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) a.cs-join-row:hover { background: var(--ds-fill-hover); }
}
:where(html[data-visual="v5"]) .cs-join-row__body { display: flex; flex-direction: column; min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-join-row__name { display: flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-info-value); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) :is(.cs-join-row__detail, .cs-join-row__refusal) { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-join-row--refused { cursor: not-allowed; }
:where(html[data-visual="v5"]) .cs-join-row--refused > :not(.cs-join-row__body), :where(html[data-visual="v5"]) .cs-join-row--refused .cs-join-row__name { opacity: 0.55; }
:where(html[data-visual="v5"]) .cs-join-row__refusal { color: var(--ds-warning-text); }

/* Join, step 2: who stays as a choice on top, the two sheets side by side (stacked on a phone), the fields, the warning. */
:where(html[data-visual="v5"]) .cs-join-preview { display: flex; flex-direction: column; gap: var(--ds-space-4); }
:where(html[data-visual="v5"]) .cs-join-preview__sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-join-side { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-3); border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-join-side__head { display: flex; align-items: center; gap: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-join-side__identity { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; }
:where(html[data-visual="v5"]) .cs-join-side__name { font-size: var(--ds-info-value); font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) .cs-join-side__kind { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
.cs-join-side__facts { display: flex; flex-direction: column; gap: 2px; }
.cs-join-side__facts > p { margin: 0; line-height: var(--ds-info-leading); overflow-wrap: anywhere; }
:where(html[data-visual="v5"]) .cs-join-side__handles { font-size: var(--ds-info-value); }
:where(html[data-visual="v5"]) .cs-join-side__counts { font-size: var(--ds-info-label); color: var(--ds-text-muted); }
/* The fields' head in the section's own type, not the table's spaced capitals. */
/* The fields' rows in the info line's type and height: the table is the decision, so it has to show without scrolling. */
@media (min-width: 40rem) {
  :where(html[data-visual="v5"]) .cs-join-fields .cs-table :is(th, td) { padding: var(--ds-space-2) var(--ds-space-3); line-height: var(--ds-info-leading); }
  :where(html[data-visual="v5"]) .cs-join-fields .cs-table td { font-size: var(--ds-info-value); }
  :where(html[data-visual="v5"]) .cs-join-fields .cs-table td:first-child { color: var(--ds-text-muted); }
}
:where(html[data-visual="v5"]) .cs-join-fields .cs-table th { font-size: var(--ds-info-label); font-weight: var(--ds-weight-regular); letter-spacing: normal; text-transform: none; text-align: start; }
:where(html[data-visual="v5"]) .cs-join-fields { display: flex; flex-direction: column; gap: var(--ds-space-2); }
:where(html[data-visual="v5"]) .cs-join-fields__sheet { padding: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
:where(html[data-visual="v5"]) .cs-join-fields__sheet .cs-table { inline-size: 100%; }
:where(html[data-visual="v5"]) .cs-join-field--kept .cs-join-field__kept { font-weight: var(--ds-weight-medium); }
:where(html[data-visual="v5"]) :is(.cs-join-field--kept, .cs-join-field--lost) .cs-join-field__absorbed { color: var(--ds-text-muted); text-decoration: line-through; }
:where(html[data-visual="v5"]) .cs-join-field__outcome { color: var(--ds-text-muted); font-size: var(--ds-info-label); }
:where(html[data-visual="v5"]) .cs-join-field--lost .cs-join-field__outcome { color: var(--ds-warning-text); }
:where(html[data-visual="v5"]) .cs-join-fields__hint { margin: 0; padding-inline: var(--ds-space-1); font-size: var(--ds-info-label); color: var(--ds-text-muted); }
:where(html[data-visual="v5"]) .cs-join-confirm { display: flex; flex-direction: column; gap: var(--ds-space-3); }

/* The join's preview puts two profiles side by side, so its step widens the profile's modal. */
:where(html[data-visual="v5"]) .cs-profile-modal:has(.cs-join-step--wide) { inline-size: min(860px, 94vw); }
:where(html[data-visual="v5"]) .cs-join-step :is(.cs-join, .cs-join-preview) { margin-block-start: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-join-step .cs-join-list { margin-inline: calc(-1 * var(--ds-space-3)); padding: 0; background: none; }
/* In the modal the profiles found are rows with a hairline between them, as the tie's search; the lit row hides the two. */
:where(html[data-visual="v5"]) .cs-join-step .cs-join-row { position: relative; }
:where(html[data-visual="v5"]) .cs-join-step .cs-join-row + .cs-join-row::before {
  content: "";
  position: absolute;
  inset: 0 var(--ds-space-3) auto;
  border-block-start: 1px solid var(--ds-border-elevated);
}
:where(html[data-visual="v5"]) .cs-join-step a.cs-join-row:focus-visible::before,
:where(html[data-visual="v5"]) .cs-join-step a.cs-join-row:focus-visible + .cs-join-row::before { content: none; }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-join-step a.cs-join-row:hover { background: var(--ds-fill-hover-elevated); }
  :where(html[data-visual="v5"]) .cs-join-step a.cs-join-row:hover::before,
  :where(html[data-visual="v5"]) .cs-join-step a.cs-join-row:hover + .cs-join-row::before { content: none; }
}
:where(html[data-visual="v5"]) .cs-join-step :is(.cs-join-side, .cs-join-fields__sheet) { background: var(--ds-fill-elevated); }
:where(html[data-visual="v5"]) .cs-join-step .cs-join-side { padding: var(--ds-space-3); }
:where(html[data-visual="v5"]) .cs-join-step .cs-modal__actions { margin-block-start: 0; }

/* Seções do perfil: the closing statuses' sheet with the handle, and the switch named on its left in the row's label type. */
.cs-profile-sections-settings__open {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-info-label);
  color: var(--ds-text-muted);
  cursor: pointer;
}
/* The switch is a setting, not a pick: the row keeps the paper, unlike a picker row holding a checked box. */
.cs-profile-sections-settings .cs-picker-row:has(input:checked) { background: none; }
/* The handle is a 40 px target (44 to the touch) around its 16 px dots, without making the row taller. */
.cs-profile-sections-settings__handle {
  --hover-size: 0;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin: -12px -8px -12px -12px;
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-full);
  background: none;
  touch-action: none;
}
.cs-profile-sections-settings__handle:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
@media (pointer: coarse) { .cs-profile-sections-settings__handle { inline-size: 44px; block-size: 44px; } }
/* On a phone the section's name wraps instead of being cut by the switch's word. */
.cs-profile-sections-settings .cs-picker-row__name { white-space: normal; }

/* The profile's one modal: a sheet a little wider than a question, scrolling inside when a step is taller than the screen. */
:where(html[data-visual="v5"]) .cs-profile-modal { inline-size: min(440px, 92vw); max-block-size: min(88dvh, 720px); overflow: hidden; }
:where(html[data-visual="v5"]) .cs-profile-modal .cs-modal__panel { overflow-y: auto; }
/* The dots sit in about the room a short step takes, so the sheet barely grows when it lands. */
.cs-profile-modal__loading { display: grid; place-items: center; min-block-size: 8rem; }
.cs-profile-modal__body { display: flex; flex-direction: column; gap: var(--ds-space-3); margin-block-start: var(--ds-space-4); }
.cs-profile-modal__body .input { inline-size: 100%; }
.cs-profile-modal__body > .ds-confirm__reason { margin-block-start: 0; }
.cs-profile-modal__form > .ds-notice { margin-block-start: var(--ds-space-3); }
/* Back goes to the previous step: it sits at the left, away from the answer. */
.cs-profile-modal .cs-profile-modal__back { margin-inline-end: auto; }