.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 1px;
    background: var(--trim-white);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body);
}

th,
td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

thead th {
    background: var(--trim-shade);
    font-weight: 500;
}

/* Row headers read like the cells beside them; the stacked layout gives them weight. */
tbody th {
    font-weight: 400;
}

tbody tr:last-child th,
tbody tr:last-child td {
    border-bottom: 0;
}

/* Tables with 3+ columns clip on narrow screens: .table-stack renders each
   row as a labeled, stacked block instead. thead stays in the DOM (and
   readable to assistive tech) but is visually hidden. */
@media (max-width: 600px) {
    .table-stack table,
    .table-stack tbody,
    .table-stack tr,
    .table-stack tbody th,
    .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack thead th {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-stack tbody tr {
        padding: 16px 18px;
        border-bottom: 1px solid var(--rule);
    }

    .table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    .table-stack tbody th,
    .table-stack td {
        padding: 3px 0;
        border-bottom: 0;
    }

    .table-stack tbody th,
    .table-stack td:first-child {
        margin-bottom: 6px;
        font-size: var(--type-lead);
        font-weight: 500;
        color: var(--umber-ink);
    }

    .table-stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--type-micro);
        color: var(--umber-soft);
    }
}