/* --- Responsive scaler: visual scale without breaking scroll --- */
#faTableWrap {
  /* existing styles you already have are fine */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* default scale */
  --fa-scale: 1;
}

#faTableWrap .fa-scale {
  transform: scale(var(--fa-scale));
  transform-origin: top left;

  /* Counteract scale so the scroll area matches the unscaled content width */
  width: calc(100% / var(--fa-scale));
}

/* Make table fluid inside the scaler */
#faTableWrap .fa-scale > table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* MOBILE: scale a bit */
@media (max-width: 768px) {
  #faTableWrap { --fa-scale: .95; }
  #faTableWrap th, #faTableWrap td { font-size: .95rem; padding: .45rem .5rem; }
}

/* SMALLER MOBILE: scale more */
@media (max-width: 480px) {
  #faTableWrap { --fa-scale: .85; }
  #faTableWrap th, #faTableWrap td { font-size: .95rem; }
}