/* Mock 1: bento overview. One scrolling page, KPI row on top, a 12-column bento grid below. */
body {
	background:
		radial-gradient(60rem 30rem at 10% -10%, color-mix(in srgb, var(--theme-action) 9%, transparent), transparent 70%),
		radial-gradient(40rem 24rem at 100% 0%, color-mix(in srgb, var(--theme-brand) 8%, transparent), transparent 70%),
		var(--theme-surface-page);
}

.dashboard {
	--component-dashboard-gutter: var(--global-size-unit-16);
	max-inline-size: 90rem;
	margin-inline: auto;
	padding: var(--global-size-unit-24) var(--component-dashboard-gutter) var(--global-size-unit-48);
	display: flex;
	flex-direction: column;
	gap: var(--global-size-unit-24);
}

@media (width >= 48rem) {
	.dashboard {
		--component-dashboard-gutter: var(--global-size-unit-32);
	}
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--global-size-unit-16);
}

.toolbar h1 {
	font-size: var(--global-font-size-30);
}

.toolbar h1 small {
	display: block;
	font-size: var(--global-font-size-14);
	font-weight: var(--global-font-weight-regular);
	color: var(--theme-text-muted);
}

.kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--global-size-unit-16);
}

.kpis .card {
	gap: var(--global-size-unit-8);
}

.kpis .card.accent {
	background: linear-gradient(135deg, var(--theme-surface-inverse), var(--theme-surface-inverse-raised));
	border-color: transparent;
	color: var(--theme-text-inverse);
}

.kpis .card.accent .label,
.kpis .card.accent .delta {
	color: var(--theme-text-inverse-muted);
}

.bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--global-size-unit-16);
}

.bento > .card {
	grid-column: span 12;
}

@media (width >= 48rem) {
	.bento > .card {
		grid-column: span 6;
	}

	.bento > .card.wide {
		grid-column: span 12;
	}
}

@media (width >= 80rem) {
	.bento > .card {
		grid-column: span 4;
	}

	.bento > .card.wide {
		grid-column: span 8;
	}

	.bento > .card.half {
		grid-column: span 6;
	}
}

.bento .card::after {
	content: '';
	position: absolute;
	inset-inline: var(--global-size-unit-24);
	inset-block-start: -1px;
	block-size: var(--global-size-unit-2);
	border-radius: var(--global-radius-full);
	background: linear-gradient(90deg, transparent, var(--theme-action), transparent);
	opacity: 0;
	transition: opacity var(--global-motion-duration-normal) var(--global-motion-easing-out);
}

.bento .card:hover::after {
	opacity: 1;
}

.avg-time {
	display: flex;
	align-items: baseline;
	gap: var(--global-size-unit-12);
}

.avg-time .hero-figure {
	font-size: var(--global-font-size-40);
}

.avg-time span {
	font-size: var(--global-font-size-14);
	color: var(--theme-text-muted);
}

.eherkenning {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--global-size-unit-16);
}

.eherkenning .chart.meter {
	--component-chart-height: 10rem;
}

.eherkenning .chart.reasons {
	--component-chart-height: 8rem;
}

.eherkenning .counts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--global-size-unit-8);
	text-align: center;
}

.eherkenning .counts .stat {
	--component-stat-value-size: var(--global-font-size-18);
	align-items: center;
}

.live-panel {
	gap: var(--global-size-unit-16);
}

.live-body {
	display: grid;
	gap: var(--global-size-unit-24);
}

@media (width >= 64rem) {
	.live-body {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: center;
	}
}

.live-charts {
	display: grid;
	gap: var(--global-size-unit-12);
}

.live-charts figure {
	margin: 0;
}

.live-charts figcaption {
	font-size: var(--global-font-size-12);
	color: var(--theme-text-muted);
}

/* No live numbers yet (the queue gauges have no source, or the stream failed before its first snapshot):
   say so instead of a panel of zeros. */
.live-unavailable {
	margin: 0;
	color: var(--theme-text-muted);
}

.live-unavailable[hidden],
.live-panel[data-live-state='unavailable'] :is(.live-body, header p) {
	display: none;
}