/*
 * Health Sector Report chart widget (tlycs_hsr_chart) — the one rule the React
 * island needs from the host page.
 *
 * recharts draws an <svg> whose size it also writes as an inline style, so the
 * figure has to be told to track its container instead of the width it happened
 * to mount at. That is not page layout and it is not something an Elementor
 * control could ever express — there is no widget between the theme's widget and
 * the SVG recharts creates at runtime — so it belongs to the widget, next to the
 * bundle that renders it, exactly like hsr-tables.css belongs to the two table
 * widgets.
 *
 * Keyed on `.hsr-chart`, the class the widget's own mount point already carries
 * (tlycs_hsr_chart_markup(), tlycs-core/inc/shortcodes/hsr-charts-embed.php) —
 * the same convention hsr-tables.css uses with its `hn-*` classes. The page used
 * to carry an `ev-chart` class in the widget's Advanced tab for this; the mount
 * point's class needs no author input, so the Advanced tab is empty now.
 *
 * `!important` is load-bearing: it beats the inline style recharts sets on the
 * <svg> element itself, which an ordinary rule cannot.
 *
 * Registered in tlycs_elementor_widget_styles() (functions.php) against
 * `tlycs_hsr_chart`, so it loads only on pages that place the widget.
 */

.elementor .hsr-chart svg {
	width: 100% !important;
	height: auto !important;
	display: block;
	max-width: 100%;
}