.gr-radar {
	--gr-max-width: 852px;
	--gr-content-width: 716px;
	--gr-background: #fdfaf8;
	--gr-text: #080e45;
	--gr-muted: #8f9198;
	--gr-button: #ff7a00;
	--gr-card: #fff;
	--gr-radius: 18px;
	--gr-shadow: 0 5px 18px rgba(8, 14, 69, .09);
	--gr-outer-spacing: 64px;
	--gr-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--gr-focus: #2f8cf4;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--gr-max-width);
	margin: 0 auto;
	color: var(--gr-text);
	background: var(--gr-background);
	font-family: var(--gr-font);
	font-size: 16px;
	line-height: 1.35;
	-webkit-text-size-adjust: 100%;
	contain: layout style;
	position: relative;
	overflow: hidden;
}

.gr-radar *, .gr-radar *::before, .gr-radar *::after { box-sizing: border-box; }
.gr-radar [hidden] { display: none !important; }
.gr-radar button, .gr-radar input { font: inherit; touch-action: manipulation; }
.gr-radar button::before, .gr-radar button::after { content: none !important; }
.gr-radar .screen-reader-text {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important; clip: rect(0,0,0,0) !important;
	white-space: nowrap !important; border: 0 !important;
}
.gr-radar button:focus-visible, .gr-radar input:focus-visible, .gr-radar a:focus-visible {
	outline: 3px solid var(--gr-focus) !important;
	outline-offset: 3px;
}

.gr-radar__loading {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	background: var(--gr-background);
}

.gr-radar__loading-logo {
	display: block;
	width: 240px;
	height: auto;
	max-width: 60% !important;
	aspect-ratio: 1204 / 945;
	object-fit: contain;
}

.gr-radar__app {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.gr-radar.is-ready .gr-radar__loading {
	visibility: hidden;
	opacity: 0;
}

.gr-radar.is-ready .gr-radar__app {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 180ms ease-out;
}

.gr-radar__inner {
	width: min(calc(100% - 32px), var(--gr-content-width));
	margin: 0 auto;
	padding: 0 0 var(--gr-outer-spacing);
	text-align: center;
}

.gr-radar__logo-slot {
	height: 255px;
	display: grid;
	place-items: center;
}

.gr-radar[data-gr-mode="input"] .gr-radar__logo-slot { margin-bottom: 28px; }
.gr-radar[data-gr-mode="result"] .gr-radar__logo-slot { margin-bottom: 28px; }

.gr-radar__logo {
	width: 300px;
	height: auto;
	max-width: 75% !important;
	aspect-ratio: 1204 / 945;
	object-fit: contain;
	transform: scale(.8);
	transform-origin: center;
}

.gr-radar__title {
	width: min(100%, 560px);
	min-height: 125px;
	margin: 0 auto !important;
	padding: 4px 0 0 !important;
	color: var(--gr-text) !important;
	font-family: var(--gr-font) !important;
	font-size: clamp(34px, 7vw, 52px) !important;
	font-weight: 700 !important;
	line-height: 1.28 !important;
	letter-spacing: -.02em;
	text-align: center;
}

.gr-radar[data-gr-mode="input"] .gr-radar__title {
	min-height: 0;
	text-wrap: balance;
}

.gr-radar[data-gr-mode="result"] .gr-radar__title {
	min-height: 0;
	text-wrap: balance;
}

.gr-radar__input-instruction-slot {
	position: relative;
	width: 100%;
	display: grid;
	place-items: start center;
	margin: 14px auto 16px;
}

.gr-radar__input-instruction {
	width: min(100%, 440px);
	margin: 0 !important;
	color: var(--gr-text) !important;
	font-family: var(--gr-font) !important;
	font-size: clamp(18px, 3.2vw, 24px) !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	text-align: center;
}

.gr-radar[data-gr-mode="result"] .gr-radar__input-instruction[hidden] {
	display: block !important;
	visibility: hidden;
}

.gr-radar[data-gr-mode="result"] .gr-radar__input-instruction,
.gr-radar[data-gr-mode="result"] .gr-radar__status-text {
	grid-area: 1 / 1;
}

.gr-radar[data-gr-mode="result"] .gr-radar__status-text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(100%, 440px);
	height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 8px 22px;
	border-radius: 18px;
	background: #FCE9D7;
	color: #1672B8 !important;
	font-family: var(--gr-font) !important;
	font-size: clamp(17px, 2.8vw, 21px) !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	text-align: center;
	text-wrap: balance;
	transform: translate(-50%, -50%);
	overflow-wrap: anywhere;
}

.gr-radar__main-content {
	position: relative;
	width: 100%;
}

.gr-radar__map-slot {
	position: relative;
	height: 440px;
	display: grid;
	place-items: start center;
}

.gr-radar__map {
	width: min(100%, 483px);
	height: auto;
	max-width: none !important;
	aspect-ratio: 483 / 439;
	object-fit: contain;
}

/* Alleen het openingsscherm: de kleine kaart neemt uitsluitend haar eigen hoogte in. */
.gr-radar[data-gr-mode="input"] .gr-radar__title,
.gr-radar[data-gr-mode="input"] .gr-radar__input-instruction-slot {
	position: relative;
	z-index: 2;
}

.gr-radar[data-gr-mode="input"] .gr-radar__map-slot {
	height: auto;
	min-height: 0;
}

.gr-radar[data-gr-mode="input"] .gr-radar__map {
	position: static;
	z-index: 1;
	width: 125px;
	max-width: 28vw !important;
	height: auto;
	transform: none;
	object-fit: contain;
	pointer-events: none;
}

.gr-radar[data-gr-mode="input"] .gr-radar__national-score {
	display: none;
}

.gr-radar[data-gr-mode="result"] .gr-radar__map-slot {
	position: static;
	height: min(25.45135vw, 113.613px);
	min-height: 0;
}

.gr-radar[data-gr-mode="result"] .gr-radar__map {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(100%, 483px);
	max-width: none !important;
	transform: translate(-50%, -50%);
}

.gr-radar[data-gr-mode="result"] .gr-radar__national-score,
.gr-radar[data-gr-mode="result"] .gr-radar__skeleton {
	top: 50%;
}

.gr-radar__national-score {
	position: absolute;
	top: 47%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	min-width: 4ch;
	color: var(--gr-button);
	font-size: clamp(112px, 26vw, 180px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.07em;
	white-space: nowrap;
}

.gr-radar__skeleton {
	position: absolute;
	top: 47%; left: 50%;
	width: 190px; height: 128px;
	transform: translate(-50%, -50%);
	border-radius: 18px;
	background: linear-gradient(90deg, rgba(8,14,69,.04), rgba(8,14,69,.1), rgba(8,14,69,.04));
	background-size: 200% 100%;
	animation: gr-shimmer 1.4s linear infinite;
}

.gr-radar__status-slot {
	display: grid;
	place-items: start center;
	height: 160px;
	padding-top: 18px;
}

.gr-radar[data-gr-mode="input"] .gr-radar__status-slot { display: none; }

.gr-radar__status-text {
	width: min(100%, 570px);
	margin: 0 !important;
	color: var(--gr-text) !important;
	font-family: var(--gr-font) !important;
	font-size: clamp(26px, 5.3vw, 36px) !important;
	font-weight: 700 !important;
	line-height: 1.28 !important;
	text-align: center;
}

.gr-radar__action-slot {
	position: relative;
	height: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 12px;
}

.gr-radar[data-gr-mode="input"] .gr-radar__action-slot { height: auto; }
.gr-radar[data-gr-mode="result"] .gr-radar__action-slot { height: auto; }
.gr-radar[data-gr-mode="input"] .gr-radar__stats { margin: 28px 0 0; }
.gr-radar[data-gr-mode="result"] .gr-radar__stats { margin: 28px 0 0; }
.gr-radar[data-gr-mode="input"] .gr-radar__feedback { margin: 10px 0; }
.gr-radar[data-gr-mode="result"] .gr-radar__feedback { margin: 10px 0; }

.gr-radar__form {
	width: min(100%, 660px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.gr-radar[data-gr-mode="result"] .gr-radar__form[hidden] {
	display: flex !important;
	visibility: hidden;
	pointer-events: none;
}

.gr-radar__score-control {
	position: relative;
	width: min(100%, 380px);
	height: 112px;
	border: 1px solid rgba(8,14,69,.06);
	border-radius: var(--gr-radius);
	background: var(--gr-card);
	box-shadow: var(--gr-shadow);
}

.gr-radar__score-input {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 58px 0 20px !important;
	border: 0 !important;
	border-radius: var(--gr-radius) !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 58px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center;
	appearance: none;
}

.gr-radar__steppers {
	position: absolute;
	top: 8px; right: 12px; bottom: 8px;
	width: 38px;
	display: grid;
	grid-template-rows: 1fr 1fr;
}

.gr-radar__steppers button {
	min-width: 38px !important;
	min-height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #9da0a8 !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

.gr-radar__submit {
	width: 190px !important;
	min-width: 190px !important;
	height: 62px !important;
	margin: 20px auto 0 !important;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 18px 18px 0 0 !important;
	background: var(--gr-button) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-size: 29px !important;
	font-weight: 500 !important;
	line-height: 62px !important;
	text-decoration: none !important;
	cursor: pointer;
}

.gr-radar__submit:disabled { cursor: wait; opacity: .65; }

.gr-radar__score-legend {
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 4px 9px;
	margin: 16px auto 0;
	padding: 0 4px;
	color: var(--gr-text);
	font-family: var(--gr-font);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
}

.gr-radar__score-legend span {
	display: inline-block;
	white-space: nowrap;
	font-weight: 400;
}

.gr-radar__stats {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 38px;
	margin: auto 0;
}

.gr-radar__stat-card {
	min-height: 200px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	gap: 5px 14px;
	padding: 26px 20px;
	border-radius: var(--gr-radius);
	background: var(--gr-card);
	box-shadow: var(--gr-shadow);
}

.gr-radar__stat-label { width: 100%; color: var(--gr-text); font-size: 25px; font-weight: 700; }
.gr-radar__yesterday { width: 100%; font-size: 64px; line-height: 1.1; }
.gr-radar__people { width: 46px; height: 36px; flex: 0 0 auto; color: #aaa; fill: currentColor; }
.gr-radar__participants { color: var(--gr-text); font-size: 54px; line-height: 1.1; }

.gr-radar__feedback {
	min-height: 32px;
	margin: -18px 0 10px;
	color: var(--gr-text);
	font-size: 16px;
	font-weight: 600;
}

.gr-radar__retry {
	margin: 0 0 18px !important;
	padding: 9px 16px !important;
	border: 2px solid var(--gr-text) !important;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--gr-text) !important;
}

.gr-radar__ad {
	position: relative;
	min-height: 250px;
	display: block;
	margin: 0;
	padding: 30px 28px;
	border-radius: var(--gr-radius);
	background: var(--gr-card);
	box-shadow: var(--gr-shadow);
	color: var(--gr-text);
	text-align: left;
}

.gr-radar__ad-label { display: block; margin-bottom: 10px; color: #a7a9af; font-size: 18px; }
.gr-radar__ad-menu { position: absolute; top: 20px; right: 26px; color: #888b91; font-size: 42px; line-height: 1; }
.gr-radar__ad-title { display: block; margin-bottom: 16px; color: var(--gr-text); font-size: 34px; line-height: 1.1; }
.gr-radar__ad p { margin: 0 0 24px !important; color: var(--gr-text) !important; font-size: 22px !important; font-weight: 600; line-height: 1.35 !important; }
.gr-radar__ad a, .gr-radar__ad-link { color: #2eae35 !important; font-size: 21px; font-weight: 500; text-decoration: none; }
.gr-radar__noscript { padding: 16px; border: 2px solid #b32d2e; color: #b32d2e; }

@keyframes gr-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (max-width: 620px) {
	.gr-radar__inner { width: min(calc(100% - 28px), var(--gr-content-width)); }
	.gr-radar__logo-slot { height: 235px; }
	.gr-radar__logo { width: 285px; }
	.gr-radar__title { min-height: 112px; font-size: clamp(31px, 10vw, 43px) !important; }
	.gr-radar[data-gr-mode="input"] .gr-radar__title { min-height: 0; }
	.gr-radar[data-gr-mode="result"] .gr-radar__title { min-height: 0; }
	.gr-radar__input-instruction-slot { margin: 12px auto 14px; }
	.gr-radar__input-instruction { font-size: clamp(18px, 4.5vw, 21px) !important; }
	.gr-radar__map-slot { height: min(108vw, 410px); }
	.gr-radar__national-score { font-size: clamp(100px, 31vw, 150px); }
	.gr-radar__status-slot { height: 170px; padding-top: 20px; }
	.gr-radar__status-text { font-size: clamp(24px, 7.4vw, 32px) !important; }
	.gr-radar__action-slot { height: 250px; padding-top: 8px; }
	.gr-radar[data-gr-mode="input"] .gr-radar__action-slot { height: auto; }
	.gr-radar[data-gr-mode="result"] .gr-radar__action-slot { height: auto; }
	.gr-radar[data-gr-mode="input"] .gr-radar__stats { margin-top: 22px; }
	.gr-radar[data-gr-mode="result"] .gr-radar__stats { margin-top: 22px; }
	.gr-radar__form { width: 100%; }
	.gr-radar__score-control { width: min(72%, 380px); }
	.gr-radar__submit {
		width: 150px !important;
		min-width: 150px !important;
		padding: 0 15px !important;
		font-size: 25px !important;
	}
	.gr-radar__score-control { height: 100px; }
	.gr-radar__score-input { font-size: 50px !important; }
	.gr-radar__stats { gap: 16px; }
	.gr-radar__stat-card { min-height: 175px; padding: 20px 10px; }
	.gr-radar__stat-label { font-size: 20px; }
	.gr-radar__yesterday { font-size: 54px; }
	.gr-radar__participants { font-size: 41px; }
	.gr-radar__ad { min-height: 225px; padding: 26px 24px; }
	.gr-radar__ad-title { font-size: 30px; }
	.gr-radar__ad p { font-size: 19px !important; }
}

@media (max-width: 480px) {
	.gr-radar__status-slot { height: 150px; padding-top: 16px; }
	.gr-radar__status-text { font-size: 20px !important; line-height: 1.3 !important; }
	.gr-radar__action-slot { height: 170px; padding-top: 0; }
	.gr-radar[data-gr-mode="input"] .gr-radar__action-slot { height: auto; }
	.gr-radar[data-gr-mode="result"] .gr-radar__action-slot { height: auto; }
	.gr-radar[data-gr-mode="input"] .gr-radar__stats { margin-top: 18px; }
	.gr-radar[data-gr-mode="result"] .gr-radar__stats { margin-top: 18px; }
	.gr-radar[data-gr-mode="result"] .gr-radar__status-text { font-size: clamp(17px, 4.5vw, 21px) !important; line-height: 1.35 !important; }
	.gr-radar__form {
		width: 100%;
	}
	.gr-radar__submit {
		width: min(41.86%, 150px) !important;
		min-width: 0 !important;
		height: 52px !important;
		padding: 0 8px !important;
		font-size: 18px !important;
		line-height: 52px !important;
		border-radius: 12px !important;
	}
	.gr-radar__score-control { width: min(58%, 220px); height: 76px; }
	.gr-radar__score-input { padding: 0 38px 0 8px !important; font-size: 38px !important; }
	.gr-radar__steppers { top: 4px; right: 4px; bottom: 4px; width: 30px; }
	.gr-radar__steppers button { min-width: 30px !important; min-height: 30px !important; font-size: 21px !important; }
	.gr-radar__stats { gap: 10px; }
	.gr-radar__stat-card { min-height: 112px; padding: 12px 6px; }
	.gr-radar__stat-label { font-size: 15px; }
	.gr-radar__yesterday { font-size: 36px; }
	.gr-radar__people { width: 32px; height: 25px; }
	.gr-radar__participants { font-size: 28px; }
	.gr-radar__feedback { min-height: 24px; margin: -8px 0 8px; font-size: 14px; }
	.gr-radar[data-gr-mode="input"] .gr-radar__feedback { margin: 8px 0; }
	.gr-radar[data-gr-mode="result"] .gr-radar__feedback { margin: 8px 0; }
	.gr-radar__score-legend { max-width: 360px; font-size: 11.5px; line-height: 1.4; }
	.gr-radar__ad { min-height: 150px; padding: 18px; }
	.gr-radar__ad-label { margin-bottom: 6px; font-size: 14px; }
	.gr-radar__ad-menu { top: 12px; right: 14px; font-size: 28px; }
	.gr-radar__ad-title { margin-bottom: 8px; font-size: 24px; }
	.gr-radar__ad p { margin-bottom: 14px !important; font-size: 16px !important; }
	.gr-radar__ad a, .gr-radar__ad-link { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.gr-radar *, .gr-radar *::before, .gr-radar *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
