/* ==========================================================================
   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}
/* drawing on top, then zone tags and the witness photo side by side under it, so the photo never sits on the car */
.stage__frame{position:relative;background:var(--cream);padding:clamp(14px,2vw,26px);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px}
.stage__tag,.bp{grid-column:1/-1}
.stage__tag{display:flex;justify-content:space-between;gap:12px;color:rgba(25,24,24,.55);margin-bottom:6px}
/* A shaded technical model, not a flat outline and not a photograph: a
   configurator has to show which panel a choice covers, which a photo cannot. */
.bp__defs{position:absolute;width:0;height:0;overflow:hidden}
.bp{width:100%;height:auto;display:block}
.bp[hidden],.bp.is-off{display:none}
.bp__body{stroke:rgba(25,24,24,.34);stroke-width:1.6;stroke-linejoin:round}
.bp__glass{stroke:rgba(25,24,24,.3);stroke-width:1.4}
.bp__line{fill:none;stroke:rgba(25,24,24,.62);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.bp__seam{fill:none;stroke:rgba(25,24,24,.16);stroke-width:1.3}
.bp__gloss{pointer-events:none}
.bp__wheel circle{stroke:rgba(25,24,24,.42);stroke-width:1.6}
/* Covered panels read as a film laid over the paint: a translucent tint plus
   a defined edge, not a repaint. */
.bp__zones path{fill:rgba(166,8,12,0);stroke:rgba(166,8,12,0);stroke-width:2;
  transition:fill .45s cubic-bezier(.22,1,.36,1),stroke .45s}
.bp__zones path.on{fill:rgba(166,8,12,.30);stroke:rgba(166,8,12,.85)}

/* a real frame of the last choice, beside the zone tags */
.stage__swatch{grid-column:2;grid-row:3;position:relative;width:clamp(96px,10vw,150px);overflow:hidden;background:var(--ink);margin:14px 0 0}
.stage__swatch img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
/* caption sits under the photo, never on it */
.stage__swatch figcaption{padding:7px 9px 8px;color:var(--white);font-size:9.5px;line-height:1.35;letter-spacing:.05em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Coverage, spelled out. A tag lights up when the selection covers it. */
.stage__zones{grid-column:1;grid-row:3;align-self:start;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.zchip{font-family:var(--text);font-size:10.5px;font-weight:500;letter-spacing:.04em;padding:6px 11px;border:1px solid rgba(0,0,0,.13);color:rgba(25,24,24,.4);transition:background .35s,border-color .35s,color .35s}
.zchip.on{border-color:var(--black);color:var(--black)}

.stage__legend{color:rgba(25,24,24,.5);display:flex;align-items:center;gap:9px}
.stage__legend .key{width:13px;height:13px;background:rgba(166,8,12,.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);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;text-wrap:balance}
.step__sub{margin-top:10px;font-size:13.5px;line-height:1.5;color:rgba(25,24,24,.6);max-width:48ch}

.opts{display:grid;gap:10px;margin-top:6px}
.opts--2{grid-template-columns:1fr 1fr}
/* two across down to 360px: in one column the pinned phone stage hides the question once the finish tiles show */
@media(max-width:359px){.opts--2{grid-template-columns:1fr}}
/* step 1 only: at first load the right-hand tile sat under the fixed chat buttons (x305-365) */
@media(max-width:559px){.step[data-step="0"] .opts--2{grid-template-columns:1fr}}
.opt{text-align:left;background:none;border:1px solid rgba(0,0,0,.18);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(166,8,12,.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}
/* always one row of four: tiles shrink on a phone instead of wrapping 3+1 */
.sw__row{display:grid;grid-template-columns:repeat(4,minmax(0,92px));gap:10px}
.sw__b{min-width:0;border:1px solid rgba(0,0,0,.18);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:clamp(28px,3vw,40px);margin:34px 0 30px}
/* v2.css sets .btn text to --white for the dark pages; this band is off-white */
.cfg__nav .btn,.cfg__nav .btn:hover{color:var(--black)}
.cfg__nav .btn[disabled]{opacity:.35;pointer-events:none}
/* Back gets the ghost arrow, pointing back, instead of the forward plus */
.cfg__nav [data-back]::after{content:"\2190";order:-1;border:0;width:auto;height:auto;font-size:18px;color:inherit;transition:transform var(--t2) var(--ease)}
.cfg__nav [data-back]:hover::after{background:none;color:inherit;transform:translateX(-6px)}

/* ------------------------------ sheet ---------------------------------- */
.sheet--cfg{background:var(--ink);color:var(--white);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:var(--white)}
.sheet__note{margin-top:16px;font-family:var(--text);font-size:12px;color:rgba(255,255,255,.6)}
.sheet__note span{color:var(--white)}

@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(max-width:760px){
  /* On a phone the stage was a static picture at the top of the page: you
     scrolled past it to answer the questions and never saw the zones fill in.
     Pin it under the header instead, where it belongs. */
  /* The grid gave the stage its own row, and a sticky element cannot travel
     past its own row. A flex column makes the whole section its track. */
  .cfg__grid{display:flex;flex-direction:column}
  /* A flex item refuses to shrink below its content's width, and the
     no-wrap tag row is wider than the phone. Let the stage shrink. */
  .cfg__stage{min-width:0;max-width:calc(100% + var(--pad) * 2)}
  .stage__zones{max-width:100%}
  /* stuck at 0 with the pill's height as padding, so nothing scrolls visibly between the pill and the stage */
  .cfg__stage{position:sticky;top:0;z-index:20;background:var(--bg);
    padding-top:88px;padding-bottom:10px;margin:-88px calc(var(--pad) * -1) 0;padding-left:var(--pad);padding-right:var(--pad);
    border-bottom:1px solid var(--line)}
  .stage__frame{padding:12px}
  /* On a phone the stage is pinned under the header, so it stays short:
     a wide letterbox photo and one scrollable row of tags. */
  .stage__swatch{width:84px}
  .stage__swatch figcaption{display:none}
  /* the row scrolls sideways: fade the right edge so a cut chip reads as "more", and pad the end so the last chip scrolls clear of the fade */
  .stage__zones{align-self:end;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .stage__zones::after{content:"";flex:0 0 24px}
  .stage__zones::-webkit-scrollbar{display:none}
  .zchip{flex:0 0 auto;font-size:10px;padding:5px 10px}
  /* Pinned space is expensive on a phone; the red tags explain themselves. */
  .stage__legend{display:none}
}
@media (prefers-reduced-motion: reduce){
  .step{animation:none}
  .bp__zones path,.zchip,.cfg__prog span{transition:none}
}