@layer components {
    .credits-table-scroll {
        /* See UI/ComparisonTable — the overflow is scoped to this wrapper, not the page. */
        overflow-x: auto;
        border-radius: var(--radius-l);
        box-shadow: var(--shadow-m);
        -webkit-overflow-scrolling: touch;
    }

    .credits-table {
        width: 100%;
        min-width: 34rem;
        border-collapse: separate;
        border-spacing: 0;
        color: var(--color-text);
        background: var(--color-surface-raised);

        & th, & td {
            padding: var(--space-s);
            border-block-end: 1px solid var(--color-border);
            text-align: start;
        }

        & thead th {
            color: var(--color-text-muted);
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            background: var(--color-surface-mixed);
        }

        & tbody th {
            font-weight: 600;
        }

        & tbody tr:last-child td,
        & tbody tr:last-child th {
            border-block-end: none;
        }

        & tbody td:last-child {
            color: var(--color-accent-strong);
            font-weight: 700;
            white-space: nowrap;
        }
    }
}