/*
 * Data table — structure.
 *
 * A real <table>. Screen readers announce row and column position from table
 * semantics; a grid of divs announces nothing, and no amount of ARIA fully
 * puts that back.
 *
 * Presentation and semantics only — no sorting, filtering or pagination. Those
 * are data concerns and they belong to whatever owns the data.
 *
 * DO NOT edit this file to re-skin — override tokens in the .tokens.css file.
 */

/* The wrapper is what scrolls. A table that overflows the page body makes the
   WHOLE page scroll sideways, which is the single most common table bug. */
.sp-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-card, 16px);
  -webkit-overflow-scrolling: touch;
}

.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui, "SF Pro Text", -apple-system, sans-serif);
  font-size: var(--text-sm, 13px);
  letter-spacing: var(--tracking-ui, -0.15px);
  /* Figures line up down a column without forcing tabular on the text. */
  font-variant-numeric: tabular-nums;
}

.sp-table caption {
  padding: 16px 18px 0;
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-xs, 12px);
  text-align: left;
}

.sp-table th,
.sp-table td {
  padding: 11px 18px;
  text-align: left;
  vertical-align: middle;
}

.sp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e5e5e5);
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-xs, 12px);
  font-weight: 400;
  white-space: nowrap;
}

.sp-table tbody td {
  border-top: 1px solid var(--sp-table-rule, #f0f0f0);
  color: var(--ink, #292929);
  line-height: 1.45;
}

.sp-table tbody tr:first-child td { border-top: 0; }

.sp-table tbody tr {
  transition: background-color var(--dur-instant, 150ms) var(--ease-out, ease-out);
}

.sp-table--hover tbody tr:hover { background: var(--surface-hover, #f3f3f3); }

/* Selected rows are tinted, never coloured — a row you can still read is the
   point of selecting it. */
.sp-table tbody tr[aria-selected="true"] { background: var(--accent-soft, #dbeafe); }

/* Numeric columns right-align so magnitudes line up and a long number is
   instantly visible as long. */
.sp-table .is-num { text-align: right; }

/* Secondary line inside a cell — an email under a name, a slug under a title.
   Keeps the row to one line of primary information. */
.sp-table__sub {
  display: block;
  margin-top: 1px;
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-xs, 12px);
  line-height: 1.35;
}

/* Sortable header. It is a real button inside the th, so it is reachable and
   pressable; aria-sort on the th is what actually gets announced. */
.sp-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.sp-table__sort:hover { color: var(--ink, #292929); }

.sp-table__sort:focus-visible {
  outline: 2px solid var(--sp-table-focus, var(--accent, #3b82f6));
  outline-offset: 2px;
  border-radius: 4px;
}

.sp-table__sort svg { width: 12px; height: 12px; opacity: 0; }

.sp-table th[aria-sort] .sp-table__sort { color: var(--ink, #292929); }
.sp-table th[aria-sort] .sp-table__sort svg { opacity: 1; }
.sp-table th[aria-sort="descending"] .sp-table__sort svg { transform: rotate(180deg); }

/* Actions column pinned right. */
.sp-table__actions { display: flex; gap: 6px; justify-content: flex-end; }

.sp-table__action {
  padding: 4px 10px;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: var(--radius-pill, 9999px);
  background: transparent;
  color: var(--ink-muted, #5d5d5d);
  font: 400 var(--text-xs, 12px) / 1.4 inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-instant, 150ms) var(--ease-out, ease-out);
}

.sp-table__action:hover { background: var(--surface-hover, #f3f3f3); color: var(--ink, #292929); }

.sp-table__action:focus-visible {
  outline: 2px solid var(--sp-table-focus, var(--accent, #3b82f6));
  outline-offset: 2px;
}

.sp-table__empty {
  padding: 40px 18px;
  color: var(--ink-faint, #9e9e9e);
  font-size: var(--text-sm, 13px);
  text-align: center;
}

/* Compact density for long lists. */
.sp-table--compact th,
.sp-table--compact td { padding: 7px 14px; }

@media (prefers-reduced-motion: reduce) {
  .sp-table tbody tr,
  .sp-table__action { transition: none; }
}