/* ==========================================================================
   GODS — configurator. Two columns: blueprint stage (sticky) + wizard.
   No 3D, no renders: an SVG outline of the machine with zones that fill.
   ========================================================================== */
.cfg{padding:20vh var(--pad) 14vh;max-width:1500px;margin:0 auto}
.cfg__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,72px);align-items:start}

/* ------------------------------ stage ---------------------------------- */
.cfg__stage{position:sticky;top:18vh;display:flex;flex-direction:column;gap:14px}
.stage__frame{position:relative;background:var(--cream);border-radius:12px;padding:clamp(14px,2vw,26px);overflow:hidden}
.stage__tag{display:flex;justify-content:space-between;gap:12px;color:rgba(25,24,24,.55);margin-bottom:6px}
.bp{width:100%;height:auto;display:block}
.bp[hidden],.bp.is-off{display:none}
.bp__line{fill:none;stroke:rgba(25,24,24,.55);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.bp__line circle{fill:none}
.bp__ground{stroke:rgba(25,24,24,.2);stroke-width:1.6;stroke-dasharray:5 7}
.bp__zones path{fill:rgba(185,33,37,0);transition:fill .45s cubic-bezier(.22,1,.36,1)}
.bp__zones path.on{fill:rgba(185,33,37,.34)}

/* Top-right: the only corner the vehicle outline never reaches, so the
   witness never covers a wheel or a panel the visitor just selected. */
.stage__swatch{position:absolute;right:clamp(14px,2vw,26px);top:clamp(44px,5vw,62px);width:clamp(96px,13vw,160px);border-radius:8px;overflow:hidden;background:#111;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.stage__swatch img{width:100%;aspect-ratio:4/3;object-fit:cover}
.stage__swatch figcaption{position:absolute;inset:auto 0 0 0;padding:7px 9px;color:#fff;font-size:9px;letter-spacing:.06em;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))}
.stage__legend{color:rgba(25,24,24,.5);display:flex;align-items:center;gap:9px}
.stage__legend .key{width:13px;height:13px;border-radius:3px;background:rgba(185,33,37,.34);flex:0 0 auto}

/* ------------------------------ wizard --------------------------------- */
.cfg__panel{display:flex;flex-direction:column}
.cfg__title{font-size:var(--h2);line-height:.9;letter-spacing:-.04em}
.cfg__sub{margin:18px 0 22px;max-width:44ch;font-size:var(--bodyl);line-height:1.3;color:rgba(25,24,24,.7)}
.cfg__prog{height:3px;background:rgba(0,0,0,.1);border-radius:3px;overflow:hidden;margin-bottom:36px}
.cfg__prog span{display:block;height:100%;width:20%;background:var(--red);transition:width .5s cubic-bezier(.22,1,.36,1)}

.step{display:none;flex-direction:column;gap:18px;animation:stepIn .5s cubic-bezier(.16,1,.35,1)}
.step.is-on{display:flex}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.step__n{color:var(--red)}
.step__q{font-size:var(--h2s);line-height:1;letter-spacing:-.03em;max-width:16ch}

.opts{display:grid;gap:10px;margin-top:6px}
.opts--2{grid-template-columns:1fr 1fr}
@media(max-width:520px){.opts--2{grid-template-columns:1fr}}
.opt{text-align:left;background:none;border:1px solid rgba(0,0,0,.18);border-radius:10px;padding:17px 19px;cursor:pointer;display:flex;flex-direction:column;gap:5px;font-family:inherit;color:inherit;transition:border-color .3s,background .3s}
.opt:hover{border-color:rgba(0,0,0,.4)}
.opt[aria-pressed="true"]{border-color:var(--red);background:rgba(185,33,37,.05)}
.opt__t{font-size:var(--bodyl);line-height:1.1;letter-spacing:-.02em}
.opt__d{font-family:var(--text);font-size:13px;line-height:1.45;color:rgba(25,24,24,.62)}
.opt:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.cfg__field{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.cfg__field span{font-family:var(--text);font-size:12px;font-weight:500;color:rgba(25,24,24,.6)}
.cfg__field input,.cfg__field textarea{font-family:var(--disp);font-size:var(--bodyl);letter-spacing:-.02em;color:var(--fg);background:none;border:0;border-bottom:1px solid rgba(0,0,0,.22);padding:9px 0;transition:border-color .3s}
.cfg__field input:focus,.cfg__field textarea:focus{outline:0;border-bottom-color:var(--red)}
.cfg__field textarea{resize:vertical}

.sw{margin-top:6px}
.sw__t{color:rgba(25,24,24,.55);margin-bottom:10px}
.sw__row{display:flex;gap:10px;flex-wrap:wrap}
.sw__b{width:92px;border:1px solid rgba(0,0,0,.18);border-radius:10px;overflow:hidden;background:none;cursor:pointer;padding:0;font-family:var(--text);transition:border-color .3s}
.sw__b[aria-pressed="true"]{border-color:var(--red)}
.sw__b img{width:100%;aspect-ratio:1;object-fit:cover}
.sw__b span{display:block;padding:7px 6px;font-size:10px;letter-spacing:.04em;color:rgba(25,24,24,.7)}

.cfg__nav{display:flex;gap:12px;margin:34px 0 30px}
.cfg__nav .btn[disabled]{opacity:.35;pointer-events:none}

/* ------------------------------ sheet ---------------------------------- */
.sheet--cfg{background:#191818;color:#fff;border-radius:12px;padding:clamp(20px,2.4vw,30px)}
.sheet--cfg dl{display:flex;flex-direction:column}
.sheet--cfg dl>div{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.sheet--cfg dt{font-family:var(--text);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.sheet--cfg dd{font-size:15px;color:rgba(255,255,255,.4);transition:color .3s}
.sheet--cfg dd.on{color:#fff}
.sheet__note{margin-top:16px;font-family:var(--text);font-size:12px;color:rgba(255,255,255,.6)}
.sheet__note span{color:#fff}

@media(max-width:960px){
  .cfg{padding-top:16vh}
  .cfg__grid{grid-template-columns:1fr;gap:22px}
  .cfg__stage{position:relative;top:0;order:-1}
}
@media (prefers-reduced-motion: reduce){
  .step{animation:none}
  .bp__zones path,.cfg__prog span{transition:none}
}