/* Sign-up for online classes (signup.html). Builds on site.css .login (art panel, video, pw-wrap). */

/* art panel stays in view while the long form scrolls */
.signup .auth-art{position:sticky;top:0;align-self:start;height:calc(100vh - 30px);min-height:640px}
.su-art-foot{display:flex;flex-direction:column;gap:6px}
.su-art-foot a{color:var(--on-brand);font-weight:600}
.signup .auth-form{align-items:flex-start;padding:48px 32px 64px}
.signup .auth-form .su-sheet{width:min(580px,100%)}

/* head + progress */
.su-head h2{font-size:var(--t-24)}
.su-steps{list-style:none;margin:22px 0 0;padding:0;display:flex;gap:6px;counter-reset:su}
.su-step{display:flex;align-items:center;gap:8px;flex:1 1 auto;font:600 var(--t-14)/1.2 var(--f-display);color:var(--ink-3);white-space:nowrap}
.su-step+.su-step::before{content:"";flex:1 1 10px;min-width:8px;height:2px;border-radius:2px;background:var(--line-2);margin-right:2px;transition:background 300ms var(--ease)}
.su-step.done+.su-step::before,.su-step.done+.su-step[aria-current]::before{background:var(--brand-700)}
.su-step .n{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:var(--t-12);background:var(--sheet);flex:none;font-variant-numeric:tabular-nums;transition:background 200ms var(--ease),border-color 200ms var(--ease)}
.su-step .n .ico-sm{display:none;width:14px;height:14px}
.su-step[aria-current]{color:var(--brand-900)}
.su-step[aria-current] .n{background:var(--brand-900);border-color:var(--brand-900);color:var(--on-brand);box-shadow:0 0 0 3px var(--accent-100)}
.su-step.done{color:var(--ink-1)}
.su-step.done .n{background:var(--success-bg);border-color:var(--success);color:var(--success)}
.su-step.done .n .k{display:none}
.su-step.done .n .ico-sm{display:block}
.su-count{margin-top:10px;font-size:var(--t-12);color:var(--ink-2);font-variant-numeric:tabular-nums}
.su-count b{color:var(--brand-900);font-family:var(--f-display)}

/* panels */
.su-form{margin-top:18px;border-top:1px solid var(--line);padding-top:22px}
.su-panel{display:flex;flex-direction:column;gap:18px}
.su-panel:not([hidden]){animation:su-in 260ms var(--ease) both}
@keyframes su-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.su-panel h3{font-size:var(--t-20);color:var(--brand-900);outline:none}
.su-panel h3:focus-visible{box-shadow:var(--focus)}
.su-fs{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.su-legend{padding:0;margin-bottom:10px;font:600 var(--t-14) var(--f-body);color:var(--ink-1)}
.su-fs[hidden],.field[hidden]{display:none}
.su-fs .err,.su-panel .err{margin:0}
.su-grid{gap:18px 16px}

/* option cards (native radios) */
.su-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.su-opt{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--sheet);cursor:pointer;transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease),background 160ms var(--ease)}
.su-opt:hover{border-color:var(--ink-3)}
.su-opt input{position:absolute;opacity:0;width:1px;height:1px}
.su-opt-b{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.su-opt-b>.ico{color:var(--brand-700);flex:none}
.su-opt-b>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.su-opt b{font:600 var(--t-16)/1.25 var(--f-display);color:var(--brand-900)}
.su-opt small{font-size:var(--t-12);color:var(--ink-2);line-height:1.4}
.su-opt::after{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-input);background:var(--sheet);order:3;margin-left:auto;transition:border-width 160ms var(--ease),border-color 160ms var(--ease)}
.su-opt:has(input:checked){border-color:var(--brand-900);background:var(--brand-50);box-shadow:0 0 0 1px var(--brand-900)}
.su-opt:has(input:checked)::after{border:6px solid var(--accent-500)}
.su-opt:has(input:focus-visible){box-shadow:var(--focus)}
.su-fs:has(.err:not([hidden])) .su-opt:not(:has(input:checked)),.su-fs.is-invalid .su-opt{border-color:var(--danger)}
.su-opt-sm{padding:10px 14px}
.su-lang{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px}

.su-courses,.su-batches{display:flex;flex-direction:column;gap:8px}
.su-fit{order:4;flex-basis:100%;display:inline-flex;align-items:center;gap:6px;font:600 var(--t-12)/1 var(--f-body);color:var(--accent-700)}
.su-fit[hidden]{display:none}
.su-fit .ico-sm{width:14px;height:14px}
.su-seats{order:2;font-variant-numeric:tabular-nums}
.su-sched{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-sm);background:var(--paper-2);font-size:var(--t-14);color:var(--ink-2);line-height:1.5}
.su-sched .ico-sm{flex:none;margin-top:3px;color:var(--brand-700)}
.su-sched b{color:var(--ink-1);font-weight:600}
.su-fee{margin:0}

/* phone + OTP */
.su-otp-row{display:flex;gap:8px}
.su-otp-row .su-tel{flex:1}
.su-tel{position:relative}
.su-cc{position:absolute;left:1px;top:1px;bottom:1px;width:48px;display:grid;place-items:center;font:600 var(--t-14) var(--f-display);color:var(--ink-2);border-right:1px solid var(--line);border-radius:var(--r-sm) 0 0 var(--r-sm);background:var(--paper)}
.su-tel .input{padding-left:60px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.su-otp{max-width:200px;font:600 var(--t-20)/1 var(--f-display);letter-spacing:.4em;font-variant-numeric:tabular-nums;text-align:center;padding:0 8px 0 calc(8px + .4em)}
.su-otp::placeholder{letter-spacing:.4em}
.su-preview{color:var(--ink-3)}
.su-resend{margin:0}
.su-resend .btn{padding:0 8px;margin-left:-8px;font-variant-numeric:tabular-nums}
.su-same{margin-top:4px}
.select.is-invalid,.su-tel .input.is-invalid{border-color:var(--danger);box-shadow:0 0 0 3px rgba(180,36,36,.12)}
.input[readonly]{background:var(--paper)}

/* password */
.su-str .meter{display:block;height:6px}
.su-str .meter>i{transition:width 300ms var(--ease),background 300ms var(--ease)}
.su-str .meter.mid>i{background:var(--warn)}
.su-str-word{color:var(--ink-1)}
.su-consent{gap:14px}
.su-consent .check{line-height:1.5}
.su-consent .check:has(input.is-invalid) input{outline:2px solid var(--danger);outline-offset:1px}
.su-req{display:inline-block;margin-left:4px;font-size:var(--t-12);color:var(--ink-3)}

/* nav */
.su-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:20px;border-top:1px dashed var(--line-2)}
.su-nav[hidden]{display:none}
.su-nav #su-next{margin-left:auto;min-width:220px}

/* done */
.su-done{text-align:left}
.su-done-mark{width:56px;height:56px}
.su-done-mark svg{width:56px;height:56px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.su-done-mark circle{stroke:var(--success);stroke-width:2.5;fill:var(--success-bg)}
.su-done-mark path{stroke:var(--success);stroke-width:3.5;stroke-dasharray:40;stroke-dashoffset:40;animation:su-tick 380ms 120ms var(--ease) forwards}
@keyframes su-tick{to{stroke-dashoffset:0}}
.su-done h3{font-size:var(--t-24)}
.su-done-say{font-size:var(--t-16);color:var(--ink-2);margin-top:-8px}
.su-done-say b{color:var(--ink-1)}
.su-summary{margin:0;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.su-summary>div{padding:12px 14px;border-top:1px solid var(--line)}
.su-summary>div:nth-child(-n+2){border-top:0}
.su-summary>div:nth-child(even){border-left:1px solid var(--line)}
.su-summary dt{font:600 var(--t-12)/1.2 var(--f-display);letter-spacing:.03em;color:var(--ink-2)}
.su-summary dd{margin:4px 0 0;font-size:var(--t-14);color:var(--ink-1)}
.su-next-h{font-size:var(--t-16);color:var(--brand-900);margin-top:4px}
.su-next{padding:0;margin-top:-8px}
.su-next b{display:block;color:var(--ink-1);font-weight:600;margin-top:2px}
.su-next li>span{display:block;color:var(--ink-2);margin-top:2px}
.su-done-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

.su-note{display:flex;gap:8px;align-items:flex-start;margin-top:22px;padding:12px 14px;border-radius:var(--r-sm);background:var(--paper-2);font-size:var(--t-12);color:var(--ink-2)}
.su-note .ico-sm{flex:none;margin-top:1px;color:var(--brand-700)}
.su-note b{color:var(--ink-1)}
.su-note a{font-weight:600}

/* ---- tablet / phone ---- */
@media (max-width:1100px){
  .signup .auth-art{padding:40px 36px 32px 100px}
  .signup .auth-art .margin{left:68px}
}
@media (max-width:920px){
  .signup .auth-form{padding:20px 16px 40px;min-height:0}
  .signup .auth-form .sheet{padding:22px 18px}
}
@media (max-width:560px){
  .su-step .t{display:none}
  .su-step[aria-current] .t{display:inline}
  .su-pair{grid-template-columns:1fr}
  .su-grid{grid-template-columns:1fr}
  .su-grid .span-2{grid-column:auto}
  .su-otp-row{flex-direction:column}
  .su-otp-row .btn{width:100%}
  .su-nav{position:sticky;bottom:0;z-index:5;margin:24px -18px -22px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--sheet);border-top:1px solid var(--line);border-radius:0 0 var(--r-md) var(--r-md)}
  .su-nav #su-next{min-width:0;flex:1}
  .su-summary{grid-template-columns:1fr}
  .su-summary>div:nth-child(2){border-top:1px solid var(--line)}
  .su-summary>div:nth-child(even){border-left:0}
  .su-done-actions .btn{width:100%}
  .su-opt{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .su-done-mark path{animation:none;stroke-dashoffset:0}
}

/* review round: errors outside .field match field errors; batch seats wrap under the name on phones */
.su-fs>.err{font-size:var(--t-12);color:var(--danger);display:flex;gap:4px;align-items:center;line-height:1.4}
.su-fs>.err[hidden]{display:none}
.su-fs>.err .ico-sm,.field .err .ico-sm{flex:none;width:14px;height:14px}
@media (max-width:560px){
  .su-batch .su-opt-b{flex:1 1 calc(100% - 40px)}
  .su-batch .su-seats{order:4}
}