/* Section page chrome that site.css does not cover. Tokens come from
   /assets/site.css (portfolio pages) and @quantlab/theme tokens (sections). */
/* The .site-shell host is static HTML around the React root (so
   /assets/matrix.js can prepend its rain canvas before React mounts): the
   root box drops out so skip link / header / main stay flex items of the
   shell exactly as on portfolio pages. */
.site-shell > #root {
  display: contents;
}

/* Data surfaces stay legible over the rain: charts and tables that sit on the
   bare page (not inside a card/paper, which is already opaque) get the page's
   own --bg as an opaque backing — the same colour they showed before, minus
   the rain. Prose, headings and labels keep the portfolio's rain-over-page
   look (masked canvas, see .matrix-canvas in site.css). */
.section-body .js-plotly-plot:not(.mantine-Card-root *, .mantine-Paper-root *),
.section-body .mantine-Table-table:not(.mantine-Card-root *, .mantine-Paper-root *) {
  background-color: var(--bg);
}

.section-body {
  max-width: var(--wrap, 1360px);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.section-body h1 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  letter-spacing: 0.02em;
}

.section-muted {
  color: var(--muted, #a8bfd1);
}