/* ============================================
   Component: Table
   Partial: parts/_table.html.erb
   Stimulus: none
   ============================================ */
/* A table (#287): rows from one answer. The box scrolls sideways in its own width, so the page
   never does, and the table inside it keeps its table semantics. The first column, its header
   cell included, stays fixed while the rest scroll under it, on the surface colour, so nothing
   shows through. No media query: the box fits the width it's given. Every rule is under the
   part's own classes, so no other table changes. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

/* separate, with no spacing, so the fixed column keeps its borders as it scrolls */
.table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}

.table-caption {
  padding: var(--spacing-sm);
  color: var(--color-text);
  font-weight: 600;
  text-align: left;
}

.table th, .table td {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

/* The box's own border closes the table, so its last row draws none of its own. */
.table tbody tr:last-child > * { border-bottom: 0; }

.table thead th {
  color: var(--color-muted);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Each row's first cell names it, and stays in view while the rest scroll */
.table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.table tbody th { font-weight: 600; }

/* A row that opens its own path (Table link:, #366) does so from its first cell, and a column made
   with link: (Table::Column, #58) from each of its cells: the link is at least the tap target's
   height, and a first cell stays fixed with it. */
.table .table-row-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  color: var(--color-link);
}

/* Numbers: right-aligned, in tabular figures, on one line */
.table .table-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A column of long text (Table::Column wrap: true, #368) breaks an unbroken string, such as an
   error quoting an address, anywhere, so it never widens its column to the string's length. The
   minimum width is there because overflow-wrap: anywhere drops the cell's least width to one
   character: without it the column, and the table with it, would squeeze into the box instead of
   scrolling, and break every word mid-word. Only body cells take the class: the header holds the
   column's label. */
.table .table-wrap {
  overflow-wrap: anywhere;
  min-width: 12rem;
}

/* A status's colour is always beside its words, never in their place */
.table .is-good, .table .is-warning, .table .is-bad { font-weight: 600; }
.table .is-good { color: var(--color-success); }
.table .is-warning { color: var(--color-warning); }
.table .is-bad { color: var(--color-danger); }

.table-empty { color: var(--color-muted); }