div.record-table {
    display: inline-grid;
    max-width: var(--content-width);
    padding: 0.33em;
    overflow-x: auto;
    grid-template-columns: repeat(var(--columns), minmax(auto, 15em));
    align-items: center;
    border: 2px solid var(--etch-color);
}
div.record-table > div.toolbar {
    grid-area: 1 / 1 / 1 / -1;
    display: flex;
    flex-direction: row;
    margin: -0.33em;
    padding: 0.33em;
    background-color: var(--etch-color);
}

div.record-table > div.columns, div.record-table > div.records, div.record-table > div.records > div.record {
    display: contents;
}

div.record-table > div.records > div.record > div.cell, div.record-table > div.columns > div.column {
    overflow-x: clip;
    white-space: nowrap;
}
div.record-table > div.columns > div.column {
    font-weight: bold;
    border-bottom: 2px solid var(--drawn-color);
    padding: 0.16em;
    padding-top: 0.5em;
}
div.record-table > div.records > div.cell.empty-label {
    grid-column: 1 / span var(--columns);
}
div.record-table > div.records > div.record > div.cell {
    cursor: pointer;
    padding: 0.16em;
}
div.record-table > div.records > div.record:has(div.cell:hover) > div.cell {
    background-color: var(--etch-color);
}

div.record-table > div.records > div.record > input.selection {
    display: none;
}

div.record-table > div.records > div.record:has(input.selection:checked) > div.cell {
    background-color: var(--etch-highlight-color);
}