/* Audit Lite — shared table row conventions.
   Classes, not a component: columns differ per screen, row behaviour does not.
   Every value comes from a tokens.css token. Requires tokens.css first.
   --al-sticky-top is the offset the sticky header parks under (the 56px header). */

/* The horizontal-scroll wrapper a wide table sits in becomes the scrollport for
   its own sticky header: without a block-axis scroll of its own, `top` only
   offsets the header downward and it covers the first row. So the wrapper owns
   both axes and the header pins at the wrapper's top edge. */
div:has(> table.al-table) {
  max-height: calc(100vh - 56px);
  overflow: auto;
  overscroll-behavior: contain;
}
div:has(> table.al-table) > .al-table { --al-sticky-top: 0px; }

.al-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
  line-height: var(--table-font-line);
  --al-sticky-top: 56px;
}

/* header · sticky in the in-flow band, sunken plate, muted's pair token */
.al-table thead th {
  position: sticky;
  top: var(--al-sticky-top);
  z-index: 5;
  text-align: left;
  background: var(--color-bg-sunken);
  color: var(--color-text-muted-on-sunken);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border-bottom: 1px solid var(--color-border);
}

.al-table thead th.al-num,
.al-table thead th.al-right { text-align: right; }

/* sortable header · a button in the header cell, sort state in its name */
.al-table thead th button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: calc(var(--cell-pad-y) * -1) calc(var(--cell-pad-x) * -1);
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: inherit;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
}
.al-table thead th button:hover { color: var(--color-text-primary); }

/* rows · 32px at compact, hairlines, no zebra, hover is a surface change */
.al-table tbody tr { height: var(--row-height); }
.al-table tbody tr:hover { background: var(--color-bg-hover); }
.al-table tbody tr[tabindex] { cursor: pointer; }

/* the row whose detail rail is open stays marked while it is open */
.al-table tbody tr[aria-current="true"],
.al-table tbody tr[aria-current="true"]:hover { background: var(--color-bg-selected); }

.al-table tbody td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-text-primary);
}
.al-table tbody tr:last-child td { border-bottom: none; }

/* group heading row · spans the table on the sunken plate, no hover */
.al-table tbody tr.al-group td {
  background: var(--color-bg-sunken);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--cell-pad-y) var(--cell-pad-x);
}
.al-table tbody tr.al-group:hover td { background: var(--color-bg-sunken); }
.al-table tbody tr.al-group:hover { background: transparent; }

/* numeric and date cells · tabular figures everywhere a number is compared */
.al-table .al-num {
  text-align: right;
  font-variant-numeric: var(--numeric-tabular);
}
.al-table .al-date {
  font-variant-numeric: var(--numeric-tabular);
  color: var(--color-text-secondary);
}
.al-table .al-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono-size);
  color: var(--color-text-tertiary);
  white-space: nowrap;   /* an identifier is read back character by character — it never breaks */
}

/* entity tree · one step per level, name then short code */
.al-tree { display: inline-flex; align-items: baseline; gap: 8px; }
.al-tree-0 { padding-left: 0; }
.al-tree-1 { padding-left: 20px; }
.al-tree-2 { padding-left: 40px; }
.al-tree-root { font-weight: var(--text-body-emph-weight); }

/* print · a long table repeats its head */
@media print {
  .al-table thead { display: table-header-group; }
  .al-table tbody tr:hover { background: transparent; }
}