/* Custom Builds explorer (src/build-explorer.mjs, behaviour in build-explorer.js): five questions on the left, a small
   3D computer on a light stage on the right that turns and changes with each one. Colours come from tokens.css; the
   aluminium greys are mixed from the ink and the canvas. Every question always shows its answer and only the chosen one
   is highlighted, so no row changes height; the stage takes the list's height. Nothing moves while the example plays. */
.bx {
  --bx-m1: color-mix(in srgb, var(--ink) 34%, var(--canvas)); --bx-m2: color-mix(in srgb, var(--ink) 26%, var(--canvas));
  --bx-m3: color-mix(in srgb, var(--ink) 21%, var(--canvas)); --bx-m4: color-mix(in srgb, var(--ink) 17%, var(--canvas));
  --bx-t2: color-mix(in srgb, var(--ink) 9%, var(--canvas)); --bx-t3: color-mix(in srgb, var(--ink) 17%, var(--canvas));
  --bx-shade: color-mix(in srgb, var(--ink) 38%, transparent);
  position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: stretch; gap: 16px 32px;
}
.bx > .sim-foot { grid-column: 1 / -1; }

/* The questions: numbered cards like the step lists, each with its answer; the chosen one is lifted and carries the
   progress line. */
.bx-list { display: grid; align-content: center; gap: 8px; }
.bx-pill {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 14px; width: 100%;
  padding: 14px 18px 20px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-tile); background: var(--panel); color: var(--ink);
  text-align: left; cursor: pointer; transition: background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.bx-pill:hover { border-color: var(--line); background: var(--canvas); }
.bx-pill:focus-visible { outline: none; box-shadow: var(--focus); }
.bx-num {
  display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-solid);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background var(--base), border-color var(--base), color var(--base);
}
.bx-pill-copy { display: grid; gap: 2px; min-width: 0; padding-top: 5px; }
.bx-label { font-size: 16px; font-weight: 500; line-height: 1.35; }
.bx-text { display: block; color: var(--ink-muted); font-size: 14.5px; line-height: 1.45; text-wrap: balance; }
.bx-pill:is([aria-expanded="true"], [aria-pressed="true"]) { border-color: var(--line); background: var(--canvas); box-shadow: var(--shadow-tab); }
.bx-pill:is([aria-expanded="true"], [aria-pressed="true"]) .bx-num { border-color: var(--accent); background: var(--accent); color: var(--on-ink); }
.bx-bar { position: absolute; left: 60px; right: 18px; bottom: 8px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line-soft); opacity: 0; transition: opacity var(--base); }
.bx-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.bx.is-auto :is([aria-expanded="true"], [aria-pressed="true"]) .bx-bar { opacity: 1; }
.bx.is-auto :is([aria-expanded="true"], [aria-pressed="true"]) .bx-bar i { animation: bx-bar var(--bx-step, 4600ms) linear forwards paused; }
.bx.is-auto.is-running :is([aria-expanded="true"], [aria-pressed="true"]) .bx-bar i { animation-play-state: running; }
@keyframes bx-bar { to { transform: scaleX(1); } }

/* Stage */
.bx-stage {
  position: relative; min-height: 500px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r-card);
  background: radial-gradient(ellipse at 50% 58%, var(--canvas) 0%, var(--panel-solid) 72%);
}
.bx-scene { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1500px; animation: bx-float 5s ease-in-out infinite; }
.bx-mini { --rx: 58deg; --rz: -38deg; --s: 1; --ty: 0px; position: relative; width: 260px; height: 260px; transform-style: preserve-3d; transform: translateY(var(--ty)) rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--s)); transition: transform 1s cubic-bezier(.65, 0, .2, 1); }
.bx[data-state="0"] .bx-mini { --rx: 58deg; --rz: -38deg; --s: .9; --ty: -10px; }
.bx[data-state="1"] .bx-mini { --rx: 54deg; --rz: -24deg; --s: .72; --ty: 10px; }
.bx[data-state="2"] .bx-mini { --rx: 66deg; --rz: 152deg; --s: .56; --ty: -8px; }
.bx[data-state="3"] .bx-mini { --rx: 60deg; --rz: -38deg; --s: .56; --ty: 92px; }
.bx[data-state="4"] .bx-mini { --rx: 76deg; --rz: 0deg; --s: .82; --ty: 10px; }
.bx-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.bx-body > i { position: absolute; inset: 0; border-radius: 54px; background: var(--bx-m1); transform: translateZ(var(--z)); }
.bx-body > i:nth-child(n+3) { background: var(--bx-m2); }
.bx-body > i:nth-child(n+10) { background: var(--bx-m3); }
.bx-body > i:nth-child(n+18) { background: var(--bx-m4); }
.bx-top { position: absolute; inset: 0; border-radius: 54px; background: radial-gradient(120% 90% at 30% 20%, var(--canvas), var(--bx-t2) 55%, var(--bx-t3)); box-shadow: inset 0 0 0 1px var(--glass-border); transform: translateZ(100px); }
.bx-front { position: absolute; left: 54px; top: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 152px; height: 100px; padding: 0 10px; transform-origin: top; transform: rotateX(90deg) translateZ(.5px); }
.bx-front .bx-port { width: 5px; height: 14px; border-radius: 3px; background: var(--ink-800); }
.bx-jack { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-800); }
.bx-led { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--muted-on-ink); transition: background .4s, box-shadow .4s; }
.bx-back { position: absolute; left: 54px; top: -100px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 152px; height: 100px; transform-origin: bottom; transform: rotateX(-90deg) translateZ(.5px); }
.bx-back i { border-radius: 2px; background: var(--ink); }
.bx-power { width: 16px; height: 16px; border-radius: 50% !important; }
.bx-lan { width: 14px; height: 12px; }
.bx-hdmi { width: 16px; height: 7px; }
.bx-back .bx-port { width: 5px; height: 13px; border-radius: 3px; }
.bx-side { position: absolute; left: 0; top: 54px; width: 100px; height: calc(100% - 108px); transform-origin: left center; transform: rotateY(-90deg); background: linear-gradient(90deg, var(--bx-m1) 0 8%, var(--bx-m2) 8% 36%, var(--bx-m3) 36% 68%, var(--bx-m4) 68%); }
.bx-side--r { left: 100%; }
.bx-shadow { position: absolute; inset: 18px; border-radius: 60px; background: var(--bx-shade); filter: blur(22px); transform: translateZ(-2px); }

/* What each question adds to the stage */
.bx-lines, .bx-shield, .bx-card { position: absolute; opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.bx-lines { inset: 0; }
.bx-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Solid paths stay connected when the SVG scales non-uniformly; the overlay fades in as a whole. */
.bx .bx-lines path { fill: none; stroke: var(--accent); stroke-opacity: .45; stroke-width: 1.5; stroke-dasharray: none; vector-effect: non-scaling-stroke; }
.bx-app {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--canvas); box-shadow: var(--shadow-sim); font-size: 13px; opacity: 0; transform: translate(-50%, -50%) scale(.85);
  transition: opacity .4s ease calc(.35s + var(--i) * .07s), transform .5s cubic-bezier(.16, 1, .3, 1) calc(.35s + var(--i) * .07s);
}
.bx-app img { width: 22px; height: 22px; object-fit: contain; }
.bx-app b { font-weight: 500; }
.bx-app:nth-of-type(1) { left: 15%; top: 21%; } .bx-app:nth-of-type(2) { left: 85%; top: 21%; }
.bx-app:nth-of-type(3) { left: 11.7%; top: 53.8%; } .bx-app:nth-of-type(4) { left: 88.3%; top: 53.8%; }
.bx-app:nth-of-type(5) { left: 20%; top: 88.5%; } .bx-app:nth-of-type(6) { left: 80%; top: 88.5%; }
.bx[data-state="2"] .bx-lines { opacity: 1; }
.bx[data-state="2"] .bx-app { opacity: 1; transform: translate(-50%, -50%); }

.bx-shield { left: 50%; top: 50%; display: flex; align-items: flex-end; justify-content: center; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; transform: scale(.85); }
.bx-shield::before { content: ""; position: absolute; inset: 0; border: 2px dashed color-mix(in srgb, var(--green) 45%, transparent); border-radius: 50%; }
.bx-shield::after { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--green-soft), transparent); }
.bx-shield > span { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -15px; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 500; box-shadow: 0 0 0 4px var(--panel-solid); }
.bx[data-state="1"] .bx-shield { opacity: 1; transform: none; }
.bx[data-state="1"] .bx-shield::before { animation: bx-spin 30s linear infinite; }

.bx-card { transform: translateY(12px); }
.bx-approve { left: 50%; top: 24px; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); translate: -50% 0; }
.bx-order { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--canvas); box-shadow: var(--shadow-sim); }
.bx-order > .i { color: var(--hue); }
.bx-order > span { display: grid; min-width: 0; line-height: 1.3; }
.bx-order small { color: var(--ink-muted); font-size: 12.5px; }
.bx-order b { font-size: 14.5px; font-weight: 500; }
.bx-approve .sim-crew { width: 100%; }
/* While shown, the card takes part in hit-testing: the pointer (site/sim-cursor.js) only presses what lies on top. */
.bx[data-state="3"] .bx-approve { opacity: 1; transform: none; pointer-events: auto; }
.bx-status { right: 24px; top: 24px; display: grid; gap: 6px; min-width: 220px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); box-shadow: var(--shadow-sim); }
.bx-status b { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 15px; font-weight: 500; }
.bx-status b i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: bx-pulse 2s infinite; }
.bx-status small { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 13px; }
.bx-status small .i { color: var(--green); }
.bx[data-state="4"] .bx-status { opacity: 1; transform: none; }
.bx[data-state="4"] .bx-led { background: var(--green-on-ink); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--green-on-ink) 70%, transparent); }

@keyframes bx-float { 50% { transform: translateY(-8px); } }
@keyframes bx-spin { to { rotate: 360deg; } }
@keyframes bx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } }

/* Intro: the computer rises on a hand, then the hand lets go and it turns to the first pose. The stage is as tall as
   the questions beside it, so the hand rises from the stage's bottom edge and the computer rests on its fingertips at
   whatever height the stage has (cqh: the stage's own height; the hand is 272px tall at 340px wide). */
.bx-stage { container-type: size; }
.bx-hand { display: none; }
.bx[data-intro] .bx-hand { position: absolute; left: 50%; bottom: -52px; display: block; width: 340px; height: auto; margin-left: -170px; pointer-events: none; transition: translate .9s cubic-bezier(.65, 0, .35, 1), opacity .6s ease .25s; }
.bx[data-intro] .bx-scene { transition: translate 1.3s cubic-bezier(.16, 1, .3, 1); }
.bx[data-intro="pending"] .bx-scene { translate: 0 78%; }
.bx[data-intro="pending"] .bx-mini, .bx[data-intro="hold"] .bx-mini { --rx: 74deg; --rz: 0deg; --s: .95; --ty: calc(50cqh - 220px); }
.bx[data-intro="release"] .bx-hand { translate: 0 70%; opacity: 0; }

@media (max-width: 1100px) { .bx { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px 24px; } }
/* Below 900px: the stage on top, the questions underneath. */
@media (max-width: 899px) {
  .bx { grid-template-columns: minmax(0, 1fr); }
  .bx-stage { order: -1; height: 400px; min-height: 0; }
  .bx-mini { width: 200px; height: 200px; }
  .bx-front, .bx-back { width: 92px; }
  .bx-shield { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
  .bx-app { padding: 5px; } .bx-app b { display: none; }
  .bx-status { right: 12px; top: 12px; min-width: 0; }
  .bx-approve { top: 12px; width: calc(100% - 24px); }
  .bx[data-state="3"] .bx-mini { --s: .5; --ty: 118px; }
  .bx[data-intro] .bx-hand { bottom: -36px; width: 250px; margin-left: -125px; }
  .bx[data-intro="pending"] .bx-mini, .bx[data-intro="hold"] .bx-mini { --ty: calc(50cqh - 172px); }
}
@media (prefers-reduced-motion: reduce) { .bx *, .bx *::before, .bx *::after { animation: none !important; transition: none !important; } .bx-bar { display: none; } }

/* The four-step "Zo werkt het" variant (src/how-explorer.mjs): one customer question card that changes per step. */
.bx--how { display: block; max-width: none; margin-top: 8px; }
.bx--how .bx-panel { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: center; gap: 40px; padding: 40px; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--panel); }
.bx--how .bx-list { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 14px; }
.bx--how .bx-arrows { display: grid; gap: 8px; }
.bx--how .bx-arrows button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--canvas); color: var(--ink); }
.bx--how .bx-arrows svg path, .hx-stage svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bx--how ul { display: grid; gap: 8px; }
.bx--how .bx-pill { display: flex; padding: 10px 18px 10px 12px; border-radius: 22px; }
.bx--how .bx-pill[aria-expanded="true"] .bx-label, .bx--how .bx-pill:not([aria-expanded="true"]) .bx-text { display: none; }
.bx--how .bx-text b { color: var(--ink); font-weight: 600; }
.hx-stage { display: grid; place-items: center; height: 520px; border: 0; background: none; perspective: 1600px; }
.hx-card { position: relative; z-index: 2; width: 400px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--canvas); box-shadow: var(--shadow-sim); transform: rotateX(var(--hrx, 8deg)) rotateY(var(--hry, -10deg)) translateY(var(--hty, 0)); transition: transform .8s cubic-bezier(.65, 0, .2, 1); }
.bx--how[data-state="1"] .hx-card { --hrx: 4deg; --hry: 6deg; }
.bx--how[data-state="2"] .hx-card { --hrx: 0deg; --hry: 0deg; --hty: -6px; }
.bx--how[data-state="3"] .hx-card { --hrx: 6deg; --hry: -4deg; }
.hx-card header { display: flex; align-items: center; gap: 10px; }
.hx-card header b { font-size: 14px; font-weight: 500; }
.hx-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 600; }
.hx-status { position: relative; height: 24px; min-width: 150px; margin-left: auto; text-align: right; }
.hx-status em { position: absolute; right: 0; top: 0; padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.hx-status em[data-hx="0"] { background: var(--blue-soft); color: var(--blue); }
.hx-status em[data-hx="1"] { background: var(--ochre-soft); color: var(--ochre); }
.hx-status em[data-hx="2"] { background: var(--orange-soft); color: var(--orange); }
.hx-status em[data-hx="3"] { background: var(--green-soft); color: var(--green); }
.bx--how[data-state="0"] [data-hx="0"], .bx--how[data-state="1"] [data-hx="1"], .bx--how[data-state="2"] [data-hx="2"], .bx--how[data-state="3"] [data-hx="3"] { opacity: 1; transform: none; }
.hx-question { margin: 14px 0 0; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--wash); font-size: 15px; line-height: 1.45; }
.hx-sources, .hx-draft, .hx-approve, .hx-done { display: grid; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: max-height .6s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, margin .5s ease; }
.hx-sources { gap: 6px; }
.hx-sources li { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 13.5px; opacity: 0; transform: translateX(-14px); transition: transform .5s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i) * .12s), opacity .4s ease calc(.15s + var(--i) * .12s); }
.hx-sources svg path, .hx-done svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-draft { padding: 0 14px; border: 1px solid transparent; border-radius: 12px; background: var(--accent-soft); }
.hx-draft small { display: block; padding-top: 10px; color: var(--orange); font-size: 12px; font-weight: 600; }
.hx-draft p { margin: 4px 0 12px; font-size: 14px; line-height: 1.5; }
.hx-approve { grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; }
.hx-btn { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.hx-btn--primary { border-color: var(--ink); background: var(--ink); color: var(--on-ink); transition: background var(--base), border-color var(--base); }
.hx-btn--primary.is-clicked { border-color: var(--green); background: var(--green); }
.hx-team { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--ink-muted); font-size: 12.5px; }
.hx-team i { width: 22px; height: 22px; margin-right: -10px; border: 2px solid var(--canvas); border-radius: 50%; background: var(--green-soft); }
.hx-team i + i { margin-right: 2px; background: var(--accent-soft); }
.hx-done { grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; background: var(--green-soft); }
.hx-done > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: var(--on-ink); }
.hx-done b { display: block; padding-top: 10px; color: var(--green); font-size: 14px; }
.hx-done small { display: block; padding-bottom: 10px; color: var(--ink-muted); font-size: 12.5px; }
.bx--how:not([data-state="0"]) .hx-sources, .bx--how:not([data-state="0"]) .hx-draft { max-height: 160px; margin-top: 14px; opacity: 1; }
.bx--how:not([data-state="0"]) .hx-draft { border-color: var(--line-accent); }
.bx--how:not([data-state="0"]) .hx-sources li { opacity: 1; transform: none; }
.bx--how[data-state="2"] .hx-approve { max-height: 60px; margin-top: 14px; opacity: 1; }
.bx--how[data-state="3"] .hx-done { max-height: 90px; margin-top: 14px; opacity: 1; }
.bx--how[data-state="3"] .hx-draft { opacity: .55; }
.hx-channels { position: absolute; inset: 0; pointer-events: none; }
.hx-channels span { position: absolute; top: 50%; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--canvas); box-shadow: var(--shadow-sim); font-size: 13px; opacity: 0; transition: transform 1s cubic-bezier(.65, 0, .2, 1) calc(var(--i) * .15s), opacity .4s ease calc(var(--i) * .15s); }
.hx-channels span:nth-child(1) { left: 6%; transform: translateY(-120px); } .hx-channels span:nth-child(2) { left: 8%; transform: translateY(60px); } .hx-channels span:nth-child(3) { right: 6%; transform: translateY(-40px); }
.bx--how[data-state="0"] .hx-channels span { opacity: 1; animation: hx-into 3.2s cubic-bezier(.65, 0, .2, 1) calc(var(--i) * .5s) infinite; }
@keyframes hx-into { 0%, 15% { opacity: 0; } 30% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; left: 44%; right: auto; } }
@media (max-width: 899px) {
  .bx--how .bx-panel { grid-template-columns: minmax(0, 1fr); padding: 22px 16px; }
  .bx--how .bx-list { grid-template-columns: minmax(0, 1fr); } .bx--how .bx-arrows { display: none; }
  .hx-stage { height: auto; min-height: 420px; padding: 20px 0; }
  .hx-card { width: min(360px, 100%); transform: none; }
  .hx-channels { display: none; }
  .hx-status { min-width: 0; }
}