/**
 * RIXO Charts — styling for table-backed charts.
 */

figure.rixo-chart {
	margin: 2rem 0;
}

figure.rixo-chart .rixo-chart__canvas {
	position: relative;
	width: 100%;
	height: 480px;
}

@media (max-width: 600px) {
	figure.rixo-chart .rixo-chart__canvas {
		height: 320px;
	}
}

/* Hidden only when the caption is what the chart draws as its title — the
   script marks that case. Otherwise the caption holds something else, usually
   the source of the data, and stays visible. Kept in the DOM either way, for
   assistive technology and crawlers. */
figure.rixo-chart.rixo-chart--caption-is-title > figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* When the source note should stay visible, mark it: <figcaption class="is-visible"> */
figure.rixo-chart > figcaption {
	position: static;
	width: auto;
	height: auto;
	margin: 0.75rem 0 0;
	clip: auto;
	overflow: visible;
	white-space: normal;
	font-size: 0.875rem;
	font-style: italic;
	text-align: center;
	color: #555;
}

figure.rixo-chart .rixo-chart__data {
	margin-top: 1rem;
	font-size: 0.9375rem;
}

figure.rixo-chart .rixo-chart__data > summary {
	cursor: pointer;
	padding: 0.5rem 0;
	color: #1F3864;
	font-weight: 600;
}

/* The table itself is left to the theme: overriding borders and alignment
   here made it look unlike every other table on the site. */
figure.rixo-chart .rixo-chart__data table {
	margin-top: 0.5rem;
}

figure.rixo-chart .rixo-chart__source {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-style: italic;
	text-align: center;
	color: #555;
}

/* rixo-chart-unfolded: the table is left visible under the chart instead of
   being collapsed into <details>. Styling is the theme's business — only the
   spacing to the chart is ours. */
figure.rixo-chart .rixo-chart__table {
	margin-top: 1.25rem;
}