/* Charts from jelly-2024-ds/jelly_4_0_0. Colors come from the chart specs; this only lays them out. */
.jelly-chart { margin: 1.5em 0; }
.md-typeset figure.jelly-chart { display: block; width: auto; max-width: 100%; text-align: left; }
.md-typeset .jelly-chart figcaption { font-style: normal; margin: 0.6em 0 0; }
.jelly-chart .jc-static svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.jelly-chart .jc-live { overflow-x: auto; display: none; }
.jelly-chart.jc-ready .jc-static { display: none; }
.jelly-chart.jc-ready .jc-live { display: block; width: fit-content; max-width: 100%; margin: 0 auto; }
/* while the live chart loads in dark mode, show the light SVG inverted rather than a white box */
[data-md-color-scheme="slate"] .jelly-chart:not(.jc-ready) .jc-static svg { filter: invert(0.88) hue-rotate(180deg); }
.jelly-chart figcaption { text-align: left; max-width: none; font-size: 0.85em; margin-top: 0.6em; }
.jelly-chart figcaption p { margin: 0 0 0.4em; }
.md-typeset .jelly-chart figcaption.jc-caption-top { margin: 0 0 0.6em; }
/* caveat notes shown once below several charts (homepage) */
.jelly-chart-notes { font-size: 0.85em; margin: -0.5em 0 1.5em; }
.md-typeset .jelly-chart-notes .jc-notes { list-style: none; padding-left: 0; margin: 0; opacity: 0.8; }
.jelly-chart-notes .jc-flag { display: inline-block; min-width: 1em; font-weight: bold; }
.jelly-chart .jc-summary, .jelly-chart .jc-notes { margin: 0.2em 0 0.4em; padding-left: 1.2em; }
.jelly-chart .jc-notes { list-style: none; padding-left: 0; opacity: 0.8; }
.jelly-chart .jc-flag { display: inline-block; min-width: 1em; font-weight: bold; }
.jelly-chart details.jc-data { font-size: 0.8em; }
.jelly-chart .jc-table { overflow-x: auto; max-height: 28em; overflow-y: auto; }
/* compact data tables: tight cells, headers wrap so a column is only as wide as its values;
   the long selectors outrank MkDocs Material's own table styles */
.jelly-chart .jc-table table,
.md-typeset .jelly-chart .jc-table table:not([class]) { border-collapse: collapse; width: min-content; font-size: 0.95em; }
.jelly-chart .jc-table th, .jelly-chart .jc-table td,
.md-typeset .jelly-chart .jc-table table:not([class]) th,
.md-typeset .jelly-chart .jc-table table:not([class]) td { padding: 0.1em 0.45em; text-align: left; line-height: 1.35; }
.jelly-chart .jc-table td,
.md-typeset .jelly-chart .jc-table table:not([class]) td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.jelly-chart .jc-table th,
.md-typeset .jelly-chart .jc-table table:not([class]) th { white-space: normal; min-width: 0; vertical-align: bottom; }
/* Material wraps every table in a box with negative side margins; inside our own scroll box that
   only makes it overflow */
.md-typeset .jelly-chart .jc-table .md-typeset__scrollwrap { margin: 0; overflow: visible; }
.md-typeset .jelly-chart .jc-table .md-typeset__table { padding: 0; margin: 0; }
.md-typeset .jelly-chart .jc-table table:not([class]) { margin: 0; overflow: visible; }
/* in charts with full-size hit areas (heatmap cells, row bars), the marks on top let the pointer
   through, so moving between a mark and the cell under it doesn't hide and re-show the hover */
.jelly-chart.jc-passthrough .jc-live .mark-text,
.jelly-chart.jc-passthrough .jc-live .mark-rule,
.jelly-chart.jc-passthrough .jc-live .mark-symbol { pointer-events: none; }
/* tooltips: keys on one line, values wrap only when they must; "body" outranks vega-tooltip's own CSS */
/* pointer-events: none matters: the tooltip follows the pointer, and a fast move can land the
   pointer on the tooltip box; the chart then sees "pointer left", clears the hover, and it flashes */
body #vg-tooltip-element { font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; pointer-events: none; }
/* Vega hides the tooltip when the pointer leaves a mark and shows it for the next one a few ms later,
   in a separate step; if the browser paints in between, the tooltip blinks at every cell edge.
   Hiding waits 80 ms (showing doesn't), so a hide followed by a show never reaches the screen. */
body #vg-tooltip-element { transition: visibility 0s linear 80ms; }
body #vg-tooltip-element.visible { transition: visibility 0s; }
body #vg-tooltip-element table tr td.key { white-space: nowrap; max-width: none; }
body #vg-tooltip-element table tr td.value { max-width: 300px; max-height: none; font-variant-numeric: tabular-nums; }