/* ══════════════════════════════════════
   PHONE TABLES — one shared wrapper for every data table
   ──────────────────────────────────────
   <div class="tbl-scroll"><table>…</table></div>

   Phones / narrow screens only: the TABLE scrolls sideways inside its own box,
   so every column is reachable while the card header and the page stay put.
   Edge shadows appear only while columns are cut off (same affordance as
   layout.css .x-scroll / .pm-table-scroll).

   Why scroll-in-place rather than stacked rows: these are comparison tables
   (P&L, strikes, dates side by side). Stacking turns each row into a card and
   breaks reading down a column; scrolling keeps the table a table and needs no
   per-table markup beyond the wrapper.

   Desktop: no rule applies at all — no scroll box is created, nothing (e.g.
   an info tooltip) can be clipped, and layout is byte-for-byte what it was.
   Loaded by index.html and admin.html (admin does not load layout.css).
══════════════════════════════════════ */
@media (max-width: 768px) {
  .tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    background-image:
      linear-gradient(90deg,  var(--surface, #fff) 35%, transparent),
      linear-gradient(270deg, var(--surface, #fff) 35%, transparent),
      linear-gradient(90deg,  var(--scroll-shadow, rgba(0,0,0,.22)), transparent),
      linear-gradient(270deg, var(--scroll-shadow, rgba(0,0,0,.22)), transparent);
    background-position: left, right, left, right;
    background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}