/* A list of facts: the name on the left in the muted ink, the value on the right in tabular figures. */
.ds-facts { margin: 0; }

.ds-facts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: 0.625rem;
  font-size: var(--ds-font-size-sm);
}
.ds-facts__row + .ds-facts__row { border-block-start: 1px solid var(--ds-border); }

.ds-facts dt { color: var(--ds-text-muted); }
.ds-facts dd { margin: 0; min-inline-size: 0; color: var(--ds-text); text-align: end; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.ds-facts__person { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; }
.ds-facts__person:hover { text-decoration: underline; }

/* v5: the value in semibold, the rows a little taller. */
:where(html[data-visual="v5"]) .ds-facts__row { padding-block: 0.75rem; }
:where(html[data-visual="v5"]) .ds-facts dd { font-weight: var(--ds-weight-semibold); }

/* With icons, as WhatsApp's contact info: the 20 px icon loose in the muted ink, the value on top and its name under it in
   the panel's info type (ds_info_line.css), and no lines between the rows. The icon is as tall as the value's first line, so
   the two share a centre however many lines the value or its name take. */
.ds-facts--icons .ds-facts__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-areas: "icon value" ". label";
  column-gap: var(--ds-space-4);
  row-gap: 0.125rem;
  align-items: start;
  padding-block: var(--ds-space-2);
}
.ds-facts--icons .ds-facts__row + .ds-facts__row { border-block-start: 0; }
.ds-facts__icon { grid-area: icon; display: inline-grid; place-items: center; color: var(--ds-text-muted); }
.ds-facts--icons :is(dd, .ds-facts__icon) { font-size: var(--ds-info-value); line-height: var(--ds-info-leading); }
.ds-facts--icons .ds-facts__icon { block-size: 1lh; }
.ds-facts--icons dd { grid-area: value; text-align: start; font-variant-numeric: normal; overflow-wrap: break-word; }
.ds-facts--icons dt { grid-area: label; font-size: var(--ds-info-label); line-height: var(--ds-info-leading); }
:where(html[data-visual="v5"]) .ds-facts--icons .ds-facts__row { padding-block: var(--ds-space-2); }
:where(html[data-visual="v5"]) .ds-facts--icons dd { font-weight: var(--ds-weight-regular); }

/* A value the record doesn't have, said in words ("Não informado") and muted, never a blank or a dash. */
.ds-value--empty { color: var(--ds-text-muted); }