.table-scroll {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--fo-surface);
  border: var(--border-w) solid var(--fo-line);
  clip-path: var(--fo-shape-panel);
  scrollbar-width: thin;
}
.table-scroll[data-wide] table { min-width: 720px; }
.table-scroll[data-medium] table { min-width: 560px; }
.tracks-table-scroll { max-width: 640px; }
.races-table-scroll { max-width: 800px; }
.races-table-scroll + .fo-pagination { max-width: 800px; }
/* Keep width aligned with .tournaments-filter-bar. */
.tournaments-table-scroll { max-width: 800px; }
/* .page-art-teams has no fixed width (auto, driven by page height) and its right
   edge is pinned to the true viewport edge, while .site-main caps at 1280px and
   recenters beyond that -- a flat max-width only lines up with the art at one
   viewport width and drifts apart on wider screens. Scale with vw instead so the
   gap stays ~0 across window sizes; keep aligned with .teams-filter-bar. */
.teams-table-scroll { max-width: calc(50vw + 90px); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}
th, td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  text-align: left;
  border-bottom: var(--border-w) solid var(--fo-line);
  height: var(--row-h);
}
.cell-truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th {
  color: var(--fo-muted);
  background: var(--fo-surface-hover);
  font-weight: 600;
  font-size: var(--fs-small);
  white-space: nowrap;
}
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: var(--fo-surface-hover); }
tbody tr:last-child td { border-bottom: none; }

.num, td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
th.num { text-align: right; }

/* Reserve width for long names and rosters instead of spreading it across short columns. */
.teams-table-scroll .col-tag { width: 120px; }
.teams-table-scroll .col-lap { width: 130px; }

.nick { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.row-link::after { content: '→'; opacity: .55; transition: opacity .15s ease, transform .15s ease; }
.row-link:hover::after, .row-link:focus-visible::after { opacity: 1; transform: translateX(2px); }