/**
 * CHART MODULE
 *
 * Wrapper styling for chart posts rendered via the chart-render component.
 * Applies to both the chart_module page module and the chart detail page.
 *
 * Per-type rendering (mermaid, future drawio, etc.) lives in
 * templates/components/chart-types/<type>.php. Per-type CSS lives below
 * scoped under .chart-type-<type>.
 */

page-module.chart {

	.warning {
		color: var(--ink-error);
	}

	.section-heading + .chart-placeholder {
		margin-top: var(--above-block);
	}

	.chart-placeholder {
		aspect-ratio: 16 / 9;
		background: var(--viz-canvas-background);
		border: 1px dashed var(--stroke-secondary);
	}

	.chart-placeholder + .warning {
		margin-top: var(--below-block);
	}

	.section-heading + .chart-figure {
		margin-top: var(--above-block);
	}

	.chart-figure {
		margin: 0;
		background: var(--viz-canvas-background);
		border: 1px solid var(--stroke-secondary);
	}

	text-content {
		margin-top: var(--below-block);
	}


	/* ===== Type: mermaid ===== */

	&.chart-type-mermaid .mermaid,
	.chart-type-mermaid .mermaid {
		display: block;
		max-width: 100%;
		padding: var(--viz-canvas-padding);

		font-family: var(--viz-font-family);
		font-size: var(--viz-font-size);
		line-height: var(--viz-line-height);
		text-align: center;
		overflow-x: auto;
	}

	.chart-type-mermaid .mermaid svg {
		max-width: 100%;
		height: auto;
	}

	/* Structural SVG theming (fill, ink, line, etc.) is handled by sentinel-swap
	   in templates/components/chart-types/mermaid.php — those colors can't be
	   styled via CSS because mermaid emits them with inline !important.

	   Node STATE colors (visible/temp/hidden) are handled here in CSS instead:
	   the post-render walker strips mermaid's inline fill/stroke from .node.X
	   elements so these rules can take over. */

	.mermaid .node.visible rect,
	.mermaid .node.visible polygon,
	.mermaid .node.visible circle {
		fill: #c6f6d5;
		stroke: #22543d;
	}

	.mermaid .node.temp rect,
	.mermaid .node.temp polygon,
	.mermaid .node.temp circle {
		fill: #feebc8;
		stroke: #7b341e;
	}

	.mermaid .node.hidden rect,
	.mermaid .node.hidden polygon,
	.mermaid .node.hidden circle {
		fill: #fed7d7;
		stroke: #742a2a;
	}

	/* Clickable nodes (mermaid wraps them in <a xlink:href>) — soft underline
	   so the link affordance is visible without shouting. Targets the anchor
	   directly to survive mermaid version differences in inner markup. */
	.mermaid a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-decoration-color: currentColor;
		text-underline-offset: 2px;
		opacity: 0.85;
	}

}

[data-prominence='featured'] page-module.chart {
	@media (width >= 1000px) {
		grid-column: 2 / -2;
		display: grid;
		grid-template-columns: subgrid;

		> inner-column {
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: subgrid;

			figure {
				grid-column: 1 / -1;   /* fills the featured bleed */
				max-width: 100%;
			}

			.section-heading,
			text-content {
				grid-column: 2 / -2;   /* of subgrid = section 3-15 = reading band */
			}
		}
	}
}

[data-prominence='full'] page-module.chart {
	@media (width >= 1000px) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: subgrid;

		padding-block: calc(var(--module-block-padding) * 2);

		> inner-column {
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: subgrid;

			figure {
				grid-column: 1 / -1;   /* full bleed */
				max-width: 100%;
			}

			.section-heading,
			text-content {
				grid-column: 3 / -3;   /* reading band */
			}
		}
	}
}

[data-emphasis='focused'] page-module.chart {
	background-color: var(--fill-primary);
	color: var(--ink-primary);
}

[data-emphasis='immersive'] page-module.chart {
	background-color: var(--fill-primary);
	color: var(--ink-primary);

	padding-block: clamp(10rem, 40vh, 25rem);
}