/**
 * Moodfex Calculators — shared "real data" panel.
 *
 * Self-contained (own CSS custom properties, not borrowed from any single
 * calculator's namespace) so the exact same markup/JS can sit under ANY
 * calculator's result area without depending on that calculator's own
 * `.mfx-xx{--xx-...}` variables. Loaded on every [moodfex_calculator] page
 * (see moodfex-calc-data-panel.js for the render() call), but only ever
 * appears when a calculator's own JS actually calls MoodfexCalcPanel.render() —
 * calculators that don't call it are completely unaffected.
 */
.mfx-calc-panel {
	--cp-bg: #ffffff;
	--cp-text: #20241f;
	--cp-muted: #687066;
	--cp-accent: #52644d;
	--cp-line: #e1e6dd;
	max-width: 720px;
	margin: 22px auto 0;
	background: var(--cp-bg);
	border: 1px solid var(--cp-line);
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 12px 32px rgba(40, 50, 38, 0.06);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--cp-text);
	box-sizing: border-box;
}
.mfx-calc-panel * {
	box-sizing: border-box;
}
.mfx-calc-panel__title {
	margin: 0 0 4px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 1.2rem;
	color: var(--cp-accent);
}
.mfx-calc-panel__subtitle {
	margin: 0 0 18px;
	font-size: 0.9rem;
	color: var(--cp-muted);
}
.mfx-calc-panel__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px 20px;
}
.mfx-calc-panel__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cp-line);
}
.mfx-calc-panel__k {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cp-muted);
}
.mfx-calc-panel__v {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cp-text);
	line-height: 1.35;
}
@media (max-width: 480px) {
	.mfx-calc-panel {
		padding: 20px;
	}
	.mfx-calc-panel__grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
	}
}