/*
 * MFI Charts — front-end styles.
 *
 * Two things here are load bearing rather than cosmetic.
 *
 * 1. The focus ring on the data-table toggle. The Crane theme strips outlines in
 *    a reset whose selector list includes `summary`
 *    (themes/crane/assets/css/style-main.css:7262), and nothing puts one back. A
 *    keyboard user tabbing to that toggle would see nothing happen. The rules
 *    below are scoped to this block so the chart is operable whether or not the
 *    site-wide fix has shipped yet, and they use a class chain so they beat the
 *    theme's element-level reset on specificity.
 *
 * 2. The forced-colors block. The palette is pale, so a high-contrast dark theme
 *    would otherwise wash the ring out completely.
 *
 * Colors are declared as custom properties on `.mfi-chart` so the Phase 3
 * palette review can change them in one place.
 */

.mfi-chart {
	--mfi-chart-ink: #1f1f1f;
	--mfi-chart-rule: #d4d4d4;
	--mfi-chart-font: Georgia, "Times New Roman", serif;
	--mfi-chart-max: 30rem;

	margin: 0 0 1.5rem;
	color: var(--mfi-chart-ink);
	font-family: var(--mfi-chart-font);
}

/* ---------------------------------------------------------------- title */

.mfi-chart__title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

/* --------------------------------------------------------------- visual */

.mfi-chart__visual {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	justify-content: center;
}

.mfi-chart__svg {
	display: block;
	flex: 1 1 18rem;
	width: 100%;
	max-width: var(--mfi-chart-max);
	height: auto;
	overflow: visible;
}

.mfi-chart--no-legend .mfi-chart__svg {
	margin-inline: auto;
}

/*
 * Slice labels are sized in SVG user units, so they scale with the chart rather
 * than with the reader's font-size setting. That is the known limit of drawn
 * text, and it is why the data table below is not optional: browser zoom scales
 * the whole figure, but a font-size-only preference does not reach in here.
 */
.mfi-chart__label {
	font-family: var(--mfi-chart-font);
	font-size: 21px;
	font-weight: 600;
}

.mfi-chart__label--outside {
	fill: var(--mfi-chart-ink);
}

/* --------------------------------------------------------------- legend */

.mfi-chart__legend {
	flex: 1 1 12rem;
	max-width: 22rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	line-height: 1.5;
}

.mfi-chart__legend-item {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.mfi-chart__swatch {
	flex: 0 0 auto;
	align-self: center;
	width: 0.875rem;
	height: 0.875rem;
	border: 1px solid transparent;
	border-radius: 50%;
}

.mfi-chart__legend-label {
	flex: 1 1 auto;
}

.mfi-chart__legend-value {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* ----------------------------------------------------------------- note */

.mfi-chart__note,
.mfi-chart__rounding {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.mfi-chart__rounding {
	font-style: italic;
}

/* ----------------------------------------------------------- data table */

.mfi-chart__data {
	margin-top: 1.25rem;
}

.mfi-chart__data-toggle {
	display: inline-block;
	padding: 0.375rem 0.5rem;
	border-radius: 2px;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: underline;
}

/*
 * Restores a focus ring the theme reset removes. See the note at the top.
 */
.mfi-chart .mfi-chart__data-toggle:focus-visible {
	outline: 3px solid var(--mfi-chart-ink);
	outline-offset: 2px;
}

@supports not selector(:focus-visible) {
	.mfi-chart .mfi-chart__data-toggle:focus {
		outline: 3px solid var(--mfi-chart-ink);
		outline-offset: 2px;
	}
}

.mfi-chart__table {
	width: 100%;
	margin-top: 0.75rem;
	border-collapse: collapse;
	font-size: 1rem;
}

.mfi-chart__table-caption {
	margin-bottom: 0.5rem;
	font-weight: 700;
	text-align: left;
}

.mfi-chart__table th,
.mfi-chart__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--mfi-chart-rule);
	text-align: left;
	vertical-align: top;
}

.mfi-chart__table thead th {
	border-bottom-width: 2px;
}

.mfi-chart__table tbody th {
	font-weight: 400;
}

.mfi-chart__table td {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.mfi-chart__table tfoot th,
.mfi-chart__table tfoot td {
	border-bottom: 0;
	font-weight: 700;
}

/* -------------------------------------------------------- empty and old */

.mfi-chart--empty .mfi-chart__empty {
	margin: 0;
	padding: 1rem;
	border: 2px dashed #767676;
	font-size: 1rem;
}

/*
 * Shown only if this plugin is ever removed. WordPress keeps the markup a block
 * saved into the page and prints it when the block type is gone, so the figures
 * survive even though the drawing does not.
 */
.mfi-chart-fallback__list {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.mfi-chart-fallback__list li {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
	max-width: 24rem;
	padding: 0.25rem 0;
	border-bottom: 1px solid #d4d4d4;
}

.mfi-chart-fallback__value {
	font-weight: 700;
}

/* ------------------------------------------------------------- contexts */

@media (max-width: 40em) {
	.mfi-chart__visual {
		gap: 1rem;
	}

	.mfi-chart__legend {
		max-width: none;
	}
}

/*
 * A high-contrast theme repaints backgrounds and would flatten the ring into one
 * color. Opting the drawing out keeps the slices distinguishable, and the white
 * backdrop keeps this pale palette legible against a dark forced canvas.
 */
@media (forced-colors: active) {
	.mfi-chart__svg {
		forced-color-adjust: none;
		background: #ffffff;
		border: 1px solid CanvasText;
	}

	.mfi-chart__swatch {
		forced-color-adjust: none;
		border-color: CanvasText;
	}

	.mfi-chart .mfi-chart__data-toggle:focus-visible {
		outline-color: Highlight;
	}
}

@media print {
	.mfi-chart__data--details > .mfi-chart__table {
		display: table;
	}

	.mfi-chart__data-toggle {
		display: none;
	}
}