.content {
    container-type: inline-size;
}

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

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

table td {
    text-wrap: wrap !important;
}

.table-scroll.wide {
  --table-font-size: 0.85rem;
  --table-padding: 8px;
  width: 100%;
}

.table-scroll.wide table {
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}

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

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

/* 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;
}

table td.green, .t-green {
    color: var(--green-container-text);
    background-color: rgb(from var(--green-container-bg) r g b / 0.3);
    --cell-hover-bg: rgb(from var(--green-container-bg) r g b / 0.6);
    --cell-crosshair-bg: rgb(from var(--green-container-bg) r g b / 0.3);
}

table td.red, .t-red {
    color: var(--red-container-text);
    background-color: rgb(from var(--red-container-bg) r g b / 0.3);
    --cell-hover-bg: rgb(from var(--red-container-bg) r g b / 0.6);
    --cell-crosshair-bg: rgb(from var(--red-container-bg) r g b / 0.3);
}

table td.gold, .t-gold {
    color: var(--gold-container-text);
    background-color: rgb(from var(--gold-container-bg) r g b / 0.4);
    --cell-hover-bg: rgb(from var(--gold-container-bg) r g b / 0.7);
    --cell-crosshair-bg: rgb(from var(--gold-container-bg) r g b / 0.4);
}

.table-scroll.center-table {
    margin: 24px auto !important;
}

.table-legend {
    font-size: 13px;
}




@media (hover: hover) {
    @container (min-width: 901px) {
    /* Fade out all cells when any td is hovered */
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:hover) :where(th, td) {
        transition-duration: 0.2s;
        opacity: 0.8;
        color: var(--text-faded);
    }

    /* Exact cell hover */
    .table-scroll:not(.force-mobile):not(.no-hover) tr:not(:first-of-type) td:hover {
        opacity: 1 !important;
        color: var(--title-color);
        background-color: var(--cell-hover-bg, rgb(from var(--flicker-light) r g b / 0.7)) !important;
    }

    /* Crosshair sibling tracking */
    .table-scroll:not(.force-mobile):not(.no-hover) td:has(~ td:hover),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(1):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(1),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(2):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(2),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(3):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(3),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(4):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(4),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(5):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(5),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(6):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(6),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(7):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(7),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(8):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(8),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(9):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(9),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(10):hover) tr:not(:first-of-type):has(~ tr:hover) td:nth-of-type(10) {
        opacity: 0.67;
        color: var(--text-faded);
        background-color: var(--cell-crosshair-bg, rgb(from var(--flicker-light) r g b / 0.7));
    }

    /* Sticky headers corresponding to the crosshair */
    .table-scroll:not(.force-mobile):not(.no-hover) tr:not(:first-of-type):hover:not(:has(th:hover)) :where(th, td:first-child),
    .table-scroll:not(.force-mobile):not(.no-hover) 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-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-of-type(2):hover) tr:first-of-type :where(th, td):nth-of-type(2),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(3):hover) tr:first-child :where(th, td):nth-child(3),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(4):hover) tr:first-child :where(th, td):nth-child(4),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(5):hover) tr:first-child :where(th, td):nth-child(5),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(6):hover) tr:first-child :where(th, td):nth-child(6),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(7):hover) tr:first-child :where(th, td):nth-child(7),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(8):hover) tr:first-child :where(th, td):nth-child(8),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(9):hover) tr:first-child :where(th, td):nth-child(9),
    .table-scroll:not(.force-mobile):not(.no-hover) table:has(td:nth-child(10):hover) tr:first-child :where(th, td):nth-child(10) {
        opacity: 1;
        color: var(--title-color);
    }
  }
}

@container (max-width: 900px) {
    /* 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;
        box-sizing: border-box;
        width: 100%;
    }

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

    /* Style each cell inside the card */
    td,
    th {
        position: relative;
        min-height: 50px;
        padding: 16px 16px 16px 50%;
        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 {
        font-size: 1.1em;
        font-weight: 600;
        padding-left: 16px;
        text-align: center;
        color: var(--title-color);
        background-color: var(--bg-container-small);
    }

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

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

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

/* Force mobile layout irrespective of screen size */
.table-scroll.force-mobile {
    width: 100%;
    max-width: 900px;
    margin: 0 auto !important;
}

.table-scroll.force-mobile table tr:first-of-type {
    display: none;
}

.table-scroll.force-mobile table, .table-scroll.force-mobile tbody, .table-scroll.force-mobile tr, .table-scroll.force-mobile td, .table-scroll.force-mobile th {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.table-scroll.force-mobile tr {
    overflow: hidden;
    border: 2px solid var(--border-container-small);
    border-radius: 8px;
}

.table-scroll.force-mobile tr:not(:last-of-type) {
    margin-bottom: 24px;
}

.table-scroll.force-mobile td, .table-scroll.force-mobile th {
    position: relative;
    min-height: 50px;
    padding: 16px 16px 16px 50%;
    text-align: left;
    border-bottom: 1px dashed var(--border-color);
}

.table-scroll.force-mobile tr :where(td, th):first-child {
    font-size: 1.1em;
    font-weight: 600;
    padding-left: 16px;
    text-align: center;
    color: var(--title-color);
    background-color: var(--bg-container-small);
}

.table-scroll.force-mobile tr :where(td, th):last-child {
    border-bottom: none;
}

.table-scroll.force-mobile td::before, .table-scroll.force-mobile th::before {
    position: absolute;
    font-weight: 600;
    top: 16px;
    left: 16px;
    width: calc(45% - 24px);
    content: attr(data-label);
    text-align: left;
    white-space: normal;
    color: var(--title-color);
}

.table-scroll.force-mobile tr :where(td, th):first-child::before {
    content: none;
}