/* 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;
    font-size: var(--text-small);
  }

  /* One line a row, wherever a table says how wide its columns are (crm-v2,
     the compact pass): a cell cuts what does not fit, and the whole of it is
     on the record's page. A person's row in a directory ran two screens wide
     and three lines tall before it. The name takes the widest share; a count
     or a date, ten characters; the columns without a class share the rest. */
  .records:has(colgroup) {
    table-layout: fixed;

    :is(th, td) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* A stage's chip keeps the row's height: its block padding made every
       row on a list a line taller than the rows around it. */
    .badge {
      padding-block: 0;
      line-height: 1.3;
    }
  }

  .records__col--name { inline-size: 28%; }
  .records__col--narrow { inline-size: 12ch; }

  /* A name with its mark, cut at the cell's end like any other value. As a
     link it underlines with the pointer only, as the table's names do —
     under a mark and a job title the line ran through all three. */
  .records__name {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    min-inline-size: 0;

    &:is(a) {
      text-decoration: none;
    }
  }

  .records tbody tr:hover {
    background-color: var(--color-surface);
  }

  /* 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. Weight marks the identity column;
     color never does — shu is not spent on links. A column of names each
     underlined read as a column of rules (owner, the compact pass), so the
     underline waits for the pointer. */
  .records td a {
    font-weight: 500;
    text-decoration: none;
  }
}