/*
 * The record table is the site's main structure: 1 px rules, a mono uppercase
 * header row on --paper-2, tabular figures right-aligned, 48 px rows.
 *
 * Below 768 px the columns after the second collapse into a stacked second
 * line in mono rather than scrolling sideways (Blueprint 11).
 */

.wrap {
  width: 100%;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--hairline) solid var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
}

.table th,
.table td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: var(--hairline) solid var(--rule);
  vertical-align: top;
}

.table thead th {
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody td {
  font-size: var(--step-body);
  min-height: var(--row-h);
}

/*
 * Numerals and codes. The selector is qualified with .table because
 * `.table th, .table td` sets text-align and would otherwise win on
 * specificity, leaving the figures left-aligned.
 */
.table th.num,
.table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.code {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--ink-2);
  white-space: nowrap;
  width: 1%;
}

.doc {
  font-weight: 500;
}

/* The posted total: a heavier top rule and the value in green. */
.total td {
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  font-weight: 500;
}

.total .num {
  color: var(--green-ink);
}

.ink .table {
  border-color: var(--rule-dark);
}

.ink .table th,
.ink .table td {
  border-bottom-color: var(--rule-dark);
}

.ink .table thead th {
  background: #1b1e1b;
  color: var(--mat);
}

.ink .total td {
  border-top-color: var(--paper);
}

.ink .total .num {
  color: var(--green);
}

/* ---- Mobile: stack the trailing columns -------------------------------- */

@media (max-width: 767px) {
  .table td a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    border-bottom: var(--hairline) solid var(--rule);
    padding-block: var(--s3);
  }

  .table tbody tr:last-child {
    border-bottom: 0;
  }

  .table td {
    border-bottom: 0;
    padding: 0 0 var(--s1);
  }

  /*
   * `min-height: var(--row-h)` gives a 48 px row in table layout, where it is
   * advisory. Once a cell is `display: block` it becomes binding, and every
   * stacked cell claimed 48 px of its own — two of them plus padding made a
   * 121 px row out of a one-word label and a four-word value, which is how ten
   * rows of "how it runs" came to fill two phone screens. The row keeps its
   * height; the cells inside it stop each demanding one.
   *
   * The selector matches the base rule exactly — `.table td` alone is less
   * specific than `.table tbody td` and loses.
   */
  .table tbody td {
    min-height: 0;
  }

  /* A stacked cell with no value must not print its label on its own. */
  .table td:empty {
    display: none;
  }

  /* The first two cells keep body type; the rest become a mono detail line. */
  .table td:nth-child(n + 3) {
    font-family: var(--font-mono);
    font-size: var(--step-mono);
    color: var(--ink-2);
    text-align: left;
  }

  /* Label the stacked cells so the row stays readable without a header. */
  .table td[data-label]:nth-child(n + 3)::before {
    content: attr(data-label) " ";
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--step-label);
  }

  .table td.num,
  .table th.num {
    text-align: left;
  }

  /*
   * A two-column table is a list of label/value pairs, not a grid.
   *
   * Stacked as two blocks of 16 px body type it read as two equal statements
   * and cost about 120 px a row — ten rows of "how it runs" filled two phone
   * screens. The label becomes the caption it already is, which is also how
   * the same information is set in the home-page runtime list and in the spec
   * block beside a module title: one pattern, three places.
   */
  .table[data-columns="2"] tr {
    padding-block: var(--s3);
  }

  .table[data-columns="2"] td:first-child {
    font-family: var(--font-mono);
    font-size: var(--step-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: var(--s1);
  }

  .table[data-columns="2"] td:nth-child(2) {
    font-size: var(--step-small);
    color: var(--ink);
    padding-bottom: 0;
  }

  .ink .table[data-columns="2"] td:first-child {
    color: var(--muted-2);
  }

  .ink .table[data-columns="2"] td:nth-child(2) {
    color: var(--paper);
  }

  .total td {
    border-top: 0;
  }

  .total {
    border-top: 2px solid var(--ink) !important;
  }
}