/* 21x AI-crawlcheck. Alles valt onder .x21c, zodat het thema niet wordt beïnvloed.
   Lettertypen komen van het thema; kleuren zijn aan te passen via de variabelen. */

.x21c {
	--x21c-ink: #0a0a0a;
	--x21c-dark: #0a0a0a;
	--x21c-on-dark: #f7f6f2;
	--x21c-on-dark-muted: rgba(247, 246, 242, .62);
	--x21c-card: #ffffff;
	--x21c-line: #eae7e0;
	--x21c-muted: #6a6a66;
	--x21c-accent: #c2402f;
	--x21c-ok: #33603e;
	--x21c-ok-bg: #e3ece0;
	--x21c-warn: #815310;
	--x21c-warn-bg: #f5e8cf;
	--x21c-bad: #b3392a;
	--x21c-bad-bg: #f6ded7;
	--x21c-info: #3f5163;
	--x21c-info-bg: #e5eaef;
	--x21c-radius: 12px;
	--x21c-mono: var(--mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	--x21c-heading: var(--kop, "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif);

	color: var(--x21c-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.55;
	max-width: 100%;
}

.x21c *,
.x21c *::before,
.x21c *::after {
	box-sizing: border-box;
}

/* Formulier -------------------------------------------------------------- */

.x21c-form {
	background: var(--x21c-card);
	border: 1px solid rgba(10, 10, 10, .12);
	border-radius: var(--x21c-radius);
	padding: 26px 28px 22px;
	box-shadow: 0 1px 0 rgba(10, 10, 10, .03), 0 22px 44px -32px rgba(10, 10, 10, .35);
}

.x21c-label {
	display: block;
	font-family: var(--x21c-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--x21c-muted);
	margin: 0 0 12px;
}

.x21c-row {
	display: flex;
	gap: 10px;
}

.x21c-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 54px;
	padding: 0 16px;
	font-family: var(--x21c-heading);
	font-size: 18px;
	color: var(--x21c-ink);
	background: #fff;
	border: 1px solid rgba(10, 10, 10, .18);
	border-radius: 12px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.x21c-input:focus {
	border-color: var(--x21c-ink);
	box-shadow: 0 0 0 3px rgba(194, 64, 47, .18);
}

.x21c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 54px;
	padding: 0 24px;
	font-family: var(--x21c-heading);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1;
	color: var(--x21c-on-dark);
	background: var(--x21c-ink);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .12s ease, background-color .15s ease;
}

.x21c-button:hover { background: #2b2b29; color: var(--x21c-on-dark); }
.x21c-button:active { transform: translateY(1px); }
.x21c-button[disabled] { opacity: .75; cursor: progress; }

.x21c-button--light {
	color: var(--x21c-ink);
	background: var(--x21c-on-dark);
}
.x21c-button--light:hover { background: #fff; }

.x21c :focus-visible {
	outline: 3px solid var(--x21c-accent);
	outline-offset: 2px;
}

.x21c-hint {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--x21c-muted);
}

.x21c-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status tijdens het testen ---------------------------------------------- */

.x21c-status {
	min-height: 24px;
	margin: 14px 2px 0;
	font-family: var(--x21c-mono);
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--x21c-muted);
}

.x21c.is-busy .x21c-status::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--x21c-accent);
	vertical-align: 1px;
	animation: x21c-pulse 1s ease-in-out infinite;
}

@keyframes x21c-pulse {
	0%, 100% { opacity: .35; transform: scale(.85); }
	50% { opacity: 1; transform: scale(1); }
}

/* Resultaten ------------------------------------------------------------- */

.x21c-results {
	display: none;
	margin-top: 18px;
	outline: none;
	scroll-margin-top: 110px;
}

.x21c-results:focus,
.x21c-results:focus-visible { outline: none; }

.x21c-results.is-visible {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	animation: x21c-in .35s ease-out both;
}

@keyframes x21c-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.x21c-summary {
	background: var(--x21c-dark);
	color: var(--x21c-on-dark);
	border: 1px solid rgba(247, 246, 242, .12);
	border-radius: var(--x21c-radius);
	padding: 30px 32px;
}

.x21c-summary-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}

.x21c-site {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.x21c-eyebrow {
	font-family: var(--x21c-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--x21c-on-dark-muted);
}

.x21c-site-url {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.x21c-verdict-pill {
	flex: 0 0 auto;
	font-family: var(--x21c-heading);
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(243, 240, 232, .12);
	color: var(--x21c-on-dark);
	border: 1px solid rgba(243, 240, 232, .22);
}

.x21c-v-good .x21c-verdict-pill { background: #3f6b4a; border-color: #3f6b4a; }
.x21c-v-attention .x21c-verdict-pill { background: #8a5a12; border-color: #8a5a12; }
.x21c-v-problem .x21c-verdict-pill { background: #c2402f; border-color: #c2402f; }

.x21c-headline {
	margin: 0;
	font-family: var(--x21c-heading);
	font-size: clamp(22px, 3.2vw, 30px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--x21c-on-dark);
	text-wrap: balance;
}

.x21c-big {
	font-size: 1.9em;
	letter-spacing: -.03em;
	line-height: 1;
	margin-right: .08em;
	font-variant-numeric: tabular-nums;
}

.x21c-verdict {
	margin: 12px 0 0;
	color: var(--x21c-on-dark-muted);
	max-width: 62ch;
}

.x21c-meters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(243, 240, 232, .14);
}

.x21c-meter { display: grid; gap: 7px; align-content: start; }

.x21c-meter-head {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
}

.x21c-meter-value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.x21c-bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(243, 240, 232, .14);
	overflow: hidden;
}

.x21c-bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #9fc1a2;
}

.x21c-bar-fill.is-partial { background: #e2a58f; }

.x21c-meter-note {
	font-size: 12px;
	color: var(--x21c-on-dark-muted);
}

/* Secties ---------------------------------------------------------------- */

.x21c-section {
	background: var(--x21c-card);
	border: 1px solid var(--x21c-line);
	border-radius: var(--x21c-radius);
	padding: 24px;
}

.x21c-h3 {
	margin: 0 0 16px;
	font-family: var(--x21c-heading);
	font-size: 21px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.015em;
	color: var(--x21c-ink);
}

.x21c-h4 {
	margin: 0;
	font-family: var(--x21c-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--x21c-ink);
}

.x21c-findings {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.x21c-finding {
	margin: 0;
	padding: 14px 16px 14px 18px;
	border-radius: 8px;
	border-left: 3px solid var(--x21c-line);
	background: #fbfaf7;
}

.x21c-finding--problem { border-left-color: var(--x21c-accent); background: #fbf0ed; }
.x21c-finding--warning { border-left-color: #c28a2b; background: #fbf5ea; }
.x21c-finding--good { border-left-color: var(--x21c-ok); background: #f0f5ee; }
.x21c-finding--info { border-left-color: #93a3b3; }

.x21c-finding-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}

.x21c-level {
	font-family: var(--x21c-mono);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--x21c-muted);
}

.x21c-finding--problem .x21c-level { color: var(--x21c-accent); }
.x21c-finding--warning .x21c-level { color: var(--x21c-warn); }
.x21c-finding--good .x21c-level { color: var(--x21c-ok); }

.x21c-finding-title { font-family: var(--x21c-heading); font-size: 16.5px; font-weight: 700; }

.x21c-finding-text,
.x21c-fix {
	margin: 6px 0 0;
	font-size: 15px;
}

.x21c-fix { color: var(--x21c-muted); }
.x21c-fix-label { font-weight: 600; color: var(--x21c-ink); }

/* Bots ------------------------------------------------------------------- */

.x21c-group + .x21c-group { margin-top: 22px; }

.x21c-group-head { margin-bottom: 8px; }

.x21c-group-note {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--x21c-muted);
	max-width: 70ch;
}

.x21c-bots {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--x21c-line);
}

.x21c-bot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--x21c-line);
}

.x21c-bot-who { display: grid; gap: 1px; min-width: 0; }
.x21c-bot-name { font-weight: 600; font-size: 15px; }
.x21c-bot-meta { font-size: 13px; color: var(--x21c-muted); }

.x21c-bot-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}

.x21c-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 4px 9px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.x21c-chip-sub { font-weight: 400; opacity: .8; }
.x21c-chip--ok { background: var(--x21c-ok-bg); color: var(--x21c-ok); }
.x21c-chip--bad { background: var(--x21c-bad-bg); color: var(--x21c-bad); }
.x21c-chip--warn { background: var(--x21c-warn-bg); color: var(--x21c-warn); }
.x21c-chip--muted { background: #efede7; color: var(--x21c-muted); }

/* Technisch -------------------------------------------------------------- */

.x21c-tech {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: 1px solid var(--x21c-line);
}

.x21c-tech-row {
	display: grid;
	grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
	gap: 4px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--x21c-line);
	font-size: 15px;
}

.x21c-tech dt { color: var(--x21c-muted); margin: 0; }
.x21c-tech dd { margin: 0; overflow-wrap: anywhere; }

/* Vervolg ---------------------------------------------------------------- */

.x21c-cta {
	border-radius: var(--x21c-radius);
	padding: 28px 30px;
	background: #efede7;
	border: 1px solid var(--x21c-line);
	border-left: 3px solid var(--x21c-accent);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	justify-items: start;
}

.x21c-cta-title {
	margin: 0;
	font-family: var(--x21c-heading);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--x21c-ink);
}

.x21c-cta-text {
	margin: 0 0 6px;
	max-width: 62ch;
}

.x21c-cta .x21c-button--light {
	background: var(--x21c-ink);
	color: var(--x21c-on-dark);
}

.x21c-foot { display: grid; gap: 10px; padding: 0 2px; }

.x21c-note {
	margin: 0;
	font-size: 13px;
	color: var(--x21c-muted);
	max-width: 80ch;
}

.x21c-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.x21c-link {
	padding: 0;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--x21c-ink);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.x21c-share-status {
	font-size: 13px;
	color: var(--x21c-muted);
	overflow-wrap: anywhere;
}

.x21c-error {
	padding: 18px 20px;
	border-radius: 12px;
	background: #fbf0ed;
	border-left: 3px solid var(--x21c-accent);
}

.x21c-error p { margin: 4px 0 0; }

/* Paginaopmaak ------------------------------------------------------------
   Alleen actief als de pagina-inhoud in een groep met de class x21c-page
   staat. Dan verbergt het de standaardtitel van het Bricks-sjabloon, net als
   de documentatiepagina's met .x21docs, en zet het de pagina in de huisstijl. */

#brx-content:has(.x21c-page) > h1 { display: none; }

.x21c-page {
	--x21c-page-ink: #0a0a0a;
	--x21c-page-text: #2b2b29;
	--x21c-page-muted: #8a877d;
	max-width: 880px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 104px) 20px clamp(64px, 9vw, 120px);
	color: var(--x21c-page-text);
}

.x21c-page .x21c-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--x21c-page-muted);
}

.x21c-page .x21c-kicker::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c2402f;
}

.x21c-page h1:not(.x21c *) {
	margin: 0 0 22px;
	max-width: 15ch;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: clamp(38px, 5.4vw, 60px);
	line-height: 1.04;
	font-weight: 800;
	letter-spacing: -.028em;
	color: var(--x21c-page-ink);
	text-wrap: balance;
}

.x21c-page .x21c-lead {
	margin: 0 0 40px;
	max-width: 58ch;
	font-size: clamp(18px, 1.6vw, 21px);
	line-height: 1.55;
	color: var(--x21c-page-text);
}

.x21c-page .x21c { margin: 0 0 clamp(64px, 8vw, 96px); }

.x21c-page h2:not(.x21c *) {
	margin: 56px 0 14px;
	padding-top: 28px;
	border-top: 1px solid #eae7e0;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -.022em;
	color: var(--x21c-page-ink);
}

.x21c-page h3:not(.x21c *) {
	margin: 32px 0 8px;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--x21c-page-ink);
}

.x21c-page h2:not(.x21c *) + h3 { margin-top: 20px; }

.x21c-page p:not([class*="x21c-"]):not(.x21c *) {
	margin: 0 0 16px;
	max-width: 66ch;
	font-size: 18px;
	line-height: 1.65;
}

.x21c-page p:not(.x21c *) a:not([class*="x21c-"]) {
	color: var(--x21c-page-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.x21c-page p:not(.x21c *) a:not([class*="x21c-"]):hover { color: #c2402f; }

/* Rapport: balk, diagrammen, tabbladen -------------------------------------- */

.x21c-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.x21c-report > *, .x21c-panel > * { min-width: 0; }

.x21c-toolbar {
	position: sticky;
	top: var(--x21c-sticky-top, 12px);
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 10px;
	padding: 8px;
	background: rgba(251, 250, 247, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(10, 10, 10, .12);
	border-radius: var(--x21c-radius);
	box-shadow: 0 10px 28px -22px rgba(10, 10, 10, .45);
}

.x21c-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: #efede7;
	border-radius: 8px;
}

.x21c-tab {
	padding: 8px 14px;
	font-family: var(--x21c-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--x21c-muted);
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.x21c-tab[aria-selected="true"] {
	color: var(--x21c-ink);
	background: #fff;
	box-shadow: 0 1px 2px rgba(10, 10, 10, .14);
}

.x21c-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.x21c-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 12px;
	font-family: var(--x21c-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--x21c-ink);
	background: #fff;
	border: 1px solid rgba(10, 10, 10, .16);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.x21c-action:hover { color: var(--x21c-on-dark); background: var(--x21c-ink); border-color: var(--x21c-ink); }
.x21c-icon { flex: 0 0 auto; }

.x21c-toolbar-status {
	flex-basis: 100%;
	padding: 0 6px 2px;
	font-size: 13px;
	color: var(--x21c-muted);
	overflow-wrap: anywhere;
}
.x21c-toolbar-status:empty { display: none; }

.x21c-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.x21c-panel[hidden] { display: none; }
.x21c-panel:focus { outline: none; }

.x21c-charts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	align-items: start;
}

.x21c-chart {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 18px 18px 14px;
	background: #fff;
	border: 1px solid rgba(10, 10, 10, .12);
	border-radius: var(--x21c-radius);
}

.x21c-chart-title {
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: var(--x21c-heading);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--x21c-ink);
}

.x21c-chart-note { margin: -6px 0 2px; text-align: left; font-size: 13px; color: var(--x21c-muted); }

.x21c-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: var(--x21c-heading);
}

.x21c-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--x21c-muted); }
.x21c-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.x21c-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid #b9b6ac;
}

/* Technisch -------------------------------------------------------------- */

.x21c-techwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.x21c-techwrap > * { min-width: 0; }
.x21c-techsum-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.x21c-techsum-chips .x21c-state { margin-left: 0; padding: 4px 10px; font-size: 13px; }

.x21c-state {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	font-family: var(--x21c-heading);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.6;
	border-radius: 4px;
	white-space: nowrap;
	vertical-align: 1px;
}
.x21c-state--ok { background: var(--x21c-ok-bg); color: var(--x21c-ok); }
.x21c-state--warn { background: var(--x21c-warn-bg); color: var(--x21c-warn); }
.x21c-state--bad { background: var(--x21c-bad-bg); color: var(--x21c-bad); }
.x21c-state--info { background: var(--x21c-info-bg); color: var(--x21c-info); }

.x21c-mono { font-family: var(--x21c-mono); font-size: 13px; overflow-wrap: anywhere; }

.x21c-table-wrap { margin-top: 18px; overflow-x: auto; }
.x21c-table-wrap .x21c-h4 { margin-bottom: 8px; }
.x21c-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.x21c-table th {
	padding: 8px 12px 8px 0;
	font-family: var(--x21c-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--x21c-muted);
	border-bottom: 1px solid var(--x21c-line);
}
.x21c-table td {
	padding: 8px 12px 8px 0;
	vertical-align: top;
	border-bottom: 1px solid var(--x21c-line);
	overflow-wrap: anywhere;
}

.x21c-details { margin-top: 16px; }
.x21c-details summary { cursor: pointer; font-family: var(--x21c-heading); font-weight: 600; }
.x21c-pre {
	max-height: 380px;
	margin: 10px 0 0;
	padding: 14px;
	overflow: auto;
	font-family: var(--x21c-mono);
	font-size: 12.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	color: var(--x21c-on-dark);
	background: var(--x21c-dark);
	border-radius: 8px;
}

.x21c-print-only { display: none; }

.x21c-fold { margin-top: 10px; }
.x21c-fold > summary { font-size: 14.5px; color: var(--x21c-muted); }
.x21c-fold[open] > summary { margin-bottom: 6px; }

/* Chrome-extensie BotPeeky ------------------------------------------------ */

.x21c-ext {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 18px;
	margin-top: 22px;
	padding: 24px;
	background: var(--x21c-card);
	border: 1px solid var(--x21c-line);
	border-radius: var(--x21c-radius);
}
.x21c-ext-icon { display: block; width: 56px; height: 56px; border-radius: 12px; }
.x21c-ext-eyebrow {
	margin: 0 0 4px;
	font-family: var(--x21c-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--x21c-muted);
}
.x21c .x21c-ext-title {
	margin: 0 0 8px;
	font-family: var(--x21c-heading);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--x21c-ink);
}
.x21c-ext-text { margin: 0 0 14px; max-width: 62ch; }
.x21c-ext-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.x21c-ext .x21c-button { height: 46px; }
.x21c-ext-meta { font-size: 13px; color: var(--x21c-muted); }
.x21c-ext-steps { margin-top: 14px; }
.x21c-ext-steps summary { cursor: pointer; font-family: var(--x21c-heading); font-weight: 600; }
.x21c-ext-steps ol { margin: 10px 0 8px; padding-left: 20px; }
.x21c-ext-steps li { margin: 3px 0; }
.x21c-ext-steps p { margin: 0; font-size: 14px; color: var(--x21c-muted); max-width: 62ch; }
.x21c-ext code { font-family: var(--x21c-mono); font-size: 13px; background: #efede7; padding: 1px 5px; border-radius: 4px; }

/* Geen promptbalk van de 21x-assistent op de crawlcheck-pagina. De meting,
   die de knop onder de uitslag opent, blijft gewoon werken. */
body:has(.x21c-page) .x21-balk { display: none !important; }

/* Diagrammen naar de breedte van het rapport, niet van het scherm. Op 21x.nl is
   de inhoudskolom smaller dan 1000px: dan twee kolommen, met de botlijst rechts. */
.x21c-report { container: x21c-report / inline-size; }

@container x21c-report (max-width: 1000px) {
	.x21c-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.x21c-chart--matrix { grid-column: 2; grid-row: 1 / span 2; }
}

@container x21c-report (max-width: 620px) {
	.x21c-charts { grid-template-columns: minmax(0, 1fr); }
	.x21c-chart--matrix { grid-column: auto; grid-row: auto; }
}

/* Mobiel ----------------------------------------------------------------- */

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.x21c-charts { grid-template-columns: minmax(0, 1fr); }
	}
}

@media (max-width: 640px) {
	.x21c-form,
	.x21c-section,
	.x21c-summary,
	.x21c-cta { padding: 18px; }

	.x21c-row { flex-direction: column; }
	.x21c-button { width: 100%; }

	.x21c-summary-top { flex-direction: column; gap: 10px; }
	.x21c-meters { grid-template-columns: 1fr; gap: 14px; }

	.x21c-bot { grid-template-columns: minmax(0, 1fr); }
	.x21c-bot-chips { justify-content: flex-start; }
	.x21c-chip { white-space: normal; }

	.x21c-tech-row { grid-template-columns: minmax(0, 1fr); }
	.x21c-ext { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 12px; }
	.x21c-ext .x21c-button { width: 100%; }
	.x21c-cta { justify-items: stretch; }
	.x21c-cta .x21c-button { white-space: normal; text-align: center; }

	.x21c-toolbar { padding: 6px; }
	.x21c-tabs { width: 100%; }
	.x21c-tab { flex: 1 1 0; }
	.x21c-actions { width: 100%; justify-content: space-between; }
	.x21c-action { flex: 1 1 0; justify-content: center; padding: 0 8px; }
	.x21c-action-label { display: none; }

	/* balance breekt 'AI-bots' op smalle schermen af bij het koppelteken */
	.x21c-page h1:not(.x21c *) { text-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.x21c *,
	.x21c *::before,
	.x21c *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Afdrukken en PDF --------------------------------------------------------- */

@media print {
	@page { margin: 14mm 12mm; }

	/* Alles buiten het rapport weg: site-header, footer, assistent, overlays. */
	body:has(.x21c-report) > *:not(:has(.x21c-report)),
	body:has(.x21c-report) :is(header, footer, nav, aside):not(.x21c *):not(:has(.x21c-report)) { display: none !important; }
	body:has(.x21c-report) { background: #fff !important; }
	.x21c-page { padding: 0 !important; max-width: none !important; }
	.x21c-page :is(p, h1, h2, h3, ul, ol, figure, hr):not(.x21c *) { display: none !important; }
	.x21c-form,
	.x21c-status,
	.x21c-toolbar,
	.x21c-cta,
	.x21c-ext,
	.x21c-hp { display: none !important; }

	.x21c-print-only { display: block !important; }
	.x21c-print-head {
		display: grid !important;
		gap: 2px;
		padding-bottom: 10px;
		margin-bottom: 4px;
		border-bottom: 2px solid #0a0a0a;
		font-size: 12px;
	}
	.x21c-print-head strong { font-family: var(--x21c-heading); font-size: 18px; }

	.x21c-panel[hidden] { display: grid !important; }
	.x21c-panel--tech { break-before: page; }
	.x21c-summary,
	.x21c-state,
	.x21c-chip,
	.x21c-finding,
	.x21c-pre {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.x21c-pre { max-height: none; overflow: visible; }
	.x21c-chart,
	.x21c-summary,
	.x21c-finding,
	.x21c-bot,
	.x21c-tech-row,
	.x21c-table tr { break-inside: avoid; }
	.x21c-section :is(h3, h4, .x21c-h3, .x21c-h4) { break-after: avoid; }
	.x21c-form,
	.x21c-section,
	.x21c-chart { box-shadow: none; }
	.x21c-results.is-visible { animation: none; }
}