/* /join wizard — styles specific to the signup flow (welcome screen, etc).
   Shared wizard chrome classes live in posting-wizard.css. */

/* ---------- Chip picker (certifications/proficiencies/software step) ----------
   Same look as views/profile.ejs's chip picker, whose rules live in
   profile-redesign.css — that stylesheet isn't linked on this page (it's full of
   other profile-page-specific rules), so just the two selectors this step needs
   are duplicated here. --teal/--teal-dark/--line/--muted come from sg-base.css
   (already linked via partials/head.ejs); --teal-lt has no shared token yet, so
   it's hardcoded to match profile-redesign.css's value. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:42px;padding:0 15px;border-radius:99px;border:1.5px solid var(--line);
  background:#fff;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--teal);background:#eaf6f5;color:var(--teal-dark)}

/* ---------- Guidance panel (one per step, answers "why are you asking me this?") ---------- */
.guide{background:var(--teal-tint);border:1px solid #D7EAE4;border-radius:10px;
  padding:11px 12px;margin:10px 0 16px;font-size:13px;line-height:1.45;color:var(--ink-2)}
.guide p{margin:0}
.guide strong{display:block;color:var(--ink);margin-bottom:3px}

/* ---------- Trust ticks (step 0, under the phone input) ---------- */
.ticks{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 0;font-size:11px;color:var(--muted);font-weight:600}
.ticks span:before{content:"✓";color:var(--teal);font-weight:800;margin-right:4px}

/* ---------- Starter chips (highlights step) — dashed, insert text on click rather
   than toggle like the picker chips above, so they look visually distinct. ---------- */
.starter{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.starter button{font-size:12px;border:1px dashed var(--line);border-radius:99px;background:#fff;
  padding:6px 11px;color:var(--muted);cursor:pointer}
.starter button:hover{border-color:var(--teal);color:var(--teal-dark)}

/* ---------- Skills step: section heading counts + empty-state nudge ----------
   No shared amber-text token exists yet (sg-base.css's --amber is a light dot-fill
   color, not AA-safe as text) - hardcoded to match the tint/text pairing already
   established for the other status colors on this page. */
.seclabel{display:flex;justify-content:space-between;align-items:baseline}
.seclabel em{font-style:normal;font-weight:600;font-size:11px;color:var(--muted)}
.nudge{margin:8px 0 0;font-size:12px;line-height:1.45;color:#8a5a06;background:#fdf4e5;
  border-radius:8px;padding:7px 9px}

/* ---------- Fine print (SMS consent disclosure, final step) ---------- */
.fine-print{font-size:.8rem;color:var(--muted);margin-top:10px;max-width:54ch}

/* ---------- Resume field (final step) ----------
   Originally added because this step's heading had nothing after it to supply spacing
   (posting-wizard.css's h1/h2/h3 reset has no bottom margin) - the heading and the file
   input were touching with a measured 0px gap, matching the GH #5 review's "too crowded"
   screenshot. The step now has a .guide box after its heading too, but this margin stays
   as a floor: it collapses with .guide's bottom margin rather than stacking, so it costs
   nothing today and keeps the spacing correct if .guide is ever removed. */
.resume-field{margin-top:16px}