/* Side-by-side encounter tables on special-environment pages.
   Wrap a group of (heading + table) blocks in:
     <div class="tablegrid" markdown>
       <div markdown>### Type ... | table | </div>
       <div markdown>### Type ... | table | </div>
     </div>
   Each inner <div markdown> becomes one grid cell so its heading stays paired
   with its table. Auto-fits 1-3 columns by viewport width; collapses to one
   column on phones. */

.tablegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 1rem 0;
  align-items: start;
}

.tablegrid > div {
  break-inside: avoid;
  min-width: 0;
}

.tablegrid h3 {
  margin-top: 0.5rem;
}

.tablegrid table {
  width: 100%;
  font-size: 0.85em;
  margin: 0;
}

.tablegrid th,
.tablegrid td {
  padding: 0.3em 0.5em;
}

/* Shrink the narrow numeric columns (Roll, # App) to content width; let the
   Creature column flex. Works for the standard 3-column shape used on Sky and
   other specials pages. */
.tablegrid th:nth-child(2),
.tablegrid td:nth-child(2),
.tablegrid th:nth-child(3),
.tablegrid td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}