/**
 * PCBuildMate Guides - scroll container for tables in guide content
 *
 * Table_Scroll_Wrapper wraps every table in .guide-table-scroll. On a phone a wide table scrolls
 * sideways inside this box instead of pushing the page. The edge fades are background layers
 * (local = follow the scroll position) so they only show while there is more to scroll to.
 * Desktop: the table fits, nothing scrolls, nothing changes visually.
 */

.guide-table-scroll {
    max-width: 100%;
    margin: clamp(1rem, 1.5vw, 1.25rem) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: var(--radius-md);
    background:
        linear-gradient(to right, var(--bg-primary) 30%, rgba(var(--bg-primary-rgb), 0)) left center / 2rem 100% no-repeat local,
        linear-gradient(to left, var(--bg-primary) 30%, rgba(var(--bg-primary-rgb), 0)) right center / 2rem 100% no-repeat local,
        linear-gradient(to right, rgba(var(--shadow-rgb), 0.18), rgba(var(--shadow-rgb), 0)) left center / 0.75rem 100% no-repeat scroll,
        linear-gradient(to left, rgba(var(--shadow-rgb), 0.18), rgba(var(--shadow-rgb), 0)) right center / 0.75rem 100% no-repeat scroll;
}

.guide-table-scroll:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.guide-table-scroll > table {
    margin: 0;
}

@media (max-width: 640px) {
    /* Short headers and figures stay on one line; long text cells may still wrap. */
    .guide-table-scroll > table th {
        white-space: nowrap;
    }

    .guide-table-scroll > table td {
        min-width: 5.5rem;
    }
}