.wbc-box {
	--wbc-tint: #F6F3E9;
	--wbc-ink: #24261F;
	--wbc-accent: #C97A1E;
	--wbc-accent-ink: #FFFFFF;
	--wbc-muted: #726C5C;
	--wbc-mint-ink: #0B3B37;
	--wbc-coral: #D9587C;
	--wbc-line: rgba(0,0,0,0.08);

	background: #fff;
	border-radius: 16px;
	padding: 24px 26px;
	margin-top: 28px;
	font-family: inherit;
	color: var(--wbc-ink);
	border: 1px solid var(--wbc-line);
	border-left: 4px solid var(--wbc-accent);
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.wbc-box * { box-sizing: border-box; }
.wbc-login-hint { text-align: center; color: var(--wbc-muted); font-size: 14px; }
.wbc-illustration { line-height: 0; }
.wbc-illustration img { width: 100%; height: auto; border-radius: 12px; display: block; }

/*
 * Kleur per fase (data-wbc-layer): dient als accent — de linkerrand van de
 * hele box, en de kickers van de "actieve" stappen — niet als vlakvullende
 * achtergrond overal. Zo blijft het onderscheid tussen fases zichtbaar
 * zonder dat elk onderdeel er hetzelfde uitziet.
 */
.wbc-box[data-wbc-layer="intro"]   { --wbc-accent: #8A6A0A; --wbc-tint: #FBF6E4; }
.wbc-box[data-wbc-layer="html"]    { --wbc-accent: #3E6E8E; --wbc-tint: #EEF5F8; }
.wbc-box[data-wbc-layer="css"]     { --wbc-accent: #D9587C; --wbc-tint: #FCEFF3; }
.wbc-box[data-wbc-layer="js"]      { --wbc-accent: #5C9A4B; --wbc-tint: #F1F7EE; }
.wbc-box[data-wbc-layer="bridge"]  { --wbc-accent: #B8860B; --wbc-tint: #FBF6E4; }
.wbc-box[data-wbc-layer="builder"] { --wbc-accent: #C97A1E; --wbc-tint: #FBF3E7; }
.wbc-box[data-wbc-layer="combine"] { --wbc-accent: #8A5FBF; --wbc-tint: #F5F0FA; }
.wbc-box[data-wbc-layer="world"]   { --wbc-accent: #24261F; --wbc-tint: #F3F2EE; }

/*
 * Elke stap in de les (uitleg, doen, sandbox, check, ...) is een .wbc-step
 * met een vaste kicker-kop erboven, zodat een leerling altijd in één oogopslag
 * ziet: wat ben ik nu aan het doen. Vaste volgorde, geen keuzeknoppen vooraf.
 */
.wbc-box > * + * { margin-top: 22px; }
.wbc-step-kicker {
	display: flex; align-items: center; gap: 6px;
	font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	margin: 0 0 10px; color: var(--wbc-muted);
}
.wbc-step-uitleg .wbc-step-kicker { color: var(--wbc-muted); }
.wbc-step-doen .wbc-step-kicker,
.wbc-step-opdracht .wbc-step-kicker,
.wbc-step-sandbox .wbc-step-kicker { color: var(--wbc-accent); }
.wbc-step-check .wbc-step-kicker { color: var(--wbc-coral); }
.wbc-step-check-boss .wbc-step-kicker { color: #8A5FBF; }

.wbc-step-uitleg .wbc-step-body { font-size: 14.5px; line-height: 1.7; }
.wbc-step-doen .wbc-step-body,
.wbc-step-opdracht .wbc-step-body {
	background: var(--wbc-tint); border-radius: 12px; padding: 16px 18px;
	font-size: 14.5px; line-height: 1.7;
}
.wbc-step-body p { margin: 0 0 12px; }
.wbc-step-body p:last-child { margin-bottom: 0; }
.wbc-step-body code {
	background: rgba(0,0,0,0.06); border-radius: 4px; padding: 1px 5px; font-size: .92em;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* --- Kleine stapjes: native <details>, geen losse JS-toggle nodig --- */
.wbc-micro-details { background: var(--wbc-tint); border-radius: 12px; padding: 12px 16px; }
.wbc-micro-details summary {
	cursor: pointer; font-weight: 700; font-size: 13px; color: var(--wbc-accent);
	list-style: none;
}
.wbc-micro-details summary::-webkit-details-marker { display: none; }
.wbc-micro-details summary::marker { content: ""; }
.wbc-micro-details summary::before { content: "▸ "; }
.wbc-micro-details[open] summary::before { content: "▾ "; }
.wbc-micro-details[open] summary { margin-bottom: 10px; }
.wbc-micro-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.wbc-micro-list li { font-size: 14px; line-height: 1.6; }

.wbc-vastlopen-banner { background: #FBF0D2; border-radius: 12px; padding: 14px 16px; font-size: 13px; }
.wbc-vastlopen-banner p { margin: 0 0 4px; }
.wbc-vastlopen-banner p:last-child { margin-bottom: 0; }

/* --- Live code-sandbox: links typen, rechts het resultaat --- */
.wbc-sandbox { background: var(--wbc-tint); border-radius: 12px; padding: 18px; }
.wbc-sandbox-label { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--wbc-muted); }
.wbc-sandbox-body { display: flex; gap: 16px; align-items: stretch; }
.wbc-sandbox-editors { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.wbc-editor-pane { display: flex; flex-direction: column; flex: 1 1 auto; }
.wbc-editor-pane label,
.wbc-sandbox-preview-wrap label {
	display: block; font-size: 10.5px; font-weight: 700; color: var(--wbc-muted);
	margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em;
}
.wbc-code-input {
	width: 100%; flex: 1 1 auto; min-height: 90px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 13px; line-height: 1.55; padding: 10px 12px; border-radius: 10px;
	border: 1px solid var(--wbc-line); resize: vertical; background: #fff; color: var(--wbc-ink);
}
.wbc-code-input:focus { outline: none; border-color: var(--wbc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wbc-accent) 18%, transparent); }
.wbc-sandbox-preview-wrap { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
.wbc-sandbox-preview { flex: 1 1 auto; width: 100%; min-height: 200px; border: 1px solid var(--wbc-line); border-radius: 10px; background: #fff; }
.wbc-sandbox-reset {
	margin-top: 12px; background: #fff; border: 1px solid var(--wbc-line); color: var(--wbc-muted);
	border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.wbc-sandbox-reset:hover { border-color: var(--wbc-accent); color: var(--wbc-accent); }

.wbc-widget-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.wbc-widget-bar-label { font-size: 11px; font-weight: 700; color: var(--wbc-muted); margin-right: 2px; }
.wbc-widget-btn {
	background: #fff; border: 1px solid var(--wbc-accent); color: var(--wbc-accent);
	border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wbc-widget-btn:hover { background: var(--wbc-accent); color: var(--wbc-accent-ink); }

@media (max-width: 700px) {
	.wbc-sandbox-body { flex-direction: column; }
}

/* --- Missiedoel-checkpoint --- */
.wbc-checkpoint { background: #FCF2F5; border-radius: 12px; padding: 16px 18px; }
.wbc-checkpoint-text { font-size: 15px; font-weight: 700; margin: 0 0 6px; line-height: 1.5; }
.wbc-checkpoint-hint { font-size: 12.5px; color: var(--wbc-muted); margin: 0 0 14px; line-height: 1.5; }
.wbc-checkpoint-actions { display: flex; gap: 10px; }
.wbc-btn-ja {
	flex: 1; background: var(--wbc-coral); color: #fff; border: none;
	border-radius: 10px; padding: 11px 14px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.wbc-btn-nee {
	flex: 1; background: #fff; border: 1.5px solid var(--wbc-line); border-radius: 10px;
	padding: 11px 14px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--wbc-muted);
}
.wbc-btn-nee:hover { border-color: var(--wbc-muted); color: var(--wbc-ink); }
.wbc-checkpoint.wbc-done .wbc-checkpoint-actions { display: none; }
.wbc-checkpoint-done-row {
	display: none; align-items: center; gap: 8px; color: var(--wbc-mint-ink); font-weight: 700;
	font-size: 14.5px; animation: wbc-pop .35s ease;
}
.wbc-checkpoint.wbc-done .wbc-checkpoint-done-row { display: flex; }

/* --- Boss fight: beoordeling door begeleider --- */
.wbc-checkpoint.wbc-boss { background: #F5F0FA; }
.wbc-review-banner { border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.5; }
.wbc-review-banner p { margin: 0; }
.wbc-review-banner.wbc-review-none { background: #fff; color: var(--wbc-ink); }
.wbc-review-banner.wbc-review-pending { background: #FBF0D2; color: #6B5200; }
.wbc-review-banner.wbc-review-approved { background: #E5F0DF; color: var(--wbc-mint-ink); font-weight: 700; }
.wbc-review-banner.wbc-review-needs_work { background: #FCEFF3; color: #8F3350; }
.wbc-review-feedback-text { margin-top: 6px !important; font-style: italic; }
.wbc-btn-submit-review {
	background: #8A5FBF; color: #fff; border: none; border-radius: 10px;
	padding: 11px 16px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.wbc-btn-submit-review:disabled { opacity: .6; cursor: default; }
.wbc-complete-lock-hint { font-size: 12px; color: #8F3350; margin: 6px 0 0; }

@keyframes wbc-pop {
	0%   { transform: scale(0.85); opacity: 0; }
	60%  { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1); }
}

/* --- Bonusmissie: native <details>, duidelijk lager op de visuele ladder --- */
.wbc-extra { background: #F5F0FA; border: 1px dashed rgba(138,95,191,0.4); border-radius: 12px; padding: 14px 18px; }
.wbc-extra-label {
	cursor: pointer; font-size: 12px; font-weight: 700; color: #5B3A78; list-style: none;
}
.wbc-extra-label::-webkit-details-marker { display: none; }
.wbc-extra-label::marker { content: ""; }
.wbc-extra-label::before { content: "▸ "; }
.wbc-extra[open] .wbc-extra-label::before { content: "▾ "; }
.wbc-extra[open] .wbc-extra-label { display: block; margin-bottom: 10px; }
.wbc-extra-text { font-size: 13.5px; margin: 0 0 12px; line-height: 1.6; }
.wbc-extra-btn {
	background: #fff; border: 1px solid #8A5FBF; color: #5B3A78; border-radius: 8px;
	padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.wbc-extra-btn.done { background: #8A5FBF; color: #fff; border-color: #8A5FBF; }

@media (max-width: 480px) {
	.wbc-box { padding: 18px 16px; }
	.wbc-sandbox-editors { flex-direction: column; }
}