/* The parts list: a table of records with hairline rows and a structural rule
   under the header, as on a drawing's bill of materials. */
@layer components {
  .parts-list {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);

    /* The header text is a .label inside the cell, so the cell keeps the
       rows' font size and its ch padding lines up with theirs. */
    th {
      padding: calc(var(--block-space) * 0.5) calc(var(--inline-space) * 1.5);
      border-block-end: var(--rule-width) solid var(--color-rule);
      text-align: start;
    }

    td {
      padding: calc(var(--block-space) * 0.625) calc(var(--inline-space) * 1.5);
      border-block-end: var(--rule-width) solid var(--color-hairline);
      vertical-align: baseline;
    }
  }

  .parts-list__number {
    font-variant-numeric: tabular-nums;
  }
}