/* Post tables, wrapped by assets/js/bowtie-table.js in .bt-table. Light theme only: the blog has no dark mode.
   Table selectors repeat the stock `:not(.gist table)` so they out-rank `.gh-content table:not(.gist table) …`
   in built/screen.css (inline-block, nowrap, uppercase grey th, white edge gradients on first/last cells). */
.gh-content .bt-table {
    --bt-table-navy: #191357;
    --bt-table-border: #ebe8f2;
    --bt-table-zebra: #f8f7fb;
    --bt-table-hover: #fff0f6;
    --bt-table-best: #e9f8ef;
    position: relative;
    display: flex; /* lets the right-edge fade (::after) stick to the visible edge */
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e2ee;
    border-radius: 8px;
    background: #fff;
}

.gh-content .bt-table:focus-visible {
    outline: 2px solid var(--bt-table-navy);
    outline-offset: 2px;
}

.gh-content .bt-table table:not(.gist table) {
    display: table;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: none;
    font-size: 15px;
    line-height: 1.55;
    white-space: normal;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.gh-content .bt-table table:not(.gist table) :is(td, th) {
    min-width: 6.5em; /* CJK cells stay readable instead of 1-2 characters per line */
    padding: 10px 12px;
    border: 0;
    border-right: 1px solid var(--bt-table-border);
    border-bottom: 1px solid var(--bt-table-border);
    background: #fff;
    color: inherit;
    font-size: inherit;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.gh-content .bt-table table:not(.gist table) tr > :last-child { border-right: 0; background-image: none; }
.gh-content .bt-table table:not(.gist table) tr:last-child > * { border-bottom: 0; }

/* Zebra + hover on cells, so the sticky first column keeps the row colour (not on key-value tables) */
.gh-content .bt-table:not(.bt-table--col-head) table:not(.gist table) tbody tr:nth-child(even) > td { background: var(--bt-table-zebra); }
.gh-content .bt-table:not(.bt-table--col-head) table:not(.gist table) tbody tr:hover > td { background: var(--bt-table-hover); }

/* First column: bold and pinned while scrolling sideways */
.gh-content .bt-table table:not(.gist table) tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    font-weight: 700;
    background-image: none; /* drop the stock white edge gradient */
}

.gh-content .bt-table:not(.at-start) table:not(.gist table) tr > :first-child {
    box-shadow: 6px 0 8px -6px rgba(25, 19, 87, 0.35);
}

/* Header: real <th>/<thead>, or the first row of a table without one (.bt-table--row-head) */
.gh-content .bt-table table:not(.gist table) th,
.gh-content .bt-table table:not(.gist table) thead td,
.gh-content .bt-table--row-head table:not(.gist table) tbody:not(thead ~ tbody):first-of-type > tr:first-child > * {
    background: var(--bt-table-navy);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border-color: rgba(255, 255, 255, 0.16);
}

.gh-content .bt-table table:not(.gist table) th a,
.gh-content .bt-table table:not(.gist table) thead td a,
.gh-content .bt-table--row-head table:not(.gist table) tbody:not(thead ~ tbody):first-of-type > tr:first-child a { color: #fff; }

.gh-content .bt-table table:not(.gist table) thead tr:last-child > *,
.gh-content .bt-table--row-head table:not(.gist table) tbody:not(thead ~ tbody):first-of-type > tr:first-child > * { border-bottom: 0; }

/* Key-value tables (.bt-table--col-head): plain 2 columns, labels down the first column */
.gh-content .bt-table.bt-table--col-head table:not(.gist table) tr > :first-child {
    position: static;
    width: 32%;
    min-width: 6em;
    background: #f3f1f9;
    color: var(--bt-table-navy);
    font-weight: 700;
    vertical-align: top;
    box-shadow: none;
}

/* Cells marked with 👍 (best value) */
.gh-content .bt-table table:not(.gist table) td.is-best,
.gh-content .bt-table table:not(.gist table) tbody tr:nth-child(even) > td.is-best {
    background: var(--bt-table-best);
    font-weight: 700;
}

/* Right-edge fade while more columns are hidden (left edge: shadow on the sticky first column) */
.gh-content .bt-table::after {
    content: "";
    position: sticky;
    right: 0;
    z-index: 2;
    flex: 0 0 28px;
    margin-left: -28px;
    background: linear-gradient(to left, rgba(25, 19, 87, 0.18), rgba(25, 19, 87, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.gh-content .bt-table.is-scrollable:not(.at-end)::after { opacity: 1; }

.gh-content .bt-table-hint {
    color: #6b6880;
    font-size: 13px;
    text-align: right;
}

.gh-content .bt-table-hint + .bt-table { margin-top: 6px; }

@media (max-width: 600px) {
    .gh-content .bt-table table:not(.gist table) { font-size: 14px; }

    /* 4 columns fit a 390px phone without scrolling */
    .gh-content .bt-table table:not(.gist table) :is(td, th) {
        min-width: 6em;
        padding: 8px 10px;
    }
}