/* UTM-builder (/utm-builder). Bouwt voort op check.css (tokens, knoppen, secties, FAQ, CTA). */

/* Hero: korter dan bij de checks, de builder staat er direct onder */
.u-hero .grid{align-items:start}
.u-hero h1{max-width:15ch}
.u-hero .scanhint{margin-top:22px}
.u-hero .knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

/* Veelgemaakte fouten, klikbaar: vullen de builder in */
.fouten{background:var(--night-2);border:1px solid var(--night-line);border-radius:6px;padding:20px 20px 12px;color:#F1EFE4;position:relative;z-index:1;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.fouten .tag{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--night-muted)}
.fouten ul{list-style:none;margin:12px 0 0;padding:0;display:grid}
.fouten button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--night-line)}
.fouten button:hover .wat,.fouten button:focus-visible .wat{color:var(--marker)}
.fouten button:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.fouten .wat{font:500 .98rem/1.3 var(--f-body);font-variant-numeric:tabular-nums;color:var(--night-text);word-break:break-word}
.fouten .wat code{font:inherit}
.fouten em{font:500 .76rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;text-align:right}
.fouten .ok{color:#6FCF97}.fouten .nee{color:#FF8A5B}.fouten .half{color:#F2C14E}
.fouten small{grid-column:1/-1;font-size:.84rem;color:var(--night-muted)}
.fouten .klik{display:block;margin-top:10px;font-size:.82rem;color:var(--night-muted)}

/* De builder */
#bouwer{border-top:0;padding-block:clamp(40px,6vw,72px)}
.bouwer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.bouwer{grid-template-columns:1fr}}

.u-form{display:grid;gap:18px}
.u-form .veld{display:grid;gap:6px;min-width:0}
.u-form label,.u-form legend,.u-form .lbl{font:500 .78rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.u-form label code{font:500 .78rem/1 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted);margin-left:.3em}
.u-form input[type=text],.u-form select{font:500 1.02rem/1.3 var(--f-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:3px;padding:.75em .85em;width:100%;min-width:0}
.u-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.u-form input:focus,.u-form select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--marker) 70%,transparent)}
.u-form .rij2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:460px){.u-form .rij2{grid-template-columns:1fr}}
.u-form .tip{font-size:.92rem;color:var(--ink);background:color-mix(in srgb,var(--marker) 22%,var(--paper));padding:10px 12px;border-radius:3px}
.u-form .voorbeeldnoot{font-size:.9rem;color:var(--muted)}
.u-form details{border-top:1px solid var(--line);padding-top:14px}
.u-form summary{cursor:pointer;font:700 1.05rem/1.2 var(--f-display);font-stretch:88%;list-style:none;display:flex;justify-content:space-between}
.u-form summary::-webkit-details-marker{display:none}
.u-form summary::after{content:"+";font:300 1.4rem/1 var(--f-body);color:var(--muted)}
.u-form details[open] summary::after{content:"–"}
.u-form details .binnen{display:grid;gap:14px;margin-top:14px}

/* Platformkeuze */
.platform{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.platform legend{width:100%;margin-bottom:6px}
.platform label{position:relative;cursor:pointer}
.platform input{position:absolute;opacity:0;pointer-events:none}
.platform span{display:inline-block;padding:.5em .85em;border:1.5px solid var(--line);border-radius:3px;font:500 .95rem/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink)}
.platform input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.platform input:focus-visible+span{outline:3px solid var(--marker);outline-offset:2px}

/* Uitslag */
.u-uitslag{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);display:grid;gap:14px;min-width:0}
#utm-uitslag{display:grid;gap:14px;min-width:0}
@media (max-width:900px){.u-uitslag{position:static}}
.u-link{background:var(--night);color:#F1EFE4;border-radius:6px;padding:20px 20px 18px;display:grid;gap:12px;position:relative;overflow:hidden}
.u-link::after{content:"";position:absolute;right:-18px;bottom:0;width:90px;aspect-ratio:310/269;background:var(--tri-geel) no-repeat bottom/100% 100%;opacity:.85;pointer-events:none}
.u-link .label{color:var(--night-muted)}
.u-link code{display:block;font:500 .98rem/1.55 var(--f-body);overflow-wrap:break-word;word-break:normal;color:var(--night-text);position:relative;z-index:1;padding-right:40px}
.u-link code b{font-weight:700;color:#fff}
.u-link .p-utm b{color:var(--marker)}
.u-link .p-at b{color:#9FD3FF}
.u-link .p-sep{color:var(--night-muted);padding:0 .1em}
.u-acties{display:flex;flex-wrap:wrap;gap:12px;align-items:center;position:relative;z-index:1}
.u-status{font-size:.9rem;color:var(--marker)}
.u-oordeel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.u-tegel{border:1.5px solid var(--line);border-radius:4px;padding:16px;display:grid;gap:6px;align-content:start;background:var(--paper)}
.u-tegel b{font:400 clamp(1.5rem,2.6vw,1.9rem)/1.05 var(--f-title)}
.u-tegel p{font-size:.94rem;color:var(--muted)}
.u-tegel p.klein{font-size:.86rem}
.u-tegel.goed{border-color:color-mix(in srgb,var(--goed) 55%,var(--line))}
.u-tegel.goed b::after{content:" ✓";color:var(--goed);font-family:var(--f-body);font-weight:700;font-size:.7em}
.u-tegel.matig{border-color:color-mix(in srgb,var(--matig) 60%,var(--line));background:var(--matig-bg)}
.u-tegel.fout{border-color:var(--fout);background:var(--fout-bg)}
.u-tegel.fout b{color:var(--fout)}
.u-punten{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.u-punten li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:14px 16px;background:var(--surface);border-radius:4px}
.u-punten b{font-weight:500}
.u-punten p{font-size:.93rem;color:var(--muted)}
.chip.info{background:var(--ink);color:var(--paper)}
.u-leeg{border:1.5px dashed var(--line);border-radius:6px;padding:24px;display:grid;gap:6px}
.u-leeg b{font:400 1.6rem/1 var(--f-title)}
.u-leeg p{color:var(--muted)}

/* Platform-kolom: Piano-blok alleen tonen als het meedoet */
.legenda{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.86rem;color:var(--muted)}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.legenda .l-utm{background:var(--marker);box-shadow:inset 0 0 0 1px var(--ink)}
.legenda .l-at{background:#9FD3FF;box-shadow:inset 0 0 0 1px var(--ink)}
body[data-platform="ga4"] .legenda .at,body[data-platform="piano"] .legenda .utm{display:none}

/* Pro-blok: wat komt eraan */
.cta select{font:inherit;color:#17160F;background:#fff;border:1.5px solid #fff;border-radius:3px;padding:.75em .85em;width:100%}
.cta select:focus{outline:none;border-color:var(--marker);box-shadow:0 0 0 3px rgba(251,255,74,.35)}
.cta .p-vink input[type=checkbox]{width:auto}

/* Pro-pagina (/utm-builder-pro) */
.p-hero .grid{align-items:start}
.p-hero h1{max-width:17ch}
.p-hero .knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.p-hero .scanhint{margin-top:22px}
.p-mock{background:var(--night-2);border:1px solid var(--night-line);border-radius:6px;padding:20px 20px 14px;color:#F1EFE4;position:relative;z-index:1;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.p-mock-kop{display:grid;gap:6px}
.p-mock-kop .tag{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--night-muted)}
.p-mock-kop b{font:700 1.25rem/1.1 var(--f-display);font-stretch:85%;color:#fff}
.p-mock ul{list-style:none;margin:12px 0 0;padding:0;display:grid}
.p-mock li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:12px 0;border-top:1px solid var(--night-line)}
.p-mock .wat{font:500 .95rem/1.3 var(--f-body);color:var(--night-text);word-break:break-word}
.p-mock .wat code{font:inherit}
.p-mock em{font:500 .76rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;text-align:right}
.p-mock .ok{color:#6FCF97}.p-mock .nee{color:#FF8A5B}
.p-mock small{grid-column:1/-1;font-size:.84rem;color:var(--night-muted)}
.p-mock-voet{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--night-line);padding-top:12px;font-size:.84rem;color:var(--night-muted)}
.p-mock-voet .exp{color:var(--marker);font-weight:500}
.p-cols2{border-top:1px solid var(--line)}
.p-afname{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.p-afname{grid-template-columns:1fr}}
.p-optie{border:1.5px solid var(--line);border-radius:6px;padding:clamp(20px,3vw,32px);display:grid;gap:12px;align-content:start;background:var(--paper)}
.p-optie.hl{border-color:var(--ink);box-shadow:inset 0 4px 0 var(--marker)}
.p-optie h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.p-optie p{color:var(--muted)}
.p-link{font-weight:500;color:var(--ink);text-underline-offset:3px}
.p-vink{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.p-vink legend{width:100%;font-size:.88rem;color:var(--night-muted);margin-bottom:6px}
.p-vink legend span{opacity:.8}
.cta .p-vink label{display:flex;align-items:center;gap:8px;color:#F1EFE4;font-size:.95rem;cursor:pointer}
.p-vink input{width:18px;height:18px;accent-color:var(--marker);margin:0}