/* Shared sideways-scrolling tables (mobile only; desktop is untouched).
   Markup:
     <div class="table-scroll [table-scroll--pinned]"><table>...</table></div>
     <p class="table-hint" aria-hidden="true">Swipe sideways to see the full table.</p>
   /assets/table-scroll.js adds .is-scrollable when the table is wider than its
   box and .has-more until the reader reaches the right edge.
   --table-pinned: first column stays put (112px) and the frame sits on the wrapper.
   --table-framed: frame on the wrapper only (no pinned column).
   Per-page knobs (set inline): --table-pin-bg, --table-head-tint, .table-hint margin. */
.table-hint { display: none; }
@media (max-width: 768px) {
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll.has-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .table-scroll.is-scrollable + .table-hint { display: block; }
  .table-hint { font-size: 13px; color: var(--text-muted, rgba(255, 255, 255, 0.5)); }
  :where(.table-hint) { margin: 10px 0 0; }

  :where(.table-scroll--pinned, .table-scroll--framed) { border: 1px solid var(--border-light, rgba(255, 255, 255, 0.08)); border-radius: 14px; }
  .table-scroll--pinned table { overflow: visible; border: 0; border-radius: 0; }
  .table-scroll--pinned tbody tr:last-child td { border-bottom: 0; }
  .table-scroll--pinned th:first-child,
  .table-scroll--pinned td:first-child {
    position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px;
    background: var(--table-pin-bg, var(--bg-card, #111827));
    box-shadow: inset -1px 0 0 var(--border-light, rgba(255, 255, 255, 0.08));
  }
  .table-scroll--pinned thead th:first-child {
    background: linear-gradient(var(--table-head-tint, rgba(0, 229, 255, 0.08)), var(--table-head-tint, rgba(0, 229, 255, 0.08))), var(--table-pin-bg, var(--bg-card, #111827));
  }
}
@media (max-width: 768px) { .table-scroll--pinned table { min-width: 0; } }
@media (max-width: 600px) { .table-scroll--pinned { container-type: inline-size; } .table-scroll--pinned table { width: max-content; } .table-scroll--pinned th:not(:first-child), .table-scroll--pinned td:not(:first-child) { width: calc(100cqw - 136px); min-width: calc(100cqw - 136px); } }