/* Table (v5): the header is the section label, the rows part on a hairline, and the hover is the list's fill. */
:where(html[data-visual="v5"]) .cs-table { font-size: var(--ds-font-size-sm); }
:where(html[data-visual="v5"]) .cs-table th {
  padding: var(--ds-space-2) var(--ds-space-3);
  font-size: var(--ds-font-size-2xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0.06em;
  color: var(--ds-text-muted);
  border-block-end: 1px solid var(--ds-border);
}
:where(html[data-visual="v5"]) .cs-table td {
  padding: var(--ds-space-3);
  color: var(--ds-text);
  border-block-end: 1px solid var(--ds-border);
}
:where(html[data-visual="v5"]) .cs-table tbody tr:last-child td { border-block-end: 0; }
:where(html[data-visual="v5"]) .cs-table td.is-negative { color: var(--ds-negative); }
@media (any-hover: hover) {
  :where(html[data-visual="v5"]) .cs-table--linked tbody tr:hover { background: var(--ds-fill-hover); }
}

/* A table that turns into a list on a phone (ds-table--stack): rather than scrolling sideways, each row becomes a list
   row, its first cell the title on a line of its own and the others in a muted line under it. A number that needs its
   column's name says it in data-label ("Encerrados 4"); the head stays for the screen reader. */
@media (max-width: 40rem) {
  :where(html[data-visual="v5"]) .ds-table--stack {
    display: block;

    thead {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
    }
    tbody { display: block; }
    tbody tr {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 2px var(--ds-space-3);
      padding-block: var(--ds-space-2);
      border-block-end: 1px solid var(--ds-border);
    }
    tbody tr:last-child { border-block-end: 0; }
    tbody td {
      display: block;
      max-inline-size: 100%;
      padding: 0;
      border: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      color: var(--ds-text-muted);
    }
    tbody td:first-child { flex-basis: 100%; font-size: 14px; color: var(--ds-text); }
    /* The cell that may be long (a name) takes what is left of the line and cuts, so the short ones after it stay on it. */
    tbody td.ds-table__grow { flex: 1 1 0; min-inline-size: 0; }
    tbody td[data-label]::before { content: attr(data-label) " "; }
    /* A cell that only holds the table's dash for "none" (ds-table__none) has nothing to say in a line of text. */
    tbody td:has(> .ds-table__none:only-child) { display: none; }
  }
}