/* Post figures — charts and tables drawn from our data inside an article, the
 * cards that stand in for them in the editor, and the subject chips.
 *
 * Unlayered, like the article body in post.css, because a figure sits inside
 * .trix-content, whose unlayered reset takes every margin and padding away,
 * and inside .post-body, which blocks out figures and tables for pasted
 * content.
 * ---------------------------------------------------------------------- */

.post-body .post-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-block: var(--space-l);
  margin-inline: 0;
}

.post-body .post-figure--chart {
  background: var(--ps-paper, #f5f2ea);
}

.post-body .post-figure--chart:has(.post-figure__foot) {
  padding-block-end: var(--space-s);
}

.post-body .post-figure--chart .post-figure__foot {
  padding-inline: var(--space-m);
}

.post-body .post-figure__body .figure-plate {
  block-size: auto;
  display: block;
  inline-size: 100%;
}

.post-body .post-figure__deck {
  color: var(--color-ink-medium);
}

.post-body .post-figure .editorial-table {
  border-collapse: collapse;
  display: table;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  inline-size: 100%;
}

.post-body .post-figure .editorial-table :is(th, td) {
  border-block-end: 1px solid var(--color-ink-lightest);
  padding: var(--space-xxs) var(--space-xs);
  text-align: start;
  vertical-align: bottom;
  word-break: normal;
}

.post-body .post-figure .editorial-table td {
  white-space: nowrap;
}

.post-body .post-figure .editorial-table th {
  font-size: var(--text-x-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-body .post-figure .editorial-table .txt-right {
  text-align: end;
}

.post-body .post-figure .editorial-table tr.is-highlighted {
  background: color-mix(in oklch, var(--theme-primary, currentColor) 12%, transparent);
}

.post-body .post-figure .editorial-table__leader {
  color: var(--theme-primary, currentColor);
}

.post-body .post-figure__foot .btn {
  font-size: var(--text-x-small);
  inline-size: auto;
  min-inline-size: 0;
  padding: 0.35em 0.9em;
}

.post-figure-card {
  display: block;
  border: 1px dashed var(--color-ink-lighter);
  border-radius: var(--border-radius-m);
  margin-inline: 0;
  padding: var(--space-s);
}

.post-figure-card figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.post-subjects__chip {
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-block;
  font-size: var(--text-small);
  padding: 0.1em 0.75em;
  text-decoration: none;
}

.post-body .post-figure :is(.editorial-table a, .figure-plate__link text, .bar-chart__link text) {
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.post-body .post-figure .editorial-table a {
  color: inherit;
  font-weight: 600;
}

.post-body .post-figure :is(.figure-plate__link, .bar-chart__link):hover text,
.post-body .post-figure .editorial-table a:hover {
  text-decoration-color: currentColor;
}