/**
 * 3D-eVo Core - base styles of the blocks. The theme adds the full design;
 * these rules keep the blocks usable in any theme.
 *
 * (c) 3D-eVo - 3d-evo.nl. GPL-2.0-or-later.
 */

.tde-company p,
.tde-company address {
	margin: 0 0 0.6em;
	font-style: normal;
}

.tde-company__legal {
	font-size: 0.875em;
	opacity: 0.85;
}

.tde-company__form span {
	font-size: 0.875em;
	opacity: 0.85;
}

/* The obscured e-mail address: a button that looks like a link until it is pressed. */
.tde-mail__show {
	display: inline;
	padding: 0;
	border: 0;
	color: inherit;
	background: none;
	font: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

.tde-mail__show:hover {
	text-decoration-style: solid;
}

.tde-mail__show:focus-visible,
.tde-mail__link:focus-visible {
	outline: 3px solid currentcolor;
	outline-offset: 2px;
}

.tde-mail__show[hidden],
.tde-mail__nojs[hidden] {
	display: none;
}

.tde-company__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.1em;
	margin: 0 0 0.6em;
	padding: 0;
	list-style: none;
}

/* Opening status */
.tde-open {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5em;
	margin: 0;
}

/* Centred on the first line, also when the text wraps. */
.tde-open__dot {
	width: 0.65em;
	height: 0.65em;
	margin-top: 0.42em;
	margin-top: calc((1lh - 0.65em) / 2);
	border-radius: 50%;
	background: var(--wp--preset--color--muted, #4b5a75);
	flex: none;
}

.tde-open.is-open .tde-open__dot {
	background: #1f9d55;
	box-shadow: 0 0 0 0.25em rgb(31 157 85 / 0.18);
}

.tde-open.is-closed .tde-open__dot {
	background: var(--wp--preset--color--red, #e72823);
}

/* Contact wizard */
.tde-contact {
	display: grid;
	gap: 1.25rem;
}

.tde-contact fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.tde-contact__legend {
	font-weight: 700;
	font-size: 1.25em;
	margin-bottom: 0.75rem;
	padding: 0;
}

.tde-contact__choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 0.75rem;
}

.tde-choice {
	position: relative;
	display: grid;
	gap: 0.2rem;
	padding: 0.9rem 1rem 0.9rem 2.6rem;
	border: 2px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 14px;
	background: var(--wp--preset--color--paper, #fff);
	cursor: pointer;
}

.tde-choice input {
	position: absolute;
	left: 1rem;
	top: 1.1rem;
	margin: 0;
	accent-color: var(--wp--preset--color--red, #e72823);
}

.tde-choice:has(input:checked) {
	border-color: var(--wp--preset--color--navy, #023f8d);
	box-shadow: 0 0 0 3px rgb(2 63 141 / 0.12);
}

.tde-choice:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 2px;
}

.tde-choice__label {
	font-weight: 700;
}

.tde-choice__hint {
	font-size: 0.875em;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-contact__group {
	margin-bottom: 1rem !important;
}

.tde-contact__group legend {
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.tde-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.45rem 0.9rem;
	border: 2px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 999px;
	cursor: pointer;
}

.tde-pill:has(input:checked) {
	border-color: var(--wp--preset--color--navy, #023f8d);
}

.tde-pill input {
	margin: 0;
	accent-color: var(--wp--preset--color--red, #e72823);
}

.tde-field {
	display: grid;
	gap: 0.35rem;
	margin: 0 0 1rem;
}

.tde-field label {
	font-weight: 600;
}

.tde-field input,
.tde-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 2px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 10px;
	font: inherit;
	background: var(--wp--preset--color--surface, #fff);
	color: inherit;
}

.tde-field input:focus-visible,
.tde-field textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 1px;
}

.tde-field.is-invalid input,
.tde-field.is-invalid textarea,
.tde-contact__choices.is-invalid .tde-choice {
	border-color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-field__error {
	color: var(--wp--preset--color--red-ink, #c21d18);
	font-size: 0.9em;
	font-weight: 600;
}

.tde-contact__choices > .tde-field__error {
	grid-column: 1 / -1;
}

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

.tde-contact__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.tde-contact__back {
	background: none;
	border: 2px solid currentcolor;
	border-radius: 999px;
	padding: 0.6rem 1.2rem;
	font: inherit;
	cursor: pointer;
	color: inherit;
}

.tde-contact__progress {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-contact__privacy,
.tde-contact__status {
	margin: 0;
	font-size: 0.9em;
}

.tde-contact__notice {
	padding: 0.9rem 1rem;
	border-radius: 10px;
	border-left: 4px solid var(--wp--preset--color--red, #e72823);
	background: var(--wp--preset--color--fog, #eef2f8);
}

.tde-contact__notice ul {
	margin: 0.5rem 0 0;
}

.tde-contact--done {
	padding: 1.5rem;
	border-radius: 16px;
	background: var(--wp--preset--color--fog, #eef2f8);
	font-size: 1.1em;
}

.tde-contact--done:focus {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 2px;
}

/* The "turn Evo" puzzle at the end of the contact form (a framed fieldset: the selectors
   outweigh the plain fieldset reset above). */
.tde-contact .tde-puzzle {
	display: grid;
	gap: 0.75rem;
	margin: 0.5rem 0 1rem;
	padding: 1rem 1.1rem 1.1rem;
	border: 2px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 14px;
}

.tde-contact .tde-puzzle.is-invalid {
	border-color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-puzzle__title {
	padding: 0 0.4rem;
	font-weight: 700;
}

.tde-puzzle__stage {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.tde-puzzle__evo {
	flex: none;
	display: grid;
	place-items: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--wp--preset--color--fog, #eef2f8);
	overflow: hidden;
}

.tde-puzzle__evo img {
	display: block;
	width: 120px;
	height: 120px;
}

/* The play line: dashes from Evo to a play mark he should point at. */
.tde-puzzle__line {
	position: relative;
	flex: 1;
	min-width: 4rem;
	max-width: 14rem;
	height: 0;
	border-top: 3px dashed var(--wp--preset--color--muted, #4b5a75);
}

.tde-puzzle__line::after {
	content: "";
	position: absolute;
	right: -4px;
	top: -12px;
	width: 18px;
	height: 21px;
	background: var(--wp--preset--color--red, #e72823);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tde-puzzle__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.tde-puzzle__controls button {
	padding: 0.5rem 1rem;
	border: 2px solid currentcolor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* A text link look: little side padding, so it lines up when it wraps. */
.tde-puzzle__controls .tde-puzzle__other {
	padding-inline: 0.25rem;
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tde-puzzle__controls button:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 2px;
}

.tde-puzzle__state:empty {
	display: none;
}

.tde-puzzle__state,
.tde-puzzle__help,
.tde-puzzle__choice {
	margin: 0;
	font-size: 0.9em;
}

.tde-puzzle__help {
	color: var(--wp--preset--color--muted, #4b5a75);
}

/* The e-mail address and phone number stay whole (no break at "3d-"). */
.tde-puzzle__help a {
	white-space: nowrap;
}

.tde-puzzle__choice {
	display: grid;
	gap: 0.35rem;
}

.tde-puzzle__choice select {
	max-width: 18rem;
	padding: 0.5rem 0.6rem;
	border: 2px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #fff);
	color: inherit;
	font: inherit;
}

@media (prefers-reduced-motion: no-preference) {

	html:not([data-calm="1"]) .tde-puzzle__img {
		transition: transform 0.3s ease;
	}
}

/* Kantoor teaser */
.tde-kantoor {
	display: grid;
	gap: 0.75rem;
}

.tde-kantoor > * {
	margin: 0;
}

.tde-kantoor__eyebrow,
.tde-kantoor__when {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.85em;
	letter-spacing: 0.04em;
}

.tde-kantoor__badge {
	display: inline-block;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	background: var(--wp--preset--color--sticker, #ffc93c);
	color: #0b1530;
	font-weight: 700;
}

/* White on this green is 5.9:1 (the old #1f9d55 was 3.5:1). */
.tde-kantoor.is-live .tde-kantoor__badge {
	background: #157347;
	color: #fff;
}

.tde-kantoor__state {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
}

.tde-kantoor__state > *,
.tde-count__title {
	margin: 0;
}

.tde-kantoor__shop[hidden],
.tde-count[hidden] {
	display: none;
}

/* Launch countdown: split-flap tiles after the one on kantoor-zzp.nl, in our colours. */
.tde-count {
	--tde-count-face: linear-gradient(180deg, #0a4aa0 0%, #023f8d 50%, #03377d 50%, #032b61 100%);
	--tde-count-ink: #fff;
	--tde-count-edge: rgb(255 255 255 / 0.14);
	--tde-count-hinge: rgb(3 18 48 / 0.55);
	--tde-count-shadow: 0 12px 24px -14px rgb(3 43 97 / 0.7);
	display: grid;
	gap: 0.5rem;
}

.tde-count__title,
.tde-count__unit small {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-count__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.5rem, 1.4vw, 0.9rem);
}

.tde-count__unit {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
}

.tde-count__card {
	position: relative;
	display: grid;
	place-items: center;
	min-width: clamp(3.4rem, 7vw, 4.6rem);
	height: clamp(3.8rem, 8vw, 5rem);
	padding: 0 0.45rem;
	border: 1px solid var(--tde-count-edge);
	border-radius: 16px;
	background: var(--tde-count-face);
	box-shadow: var(--tde-count-shadow);
	color: var(--tde-count-ink);
	perspective: 420px;
}

/* The hinge of the split flap. */
.tde-count__card::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: var(--tde-count-hinge);
}

.tde-count__card b {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Seconds: a thin edge in our red, where kantoor-zzp.nl uses its mint glow. */
.tde-count__unit[data-unit="s"] .tde-count__card {
	box-shadow: var(--tde-count-shadow), inset 0 -3px 0 var(--wp--preset--color--red, #e72823);
}

.tde-count--flip .tde-count__card.is-flipping b {
	animation: tde-count-flip 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Only a turn, no fade: the digits keep their full contrast while they flip. */
@keyframes tde-count-flip {

	0% {
		transform: rotateX(80deg);
	}

	70% {
		transform: rotateX(-12deg);
	}

	100% {
		transform: rotateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.tde-count--flip .tde-count__card.is-flipping b {
		animation: none;
	}
}

html[data-calm="1"] .tde-count--flip .tde-count__card.is-flipping b {
	animation: none;
}

:root[data-theme="dark"] .tde-count {
	--tde-count-face: linear-gradient(180deg, #1d2b4d 0%, #16223f 50%, #121c35 50%, #0f182d 100%);
	--tde-count-ink: #edf1f9;
	--tde-count-edge: rgb(237 241 249 / 0.18);
	--tde-count-hinge: rgb(0 0 0 / 0.6);
	--tde-count-shadow: 0 12px 24px -14px rgb(0 0 0 / 0.8);
}

:root[data-theme="blueprint"] .tde-count {
	--tde-count-face: transparent;
	--tde-count-ink: #f4f8ff;
	--tde-count-edge: #cfe0ff;
	--tde-count-hinge: rgb(207 224 255 / 0.55);
	--tde-count-shadow: none;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme]) .tde-count {
		--tde-count-face: linear-gradient(180deg, #1d2b4d 0%, #16223f 50%, #121c35 50%, #0f182d 100%);
		--tde-count-ink: #edf1f9;
		--tde-count-edge: rgb(237 241 249 / 0.18);
		--tde-count-hinge: rgb(0 0 0 / 0.6);
		--tde-count-shadow: 0 12px 24px -14px rgb(0 0 0 / 0.8);
	}
}

/* Smaller tiles in the slim banner (shop). */
.tde-kantoor--banner .tde-count__card {
	min-width: 2.9rem;
	height: 3.1rem;
	border-radius: 11px;
}

.tde-kantoor--banner .tde-count__card b {
	font-size: 1.55rem;
}

.tde-kantoor__features {
	list-style: none;
	padding-left: 0;
}

.tde-kantoor__features li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.3em;
}

.tde-kantoor__features li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.45em;
	width: 0.55em;
	height: 0.64em;
	background: var(--wp--preset--color--red, #e72823);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tde-kantoor__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
}

.tde-kantoor--banner {
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.5rem 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
	background: var(--wp--preset--color--fog, #eef2f8);
}

.tde-kantoor--banner .tde-kantoor__state {
	grid-column: 1;
}

.tde-kantoor--banner .tde-kantoor__cta {
	grid-column: 2;
	grid-row: 1 / span 2;
}

@media (max-width: 640px) {
	.tde-kantoor--banner {
		grid-template-columns: 1fr;
	}

	.tde-kantoor--banner .tde-kantoor__cta {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Example products */
.tde-demo-notice {
	padding: 0.9rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--fog, #eef2f8);
	border-left: 4px solid var(--wp--preset--color--sticker, #ffc93c);
}

/* ======================================================================= Fun (M7) */

/* Toasts (window.tdevoFun.toast) */
.tde-toasts {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 100000;
	display: grid;
	gap: 0.5rem;
	max-width: min(24rem, calc(100vw - 2rem));
}

.tde-toast {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	padding: 0.8rem 2.6rem 0.8rem 1rem;
	border-radius: 14px;
	background: var(--wp--preset--color--ink, #0b1530);
	color: var(--wp--preset--color--paper, #fff);
	box-shadow: 0 10px 30px rgb(11 21 48 / 0.25);
	font-size: 0.95rem;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tde-toast.is-in {
	opacity: 1;
	transform: none;
}

.tde-toast::before {
	content: "";
	flex: none;
	width: 0.8rem;
	height: 0.9rem;
	background: var(--wp--preset--color--red, #e72823);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tde-toast p {
	flex: 1;
	margin: 0;
}

.tde-toast a {
	color: var(--wp--preset--color--sticker, #ffc93c);
	font-weight: 700;
}

.tde-toast__close {
	position: absolute;
	top: 0.3rem;
	right: 0.4rem;
	padding: 0.2rem 0.45rem;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.tde-toast__close:focus-visible {
	outline: 2px solid currentcolor;
	border-radius: 6px;
}

/* Konami confetti: little play triangles */
.tde-confetti {
	position: fixed;
	inset: 0;
	z-index: 100001;
	overflow: hidden;
	pointer-events: none;
}

.tde-confetti__bit {
	position: absolute;
	top: -24px;
	left: var(--x);
	width: 12px;
	height: 14px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	animation: tde-confetti var(--d) var(--delay) ease-in forwards;
}

.tde-confetti__bit--0 {
	background: #e72823;
}

.tde-confetti__bit--1 {
	background: #023f8d;
}

.tde-confetti__bit--2 {
	background: #ffc93c;
}

@keyframes tde-confetti {
	to {
		transform: translateY(110vh) rotate(var(--r));
	}
}

/* Command palette */
.tde-palette-open {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	height: 40px;
	padding: 0 0.75rem;
	border: 1.5px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 999px;
	background: var(--wp--preset--color--surface, #fff);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.tde-palette-open:hover,
.tde-palette-open:focus-visible {
	border-color: var(--wp--preset--color--navy, #023f8d);
}

.tde-palette-open__kbd {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.7rem;
	color: var(--wp--preset--color--muted, #4b5a75);
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.tde-palette-open {
		width: 40px;
		padding: 0;
		justify-content: center;
	}

	.tde-palette-open__kbd {
		display: none;
	}
}

.tde-palette {
	width: min(40rem, calc(100vw - 2rem));
	max-height: min(72vh, 36rem);
	margin: 12vh auto auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 18px;
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--ink, #0b1530);
	box-shadow: 0 24px 60px rgb(11 21 48 / 0.3);
}

.tde-palette::backdrop {
	background: rgb(11 21 48 / 0.45);
}

.tde-palette__box {
	display: flex;
	flex-direction: column;
	max-height: min(72vh, 36rem);
}

.tde-palette__input {
	padding: 1rem 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line, #d9e0ec);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.1rem;
	outline: none;
}

.tde-palette__input:focus-visible {
	/* The red line is the focus mark; the transparent outline only shows in forced-colours mode. */
	outline: 3px solid transparent;
	outline-offset: -3px;
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--red, #e72823);
}

.tde-palette__list {
	flex: 1;
	margin: 0;
	padding: 0.5rem;
	overflow-y: auto;
	list-style: none;
}

.tde-palette__item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0.8rem;
	border-radius: 10px;
	cursor: pointer;
}

.tde-palette__item[aria-selected="true"] {
	background: var(--wp--preset--color--fog, #eef2f8);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--red, #e72823);
}

.tde-palette__item--search {
	color: var(--wp--preset--color--navy, #023f8d);
	font-weight: 600;
}

.tde-palette__group {
	align-self: center;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #4b5a75);
	white-space: nowrap;
}

.tde-palette__empty {
	padding: 0.8rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-palette__foot {
	margin: 0;
	padding: 0.6rem 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line, #d9e0ec);
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-palette kbd {
	padding: 0.05rem 0.35rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 5px;
	background: var(--wp--preset--color--fog, #eef2f8);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.72rem;
}

/* Triangle hunt: hiding places */
.tde-section:has(> .tde-hunt-slot),
.wp-block-group:has(> .tde-hunt-slot) {
	position: relative;
}

.tde-hunt-slot {
	position: absolute;
	z-index: 3;
	width: 40px;
	height: 40px;
	padding: 5px;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: 0.92;
	transform: rotate(-14deg);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.tde-hunt-slot svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tde-hunt-slot--tl {
	top: 1rem;
	left: 1rem;
}

.tde-hunt-slot--tr {
	top: 1rem;
	right: 1rem;
}

.tde-hunt-slot--bl {
	bottom: 1rem;
	left: 1rem;
}

.tde-hunt-slot--br {
	bottom: 1rem;
	right: 1rem;
}

.tde-hunt-slot--inline {
	position: static;
	display: block;
	margin: 1rem 0 0 auto;
}

/* A caught Evo is gone, also from an inline hiding place (display above beats [hidden]). */
.tde-hunt-slot[hidden] {
	display: none;
}

.tde-hunt-slot:hover,
.tde-hunt-slot:focus-visible {
	opacity: 1;
	transform: rotate(0) scale(1.15);
}

.tde-hunt-slot:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 2px;
	border-radius: 8px;
}

.tde-hunt-slot.is-caught {
	animation: tde-hunt-caught 0.6s ease forwards;
}

@keyframes tde-hunt-caught {
	40% {
		transform: translateY(-14px) scale(1.3) rotate(10deg);
	}

	100% {
		opacity: 0;
		transform: translateY(-30px) scale(0.2);
	}
}

/* Triangle hunt: status in the Lab */
.tde-hunt-status {
	display: grid;
	gap: 0.75rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-hunt-status > * {
	margin: 0;
}

.tde-hunt-status__count {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.5rem;
	font-weight: 800;
}

.tde-hunt-status__dots {
	display: flex;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.tde-hunt-status__dots li {
	width: 1.5rem;
	height: 1.7rem;
	background: var(--wp--preset--color--line, #d9e0ec);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: background 0.3s ease;
}

.tde-hunt-status__dots li.is-found {
	background: var(--wp--preset--color--red, #e72823);
}

.tde-hunt-status__title {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-hunt-status__hints {
	display: grid;
	gap: 0.4rem;
	padding: 0;
	list-style: none;
}

.tde-hunt-status__hints li {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

.tde-hunt-status__mark {
	position: relative;
	top: 0.1rem;
	flex: none;
	width: 0.9rem;
	height: 0.9rem;
	border: 2px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 4px;
}

.tde-hunt-status__hints li.is-found .tde-hunt-status__mark {
	border-color: var(--wp--preset--color--red, #e72823);
	background: var(--wp--preset--color--red, #e72823);
}

.tde-hunt-status__hints li.is-found .tde-hunt-status__hint {
	color: var(--wp--preset--color--muted, #4b5a75);
	text-decoration: line-through;
}

.tde-hunt-status__claim[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.tde-hunt-status__result:empty {
	display: none;
}

.tde-hunt-status__result p {
	margin: 0.4rem 0;
}

.tde-hunt-status__code code {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	border: 2px dashed var(--wp--preset--color--red, #e72823);
	border-radius: 8px;
	background: var(--wp--preset--color--fog, #eef2f8);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.tde-hunt-status__copy {
	margin-left: 0.5rem;
	padding: 0.35rem 0.8rem;
	border: 1.5px solid currentcolor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}

.tde-hunt-status__rule,
.tde-hunt-status__off {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

/* Fact of the day */
.tde-fact {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin: 0;
	padding: clamp(1.1rem, 3vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-fact__evo {
	flex: none;
}

.tde-fact__label {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-fact__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-weight: 500;
}

.tde-fact__text p {
	margin: 0;
}

.tde-fact__note {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-fact--compact .tde-fact__text {
	font-size: 1rem;
}

/* Phish or not? */
.tde-phish,
.tde-phish__list {
	display: grid;
	gap: 1rem;
}

@media (min-width: 900px) {
	.tde-phish__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tde-phish__msg[hidden] {
	display: none;
}

.tde-phish__msg {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.1rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-phish__msg > * {
	margin: 0;
}

.tde-phish__meta {
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-phish__context {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-phish__mail {
	flex: 1;
	padding: 0.85rem 0.95rem;
	border-radius: 10px;
	background: var(--wp--preset--color--fog, #eef2f8);
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

.tde-phish__msg--sms .tde-phish__mail,
.tde-phish__msg--chat .tde-phish__mail {
	border-radius: 18px 18px 18px 4px;
}

.tde-phish__msg--letter .tde-phish__mail {
	border: 1px dashed var(--wp--preset--color--line, #d9e0ec);
	background: var(--wp--preset--color--paper, #fbfaf6);
}

.tde-phish__mail p {
	margin: 0;
}

.tde-phish__from {
	font-size: 0.85rem;
}

.tde-phish__from span {
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-phish__subject {
	margin-top: 0.3rem !important;
	font-weight: 700;
}

.tde-phish__body {
	margin-top: 0.4rem !important;
}

.tde-phish__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tde-phish__btn {
	flex: 1;
	padding: 0.5rem 0.7rem;
	white-space: nowrap;
	border: 2px solid var(--wp--preset--color--ink, #0b1530);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--ink, #0b1530);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
}

.tde-phish__btn[data-answer="phish"] {
	border-color: var(--wp--preset--color--red-ink, #c21d18);
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-phish__btn:hover:not([disabled]),
.tde-phish__btn[aria-pressed="true"] {
	background: var(--wp--preset--color--ink, #0b1530);
	color: var(--wp--preset--color--paper, #fbfaf6);
}

.tde-phish__btn[data-answer="phish"]:hover:not([disabled]),
.tde-phish__btn[data-answer="phish"][aria-pressed="true"] {
	background: var(--wp--preset--color--red-ink, #c21d18);
	color: #fff;
}

.tde-phish__btn[disabled]:not([aria-pressed="true"]) {
	opacity: 0.45;
}

.tde-phish__msg.is-right {
	border-color: #1f9d55;
	box-shadow: inset 0 4px 0 #1f9d55;
}

.tde-phish__msg.is-wrong {
	border-color: var(--wp--preset--color--red, #e72823);
	box-shadow: inset 0 4px 0 var(--wp--preset--color--red, #e72823);
}

.tde-phish__answer summary {
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.tde-phish__feedback {
	margin: 0.4rem 0 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 800;
}

.is-right .tde-phish__feedback {
	color: var(--tde-ok-ink, #1b7a44);
}

.is-wrong .tde-phish__feedback {
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-phish__verdict {
	margin: 0.3rem 0 0;
	font-size: 0.95rem;
}

.tde-phish__result {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.25rem;
	font-weight: 800;
}

.tde-phish__result:empty {
	display: none;
}

.tde-phish__more {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

/* Security check */
.tde-check {
	display: grid;
	gap: 0.9rem;
}

.tde-check__q {
	margin: 0;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 14px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-check__q legend {
	display: flex;
	gap: 0.6rem;
	float: left;
	width: 100%;
	margin-bottom: 0.65rem;
	padding: 0;
	font-weight: 700;
}

.tde-check__nr {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.85rem;
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-check__options {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tde-check__option {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.9rem;
	border: 1.5px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 999px;
	font-size: 0.95rem;
	cursor: pointer;
}

.tde-check__option:has(input:checked) {
	border-color: var(--wp--preset--color--navy, #023f8d);
	background: var(--wp--preset--color--fog, #eef2f8);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--navy, #023f8d);
}

.tde-check__option:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 2px;
}

.tde-check__option input {
	margin: 0;
	accent-color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-check__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0.5rem 0 0;
}

.tde-check__reset {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.tde-check__private {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-check__result {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 2px solid var(--wp--preset--color--navy, #023f8d);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #fff);
	outline: none;
	scroll-margin-top: 6rem;
}

.tde-check__result:empty {
	display: none;
}

.tde-check__card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.tde-check__evo {
	flex: none;
}

.tde-check__score {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-check__title {
	margin: 0.2rem 0 0.4rem;
}

.tde-check__card p:last-child {
	margin: 0;
}

.tde-check__tips-title {
	margin: 1.25rem 0 0.5rem;
}

.tde-check__tips {
	display: grid;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
}

@media (max-width: 600px) {
	.tde-check__card {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Idea machine */
.tde-ideas {
	display: grid;
	gap: 1.1rem;
	padding: clamp(1.4rem, 4vw, 2.25rem);
	border-radius: 16px;
	background: var(--tde-ink-band, #0b1530);
	color: #fff;
}

.tde-ideas__out {
	min-height: 2.4em;
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.3rem, 2.6vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
}

.tde-ideas.is-spinning .tde-ideas__out {
	opacity: 0.6;
}

.tde-ideas__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 0;
}

.tde-ideas .tde-ideas__play {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	background: #fff;
	color: #0b1530;
}

.tde-ideas .tde-ideas__play::before {
	content: "";
	width: 0.7em;
	height: 0.8em;
	background: var(--wp--preset--color--red, #e72823);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tde-ideas__build {
	color: var(--wp--preset--color--sticker, #ffc93c);
	font-weight: 600;
}

/* Stack the layers */
.tde-stack {
	--tde-stack-1: #e72823;
	--tde-stack-2: #023f8d;
	--tde-stack-3: #ffc93c;
	--tde-stack-ground: #0b1530;
	--tde-stack-grid: rgb(2 63 141 / 0.07);
	--tde-stack-head: #0b1530;
	--tde-stack-outline: transparent;
}

:root[data-theme="blueprint"] .tde-stack {
	--tde-stack-1: rgb(255 143 133 / 0.92);
	--tde-stack-2: rgb(207 224 255 / 0.85);
	--tde-stack-3: #ffc93c;
	--tde-stack-ground: #cfe0ff;
	--tde-stack-grid: rgb(207 224 255 / 0.12);
	--tde-stack-head: #f4f8ff;
	--tde-stack-outline: #f4f8ff;
}

:root[data-theme="dark"] .tde-stack {
	--tde-stack-1: rgb(255 120 110 / 0.95);
	--tde-stack-2: rgb(143 179 255 / 0.9);
	--tde-stack-3: #ffc93c;
	--tde-stack-ground: #a9b5cd;
	--tde-stack-grid: rgb(170 188 224 / 0.1);
	--tde-stack-head: #edf1f9;
	--tde-stack-outline: #edf1f9;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .tde-stack {
		--tde-stack-1: rgb(255 120 110 / 0.95);
		--tde-stack-2: rgb(143 179 255 / 0.9);
		--tde-stack-3: #ffc93c;
		--tde-stack-ground: #a9b5cd;
		--tde-stack-grid: rgb(170 188 224 / 0.1);
		--tde-stack-head: #edf1f9;
		--tde-stack-outline: #edf1f9;
	}
}

/* Success green that stays readable on dark and blueprint backgrounds. */
:root:is([data-theme="dark"], [data-theme="blueprint"]) {
	--tde-ok-ink: #6ee09a;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--tde-ok-ink: #6ee09a;
	}
}

.tde-stack__stage {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-stack__canvas {
	display: block;
	width: 100%;
	touch-action: manipulation;
	cursor: pointer;
}

.tde-stack__canvas:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: -3px;
}

.tde-stack__hud {
	position: absolute;
	top: 0.6rem;
	left: 0.9rem;
	right: 0.9rem;
	display: flex;
	justify-content: space-between;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.85rem;
	font-weight: 700;
	pointer-events: none;
}

/* Centred without a transform: the theme's buttons move on hover. */
.tde-stack__start {
	position: absolute;
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
}

.tde-stack__help {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

/* Greeting */
.tde-greeting__hello {
	font-weight: 700;
}

/* Calm mode and reduced motion: no flying, spinning or fading. */
html[data-calm="1"] :is(.tde-toast, .tde-hunt-slot, .tde-hunt-status__dots li) {
	transition: none;
}

html[data-calm="1"] :is(.tde-hunt-slot.is-caught, .tde-confetti__bit) {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	:is(.tde-toast, .tde-hunt-slot, .tde-hunt-status__dots li) {
		transition: none;
	}

	:is(.tde-hunt-slot.is-caught, .tde-confetti__bit) {
		animation: none;
	}
}

/* "New since your last visit" on Evo-log cards */
.wp-block-post.is-new {
	position: relative;
}

.tde-new {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	padding: 0.2em 0.6em;
	border-radius: 6px;
	background: var(--wp--preset--color--sticker, #ffc93c);
	color: #0b1530;
	box-shadow: 2px 2px 0 #0b1530;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transform: rotate(4deg);
}

/* ------------------------------------------------------------------ Veilig werken */

/* Pictograms: line icons in the text colour. */
.tde-icon {
	width: 1.5em;
	height: 1.5em;
	flex: none;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

.tde-icon .f {
	fill: currentcolor;
	stroke: none;
}

/* Phish or not: channel, details, red flags, real story */
.tde-phish__kind {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.tde-phish__kind-icon {
	width: 1.35em;
	height: 1.35em;
}

.tde-phish__details {
	display: grid;
	gap: 0.15rem;
	margin: 0.45rem 0 0;
	font-size: 0.85rem;
}

.tde-phish__details > div {
	display: flex;
	gap: 0.4rem;
}

.tde-phish__details dt {
	flex: none;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-phish__details dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.tde-phish__msg--call .tde-phish__mail,
.tde-phish__msg--video .tde-phish__mail {
	border-left: 4px solid var(--wp--preset--color--navy, #023f8d);
	font-style: italic;
}

.tde-phish__msg--calendar .tde-phish__mail {
	border-top: 6px solid var(--wp--preset--color--navy, #023f8d);
}

.tde-phish__msg--teams .tde-phish__mail {
	border-radius: 4px 18px 18px 18px;
}

.tde-phish__msg--qr .tde-phish__mail {
	border: 2px dashed var(--wp--preset--color--muted, #4b5a75);
	background: var(--wp--preset--color--surface, #fff);
	text-align: center;
}

.tde-phish__flags-title {
	margin: 0.6rem 0 0.2rem !important;
	font-size: 0.85rem;
	font-weight: 700;
}

.tde-phish__flags {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.9rem;
}

.tde-phish__flags li + li {
	margin-top: 0.2rem;
}

.tde-phish__case {
	margin: 0.75rem 0 0 !important;
}

.tde-phish__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-phish__more .wp-element-button {
	font-size: 1rem;
}

/* Link to a real story */
.tde-case-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	font-weight: 700;
}

.tde-case-link__mark {
	flex: none;
	width: 0.6em;
	height: 0.68em;
	background: var(--wp--preset--color--red, #e72823);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The pop-up with the summary */
dialog.tde-case {
	width: min(42rem, calc(100vw - 2rem));
	max-height: min(88vh, 52rem);
	padding: 0;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 18px;
	background: var(--wp--preset--color--surface, #fff);
	color: var(--wp--preset--color--ink, #0b1530);
	box-shadow: 0 30px 80px rgb(0 0 0 / 0.35);
}

dialog.tde-case::backdrop {
	background: rgb(11 21 48 / 0.6);
}

/* Without JavaScript the link jumps here and the summary shows in place. */
dialog.tde-case:target:not([open]) {
	display: block;
	position: relative;
	margin: 2rem auto;
}

.tde-case__inner {
	max-height: inherit;
	box-sizing: border-box;
	overflow: auto;
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

.tde-case__close-form {
	float: right;
	margin: -0.5rem -0.5rem 0 1rem;
}

.tde-case__close {
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.tde-case__close:hover {
	border-color: var(--wp--preset--color--navy, #023f8d);
}

.tde-case__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-case__title {
	margin: 0.4rem 0 0.3rem;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	line-height: 1.15;
}

.tde-case__who {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-case__facts {
	display: grid;
	gap: 0.9rem;
	margin: 0;
}

.tde-case__fact dt {
	font-weight: 800;
	font-family: var(--wp--preset--font-family--display, inherit);
}

.tde-case__fact dd {
	margin: 0.15rem 0 0;
}

.tde-case__fact--cost {
	padding: 0.75rem 0.9rem;
	border-left: 4px solid var(--wp--preset--color--red, #e72823);
	border-radius: 6px;
	background: var(--wp--preset--color--fog, #eef2f8);
}

.tde-case__sources {
	margin-top: 1.4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line, #d9e0ec);
}

.tde-case__sources-title {
	margin: 0 0 0.35rem;
	font-weight: 700;
}

.tde-case__sources ul {
	margin: 0;
	padding-left: 1.1rem;
}

.tde-case__sources li {
	overflow-wrap: anywhere;
}

.tde-case__source {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-case__note {
	margin: 1rem 0 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

/* Cards of real stories */
/* At most three columns: three or six stories fill whole rows. */
.tde-story-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(17rem, (100% - 2rem) / 3)), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-story-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.2rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-story-card > * {
	margin: 0;
}

.tde-story-card__year {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-story-card__title {
	font-size: 1.15rem;
	line-height: 1.25;
}

.tde-story-card__who {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-story-card__cost {
	flex: 1;
	font-size: 0.9rem;
}

.tde-story-card__cost span {
	font-weight: 700;
}

/* Chat story */
.tde-chat {
	max-width: 34rem;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 22px;
	background: var(--wp--preset--color--fog, #eef2f8);
}

.tde-chat__title {
	display: grid;
	gap: 0.1rem;
	margin-bottom: 0.9rem;
	text-align: center;
	font-weight: 700;
	font-size: 0.9rem;
}

.tde-chat__note {
	font-weight: 400;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-chat__log {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-chat__msg {
	max-width: 85%;
	padding: 0.5rem 0.8rem;
	border-radius: 16px 16px 16px 4px;
	background: var(--wp--preset--color--surface, #fff);
	font-size: 0.95rem;
	line-height: 1.4;
}

.tde-chat__msg p {
	margin: 0;
}

.tde-chat__msg--b {
	align-self: flex-end;
	border-radius: 16px 16px 4px 16px;
	background: var(--wp--preset--color--navy, #023f8d);
	color: var(--wp--preset--color--paper, #fff);
}

.tde-chat__who {
	display: block;
	margin-bottom: 0.1rem;
	font-size: 0.72rem;
	font-weight: 700;
	opacity: 0.8;
}

.tde-chat__foot {
	margin: 0.9rem 0 0;
	text-align: center;
}

/* Pictogram comic */
.tde-comic {
	margin: 0;
}

.tde-comic__title {
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.35rem;
	font-weight: 800;
}

.tde-comic__panels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: panel;
}

/* Six panels read as two rows of three instead of five and one. */
.tde-comic__panels:has(> :nth-child(6):last-child) {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(13rem, (100% - 1.8rem) / 3)), 1fr));
}

.tde-comic__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem;
	border: 2px solid var(--wp--preset--color--ink, #0b1530);
	border-radius: 14px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-comic__panel.is-bad {
	border-color: var(--wp--preset--color--red, #e72823);
}

.tde-comic__panel.is-good {
	border-color: #1f9d55;
}

.tde-comic__nr {
	position: absolute;
	top: -0.7rem;
	left: 0.8rem;
	padding: 0 0.45rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ink, #0b1530);
	color: var(--wp--preset--color--paper, #fff);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	font-weight: 700;
}

.tde-comic__time {
	align-self: flex-end;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-comic__art {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 5.5rem;
	border-radius: 10px;
	background: var(--wp--preset--color--fog, #eef2f8);
	color: var(--wp--preset--color--navy, #023f8d);
}

.is-bad .tde-comic__art {
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-comic__icon {
	width: 3rem;
	height: 3rem;
}

.tde-comic__evo svg {
	display: block;
	width: 4.2rem;
	height: auto;
}

.tde-comic__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.4;
}

.tde-comic__moral {
	margin: 1.1rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--sticker, #ffc93c);
	color: #0b1530;
	font-weight: 700;
}

/* Who goes where? */
.tde-net {
	display: grid;
	gap: 1.5rem;
}

.tde-net__zones,
.tde-net__devices {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-net__zones {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.tde-net__devices {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.tde-net__zone {
	padding: 1rem;
	border: 2px dashed var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
}

.tde-net__zone > p {
	margin: 0;
}

.tde-net__zone-icon {
	width: 1.8rem;
	height: 1.8rem;
	color: var(--wp--preset--color--navy, #023f8d);
}

.tde-net__zone-name {
	margin-top: 0.3rem !important;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.1rem;
	font-weight: 800;
}

.tde-net__zone-text {
	font-size: 0.88rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-net__slot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.tde-net__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--wp--preset--color--fog, #eef2f8);
	font-size: 0.8rem;
	font-weight: 600;
}

.tde-net__chip .tde-icon {
	width: 1.1rem;
	height: 1.1rem;
}

.tde-net__chip.is-right {
	box-shadow: inset 0 0 0 2px #1f9d55;
}

.tde-net__chip.is-wrong {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--red, #e72823);
	text-decoration: line-through;
}

.tde-net__device {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 16px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-net__device > * {
	margin: 0;
}

.tde-net__device.is-right {
	box-shadow: inset 0 4px 0 #1f9d55;
}

.tde-net__device.is-wrong {
	box-shadow: inset 0 4px 0 var(--wp--preset--color--red, #e72823);
}

.tde-net__name {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
}

.tde-net__icon {
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--navy, #023f8d);
}

.tde-net__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.tde-net__choices[hidden],
.tde-bk__play[hidden],
.tde-net__again[hidden] {
	display: none;
}

.tde-net__btn {
	padding: 0.4rem 0.7rem;
	border: 1.5px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.tde-net__btn:hover:not([disabled]) {
	border-color: var(--wp--preset--color--navy, #023f8d);
}

.tde-net__btn[aria-pressed="true"] {
	background: var(--wp--preset--color--ink, #0b1530);
	border-color: var(--wp--preset--color--ink, #0b1530);
	color: var(--wp--preset--color--paper, #fff);
}

.tde-net__btn[disabled]:not([aria-pressed="true"]) {
	opacity: 0.45;
}

.tde-net__why summary {
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.tde-net__why p {
	margin: 0.35rem 0 0;
	font-size: 0.92rem;
}

.tde-net__feedback,
.tde-bk__out strong {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 800;
}

.is-right .tde-net__feedback {
	color: var(--tde-ok-ink, #1b7a44);
}

.is-wrong .tde-net__feedback {
	color: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-net__score,
.tde-bk__score {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.2rem;
	font-weight: 800;
}

.tde-net__score:empty,
.tde-bk__score:empty {
	display: none;
}

/* Survive the week */
.tde-bk {
	display: grid;
	gap: 1.25rem;
}

.tde-bk__setups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.tde-bk__setups legend {
	margin-bottom: 0.75rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.15rem;
	font-weight: 800;
}

.tde-bk__setup {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2rem 0.6rem;
	align-items: center;
	padding: 0.9rem 1rem;
	border: 2px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 14px;
	background: var(--wp--preset--color--surface, #fff);
	cursor: pointer;
}

.tde-bk__setup:has(input:checked) {
	border-color: var(--wp--preset--color--navy, #023f8d);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--navy, #023f8d);
}

.tde-bk__setup:has(input:focus-visible) {
	outline: 3px solid var(--tde-focus, #023f8d);
	outline-offset: 2px;
}

.tde-bk__setup input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tde-bk__setup-icon {
	width: 1.8rem;
	height: 1.8rem;
	color: var(--wp--preset--color--navy, #023f8d);
}

.tde-bk__setup-name {
	font-weight: 800;
}

.tde-bk__setup-text {
	grid-column: 1 / -1;
	font-size: 0.88rem;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-bk__play {
	margin: 0;
}

.tde-bk__days {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-bk__day {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 14px;
	background: var(--wp--preset--color--surface, #fff);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tde-bk__day > p {
	margin: 0;
}

.tde-bk__icon {
	width: 1.8rem;
	height: 1.8rem;
	color: var(--wp--preset--color--navy, #023f8d);
}

.tde-bk__when {
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-bk__event {
	font-weight: 700;
}

.tde-bk__out {
	font-size: 0.9rem;
}

.tde-bk__day.is-saved {
	box-shadow: inset 0 4px 0 #1f9d55;
}

.tde-bk__day.is-partial {
	box-shadow: inset 0 4px 0 var(--wp--preset--color--sticker, #ffc93c);
}

.tde-bk__day.is-lost {
	box-shadow: inset 0 4px 0 var(--wp--preset--color--red, #e72823);
}

.tde-bk__day.is-saved .tde-bk__out strong {
	color: var(--tde-ok-ink, #1b7a44);
}

.tde-bk__day.is-lost .tde-bk__out strong {
	color: var(--wp--preset--color--red-ink, #c21d18);
}

@media (prefers-reduced-motion: no-preference) {
	:root:not([data-calm="1"]) .tde-bk__day.is-played {
		animation: tde-bk-pop 0.35s ease;
	}
}

@keyframes tde-bk-pop {
	from {
		transform: scale(0.97);
	}
}

.tde-bk__table summary {
	font-weight: 700;
	cursor: pointer;
}

.tde-bk__scroll {
	margin-top: 0.75rem;
	overflow-x: auto;
}

.tde-bk__table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.tde-bk__table :is(th, td) {
	padding: 0.45rem 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--line, #d9e0ec);
	text-align: left;
	vertical-align: top;
}

.tde-bk__table td.is-saved {
	color: var(--tde-ok-ink, #1b7a44);
	font-weight: 700;
}

.tde-bk__table td.is-lost {
	color: var(--wp--preset--color--red-ink, #c21d18);
	font-weight: 700;
}

/* Network map: one big network next to separate networks */
.tde-map {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 900px) {
	.tde-map {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: start;
	}
}

.tde-map__side {
	margin: 0;
	padding: 1.1rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 18px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-map__side figcaption {
	margin-bottom: 0.9rem;
	font-size: 0.92rem;
}

.tde-map__tag {
	display: inline-block;
	margin-right: 0.35rem;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.tde-map__tag.is-bad {
	background: #c21d18;
}

.tde-map__tag.is-good {
	background: #1b7a44;
}

.tde-map__router {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 0.9rem;
	font-weight: 700;
}

.tde-map__router-icon {
	width: 2rem;
	height: 2rem;
	color: var(--wp--preset--color--navy, #023f8d);
}

.tde-map__flat {
	padding: 1rem;
	border: 2px solid var(--wp--preset--color--red, #e72823);
	border-radius: 14px;
	background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(231 40 35 / 0.06) 10px 20px);
}

.tde-map__devices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-map__device {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--fog, #eef2f8);
	font-size: 0.82rem;
	font-weight: 600;
}

.tde-map__icon {
	width: 1.15rem;
	height: 1.15rem;
}

.tde-map__zones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-map__zone {
	padding: 0.75rem;
	border: 2px solid var(--wp--preset--color--navy, #023f8d);
	border-radius: 14px;
}

.tde-map__zone-name {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
	font-weight: 800;
}

.tde-map__zone-icon {
	width: 1.3rem;
	height: 1.3rem;
	color: var(--wp--preset--color--navy, #023f8d);
}

/* Pictogram block (cards on the Veilig werken pages) */
.tde-icon-block {
	line-height: 0;
}

.tde-pictogram {
	width: 3rem;
	height: 3rem;
	color: var(--wp--preset--color--red, #e72823);
}

/* Video shelf (the deepfake videos in the Lab): our own screen until the visitor presses
   play, then the YouTube player in privacy-enhanced mode. */
.tde-shelf {
	display: grid;
	gap: 0.9rem;
}

/* A screen that stays dark in every look, like a television. It grows when its text needs
   more room than 16:9 (narrow phones); only the player itself is clipped to 16:9. */
.tde-shelf__screen {
	position: relative;
	display: grid;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	color: #fff;
	background:
		linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(140deg, #032b61, #0b1530 70%);
	box-shadow: 0 18px 40px -24px rgb(11 21 48 / 0.6);
}

.tde-shelf__screen.is-playing {
	overflow: hidden;
	background: #000;
}

.tde-shelf__poster {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 0.9rem;
	padding: clamp(1rem, 4vw, 1.75rem);
}

.tde-shelf__poster[hidden] {
	display: none;
}

.tde-shelf__now {
	display: grid;
	gap: 0.3rem;
	margin: 0;
}

.tde-shelf__title {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.tde-shelf__screen .tde-shelf__meta {
	color: rgb(255 255 255 / 0.8);
	font-size: 0.875rem;
}

.tde-shelf__play {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0.3rem 1.2rem 0.3rem 0.3rem;
	border: 0;
	border-radius: 999px;
	color: #0b1530;
	background: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.tde-shelf__play:hover {
	background: var(--wp--preset--color--sticker, #ffc93c);
}

.tde-shelf__play:focus-visible,
.tde-shelf__fallback:focus-visible {
	outline: 3px solid var(--wp--preset--color--sticker, #ffc93c);
	outline-offset: 3px;
}

.tde-shelf__play[hidden] {
	display: none;
}

.tde-shelf__evo,
.tde-shelf__evo svg {
	display: block;
	width: 48px;
	height: 48px;
}

.tde-shelf__fallback {
	color: #fff;
	font-size: 0.875rem;
	text-underline-offset: 2px;
}

.tde-shelf__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tde-shelf__below {
	display: grid;
	gap: 0.35rem;
}

.tde-shelf__note,
.tde-shelf__credit {
	margin: 0;
	color: var(--wp--preset--color--muted, #4b5a75);
	font-size: 0.8125rem;
}

.tde-shelf__note[hidden],
.tde-shelf__remember[hidden] {
	display: none;
}

.tde-shelf__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.tde-shelf__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-shelf__item {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-radius: 12px;
	color: inherit;
	background: var(--wp--preset--color--surface, #fff);
	text-decoration: none;
	cursor: pointer;
}

.tde-shelf__item:hover {
	border-color: var(--wp--preset--color--navy, #023f8d);
}

.tde-shelf__item:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 2px;
}

.tde-shelf__item[aria-current="true"],
.tde-shelf__item[aria-pressed="true"] {
	border-color: var(--wp--preset--color--red, #e72823);
	box-shadow: inset 4px 0 0 var(--wp--preset--color--red, #e72823);
}

.tde-shelf__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--fog, #eef2f8);
	font-size: 0.875rem;
	font-weight: 700;
}

.tde-shelf__item[aria-current="true"] .tde-shelf__num,
.tde-shelf__item[aria-pressed="true"] .tde-shelf__num {
	color: #fff;
	background: var(--wp--preset--color--red-ink, #c21d18);
}

.tde-shelf__text {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.tde-shelf__name {
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.tde-shelf__about {
	font-size: 0.875rem;
}

.tde-shelf__item .tde-shelf__meta {
	color: var(--wp--preset--color--muted, #4b5a75);
	font-size: 0.8125rem;
}

.tde-shelf__lang {
	display: inline-block;
	margin-right: 0.45em;
	padding: 0 0.4em;
	border-radius: 4px;
	color: #0b1530;
	background: var(--wp--preset--color--sticker, #ffc93c);
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
}

/* Our videos (the Lab's Media page): one row per topic, each video a small phone; a click
   opens the video in a pop-up shaped like a phone. */
.tde-media {
	display: grid;
	gap: clamp(2.25rem, 6vw, 3.5rem);
}

.tde-media__topic {
	display: grid;
	gap: 0.5rem;
}

.tde-media__heading {
	margin: 0;
}

.tde-media__intro {
	max-width: 62ch;
	margin: 0;
	color: var(--wp--preset--color--muted, #4b5a75);
}

/* Two videos side by side on a phone, more on wider screens. */
.tde-media__row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, calc(50% - 0.6rem)), 1fr));
	gap: 1.5rem 1.2rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.tde-media__card {
	display: grid;
	align-content: start;
	gap: 0.4rem;
	min-width: 0;
}

.tde-media__open {
	display: grid;
	gap: 0.55rem;
	border-radius: 22px;
	color: inherit;
	text-decoration: none;
}

.tde-media__open:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #023f8d);
	outline-offset: 4px;
}

/* The poster in a small phone: a dark frame with rounded corners. */
.tde-media__thumb {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	padding: 5px;
	border-radius: 22px;
	background: #0b0f1a;
	box-shadow: 0 16px 32px -20px rgb(11 21 48 / 0.75);
}

.tde-media__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 17px;
	object-fit: cover;
}

.tde-media__badge {
	position: absolute;
	right: 9%;
	bottom: 6%;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	color: #fff;
	background: var(--wp--preset--color--red-ink, #c21d18);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.4);
}

.tde-media__badge svg {
	width: 1.6rem;
	height: 1.6rem;
}

.tde-media__open:hover .tde-media__badge,
.tde-media__open:focus-visible .tde-media__badge {
	color: #0b1530;
	background: var(--wp--preset--color--sticker, #ffc93c);
}

.tde-media__length {
	position: absolute;
	bottom: 7.5%;
	left: 9%;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.15rem 0.5rem;
	border-radius: 6px;
	color: #fff;
	background: rgb(5 10 25 / 0.82);
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tde-media__lang {
	padding: 0 0.35em;
	border-radius: 4px;
	color: #0b1530;
	background: var(--wp--preset--color--sticker, #ffc93c);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.tde-media__name {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.tde-media__open:hover .tde-media__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tde-media__about,
.tde-media__story {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.tde-media__story {
	font-size: 0.875rem;
}

/* The pop-up: the whole screen, dark, the phone in the middle and the text beside it (on a
   wide screen) or below it. The close button stays in the top corner. */
dialog.tde-media__dialog {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 4.75rem 1rem 1.5rem;
	border: 0;
	color: #fff;
	/* Solid: the page must not show through behind the text under the phone. */
	background: #070b18;
	overflow: auto;
	overscroll-behavior: contain;
}

dialog.tde-media__dialog[open] {
	display: grid;
}

dialog.tde-media__dialog::backdrop {
	background: #070b18;
}

html:has(dialog.tde-media__dialog[open]) {
	overflow: hidden;
}

/* Auto margins centre the box, and a box taller than the window scrolls from its top. */
.tde-media__box {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	width: 100%;
	margin: auto;
}

.tde-media__phone {
	position: relative;
	padding: 24px 10px 14px;
	border-radius: 42px;
	background: #151a28;
	box-shadow: 0 0 0 2px #2f3a52, 0 30px 80px rgb(0 0 0 / 0.6);
}

/* The speaker slot at the top of the phone. */
.tde-media__phone::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	width: 64px;
	height: 6px;
	margin-left: -32px;
	border-radius: 3px;
	background: #2f3a52;
}

/* The screen keeps 9:16 and fits the window: its height, its width and room for the text. */
.tde-media__screen {
	position: relative;
	height: min(64vh, 44rem, calc((100vw - 3.5rem) * 16 / 9));
	height: min(64dvh, 44rem, calc((100vw - 3.5rem) * 16 / 9));
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 32px;
	background: #000;
}

.tde-media__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.tde-media__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0;
	border: 0;
	color: #fff;
	background: rgb(5 10 25 / 0.35);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
}

.tde-media__play[hidden] {
	display: none;
}

.tde-media__play-icon {
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--red-ink, #c21d18);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.45);
}

.tde-media__play-icon svg {
	width: 2.75rem;
	height: 2.75rem;
	margin-left: 0.3rem;
}

.tde-media__play-text {
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	background: rgb(5 10 25 / 0.8);
}

.tde-media__play:hover .tde-media__play-icon,
.tde-media__play:focus-visible .tde-media__play-icon {
	color: #0b1530;
	background: var(--wp--preset--color--sticker, #ffc93c);
}

.tde-media__play:focus-visible {
	outline: 3px solid var(--wp--preset--color--sticker, #ffc93c);
	outline-offset: -6px;
}

.tde-media__video:focus-visible {
	outline: 3px solid var(--wp--preset--color--sticker, #ffc93c);
	outline-offset: -3px;
}

.tde-media__info {
	display: grid;
	gap: 0.5rem;
	max-width: 34rem;
	text-align: center;
}

.tde-media__title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(1.25rem, 4vw, 1.6rem);
	line-height: 1.25;
}

.tde-media__text {
	margin: 0;
	color: rgb(255 255 255 / 0.88);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.tde-media__close {
	position: fixed;
	top: max(0.9rem, env(safe-area-inset-top));
	right: max(0.9rem, env(safe-area-inset-right));
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 48px;
	padding: 0 1.1rem 0 0.8rem;
	border: 0;
	border-radius: 999px;
	color: #0b1530;
	background: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.4);
}

.tde-media__close:hover {
	background: var(--wp--preset--color--sticker, #ffc93c);
}

.tde-media__close:focus-visible {
	outline: 3px solid var(--wp--preset--color--sticker, #ffc93c);
	outline-offset: 3px;
}

/* Wide screens: the text beside the phone, and the phone may use more of the height. */
@media (min-width: 56rem) {

	dialog.tde-media__dialog {
		padding: 4.5rem 2rem 2rem;
	}

	.tde-media__box {
		grid-template-columns: auto minmax(0, 22rem);
		align-items: center;
		justify-content: center;
		gap: 2.5rem;
	}

	.tde-media__screen {
		height: min(80vh, 46rem);
		height: min(calc(100dvh - 7.5rem), 46rem);
	}

	.tde-media__info {
		text-align: left;
	}
}

/* A gentle entrance, but not in calm mode or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {

	html:not([data-calm="1"]) dialog.tde-media__dialog[open] .tde-media__box {
		animation: tde-media-in 0.25s ease-out;
	}
}

@keyframes tde-media-in {

	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* ------------------------------------------------------------------ "Meer weten": the sites to keep up with */

.tde-sources {
	display: grid;
	gap: 1.4rem;
}

.tde-sources__note {
	margin: 0;
	padding: 1rem 1.2rem;
	border-left: 5px solid var(--wp--preset--color--red, #e72823);
	border-radius: 0 14px 14px 0;
	background: var(--wp--preset--color--surface, #fff);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

.tde-sources__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tde-sources__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	padding: 1.3rem 1.3rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line, #d9e0ec);
	border-top: 5px solid var(--tde-source, var(--wp--preset--color--navy, #023f8d));
	border-radius: 18px;
	background: var(--wp--preset--color--surface, #fff);
	box-shadow: var(--wp--preset--shadow--soft, 0 8px 24px rgb(11 21 48 / 0.08));
}

/* Fixed colours: a badge reads the same, with enough contrast, in every look. */
.tde-sources__item--red {
	--tde-source: #c21d18;
	--tde-source-text: #fff;
}

.tde-sources__item--navy {
	--tde-source: #032b61;
	--tde-source-text: #fff;
}

.tde-sources__item--blue {
	--tde-source: #2563c9;
	--tde-source-text: #fff;
}

.tde-sources__item--sun {
	--tde-source: #ffc93c;
	--tde-source-text: #0b1530;
}

.tde-sources__item--green {
	--tde-source: #1d7a4c;
	--tde-source-text: #fff;
}

.tde-sources__head {
	display: flex;
	gap: 0.9rem;
	align-items: center;
}

/* Our own badge: the letters of the site in its colour (no logos of others). */
.tde-sources__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 14px;
	background: var(--tde-source, #032b61);
	color: var(--tde-source-text, #fff);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.14);
}

.tde-sources__mark--3 {
	font-size: 1.05rem;
}

.tde-sources__mark--4 {
	font-size: 0.85rem;
}

.tde-sources__who {
	min-width: 0;
}

.tde-sources__name {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.25;
}

.tde-sources__name a {
	color: inherit;
	text-decoration: none;
}

.tde-sources__name a:hover,
.tde-sources__name a:focus-visible {
	text-decoration: underline;
}

.tde-sources__kind {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.6rem;
	align-items: center;
	margin: 0.15rem 0 0;
	color: var(--wp--preset--color--muted, #4b5a75);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.tde-sources__host {
	font-family: var(--wp--preset--font-family--mono, monospace);
}

.tde-sources__lang {
	padding: 0.05rem 0.4rem;
	border-radius: 6px;
	background: var(--wp--preset--color--fog, #eef2f8);
	color: var(--wp--preset--color--ink, #0b1530);
	font-weight: 700;
}

.tde-sources__about {
	margin: 0;
}

.tde-sources__news {
	padding: 0.8rem 0.9rem;
	border-radius: 12px;
	background: var(--wp--preset--color--fog, #eef2f8);
}

.tde-sources__label {
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--muted, #4b5a75);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.tde-sources__feed {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.4;
}

.tde-sources__feed time {
	display: block;
	color: var(--wp--preset--color--muted, #4b5a75);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

.tde-sources__credit {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
}

.tde-sources__credit a {
	color: var(--wp--preset--color--muted, #4b5a75);
}

.tde-sources__go {
	margin: auto 0 0;
	padding-top: 0.2rem;
}

.tde-sources__link {
	font-weight: 700;
}

.tde-sources__link::after {
	content: " \2192";
}

.tde-sources__fetched {
	margin: 0;
	color: var(--wp--preset--color--muted, #4b5a75);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

/* ------------------------------------------------------------------ the teaser: Evo reads */

.tde-more {
	display: flex;
	gap: 1.4rem;
	align-items: center;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1.4rem 1.6rem;
	border: 2px dashed var(--wp--preset--color--line, #d9e0ec);
	border-radius: 22px;
	background: var(--wp--preset--color--surface, #fff);
}

.tde-more__evo {
	flex: none;
	width: 7.5rem;
}

.tde-more__evo svg {
	width: 100%;
	height: auto;
}

.tde-more__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	line-height: 1.2;
}

.tde-more__text p {
	margin: 0;
}

.tde-more__go {
	margin-top: 0.7rem !important;
}

.tde-more__link {
	font-weight: 700;
}

.tde-more__link::after {
	content: " \2192";
}

@media (max-width: 600px) {

	.tde-more {
		flex-direction: column;
		text-align: center;
	}

	.tde-more__evo {
		width: 6.5rem;
	}
}