/* site-v48-extend-wizard-b: the expert builder, the tight walk. Loads after shared/site.css and home.css; declares no token.
 * Section: heading + two blocks above, one wide pinned window (six states), the additions list below.
 * Window: the real wizard's layout (step left, expert preview right, progress row top right), drawn dark in v46's kit. */

/* ── the section ── */
.sec-xw{padding-block:var(--sec-pad)}
.xw-top{align-items:end}
.xw-top .blocks p+p{margin-top:var(--sp-p)}
.st-xw{grid-template-columns:minmax(0,1fr)}
.st-xw .st-pin{padding-block:40px 0}
html.anim .st-xw .st-pin{padding:40px 0 22px}
.xw-adds{margin-top:clamp(40px,6vh,64px);align-items:start}
.xw-adds .blocks-one{margin-top:14px}
.xw-adds .adds{margin-top:0}

/* ── the window ── */
.xw{--dw:1180;--dh:740;font-size:calc(var(--u)*14)}
.xw .ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.x-head{flex:none;height:calc(var(--u)*48);display:flex;align-items:center;gap:calc(var(--u)*12);padding:0 calc(var(--u)*16);border-bottom:1px solid #454545}
.x-head img{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.x-crumb{font-size:calc(var(--u)*15);font-weight:600;letter-spacing:-.01em}
.x-crumb i{font-style:normal;color:var(--brand);margin-right:calc(var(--u)*6)}
.x-pill{height:calc(var(--u)*28);padding:0 calc(var(--u)*10);display:inline-flex;align-items:center;gap:calc(var(--u)*6);border:1px solid var(--edge);border-radius:calc(var(--u)*7);font-size:calc(var(--u)*12.5);color:var(--sub)}
.x-build{color:var(--ink);font-weight:500}
.x-build .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.x-icons{margin-left:auto;color:var(--sub);display:flex}
/* the wizard's second row: Back/Previous and the nine-step progress row */
.x-bar{--d:flex;flex:none;height:calc(var(--u)*44);align-items:center;gap:calc(var(--u)*16);padding:0 calc(var(--u)*18);border-bottom:1px solid #454545}
.x-back{--d:inline-flex;align-items:center;gap:calc(var(--u)*6);color:var(--sub);font-size:calc(var(--u)*13)}
.x-flip{transform:scaleX(-1)}
.x-back .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.x-prog{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*12);font-size:calc(var(--u)*11.5);color:#454545}
.x-prog li{display:flex;align-items:center;gap:calc(var(--u)*5);white-space:nowrap}
.x-prog i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#454545}
/* done steps: teal dot, sub text; the current step: teal dot with a ring, ink text */
.xw[data-state="1"] .x-prog li:nth-child(1),
.xw[data-state="2"] .x-prog li:nth-child(-n+2),.xw[data-state="3"] .x-prog li:nth-child(-n+2),
.xw[data-state="4"] .x-prog li:nth-child(-n+8){color:var(--sub)}
.xw[data-state="1"] .x-prog li:nth-child(1) i,
.xw[data-state="2"] .x-prog li:nth-child(-n+2) i,.xw[data-state="3"] .x-prog li:nth-child(-n+2) i,
.xw[data-state="4"] .x-prog li:nth-child(-n+8) i{background:var(--teal)}
.xw[data-state="0"] .x-prog li:nth-child(1),.xw[data-state="1"] .x-prog li:nth-child(2),
.xw[data-state="2"] .x-prog li:nth-child(3),.xw[data-state="3"] .x-prog li:nth-child(3),
.xw[data-state="4"] .x-prog li:nth-child(9){color:var(--ink);font-weight:600}
.xw[data-state="0"] .x-prog li:nth-child(1) i,.xw[data-state="1"] .x-prog li:nth-child(2) i,
.xw[data-state="2"] .x-prog li:nth-child(3) i,.xw[data-state="3"] .x-prog li:nth-child(3) i,
.xw[data-state="4"] .x-prog li:nth-child(9) i{background:var(--teal);box-shadow:0 0 0 calc(var(--u)*2.5) rgba(33,173,143,.28)}

/* two columns: the step on the left, the expert preview on the right */
.x-split{--d:grid;flex:1;min-height:0;grid-template-columns:calc(var(--u)*470) minmax(0,1fr)}
.x-left{min-height:0;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--u)*20) calc(var(--u)*44);border-right:1px solid #454545}
.x-step{--d:flex;flex-direction:column;gap:calc(var(--u)*12)}
.x-step h3{font-size:calc(var(--u)*19);font-weight:600;line-height:1.25;letter-spacing:-.015em}
.x-sub{color:var(--sub);font-size:calc(var(--u)*13.5);line-height:1.5;margin-top:calc(var(--u)*-4)}
.x-ta{min-height:calc(var(--u)*96);padding:calc(var(--u)*12) calc(var(--u)*14);border:1px solid #2f7f6d;border-radius:calc(var(--u)*9);background:#1a1a1a;box-shadow:0 0 0 calc(var(--u)*3) rgba(33,173,143,.12);font-size:calc(var(--u)*14);line-height:1.5}
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*7);height:calc(var(--u)*40);padding:0 calc(var(--u)*16);border-radius:calc(var(--u)*9);background:var(--app-btn);color:var(--app-btn-ink);font-weight:600;font-size:calc(var(--u)*13.5);white-space:nowrap}
.x-btn .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.x-step>.x-btn{width:100%;margin-top:calc(var(--u)*6)}
.x-ghost{background:transparent;border:1px solid var(--edge);color:var(--sub);font-weight:500}
.x-sm{height:calc(var(--u)*32);font-size:calc(var(--u)*12.5);padding:0 calc(var(--u)*12)}
.x-row{display:flex;flex-wrap:wrap;gap:calc(var(--u)*8)}
.x-grow{flex:1}
/* refine */
.x-qhead{display:flex;align-items:center;gap:calc(var(--u)*9);font-size:calc(var(--u)*12.5);color:var(--sub)}
.x-qn{width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:50%;display:grid;place-items:center;background:#1f332e;color:var(--teal-hi);font-weight:600}
.x-bars{margin-left:auto;display:flex;gap:calc(var(--u)*5)}
.x-bars i{width:calc(var(--u)*18);height:calc(var(--u)*3);border-radius:calc(var(--u)*2);background:#454545}
.x-bars i.on{background:var(--teal)}
.x-q{font-size:calc(var(--u)*16.5);font-weight:600;line-height:1.38;letter-spacing:-.01em;margin-top:calc(var(--u)*4)}
.x-help{font-size:calc(var(--u)*12);line-height:1.45;color:var(--dim);margin-top:calc(var(--u)*-4)}
.x-ta-q{min-height:calc(var(--u)*88)}
.x-hint{font-size:calc(var(--u)*11);color:var(--dim)}
/* building */
.x-building{align-items:center;text-align:center;gap:calc(var(--u)*6)}
.x-spark{width:calc(var(--u)*50);height:calc(var(--u)*50);display:grid;place-items:center;border-radius:calc(var(--u)*12);background:#1f332e;margin-bottom:calc(var(--u)*8)}
.x-spark .ic{width:calc(var(--u)*24);height:calc(var(--u)*24);fill:var(--teal);stroke:none}
.x-building strong{font-size:calc(var(--u)*15);font-weight:600}
.x-building .x-sub{margin-top:0}
.x-meter{width:calc(var(--u)*170);height:calc(var(--u)*4);margin-top:calc(var(--u)*10);border-radius:calc(var(--u)*3);background:#333333;overflow:hidden}
.x-meter i{display:block;width:34%;height:100%;margin-left:38%;border-radius:inherit;background:var(--teal)}
html.anim .x-building.enter .x-meter i{animation:x-sweep var(--motion-slow) var(--ease-out) both}
@keyframes x-sweep{from{margin-left:0;width:0}}
/* review */
.x-lab{font:600 calc(var(--u)*10.5)/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.x-step .x-lab{margin-top:calc(var(--u)*4);margin-bottom:calc(var(--u)*-4)}
.x-input{height:calc(var(--u)*38);display:flex;align-items:center;padding:0 calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*8);background:#1a1a1a}
.x-caps{display:grid;gap:calc(var(--u)*9);color:var(--sub);font-size:calc(var(--u)*13)}
.x-caps li{display:flex;align-items:center;gap:calc(var(--u)*9)}
.x-caps .ic{width:calc(var(--u)*16);height:calc(var(--u)*16);padding:calc(var(--u)*2.5);border-radius:50%;background:#292929;color:var(--dim)}
.x-caps li.on{color:var(--ink)}
.x-caps li.on .ic{background:#1f332e;color:var(--teal-hi)}
/* output */
.x-ohead{display:flex;gap:calc(var(--u)*12);align-items:flex-start}
.x-otile{flex:none;width:calc(var(--u)*34);height:calc(var(--u)*34);display:grid;place-items:center;border-radius:calc(var(--u)*9);background:#1f332e;color:var(--teal-hi)}
.x-ohead h3{font-size:calc(var(--u)*17)}
.x-ohead .x-sub{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*12.5)}
.x-note{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid #2f4a63;border-radius:calc(var(--u)*9);background:#1d2630;font-size:calc(var(--u)*12.5);font-weight:500}
.x-note .ic{color:#e0a44b}
.x-sugg{display:flex;flex-direction:column;gap:calc(var(--u)*5);padding:calc(var(--u)*14) calc(var(--u)*16);border:1px solid var(--edge);border-radius:calc(var(--u)*10);background:#212121}
.x-sugg .x-lab{margin-bottom:calc(var(--u)*4)}
.x-sugg b{font-size:calc(var(--u)*12.5);font-weight:600}
.x-sugg p{font-size:calc(var(--u)*12.5);line-height:1.5;color:var(--sub)}
.x-sugg p+b{margin-top:calc(var(--u)*6)}
.x-draft{flex:1 0 auto;font-size:calc(var(--u)*12);padding:0 calc(var(--u)*11)}
.x-step .x-row{margin-top:calc(var(--u)*2)}

/* the right column: empty at first, then the expert preview (the reward, drawn large) */
.x-right{min-height:0;display:flex;justify-content:center;align-items:flex-start;padding:calc(var(--u)*22) calc(var(--u)*40);background:#1a1a1a;overflow:hidden}
.x-empty{--d:flex;margin:auto;flex-direction:column;align-items:center;gap:calc(var(--u)*14);max-width:calc(var(--u)*300);text-align:center;color:var(--dim);font-size:calc(var(--u)*13)}
.x-empty span{width:calc(var(--u)*54);height:calc(var(--u)*54);display:grid;place-items:center;border-radius:calc(var(--u)*12);background:#292929}
.x-empty .ic{width:calc(var(--u)*24);height:calc(var(--u)*24)}
.x-pv{--d:flex;width:100%;max-width:calc(var(--u)*580);flex-direction:column;gap:calc(var(--u)*14)}
.x-pv-id{display:flex;flex-direction:column;align-items:center;text-align:center}
.x-av{flex:none;width:calc(var(--u)*40);height:calc(var(--u)*40);display:grid;place-items:center;border-radius:calc(var(--u)*10);color:#fff;font-size:calc(var(--u)*13);font-weight:600;letter-spacing:.02em;background:linear-gradient(135deg,#8b8df6,#5aa7f5)}
.x-pv-id .x-av{width:calc(var(--u)*64);height:calc(var(--u)*64);border-radius:calc(var(--u)*14);font-size:calc(var(--u)*19);margin-bottom:calc(var(--u)*10)}
.x-pv-id strong{font-size:calc(var(--u)*22);font-weight:600;letter-spacing:-.015em;line-height:1.2}
.x-pv-id small{margin-top:calc(var(--u)*3);font-size:calc(var(--u)*14.5);color:var(--sub)}
.x-pv-q{padding:calc(var(--u)*12) calc(var(--u)*16);border:1px solid #454545;border-radius:calc(var(--u)*10);background:#212121;font-size:calc(var(--u)*13.5);font-style:italic;line-height:1.55;color:#b3b3b3}
.x-pv-act{padding:calc(var(--u)*14) calc(var(--u)*16);border:1px solid #245548;border-radius:calc(var(--u)*10);background:#1c2a26}
.x-lab-t{color:var(--teal-hi)}
.x-pv-act p{margin-top:calc(var(--u)*8);font-size:calc(var(--u)*13.5);line-height:1.5;color:#f5f5f5}
.x-pv-act ul{display:grid;gap:calc(var(--u)*6);margin-top:calc(var(--u)*10)}
.x-pv-act li{padding-left:calc(var(--u)*10);border-left:calc(var(--u)*2) solid #2f7f6d;font-size:calc(var(--u)*13.5);line-height:1.45;color:#c9d6d2}
.x-pv-how{display:flex;flex-direction:column;gap:calc(var(--u)*8)}
.x-bub-you{align-self:flex-end;max-width:84%;padding:calc(var(--u)*9) calc(var(--u)*13);border-radius:calc(var(--u)*10);background:var(--app-btn);color:#fff;font-size:calc(var(--u)*13)}
.x-bub-row{display:flex;gap:calc(var(--u)*9);align-items:flex-start}
.x-av-s{width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*10.5)}
.x-bub-ex{max-width:80%;padding:calc(var(--u)*9) calc(var(--u)*13);border:1px solid #454545;border-radius:calc(var(--u)*10);background:#292929;font-size:calc(var(--u)*13);color:#f5f5f5}
html.anim .x-pv .enter{animation-delay:calc(var(--i,0) * 70ms)}

/* the experts page after Confirm */
.x-roster{flex:1;min-height:0;overflow:hidden;padding:calc(var(--u)*26) calc(var(--u)*56) 0}
.x-roster h3{font-size:calc(var(--u)*22);font-weight:600;letter-spacing:-.015em}
.x-rbar{display:flex;align-items:center;gap:calc(var(--u)*10);margin-top:calc(var(--u)*18);padding-top:calc(var(--u)*16);border-top:1px solid #454545}
.x-rl{margin-right:auto;font-size:calc(var(--u)*12.5);color:var(--dim)}
.x-search{display:inline-flex;align-items:center;gap:calc(var(--u)*7);width:calc(var(--u)*200);height:calc(var(--u)*32);padding:0 calc(var(--u)*11);border:1px solid var(--edge);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*12.5);color:var(--dim)}
.x-tabs{display:flex;gap:calc(var(--u)*6);margin-top:calc(var(--u)*12);font-size:calc(var(--u)*12.5);color:var(--sub)}
.x-tabs span{padding:calc(var(--u)*5) calc(var(--u)*11);border-radius:calc(var(--u)*7)}
.x-tabs .on{background:#1f332e;border:1px solid #245548;color:var(--teal-hi)}
.x-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*12);margin-top:calc(var(--u)*12)}
.x-rc{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*10);padding:calc(var(--u)*15) calc(var(--u)*16) calc(var(--u)*10);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#212121}
.x-rc-top{display:flex;gap:calc(var(--u)*12)}
.x-rc strong{display:block;font-size:calc(var(--u)*14.5);font-weight:600}
.x-rc p{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*12);line-height:1.45;color:var(--sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.x-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*5);padding-left:calc(var(--u)*52)}
.x-chip{display:inline-flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*2) calc(var(--u)*8);border-radius:calc(var(--u)*999);font-size:calc(var(--u)*11)}
.x-chip i{width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;background:currentColor}
.x-chip-c{background:#1f332e;color:var(--teal-hi)}
.x-chip-t{background:#1d2e2a;color:#8fd9c6}
.x-chip-s{background:#2c2338;color:#d0b4f5}
.x-chip-f{background:#1f2a38;color:#9cc4f5}
.x-rfoot{display:flex;align-items:center;gap:calc(var(--u)*8);padding-top:calc(var(--u)*9);border-top:1px solid #454545;font-size:calc(var(--u)*12);color:var(--dim)}
.x-rfoot .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.x-new{border-color:#2f7f6d;box-shadow:0 0 0 calc(var(--u)*3) rgba(33,173,143,.14)}
html.anim .x-new.enter{animation:x-land var(--motion-slow) var(--ease-out) both;animation-delay:140ms}
@keyframes x-land{from{opacity:0;transform:translateY(calc(var(--u)*14)) scale(.97)}}
.x-av-pc{background:linear-gradient(135deg,#8b8df6,#5aa7f5)}
.x-av-fs{background:linear-gradient(135deg,#ec6fb5,#a78bfa)}
.x-av-a{background:linear-gradient(135deg,#7c8cf8,#a78bfa)}
.x-av-b{background:linear-gradient(135deg,#818cf8,#60a5fa)}
.x-av-c{background:linear-gradient(135deg,#f59e0b,#f472b6)}
.x-av-d{background:linear-gradient(135deg,#2dd4bf,#38bdf8)}
.x-av-e{background:linear-gradient(135deg,#c084fc,#f472b6)}
.x-built{margin-top:calc(var(--u)*20);padding-top:calc(var(--u)*16);border-top:1px solid #454545}
.x-built p{margin-top:calc(var(--u)*6);font-size:calc(var(--u)*12);color:var(--dim)}
.x-bgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--u)*9);margin-top:calc(var(--u)*12)}
.x-bgrid>div{display:flex;gap:calc(var(--u)*9);align-items:flex-start;padding:calc(var(--u)*11);border:1px solid #454545;border-radius:calc(var(--u)*10);background:#212121}
.x-bgrid .x-av{width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*10)}
.x-bgrid b{font-size:calc(var(--u)*12);font-weight:600;line-height:1.3;min-width:0}
.x-bgrid small{display:block;margin-top:calc(var(--u)*2);font-size:calc(var(--u)*10.5);font-weight:400;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── phones: one column; the preview gets the whole window in its state ── */
@media (max-width:899px){
  .xw-top{align-items:start}
  .xw-top .blocks{margin-top:18px}
  .fit .xw{--dh:820}
  .x-pill,.x-icons{display:none}
  .x-head .w-av{margin-left:auto}
  .x-bar{padding:0 calc(var(--u)*14);gap:calc(var(--u)*10)}
  .x-prog{gap:calc(var(--u)*6)}
  .x-prog span{display:none}
  .xw[data-state="0"] .x-prog li:nth-child(1) span,.xw[data-state="1"] .x-prog li:nth-child(2) span,
  .xw[data-state="2"] .x-prog li:nth-child(3) span,.xw[data-state="3"] .x-prog li:nth-child(3) span,
  .xw[data-state="4"] .x-prog li:nth-child(9) span{display:inline}
  .x-split{grid-template-columns:minmax(0,1fr)}
  .x-left{padding:calc(var(--u)*18) calc(var(--u)*20) calc(var(--u)*40);border-right:0}
  .xw[data-state="3"] .x-left{display:none}
  .xw:not([data-state="3"]) .x-right{display:none}
  .x-right{padding:calc(var(--u)*18) calc(var(--u)*18)}
  .x-draft{order:2;width:100%}
  .x-roster{padding:calc(var(--u)*18) calc(var(--u)*18) 0}
  .x-team{grid-template-columns:minmax(0,1fr)}
  .x-search{width:auto;flex:1}
  .x-rl{display:none}
  .x-bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-bgrid>div:nth-child(n+3){display:none}
  .x-pv{gap:calc(var(--u)*11)}
  .x-pv-id .x-av{width:calc(var(--u)*52);height:calc(var(--u)*52);font-size:calc(var(--u)*16);margin-bottom:calc(var(--u)*8)}
  .x-pv-q{padding:calc(var(--u)*10) calc(var(--u)*14)}
  .x-pv-q span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .x-pv-act{padding:calc(var(--u)*12) calc(var(--u)*14)}
  .x-pv-act li{font-size:calc(var(--u)*13)}
  .x-right{padding:calc(var(--u)*14) calc(var(--u)*16)}
  .xw-adds{margin-top:40px}
}

/* v50: the dummy-company note moved from under the window to the section's last line (TEXT_PLACEMENT_RULES §2) */
.xw-note{margin-top:clamp(16px,2.6vh,26px)}