/*
 * Tables read like a well-set report: hairlines between rows, no vertical
 * lines, numbers right-aligned in tabular figures (DESIGN.md §5).
 */
@layer components {
  :where(table, .table) {
    inline-size: 100%;
    font: var(--text-small);

    /*
     * Not an uppercase eyebrow: system specs read text after CSS transforms,
     * so an uppercased caption stops matching have_content("All grants").
     */
    & caption {
      text-align: start;
      font: var(--text-body-strong);
      color: var(--color-muted);
      padding-block-end: var(--space-2);
    }

    & th,
    & td {
      padding: var(--space-2) var(--space-3);
      text-align: start;
      vertical-align: top;
      border-block-end: var(--border);
    }

    & th:first-child,
    & td:first-child {
      padding-inline-start: 0;
    }

    & thead th {
      font-weight: 500;
      color: var(--color-muted);
      border-block-end-color: var(--color-text);
      white-space: nowrap;
    }

    & tbody tr:hover {
      background: var(--color-surface-2);
    }

    & tfoot :where(th, td) {
      font-weight: 500;
      border-block-start: var(--rule);
      border-block-end: 0;
    }

    & td img {
      border-radius: var(--radius-s);
      background: var(--color-surface-2);
    }

    & td :where(input, select) {
      min-block-size: auto;
      padding: var(--space-1) var(--space-2);
    }
  }

  .table--striped tbody tr:nth-child(even) {
    background: var(--color-surface-2);
  }

  /* Opt-in per cell until the views mark their numeric columns. */
  .num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}