/* ====================================================================
   Article tables.

   Adapted from the reference report templates: the table is a panel, not
   loose rows. Border, radius and a clipped overflow make it one object;
   the header sits on its own slightly darker ground in mono uppercase,
   which separates label from content without a heavy rule.

   Unlike figures, a table is body content, so it does follow the theme.
   Tokens are declared on `body` because the theme attribute lives there
   (assets/js/script.js), and a token declared on :root would resolve
   against the light value and inherit it into the dark body.
   ==================================================================== */

body {
  --tbl-panel: var(--image-color, #f2f0e9);
  --tbl-panel2: #eae5d9;
  --tbl-line: rgba(59, 69, 61, 0.16);
  --tbl-dim: #768c99;
  --tbl-hover: rgba(89, 117, 125, 0.07);
}

body[theme="dark"] {
  --tbl-panel: var(--primary-color-2, #252725);
  --tbl-panel2: #2d302d;
  --tbl-line: rgba(248, 245, 237, 0.13);
  --tbl-dim: #9ab3ba;
  --tbl-hover: rgba(154, 179, 186, 0.07);
}

.article-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 2.25rem 0;
  background: var(--tbl-panel);
  border: 1px solid var(--tbl-line);
  border-radius: 10px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.article-text th,
.article-text td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--tbl-line);
  vertical-align: top;
}

.article-text th {
  background: var(--tbl-panel2);
  color: var(--tbl-dim);
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.article-text td {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--secondary-color);
}

/* The first column is the label the reader scans down, so it carries the
   weight and stops the second column from starting a screen away. */
.article-text td:first-child {
  font-weight: 600;
  width: 34%;
}

.article-text tr:last-child td {
  border-bottom: none;
}

.article-text tbody tr:hover td {
  background: var(--tbl-hover);
}

/* A wide table on a narrow screen scrolls inside itself rather than
   pushing the article sideways. */
@media screen and (max-width: 720px) {
  .article-text table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .article-text td:first-child {
    width: auto;
  }
}