/* Tables in a post body.
 *
 * A separate stylesheet on purpose. post.css is frozen: it holds the
 * locked frame measurements, and a test fails the build if the served
 * copy drifts from design/post-prototype/post.css. Anything new goes in
 * its own file (publication-ops, rule 6). post.css already keeps a table
 * inside the measure; this file only dresses it.
 *
 * The grammar is the figure grammar (docs/design-language.md): two
 * hairlines around the whole, mono for labels, the serif for content.
 * Cells align left. Markdown column alignment writes a style attribute,
 * and the page's style-src refuses inline styles.
 *
 * No hex values here either. Colours come from the theme only.
 */

.column table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--wc-line-strong);
  border-bottom: 1px solid var(--wc-line-strong);
  font-size: 16px;
  line-height: 1.5;
  color: var(--wc-body);
  font-variant-numeric: tabular-nums lining-nums;
}

.column th {
  font-family: var(--wc-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-muted);
  text-align: left;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--wc-line);
}

.column td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--wc-line);
  vertical-align: top;
}

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

/* Cell text sits straight in the td, with no p around it, so the link
 * colour post.css gives `.column p a` does not reach it. */
.column td a { color: var(--wc-accent); }
.column td a:hover { color: var(--qe-accent-deep); }

/* The outer cells meet the column edge, so the table's text lines up
 * with the paragraphs above and below it. */
.column th:first-child,
.column td:first-child { padding-left: 0; }
.column th:last-child,
.column td:last-child { padding-right: 0; }