/* Complimentje Editor. Gescopet onder .cmpl-editor: geen globale selectors,
   eigen tokens zodat het thema niets kan overschrijven en andersom. */

/* Dezelfde lettertypen die de printrenderer straks gebruikt, zelf gehost.
   Zonder deze bestanden tekent het canvas een systeemfont en wijkt het
   voorbeeld op het scherm af van wat de drukker levert. Alle drie zijn ze
   op gewicht 600 aangemeld, want zo vraagt de editor ze op. */
@font-face{
	font-family:'CmplFraunces'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/fraunces-v38-latin-600.ttf') format('truetype');
}
@font-face{
	font-family:'CmplManrope'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/manrope-v20-latin-500.ttf') format('truetype');
}
@font-face{
	font-family:'CmplCaveat'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/caveat-v23-latin-600.ttf') format('truetype');
}
/* Elke variant is een eigen familie op gewicht 600, en niet een gewicht binnen
   dezelfde familie. Het canvas vraagt namelijk altijd om "600 <maat>px <familie>";
   zou vet een gewicht 700 binnen dezelfde familie zijn, dan koos de browser zelf
   iets anders dan het TTF-bestand dat de printrenderer pakt, en week de print af
   van wat de klant zag. */
@font-face{
	font-family:'CmplFrauncesVet'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/fraunces-v38-latin-700.ttf') format('truetype');
}
@font-face{
	font-family:'CmplFrauncesCursief'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/fraunces-v38-latin-600italic.ttf') format('truetype');
}
@font-face{
	font-family:'CmplFrauncesVetCursief'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/fraunces-v38-latin-700italic.ttf') format('truetype');
}
@font-face{
	font-family:'CmplManropeVet'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/manrope-v20-latin-700.ttf') format('truetype');
}
@font-face{
	font-family:'CmplCaveatVet'; font-weight:600; font-style:normal; font-display:swap;
	src:url('../fonts/caveat-v23-latin-700.ttf') format('truetype');
}

.cmpl-editor{
	--cmpl-cream:var(--kleur-grond); --cmpl-soft:var(--kleur-grond); --cmpl-white:var(--kleur-grond);
	--cmpl-ink:var(--kleur-ink); --cmpl-muted:var(--kleur-soft);
	--cmpl-terra:var(--kleur-rood); --cmpl-gold:var(--kleur-lijn); --cmpl-line:var(--kleur-lijn);
	--cmpl-radius:var(--r-vlak);

	display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:start;
	max-width:940px; margin:24px auto 0; padding:24px;
	background:var(--cmpl-white); border:var(--lijn-dikte) solid var(--cmpl-line); border-radius:var(--cmpl-radius);
	font-family:'Figtree', system-ui, sans-serif; color:var(--cmpl-ink); line-height:1.55;
	box-sizing:border-box;
}
.cmpl-editor *,.cmpl-editor *::before,.cmpl-editor *::after{box-sizing:border-box}

/* Onmisbaar: hieronder staan blokken op display:flex, en dat wint van de
   browserregel [hidden]{display:none}. Zonder deze regel bleef de drop-tekst
   over de gekozen foto staan en stond het tekstpaneel meteen open. */
.cmpl-editor [hidden]{display:none !important}

.cmpl-editor--notice{display:block; text-align:center; color:var(--cmpl-muted)}

.cmpl-stage-wrap{min-width:0}
.cmpl-stage{
	position:relative; border-radius:var(--r-vlak); overflow:hidden;
	background:
		radial-gradient(120px 90px at 20% 24%,rgba(157,176,140,.5),transparent 70%),
		radial-gradient(150px 110px at 82% 26%,rgba(233,195,160,.55),transparent 70%),
		radial-gradient(150px 120px at 76% 86%,rgba(201,184,214,.5),transparent 70%),
		radial-gradient(120px 90px at 22% 90%,rgba(185,203,216,.5),transparent 70%),
		var(--cmpl-soft);
}
.cmpl-canvas{display:block; width:100%; height:auto; touch-action:none; cursor:grab}
.cmpl-canvas:active{cursor:grabbing}

.cmpl-drop{
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
	pointer-events:none; /* de uitleg mag het slepen op het canvas niet blokkeren */
}
.cmpl-drop strong{display:block; font-family:'Newsreader', Georgia, serif; font-size:var(--fs-lead); margin-bottom:8px}
.cmpl-drop span{display:block; color:var(--cmpl-muted); font-size:var(--fs-body); max-width:34ch; margin:0 auto}

.cmpl-advice{margin:12px 4px 0; font-size:var(--fs-body); min-height:1.2em}
.cmpl-advice.is-good{color:#4a7a52}
.cmpl-advice.is-ok{color:#9a7d3a}
.cmpl-advice.is-low{color:#b5432f}

.cmpl-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; font-size:var(--fs-label); color:var(--cmpl-muted)}
.cmpl-legend i{display:inline-block; width:22px; height:0; vertical-align:middle; margin-right:8px}
.cmpl-l-cut{border-top:var(--lijn-dikte) solid rgba(36,31,24,.6)}
.cmpl-l-safe{border-top:var(--lijn-dikte) dashed rgba(207,106,77,.9)}

.cmpl-panel{display:flex; flex-direction:column; gap:16px; min-width:0}
.cmpl-block{display:flex; flex-direction:column; gap:12px; padding-bottom:16px; border-bottom:var(--lijn-dikte) solid var(--cmpl-line)}
.cmpl-block:last-child{border-bottom:none; padding-bottom:0}

.cmpl-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	border:none; border-radius:var(--r-rond); padding:12px 24px; cursor:pointer;
	font:700 var(--fs-body) 'Figtree', system-ui, sans-serif;
	background:linear-gradient(160deg,var(--kleur-rood),var(--kleur-rood)); color:var(--kleur-grond);
	box-shadow:none; transition:transform .15s;
}
@media (hover: hover) and (pointer: fine){.cmpl-btn:hover{transform:translateY(-2px)}}
.cmpl-btn--ghost{background:transparent; color:var(--cmpl-ink); border:var(--lijn-dikte) solid var(--kleur-lijn); box-shadow:none}
.cmpl-btn--link{background:none; box-shadow:none; color:var(--cmpl-muted); text-decoration:underline; text-underline-offset:3px; padding:4px 0; font-weight:600; align-self:flex-start}

.cmpl-range{display:flex; flex-direction:column; gap:8px; font-size:var(--fs-body); color:var(--cmpl-muted)}
.cmpl-range input,.cmpl-field input[type=range]{width:100%}

.cmpl-text-controls{display:flex; flex-direction:column; gap:12px}
.cmpl-text-controls textarea{
	width:100%; border:var(--lijn-dikte) solid var(--cmpl-line); border-radius:var(--r-vlak); padding:12px 12px;
	font:500 var(--fs-body) 'Figtree', system-ui, sans-serif; color:var(--cmpl-ink); resize:vertical;
}
.cmpl-field{display:flex; flex-direction:column; gap:4px; font-size:var(--fs-body); color:var(--cmpl-muted)}
.cmpl-field select{border:var(--lijn-dikte) solid var(--cmpl-line); border-radius:var(--r-vlak); padding:8px 12px; font:500 var(--fs-body) 'Figtree', system-ui, sans-serif; color:var(--cmpl-ink); background:var(--cmpl-white)}
.cmpl-field-row{display:flex; gap:16px}
.cmpl-field-row .cmpl-field{flex:1}
.cmpl-field input[type=color]{width:100%; height:34px; border:var(--lijn-dikte) solid var(--cmpl-line); border-radius:var(--r-vlak); background:none; padding:4px}
.cmpl-toggles{display:flex; gap:16px; font-size:var(--fs-body); flex-wrap:wrap; align-items:center}
.cmpl-toggles label{display:inline-flex; align-items:center; gap:8px}
/* Zonder deze regel maakt display:flex het [hidden] attribuut ongedaan en blijft
   de kleurkiezer staan terwijl de contour uit staat. */
.cmpl-toggles label[hidden]{display:none}
.cmpl-outline-kleur input[type=color]{width:34px; height:22px; padding:0; border:var(--lijn-dikte) solid var(--cmpl-line,#e2ddd2); border-radius:0; background:none}

/* De drie stappen. Genummerd via een counter, zodat de cijfers niet in de HTML
   staan en een schermlezer de lijst als lijst voorleest. */
.cmpl-stappen{
	list-style:none; counter-reset:cmpl-stap; margin:0 0 4px; padding:0;
	display:flex; flex-wrap:wrap; gap:8px 16px; font-size:var(--fs-body);
}
.cmpl-stappen li{
	counter-increment:cmpl-stap; display:inline-flex; align-items:center; gap:8px;
	color:var(--cmpl-muted,#7c7466);
}
.cmpl-stappen li::before{
	content:counter(cmpl-stap);
	display:inline-flex; align-items:center; justify-content:center;
	width:20px; height:20px; border-radius:50%;
	border:var(--lijn-dikte) solid currentColor; font-size:var(--fs-label); font-weight:700;
}
.cmpl-stappen li.is-nu{color:var(--cmpl-ink,var(--kleur-ink)); font-weight:600}
.cmpl-stappen li.is-nu::before{background:var(--cmpl-ink,var(--kleur-ink)); border-color:var(--cmpl-ink,var(--kleur-ink)); color:var(--kleur-grond)}
.cmpl-stappen li.is-klaar{color:#4a7a52}
.cmpl-stappen li.is-klaar::before{content:"\2713"; border-color:#4a7a52}

.cmpl-btn[disabled]{opacity:.45; cursor:not-allowed}

.cmpl-saved{font-size:var(--fs-body); color:#4a7a52}
.cmpl-saved.is-error{color:#b5432f}
.cmpl-hint{font-size:var(--fs-label); color:var(--cmpl-muted)}

.cmpl-result{display:flex; flex-direction:column; gap:8px}
.cmpl-result-title{margin:0; font-size:var(--fs-body); color:var(--cmpl-muted)}
.cmpl-result img{width:100%; height:auto; border-radius:var(--r-vlak); border:var(--lijn-dikte) solid var(--cmpl-line)}

@media (max-width:720px){
	.cmpl-editor{grid-template-columns:1fr}
}

/* ---------- Achtergrondkiezer ----------
   Stalen op een rij, niet in een uitklaplijst: je kiest hier op kleur en die
   moet je naast elkaar kunnen zien. De namen staan eronder zodat de keuze ook
   zonder kleurwaarneming te maken is, en de actieve staat is niet alleen kleur
   maar ook een ring plus een vinkje in het label.                             */
.cmpl-block__kop{font-size:var(--fs-body); font-weight:600; color:var(--cmpl-ink)}

.cmpl-acht{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(52px, 1fr));
  gap:12px;
}

.cmpl-acht__knop{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:0; border:0; background:none; cursor:pointer;
  font:inherit; color:var(--cmpl-muted);
  border-radius:var(--r-vlak);
}

.cmpl-acht__vlak{
  display:block; width:100%; aspect-ratio:1; border-radius:var(--r-vlak);
  border:var(--lijn-dikte) solid var(--cmpl-line);
  background-size:cover; background-position:center;
  box-shadow:none;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* "Geen achtergrond": een diagonale streep, de gangbare manier om leeg te
   tonen. Een wit vlakje zou niet te onderscheiden zijn van de kleur wit. */
.cmpl-acht__vlak--geen{
  background-image:linear-gradient(
    to bottom right,
    var(--kleur-grond) calc(50% - 1px), var(--cmpl-line) calc(50% - 1px),
    var(--cmpl-line) calc(50% + 1px), var(--kleur-grond) calc(50% + 1px)
  );
}

.cmpl-acht__label{
  font-size:var(--fs-label); line-height:1.2; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}

@media (hover: hover) and (pointer: fine){.cmpl-acht__knop:hover .cmpl-acht__vlak{transform:translateY(-1px)}}

.cmpl-acht__knop.is-actief .cmpl-acht__vlak{
  border-color:var(--cmpl-terra, #b5432f);
  box-shadow:none;
}
.cmpl-acht__knop.is-actief .cmpl-acht__label{
  color:var(--cmpl-ink); font-weight:600;
}

.cmpl-acht__knop:focus-visible{outline:2px solid var(--cmpl-terra, #b5432f); outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .cmpl-acht__vlak{transition:none}
  @media (hover: hover) and (pointer: fine){.cmpl-acht__knop:hover .cmpl-acht__vlak{transform:none}}
}