/* Data tables. Hairlines only where data separates. */
@layer components {
  /* Wide tables scroll inside their own container — the page never does. */
  .table-scroll {
    overflow-x: auto;
    max-inline-size: 100%;
  }

  /* Records table — data on paper, not a boxed grid: no outer frame, no
     verticals, one hairline per row and nothing else. */
  .records {
    inline-size: 100%;
    border-collapse: collapse;
  }

  /* Column headers are the label treatment: x-small tracked caps in
     ink-subtle, regular weight — a th is bold by UA default, and a caps label
     that is also bold reads as a second title. */
  .records th {
    text-align: start;
    padding: var(--block-space-half) var(--inline-space);
    border-block-end: var(--border);
  }

  /* One hairline weight wherever data separates: the rule under the header and
     the rule between two rows are the same line. Hierarchy comes from the caps
     treatment above it, not from a heavier stroke. */
  .records td {
    padding: var(--block-space-half) var(--inline-space);
    border-block-end: var(--border);
  }

  /* Edge columns sit flush with the text margin, so the table lines up with
     the heading above it instead of floating inside an invisible box. */
  .records :is(th, td):first-child {
    padding-inline-start: 0;
  }

  .records :is(th, td):last-child {
    padding-inline-end: 0;
  }

  /* The name is a link inside a cell, not a row-sized target, so it keeps the
     1px ink underline base gives every link. Weight marks the identity
     column; color never does — shu is not spent on links. */
  .records td a {
    font-weight: 500;
  }
}