/* The plate stays full width; only the final empty column grows. */
#app :is(.table-wrap, .player-retention-table-wrap, .calibration-table-wrap):has(> .compact-data-table) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

#app table.compact-data-table,
#app .table-wrap table.compact-data-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Column widths have one owner in colgroup. Existing inputs and long content
 * retain their own wrapping, overflow and interaction rules. */
#app table.compact-data-table :is(th, td),
#app .table-wrap table.compact-data-table :is(th, td) {
  width: auto;
  min-width: 0;
}

#app table.compact-data-table .compact-table-fill,
#app .table-wrap table.compact-data-table .compact-table-fill {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
}

/* A finite presentation palette keeps generated markup compatible with the
 * deployed self-only style CSP. Fixed table layout preserves these widths. */
.compact-col-36 { width: 36px; }
.compact-col-40 { width: 40px; }
.compact-col-48 { width: 48px; }
.compact-col-80 { width: 80px; }
.compact-col-88 { width: 88px; }
.compact-col-100 { width: 100px; }
.compact-col-120 { width: 120px; }
.compact-col-130 { width: 130px; }
.compact-col-140 { width: 140px; }
.compact-col-150 { width: 150px; }
.compact-col-160 { width: 160px; }
.compact-col-170 { width: 170px; }
.compact-col-180 { width: 180px; }
.compact-col-200 { width: 200px; }
.compact-col-220 { width: 220px; }
.compact-col-236 { width: 236px; }
.compact-col-240 { width: 240px; }
.compact-col-260 { width: 260px; }
.compact-col-280 { width: 280px; }
.compact-col-300 { width: 300px; }
.compact-col-360 { width: 360px; }
.compact-col-400 { width: 400px; }