/*
 * .table — standard data table. Use on <table class="table">. Wrap in
 * .table-scroll for horizontal overflow on narrow viewports.
 * Modifiers: .table--zebra (striped rows). Cell align: [data-align="end"].
 */
@layer components {
  .table-scroll { overflow-x: auto; }

  .table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-1);
  }

  .table th,
  .table td {
    padding-block: calc(var(--u-pad) / 2);
    padding-inline: calc(var(--u-pad) / 1.5);
    text-align: start;
    vertical-align: middle;
    border-block-end: var(--border-size-1) solid var(--line);
  }

  .table thead th {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-8);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .table tbody tr:hover { background: color-mix(in oklab, var(--canvas), var(--ink) 3%); }
  .table tbody tr:last-child td { border-block-end: none; }

  .table [data-align="end"]    { text-align: end; font-variant-numeric: tabular-nums; }
  .table [data-align="center"] { text-align: center; }

  /* metric tables: scroll horizontally rather than crushing the columns */
  .table--nowrap :is(th, td) { white-space: nowrap; }

  /* striped rows */
  .table--zebra tbody tr:nth-child(even) {
    background: color-mix(in oklab, var(--canvas), var(--ink) 2.5%);
  }
}