.table-container {
  flex: 1;
  overflow: auto;
}

.data-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 0 12px;
  text-align: left;
  white-space: nowrap;
}

.data-table th:first-child,
.data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: var(--edge);
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: var(--edge);
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 30px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-label-secondary);
  background: var(--color-table-header);
  border-bottom: .5px solid var(--color-separator);
  backdrop-filter: blur(20px) saturate(1.8);
  user-select: none;
}

.data-table thead th:first-child {
  z-index: 3;
}

.data-table thead th:hover {
  color: var(--color-label);
}

/* room for three digits on every table, so the first column starts where Results' does */
.data-table td.row-number::after { content: "888"; display: block; height: 0; overflow: hidden; visibility: hidden; }

/* row numbers: small and grey, starting at the same edge as any table's first column */
.data-table .row-number {
  width: 1%;
  padding-right: 4px;
  font-size: 11px;
  color: var(--color-label-tertiary);
  text-align: left;
  user-select: none;
}

.data-table td {
  height: var(--row-height);
  background: var(--color-row);
  border-bottom: .5px solid var(--color-separator-light);
}

.data-table .cell-glyphs { display: inline-flex; gap: 14px; }
.data-table .cell-glyphs.is-slotted { gap: 6px; vertical-align: middle; }
.data-table .cell-slot { width: 20px; height: 20px; flex: none; }  /* a platform the model was not measured on keeps its place */

.data-table .col-fill { width: 100%; padding: 0; }

.data-table .is-numeric {
  text-align: right;
}

/* a note column holds one line: the rest after an ellipsis, all of it on hover */
.data-table td.is-wide {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table td.is-empty {
  color: var(--color-label-tertiary);  /* one grey for every empty cell's dash, whatever its row */
}

.data-table td.is-code {
  font: 12px var(--font-mono);
  color: var(--color-label-secondary);
}

.data-table tbody tr:hover td {
  background: var(--color-row-hover);
}

.data-table tbody tr.is-link {
  cursor: pointer;
}

.data-table tbody tr.is-stale td {
  color: var(--color-label-tertiary);
}

.data-table tbody tr.is-unmeasured td {
  color: var(--color-label-tertiary);
}

.data-table tbody tr.is-unmeasured td.is-empty {
  color: var(--color-label-tertiary);
}

.data-table tbody tr.is-highlighted td {
  background: var(--color-row-highlight);
}

.data-table tbody tr.is-highlighted:hover td {
  background: var(--color-row-highlight-hover);
}

.column-unit {
  margin-left: 3px;
  font-weight: 400;
  color: var(--color-label-tertiary);
}

.column-coverage {
  margin-left: 5px;
  font-weight: 500;
  color: var(--color-label-tertiary);
}

.column-coverage.is-low {
  color: var(--color-warning);
}

.column-planned {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-label-secondary);
  background: var(--color-fill);
}

.column-sort {
  margin-left: 3px;
  color: var(--color-accent);
}

.table-empty {
  padding: 64px 0;
  text-align: center;
  color: var(--color-label-secondary);
}
/* the grids' empty row, as a table's reads: its words at the left in grey over a hairline */
.platform-nothing { display: flex; align-items: center; height: 36px; padding: 0 20px; font-size: 13px; color: var(--color-label-secondary); border-bottom: .5px solid var(--color-separator); }
.platform-nothing:hover { background: var(--color-row-hover); }  /* grey under the pointer, as every table row */

/* on a phone the table slides sideways inside its own frame, the row numbers and the header held in place */
@media (max-width: 899px) {
  .table-container {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .data-table {
    font-size: 14px;
  }

  .data-table thead th {
    height: 34px;
    font-size: 12px;
  }

  .data-table td.is-code,
  .hardware-tag {
    font-size: 13px;
  }
}

/* a column's (i): a small outlined glyph after the label; its note opens on hover or focus, as a macOS help tag */
.column-info { position: relative; display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--color-label-tertiary); cursor: help; outline: none; }
.column-info svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.column-info:hover, .column-info:focus-visible { color: var(--color-accent); }
.column-info-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  z-index: 5;
  width: 220px;
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--color-menu);
  box-shadow: var(--shadow-menu);
  backdrop-filter: blur(20px);
  color: var(--color-label);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity .15s, transform .15s;
}
.column-info:hover .column-info-pop,
.column-info:focus-visible .column-info-pop { opacity: 1; transform: none; }

/* a category label: the text in the row's colour, a 7px dot before it; several sit side by side */
.cell-dot { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.cell-dot::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--dot); }  /* a square chip, as the Rankings key draws its engines */
.data-table .cell-glyphs.is-slotted .sidebar-glyph[style] { margin-left: 0; }  /* the tiles on one grid with the empty slots */
.data-table .cell-glyphs.is-slotted .sidebar-glyph svg { fill: none; }
.data-table .cell-glyphs.is-slotted .sidebar-glyph svg .is-filled { fill: #fff; stroke: none; }  /* Apple's mark is a filled glyph */
.data-table .cell-glyphs .sidebar-glyph.is-fit { opacity: .35; }  /* would fit, not measured yet */
.data-table .model-name-cell { display: inline-flex; align-items: center; gap: 8px; }
.data-table .model-name-cell .model-badge { width: 18px; height: 18px; border-radius: 5px; }
.data-table .model-name-cell .model-badge img { width: 12px; height: 12px; }
/* an engine's logo on the same white tile, its name as far from it; a single-ink logo takes a dark ink on the white */
.data-table .engine-tag.is-logo { gap: 8px; }
.data-table .engine-tag .model-badge { width: 18px; height: 18px; border-radius: 5px; }
.data-table .engine-tag .model-badge .engine-logo { width: 12px; height: 12px; }
.data-table .engine-tag .model-badge .engine-logo.is-glyph { fill: #1d1d1f; }
.data-table .engine-tag .model-badge .engine-logo.is-glyph .is-stroked { stroke: #1d1d1f; }
.data-table .engine-tag .model-badge .engine-logo.is-glyph .is-faint { fill: #8e8e93; }

/* a Performance row above its theoretical limit, as CI Reports lists it: a light red wash, a shade deeper under the pointer */
.data-table tbody tr.is-over-limit td { background: color-mix(in srgb, var(--color-negative) 8%, transparent); }
.data-table tbody tr.is-over-limit:hover td { background: color-mix(in srgb, var(--color-negative) 14%, transparent); }

/* a selected Performance or Quality row, as a Mac list fills its selection: the accent, its text in white */
.data-table tbody tr[data-pick] { user-select: none; -webkit-user-select: none; }
.data-table tbody tr.is-picked td, .data-table tbody tr.is-picked:hover td { background: var(--color-accent); color: #fff; }
.data-table tbody tr.is-picked td * { color: #fff; }

/* the bar's Report: a plain toolbar button, the filters' grey, dimmed until rows are selected */
.report-selected { display: inline-flex; align-items: center; gap: 4px; height: var(--control-height); padding: 0 10px; border: 0; border-radius: var(--radius-control); background: var(--color-fill); color: var(--color-label); font: inherit; font-size: 13px; cursor: pointer; }
.report-selected[hidden] { display: none; }
.report-selected:disabled { color: var(--color-label-tertiary); cursor: default; }
.report-selected:not(:disabled):hover { background: var(--color-fill-secondary); }
.report-selected svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* a selected row's engine square keeps its colour on the blue: a white ring round it, as Finder rings a tag in a selected row */
.data-table tbody tr.is-picked .engine-tag::before,
.data-table tbody tr.is-picked .cell-dot::before,
.data-table tbody tr.is-picked .status-tag.is-pass::before,
.data-table tbody tr.is-picked .status-tag.is-noisy::before,
.data-table tbody tr.is-picked .status-tag.is-fail::before { box-shadow: 0 0 0 1.5px #fff; }  /* the status's square too; an icon (the platform's tile) keeps no ring, as Finder rings tags, not icons */
/* a status drawn as an empty square (not run, unsupported, no fit, no data): its outline in white on the blue */
.data-table tbody tr.is-picked .status-tag.is-not_run::before,
.data-table tbody tr.is-picked .status-tag.is-unsupported::before,
.data-table tbody tr.is-picked .status-tag.is-no_fit::before,
.data-table tbody tr.is-picked .status-tag.is-no_data::before { box-shadow: inset 0 0 0 1px #fff; }
.data-table tbody tr.is-picked td.is-empty, .data-table tbody tr.is-picked.is-unmeasured td.is-empty, .data-table tbody tr.is-picked.is-stale td { color: #fff; }  /* a selected row is white throughout, its dashes too */

/* every table: each column as wide as what it holds and set to its start, so no column sits in an empty band; the room
   left over goes to the last column */
#table-container .data-table { width: 100%; table-layout: auto; }
#table-container .data-table th, #table-container .data-table td { width: 1%; white-space: nowrap; text-align: left; }
#table-container .data-table th:last-child, #table-container .data-table td:last-child { width: auto; }
#table-container .data-table .col-fill { width: 100%; }  /* a catalog table keeps its fill before the Results count */