/* The one table. Every class here is applied by `table::AtivvTableClasses`, which is the only
   thing that names them: the crate that renders the rows is headless and asks us for every class.
   Tokens only, as everywhere.

   As the snapshot draws HQ's list: no box around it, an ink rule over the top, the column heads in
   small uppercase mono, rows on hairlines, no zebra, and a faint wash under the row the pointer
   is on. */

/* The table's own scroll container. A wide table scrolls inside its column; the page never
   scrolls sideways. */
.data-table-scroll {
  overflow-x: auto;
  border-top: var(--rule-strong) solid var(--color-ink);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* Shown, the caption is the table's title, under the ink rule as the snapshot titles a section. */
.data-table-caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-3) 0;
  font-size: var(--text-display-5);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
}

/* Hidden on screen, still read aloud: the pattern every "visually hidden" utility is, written
   once because this is the only place that needs it. */
.data-table-caption-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.data-table-head-cell {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-muted);
  padding: var(--space-3) var(--space-6) var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-line);
  white-space: nowrap;
}

/* A sortable head cell is a control, and says so on hover and on focus. The crate puts the click
   handler on the cell itself, so the cursor is what tells a mouse it is one. */
.data-table-head-cell-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

.data-table-head-cell:hover .data-table-head-cell-inner {
  color: var(--color-ink);
}

/* A list whose order is its meaning (`table::FixedHeadCell`): its heads are labels, not controls. */
.data-table-head-cell-fixed .data-table-head-cell-inner {
  cursor: default;
}

.data-table-head-cell-fixed:hover .data-table-head-cell-inner {
  color: inherit;
}

/* Which way a column is sorted, as an arrow after its title. The crate hands us `sort-asc` and
   `sort-desc` on the cell; nothing else in the app reads those two words. */
.data-table-head-cell.sort-asc .data-table-head-cell-inner::after,
.data-table-head-cell.sort-desc .data-table-head-cell-inner::after {
  color: var(--color-ink);
}

.data-table-head-cell.sort-asc .data-table-head-cell-inner::after {
  content: "\2191";
}

.data-table-head-cell.sort-desc .data-table-head-cell-inner::after {
  content: "\2193";
}

.data-table-cell {
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  border-bottom: var(--hairline) solid var(--color-line);
  color: var(--color-ink);
  vertical-align: top;
}

/* The gutter is between columns, never outside the last one. */
.data-table-head-cell:last-child,
.data-table-cell:last-child {
  padding-right: 0;
}

.data-table-row:hover .data-table-cell,
.data-table-row-selected .data-table-cell {
  background: color-mix(in oklab, var(--color-ink) 2.5%, transparent);
}

/* A cell whose row has not arrived yet: a bar of the line colour, not a spinner, so a table that
   fills in does not flicker. */
.data-table-loading {
  display: block;
  height: 1em;
  border-radius: var(--radius-chip);
  background: var(--color-line);
}

/* A row that is the way into one thing: the link in one of its cells stretches over the whole row,
   so the row is what the pointer presses, as the snapshot's list rows are. The link stays one link,
   named by its own words, for the keyboard and for a screen reader. */
.data-table-row {
  position: relative;
}

.data-table-row-link {
  color: inherit;
  text-decoration: none;
}

.data-table-row-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.data-table-row-link:focus-visible {
  outline: none;
}

.data-table-row:has(.data-table-row-link:focus-visible) {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: calc(-1 * var(--focus-width));
}

/* ---- on the ruled sheet ----

   A table in a well's ruled paper (well.css) writes on the paper's own rules, as the Spec draws
   HQ's list (sheet 1b): no ink rule over it and no hairlines of its own, every row one ruled pitch
   tall from the paper's top so each sits on a rule, the heads in the label's size in the metadata
   ink, and nothing wrapping onto a second line, which would step off the rules. */
.well-paper-ruled .data-table-scroll {
  border-top: none;
}

.well-paper-ruled .data-table-head-cell,
.well-paper-ruled .data-table-cell {
  height: var(--ruled-pitch);
  padding: 0 var(--space-4) 0 0;
  border-bottom: none;
  vertical-align: middle;
  white-space: nowrap;
}

.well-paper-ruled .data-table-head-cell {
  color: var(--color-meta);
  font-size: var(--text-mono-label);
  letter-spacing: var(--tracking-label);
}

.well-paper-ruled .data-table-head-cell:last-child,
.well-paper-ruled .data-table-cell:last-child {
  padding-right: 0;
}