/* MonsterForm — het formulier zoals de invuller het ziet.
   Gedeeld door het canvas en het voorbeeld in de bouwer en (vanaf fase 3) de publieke formulierpagina.
   Alles staat onder .mff, zodat het beheer en het formulier elkaar niet raken.
   Per formulier instelbaar via CSS-variabelen op een voorouder (gezet met CSSOM, de CSP staat geen inline styles toe):
   --mff-accent, --mff-on-accent, --mff-radius. Thema, ruimte en lettertype via data-attributen op .mff. */

/* Standaardwaarden op :root, zodat een voorouder (de bouwer, de publieke pagina) ze per formulier kan overschrijven. */
:root {
  --mff-accent: #79543F;
  --mff-on-accent: #FFFFFF;
  --mff-radius: 10px;
}

.mff {
  --mff-bg: #FFFFFF;
  --mff-ink: #2B211B;
  --mff-muted: #6B5D52;
  --mff-line: #DCD2C7;
  --mff-line-soft: #EEE7E0;
  --mff-field: #FFFFFF;
  --mff-field-hover: #FBF8F5;
  --mff-danger: #B3261E;
  --mff-danger-soft: #FBEAE8;
  --mff-accent-ink: var(--mff-accent);
  --mff-accent-soft: color-mix(in oklab, var(--mff-accent) 10%, var(--mff-bg));
  --mff-ring: color-mix(in oklab, var(--mff-accent) 35%, transparent);

  --mff-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mff-title-font: var(--mff-font);
  --mff-gap: 1.35rem;
  --mff-pad-y: .7rem;

  container-type: inline-size;
  color-scheme: light;
  color: var(--mff-ink);
  font-family: var(--mff-font);
  font-size: 1rem;
  line-height: 1.5;
  text-align: start;
}

/* Donker: vast gekozen, of automatisch. In het beheer volgt "automatisch" het thema van het beheer;
   op de publieke pagina (zonder data-bs-theme) het apparaat. */
.mff[data-theme="dark"],
[data-bs-theme="dark"] .mff[data-theme="auto"] {
  --mff-bg: #1F1E1C;
  --mff-ink: #EFE9E3;
  --mff-muted: #B3A79C;
  --mff-line: #4A4541;
  --mff-line-soft: #34312E;
  --mff-field: #282624;
  --mff-field-hover: #2E2C29;
  --mff-danger: #F2A49C;
  --mff-danger-soft: #3B2422;
  --mff-accent-ink: color-mix(in oklab, var(--mff-accent) 55%, #FFFFFF);
  --mff-accent-soft: color-mix(in oklab, var(--mff-accent) 22%, var(--mff-bg));
  --mff-ring: color-mix(in oklab, var(--mff-accent-ink) 45%, transparent);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme]) .mff[data-theme="auto"] {
    --mff-bg: #1F1E1C;
    --mff-ink: #EFE9E3;
    --mff-muted: #B3A79C;
    --mff-line: #4A4541;
    --mff-line-soft: #34312E;
    --mff-field: #282624;
    --mff-field-hover: #2E2C29;
    --mff-danger: #F2A49C;
    --mff-danger-soft: #3B2422;
    --mff-accent-ink: color-mix(in oklab, var(--mff-accent) 55%, #FFFFFF);
    --mff-accent-soft: color-mix(in oklab, var(--mff-accent) 22%, var(--mff-bg));
    --mff-ring: color-mix(in oklab, var(--mff-accent-ink) 45%, transparent);
    color-scheme: dark;
  }
}
.mff[data-theme="light"] { color-scheme: light; }

/* Eigen achtergrond- en tekstkleur (data-theme is dan licht of donker naar de achtergrond). Lijnen en velden worden
   uit die twee kleuren gemengd, zodat alles bij elkaar past. */
.mff[data-colors="custom"] {
  --mff-bg: var(--mff-custom-bg);
  --mff-ink: var(--mff-custom-ink);
  --mff-muted: color-mix(in oklab, var(--mff-custom-ink) 74%, var(--mff-custom-bg));
  --mff-line: color-mix(in oklab, var(--mff-custom-ink) 26%, var(--mff-custom-bg));
  --mff-line-soft: color-mix(in oklab, var(--mff-custom-ink) 12%, var(--mff-custom-bg));
  --mff-field: color-mix(in oklab, var(--mff-custom-ink) 4%, var(--mff-custom-bg));
  --mff-field-hover: color-mix(in oklab, var(--mff-custom-ink) 7%, var(--mff-custom-bg));
}

.mff[data-density="compact"] { --mff-gap: .9rem; --mff-pad-y: .5rem; }
.mff[data-font="sans"] { --mff-font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; }
.mff[data-font="grotesque"] { --mff-font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; --mff-title-font: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; }
.mff[data-font="serif"] { --mff-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --mff-title-font: var(--mff-font); }

.mff *, .mff *::before, .mff *::after { box-sizing: border-box; }
.mff [hidden] { display: none !important; }

/* ---------- Kop ---------- */
.mff-header { margin-bottom: calc(var(--mff-gap) * 1.4); }
.mff-title {
  font-family: var(--mff-title-font);
  font-size: clamp(1.5rem, 1.1rem + 2cqi, 2.1rem);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.mff-intro { color: var(--mff-muted); margin: .65rem 0 0; max-width: 62ch; white-space: pre-line; }
.mff-page-title { font-family: var(--mff-title-font); font-size: 1.2rem; font-weight: 650; margin: 0 0 var(--mff-gap); }

.mff-progress { display: flex; align-items: center; gap: .85rem; color: var(--mff-muted); font-size: .875rem; margin-bottom: var(--mff-gap); }
.mff-progress progress { flex: 1; height: .375rem; appearance: none; border: 0; border-radius: 99px; background: var(--mff-line-soft); overflow: hidden; }
.mff-progress progress::-webkit-progress-bar { background: var(--mff-line-soft); }
.mff-progress progress::-webkit-progress-value { background: var(--mff-accent-ink); border-radius: 99px; }
.mff-progress progress::-moz-progress-bar { background: var(--mff-accent-ink); border-radius: 99px; }

/* ---------- Raster ---------- */
.mff-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mff-gap) 1rem; align-items: start; }
.mff-w-full { grid-column: span 6; }
.mff-w-half { grid-column: span 3; }
.mff-w-third { grid-column: span 2; }
.mff-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mff-gap) 1.25rem; }
.mff-columns > .mff-grid > * { grid-column: span 6; }

@container (max-width: 34rem) {
  .mff-w-half, .mff-w-third { grid-column: span 6; }
  .mff-columns { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Velden ---------- */
.mff-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.mff-label { display: block; font-weight: 600; font-size: .9375rem; margin: 0 0 .4rem; padding: 0; }
.mff-req { color: var(--mff-accent-ink); font-weight: 600; }
.mff-help { color: var(--mff-muted); font-size: .875rem; margin: .4rem 0 0; }
.mff-error { color: var(--mff-danger); font-size: .875rem; font-weight: 500; margin: .4rem 0 0; display: flex; gap: .35rem; }
.mff-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-top: .1rem; border-radius: 50%; background: var(--mff-danger); color: var(--mff-bg); font-size: .75rem; font-weight: 700; }

.mff-input {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--mff-ink);
  background: var(--mff-field);
  border: 1px solid var(--mff-line);
  border-radius: var(--mff-radius);
  padding: var(--mff-pad-y) .85rem;
  min-height: 2.75rem;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mff-input::placeholder { color: color-mix(in oklab, var(--mff-muted) 75%, transparent); }
.mff-input:hover { background: var(--mff-field-hover); }
.mff-input:focus { outline: none; border-color: var(--mff-accent-ink); box-shadow: 0 0 0 3px var(--mff-ring); background: var(--mff-field); }
textarea.mff-input { resize: vertical; min-height: 6.5rem; }
.mff-select {
  appearance: none;
  padding-inline-end: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--mff-muted) 50%), linear-gradient(135deg, var(--mff-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - .8rem) 52%;
  background-size: .35rem .35rem;
  background-repeat: no-repeat;
}
.mff-invalid .mff-input { border-color: var(--mff-danger); }
.mff-invalid .mff-input:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--mff-danger) 30%, transparent); }

/* Keuzes: rustige rijen die als geheel klikbaar zijn. */
.mff-choices { display: grid; gap: .45rem; }
.mff-choice, .mff-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem .8rem;
  border: 1px solid var(--mff-line-soft);
  border-radius: var(--mff-radius);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.mff-check { border-color: transparent; padding-inline: 0; }
.mff-choice:hover { border-color: var(--mff-line); background: var(--mff-field-hover); }
.mff-choice:has(input:checked) { border-color: var(--mff-accent-ink); background: var(--mff-accent-soft); }
.mff-choice input, .mff-check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: .17rem 0 0;
  accent-color: var(--mff-accent-ink);
}
.mff-choice input:focus-visible, .mff-check input:focus-visible { outline: 3px solid var(--mff-ring); outline-offset: 2px; }
.mff-check span { font-weight: 500; }
.mff-terms-link { display: inline-block; margin: .1rem 0 0 1.85rem; color: var(--mff-accent-ink); font-size: .9rem; }
.mff-invalid .mff-choice { border-color: color-mix(in oklab, var(--mff-danger) 45%, var(--mff-line-soft)); }

/* Ja/nee als twee knoppen naast elkaar. */
.mff-segmented { display: inline-flex; border: 1px solid var(--mff-line); border-radius: var(--mff-radius); padding: 3px; gap: 3px; background: var(--mff-field); }
.mff-segment { position: relative; }
.mff-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mff-segment span { display: block; min-width: 5rem; text-align: center; padding: .45rem 1rem; border-radius: calc(var(--mff-radius) - 3px); font-weight: 500; }
.mff-segment input:checked + span { background: var(--mff-accent); color: var(--mff-on-accent); }
.mff-segment input:focus-visible + span { outline: 3px solid var(--mff-ring); outline-offset: 1px; }

/* Sterren. */
.mff-rating { display: inline-flex; gap: .15rem; }
.mff-star { position: relative; color: var(--mff-line); cursor: pointer; padding: .1rem; line-height: 0; }
.mff-star input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mff-star .mf-icon { width: 2rem; height: 2rem; fill: none; stroke: currentColor; }
.mff-star.on { color: var(--mff-accent-ink); }
.mff-star.on .mf-icon { fill: currentColor; }
.mff-rating:hover .mff-star { color: var(--mff-accent-ink); }
.mff-rating:hover .mff-star .mf-icon { fill: currentColor; }
.mff-rating .mff-star:hover ~ .mff-star { color: var(--mff-line); }
.mff-rating .mff-star:hover ~ .mff-star .mf-icon { fill: none; }
.mff-star:has(input:focus-visible) { outline: 3px solid var(--mff-ring); border-radius: 6px; }

/* Schaal: genummerde vakjes. */
.mff-scale-options { display: flex; flex-wrap: wrap; gap: .35rem; }
.mff-scale-option { position: relative; flex: 1 1 2.5rem; max-width: 3.5rem; }
.mff-scale-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mff-scale-option span {
  display: grid;
  place-items: center;
  height: 2.6rem;
  border: 1px solid var(--mff-line);
  border-radius: var(--mff-radius);
  background: var(--mff-field);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mff-scale-option:hover span { background: var(--mff-field-hover); }
.mff-scale-option input:checked + span { background: var(--mff-accent); border-color: var(--mff-accent); color: var(--mff-on-accent); }
.mff-scale-option input:focus-visible + span { outline: 3px solid var(--mff-ring); outline-offset: 1px; }
.mff-scale-labels { display: flex; justify-content: space-between; gap: 1rem; color: var(--mff-muted); font-size: .8125rem; margin-top: .4rem; }

/* Bestand. */
.mff-file { display: grid; gap: .4rem; padding: 1rem; border: 1.5px dashed var(--mff-line); border-radius: var(--mff-radius); background: var(--mff-field); }
.mff-file-input { font: inherit; font-size: .9rem; color: var(--mff-muted); max-width: 100%; }
.mff-file-input::file-selector-button {
  font: inherit;
  font-weight: 600;
  margin-inline-end: .85rem;
  padding: .45rem .9rem;
  border: 1px solid var(--mff-line);
  border-radius: calc(var(--mff-radius) - 2px);
  background: var(--mff-bg);
  color: var(--mff-ink);
  cursor: pointer;
}
.mff-file-hint { color: var(--mff-muted); font-size: .8125rem; }

/* ---------- Opmaak ---------- */
.mff-heading { font-family: var(--mff-title-font); font-size: 1.3rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; margin: .35rem 0 0; }
.mff-heading-3 { font-size: 1.075rem; }
.mff-paragraph { margin: 0; color: var(--mff-ink); max-width: 68ch; }
.mff-divider { border: 0; border-top: 1px solid var(--mff-line); margin: .25rem 0; opacity: 1; }
.mff-spacer-small { height: .25rem; }
.mff-spacer-medium { height: 1.25rem; }
.mff-spacer-large { height: 3rem; }

.mff-section { padding-top: .25rem; }
.mff-section-title { font-family: var(--mff-title-font); font-size: 1.2rem; font-weight: 650; margin: 0 0 .35rem; }
.mff-section-intro { color: var(--mff-muted); margin: 0 0 var(--mff-gap); max-width: 62ch; }
.mff-section > .mff-section-title:last-child, .mff-section-title + .mff-grid { margin-top: var(--mff-gap); }

.mff-hidden-note { display: flex; align-items: center; gap: .55rem; color: var(--mff-muted); font-size: .875rem; padding: .55rem .8rem; border: 1px dashed var(--mff-line); border-radius: var(--mff-radius); }
.mff-hidden-note .mf-icon { width: 1rem; height: 1rem; flex: none; }

/* ---------- Melding boven het formulier ---------- */
.mff-notice {
  margin: 0 0 var(--mff-gap);
  padding: .75rem 1rem;
  border-radius: var(--mff-radius);
  background: var(--mff-danger-soft);
  color: var(--mff-danger);
  font-weight: 500;
}
.mff-page-title:focus { outline: none; }

/* ---------- Knoppen ---------- */
.mff-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: calc(var(--mff-gap) * 1.5); }
.mff-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .7rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: var(--mff-on-accent);
  background: var(--mff-accent);
  border: 1px solid var(--mff-accent);
  border-radius: var(--mff-radius);
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.mff-button:hover { filter: brightness(1.08); }
.mff-button:active { transform: translateY(1px); }
.mff-button:focus-visible { outline: 3px solid var(--mff-ring); outline-offset: 2px; }
.mff-button-quiet { background: transparent; color: var(--mff-ink); border-color: var(--mff-line); }
.mff-button-quiet:hover { background: var(--mff-field-hover); filter: none; }
.mff-button[aria-busy="true"] { cursor: progress; opacity: .75; }
.mff-button:disabled { cursor: not-allowed; }

/* ---------- Na versturen ---------- */
.mff-done { text-align: center; padding: 2.5rem 1rem; display: grid; justify-items: center; gap: 1rem; }
.mff-done-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--mff-accent-soft); color: var(--mff-accent-ink); }
.mff-done-mark .mf-icon { width: 1.75rem; height: 1.75rem; }
.mff-done p { margin: 0; max-width: 46ch; }
.mff-done-text { font-size: 1.125rem; white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
  .mff *, .mff *::before, .mff *::after { transition: none !important; }
}

/* Logo boven de titel (publiek, voorbeeld en canvas) */
.mff-logo { display: block; max-height: 3.5rem; max-width: min(14rem, 100%); width: auto; height: auto; object-fit: contain; margin: 0 0 1.5rem; }