@layer components {
  .table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
  .table { width: 100%; }
  .table th, .table td { padding: var(--space-3); text-align: start; border-block-end: 1px solid var(--color-line); vertical-align: top; }
  .table th { font-size: 0.85rem; color: var(--color-muted); }
  .table tr:last-child td { border-block-end: 0; }
  .table__actions { text-align: end; white-space: nowrap; }
  .table__actions > * + * { margin-inline-start: var(--space-3); }

  /* Tables whose actions carry sentences (milestones): wrap them, and on phones
     show each row as a card, amounts labelled in pairs and the actions underneath. */
  .table--stack .table__actions { white-space: normal; min-inline-size: 12rem; }

  @media (max-width: 40rem) {
    .table--stack thead { display: none; }
    .table--stack tr {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3);
      padding: var(--space-3); border-block-end: 1px solid var(--color-line);
    }
    .table--stack tr:last-child { border-block-end: 0; }
    .table--stack th, .table--stack td { padding: 0; border: 0; }
    .table--stack th:empty, .table--stack td:empty { display: none; }
    .table--stack [data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 400; color: var(--color-muted); }
    .table--stack .table__primary, .table--stack .table__actions { grid-column: 1 / -1; }
    .table--stack .table__actions { text-align: start; min-inline-size: 0; }
  }
}