/* Interlink — the dense data table.
 *
 * Tables are how briefings actually get read, so this is a first-class part of the
 * data-visualisation style rather than a default `<table>` with a border on it.
 *
 * The rules it follows are the same four the charts follow: structure in ink and rule, the
 * claim in the signal, mono for every label and every number, and a caption with a source.
 * Everything below resolves to a token; there is not a raw colour or a raw length in the
 * file. Load order: fonts.css → tokens.css → reset.css → table.css.
 *
 * Structure
 * ---------
 *   figure.il-figure                the shared chart chrome — top rule, number, title
 *     div.il-table-scroll           a focusable scroller, so a wide table is reachable
 *       table.il-table              the table itself
 *     div.il-figure__foot           the hairline and the SOURCE line
 */

/* --------------------------------------------------------------- the figure chrome */
/* Identical to the chrome the SVG charts draw, so a table and a chart sitting in the same
   briefing line up: an emphatic rule above, a mono figure number, an Archivo title, then
   a plain hairline above the provenance. */

.il-figure {
  border-block-start: var(--il-hairline) solid var(--il-rule-strong);
  padding-block-start: var(--il-space-3);
  color: var(--il-ink);
}

.il-figure__num,
.il-figure__foot {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label-sm);
  line-height: var(--il-leading-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
  font-weight: var(--il-wght-regular);
  text-transform: uppercase;
  color: var(--il-ink-muted);
}

.il-figure__title {
  font-size: var(--il-text-h3);
  line-height: var(--il-leading-h3);
  letter-spacing: var(--il-tracking-h3);
  margin-block: var(--il-space-2) var(--il-space-5);
}

.il-figure__foot {
  border-block-start: var(--il-hairline) solid var(--il-rule);
  padding-block-start: var(--il-space-3);
  margin-block-start: var(--il-space-5);
}

.il-figure__foot p {
  margin: 0;
}

/* --------------------------------------------------------------- the scroller */
/* A dense table is wider than a phone. `overflow-x` alone traps a keyboard user, so the
   scroller is a labelled, focusable region — the ring comes from the reset. */

.il-table-scroll {
  overflow-x: auto;
}

/* Six columns never fit a phone, so say so rather than letting the table end mid-column
   with no cue. Above the breakpoint the hint is not shown, because there is nothing to
   hint at and a line that says nothing is a line to delete. */
.il-table-hint {
  display: none;
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
  text-transform: uppercase;
  color: var(--il-ink-muted);
  margin-block-start: var(--il-space-3);
}

@media (max-width: 40rem) {
  .il-table-hint {
    display: block;
  }
}

/* --------------------------------------------------------------- the table */

.il-table {
  inline-size: 100%;
  font-size: var(--il-text-small);
  line-height: var(--il-leading-small);
  /* Numbers in a column must line up whatever the face does elsewhere. */
  font-variant-numeric: tabular-nums;
}

.il-table caption {
  text-align: start;
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
  text-transform: uppercase;
  color: var(--il-ink-muted);
  padding-block-end: var(--il-space-2);
}

.il-table th,
.il-table td {
  padding: var(--il-space-2) var(--il-space-4);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
}

/* Column rules: hairlines between columns, none on the outside — the table is not a box.
   `rule-strong` and not `rule`, because a zebra table is the one element where a rule
   crosses both `paper` and `paper-sunk`, and plain `rule` disappears on the sunk rows. */
.il-table th + th,
.il-table td + td {
  border-inline-start: var(--il-hairline) solid var(--il-rule-strong);
}

/* -- head ------------------------------------------------------------------------- */

.il-table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--il-z-sticky);
  background: var(--il-paper);
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label-sm);
  line-height: var(--il-leading-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
  font-weight: var(--il-wght-medium);
  text-transform: uppercase;
  color: var(--il-ink-muted);
  /* the emphatic rule under the head: the one place this table raises its voice */
  border-block-end: var(--il-hairline) solid var(--il-rule-strong);
  padding-block: var(--il-space-2);
}

/* -- the sortable-column affordance ------------------------------------------------ */
/* A real button, so it is keyboard-reachable and announces itself; `aria-sort` on the
   `<th>` is what a screen reader reads. The caret is two hairlines, not an icon — the icon
   set belongs to another part of the system and a table should not fork it. */

.il-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  transition: color var(--il-dur-micro) var(--il-ease);
}

.il-table__sort::after {
  content: '';
  inline-size: 0.42em;
  block-size: 0.42em;
  border-inline-end: var(--il-hairline) solid currentColor;
  border-block-end: var(--il-hairline) solid currentColor;
  /* pointing down = the direction this click will sort; rotated up once it is sorted asc */
  transform: translateY(-0.18em) rotate(45deg);
  opacity: 0;
  transition: opacity var(--il-dur-micro) var(--il-ease),
              transform var(--il-dur-ui) var(--il-ease);
}

.il-table__sort:hover::after,
.il-table__sort:focus-visible::after {
  opacity: 0.55;
}

.il-table th[aria-sort] .il-table__sort {
  color: var(--il-ink);
}

.il-table th[aria-sort] .il-table__sort::after {
  opacity: 1;
}

.il-table th[aria-sort='ascending'] .il-table__sort::after {
  transform: translateY(0.1em) rotate(-135deg);
}

/* -- body -------------------------------------------------------------------------- */

.il-table tbody tr:nth-child(even) {
  background: var(--il-paper-sunk);
}

.il-table tbody tr:nth-child(even) .il-table__meta {
  /* `ink-muted` measures 4.38:1 on `paper-sunk` in light — under AA. The token that was
     added for exactly this case takes it back over. */
  color: var(--il-ink-muted-sunk);
}

.il-table td {
  border-block-end: var(--il-hairline) solid var(--il-rule);
}

.il-table tbody tr:last-child td {
  border-block-end: 0;
}

/* Mono cells: identifiers, codes and every number. */
.il-table__key,
.il-table__num,
.il-table__meta {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label);
  letter-spacing: var(--il-tracking-label);
  text-transform: uppercase;
}

.il-table__key {
  font-weight: var(--il-wght-medium);
  color: var(--il-ink);
}

.il-table__num {
  text-align: end;
  font-weight: var(--il-wght-medium);
  font-variant-numeric: tabular-nums;
}

.il-table__meta {
  color: var(--il-ink-muted);
}

.il-table__prose {
  white-space: normal;
  min-inline-size: 22ch;
  color: var(--il-ink-2);
}

/* The sparkline cell: the SVG inherits ink from the row and the accent from the theme,
   which is the whole reason it is inlined rather than loaded through an <img>. */
.il-table__spark {
  inline-size: 1%;
}

.il-table__spark svg {
  display: block;
}

/* -- the marked row ---------------------------------------------------------------- */
/* The signal marks a claim, so exactly one row may carry it and it carries it as an edge,
   not as a fill: a signal wash across a row would spend the whole accent budget of the
   page on a highlight. */

/* `> :first-child` and not `td:first-child`: the row's first cell is a `<th scope="row">`,
   because the desk name is what identifies the row. */
.il-table tr.is-marked > :first-child {
  border-inline-start: var(--il-space-1) solid var(--il-signal);
  padding-inline-start: calc(var(--il-space-4) - var(--il-space-1));
}

.il-table tr.is-marked .il-table__num {
  color: var(--il-signal);
}

/* -- interaction ------------------------------------------------------------------- */

.il-table tbody tr {
  transition: background var(--il-dur-micro) var(--il-ease);
}

@media (hover: hover) {
  .il-table tbody tr:hover {
    background: var(--il-paper-raised);
  }

  .il-table tbody tr:nth-child(even):hover {
    background: var(--il-paper-raised);
  }
}

/* -- narrow ------------------------------------------------------------------------ */

@media (max-width: 40rem) {
  .il-table th,
  .il-table td {
    padding-inline: var(--il-space-3);
  }

  .il-table__prose {
    min-inline-size: 18ch;
  }
}