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

@layer project {
	.project-page--verdachten-naar-herkomst {
		--project-width: 1540px;
	}

	.project-page--verdachten-naar-herkomst .project-intro {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
		gap: 24px;
		align-items: end;
		max-width: 1500px;
		margin: 0 auto 22px;
	}

	.project-page--verdachten-naar-herkomst .eyebrow {
		margin: 0;
		color: var(--muted);
		font-size: 12px;
		font-weight: 780;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.project-page--verdachten-naar-herkomst .project-dashboard {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 18px;
		max-width: 1500px;
		margin: 0 auto;
		align-items: stretch;
	}

	.project-page--verdachten-naar-herkomst .project-chart,
	.project-page--verdachten-naar-herkomst .project-sidebar,
	.project-page--verdachten-naar-herkomst .project-notes {
		background: var(--surface);
	}

	.project-page--verdachten-naar-herkomst .project-chart {
		min-width: 0;
		overflow: hidden;
	}

	.project-page--verdachten-naar-herkomst .project-toolbar {
		grid-template-columns: minmax(260px, 1fr) auto;
	}

	.project-page--verdachten-naar-herkomst .search-field input {
		width: 100%;
		min-height: 42px;
		padding: 0 12px;
		font-size: 15px;
		letter-spacing: 0;
		text-transform: none;
	}

	.project-page--verdachten-naar-herkomst .toggle-row {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
		justify-content: flex-end;
	}

	.project-page--verdachten-naar-herkomst .toggle-row label {
		display: inline-flex;
		min-height: 42px;
		align-items: center;
		gap: 7px;
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 0 11px;
		background: var(--surface-raised);
		color: var(--muted);
		font-size: 14px;
		font-weight: 760;
	}

	.project-page--verdachten-naar-herkomst .axis-scale-toggle {
		display: inline-flex;
		min-height: 42px;
		align-items: center;
		gap: 0;
		padding: 3px;
	}

	.project-page--verdachten-naar-herkomst .axis-scale-toggle legend {
		padding: 0 7px 0 6px;
		color: var(--muted);
		font-size: 12px;
		font-weight: 780;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.project-page--verdachten-naar-herkomst .axis-scale-toggle label {
		min-height: 34px;
		border-radius: 4px;
		padding: 0 9px;
	}

	.project-page--verdachten-naar-herkomst .axis-scale-toggle label:has(input:checked) {
		background: var(--surface-quiet);
		color: var(--muted);
	}

	.project-page--verdachten-naar-herkomst button {
		min-height: 42px;
		border: 1px solid rgba(34, 96, 137, 0.4);
		padding: 0 14px;
		background: var(--surface-quiet);
		color: var(--muted);
		font-weight: 820;
	}

	.project-page--verdachten-naar-herkomst .project-sidebar h2,
	.project-page--verdachten-naar-herkomst .project-notes h2 {
		margin: 4px 0 0;
		color: var(--ink);
		font: inherit;
		font-size: 23px;
		font-weight: 820;
		letter-spacing: 0;
		line-height: 1.12;
		text-transform: none;
	}

	.project-page--verdachten-naar-herkomst .point-count {
		margin: 0;
		color: var(--muted);
		font-size: 13px;
		white-space: nowrap;
	}

	.project-page--verdachten-naar-herkomst .project-chart-wrap {
		position: relative;
		padding: 0 10px 12px 0;
	}

	.project-page--verdachten-naar-herkomst #scatterChart {
		display: block;
		width: 100%;
		min-height: 520px;
		cursor: grab;
		touch-action: none;
		user-select: none;
	}

	.project-page--verdachten-naar-herkomst #scatterChart:active {
		cursor: grabbing;
	}

	.project-page--verdachten-naar-herkomst .grid line {
		stroke: rgba(244, 239, 230, 0.12);
		stroke-dasharray: 2 3;
	}

	.project-page--verdachten-naar-herkomst .grid path {
		display: none;
	}

	.project-page--verdachten-naar-herkomst .band-boundary {
		stroke: rgba(201, 163, 106, 0.38);
		stroke-width: 1;
		stroke-dasharray: 4 6;
		pointer-events: none;
	}

	.project-page--verdachten-naar-herkomst .band-label {
		pointer-events: none;
		transition: opacity 160ms ease;
	}

	.project-page--verdachten-naar-herkomst .band-label text {
		fill: var(--saga-ink-strong);
		font-size: 10px;
		font-weight: 760;
		letter-spacing: 0;
		paint-order: stroke;
		stroke: rgba(5, 5, 5, 0.78);
		stroke-linejoin: round;
		stroke-width: 2.75px;
	}

	.project-page--verdachten-naar-herkomst .band-label__title {
		font-size: 11px;
		font-weight: 860;
	}

	.project-page--verdachten-naar-herkomst .axis path,
	.project-page--verdachten-naar-herkomst .axis line {
		stroke: rgba(201, 163, 106, 0.46);
	}

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

	.project-page--verdachten-naar-herkomst .axis-label {
		fill: var(--muted);
		font-size: 14px;
		font-weight: 780;
	}

	.project-page--verdachten-naar-herkomst .point {
		stroke: rgba(5, 5, 5, 0.92);
		stroke-width: 1.55;
		cursor: pointer;
	}

	.project-page--verdachten-naar-herkomst .point.is-country {
		fill: var(--muted);
	}

	.project-page--verdachten-naar-herkomst .point.is-aggregate {
		fill: var(--muted);
		stroke: var(--line-strong);
	}

	.project-page--verdachten-naar-herkomst .point.is-selected {
		stroke: var(--line-strong);
		stroke-width: 3.4;
	}

	.project-page--verdachten-naar-herkomst .labels text,
	.project-page--verdachten-naar-herkomst .labels {
		pointer-events: none;
	}

	.project-page--verdachten-naar-herkomst .labels text {
		fill: var(--saga-ink-strong);
		font-size: 12px;
		font-weight: 650;
		paint-order: stroke;
		stroke: rgba(5, 5, 5, 0.92);
		stroke-width: 3.5px;
	}

	.project-page--verdachten-naar-herkomst .legend {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		align-items: center;
		padding: 0 18px 16px;
		color: var(--muted);
		font-size: 13px;
	}

	.project-page--verdachten-naar-herkomst .legend span {
		display: inline-flex;
		gap: 7px;
		align-items: center;
	}

	.project-page--verdachten-naar-herkomst .legend i {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 1px solid;
	}

	.project-page--verdachten-naar-herkomst .point-country {
		background: var(--surface-quiet);
		border-color: var(--muted);
	}

	.project-page--verdachten-naar-herkomst .point-aggregate {
		background: #c43b2f;
		border-color: var(--muted);
	}

	.project-page--verdachten-naar-herkomst .band-summary {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		padding: 0 18px 14px;
	}

	.project-page--verdachten-naar-herkomst .band-summary__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 2px 8px;
		align-items: start;
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 9px 10px;
		background: rgba(255, 255, 255, 0.035);
	}

	.project-page--verdachten-naar-herkomst .band-summary__item i {
		grid-row: 1 / span 4;
		width: 12px;
		height: 12px;
		margin-top: 2px;
		border: 1px solid rgba(244, 239, 230, 0.26);
		border-radius: 3px;
	}

	.project-page--verdachten-naar-herkomst .band-summary__item strong,
	.project-page--verdachten-naar-herkomst .band-summary__item span {
		min-width: 0;
		overflow-wrap: anywhere;
		line-height: 1.25;
	}

	.project-page--verdachten-naar-herkomst .band-summary__item strong {
		color: var(--ink);
		font-size: 13px;
		font-weight: 840;
	}

	.project-page--verdachten-naar-herkomst .band-summary__item span {
		color: var(--muted);
		font-size: 12px;
		font-weight: 700;
	}

	.project-page--verdachten-naar-herkomst .project-sidebar {
		display: grid;
		align-content: start;
		gap: 16px;
		padding: 16px;
	}

	.project-page--verdachten-naar-herkomst .project-sidebar section {
		display: grid;
		gap: 12px;
		border-bottom: 1px solid var(--line);
		padding-bottom: 16px;
	}

	.project-page--verdachten-naar-herkomst .project-sidebar section:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}

	.project-page--verdachten-naar-herkomst .stat-list {
		display: grid;
		gap: 8px;
	}

	.project-page--verdachten-naar-herkomst .stat-list div,
	.project-page--verdachten-naar-herkomst .current-total {
		display: grid;
		gap: 3px;
		border: 1px solid #e3d9c9;
		border-radius: 6px;
		padding: 10px;
		background: var(--surface-raised);
	}

	.project-page--verdachten-naar-herkomst .stat-list span,
	.project-page--verdachten-naar-herkomst .current-summary span,
	.project-page--verdachten-naar-herkomst .current-summary small {
		color: var(--muted);
		font-size: 12px;
		font-weight: 760;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.project-page--verdachten-naar-herkomst .stat-list strong,
	.project-page--verdachten-naar-herkomst .current-summary strong {
		color: var(--ink);
		font-size: 20px;
		line-height: 1.1;
	}

	.project-page--verdachten-naar-herkomst .current-summary {
		display: grid;
		gap: 12px;
	}

	.project-page--verdachten-naar-herkomst .current-summary p {
		margin: 0;
		color: var(--muted);
		font-size: 14px;
		line-height: 1.45;
	}

	.project-page--verdachten-naar-herkomst .current-summary ol {
		display: grid;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.project-page--verdachten-naar-herkomst .current-summary li {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2px 10px;
		border-bottom: 1px solid #eadfcd;
		padding-bottom: 8px;
	}

	.project-page--verdachten-naar-herkomst .current-summary li span {
		overflow-wrap: anywhere;
	}

	.project-page--verdachten-naar-herkomst .current-summary li small {
		grid-column: 1 / -1;
		text-transform: none;
		letter-spacing: 0;
	}

	.project-page--verdachten-naar-herkomst .project-tooltip {
		z-index: 10;
		max-width: min(320px, calc(100vw - 40px));
		border: 1px solid rgba(35, 31, 26, 0.24);
		background: rgba(255, 253, 250, 0.96);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
		font-size: 13px;
	}

	.project-page--verdachten-naar-herkomst .project-tooltip strong {
		font-size: 15px;
	}

	.project-page--verdachten-naar-herkomst .project-tooltip span,
	.project-page--verdachten-naar-herkomst .project-tooltip small {
		display: block;
	}

	.project-page--verdachten-naar-herkomst .project-tooltip small {
		color: var(--muted);
		line-height: 1.35;
	}

	.project-page--verdachten-naar-herkomst button:disabled {
		opacity: 0.48;
		cursor: not-allowed;
	}

	.project-page--verdachten-naar-herkomst .project-notes {
		max-width: 1500px;
		margin: 18px auto 0;
		padding: 18px;
	}

	.project-page--verdachten-naar-herkomst .project-notes article {
		max-width: none;
		column-count: 2;
		column-gap: 36px;
		column-rule: 1px solid rgba(201, 163, 106, 0.18);
	}

	.project-page--verdachten-naar-herkomst .project-notes h2 {
		column-span: all;
		max-width: none;
		margin-bottom: 0.85rem;
	}

	.project-page--verdachten-naar-herkomst .project-notes p {
		max-width: none;
		margin: 10px 0 0;
		color: var(--muted);
		line-height: 1.55;
		break-inside: avoid;
	}

	.project-page--verdachten-naar-herkomst .project-notes p:first-of-type {
		margin-top: 0;
	}

	.project-page--verdachten-naar-herkomst .sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.project-page--verdachten-naar-herkomst .load-error {
		margin: 20px;
		color: var(--muted);
		font-weight: 800;
	}

	@media (width <= 1060px) {
		.project-page--verdachten-naar-herkomst .project-intro,
		.project-page--verdachten-naar-herkomst .project-dashboard {
			grid-template-columns: 1fr;
		}

		.project-page--verdachten-naar-herkomst .project-sidebar {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.project-page--verdachten-naar-herkomst .project-notes article {
			column-count: 1;
		}

		.project-page--verdachten-naar-herkomst .project-notes h2 {
			margin-bottom: 0;
		}

		.project-page--verdachten-naar-herkomst .project-notes p:first-of-type {
			margin-top: 10px;
		}
	}

	@media (width <= 1180px) {
		.project-page--verdachten-naar-herkomst .band-summary {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (width <= 760px) {
		.project-page--verdachten-naar-herkomst {
			padding: 18px 10px 30px;
		}

		.project-page--verdachten-naar-herkomst .project-toolbar,
		.project-page--verdachten-naar-herkomst .project-panel__head,
		.project-page--verdachten-naar-herkomst .project-sidebar {
			grid-template-columns: 1fr;
		}

		.project-page--verdachten-naar-herkomst .project-panel__head {
			display: grid;
		}

		.project-page--verdachten-naar-herkomst .toggle-row {
			justify-content: stretch;
		}

		.project-page--verdachten-naar-herkomst .toggle-row label,
		.project-page--verdachten-naar-herkomst .toggle-row button,
		.project-page--verdachten-naar-herkomst .axis-scale-toggle {
			flex: 1 1 130px;
			justify-content: center;
		}

		.project-page--verdachten-naar-herkomst .axis-scale-toggle label {
			flex: 1 1 auto;
		}

		.project-page--verdachten-naar-herkomst .project-sidebar {
			display: grid;
		}

		.project-page--verdachten-naar-herkomst .point-count {
			white-space: normal;
		}

		.project-page--verdachten-naar-herkomst .band-summary {
			grid-template-columns: 1fr;
		}

		.project-page--verdachten-naar-herkomst .band-label {
			display: none;
		}

		.project-page--verdachten-naar-herkomst .labels text {
			font-size: 10px;
		}
	}
}