/* ══ QC Tables — a wide table scrolls in its own box ═════════════════════════
   `overflow-x: auto` on a wrapper does NOTHING while the table inside is
   `width: 100%`: the table never exceeds the wrapper, so no scrollbar appears
   and the cells simply SQUEEZE — six columns into 352px is ~58px each — or the
   right-hand columns clip with no gesture that can reach them. The wrapper
   needs the table to be allowed to exceed it, which is what the min-width does.

   The min-width is computed per table from its own column count
   (--qct-min, set by qc-tables.js), not a constant: a 2-column table gets
   ~184px and never scrolls, a 7-column table gets ~644px and does.

   THE PAGE MUST NEVER SCROLL SIDEWAYS — only the box does. */

.qct-scroll { width: 100%; max-width: 100%; }

@media (max-width: 720px) {
  .qct-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* a hint that there is more to the right, so a hidden macOS/iOS scrollbar
       does not make a scrollable table look merely cut off */
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  /* on the TABLE, not the wrapper: a table inside someone else's overflow-x
     box needs this just as much as one inside ours */
  table.qct-min { min-width: var(--qct-min, 620px); }
}