.table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    border-radius: 12px !important;
    border: 3px solid var(--flicker-light);
    width: fit-content;
    margin: 24px 0;
}

table {
    border-collapse: collapse;
    max-width: 100%;
    margin: 4px 0;
}

table :where(td, th) {
    transition-property: color, opacity;
    transition-duration: 0.24s;
    padding: 16px 32px;
    text-align: left;
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-color);
}

table th {
    color: var(--title-color);
    font-weight: 500;
}

/* Sticky Header and First Column */
table tr:first-of-type td:first-of-type {
    pointer-events: none;
}

table tr:first-of-type td:first-of-type,
table tr:not(:first-of-type) :where(th, td:first-child) {
    position: sticky;
    left: 0;
    background-color: var(--bg-color);
    z-index: 1;
}

table tr:first-of-type :where(th, td) {
    position: sticky;
    top: 0;
    background-color: var(--bg-color);
    z-index: 2;
}

/* Corner cell needs to stay on top of both row and column sticky streams */
table tr:first-of-type :where(td, th):first-child {
    z-index: 3;
}

@media (hover: hover) and (min-width: 769px) {
    /* Fade out all cells when any td is hovered */
    table:has(td:hover) :where(th, td) {
        color: var(--text-faded);
        opacity: 0.8;
        transition-duration: 0.3s;
    }

    /* Exact cell hover */
    tr:not(:first-of-type) td:hover {
        background-color: rgb(from var(--flicker-light) r g b / 0.9) !important;
        color: var(--title-color);
        opacity: 1 !important;
    }

    /* Crosshair sibling tracking */
    td:has(~ td:hover),
    table:has(td:nth-of-type(1):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(1),
    table:has(td:nth-of-type(2):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(2),
    table:has(td:nth-of-type(3):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(3),
    table:has(td:nth-of-type(4):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(4),
    table:has(td:nth-of-type(5):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(5),
    table:has(td:nth-of-type(6):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(6),
    table:has(td:nth-of-type(7):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(7),
    table:has(td:nth-of-type(8):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(8),
    table:has(td:nth-of-type(9):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(9),
    table:has(td:nth-of-type(10):hover)
    tr:not(:first-of-type):has(~ tr:hover)
    td:nth-of-type(10) {
        opacity: 0.8;
        color: var(--text-faded);
        background-color: rgb(from var(--flicker-dark) r g b / 0.7);
    }

    /* Sticky headers corresponding to the crosshair */
    tr:not(:first-of-type):hover:not(:has(th:hover)) :where(th, td:first-child),
    table:has(tr:not(:first-of-type) td:nth-of-type(1):hover)
    tr:first-of-type
    :where(th, td):nth-of-type(1),
    table:has(td:nth-of-type(2):hover)
    tr:first-of-type
    :where(th, td):nth-of-type(2),
    table:has(td:nth-child(3):hover) tr:first-child :where(th, td):nth-child(3),
    table:has(td:nth-child(4):hover) tr:first-child :where(th, td):nth-child(4),
    table:has(td:nth-child(5):hover) tr:first-child :where(th, td):nth-child(5),
    table:has(td:nth-child(6):hover) tr:first-child :where(th, td):nth-child(6),
    table:has(td:nth-child(7):hover) tr:first-child :where(th, td):nth-child(7),
    table:has(td:nth-child(8):hover) tr:first-child :where(th, td):nth-child(8),
    table:has(td:nth-child(9):hover) tr:first-child :where(th, td):nth-child(9),
    table:has(td:nth-child(10):hover)
    tr:first-child
    :where(th, td):nth-child(10) {
        opacity: 1;
        color: var(--title-color);
    }
}
@media screen and (max-width: 768px) {
    /* Let the scroll wrapper stretch back to 100% on mobile so it doesn't get squished */
    .table-scroll {
        width: 100%;
        margin: 0;
    }

    /* Hide the top row headers which are normally sticky */
    table tr:first-of-type {
        display: none;
    }

    /* Force table elements to display as standard blocks */
    table,
    tbody,
    tr,
    td,
    th {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Style each row as its own "card" */
    tr {
        border: 2px solid var(--border-container-small);
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 24px;
    }

    /* Style each cell inside the card */
    td,
    th {
        position: relative;
        padding: 16px 16px 16px 50%;
        min-height: 50px;
        text-align: left;
        border-bottom: 1px dashed var(--border-color);
    }

    /* The primary row header (e.g. "Jupiter") spans full width at the top */
    tr :where(td, th):first-child {
        padding-left: 16px;
        text-align: center;
        background-color: var(--bg-container-small);
        color: var(--title-color);
        font-size: 1.1em;
        font-weight: 600;
    }

    tr :where(td, th):last-child {
        border-bottom: none;
    }

    /* Inject pseudo-element labels based on HTML data-label tags */
    td::before,
    th::before {
        content: attr(data-label);
        position: absolute;
        left: 16px;
        top: 16px; /* Align to the top padding of the cell */
        width: calc(45% - 24px);
        font-weight: 600;
        color: var(--title-color);
        text-align: left;
        white-space: normal; /* Allow long titles to wrap along with their content */
    }

    /* Clear the pseudo element from the top row header since it's full width */
    tr :where(td, th):first-child::before {
        content: none;
    }
}