/**
 * Phrona demo — opmaak.
 *
 * Deze versie volgt het thema, niet een eigen ontwerp. Alle kleuren, radii,
 * schaduwen en lettertypen komen uit de themavariabelen (style.css, sectie 1);
 * de fallbacks hieronder zijn alleen nodig als de demo ooit buiten dit thema
 * wordt gebruikt.
 *
 * Uitgangspunten:
 *  - Fraunces voor koppen, Inter voor de rest — precies zoals de site.
 *  - Groen (#536D62) als hoofdaccent, terra (#A86F5C) als tweede accent.
 *  - Knoppen zijn dezelfde pillen als .btn op de site.
 *  - Geen externe fonts of CDN's.
 */

/* ---------------------------------------------------------------------------
 * Fullscreen laag
 *
 * De wizard lag in `.entry-content` van het thema. Die CSS raakt `h2`, `p`,
 * `ul`, `li`, `a`, `strong`, `blockquote` en `[hidden]` -- allemaal ook binnen
 * de demo. Dat is de "WordPress-css verstoort de ui" die je zag: regels die
 * voor een blogartikel bedoeld zijn, vielen binnen een dashboard.
 *
 * `demo.js` verplaatst de laag naar <body>. Daarmee staat hij buiten de
 * content-wrapper. Wat hier volgt maakt hem los van de pagina eronder: eigen
 * stapelorde, eigen scroll, geen overerving van paginaregels.
 * --------------------------------------------------------------------------- */

.pd-open {
	max-width: 44rem;
	margin: 0 auto;
	padding: 2rem 0 1rem;
	text-align: center;
}

/* Deze knop staat BUITEN de laag, dus buiten het bereik van de --pd-*
   variabelen. Eerst leunde hij op `var(--pd-green)`: ongedefinieerd, dus geen
   achtergrond -- en met `color:#fff` werd het witte tekst op een witte pagina.
   Daarom eigen waarden, met de themavariabelen van :root als bron. */
.pd-open .pd-open__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .95rem 2.1rem;
	background: var(--green, #536D62);
	border: 1px solid var(--green, #536D62);
	border-radius: var(--r-pill, 999px);
	color: #fff;
	font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.1;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.pd-open .pd-open__knop:hover {
	background: #47605A;
	border-color: #47605A;
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(32, 40, 37, .45);
}

.pd-open .pd-open__knop:focus-visible {
	outline: 2px solid var(--green, #536D62);
	outline-offset: 3px;
}

.pd-open__hint {
	margin: .9rem 0 0;
	color: var(--pd-muted, #68716C);
	font-family: var(--pd-sans, "Inter", sans-serif);
	font-size: .92rem;
	line-height: 1.5;
}

/* De laag zelf: vast over de pagina, eigen scrollvlak.
   Let op de id in de selector. De gewone `.phrona-demo`-regels staan verderop
   in dit bestand (max-width 1080px, hoogte uit --pd-frame). Met dezelfde
   specificiteit zouden die winnen en werd de "fullscreen" laag 1080x806 in
   plaats van het hele scherm. */
#phrona-demo.phrona-demo--modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	height: 100svh;
	height: 100dvh;
	max-width: none;
	width: 100%;
	min-width: 0;
	/* De gewone .phrona-demo-regel zet `margin: 0 auto; padding: ...`. Zonder
	   deze expliciete waarden blijft de laag gecentreerd op 1080px staan in
	   plaats van het scherm te vullen. */
	margin: 0 !important;
	padding: 0;
	inset: 0;
	/* Dezelfde warme papierwassing als de hero van de site. Op de LAAG, niet op
	   het frame: het frame blijft bijna-wit, anders wordt de demo-UI onleesbaar
	   boven een drukke achtergrond. Vast meeschuivend met de pagina geeft geen
	   zin -- de laag scrollt zelf niet. */
	background-color: var(--pd-bg, #FAFAF8);
	background-image: url("img/demo-backdrop.jpg");
	background-size: cover;
	background-position: 50% 50%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	/* Geen overerving van paginaregels: alles binnen de laag erft van hier. */
	text-align: left;
	line-height: 1.6;
}

/* Het kader binnen de laag: gecentreerd, met lucht eromheen. */
#phrona-demo.phrona-demo--modal .pd-frame-inner {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	/* Op een telefoon vult het paneel anders de hele breedte en verdwijnt de
	   achtergrondwassing -- dan was die alleen op desktop te zien. Een paar
	   pixels marge aan de zijkanten houdt de wassing zichtbaar zonder dat het
	   krap wordt. */
	/* Bijna opaak: de wassing mag je zien, de decoratie mag niet door de tekst
	   heen komen. 94% houdt net genoeg warmte over zonder de leesbaarheid te
	   raken. */
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(1.04) blur(1.5px);
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding: clamp(16px, 2.4vw, 30px) clamp(12px, 2.6vw, 34px) clamp(14px, 2vw, 26px);
	/* Marge, niet padding: het witte vlak zelf moet van de rand af staan, anders
	   is de achtergrondwassing erachter nergens te zien. Padding duwt alleen de
	   inhoud naar binnen en laat het witte vlak tot de rand doorlopen. */
	margin-left: auto;
	margin-right: auto;
	max-width: min(1180px, calc(100% - 2 * clamp(0px, 1.6vw, 18px)));
}

/* ---------------------------------------------------------------------------
 * Kopbalk van de laag: logo links, titel midden, sluiten rechts.
 * --------------------------------------------------------------------------- */

.pd-topbar {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: .55rem clamp(14px, 2.4vw, 28px);
	background: var(--pd-white, #fff);
	border-bottom: 1px solid var(--pd-line-soft, #E4E7E1);
}

.pd-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-width: 0;
	color: var(--pd-ink, #202825);
	font-family: var(--pd-sans, "Inter", sans-serif);
	font-size: .95rem;
	font-weight: 500;
	text-decoration: none;
}

.pd-topbar__brand:hover { color: var(--pd-green, #536D62); }

/* Het merkteken: hetzelfde beeldmerk als in de siteheader, geen nabootsing. */
.pd-topbar__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
}

.pd-topbar__mark img,
.pd-topbar__mark picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pd-topbar__naam {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pd-topbar__titel {
	margin: 0;
	color: var(--pd-muted, #68716C);
	font-family: var(--pd-sans, "Inter", sans-serif);
	font-size: .84rem;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pd-topbar__sluit {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	background: var(--pd-surface, #F2F3EF);
	border: 1px solid var(--pd-line-soft, #E4E7E1);
	border-radius: 50%;
	color: var(--pd-ink, #202825);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--pd-dur, .28s) var(--pd-ease, ease),
		border-color var(--pd-dur, .28s) var(--pd-ease, ease);
}

.pd-topbar__sluit:hover {
	background: var(--pd-line-soft, #E4E7E1);
	border-color: var(--pd-line, #DADDD7);
}

.pd-topbar__sluit:focus-visible {
	outline: 2px solid var(--pd-green, #536D62);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Bescherming tegen paginaregels
 *
 * De laag staat buiten `.entry-content`, maar het thema heeft ook kale
 * elementselectors (`h2`, `p`, `ul`, `li`, `a`, `strong`, `blockquote`,
 * `[hidden]`) die overal gelden. Deze regels zetten de belangrijkste daarvan
 * terug binnen de demo -- gericht, niet met een alles-of-niets-reset.
 * --------------------------------------------------------------------------- */

/* LET OP: `:where()` eromheen, en dat is geen stijlkeuze.
 *
 * Eerst stond hier `.phrona-demo--modal p` en `.phrona-demo--modal ol`. Die
 * wegen (0,2,0) en wonnen daarmee van de gewone klassen verderop in dit
 * bestand, die (0,1,0) wegen. Gevolg: `.pd-steps { margin: 0 0 22px }` werd
 * overschreven door `margin: 0`, en de kop van elk scherm plakte tegen de
 * stappenbalk -- nul pixels ertussen, op elk formaat.
 *
 * `:where()` heeft specificiteit (0,0,0), dus de bescherming geldt alleen waar
 * niets anders iets zegt. Dat is precies wat een reset hoort te doen.
 */
:where(.phrona-demo--modal) p { margin: 0 0 .75em; }
:where(.phrona-demo--modal) p:last-child { margin-bottom: 0; }
:where(.phrona-demo--modal) h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.15; }
:where(.phrona-demo--modal) h3 { font-size: 1.02rem; line-height: 1.25; }
:where(.phrona-demo--modal) ul,
:where(.phrona-demo--modal) ol { padding-left: 1.15em; }
:where(.phrona-demo--modal) li { margin-bottom: .35em; }
:where(.phrona-demo--modal) a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(.phrona-demo--modal) strong { font-weight: 600; color: inherit; }
:where(.phrona-demo--modal) blockquote { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; }
:where(.phrona-demo--modal) [hidden] { display: none !important; }

/* De pagina onder de laag mag niet meescrollen. */
body.pd-modal-open { overflow: hidden; }

/* Was de demo al open? Dan geen flits van de knop bij het laden. */
.phrona-demo--modal:not([hidden]) ~ .pd-open { display: none; }

.phrona-demo {
	--pd-ink: var(--ink, #202825);

	/* Het dashboard is een kader met een vaste hoogte. De inhoud scrolt
	   daarbinnen; de stappen en de actiebalk blijven staan. Zonder dit sprong
	   de kaart bij elke stap van 264 naar 532 px en moest de bezoeker telkens
	   terugscrollen naar de knop. */
	--pd-frame: clamp(430px, 68svh, 620px);
	--pd-body: var(--body, #323A36);
	--pd-muted: var(--muted, #68716C);
	--pd-line: var(--line, #DADDD7);
	--pd-line-soft: var(--line-soft, #E4E7E1);
	--pd-bg: var(--bg, #FAFAF8);
	--pd-surface: var(--surface, #F2F3EF);
	--pd-card: var(--card, #EEF1EC);
	--pd-white: var(--white, #FFFFFF);
	--pd-green: var(--green, #536D62);
	--pd-green-hover: #47605A;
	--pd-green-soft: var(--green-soft, #6D8E7E);
	--pd-terra: var(--terra, #A86F5C);
	/* Terra op wit haalt 4,12:1 en dat is net onder de WCAG-norm voor gewone
	   tekst. Voor tekst gebruiken we daarom een donkerder variant van dezelfde
	   kleurfamilie (6,1:1); `--pd-terra` blijft voor randen en accenten. */
	--pd-terra-tekst: #8A5443;
	--pd-beige: var(--beige, #F1E7DF);
	--pd-radius: var(--r-md, 16px);
	--pd-radius-sm: var(--r-sm, 10px);
	--pd-pill: var(--r-pill, 999px);
	--pd-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(32, 40, 37, .04), 0 6px 16px -8px rgba(32, 40, 37, .08));
	--pd-shadow-md: var(--shadow-md, 0 2px 4px rgba(32, 40, 37, .03), 0 18px 40px -22px rgba(32, 40, 37, .18));
	--pd-ease: var(--ease, cubic-bezier(.22, .61, .36, 1));
	--pd-dur: var(--dur, .28s);
	--pd-display: var(--font-display, "Fraunces", Georgia, serif);
	--pd-sans: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

	display: flex;
	flex-direction: column;
	height: var(--pd-frame);
	/* De wizard zat in `wrap--narrow` (760 px) terwijl de pagina 1425 px breed
	   is: op een groot scherm bleef tweederde leeg terwijl de inhoud binnenin
	   stond te scrollen. Het kader mag nu de ruimte gebruiken, met een ruime
	   bovengrens zodat het geen strook over een 4K-monitor wordt. */
	max-width: min(100%, var(--pd-max, 1080px));
	margin: 0 auto;
	padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 30px) clamp(18px, 2.5vw, 24px);
	background: var(--pd-white);
	border: 1px solid var(--pd-line-soft);
	border-radius: var(--r-lg, 22px);
	box-shadow: var(--pd-shadow-md);
	color: var(--pd-body);
	font-family: var(--pd-sans);
	font-size: 1rem;
	line-height: 1.6;
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * Dashboard-kader
 *
 * Drie lagen: stappen (vast) · inhoud (scrolt) · acties (vast).
 * De hoogte is één keer vastgelegd, dus een stapwissel verplaatst niets op de
 * pagina. Wat te lang is voor het vlak scrolt binnen het vlak — niet de pagina.
 * --------------------------------------------------------------------------- */

.pd-body {
	flex: 1 1 auto;
	min-height: 0;            /* essentieel: anders duwt de inhoud het kader op */
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	/* Ruimte voor de scrollbar, zodat tekst niet tegen de rand plakt. */
	padding-right: 10px;
	scrollbar-width: thin;
	scrollbar-color: var(--pd-line) transparent;
}

/* De scrollbar is een hulpmiddel, geen ornament: dun en laag contrast, en hij
   komt pas in beeld als je hem nodig hebt. Een brede balk naast de tekst leest
   als "hier is iets mis" en trekt de aandacht van de inhoud af. */
.pd-body::-webkit-scrollbar { width: 6px; }
.pd-body::-webkit-scrollbar-thumb {
	background: var(--pd-line-soft);
	border-radius: 999px;
}
.pd-body:hover::-webkit-scrollbar-thumb { background: var(--pd-line); }
.pd-body::-webkit-scrollbar-track { background: transparent; }

/* Een zachte rand onderaan het vlak: dat leest als "hier loopt het door",
   niet als "hier is het afgekapt". Zonder dit leek de leskaart per ongeluk
   doorgesneden door de actiebalk.

   Alleen als er echt iets te scrollen valt, en niet als je al onderaan bent --
   anders vervaagt de laatste regel die je wilde lezen. `demo.js` zet daarvoor
   de klassen is-scrollbaar en is-aan-het-eind. */
/* Geen uitfadering. Een masker over de onderrand lijkt eleganter dan een harde
   snede, maar maakt de eerstvolgende regel half leesbaar -- en dat leest juist
   als een fout. De scheiding zit daarom in de actiebalk: die heeft een eigen
   rand en een lichte schaduw, zodat de knip bewust oogt in plaats van toevallig. */
/* Altijd lucht onderaan het vlak, ook als de inhoud precies past. Zonder deze
   ruimte valt de laatste regel van een lijst precies op de rand en lijkt hij
   afgekapt, ook al is er niets aan de hand. */
.pd-body {
	scroll-padding-bottom: 24px;
}

.pd-body.is-scrollbaar {
	padding-bottom: 24px;
}

/* De actiebalk: altijd in beeld, nooit mee-scrollend. */
.pd-footer {
	flex: 0 0 auto;
	margin-top: clamp(14px, 2vw, 18px);
	padding-top: clamp(12px, 2vw, 16px);
	border-top: 1px solid var(--pd-line-soft);
	background: var(--pd-white);
	/* Een lichte schaduw omhoog: de balk ligt zichtbaar bovenop het vlak, dus
	   de knip erboven is een grens en geen afgesneden tekst. */
	box-shadow: 0 -10px 18px -14px rgba(32, 40, 37, .18);
	position: relative;
	z-index: 1;
}

.pd-footer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* De volgende actie is de enige die opvalt; de rest is stil. */
.pd-footer-row .pd-btn-primary { order: 2; }
.pd-footer-row .pd-btn-ghost { order: 1; }

/* De foutmelding hoort bij de actie, niet bij de inhoud: hij verschijnt
   precies daar waar de bezoeker net klikte. */
.pd-footer .pd-error {
	margin: 0 0 12px;
}

/* Artikelomgeving neutraliseert anders de eerste/laatste marges. */
.entry-content .phrona-demo h2,
.entry-content .phrona-demo h3 {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Voortgangsstippen — dezelfde taal als de stap-lijst op de voorpagina:
 * een dunne lijn boven de tekst, nummer in klein kapitaal.
 * --------------------------------------------------------------------------- */

.pd-steps {
	flex: 0 0 auto;
	display: flex;
	gap: 0;
	list-style: none;
	/* Iets ruimer dan eerst: de kop van het scherm hing tegen de stappenbalk
	   aan. Op mobiel zeker, want daar is de kop twee regels en dan leest een
	   tussenruimte van 22px als "geen tussenruimte". */
	margin: 0 0 clamp(24px, 3.4vw, 34px);
	padding: 0;
	counter-reset: pd-step;
	border-bottom: 1px solid var(--pd-line-soft);
}

.pd-steps li {
	position: relative;
	flex: 1 1 0;
	margin: 0;
	padding: 0 6px 12px;
	color: var(--pd-muted);
	font-size: max(12px, .75rem);
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

.pd-steps li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: transparent;
	transition: background-color var(--pd-dur) var(--pd-ease);
}

.pd-steps li.is-active {
	color: var(--pd-green);
	font-weight: 600;
}

.pd-steps li.is-active::after { background: var(--pd-green); }
.pd-steps li.is-done::after { background: var(--pd-green-line, #789387); }
.pd-steps li.is-done { color: var(--pd-body); }

/* ---------------------------------------------------------------------------
 * Schermen
 * --------------------------------------------------------------------------- */

.pd-screen { display: none; }
.pd-screen.is-active { display: block; }

.pd-screen h2 {
	margin: 0 0 .6rem;
	font-family: var(--pd-display);
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--pd-ink);
}

.pd-lead {
	margin: 0 0 1.1rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--pd-body);
}

.pd-help {
	margin: 0 0 1.1rem;
	color: var(--pd-muted);
	font-size: .95rem;
}

/* De statusregel met drie puntjes die om de beurt oplichten.
 *
 * Waarom geen "…" in de tekst: dat is één teken dat stilstaat. Een bezoeker die
 * naar een balk kijkt die even niet opschuift, leest stilstand als "hangt".
 * Drie puntjes die elkaar opvolgen zeggen: er gebeurt iets, ook als het
 * percentage even blijft staan.
 *
 * aria-hidden op de puntjes, want het is decoratie: de tekst ernaast zegt wat
 * er gebeurt, en een schermlezer hoeft geen "punt punt punt" te horen.
 */
.pd-status {
	display: inline-flex;
	align-items: baseline;
	gap: .1em;
}

.pd-dots {
	display: inline-flex;
	align-items: baseline;
	gap: .18em;
	margin-left: .1em;
}

.pd-dots i {
	width: .3em;
	height: .3em;
	border-radius: 50%;
	background: currentColor;
	opacity: .22;
	animation: pd-dot 1.35s ease-in-out infinite;
}

.pd-dots i:nth-child(2) { animation-delay: .18s; }
.pd-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes pd-dot {
	0%, 70%, 100% { opacity: .22; transform: translateY(0); }
	35% { opacity: 1; transform: translateY(-.12em); }
}

/* Wie beweging heeft uitgezet, krijgt geen knipperende puntjes maar een
   rustige regel. De tekst zegt al wat er gebeurt. */
@media (prefers-reduced-motion: reduce) {
	.pd-dots i { animation: none; opacity: .45; }
}

.pd-note {
	margin: 1.1rem 0;
	padding: .8rem 1rem;
	background: var(--pd-surface);
	border-left: 3px solid var(--pd-terra);
	border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0;
	font-size: .9rem;
	color: var(--pd-muted);
}

.pd-bullets {
	margin: 0 0 1.6rem;
	padding-left: 1.15rem;
	color: var(--pd-muted);
	font-size: .95rem;
}

.pd-bullets li { margin-bottom: .4rem; }
.pd-bullets li::marker { color: var(--pd-green-soft); }

/* ---------------------------------------------------------------------------
 * Knoppen — identiek aan .btn / .btn--primary / .btn--ghost van de site
 * --------------------------------------------------------------------------- */

.pd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .82em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--pd-pill);
	background: var(--pd-green);
	color: #fff;
	font-family: var(--pd-sans);
	font-size: .93rem;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: .005em;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--pd-dur) var(--pd-ease),
		background-color var(--pd-dur) var(--pd-ease),
		border-color var(--pd-dur) var(--pd-ease),
		box-shadow var(--pd-dur) var(--pd-ease);
}

.pd-btn-primary {
	background: var(--pd-green);
	color: #fff;
}

.pd-btn-primary:hover:not(:disabled) {
	background: var(--pd-green-hover);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(32, 40, 37, .45);
}

.pd-btn-ghost {
	background: transparent;
	border-color: var(--pd-line);
	color: var(--pd-ink);
}

.pd-btn-ghost:hover:not(:disabled) {
	background: var(--pd-white);
	border-color: #c6ccc4;
	transform: translateY(-1px);
}

.pd-btn:active:not(:disabled) { transform: translateY(0); }

.pd-btn:focus-visible {
	outline: 2px solid var(--pd-terra);
	outline-offset: 2px;
}

.pd-btn:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.pd-row {
	display: flex;
	gap: .7rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1.4rem;
}

/* ---------------------------------------------------------------------------
 * Bestand kiezen
 * --------------------------------------------------------------------------- */

.pd-drop {
	display: block;
	padding: clamp(24px, 4vw, 38px) 20px;
	border: 1.5px dashed var(--pd-line);
	border-radius: var(--pd-radius);
	background: var(--pd-surface);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--pd-dur) var(--pd-ease),
		background-color var(--pd-dur) var(--pd-ease);
}

.pd-drop:hover,
.pd-drop:focus-within {
	border-color: var(--pd-green);
	background: var(--pd-card);
}

.pd-drop input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pd-drop-label {
	display: block;
	color: var(--pd-muted);
	font-size: .95rem;
}

.pd-drop-label::before {
	content: "";
	display: block;
	width: 38px;
	height: 38px;
	margin: 0 auto .8rem;
	border-radius: 12px;
	border: 1px solid var(--pd-line);
	background: var(--pd-white)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23536D62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E")
		center / 18px 18px no-repeat;
}

/* ---------------------------------------------------------------------------
 * Tweede ingang — voorbeelddocument
 *
 * De knop "Probeer het met een voorbeelddocument" staat naast de dropzone. Zonder
 * deze regel valt hij terug op losse inline-elementen en staat de toelichting
 * als platte tekst onder de dropzone in plaats van als eigen aanloop.
 * Kleuren uit het themapalet: beige vlak, dashed --pd-line, tekst #5C564C
 * (contrast 5,96 op --beige; --muted haalt daar maar 4,14).
 * --------------------------------------------------------------------------- */

.pd-voorbeeld {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 1rem 0 .25rem;
	padding: .75rem .9rem;
	border: 1px dashed var(--pd-line);
	border-radius: var(--pd-radius-sm);
	background: var(--pd-beige);
}

.pd-voorbeeld-tekst {
	color: #5C564C;
	font-size: .9rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Voortgangsbalk
 * --------------------------------------------------------------------------- */

.pd-progress {
	height: 8px;
	margin: 1rem 0 .6rem;
	background: var(--pd-line-soft);
	border-radius: var(--pd-pill);
	overflow: hidden;
}

.pd-progress-fill {
	position: relative;
	overflow: hidden;
	height: 100%;
	background: linear-gradient(90deg, var(--pd-green-soft), var(--pd-green));
	border-radius: var(--pd-pill);
	transition: width .35s linear;
}

/* Een zachte glans die meelift met de balk. Zonder dit staat een balk die
   even stilstaat volledig stil, en dat leest als "vastgelopen". */
.pd-progress-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 20%,
		rgba(255, 255, 255, .55) 50%,
		rgba(255, 255, 255, 0) 80%
	);
	animation: pd-shine 1.8s linear infinite;
}

@keyframes pd-shine {
	from { transform: translateX(-100%); }
	to { transform: translateX(100%); }
}

.pd-meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	color: var(--pd-muted);
	font-size: .84rem;
	letter-spacing: .01em;
}

.pd-meta-rest {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .35rem;
	align-items: baseline;
	justify-content: flex-end;
}

.pd-meta-sep { opacity: .5; }

.pd-meta-percent {
	font-family: var(--pd-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--pd-ink);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Tellers, fases en activiteitenlog
 *
 * Dit is het antwoord op "de plugin loopt niet goed door": een balk alleen is
 * te weinig informatie. Je wilt weten wát er gebeurt, hoeveel er al gebeurd is
 * en of het nog vooruitgaat.
 * --------------------------------------------------------------------------- */

.pd-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	background: var(--pd-line-soft);
	border: 1px solid var(--pd-line-soft);
	border-radius: var(--pd-radius-sm);
	overflow: hidden;
}

.pd-stats li {
	margin: 0;
	padding: .7rem .5rem;
	background: var(--pd-white);
	text-align: center;
}

.pd-stat-waarde {
	display: block;
	font-family: var(--pd-display);
	font-size: 1.28rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--pd-ink);
	font-variant-numeric: tabular-nums;
}

.pd-stat-label {
	display: block;
	margin-top: .15rem;
	color: var(--pd-muted);
	font-size: max(11px, .7rem);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pd-phases {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .5rem;
	list-style: none;
	margin: 1.6rem 0 1.2rem;
	padding: 0;
}

.pd-phases li {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding-top: .55rem;
	border-top: 2px solid var(--pd-line-soft);
	color: var(--pd-muted);
	font-size: max(11px, .74rem);
	line-height: 1.3;
	transition: color var(--pd-dur) var(--pd-ease),
		border-color var(--pd-dur) var(--pd-ease);
}

.pd-phase-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pd-line);
	transition: background-color var(--pd-dur) var(--pd-ease),
		transform var(--pd-dur) var(--pd-ease);
}

.pd-phases li.is-active {
	border-top-color: var(--pd-green);
	color: var(--pd-ink);
	font-weight: 600;
}

.pd-phases li.is-active .pd-phase-dot {
	background: var(--pd-green);
	transform: scale(1.25);
	box-shadow: 0 0 0 4px rgba(83, 109, 98, .14);
}

.pd-phases li.is-done {
	border-top-color: var(--pd-green-soft);
	color: var(--pd-body);
}

.pd-phases li.is-done .pd-phase-dot { background: var(--pd-green-soft); }

.pd-activity {
	list-style: none;
	/* Het logboek groeide met elke gebeurtenis mee: op een telefoon werd dit
	   scherm 4231 px lang binnen het dashboard, en dan moest je eindeloos
	   scrollen voor de actiebalk. Een eigen hoogte met eigen scroll houdt het
	   overzichtelijk; het nieuwste staat onderaan en blijft in beeld. */
	max-height: clamp(96px, 18svh, 168px);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 1.1rem 0 0;
	padding: .85rem 1rem;
	background: var(--pd-surface);
	border-radius: var(--pd-radius-sm);
	font-size: .87rem;
	scrollbar-width: thin;
}

.pd-activity::-webkit-scrollbar { width: 6px; }
.pd-activity::-webkit-scrollbar-thumb {
	background: var(--pd-line);
	border-radius: 999px;
}

.pd-activity:empty { display: none; }

.pd-activity-item {
	display: flex;
	gap: .7rem;
	margin: 0;
	padding: .22rem 0;
	color: var(--pd-body);
	animation: pd-slide-in .3s var(--pd-ease) both;
}

.pd-activity-item + .pd-activity-item {
	border-top: 1px solid var(--pd-line-soft);
	padding-top: .38rem;
	margin-top: .16rem;
}

.pd-activity-time {
	flex: 0 0 auto;
	color: var(--pd-muted);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	padding-top: .1em;
}

.pd-activity-text { flex: 1; }

.pd-activity-item--claim .pd-activity-text,
.pd-activity-item--lesson .pd-activity-text { color: var(--pd-ink); }

.pd-activity-item--done .pd-activity-text { color: var(--pd-green); font-weight: 500; }

@keyframes pd-slide-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Limiet-blok: uitleg in plaats van een kale foutregel. */
.pd-limit {
	margin: 1.4rem 0 1.1rem;
	padding: 1.1rem 1.25rem;
	background: var(--pd-beige);
	border-left: 3px solid var(--pd-terra);
	border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0;
}

.pd-limit-titel {
	margin: 0 0 .4rem;
	font-family: var(--pd-display);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--pd-ink);
}

.pd-limit-tekst {
	margin: 0 0 .9rem;
	color: var(--pd-body);
	font-size: .92rem;
	line-height: 1.55;
}

/* Hervatten-blok op het welkomscherm. */
.pd-resume {
	margin: 1.4rem 0 1.1rem;
	padding: 1rem 1.15rem;
	background: var(--pd-card);
	border-left: 3px solid var(--pd-green);
	border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0;
}

.pd-resume-tekst {
	margin: 0 0 .8rem;
	color: var(--pd-body);
	font-size: .93rem;
}

.pd-row--tight { margin-top: 0; }

/* ---------------------------------------------------------------------------
 * Inzichten
 * --------------------------------------------------------------------------- */

.pd-insights {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pd-line-soft);
}

.pd-insights h3 {
	margin: 0 0 1rem;
	color: var(--pd-muted);
	font-family: var(--pd-sans);
	font-size: max(12px, .78rem);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pd-insight { margin-bottom: 1.35rem; }

.pd-insight-head {
	margin: 0 0 .35rem;
	color: var(--pd-green);
	font-size: .84rem;
	font-weight: 600;
}

.pd-insight ul {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .93rem;
}

.pd-insight li { margin-bottom: .3rem; }

/* ---------------------------------------------------------------------------
 * Brein-animatie
 * --------------------------------------------------------------------------- */

.pd-orb {
	position: relative;
	width: 132px;
	height: 132px;
	margin: 2.5rem auto 2rem;
}

.pd-orb span {
	position: absolute;
	inset: 0;
	border: 1.5px solid var(--pd-green-soft);
	border-radius: 50%;
	opacity: .35;
	animation: pd-pulse 2.4s ease-in-out infinite;
}

.pd-orb span:nth-child(2) {
	border-color: var(--pd-terra);
	animation-delay: .8s;
}

.pd-orb span:nth-child(3) {
	animation-delay: 1.6s;
}

@keyframes pd-pulse {
	0% { transform: scale(.55); opacity: .5; }
	100% { transform: scale(1); opacity: 0; }
}

/* De kern: één stip die ademt, zodat het middelpunt rust geeft. */
.pd-orb-core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #7C9A8A, var(--pd-green));
	box-shadow: 0 0 0 6px rgba(83, 109, 98, .10);
	animation: pd-breathe 3.2s ease-in-out infinite;
}

@keyframes pd-breathe {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(83, 109, 98, .10); }
	50% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(83, 109, 98, .05); }
}

/* Satellieten: drie punten die om de kern draaien. Puur decoratief, maar het
   maakt zichtbaar dat er iets gaande is tijdens een fase zonder cijfers. */
.pd-orb-sat {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background: var(--pd-terra);
	transform-origin: 0 0;
	animation: pd-orbit 5.5s linear infinite;
}

.pd-orb-sat--1 { animation-delay: 0s; background: var(--pd-green-soft); }
.pd-orb-sat--2 { animation-delay: -1.85s; }
.pd-orb-sat--3 { animation-delay: -3.7s; background: var(--pd-green); }

@keyframes pd-orbit {
	from { transform: rotate(0deg) translateX(52px) rotate(0deg); }
	to { transform: rotate(360deg) translateX(52px) rotate(-360deg); }
}

.pd-orb-label {
	margin: 0 0 .7rem;
	text-align: center;
	color: var(--pd-muted);
	font-size: .93rem;
	min-height: 1.4em;
}

.pd-orb-bar {
	height: 4px;
	max-width: 240px;
	margin: 0 auto;
	background: var(--pd-line-soft);
	border-radius: var(--pd-pill);
	overflow: hidden;
}

.pd-orb-bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: var(--pd-pill);
	background: linear-gradient(90deg, var(--pd-green-soft), var(--pd-green));
	transition: width .25s var(--pd-ease);
}

/* ---------------------------------------------------------------------------
 * Breed scherm: het kader gebruikt de ruimte die er is.
 *
 * De wizard zat in `wrap--narrow` (760 px) terwijl de pagina 1425 px breed is.
 * Op een groot scherm bleef tweederde leeg terwijl de inhoud binnenin stond te
 * scrollen. Het kader wordt breder, en de blokken die naast elkaar kunnen
 * (de drie lenzen, de fases, de cijfers) krijgen de ruimte om dat te doen.
 *
 * Géén twee kolommen met de inhoud links en uitleg rechts: de schermen zijn
 * kinderen van het scrollvlak, dus dat werd een lege tweede kolom. Beter één
 * leesbare kolom die de breedte gebruikt.
 * --------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	/* Het kader zit in de themawrapper `wrap--narrow` (760 px). Breder worden
	   kan alleen door eruit te breken: de negatieve marge links is precies
	   (oude breedte - nieuwe breedte) / 2, dus het blijft gecentreerd. */
	.phrona-demo {
		--pd-breed: min(var(--pd-max, 1080px), calc(100vw - 56px));
		width: var(--pd-breed);
		max-width: none;
		margin-left: calc((100% - var(--pd-breed)) / 2);
		padding-left: clamp(28px, 3.4vw, 52px);
		padding-right: clamp(28px, 3.4vw, 52px);
	}

	/* De lensuitleg naast elkaar in plaats van als een lange lijst. */
	.pd-lenses ul {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .5rem 1.4rem;
	}

	/* De cijfers (alinea's / claims / lessen / tijd) naast het logboek in
	   plaats van onder elkaar: het is allebei "stand van zaken", en zo staat
	   het op één hoogte zonder dat je hoeft te scrollen. */
	@media (min-width: 1200px) {
		[data-screen="processing"] {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
			column-gap: clamp(18px, 2.2vw, 30px);
			align-content: start;
		}

		/* Titel, hulptekst, balk en fases over de volle breedte. */
		[data-screen="processing"] > h2,
		[data-screen="processing"] > .pd-help,
		[data-screen="processing"] > .pd-progress,
		[data-screen="processing"] > .pd-phases,
		[data-screen="processing"] > .pd-chain {
			grid-column: 1 / -1;
		}

		[data-screen="processing"] > .pd-stats {
			grid-column: 1;
		}

		[data-screen="processing"] > .pd-activity {
			grid-column: 2;
			grid-row: 6;
			margin-top: 0;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-orb span { animation: none; opacity: .22; }
	.pd-orb-core, .pd-orb-sat { animation: none; }
	.pd-orb-sat--1 { transform: rotate(0deg) translateX(52px); }
	.pd-orb-sat--2 { transform: rotate(120deg) translateX(52px); }
	.pd-orb-sat--3 { transform: rotate(240deg) translateX(52px); }
	.pd-progress-fill { transition: none; }
	.pd-btn { transition: none; }
}

/* ---------------------------------------------------------------------------
 * Chat
 * --------------------------------------------------------------------------- */

/* Het gesprek heeft geen eigen scrollvlak meer.
   Voorheen stond hier max-height:380px met overflow-y:auto, waardoor er binnen
   het dashboard een tweede scrollgebied ontstond. Op een telefoon moest je dan
   in het juiste vlak zien te scrollen. Nu scrolt het hele inhoudsvlak mee. */
.pd-chat {
	margin-bottom: 1rem;
	padding: 1.1rem;
	background: var(--pd-surface);
	border: 1px solid var(--pd-line-soft);
	border-radius: var(--pd-radius);
	scroll-behavior: smooth;
}

.pd-chat:empty { display: none; }

.pd-bubble {
	max-width: 88%;
	margin-bottom: .85rem;
	padding: .75rem .95rem;
	border-radius: 14px;
	font-size: .93rem;
	line-height: 1.55;
	white-space: pre-wrap;
}

.pd-bubble-user {
	margin-left: auto;
	background: var(--pd-green);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.pd-bubble-brain {
	background: var(--pd-white);
	border: 1px solid var(--pd-line-soft);
	border-bottom-left-radius: 4px;
	color: var(--pd-body);
}

.pd-bubble-system {
	background: transparent;
	border: 1px dashed var(--pd-line);
	color: var(--pd-muted);
	font-size: .84rem;
}

.pd-bubble-src {
	display: block;
	margin-top: .45rem;
	padding-top: .45rem;
	border-top: 1px solid var(--pd-line-soft);
	color: var(--pd-muted);
	font-size: .75rem;
	white-space: normal;
}

/* Het invoerveld.
   `position: sticky; bottom: 0` werkt hier niet: een element dat onder de vouw
   begint wordt door sticky niet in beeld getrokken -- het werd pas zichtbaar na
   scrollen, en dat is precies de klacht. Daarom scrollt `demo.js` na elk
   antwoord naar het formulier (scrollIntoView) en landt het chatscherm met het
   formulier in beeld. Zo blijft het bij alle formaten bereikbaar. */
/* Het rapport-blok: één regel uitleg, één knop. */
/* Compact, want dit is een zijpad en niet de hoofdactie.

   Eerst was dit 71 px hoog op desktop en 142 px op mobiel: een eigen kaart met
   twee regels uitleg en daaronder nog een knop over de volle breedte. Op een
   telefoon duwde dat het gesprek naar boven, terwijl de bezoeker daar net zat
   te lezen. Nu twee korte regels en een kleine knop, en op mobiel staat de
   knop naast de tekst in plaats van eronder -- het is één handeling, dus het
   hoort één rij te zijn. */
.pd-rapport {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem .9rem;
	/* Niet de volle breedte: op een groot scherm werd dit 1092 px met 700 px
	   lege ruimte tussen de uitleg en de knop. Het is een zijpad, geen
	   hoofdsectie, dus het hoeft niet de breedte van het dashboard te vullen. */
	max-width: 34rem;
	margin: .9rem 0 0;
	padding: .6rem .8rem;
	background: var(--pd-beige);
	border: 1px solid rgba(168, 111, 92, .22);
	border-radius: var(--pd-radius-sm);
}

.pd-rapport__tekst {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
	flex: 1 1 auto;
	color: var(--pd-body);
	font-family: var(--pd-sans);
	font-size: .82rem;
	line-height: 1.35;
}

.pd-rapport__tekst strong {
	color: var(--pd-ink);
	font-size: .88rem;
	font-weight: 600;
}

.pd-rapport__knop {
	flex: 0 0 auto;
	padding: .45rem .85rem;
	background: var(--pd-white);
	border-color: rgba(168, 111, 92, .35);
	color: var(--pd-terra-tekst);
	font-size: .82rem;
	white-space: nowrap;
}

.pd-rapport__knop:hover:not(:disabled) {
	background: #fff;
	border-color: var(--pd-terra);
}

.pd-rapport__knop:disabled {
	opacity: .6;
	cursor: progress;
}

@media (max-width: 480px) {
	/* Op mobiel blijft het één rij: tekst links, knop rechts. Onder elkaar werd
	   dit 142 px hoog en duwde het de chat naar boven. `flex: 0 0 auto` op de
	   tekst, want in een rij werkt flex-basis op de breedte en dan knijpt de
	   knop de uitleg weg. */
	.pd-rapport {
		gap: .5rem .6rem;
		padding: .55rem .65rem;
	}
	.pd-rapport__tekst {
		flex: 1 1 auto;
		font-size: .78rem;
	}
	.pd-rapport__tekst strong {
		font-size: .84rem;
	}
	.pd-rapport__knop {
		padding: .4rem .7rem;
		font-size: .76rem;
	}
}

/* Op de smalste telefoons is er geen ruimte voor twee kolommen tekst naast een
   knop: de uitleg werd vier regels in een strook van 143 px, en dat leest als
   een gevulde kolom met losse woorden. Daar zegt de titel genoeg. */
@media (max-width: 344px) {
	.pd-rapport__tekst span { display: none; }
}

.pd-chat-form {
	display: flex;
	gap: .55rem;
	align-items: stretch;
	margin-top: .7rem;
	scroll-margin-bottom: 12px;
}

.pd-chat-form input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: .72rem 1rem;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-pill);
	background: var(--pd-white);
	color: var(--pd-body);
	font-family: var(--pd-sans);
	font-size: .95rem;
	transition: border-color var(--pd-dur) var(--pd-ease),
		box-shadow var(--pd-dur) var(--pd-ease);
}

.pd-chat-form input[type="text"]::placeholder { color: var(--pd-muted); }

.pd-chat-form input[type="text"]:focus {
	outline: none;
	border-color: var(--pd-green);
	box-shadow: 0 0 0 3px rgba(83, 109, 98, .16);
}

/* ---------------------------------------------------------------------------
 * Ontsluitingswijzen
 * --------------------------------------------------------------------------- */

.pd-channels {
	margin-top: 2rem;
	padding: 1.1rem 1.25rem;
	background: var(--pd-card);
	border-radius: var(--pd-radius);
}

.pd-channels-title {
	margin: 0 0 .6rem;
	color: var(--pd-ink);
	font-size: .93rem;
	font-weight: 600;
}

.pd-channels ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--pd-muted);
	font-size: .88rem;
}

.pd-channels li { margin-bottom: .3rem; }
.pd-channels strong { color: var(--pd-ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * Conversie
 * --------------------------------------------------------------------------- */

.pd-convert {
	margin-top: 1.6rem;
	padding: 1.3rem;
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	background: var(--pd-bg);
}

.pd-convert h3 {
	margin: 0 0 .5rem;
	font-family: var(--pd-display);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.2;
}

.pd-convert p {
	margin: 0 0 1rem;
	color: var(--pd-muted);
	font-size: .93rem;
}

/* ---------------------------------------------------------------------------
 * Foutmelding
 * --------------------------------------------------------------------------- */

.pd-error {
	margin: 1.2rem 0 0;
	padding: .8rem 1rem;
	border-left: 3px solid #a33;
	border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0;
	background: #fdf3f3;
	color: #7a2222;
	font-size: .9rem;
}

/* ---------------------------------------------------------------------------
 * Het werkproces: tekst > claim > bron > les
 *
 * Dit is het belangrijkste deel van de demo. De opmaak moet de KETEN laten
 * zien, niet een lijstje met weetjes: de tekst staat als citaat, de claims
 * hangen eronder per lens, de bron staat bij de claim, en de les staat apart.
 * --------------------------------------------------------------------------- */

.pd-lenses {
	margin: 1.5rem 0;
	padding: 1rem 1.15rem;
	background: var(--pd-surface);
	border-radius: var(--pd-radius);
}

.pd-lenses-title {
	margin: 0 0 .5rem;
	color: var(--pd-ink);
	font-size: .93rem;
	font-weight: 600;
}

.pd-lenses ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--pd-muted);
	font-size: .93rem;
}

.pd-lenses li { margin-bottom: .3rem; }

.pd-chain {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pd-line-soft);
}

/* De titel is nu de summary van een <details>: klikbaar, met een eigen pijl.
   Zonder deze regels erft hij de standaard disclosure-markering van de browser
   en staat de pijl los van de tekst. */
.pd-chain-title {
	margin: 0;
	padding: .55rem 0;
	color: var(--pd-ink);
	font-family: var(--pd-display);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: .5rem;
	list-style: none;
}

.pd-chain-title::-webkit-details-marker { display: none; }

/* Eigen pijl die meedraait: één teken, geen icoonfont. */
.pd-chain-title::before {
	content: "›";
	display: inline-block;
	color: var(--pd-green);
	font-family: var(--pd-sans);
	font-size: 1.1rem;
	line-height: 1;
	transform: rotate(0deg);
	transition: transform var(--pd-dur) var(--pd-ease);
}

.pd-chain[open] .pd-chain-title::before { transform: rotate(90deg); }

.pd-chain-aantal {
	color: var(--pd-muted);
	font-family: var(--pd-sans);
	font-size: .82rem;
	font-weight: 400;
}

.pd-chain-title:focus-visible {
	outline: 2px solid var(--pd-green);
	outline-offset: 3px;
	border-radius: 6px;
}

.pd-chain-steps {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	color: #5F6863;
	font-size: max(12px, .78rem);
	font-weight: 500;
	letter-spacing: .04em;
}

.pd-chain-steps li {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: .28rem .7rem .28rem .35rem;
	background: var(--pd-card);
	border-radius: var(--pd-pill);
}

.pd-chain-steps li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--pd-green);
	color: #fff;
	font-size: .76rem;
	font-weight: 600;
}

.pd-alinea {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--pd-line-soft);
}

.pd-alinea:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.pd-alinea-kop {
	margin: 0 0 .7rem;
	color: #8C5645;
	font-family: var(--pd-sans);
	font-size: max(12px, .75rem);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pd-stap-tekst {
	margin: 0 0 1.1rem;
	padding: .85rem 1.1rem;
	border-left: 3px solid var(--pd-green-line, #789387);
	border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0;
	background: var(--pd-surface);
	color: #5F6863;
	font-family: var(--pd-display);
	font-size: .98rem;
	font-style: italic;
	line-height: 1.55;
}

.pd-lens { margin-bottom: 1.1rem; }

.pd-lens-kop {
	margin: 0 0 .45rem;
	color: var(--pd-ink);
	font-size: .88rem;
	font-weight: 600;
}

/* Alleen de chain-kop krijgt hier kleur. De oogst heeft zijn eigen, donkerdere
   waarde verderop; een tweede regel met dezelfde specificiteit die later komt,
   overschreef die en dan won (0,2,0) op (0,2,0) op bronvolgorde. */
.pd-lens-kop .pd-lens-icoon {
	color: var(--pd-green);
}

.pd-claims {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .93rem;
}

.pd-claims li { margin-bottom: .55rem; }
.pd-claims li::marker { color: var(--pd-green-soft); }

.pd-claim-tekst { display: block; }

.pd-claim-bron {
	display: block;
	margin-top: .2rem;
	color: var(--pd-muted);
	font-size: .75rem;
	font-style: italic;
}

.pd-lessen {
	margin-top: 1.1rem;
	padding: .85rem 1.05rem;
	background: var(--pd-beige);
	border-left: 3px solid var(--pd-terra);
	border-radius: 0 var(--pd-radius-sm) var(--pd-radius-sm) 0;
}

.pd-lessen-kop {
	margin: 0 0 .5rem;
	color: #8C5645;
	font-family: var(--pd-sans);
	font-size: max(12px, .75rem);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pd-lessen ul {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .93rem;
	color: var(--pd-body);
}

.pd-lessen li { margin-bottom: .3rem; }

.pd-chat-intro {
	margin: 0 0 1rem;
	padding: .8rem 1rem;
	background: var(--pd-surface);
	border-radius: var(--pd-radius-sm);
	color: var(--pd-muted);
	font-size: .93rem;
}

/* ---------------------------------------------------------------------------
 * Klein scherm
 * --------------------------------------------------------------------------- */

@media (max-width: 560px) {
	.phrona-demo {
		padding: 16px 16px 14px;
		border-radius: var(--r-md, 16px);
		/* Op een telefoon is er weinig hoogte; het kader vult wat er is. */
		--pd-frame: clamp(400px, 74svh, 560px);
	}

	/* De actiebalk: één duidelijke knop over de volle breedte, de rest eronder.
	   Duimbereik boven precisie: geen twee knoppen naast elkaar op 320px. */
	.pd-footer-row {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 8px;
	}

	.pd-footer-row .pd-btn {
		width: 100%;
		justify-content: center;
	}

	/* Op een telefoon is het gesprek het hoofdonderwerp. De lijst met
	   ontsluitingswijzen duwt de chat anders 340px naar boven, en dan moet je
	   scrollen om te zien wat je net vroeg. Ingeklapt is hij één regel; wie wil
	   weten wat er nog meer kan, klapt hem open. */
	.pd-channels {
		margin-top: .8rem;
		padding-top: .8rem;
	}

	.pd-channels summary {
		cursor: pointer;
		font-size: .9rem;
	}
}

	.pd-steps {
		margin-bottom: 24px;
	}

	.pd-steps li {
		padding: 0 3px 8px;
		font-size: max(10.5px, .66rem);
		letter-spacing: .06em;
		letter-spacing: .06em;
	}

	.pd-bubble { max-width: 94%; }

	.pd-chat-form { flex-wrap: wrap; }

	.pd-chat-form input[type="text"] {
		flex: 1 1 100%;
		border-radius: var(--pd-radius-sm);
	}

	.pd-chat-form .pd-btn {
		flex: 1 1 100%;
	}

	.pd-meta { flex-direction: column; gap: .2rem; }

	.pd-voorbeeld {
		flex-direction: column;
		align-items: stretch;
	}

	.pd-voorbeeld .pd-btn { width: 100%; }

	.pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.pd-phases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .4rem .7rem;
	}

	.pd-activity { padding: .75rem .85rem; font-size: .84rem; }

	.pd-activity-item { gap: .5rem; }
}

/* ------------------------------------------------------------------
 * De oogst: wat Plato uit het document haalde, vóór het brein bestaat.
 *
 * Dit scherm is het inhoudelijke hart van de demo. De opmaak is daarom
 * rustiger dan de verwerkingsschermen: geen bewegende balken, maar lessen
 * die je kunt lezen. De nadruk ligt op de lessen; de beweringen zitten
 * ingeklapt omdat ze de onderbouwing zijn, niet de kop.
 * ------------------------------------------------------------------ */

.pd-lenses--oogst {
	margin: 0 0 1.75rem;
	padding: 1.15rem 1.3rem;
	background: var(--pd-surface);
	border-radius: var(--pd-radius);
}

.pd-lenses--oogst li {
	padding: .45rem 0;
	line-height: 1.5;
	list-style: none;
}

.pd-lenses--oogst li strong {
	display: flex;
	align-items: center;
	color: var(--pd-green);
	font-size: .95rem;
	font-weight: 600;
}

/* `> span`, niet ` span`: de icoon-wrapper is ook een span en zou anders
   grijze tekstkleur en 0,9rem krijgen -- dan verdwijnt het teken. */
.pd-lenses--oogst li > span {
	color: var(--pd-muted);
	font-size: .9rem;
}

/* In de oogst is het teken een herkenningspunt, geen decoratie: iets groter en
   in een eigen rondje, zodat de drie invalshoeken ook zonder lezen uit elkaar
   te houden zijn. */
.pd-lenses--oogst .pd-lens-icoon {
	width: 1.8rem;
	height: 1.8rem;
	margin-right: .55rem;
	border-radius: 50%;
	/* Iets meer contrast: op 15 px met een lichte achtergrond las het teken als
	   een vlekje. Het groen op 12% in plaats van 10%, en de lijn zelf donkerder. */
	background: rgba(83, 109, 98, .14);
	color: #3F5952;
	vertical-align: 0;
}

.pd-lenses--oogst .pd-lens-icoon svg {
	width: 1.05rem;
	height: 1.05rem;
}

.pd-lenses--oogst ul {
	margin: 0;
	padding: 0;
}

.pd-oogst {
	margin: 0 0 1.75rem;
	padding: 1.3rem 1.45rem 1.45rem;
	background: var(--pd-white);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	box-shadow: var(--pd-shadow-sm);
}

/* Het teken bij een invalshoek.
 *
 * `currentColor` op de lijn, dus het kleurt mee met de tekst eromheen: groen bij
 * de kop in de oogst, inkt in de chain. Eén regel, geen tweede kleurdefinitie
 * die uit de pas kan lopen.
 */
.pd-lens-icoon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin-right: .42em;
	color: currentColor;
	vertical-align: -.16em;
}

.pd-lens-icoon svg {
	width: 1.05em;
	height: 1.05em;
	display: block;
}

.pd-oogst-title {
	margin: 0 0 1.1rem;
	color: var(--pd-ink);
	font-family: var(--pd-display);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.25;
}

.pd-oogst-title span {
	color: var(--pd-terra-tekst);
	font-weight: 500;
}

.pd-oogst-list {
	counter-reset: les;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Groeiende lijst, begrensde hoogte.
 *
 * De lijst mag niet stil afgekapt worden (dat was de bug: kop zei 12, lijst
 * toonde 8), maar hij mag ook niet de kaart en dus de pagina oprekken. Zelfde
 * oplossing als bij het werkproces: het vlak scrolt, de kaart blijft staan.
 * `scroll-padding` zodat de laatste regel niet half onder de rand blijft hangen.
 */
.pd-oogst-list.is-lang {
	max-height: min(46svh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: .5rem;
	scroll-padding-bottom: .5rem;
}

/* Op een telefoon geen tweede scrollvlak.
 *
 * Het scherm zelf scrolt al, en twee scrollende vlakken in elkaar is precies
 * waar mensen vastlopen: je veegt, er beweegt iets anders dan je verwacht, en
 * de lijst voelt afgesneden. Daar loopt de lijst gewoon mee met de pagina; de
 * hoogte is begrensd door wat je toch al scrollt.
 */
@media (max-width: 480px) {
	.pd-oogst-list.is-lang {
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}
}

/* Iets dunnere balk: dit is een leesvlak, geen bediening. */
.pd-oogst-list.is-lang::-webkit-scrollbar {
	width: 6px;
}

.pd-oogst-list.is-lang::-webkit-scrollbar-thumb {
	background: rgba(83, 109, 98, .28);
	border-radius: 3px;
}

.pd-oogst-list.is-lang::-webkit-scrollbar-track {
	background: transparent;
}

.pd-oogst-list li {
	position: relative;
	padding: .7rem 0 .7rem 2.4rem;
	border-top: 1px solid var(--pd-line-soft);
	color: var(--pd-body);
	font-size: .96rem;
	line-height: 1.6;
}

.pd-oogst-list li:first-child {
	border-top: 0;
	padding-top: .2rem;
}

.pd-oogst-list li::before {
	counter-increment: les;
	content: counter(les);
	position: absolute;
	left: 0;
	top: .72rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--pd-card);
	border-radius: var(--pd-pill);
	color: var(--pd-green);
	font-family: var(--pd-display);
	font-size: .85rem;
}

.pd-oogst-list li:first-child::before { top: .22rem; }

.pd-oogst-claims {
	margin: 0 0 1.75rem;
	padding: .95rem 1.2rem;
	background: var(--pd-bg);
	border: 1px solid var(--pd-line-soft);
	border-radius: var(--pd-radius-sm);
}

.pd-oogst-claims summary {
	cursor: pointer;
	color: var(--pd-green);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
}

.pd-oogst-claims summary::marker { color: var(--pd-muted); }

.pd-oogst-claims ol {
	margin: .85rem 0 0;
	padding-left: 1.15rem;
	color: var(--pd-muted);
	font-size: .89rem;
	line-height: 1.55;
}

.pd-oogst-claims li { margin-bottom: .55rem; }

.pd-oogst-bron {
	display: inline-block;
	margin-left: .4rem;
	padding: .05rem .45rem;
	background: var(--pd-card);
	border-radius: var(--pd-pill);
	color: var(--pd-green);
	font-size: .78rem;
	white-space: nowrap;
}

.pd-oogst-actie {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pd-line-soft);
}

.pd-oogst-actie .pd-help { margin: 0 0 .9rem; }

.pd-help--klein {
	color: var(--pd-muted);
	font-size: .85rem;
}

/* Mobiel: de nummers links mogen kleiner, de tekst blijft leesbaar. */
@media (max-width: 480px) {
	.pd-oogst { padding: 1.05rem 1.1rem 1.2rem; }
	.pd-oogst-title { font-size: 1.15rem; }
	.pd-oogst-list li { padding-left: 2.1rem; font-size: .93rem; }
	.pd-oogst-list li::before { width: 1.45rem; height: 1.45rem; font-size: .8rem; }
}