@layer reset, tokens, base, components, project, utilities;

@layer project {
	.project-page--geboortecijfers-nederlandse-herkomst {
		--project-width: 1440px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-notes {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 16px;
		margin-bottom: 18px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-dashboard {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 350px;
		gap: 18px;
		align-items: stretch;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-chart,
	.project-page--geboortecijfers-nederlandse-herkomst .project-sidebar,
	.project-page--geboortecijfers-nederlandse-herkomst .project-table-section .project-panel {
		background: var(--surface);
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-toolbar {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .view-switch {
		display: grid;
		grid-template-columns: repeat(4, minmax(120px, 1fr));
		gap: 6px;
		border: 0;
		background: transparent;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .view-switch button,
	.project-page--geboortecijfers-nederlandse-herkomst #exportCsv {
		min-height: 38px;
		border: 1px solid var(--line);
		border-radius: 6px;
		background: var(--surface-raised);
		color: var(--ink);
		font: inherit;
		font-size: 13px;
		font-weight: 800;
		line-height: 1.15;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .view-switch button:is(:hover, :focus-visible),
	.project-page--geboortecijfers-nederlandse-herkomst #exportCsv:is(:hover, :focus-visible) {
		border-color: var(--accent);
	}

	.project-page--geboortecijfers-nederlandse-herkomst .view-switch button.is-active {
		border-color: var(--accent);
		background: var(--accent);
		color: #fff;
	}

	.project-page--geboortecijfers-nederlandse-herkomst #exportCsv {
		min-width: 132px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .controls-grid {
		display: grid;
		grid-template-columns: minmax(190px, 1.15fr) minmax(190px, 1fr) auto;
		gap: 12px;
		align-items: end;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-control {
		display: grid;
		gap: 6px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-control span,
	.project-page--geboortecijfers-nederlandse-herkomst .eyebrow,
	.project-page--geboortecijfers-nederlandse-herkomst .stat-list span,
	.project-page--geboortecijfers-nederlandse-herkomst .claim-card span {
		color: var(--muted);
		font-size: 12px;
		font-weight: 780;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.project-page--geboortecijfers-nederlandse-herkomst select,
	.project-page--geboortecijfers-nederlandse-herkomst input {
		width: 100%;
		min-height: 38px;
		border: 1px solid var(--line);
		border-radius: 6px;
		background: var(--surface-raised);
		color: var(--ink);
		font: inherit;
	}

	.project-page--geboortecijfers-nederlandse-herkomst input[type="range"] {
		min-height: 22px;
		accent-color: var(--accent);
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-chart-wrap {
		min-height: 520px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst #mainChart {
		display: block;
		width: 100%;
		height: 520px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .axis text {
		fill: var(--muted);
		font-size: 12px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .axis path,
	.project-page--geboortecijfers-nederlandse-herkomst .axis line {
		stroke: var(--line-strong);
	}

	.project-page--geboortecijfers-nederlandse-herkomst .grid-line {
		stroke: var(--line);
		stroke-dasharray: 3 5;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .hover-target {
		cursor: crosshair;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .legend {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .legend span {
		display: inline-flex;
		gap: 6px;
		align-items: center;
		color: var(--muted);
		font-size: 12px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .legend i {
		width: 10px;
		height: 10px;
		border-radius: 999px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .stat-list {
		display: grid;
		gap: 12px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .stat-list div {
		display: grid;
		gap: 4px;
		padding-bottom: 10px;
		border-bottom: 1px solid var(--line);
	}

	.project-page--geboortecijfers-nederlandse-herkomst .stat-list strong,
	.project-page--geboortecijfers-nederlandse-herkomst .claim-card strong {
		color: var(--ink);
		font-size: 1.35rem;
		line-height: 1.15;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .claim-cards {
		display: grid;
		gap: 10px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .claim-card {
		display: grid;
		gap: 5px;
		padding: 12px;
		border: 1px solid var(--line);
		border-radius: 8px;
		background: var(--surface-raised);
	}

	.project-page--geboortecijfers-nederlandse-herkomst .claim-card p {
		margin: 0;
		font-size: 13px;
		line-height: 1.45;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .project-table-section {
		width: min(var(--project-width), 100%);
		margin: 18px auto 0;
	}

	.project-page--geboortecijfers-nederlandse-herkomst .table-wrap {
		overflow-x: auto;
	}

	.project-page--geboortecijfers-nederlandse-herkomst table {
		width: 100%;
		border-collapse: collapse;
		font-size: 13px;
	}

	.project-page--geboortecijfers-nederlandse-herkomst th,
	.project-page--geboortecijfers-nederlandse-herkomst td {
		padding: 10px 8px;
		border-bottom: 1px solid var(--line);
		text-align: right;
		white-space: nowrap;
	}

	.project-page--geboortecijfers-nederlandse-herkomst th:nth-child(2),
	.project-page--geboortecijfers-nederlandse-herkomst td:nth-child(2) {
		text-align: left;
	}

	.project-page--geboortecijfers-nederlandse-herkomst th {
		color: var(--muted);
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
	}

	@media (max-width: 1050px) {
		.project-page--geboortecijfers-nederlandse-herkomst .project-dashboard,
		.project-page--geboortecijfers-nederlandse-herkomst .project-notes,
		.project-page--geboortecijfers-nederlandse-herkomst .project-toolbar,
		.project-page--geboortecijfers-nederlandse-herkomst .controls-grid {
			grid-template-columns: 1fr;
		}

		.project-page--geboortecijfers-nederlandse-herkomst .project-chart-wrap,
		.project-page--geboortecijfers-nederlandse-herkomst #mainChart {
			min-height: 440px;
			height: 440px;
		}
	}
}