/* Markdown pipe tables in post bodies (lib/guides.js wraps each in .gh-table). Loaded only on posts that have one.
   The box scrolls sideways when the table is wider than the column, so the page never does. A soft shadow
   on the edge that hides more columns says there is more to scroll (the covers scroll with the content). */

.gh-content .gh-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--bg-primary) 30%, transparent) left / 40px 100% no-repeat local,
        linear-gradient(to left, var(--bg-primary) 30%, transparent) right / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .2), transparent) left / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .2), transparent) right / 14px 100% no-repeat scroll;
}

[data-theme=dark] .gh-content .gh-table {
    background:
        linear-gradient(to right, #1a1a1a 30%, transparent) left / 40px 100% no-repeat local,
        linear-gradient(to left, #1a1a1a 30%, transparent) right / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, .18), transparent) left / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, .18), transparent) right / 14px 100% no-repeat scroll;
}

.gh-content .gh-table table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans-serif);
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* Narrow enough for two or three columns side by side on a phone, wide enough that a cell never shrinks to a word per line. */
.gh-content .gh-table th,
.gh-content .gh-table td {
    min-width: 8em;
    padding: .7em .9em;
    vertical-align: top;
    border-bottom: 1px solid var(--border-color);
}

/* The theme draws inset column lines on even rows (.gh-content tbody tr:nth-child(2n+2) td): outweigh it. */
.gh-content .gh-table tr:nth-child(n) td,
.gh-content .gh-table tr:nth-child(n) td:last-child {
    box-shadow: none;
}

.gh-content .gh-table th {
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    vertical-align: bottom;
    border-bottom: 2px solid var(--border-color);
}

/* The theme stripes rows with a black tint, which disappears in dark mode and hides the scroll shadows. */
.gh-content .gh-table tbody tr:nth-child(n) {
    background: none;
    border-bottom: 0;
}