renderers/_shared/cell.css

/* ============================================================
   renderers/_shared/cell.css — the ONE owner of card chrome.
   Loaded once (linked by the gallery, or auto-injected by
   cell.js/ensureSharedCss). Per-renderer CSS owns only slot
   placement INSIDE the card, scoped under the per-chart class
   (= payload.meta.id) that createCard() adds to .cf-card.

   Container-query sized: every card is its own inline-size
   container, so a chart mounted in a half-width dashboard slot
   fits — nothing here couples to the viewport.
   ============================================================ */

.cf-card {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-three);
  padding: var(--card-buffer);
  background: var(--bg-page);
  border: 1px solid var(--ink-25);
  color: var(--text-body);
  font-family: var(--font);
  min-width: 0;
}

/* ── header ── */
.cf-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-three);
  font-size: clamp(12px, 3.4cqi, var(--size-h4));
  font-weight: 700;
  border-bottom: 1px solid var(--ink-15);
  padding-bottom: var(--space-two);
}
.cf-stamp {
  font-size: var(--size-footnote);
  font-weight: 400;
  color: var(--text-muted);
  text-transform: var(--lowercase);
  white-space: nowrap;
}
.cf-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-three);
  min-width: 0;
}

/* ── stat-cell grid ── */
.cf-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 22cqi, 170px), 1fr));
  gap: var(--space-two);
}
.cf-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-one);
  padding: var(--space-two) var(--space-three);
  background: var(--bg-wash);
  border: 1px solid var(--ink-15);
  min-width: 0;
}
.cf-cell-label {
  font-size: clamp(8px, 2cqi, var(--size-footnote));
  line-height: 1.35;
  color: var(--text-secondary);
  text-transform: var(--lowercase);
  letter-spacing: 0.02em;
}
.cf-cell-value {
  font-size: clamp(15px, 5.5cqi, var(--size-stat-number));
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ── generic table (CONTRACT-2 table {columns,rows}) ── */
.cf-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-15);
}
.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(10px, 2.6cqi, var(--size-table-cell));
  line-height: 1.5;
}
.cf-table th {
  font-size: clamp(9px, 2.2cqi, var(--size-table-header));
  font-weight: 700;
  text-align: left;
  text-transform: var(--lowercase);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--table-cell-border);
  padding: var(--space-one) var(--space-three);
  white-space: nowrap;
}
.cf-table td {
  padding: var(--space-one) var(--space-three);
  border-bottom: 1px solid var(--ink-08);
}
.cf-table tbody tr:hover {
  background: var(--table-row-hover);
}
.cf-table .cf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── methodology block ({prose, equations, citations}) ── */
.cf-method {
  font-size: clamp(10px, 2.4cqi, var(--size-figure-max));
  line-height: var(--line-height);
  border-top: 1px solid var(--ink-15);
  padding-top: var(--space-three);
}
.cf-method-heading {
  font-size: var(--size-footnote);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: var(--lowercase);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-two);
}
.cf-method p {
  margin: 0 0 var(--space-two);
  color: var(--text-body);
}
.cf-eq {
  display: block;
  margin: var(--space-two) 0;
  padding: var(--space-two) var(--space-three);
  background: var(--bg-wash);
  border-left: 2px solid var(--callout-border-light);
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  white-space: nowrap;
}
.cf-citations {
  list-style: none;
  margin: var(--space-two) 0 0;
  padding: 0;
}
.cf-citation {
  font-size: clamp(9px, 2.2cqi, 13px);
  color: var(--text-secondary);
  padding-left: 2ch;
  text-indent: -2ch;      /* APA hanging indent */
  margin-bottom: var(--space-one);
}

/* ── results scaffold (payload.results), mirrors .cf-method ── */
.cf-results {
  font-size: clamp(10px, 2.4cqi, var(--size-figure-max));
  line-height: var(--line-height);
  border-top: 1px solid var(--ink-15);
  padding-top: var(--space-three);
  margin-top: var(--space-three);
}
.cf-results-heading {
  font-size: var(--size-footnote);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: var(--lowercase);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-two);
}
.cf-results p {
  margin: 0 0 var(--space-two);
  color: var(--text-body);
}
.cf-findings {
  list-style: none;
  margin: var(--space-two) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-one) var(--space-three);
}
.cf-finding {
  font-size: clamp(9px, 2.2cqi, 13px);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.cf-finding::before {
  content: "·";
  margin-right: 0.5ch;
  color: var(--ink-40);
}

/* ── error / insufficient-data card states ── */
.cf-error {
  border: 1px dashed var(--chart_color_biased);
  color: var(--chart_color_biased);
  padding: var(--space-four);
  font-size: var(--size-footnote);
  font-family: var(--font);
  overflow-wrap: anywhere;
}