/* Responsive table -see docs/strategy/design-system/29-responsive-table.md */
/* Pairs with 20-table.css. On mobile, .table collapses to .card-list. */

.card-list {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
}

.card-row {
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-row:last-child {
  border-bottom: 0;
}

.card-row-title {
  font-size: var(--font-size-caption);
  font-weight: 700;
  color: var(--text);
}

.card-row-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card-row-meta span {
  font-size: var(--font-size-micro);
  color: var(--muted);
}

.card-row-meta .val {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Breakpoint switch -desktop shows .table, mobile shows .card-list.
   Mark BOTH in markup; show/hide via media query. */
@media (max-width: 719px) {
  .table.responsive { display: none; }
  .card-list.responsive { display: block; }
}

@media (min-width: 720px) {
  .table.responsive { display: table; }
  .card-list.responsive { display: none; }
}