/* =========================================================
   Views tables on phones
   ---------------------------------------------------------
   custom-style.css lets the whole .view scroll sideways under
   768px, which drags the filters along with the table, and
   views with a custom wrapper (Deep Dig) or extra content
   (Keystone) still push the page wider than the screen.

   Instead, only the table scrolls inside its own frame, the
   first column (usually Scientific Name) stays pinned so each
   row is identifiable, and narrow tables are not forced wider
   than they need to be.

   Load after custom-style.css.
   ========================================================= */

@media (max-width: 767.98px) {

  /* Undo the whole-view scrolling from custom-style.css. */
  .view {
    overflow-x: visible;
  }

  /* The frame around the table becomes the scroll area and takes
     over the border, rounding, and shadow from the table. */
  .view-content:has(> table.table) {
    max-width: 100%;
    margin: 1.5rem 0 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #d4ddd2;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(31 46 32 / 5%);
  }

  .view-content:has(> table.table) > table.table {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  /* The screen-reader text in sortable headers ("sort ascending")
     is absolutely positioned. Without a positioned header cell it
     escapes the scroll area and widens the page (Keystone). */
  .view-content > table.table th {
    position: relative;
  }

  /* Only force extra width when there are enough columns to need
     it. Two-column tables (e.g. Native Plant Sellers) fit. */
  .view-content > table.table.cols-2,
  .view-content > table.table.cols-1 {
    min-width: 0;
  }

  .view-content > table.table.cols-3 {
    min-width: 32rem;
  }

  /* cols-4 and up keep the 44rem from custom-style.css. */

  /* Pin the first column while the rest scrolls. */
  .view-content > table.table:not(.cols-1, .cols-2) :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 9.5rem;
    min-width: 9.5rem;
    max-width: 9.5rem;
    overflow-wrap: anywhere;
    box-shadow: inset -1px 0 0 #d4ddd2, 4px 0 6px -4px rgb(31 46 32 / 18%);
  }

  .view-content > table.table:not(.cols-1, .cols-2) thead th:first-child {
    z-index: 2;
  }
}