/* Join wizard, save status, and profile dashboard. Uses the shared tokens in styles.css. */
.join-page { max-width:820px; margin:0 auto; padding:clamp(18px,4vw,40px) 0; }
.join-intro { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.join-intro p { margin:0; color:var(--muted); font-size:14px; }
.join-progress { list-style:none; display:flex; gap:6px; padding:0; margin:14px 0 18px; overflow-x:auto; }
.join-progress li { flex:1 0 auto; min-width:92px; padding-top:10px; border-top:3px solid var(--line-strong); font-size:13px; color:var(--dim); }
.join-progress li.done { border-top-color:var(--green); color:var(--ink); }
.join-progress li.current { border-top-color:var(--cyan); color:var(--ink-strong); font-weight:700; }
.join-progress button { background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.join-card { display:grid; gap:14px; }
.join-q { font-size:clamp(26px,4vw,36px); line-height:1.1; margin:0; color:var(--ink-strong); outline:none; }
.join-help { margin:0; color:var(--muted); max-width:60ch; line-height:1.55; }
.join-mini { margin:6px 0 0; color:var(--muted); font-size:13px; }
.field-error { display:block; margin-top:6px; color:var(--danger); font-size:13px; font-weight:600; }
[data-theme="light"] .field-error { color:#a3271c; }
.join-card [aria-invalid="true"] { border-color:var(--danger) !important; }
.join-account { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-card); }
.join-account img { width:40px; height:40px; border-radius:50%; }
.join-account div { display:grid; gap:2px; flex:1 1 220px; }
.join-account span { color:var(--muted); font-size:14px; }
.join-account-dot, .save-dot { width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none; }
.join-account.ok .join-account-dot { background:var(--green); }
.join-fieldset { border:0; padding:0; margin:0; display:grid; gap:10px; }
.join-fieldset legend { font-weight:700; margin-bottom:8px; color:var(--ink-strong); }
.join-chips { display:flex; flex-wrap:wrap; gap:7px; }
.join-chip { padding:8px 12px; border:1px solid var(--line-strong); border-radius:999px; background:var(--btn-bg); color:var(--ink); font-family:inherit; font-size:14px; cursor:pointer; }
.join-chip.on { background:var(--btn-primary-fill); color:var(--btn-primary-ink); border-color:transparent; }
.join-chip:hover { border-color:var(--btn-border-hover); }
.join-chip-check { position:relative; }
.join-chip-check input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.join-chip-check span { display:inline-block; padding:8px 12px; border:1px solid var(--line-strong); border-radius:999px; font-size:14px; color:var(--ink); }
.join-chip-check input:checked + span { background:var(--violet); color:#17122e; border-color:transparent; }
.join-chip-check input:focus-visible + span, .join-path input:focus-visible + span, .join-mission input:focus-visible + span { outline:2px solid var(--cyan); outline-offset:2px; }
.join-add { display:flex; gap:8px; }
.join-add input { flex:1; min-height:42px; padding:0 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-input); color:var(--ink); font:inherit; }
.join-missions { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; }
/* Eight paths split evenly (4 + 4, or 2 + 2 + 2 + 2), so no card sits alone on a row. */
.join-paths { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
@media (max-width:820px) { .join-paths { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.join-path, .join-mission { position:relative; display:block; cursor:pointer; }
.join-path input, .join-mission input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.join-path span, .join-mission span { display:grid; gap:3px; height:100%; padding:14px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-card); }
.join-path small, .join-mission small { color:var(--muted); }
.join-path.on span, .join-mission.on span { border-color:var(--cyan); background:var(--surface-card-2); box-shadow:inset 0 0 0 1px var(--cyan); }
.join-guardian, .join-privacy { padding:16px; border-radius:var(--radius-sm); background:var(--surface-card-2); border-left:3px solid var(--gold); }
.join-privacy { border-left-color:var(--green); }
.join-guardian h3, .join-privacy h3 { margin:0 0 6px; font-size:16px; }
.join-guardian p, .join-privacy ul { margin:0 0 10px; color:var(--ink); line-height:1.55; }
.join-check { display:flex; gap:9px; align-items:flex-start; font-size:14px; }
.join-optional summary { cursor:pointer; font-weight:700; padding:6px 0; }
.join-nav { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap; }
.join-autosave { color:var(--dim); font-size:13px; }
.join-done-block { padding-top:12px; border-top:1px solid var(--line); }
.join-done-block h3 { margin:0 0 8px; }
.join-next { margin:0; padding-left:20px; display:grid; gap:10px; }
.join-why { display:block; color:var(--muted); font-size:13px; }
.join-saved { display:grid; gap:0; margin:0; }
.join-saved > div { display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:14px; }
.join-saved dt { font-weight:700; color:var(--muted); }
.join-saved dd { margin:0; }

.save-status { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding:11px 14px; border-radius:var(--radius-sm); font-size:14px; }
.save-status.ok { background:rgba(143,213,164,.12); }
.save-status.ok .save-dot { background:var(--green); }
.save-status.device { background:rgba(234,203,131,.12); }
.save-status span:not(.save-dot) { color:var(--muted); }
.device-offer { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; padding:10px 16px; background:rgba(234,203,131,.14); border-bottom:1px solid var(--line); font-size:14px; }
.login-avatar { width:56px; height:56px; border-radius:50%; margin-bottom:10px; }

.profile-dash { display:grid; gap:16px; padding:clamp(14px,3vw,30px) 0; }
.profile-dash-head { display:grid; gap:12px; }
.profile-dash-id { display:flex; gap:16px; align-items:center; }
.profile-dash-avatar { width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid var(--line-strong); }
.profile-dash-id h1 { margin:4px 0; font-size:clamp(26px,4vw,38px); }
.profile-dash-id p { margin:0; color:var(--muted); }
.profile-dash-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.profile-dash-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:19px; margin:0 0 12px; }
.profile-pct { font:800 22px ui-monospace,monospace; color:var(--cyan); }
.profile-missing { list-style:none; padding:0; margin:12px 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; }
.profile-learning { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:12px; }
.profile-learning small { color:var(--muted); }
.profile-share { margin-top:14px; display:grid; gap:6px; max-width:420px; }
.join-empty-profile { max-width:720px; margin:clamp(20px,5vw,60px) auto; }
.join-funnel { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.join-funnel li { display:grid; grid-template-columns:80px 1fr 50px; gap:10px; align-items:center; font-size:14px; }
.join-funnel-bar { height:10px; border-radius:6px; background:var(--surface-card-2); overflow:hidden; }
.join-funnel-bar i { display:block; height:100%; background:var(--cyan); }
@media (max-width: 760px) {
  .profile-dash-grid { grid-template-columns:1fr; }
  .join-saved > div { grid-template-columns:1fr; gap:2px; }
  .join-nav .join-autosave { order:3; width:100%; text-align:center; }
}

/* ── Sign-in page and header account ── */
.signin-page { display:grid; place-items:start center; padding:clamp(28px,6vw,72px) 16px; }
.signin-card { width:min(100%,520px); padding:clamp(22px,4vw,34px); display:grid; gap:18px; }
.signin-card h1 { margin:0; font-size:clamp(26px,3.4vw,36px); line-height:1.1; }
.signin-card .lede { margin:0; }
.signin-identity { display:flex; align-items:center; gap:16px; }
.signin-identity p { margin:6px 0 0; color:var(--muted); }
.signin-avatar { width:64px; height:64px; border-radius:50%; border:2px solid var(--cyan); object-fit:cover; flex:none; }
.signin-admin-chip, .header-admin-chip {
  display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px;
  background:var(--gold); color:#1d1604; font:600 11px/1.2 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
}
.header-admin-chip { border:0; cursor:pointer; align-self:center; }
.signin-passport { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; }
.signin-passport span:not(.save-dot) { color:var(--muted); }
.signin-passport strong { margin-left:auto; }
.signin-passport.ok .save-dot { background:var(--green); }
.signin-passport.none .save-dot { background:var(--muted); }
.signin-actions { display:grid; gap:10px; }
.signin-steps { display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:signin; }
.signin-steps li { position:relative; display:grid; gap:2px; padding-left:40px; counter-increment:signin; }
.signin-steps li::before {
  content:counter(signin); position:absolute; left:0; top:0; width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; background:rgba(132,228,229,.13); color:var(--cyan); font:600 13px var(--font-mono);
}
.signin-steps span { color:var(--muted); font-size:14px; }
.signin-note { margin:0; color:var(--muted); font-size:13px; }
.header-action.profile-dot.has-avatar { overflow:hidden; padding:0; }
.header-action.profile-dot.has-avatar img { width:100%; height:100%; object-fit:cover; }
.join-skill-groups { display:grid; gap:8px; }
.join-skill-group { border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-card); }
.join-skill-group[hidden], .join-skill-row[hidden] { display:none; }
.join-skill-group summary { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:11px 14px; cursor:pointer; font-weight:600; list-style:none; }
.join-skill-group summary::-webkit-details-marker { display:none; }
.join-skill-count { color:var(--cyan); font-size:13px; font-weight:500; }
.join-skill-list { list-style:none; margin:0; padding:0 14px 6px; }
.join-skill-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0; border-top:1px solid var(--line-strong); }
.join-seg { display:inline-flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; }
.join-seg-btn { padding:6px 12px; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; cursor:pointer; }
.join-seg-btn + .join-seg-btn { border-left:1px solid var(--line-strong); }
.join-seg-btn.on { background:var(--btn-primary-fill); color:var(--btn-primary-ink); }
.join-seg-btn:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px; }
.join-chip.learn { border-style:dashed; }