/* ============================================================
   Onboarding / registration additions - uses the site's existing
   design tokens (--ink, --pine, --gold, --paper, --line, etc. from
   certifyrecruit.css's :root) throughout, no new palette. Loaded
   AFTER certifyrecruit.css (see @push('head') in auth/register.blade.php,
   auth/verify.blade.php and onboarding/{basics,skills,consent}.blade.php).
   Scoped under .signup/.onb-* so nothing here leaks onto the rest of the
   app.
   ============================================================ */

/* ── horizontal top stepper (sits above the sidebar+content layout) ── */
.onb-topstepper{background:linear-gradient(100deg,#04143A,#3650F1 65%,#3650F1);padding:16px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.onb-topstepper::-webkit-scrollbar{display:none}
.onb-topstepper-track{display:flex;align-items:center;gap:8px;min-width:max-content;max-width:720px;margin:0 auto}
.onb-tstep{display:flex;align-items:center;gap:8px;opacity:.55;transition:opacity .3s}
.onb-tstep.on,.onb-tstep.done{opacity:1}
.onb-tstep .dot{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:#EAF1FF;flex:none}
.onb-tstep.on .dot{background:#fff;color:var(--pine-deep);border-color:#fff;font-weight:700}
.onb-tstep.done .dot{background:var(--gold);border-color:var(--gold);color:#04143A;font-weight:700}
.onb-tstep .label{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap}
.onb-tstep.on .label{color:#fff}
.onb-tstep.done .label{color:var(--gold)}
.onb-tline{width:26px;height:1.5px;background:rgba(255,255,255,.3);flex:none}
.onb-tline.done{background:var(--gold)}
@media (max-width:640px){.onb-tstep .label{display:none}.onb-tline{width:16px}}

/* ── motivation banner (top of the main content pane) ── */
.onb-banner{display:flex;align-items:flex-start;gap:12px;background:var(--sky);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:22px}
.onb-banner-ic{width:30px;height:30px;border-radius:9px;background:var(--card);border:1px solid var(--line);color:var(--pine);display:flex;align-items:center;justify-content:center;flex:none}
.onb-banner b{font-size:13.5px;color:var(--ink)}
.onb-banner p{font-size:12.5px;color:var(--ink-soft);font-style:italic;margin-top:3px}

/* ── OTP boxes on the Verify step ── */
.signup .otp-row input:focus{border-color:var(--pine);outline:none}
.signup .otp-row{gap:12px}
.signup .otp-row input{width:58px;height:64px;font-size:22px;border-radius:12px}

/* ── spacious scale-up: the sidebar+form layout felt cramped next to the
   mockup's larger, more confident proportions - this widens breathing room
   and bumps type/control sizes throughout, still using the site's own
   tokens (colors untouched, see above) ── */
.signup .su-main{padding:64px 48px 56px;align-items:center}
/* Centers the whole pane (not just individual fields) inside .su-main -
   .su-main is flex:1 next to the 340px sidebar on desktop, or the FULL
   viewport width once the sidebar disappears below the 960px breakpoint
   (see certifyrecruit.css), so a fixed-width block pinned to the left edge
   left a huge dead zone on the right on anything narrower than a large
   desktop. .su-main is already a column flexbox (certifyrecruit.css), so
   align-items (the cross/horizontal axis here) is what centers it, not
   justify-content. A generous max-width fixes the dead-zone at every size
   while still keeping text inputs a comfortable reading width and giving
   grids (the industry picker) room for several columns. */
.signup .su-pane{width:100%;max-width:720px}
.signup .su-pane h2{font-size:32px;margin:10px 0 8px}
.signup .su-pane .sub{font-size:15.5px;margin-bottom:32px}
.signup .field{margin-bottom:22px}
.signup .field label{font-size:13px;margin-bottom:8px}
.signup .field input,
.signup .field select,
.signup input.iti__tel-input,
.signup #industrySearch{padding:15px 16px;font-size:15.5px;border-radius:12px}
.signup .field .hint{font-size:12px;margin-top:7px}
.signup .su-actions{margin-top:30px;gap:14px}
.signup .su-actions .btn,
.signup #registerSubmitBtn,
.signup #basicsSubmitBtn,
.signup #industrySubmitBtn,
.signup #continueBtn,
.signup #verifyBtn{padding:14px 30px;font-size:15px;border-radius:12px}
.signup .social-row{gap:14px;margin-bottom:24px}
.signup .social-btn{padding:15px 18px;font-size:14.5px;border-radius:12px}
.signup .su-divider{font-size:12.5px;margin-bottom:24px}
.signup .card,.signup .sk-section{padding:26px 28px;border-radius:16px}
.signup .card.onb-ind-card{padding:18px 20px}
.signup .sk-add-label{font-size:13px;margin-bottom:11px}
.signup .sk-chip{padding:8px 15px;font-size:13.5px}
.signup .sk-main-chip{padding:9px 16px;font-size:13.5px}
.signup .onb-suggest-chip{border-color:var(--line);color:var(--ink)}
.signup .onb-suggest-chip:hover{border-color:var(--pine);color:var(--pine);background:var(--sky)}
.signup #industryCount,.signup #skTotalCount{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.signup #industryCount b,.signup #skTotalCount b{color:var(--pine)}
@media (max-width:640px){
  .signup .su-main{padding:36px 24px}
  .signup .su-pane h2{font-size:26px}
}