table {
    inline-size: 100%;
    border-collapse: collapse;

    caption {
        margin-block-end: 0.75rem;
        text-align: start;

        p { margin: 0 }

        > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: var(--size-small);
            font-weight: var(--weight-body);
            color: var(--ink-muted);
            cursor: pointer;

            svg {
                inline-size: 1rem;
                block-size: 1rem;
            }
        }
    }

    thead th, td::before {
        color: var(--ink-muted);
        font-size: var(--size-small);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    tbody tr { position: relative }
    &:has(#display-finished:not(:checked)) tr[data-finished] { visibility: collapse }

    tbody th {
        font-weight: var(--weight-answer);
        text-align: start;

        small {
            margin-inline-start: 0.5rem;
            font-weight: var(--weight-body);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--ink-muted);
        }

        a {
            color: inherit;
            text-decoration: none;

            &:hover { text-decoration: underline }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
            }
        }
    }

    td {
        font-variant-numeric: tabular-nums;

        svg {
            inline-size: 1rem;
            block-size: 1rem;
            vertical-align: -0.125rem;
        }
    }

    @media (width < 40rem) {
        display: block;

        caption { display: block }
        thead { display: none }
        &:has(#display-finished:not(:checked)) tr[data-finished] { display: none }

        tbody {
            display: grid;
            gap: 0.75rem;
        }

        tr {
            --ground: white;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.25rem 0.75rem;
            border: 1px solid var(--rule);
            border-radius: var(--operator-radius);
            padding: 0.75rem 1rem;
            background: var(--ground);
        }

        tbody th { grid-column: 1 / -1 }

        td {
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
            font-size: var(--size-small);

            &::before { content: attr(data-label) }
        }
    }

    @media (width >= 40rem) {
        th, td {
            padding: 0.75em 1.5em;
            border-block-end: 1px solid var(--rule);
        }

        thead th { border-block-end-width: 2px }
        thead th:first-child { text-align: start }
        tbody tr:nth-child(even) { background: var(--tint) }
        tbody tr:hover { background: color-mix(in oklab, var(--ink-muted) 20%, transparent) }
        td { text-align: center }
        &:has(#display-finished:checked) tr:not([data-finished]) + tr[data-finished] { border-block-start: 2px solid var(--operator-accent) }
    }
}