/* ------------------------------------------------------------------------- */
/* Zenith Burn: the data tables (people.html, missions.html), loaded after   */
/* style.css. Quiet by default; the row under the pointer and the open row   */
/* light up in orange, as docs/ui_design.md describes.                       */
/* ------------------------------------------------------------------------- */

/* ---- Controls and table ------------------------------------------------- */

.table-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-block: 24px 8px;
}

.control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control label {
  color: var(--color-text-muted);
}

.control input,
.control select {
  min-width: 160px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
}

.control input:focus-visible,
.control select:focus-visible {
  border-color: var(--color-accent);
}

/* Scrolls sideways rather than widening the page, as a last resort. */
.table-wrap {
  overflow-x: auto;
}

/* Tabular figures line digits up, as on a terminal. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

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

.data-table .nowrap {
  white-space: nowrap;
}

.data-table th[scope="row"] {
  font-weight: 400;
}

/* Sort and expand controls are buttons, styled to read as plain text. */
.sort-button,
.row-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sort-button {
  color: var(--color-text-strong);
  font-weight: 500;
}

.row-toggle {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The sorted column's arrow is one of the few orange marks on the page. */
[aria-sort="ascending"] .sort-button::after,
[aria-sort="descending"] .sort-button::after {
  color: var(--color-accent);
}

[aria-sort="ascending"] .sort-button::after {
  content: " \25B2";
}

[aria-sort="descending"] .sort-button::after {
  content: " \25BC";
}

.person-row,
.record-row {
  cursor: pointer;
}

.details-row td {
  background: var(--color-surface);
}

.details-heading {
  margin: 8px 0 4px;
  font-size: 1rem;
}

.details-list {
  margin: 0;
  padding-left: 20px;
}

.details-text {
  margin: 0;
}

/* Label and value lists in the expanded row. */
.details-extra,
.details-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 0;
}

.details-extra dd,
.details-fields dd {
  margin: 0;
}

/* Fields hidden from narrow rows; shown in the expanded row instead. */
.details-extra {
  display: none;
}

/* On phones only: says which column the table is sorted by. */
.sort-note {
  display: none;
  margin-top: 0;
  color: var(--color-text-muted);
}

.is-narrow .sort-note {
  display: block;
}

.is-narrow .details-extra {
  display: grid;
}

.is-narrow .col-wide {
  display: none;
}

/* ---- Highlights --------------------------------------------------------- */

/* Number columns line their digits up on the right, like a readout. */
.data-table .num {
  text-align: right;
}

.data-table .num .sort-button {
  text-align: right;
}

/* The count in the line above each table, as on the home page. */
.summary-count {
  color: var(--color-accent);
  font-weight: 500;
}

/* The row under the pointer lifts off black and its name turns orange.
   Only the name, so moving down the table never flickers. */
@media (hover: hover) {
  .person-row:hover > *,
  .record-row:hover > * {
    background: var(--color-surface);
  }

  .person-row:hover .row-toggle,
  .record-row:hover .row-toggle {
    color: var(--color-accent);
  }
}

/* The same lift for keyboard users; the focus ring marks the name. */
.person-row:has(.row-toggle:focus-visible) > *,
.record-row:has(.row-toggle:focus-visible) > * {
  background: var(--color-surface);
}

/* The open row and its details share an orange bar down the left edge,
   so it's clear which row the details belong to. On phones this does the
   job hover can't. */
tr:has(.row-toggle[aria-expanded="true"]) > * {
  border-bottom-color: transparent;
  background: var(--color-surface);
}

tr:has(.row-toggle[aria-expanded="true"]) > :first-child,
tr:has(.row-toggle[aria-expanded="true"]) + .details-row > td {
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.row-toggle[aria-expanded="true"] {
  color: var(--color-accent);
}