/* =========================================================
   Component — Table
   Rows are data, not cards. Horizontal rules only, and the
   figures column stays Latin + tabular so numbers align.
   ========================================================= */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: start;
}

.table__head th {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-align: start;
  white-space: nowrap;
}

.table__row { transition: background var(--dur-fast) var(--ease-out); }
.table__row:hover { background: var(--color-primary-soft); }
.table__row + .table__row td { border-top: 1px solid var(--color-line); }

.table td {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

.table__cell--key {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.table__cell--figure {
  font-family: var(--font-figures);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  text-align: end;
  white-space: nowrap;
}