<!-- BUILD cm-onboarding-hub.html · 2026-10-19 13:45 ET · v2.4.1 — MJ 10-19 09:26: the third group is CONFLICT management (Ivy · Candace), not Crisis — label fixed, same id. -->
<!-- BUILD cm-onboarding-hub.html · 2026-10-19 13:35 ET · v2.4 supervisor designations — MJ 10-19 09:22 ("we need to load the supervisor roster… a designation panel in Solutions would be better… FFS: Ivy and Candace for 2 and 3, primary open · CMSI: Malcolm, Michael DeVito and Candace · Conflict management: primary open, then Ivy and Candace · all other programs: primary and secondary open, Candella tertiary — I need to be able to edit all"). NEW 🧭 SUPERVISOR DESIGNATIONS panel under the roster: four program groups — FFS after-school (SACC + non-SACC tracks) · CMSI · Conflict management · Workforce & all other programs — each with Primary · Secondary · Tertiary picked from the staff index (type a name), 💾 Save writes org_settings/onboarding_supervisors on nycid-solutions (staff read/write under v96 — no rules change), ↺ Reset to MJ's 10-19 defaults; the defaults above are baked so the panel works before the first save. ROLE ASSIGNMENT gains a Program group pick (defaulted from the hire's track: SACC / non-SACC → FFS · Crisis & Conflict → CMSI · everything else → Workforce & other; Conflict management is chosen by hand) and PREFILLS the three supervisor fields from the group whenever they are empty — every field stays editable per hire. Malcolm = Malcolm White (Penn), Director of CMSI. Firestore rules: N/A. Constant Contact: N/A. node --check · tag-balance 0 · TRUE Playwright render. -->
<!-- BUILD cm-onboarding-hub.html · 2026-10-19 13:10 ET · v2.3.1 status-only — MJ 10-19 09:14 ("I tested a few people making their designation on the tracker hired and then new again but those people are showing in the queue still — it needs to work backwards"): the roster now keys on the tracker's STATUS alone (hired, case-insensitive). The tracker stamps stage:'onboarding' the moment someone is marked Hired and leaves it there when they go back to Interviewing or New, so v2.0–v2.3's "status hired OR stage onboarding" kept them on the roster; now a person leaves the roster the moment their status is anything but Hired, and comes back when it is Hired again (their onboarding_progress record is kept, so ticks are not lost). One line changed. Firestore rules: N/A. Constant Contact: N/A. node --check. -->
<!-- BUILD cm-onboarding-hub.html · 2026-10-19 12:55 ET · v2.3 auth-first listeners + remove + diagnostics — MJ 10-19 09:04–09:07 ("it's still not working — I accidentally added him manually and I can't delete" · tracker screenshot: Marcus Shields HIRED on Solutions, hub blank). ROOT CAUSE: the hub's Firestore listeners (career_applications · onboarding_progress) started the moment the page's module ran — BEFORE the Google sign-in resolved — so Firestore refused them as anonymous, and a refused listener never retries; the roster could only ever show what you added in that session (painted locally first). FIX: the listeners start, and restart, only once an @nycid.org account is signed in (onAuthStateChanged on the same app the gate signs in on). (1) ✕ REMOVE FROM ROSTER on the selected hire (manual adds and started-from-careers rows): nothing is deleted — the onboarding_progress record gets removed:true + removedBy/At and leaves the roster; the Careers application is untouched. (2) THE PAGE NOW SAYS WHAT IT SEES: the roster header reads 'live · N hires · M applications read'; a refused or failed career_applications read turns it red with the error (v2.1 could show LIVE while that read had failed, because the retired SYEP source counted as ready); 👁 All applicants lists every career_applications record the page can read, with name · status · stage · id and ＋ Start onboarding, so a record that is in the console but not on the screen is visible as a data question (status, field names) instead of a mystery. (3) Removed rows are ignored everywhere. Firestore rules: N/A — onboarding_progress is staff read/write under v96 (the remove is an update). Constant Contact: N/A. node --check · tag-balance 0 · TRUE Playwright render. -->
<!-- BUILD cm-onboarding-hub.html · 2026-10-19 12:05 ET · v2.2 search-all + three supervisors — MJ 10-19 08:53 ("Marcus' record is there but I still can't search for him" · "for the reporting structure we need primary, secondary and tertiary — load the current staff index"). (1) SEARCH FINDS EVERY APPLICANT: the roster still lists hires (status hired / stage onboarding, now case-insensitive, plus 'offered'), but the search box also looks through EVERY career_applications record on Solutions; an applicant who is not on the roster shows with their tracker status and a ＋ Start onboarding button that puts them on the roster right here (an onboarding_progress record carrying their name, email, phone, program and department under their real application id) — so a record the tracker never flagged Hired is one click from the checklist instead of invisible. The empty-roster text names the two reasons a person can be missing. (2) REPORTING STRUCTURE: Role Assignment now takes PRIMARY · SECONDARY · TERTIARY supervisors, each a searchable pick (type a name, title or program) over the NEW shared staff-roster.js = the staff index (same roster as index.html, 154 people); saved as supervisor / supervisor2 / supervisor3 (+ names) on onboarding_progress.roleAssignment; primary is required, the other two optional; the role step reads the primary. ROLE_ROSTER TBD is gone. Firestore rules: N/A. Constant Contact: N/A. node --check · tag-balance 0 · TRUE Playwright render. -->
<!-- BUILD cm-onboarding-hub.html · 2026-10-19 10:45 ET · v2.1 one-source + search — MJ 10-19 08:29 ("the search is not working… remove the SYEP careers from this description — that app is removed now and replaced by NYCID careers"). WHY THE ROSTER WAS EMPTY: v2.0 (10-08) moved this page to nycid-solutions, but nycid-careers-admin.html and nycid-careers.html still write career_applications on the LEGACY project — a Hired candidate never reached the database this page reads, so the search had nothing to search. Both Careers pages are cut over to Solutions in the same round (careers-admin solutions-cutover r1 · careers form solutions-cutover r1) and the existing records are imported with gcloud (steps in the delivery). THIS FILE: (1) ONE SOURCE — NYCID Careers (career_applications on nycid-solutions, status hired / stage onboarding) + manual adds; the syep_career_applications listener and every "SYEP Careers" label are gone; (2) the career_applications listener is a plain collection read sorted in the browser (the orderBy on submittedAtSrv silently dropped any record without that field — offline and merged rows); (3) the search box now also matches phone, role title and the program/site saved in the role assignment, and the roster shows a count of matches. Nothing else changed. Firestore rules: N/A (career_applications + onboarding_progress on Solutions already in v90). Constant Contact: N/A. node --check · tag-balance 0. -->
<!-- BUILD cm-onboarding-hub.html · 2026-10-08 11:00 ET · v2.0 paycom-era + role-assignment r1 — MJ 10-08 ("Paycom partners are now going to do all of our onboarding for employment verification… add the role assignment to the hub as the first item to complete… we are going to need a role roster… for now just put tbd"): (1) DATA HOME → nycid-solutions: gate + career_applications / syep_career_applications / onboarding_progress all read and write Solutions (was Legacy, read-only since 9/30); a Hired row on the Live Tracker lands here directly with no Hire Form in between. (2) 🎯 ROLE ASSIGNMENT is phase 1 on every live track — Role / title · Program & site · Supervisor (picked from ROLE_ROSTER) · start date; saved on onboarding_progress.roleAssignment; the three role steps tick themselves from the saved fields; every other phase is soft-locked (toast) until the role assignment is saved. (3) ROLE_ROSTER constant = the supervisor pick list; one entry, TBD, until MJ names the three supervisors — one place to edit. (4) Paycom era: the "Hire form submitted (onboarding-form)" step is gone with the retired cm-hire-form / onboarding-form pages; WFI "Hire Form & Paycom" is now "Paycom Onboarding" (invite sent · self-onboarding complete = I-9 / W-4 / direct deposit verified in Paycom · Sr. Director approval); the I-9 and direct-deposit steps moved under Paycom; SACC keeps its 600x forms and I-9 copy (NYCID still keeps SACC + internal documents). No SSN is collected or shown anywhere on this page. Firestore rules: onboarding_progress / career_applications / syep_career_applications already staff-gated on v80; firestore_v81 (same round) retires hire_records. Constant Contact: N/A. SOURCE: MJ r410. VALIDATED: node --check; tag-balance 0; TRUE Playwright render. -->
<!-- BUILD cm-onboarding-hub.html · 2026-09-17 10:05 ET · example-tom r1 — MJ 09-17 "I want an example person to use for learning — can we add Tom DeVito somehow?": 🎓 Example: Tom DeVito button beside Add loads Tom DeVito Jr. (EXAMPLE) onto the roster on the SACC track with 7 of 28 steps done; he lives only in this browser (localStorage nycid-hub-example), every tick on him is local and the Firestore write is skipped with a toast, so staff can practice the whole flow without touching real data. Real hires unchanged. Firestore rules: N/A. Constant Contact: N/A. SOURCE: MJ's r243. VALIDATED: node --check; tag-balance 0. -->
<!-- BUILD cm-onboarding-hub.html · 2026-09-17 09:20 ET · signed-in-identity r1 — MJ 09-17: "Your name" box replaced by the signed-in @nycid.org email (read-only, auto-filled after the staff gate); onboarding_progress.updatedBy now carries the account. Firestore rules: N/A. Constant Contact: N/A. -->
<!-- BUILD cm-onboarding-hub.html · 2026-09-06 07:35 ET · gate-logo r1 — per MJ screenshot: NYCID logo (nycid-logo.png, white lettering — the gate overlay is always slate-dark) replaces the emoji above "NYCID Staff Sign-In" on the shared staff gate; suite-wide, one line, nothing else touched (stacks on 2026-09-02 15:38 ET). Firestore rules: N/A. Constant Contact: N/A. VALIDATED: node --check; tag-balance delta 0 vs r100; TRUE Playwright render of the gate. DEPLOY: rides r101 to nycid-data. -->
<!-- BUILD cm-onboarding-hub.html · 2026-09-02 15:38 ET · +mfa-gate r1 — enforced second factor for non-@nycid.org sign-ins (Netconnect hardening); one script tag before </body>, no other change. -->
<!-- BUILD cm-onboarding-hub.html · 2026-09-02 14:32 ET · +team-hub r1 — MJ urgent: 💬 In-App Team Messenger pill added SUITE-WIDE (one <script src="team-hub.js"> before </body>); staff pages only, public/youth pages excluded; no other change to this file. -->
<!-- BUILD cm-onboarding-hub.html · 2026-08-19 13:40 ET (est. container −4h — confirm wall-clock) · STAFF GATE: shared @nycid.org Google sign-in overlay injected after <body> (named Firebase app "nycid-gate" — no collision with the page's own default app; session shared across all gated pages, sign in once). Client-side gate; the data lock is the paired 2026-08-19 13:05 firestore.rules. -->
<!-- BUILD cm-onboarding-hub.html · 2026-06-25 7:40 AM ET (est. — confirm wall-clock) · (1) WORKFORCE INITIATIVES TRACK NOW LIVE — full Paycom-based WFI onboarding checklist (6 phases / 24 steps: Offer, Hire Form & Paycom, Identity & Documents, Fingerprints & Clearances, Training, Finalization) so SYEP·WFI hires onboard against a real flow. SYEP hires now default to the WFI track (was a SACC placeholder). (2) RESTORED the always-visible detail at the bottom — with no hire selected the Mission Phases PREVIEW the active track's complete checklist instead of an empty panel, and the Readiness Core/dials show the track denominators. (3) 4th dial label is per-track (SACC forms / Paycom-HR forms). Roster 3-source merge (NYCID + SYEP·WFI + manual) + onboarding_progress sync unchanged. -->
<!-- BUILD cm-onboarding-hub.html · 2026-06-24 9:30 PM ET (est. — confirm wall-clock) · RESTORED manual add-a-hire (v1 "type a name and go", now Firestore-synced via onboarding_progress source:'manual') so the Command Center is usable BEFORE anyone is hired through Careers — this was the regression. Roster now MERGES THREE live sources: NYCID Careers (career_applications) + SYEP Careers (syep_career_applications, bucketed under Workforce Initiatives, SACC checklist as placeholder track) + manual adds. Source badge (NYCID/SYEP·WFI/MANUAL) on each card. All v1 features intact (Readiness Core, subsystem dials, phases, expand/reset, track override). -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onboarding Command — NYCID</title>
<link rel="icon" href="nycid-logo.png">
<style>
  :root{
    --space:#070b16; --space2:#0a1020; --panel:#0e1626; --panel2:#101c30;
    --line:rgba(86,140,210,.22); --line-bright:rgba(120,180,255,.42);
    --txt:#dbe6f5; --muted:#8aa0c0; --dim:#5b7196;
    --cyan:#22d3ee; --purple:#a78bfa; --green:#34d399; --amber:#fbbf24;
    --pink:#fb7185; --blue:#60a5fa;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:
      radial-gradient(1200px 700px at 75% -8%, rgba(34,211,238,.07), transparent 60%),
      radial-gradient(1000px 600px at 10% 110%, rgba(167,139,250,.08), transparent 60%),
      var(--space);
    color:var(--txt); font-family:var(--sans); min-height:100vh;
    -webkit-font-smoothing:antialiased; letter-spacing:.2px;
  }
  body::before{ /* faint HUD grid */
    content:""; position:fixed; inset:0; pointer-events:none; opacity:.35;
    background-image:linear-gradient(rgba(86,140,210,.05) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(86,140,210,.05) 1px,transparent 1px);
    background-size:46px 46px; mask:radial-gradient(circle at 50% 30%,#000 30%,transparent 85%);
  }
  .wrap{max-width:1280px;margin:0 auto;padding:18px 20px 60px;position:relative;z-index:1}

  /* ---------- top bar ---------- */
  .topbar{display:flex;align-items:center;gap:14px;padding:12px 18px;
    border:1px solid var(--line);border-radius:14px;
    background:linear-gradient(180deg,rgba(16,28,48,.9),rgba(10,16,32,.75));
    box-shadow:0 0 0 1px rgba(0,0,0,.3),0 18px 40px -28px rgba(34,211,238,.5);}
  .topbar img{width:44px;height:44px;border-radius:9px;background:#0c1424;padding:4px;border:1px solid var(--line)}
  .brand h1{font-size:1.18rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;
    background:linear-gradient(90deg,#e8f3ff,#9fd6ff 55%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
  .brand p{font-size:.66rem;letter-spacing:3px;color:var(--dim);text-transform:uppercase;font-family:var(--mono);margin-top:3px}
  .topbar .spacer{flex:1}
  .sysreadout{font-family:var(--mono);font-size:.7rem;letter-spacing:1.5px;color:var(--muted);text-align:right;line-height:1.5}
  .sysreadout b{color:var(--cyan)}
  .backlink{font-family:var(--mono);font-size:.66rem;letter-spacing:1.5px;color:var(--dim);text-decoration:none;border:1px solid var(--line);padding:7px 11px;border-radius:8px;text-transform:uppercase}
  .backlink:hover{color:var(--cyan);border-color:var(--line-bright)}

  /* ---------- track selector ---------- */
  .tracks{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}
  .track{font-family:var(--mono);font-size:.7rem;letter-spacing:1px;text-transform:uppercase;
    padding:9px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--muted);
    background:rgba(14,22,38,.6);transition:.15s;display:flex;align-items:center;gap:8px}
  .track .dot{width:7px;height:7px;border-radius:50%;background:var(--dim)}
  .track.live .dot{background:var(--green);box-shadow:0 0 8px var(--green)}
  .track.active{color:#eaf4ff;border-color:var(--cyan);box-shadow:0 0 0 1px rgba(34,211,238,.4),0 0 22px -6px rgba(34,211,238,.6);background:rgba(13,28,48,.9)}
  .track.locked{opacity:.5;cursor:not-allowed}

  /* ---------- core deck ---------- */
  .deck{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;margin-top:14px}
  @media(max-width:880px){.deck{grid-template-columns:1fr}}
  .panel{position:relative;border:1px solid var(--line);border-radius:16px;
    background:linear-gradient(180deg,rgba(16,28,48,.78),rgba(9,15,30,.7));
    box-shadow:inset 0 1px 0 rgba(150,200,255,.06),0 24px 48px -34px rgba(0,0,0,.9)}
  /* angular corner ticks — the HUD signature */
  .panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--line-bright);opacity:.7}
  .panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
  .panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 16px 0}
  .panel-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line)}
  .panel-h .ic{font-size:1rem}
  .panel-h h2{font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-family:var(--mono)}
  .panel-h .tag{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:1.5px;color:var(--dim)}

  /* readiness core */
  .core-body{display:flex;align-items:center;gap:22px;padding:22px 20px}
  .core{--p:0;position:relative;width:194px;height:194px;flex:0 0 auto;border-radius:50%;
    background:conic-gradient(var(--green) calc(var(--p)*1%), rgba(40,60,92,.5) 0);
    display:grid;place-items:center;transition:background .6s ease;
    filter:drop-shadow(0 0 26px rgba(52,211,153,.25))}
  .core::before{content:"";position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#0f1d33,#080e1c);border:1px solid var(--line)}
  .core .ring2{position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(120,180,255,.25);animation:spin 38s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .core .val{position:relative;text-align:center}
  .core .val .num{font-family:var(--mono);font-size:2.7rem;font-weight:700;line-height:1;color:#eafff6;text-shadow:0 0 18px rgba(52,211,153,.5)}
  .core .val .lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-top:7px}
  .core-meta{flex:1;min-width:0}
  .candrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .candrow label{font-family:var(--mono);font-size:.58rem;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase}
  .candrow input{flex:1;min-width:0;background:rgba(7,12,24,.8);border:1px solid var(--line);border-radius:8px;color:#eaf4ff;font-family:var(--sans);font-size:.92rem;padding:8px 10px;font-weight:600}
  .candrow input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 1px rgba(34,211,238,.35)}
  .statusword{font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;font-size:.82rem;font-weight:700;padding:7px 0}
  .statusword.go{color:var(--green);text-shadow:0 0 14px rgba(52,211,153,.5)}
  .statusword.hold{color:var(--amber)}
  .corestats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .cstat{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:rgba(9,15,30,.6)}
  .cstat .n{font-family:var(--mono);font-size:1.25rem;font-weight:700;color:#eaf4ff}
  .cstat .n small{font-size:.8rem;color:var(--dim)}
  .cstat .k{font-family:var(--mono);font-size:.56rem;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-top:2px}

  /* mini stat dials (right panel) */
  .dials{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
  .dial{display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px}
  .ring{--p:0;--c:var(--cyan);width:104px;height:104px;border-radius:50%;
    background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(40,60,92,.45) 0);display:grid;place-items:center;transition:background .5s}
  .ring::before{content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:#0b1426;border:1px solid var(--line)}
  .ring .rn{position:relative;font-family:var(--mono);font-weight:700;font-size:1.15rem}
  .dial .dk{font-family:var(--mono);font-size:.58rem;letter-spacing:1.3px;color:var(--muted);text-transform:uppercase;text-align:center}

  /* ---------- phase modules ---------- */
  .grid-title{display:flex;align-items:center;gap:10px;margin:26px 2px 12px}
  .grid-title h3{font-family:var(--mono);font-size:.72rem;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
  .grid-title .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
  .phases{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:start}
  .phase{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
    background:linear-gradient(180deg,rgba(15,25,44,.72),rgba(9,15,30,.66));transition:.2s}
  .phase.complete{border-color:rgba(52,211,153,.55);box-shadow:0 0 0 1px rgba(52,211,153,.3),0 0 30px -10px rgba(52,211,153,.5)}
  .phase-h{display:flex;align-items:center;gap:11px;padding:13px 15px;cursor:pointer}
  .phase-h .pic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:1rem;border:1px solid var(--line);background:rgba(7,12,24,.7)}
  .phase.complete .phase-h .pic{border-color:var(--green);box-shadow:0 0 14px -2px rgba(52,211,153,.6)}
  .phase-h .pt{flex:1;min-width:0}
  .phase-h .pt .nm{font-size:.92rem;font-weight:700;letter-spacing:.4px;color:#eaf4ff}
  .phase-h .pt .ow{font-family:var(--mono);font-size:.6rem;letter-spacing:.6px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .phase-h .pct{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--cyan)}
  .phase.complete .phase-h .pct{color:var(--green)}
  .pbar{height:3px;background:rgba(40,60,92,.5)}
  .pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:width .4s}
  .phase.complete .pbar i{background:linear-gradient(90deg,var(--green),#10b981)}
  .steps{display:none;border-top:1px solid var(--line)}
  .phase.open .steps{display:block}
  .phase-h .chev{font-family:var(--mono);color:var(--dim);font-size:.8rem;transition:.2s}
  .phase.open .phase-h .chev{transform:rotate(90deg);color:var(--cyan)}

  .step{display:flex;align-items:flex-start;gap:11px;padding:11px 15px;border-bottom:1px solid rgba(86,140,210,.1);cursor:pointer;transition:background .12s}
  .step:last-child{border-bottom:0}
  .step:hover{background:rgba(34,211,238,.05)}
  .chk{flex:0 0 auto;width:19px;height:19px;border-radius:6px;border:1.5px solid var(--dim);margin-top:1px;display:grid;place-items:center;font-size:.7rem;color:transparent;transition:.15s}
  .step[data-st="prog"] .chk{border-color:var(--amber);color:var(--amber)}
  .step[data-st="done"] .chk{border-color:var(--green);background:rgba(52,211,153,.18);color:var(--green)}
  .step .sl{flex:1;min-width:0}
  .step .sl .t{font-size:.86rem;color:var(--txt);line-height:1.35}
  .step[data-st="done"] .sl .t{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(52,211,153,.5)}
  .step .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .chip{font-family:var(--mono);font-size:.56rem;letter-spacing:.5px;padding:3px 7px;border-radius:6px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;white-space:nowrap}
  .chip.owner{color:var(--purple);border-color:rgba(167,139,250,.3)}
  .chip.form{color:var(--blue);border-color:rgba(96,165,250,.3)}
  .chip.doc{color:var(--amber);border-color:rgba(251,191,36,.3)}
  .chip.doc.on{color:var(--green);border-color:rgba(52,211,153,.4)}
  .step .stword{font-family:var(--mono);font-size:.55rem;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-left:auto;align-self:center;white-space:nowrap}
  .step[data-st="prog"] .stword{color:var(--amber)}
  .step[data-st="done"] .stword{color:var(--green)}

  .locked-note{padding:30px 22px;text-align:center;font-family:var(--mono);font-size:.78rem;letter-spacing:1px;color:var(--dim)}
  .locked-note b{color:var(--amber);display:block;margin-bottom:8px;letter-spacing:2px}
  .preview-note{padding:18px 22px;text-align:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.8px;color:var(--muted);line-height:1.6}
  .preview-note b{color:var(--cyan);display:block;margin-bottom:7px;letter-spacing:2px}
  .foot{margin-top:34px;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:1.5px;color:var(--dim)}
  .ctrls{display:flex;gap:8px;margin-left:auto}
  .btn{font-family:var(--mono);font-size:.6rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:rgba(9,15,30,.7);border-radius:8px;padding:7px 11px;cursor:pointer}
  .btn:hover{color:var(--cyan);border-color:var(--line-bright)}
  @media(prefers-reduced-motion:reduce){.core .ring2{animation:none}}

  /* ---------- new-hire roster ---------- */
  .roster{margin-top:18px}
  .roster .panel-h{flex-wrap:wrap;gap:10px}
  .roster-tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .roster-tools input{background:rgba(7,12,24,.8);border:1px solid var(--line);border-radius:8px;color:#eaf4ff;font-family:var(--sans);font-size:.82rem;padding:7px 10px}
  .roster-tools input.who{width:130px}
  .roster-tools input.search{width:190px}
  .roster-tools input.addhire{width:185px;border-color:rgba(52,211,153,.4)}
  .roster-tools .addbtn{background:linear-gradient(180deg,#34d399,#10b981);color:#06231a;border:none;border-radius:8px;font-family:var(--sans);font-weight:800;font-size:.8rem;letter-spacing:.3px;padding:7px 14px;cursor:pointer}
  .roster-tools .addbtn:hover{filter:brightness(1.06)}
  .roster-tools input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 1px rgba(34,211,238,.35)}
  .roster-live{font-family:var(--mono);font-size:.6rem;letter-spacing:1.2px;color:var(--green);text-transform:uppercase;display:flex;align-items:center;gap:6px}
  .roster-live .pulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:rpulse 1.8s ease-in-out infinite}
  .roster-live.offline{color:var(--pink)} .roster-live.offline .pulse{background:var(--pink);box-shadow:0 0 8px var(--pink);animation:none}
  @keyframes rpulse{0%,100%{opacity:1}50%{opacity:.35}}
  .roster-list{display:flex;gap:11px;overflow-x:auto;padding:15px 16px;scrollbar-width:thin}
  .roster-list::-webkit-scrollbar{height:8px}.roster-list::-webkit-scrollbar-thumb{background:rgba(86,140,210,.3);border-radius:8px}
  .cand{flex:0 0 auto;width:218px;border:1px solid var(--line);border-radius:13px;padding:13px;cursor:pointer;
    background:linear-gradient(180deg,rgba(15,25,44,.7),rgba(9,15,30,.62));transition:.16s;position:relative}
  .cand:hover{border-color:var(--line-bright);transform:translateY(-2px)}
  .cand.active{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(34,211,238,.45),0 0 26px -8px rgba(34,211,238,.6);background:rgba(13,28,48,.92)}
  .cand-top{display:flex;align-items:center;gap:9px}
  .cand-ring{--p:0;--c:var(--cyan);width:42px;height:42px;flex:0 0 auto;border-radius:50%;
    background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(40,60,92,.45) 0);display:grid;place-items:center;position:relative}
  .cand-ring::before{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:#0b1426;border:1px solid var(--line)}
  .cand-ring.done{--c:var(--green)}
  .cand-ring .rn{position:relative;font-family:var(--mono);font-weight:700;font-size:.6rem;color:#eaf4ff}
  .cand-id{min-width:0;flex:1}
  .cand-id .nm{font-size:.92rem;font-weight:700;color:#eaf4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cand-id .pg{font-family:var(--mono);font-size:.58rem;letter-spacing:.4px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ddot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
  .cand-foot{display:flex;align-items:center;gap:6px;margin-top:11px}
  .cand-foot .tb{font-family:var(--mono);font-size:.52rem;letter-spacing:.8px;text-transform:uppercase;padding:3px 7px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
  .cand-foot .tb.live{color:var(--green);border-color:rgba(52,211,153,.4)}
  .cand-foot .src{font-family:var(--mono);font-size:.5rem;letter-spacing:.8px;text-transform:uppercase;padding:3px 6px;border-radius:6px;border:1px solid var(--line);font-weight:700}
  .cand-foot .ph{margin-left:auto;font-family:var(--mono);font-size:.52rem;letter-spacing:1px;text-transform:uppercase;color:var(--green)}
  .cand-foot .ph.wip{color:var(--amber)}
  .roster-empty{padding:34px 22px;text-align:center;font-family:var(--mono);font-size:.78rem;letter-spacing:.6px;color:var(--dim);line-height:1.7}
  .roster-empty b{display:block;color:var(--amber);letter-spacing:2px;margin-bottom:8px}
  .roster-empty.err b{color:var(--pink)}
  .nosel{opacity:.45;pointer-events:none}
  .candrow .sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.5px;color:var(--dim);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .candrow input[readonly]{cursor:default}

  /* ---------- v2.0 · role assignment (phase 1) ---------- */
  .phase.role{grid-column:1/-1;border-color:rgba(251,191,36,.45)}
  .phase.role.complete{border-color:rgba(52,211,153,.55)}
  .rolegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:14px 15px 6px}
  .rolegrid label{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;margin-bottom:5px}
  .rolegrid input,.rolegrid select{width:100%;background:rgba(7,12,24,.8);border:1px solid var(--line);border-radius:8px;color:#eaf4ff;font-family:var(--sans);font-size:.88rem;padding:8px 10px}
  .rolegrid input:focus,.rolegrid select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 1px rgba(251,191,36,.35)}
  .rolegrid select option{background:#0b1426;color:#eaf4ff}
  .roleacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 15px 14px}
  .roleacts .savebtn{background:linear-gradient(180deg,#fbbf24,#f59e0b);color:#2a1a02;border:none;border-radius:8px;font-family:var(--sans);font-weight:800;font-size:.8rem;letter-spacing:.3px;padding:8px 16px;cursor:pointer}
  .roleacts .savebtn:hover{filter:brightness(1.06)}
  .roleacts .rnote{font-family:var(--mono);font-size:.6rem;letter-spacing:.8px;color:var(--muted);line-height:1.5}
  .roleacts .rnote b{color:var(--amber)}
  .rolelock{padding:10px 15px;border-top:1px solid rgba(86,140,210,.1);font-family:var(--mono);font-size:.6rem;letter-spacing:.8px;color:var(--amber)}
  .step.locked{opacity:.45}
  .step.locked .chk{border-style:dashed}
  .step.auto{cursor:default}
  .step.auto:hover{background:transparent}
</style>
</head>
<body>
<!-- NYCID-GATE: @nycid.org staff sign-in required (client gate on nycid-solutions; the data is guarded server-side by the Solutions firestore.rules) -->
<div id="nycid-gate" style="position:fixed;inset:0;z-index:2147483647;background:#0f172a;display:flex;align-items:center;justify-content:center;font-family:system-ui,-apple-system,sans-serif;">
  <div style="text-align:center;max-width:400px;padding:2rem;">
    <img src="nycid-logo.png" alt="NYCID — We Improve Lives" style="width:96px;height:96px;object-fit:contain;display:block;margin:0 auto .5rem">
    <div style="color:#fff;font-weight:700;font-size:1.15rem;margin:.6rem 0;">NYCID Staff Sign-In</div>
    <div style="color:#94a3b8;font-size:.85rem;line-height:1.55;margin-bottom:1.25rem;">This tool is restricted to NYCID staff.<br>Sign in with your <strong style="color:#e2e8f0;">@nycid.org</strong> Google account to continue.</div>
    <button id="nycid-gate-btn" style="display:none;background:#2563eb;color:#fff;border:0;border-radius:.55rem;padding:.85rem 1.5rem;font-size:.95rem;font-weight:600;cursor:pointer;">🔑 Sign in with Google</button>
    <div id="nycid-gate-msg" style="color:#94a3b8;font-size:.8rem;margin-top:1rem;line-height:1.5;">Checking sign-in…</div>
  </div>
</div>
<script type="module">
(async () => {
  const gate=document.getElementById('nycid-gate'),btn=document.getElementById('nycid-gate-btn'),msg=document.getElementById('nycid-gate-msg');
  try{
    const [appM,authM]=await Promise.all([
      import("https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js"),
      import("https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js")
    ]);
    /* v2.0 10-08: the hub lives on nycid-solutions now — one sign-in, same project as the data below */
    const app=appM.initializeApp({apiKey:"AIzaSyDi8cSKSHsG6nZcr8HFq_DNGB3gmgAa40M",authDomain:"nycid-solutions.firebaseapp.com",projectId:"nycid-solutions",storageBucket:"nycid-solutions.firebasestorage.app",messagingSenderId:"528971417370",appId:"1:528971417370:web:2cc920a8fe680f3781cea3"},"nycid-gate-solutions");
    const auth=authM.getAuth(app);
    const ok=u=>!!(u&&u.email&&u.email.toLowerCase().endsWith('@nycid.org'));
    authM.onAuthStateChanged(auth,u=>{
      if(ok(u)){gate.remove(); try{ document.getElementById("whoName").value=(u.email||"").toLowerCase(); localStorage.setItem(WHO_KEY,(u.email||"").toLowerCase()); }catch(e){} return;}   /* 09-17: identity = signed-in account, no typed name */
      if(u){authM.signOut(auth).catch(()=>{});msg.textContent='That account ('+(u.email||'unknown')+') is not an @nycid.org account. Use your NYCID Google account.';}
      else if(msg.textContent==='Checking sign-in…'){msg.textContent='';}
      btn.style.display='';
    });
    btn.onclick=()=>{const p=new authM.GoogleAuthProvider();p.setCustomParameters({hd:'nycid.org',prompt:'select_account'});authM.signInWithPopup(auth,p).catch(e=>{msg.textContent=(e&&e.code==='auth/unauthorized-domain')?'This domain is not authorized for sign-in — add it in Firebase Console → Authentication → Settings → Authorized domains.':'Sign-in did not complete. Try again.';});};
  }catch(e){msg.textContent='Could not load sign-in. Check your connection and refresh.';}
})();
</script>
<!-- /NYCID-GATE -->

<div class="wrap">

  <div class="topbar">
    <img src="nycid-logo.png" alt="NYCID">
    <div class="brand">
      <h1>Onboarding Command</h1>
      <p>Role assignment · SACC &amp; internal documents · Paycom verifies employment</p>
    </div>
    <div class="spacer"></div>
    <div class="sysreadout" id="sysreadout">SYSTEMS <b>0/0</b> ONLINE<br>STATUS: STANDBY</div>
    <a class='backlink' href='/nycid-careers-admin'>⟵ Live Tracker</a>
    <a class='backlink' href='/'>⟵ Index</a>
  </div>

  <!-- NEW-HIRE ROSTER (live on nycid-solutions: NYCID Careers hires + manual adds) -->
  <div class="panel roster">
    <div class="panel-h">
      <span class="ic">🛬</span><h2>New-Hire Roster</h2>
      <div class="roster-tools">
        <span class="roster-live" id="rosterLive"><span class="pulse"></span><span class="t">connecting…</span></span>
        <input class="who" id="whoName" placeholder="signed-in account" spellcheck="false" readonly title="Your signed-in @nycid.org account is your identity here">
        <input class="search" id="rosterSearch" placeholder="Search hires — name, email, phone, role…" spellcheck="false">
        <button class="addbtn" id="showAllBtn" title="Every career_applications record this page can read" style="background:transparent;border:1px solid var(--line-bright);color:var(--dim)">👁 All applicants</button>
        <input class="addhire" id="addHireName" placeholder="+ Add a hire by name…" spellcheck="false">
        <button class="addbtn" id="addHireBtn">Add</button>
        <button class="addbtn" id="exampleTomBtn" title="Loads Tom DeVito Jr. as a practice hire — nothing you tick on him is saved" style="opacity:.85">🎓 Example: Tom DeVito</button>
      </div>
    </div>
    <div id="rosterList" class="roster-list">
      <div class="roster-empty"><b>◌ connecting</b>Reading the NYCID Careers pipeline on nycid-solutions…</div>
    </div>
  </div>

  <!-- 🧭 SUPERVISOR DESIGNATIONS (v2.4) -->
  <div class="phase" id="desigPanel" style="margin-bottom:14px">
    <div class="phase-h" id="desigHead" style="cursor:pointer"><div class="ic">🧭</div><div><div class="nm">Supervisor designations</div><div class="ow">Reporting back-ups per program group · prefill Role Assignment · all editable</div></div><div class="cnt" id="desigCnt">▸</div></div>
    <div id="desigBody" style="display:none;padding:12px 15px 14px">
      <div id="desigRows"></div>
      <div class="roleacts" style="padding:8px 0 0"><button class="savebtn" id="desigSave">💾 Save designations</button><button class="addbtn" id="desigReset" style="background:transparent;border:1px solid var(--line-bright);color:var(--dim)">↺ Reset to defaults</button><div class="rnote" id="desigNote">Type a name, title or program — the list is the staff index. Leave a box empty to keep that slot open for the hiring director.</div></div>
    </div>
  </div>
  <div class="tracks" id="tracks"></div>

  <!-- v2.0 · item 1 for every hire sits above the deck so it is the first thing seen, no scroll -->
  <div class="phases" id="roleHost" style="margin-top:14px"></div>

  <div class="deck" id="deck">
    <!-- READINESS CORE -->
    <div class="panel">
      <div class="panel-h"><span class="ic">🛰️</span><h2>Readiness Core</h2><span class="tag" id="trackTag">SACC TRACK</span></div>
      <div class="core-body">
        <div class="core" id="core" style="--p:0">
          <div class="ring2"></div>
          <div class="val"><div class="num" id="corePct">0%</div><div class="lbl">cleared</div></div>
        </div>
        <div class="core-meta">
          <div class="candrow">
            <label>Hire</label>
            <input id="candName" value="" placeholder="Select a hire from the roster" readonly spellcheck="false">
          </div>
          <div class="sub" id="candSub">No hire selected.</div>
          <div id="candRemove" style="display:none;margin:4px 0 0"><button class="addbtn" id="removeBtn" style="background:transparent;border:1px solid rgba(251,113,133,.6);color:#fb7185;padding:4px 10px;font-size:.72rem">✕ Remove from roster</button> <span style="font:.68rem var(--mono);color:var(--dim)">keeps the record, hides the row</span></div>
          <div class="statusword hold" id="statusWord">⏳ ONBOARDING IN PROGRESS</div>
          <div class="corestats">
            <div class="cstat"><div class="n" id="stDone">0<small id="stTotal">/0</small></div><div class="k">steps cleared</div></div>
            <div class="cstat"><div class="n" id="stPhases">0<small>/7</small></div><div class="k">modules online</div></div>
          </div>
        </div>
      </div>
    </div>

    <!-- SUBSYSTEM DIALS -->
    <div class="panel">
      <div class="panel-h"><span class="ic">📡</span><h2>Subsystems</h2>
        <div class="ctrls">
          <button class="btn" id="expandAll">Expand</button>
          <button class="btn" id="resetTrack">Reset</button>
        </div>
      </div>
      <div class="dials">
        <div class="dial"><div class="ring" id="dDocs" style="--p:0;--c:var(--blue)"><div class="rn" id="dDocsN">0/0</div></div><div class="dk">Documents on file</div></div>
        <div class="dial"><div class="ring" id="dClr" style="--p:0;--c:var(--pink)"><div class="rn" id="dClrN">0/0</div></div><div class="dk">Clearances</div></div>
        <div class="dial"><div class="ring" id="dTrn" style="--p:0;--c:var(--amber)"><div class="rn" id="dTrnN">0/0</div></div><div class="dk">Trainings</div></div>
        <div class="dial"><div class="ring" id="dFrm" style="--p:0;--c:var(--purple)"><div class="rn" id="dFrmN">0/0</div></div><div class="dk" id="dFrmK">SACC forms</div></div>
      </div>
    </div>
  </div>

  <div class="grid-title"><h3 id="phasesTitle">Mission Phases</h3><div class="rule"></div></div>
  <div class="phases" id="phases"></div>

  <div class="foot" id="foot">NYCID · Onboarding Command v2.4.1 · 2026-10-19 13:45 ET · nycid-solutions (career_applications · onboarding_progress) · Role Assignment first on every track · Paycom handles employment verification (I-9 · W-4 · direct deposit) — NYCID keeps SACC + internal documents · no Social Security numbers are collected here</div>
</div>

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
import { getFirestore, collection, query, orderBy, onSnapshot, doc, setDoc, getDoc, serverTimestamp }
    from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";

/* v2.0 10-08: data home = nycid-solutions (career_applications · onboarding_progress; syep_career_applications dropped v2.1).
   Legacy syep-2026-job-placement is read-only since 9/30 and is not read here any more. */
const firebaseConfig = {
  apiKey: "AIzaSyDi8cSKSHsG6nZcr8HFq_DNGB3gmgAa40M",
  authDomain: "nycid-solutions.firebaseapp.com",
  projectId: "nycid-solutions",
  storageBucket: "nycid-solutions.firebasestorage.app",
  messagingSenderId: "528971417370",
  appId: "1:528971417370:web:2cc920a8fe680f3781cea3"
};
const app = initializeApp(firebaseConfig);
const db  = getFirestore(app);
const $ = id => document.getElementById(id);
const esc = s => String(s==null?"":s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");

/* ============================================================
   ONBOARDING TEMPLATES — one per department/track.
   SACC is seeded from the Basecamp "New Hire Check List - SACC".
   Other tracks are stubbed until their checklists are provided.
   step kind: 'doc' | 'form' | 'clear' | 'train' | 'task'
   ============================================================ */
/* ---------- v2.0 · ROLE ROSTER ----------
   MJ 10-08: "we are going to need a role roster because I do not want to have to enter the 3 supervisors
   every time so for now just put tbd". ONE place to edit. When MJ names the supervisors, replace the TBD
   row with one object per person — { id, name, title } — and the Supervisor pick list fills itself. */
/* v2.2: the supervisor list IS the staff index (shared staff-roster.js); id = email */
const ROLE_ROSTER = { supervisors: (window.NYCID_STAFF_ROSTER||[]).map(r=>({ id:r.email, name:r.name, title:[r.title,r.program].filter(Boolean).join(' · ') })) };
if(!ROLE_ROSTER.supervisors.length) ROLE_ROSTER.supervisors.push({ id:"tbd", name:"TBD", title:"staff-roster.js did not load" });
function supLookup(v){ v=String(v||'').trim(); if(!v) return null; const low=v.toLowerCase(); return ROLE_ROSTER.supervisors.find(s=>s.id===low) || ROLE_ROSTER.supervisors.find(s=>s.name.toLowerCase()===low) || ROLE_ROSTER.supervisors.find(s=>s.name.toLowerCase().startsWith(low)) || null; }

/* ---------- v2.0 · ROLE ASSIGNMENT — phase 1 on every live track ----------
   The first item to complete for every hire. Its three steps are not ticked by hand: they clear
   themselves from the saved role fields (onboarding_progress.roleAssignment). Every other phase stays
   soft-locked until the role assignment is saved. */
const ROLE_PHASE = { id:"role", name:"Role Assignment", icon:"🎯", role:true, steps:[
  { id:"role_title",      t:"Role / title assigned",                 owner:"Hiring Director", kind:"task", auto:"title" },
  { id:"role_program",    t:"Program &amp; site assigned",           owner:"Hiring Director", kind:"task", auto:"program" },
  { id:"role_supervisor", t:"Primary supervisor assigned (secondary &amp; tertiary optional)", owner:"Hiring Director", kind:"task", auto:"supervisor" },
]};
const ROLE_FIELDS = ["title","program","group","supervisor","supervisor2","supervisor3","startDate"];

const TEMPLATES = {
  sacc: {
    label: "SACC · After-School", live: true, formsLabel: "SACC forms",
    note: "School-Age Child Care licensed track (OCFS/DYCD). Youth & After-School — COMPASS / SONYC. Paycom verifies employment; NYCID keeps the SACC forms and internal documents.",
    phases: [
      ROLE_PHASE,
      { id:"offer", name:"Offer", icon:"📨", steps:[
        { id:"offer_letter", t:"Offer Letter", owner:"Emily P.", kind:"doc" },
        { id:"offer_accept", t:"Accepted Offer Letter", owner:"Emily P.", kind:"doc" },
      ]},
      { id:"identity", name:"Identity & Documents", icon:"🪪", steps:[
        { id:"paycom_hire", t:"Paycom self-onboarding complete — employment verification (I-9 · W-4 · direct deposit) done in Paycom", owner:"Jessica O.", kind:"task" },
        { id:"i9", t:"Copy of I-9 (List A, or List B and C)", owner:"Emily P.", kind:"doc" },
        { id:"resume", t:"Resume", owner:"Emily P.", kind:"doc" },
        { id:"diploma", t:"Diploma / Transcript", owner:"Emily P.", kind:"doc" },
      ]},
      { id:"forms", name:"SACC Forms", icon:"📋", steps:[
        { id:"f6001", t:"6001 — CC Provider, Staff, Volunteer Member Info", owner:"Emily P.", kind:"form", code:"6001" },
        { id:"f6002", t:"6002 — Qualifications", owner:"Emily P.", kind:"form", code:"6002" },
        { id:"f6003", t:"6003 — References", owner:"Emily P.", kind:"form", code:"6003" },
        { id:"f6004", t:"6004 — Medical", owner:"Emily P.", kind:"form", code:"6004" },
        { id:"f6005", t:"6005 — Criminal Conviction Statement", owner:"Emily P.", kind:"form", code:"6005" },
        { id:"f6022", t:"6022 — Staff Exclusion List", owner:"Emily P.", kind:"form", code:"6022" },
        { id:"lsss", t:"LSSS-3370-SCR Form", owner:"Emily P.", kind:"form", code:"LSSS" },
      ]},
      { id:"refs", name:"References", icon:"🤝", steps:[
        { id:"ref_personal", t:"Personal reference doc", owner:"Maram S.", kind:"doc" },
        { id:"ref_employ", t:"Employment reference doc", owner:"Maram S.", kind:"doc" },
      ]},
      { id:"clearance", name:"Fingerprints & Clearances", icon:"🔒", steps:[
        { id:"f4930", t:"4930 — Fingerprint appointment", owner:"Emily P.", kind:"form", code:"4930" },
        { id:"fp_receipt", t:"Fingerprint receipt", owner:"Emily P.", kind:"doc" },
        { id:"pets_nom", t:"PETS Nomination", owner:"Ivy B.", kind:"clear" },
        { id:"pets_clr", t:"PETS Clearance", owner:"Ivy B.", kind:"clear" },
        { id:"sacc_clr", t:"SACC Clearance", owner:"Ivy B.", kind:"clear" },
        { id:"ready", t:"READY TO WORK", owner:"Ivy B.", kind:"clear" },
      ]},
      { id:"training", name:"Training", icon:"🎓", steps:[
        { id:"hs5", t:"5-Hr Health &amp; Safety Training", owner:"Emily P.", kind:"train" },
        { id:"elijah", t:"Anaphylaxis / Elijah's Law Training", owner:"Emily P.", kind:"train" },
        { id:"mandated", t:"Mandated Reporter Training", owner:"Emily P.", kind:"train" },
        { id:"glquiz", t:"New Group Leader Quiz", owner:"—", kind:"train" },
      ]},
      { id:"final", name:"Finalization", icon:"🚀", steps:[
        { id:"sched", t:"Update program staff schedule with new employee", owner:"Emily P., Sarah W.", kind:"task" },
        { id:"paycom_done", t:"Paycom Complete", owner:"Jessica O.", kind:"task" },
        { id:"createfile", t:"Create a file for staff member", owner:"Sarah W.", kind:"task" },
        { id:"expect", t:"Staff Expectations Sheet", owner:"—", kind:"doc" },
      ]},
    ]
  },
  wfi: {
    label: "Workforce Initiatives", live: true, formsLabel: "Paycom / HR forms",
    note: "Workforce Initiatives — SYEP / PBL Instructor & WFI staff. Paycom self-onboarding verifies employment (I-9, W-4, direct deposit); NYCID keeps the internal documents. No OCFS/SACC 600x forms.",
    phases: [
      ROLE_PHASE,
      { id:"offer", name:"Offer", icon:"📨", steps:[
        { id:"wfi_offer_letter", t:"Offer Letter sent", owner:"Emily P.", kind:"doc" },
        { id:"wfi_offer_accept", t:"Accepted Offer Letter", owner:"Emily P.", kind:"doc" },
      ]},
      { id:"hire", name:"Paycom Onboarding", icon:"🧾", steps:[
        { id:"wfi_paycom_invite", t:"Paycom onboarding invite sent to the new hire", owner:"Jessica O.", kind:"task" },
        { id:"wfi_paycom_hire", t:"Paycom self-onboarding complete — employment verification (I-9 · W-4 · direct deposit) done in Paycom", owner:"Jessica O.", kind:"task" },
        { id:"wfi_hire_approved", t:"Hire approved by Sr. Director", owner:"Allan A.", kind:"task" },
      ]},
      { id:"identity", name:"Internal Documents", icon:"🪪", steps:[
        { id:"wfi_id", t:"Government-issued photo ID (copy for the NYCID file)", owner:"Emily P.", kind:"doc" },
        { id:"wfi_resume", t:"Resume", owner:"Emily P.", kind:"doc" },
        { id:"wfi_edu", t:"Diploma / Transcript", owner:"Emily P.", kind:"doc" },
      ]},
      { id:"clearance", name:"Fingerprints & Clearances", icon:"🔒", steps:[
        { id:"wfi_fp_appt", t:"Fingerprint appointment", owner:"Emily P.", kind:"form" },
        { id:"wfi_fp_receipt", t:"Fingerprint receipt", owner:"Emily P.", kind:"doc" },
        { id:"wfi_pets_nom", t:"PETS Nomination", owner:"Ivy B.", kind:"clear" },
        { id:"wfi_pets_clr", t:"PETS Clearance", owner:"Ivy B.", kind:"clear" },
        { id:"wfi_cleared", t:"Cleared to start", owner:"Ivy B.", kind:"clear" },
      ]},
      { id:"training", name:"Training", icon:"🎓", steps:[
        { id:"wfi_mandated", t:"Mandated Reporter Training", owner:"Emily P.", kind:"train" },
        { id:"wfi_shpt", t:"Sexual Harassment Prevention Training (SHPT)", owner:"Emily P.", kind:"train" },
        { id:"wfi_pbl", t:"PBL Instructor program training", owner:"Allan A.", kind:"train" },
        { id:"wfi_paycom_train", t:"Paycom &amp; timekeeping orientation", owner:"Jessica O.", kind:"train" },
      ]},
      { id:"final", name:"Finalization", icon:"🚀", steps:[
        { id:"wfi_sched", t:"Add to program staff schedule", owner:"Sarah W.", kind:"task" },
        { id:"wfi_paycom_done", t:"Paycom Complete", owner:"Jessica O.", kind:"task" },
        { id:"wfi_file", t:"Create staff file", owner:"Sarah W.", kind:"task" },
        { id:"wfi_expect", t:"Staff Expectations Sheet", owner:"Allan A.", kind:"doc" },
        { id:"wfi_firstday", t:"First-day assignment confirmed", owner:"Allan A.", kind:"task" },
      ]},
    ]
  },
  cmsi:  { label:"Crisis &amp; Conflict Mgmt", live:false },
  cs:    { label:"Community Schools &amp; MH", live:false },
  youth: { label:"Youth &amp; After-School (non-SACC)", live:false },
};
const KIND_LABEL = { doc:"Document", form:"Form", clear:"Clearance", train:"Training", task:"Task" };

// Department (career_applications.departmentId) -> default onboarding track.
// Youth & After-School new hires default to the live SACC track.
const DEPT_TRACK = { youth:"sacc", workforce:"wfi", conflict:"cmsi", schools:"cs" };
const DEPT_COLOR = { conflict:"#fb7185", workforce:"#34d399", schools:"#60a5fa", youth:"#fbbf24" };

/* ---------- live state ---------- */
let hires = [];               // hired career_applications (the roster)
let progressByApp = {};       // appId -> onboarding_progress doc data
let selectedId = null;        // currently-loaded hire (appId)
let track = "sacc";           // track of the selected hire
let expanded = false;
let rosterReady = false, progressReady = false;

const NEXT = { '':'prog', 'prog':'done', 'done':'' };

/* who am I (for updatedBy) */
const WHO_KEY = "nycid_onb_reviewer";
$("whoName").value = localStorage.getItem(WHO_KEY) || "";
$("whoName").addEventListener("blur", ()=> localStorage.setItem(WHO_KEY, $("whoName").value.trim()));

/* deep-link ?appId */
const urlAppId = new URLSearchParams(location.search).get("appId");
if(urlAppId) selectedId = urlAppId;

/* ---------- selected-hire helpers ---------- */
function selHire(){ return hires.find(h=>h.id===selectedId) || null; }
function trackOf(appId){
  const p = progressByApp[appId];
  if(p && p.track) return p.track;                       // staff-set override wins
  const h = hires.find(x=>x.id===appId);
  return (h && (h.defaultTrack || DEPT_TRACK[h.departmentId])) || "sacc";  // else hire's default / dept default
}
function stepsOf(appId){ return (progressByApp[appId] && progressByApp[appId].steps) || {}; }
/* v2.0 role assignment — the saved fields on the hire's progress doc */
function roleOf(appId){ return (progressByApp[appId] && progressByApp[appId].roleAssignment) || {}; }
function roleStepDone(appId, stepId){
  const s = ROLE_PHASE.steps.find(x=>x.id===stepId); if(!s) return null;
  const v = String(roleOf(appId)[s.auto]||"").trim();
  return v ? 'done' : '';
}
function roleComplete(appId){ return ROLE_PHASE.steps.every(s=>roleStepDone(appId, s.id)==='done'); }
function getSt(stepId){ if(!selectedId) return ''; const r = roleStepDone(selectedId, stepId); if(r!==null) return r; return stepsOf(selectedId)[stepId] || ''; }

/* progress % for any hire (for roster rings) — counts done over its live track's steps */
function pctFor(appId){
  const tk = trackOf(appId); const tpl = TEMPLATES[tk];
  if(!tpl || !tpl.phases) return [0,0,0];
  const all = tpl.phases.flatMap(p=>p.steps);
  const steps = stepsOf(appId);
  const done = all.filter(s=> s.auto ? roleStepDone(appId, s.id)==='done' : steps[s.id]==='done').length;
  return [done, all.length, all.length?Math.round(done/all.length*100):0];
}

/* ---------- writes ---------- */
async function writeProgress(){
  if(!selectedId) return;
  const h = selHire(); if(!h) return;
  // full-overwrite the steps map (cleared steps must disappear) + re-assert identity
  const steps = {}; const cur = stepsOf(selectedId);
  Object.keys(cur).forEach(k=>{ if(cur[k]) steps[k]=cur[k]; });
  const prev = progressByApp[selectedId] || {};
  const payload = {
    appId: selectedId,
    applicantName: h.applicantName || "",
    email: h.email || "",
    phone: h.phone || "",
    department: h.department || "",
    departmentId: h.departmentId || "",
    program: h.program || "",
    programCode: h.programCode || "",
    source: h.source || "manual",
    track,
    steps,
    roleAssignment: prev.roleAssignment || {},
    startedAt: prev.startedAt || new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    updatedBy: $("whoName").value.trim() || ""
  };
  // optimistic local update so the UI is instant; snapshot confirms shortly after
  progressByApp[selectedId] = payload;
  if(selectedId===EXAMPLE_ID){ payload._example=true; toast('🎓 Example person — ticks stay in this browser, nothing is saved.'); return; }
  try{ await setDoc(doc(db,"onboarding_progress", selectedId), payload); }
  catch(e){ console.error("onboarding_progress write failed:", e);
    toast("Save failed — is the onboarding_progress rule deployed? ("+(e.code||e.message)+")", true); }
}

function toggleStep(stepId){
  if(!selectedId) return;
  if(roleStepDone(selectedId, stepId)!==null){ toast('Role steps clear themselves — fill in the Role Assignment and press Save.'); return; }
  if(!roleComplete(selectedId)){ toast('🎯 Complete the Role Assignment first — it is item 1 for every hire.', true); return; }
  const cur = { ...stepsOf(selectedId) };
  const nv = NEXT[cur[stepId]||''];
  if(nv) cur[stepId]=nv; else delete cur[stepId];
  if(!progressByApp[selectedId]) progressByApp[selectedId] = { steps:{} };
  progressByApp[selectedId].steps = cur;
  renderAll(true);
  writeProgress();
}

/* ---------- v2.4 · SUPERVISOR DESIGNATIONS ---------- */
const DESIG_GROUPS = [
  { id:'ffs',    label:'FFS after-school (SACC + non-SACC)', tracks:['sacc','youth'] },
  { id:'cmsi',   label:'CMSI — school-based mediation',       tracks:['cmsi'] },
  { id:'crisis', label:'Conflict management',                 tracks:[] },
  { id:'other',  label:'Workforce Initiatives & all other programs', tracks:['wfi','cs'] },
];
/* MJ 10-19 09:22 — the starting designations; the saved org_settings/onboarding_supervisors doc overrides */
const DESIG_DEFAULTS = {
  ffs:    { p:'', s:'ibilotti@nycid.org', t:'cgonzalez@nycid.org' },
  cmsi:   { p:'mpenn@nycid.org', s:'mdevito@nycid.org', t:'cgonzalez@nycid.org' },
  crisis: { p:'', s:'ibilotti@nycid.org', t:'cgonzalez@nycid.org' },   /* MJ 10-19 09:26: this group is Conflict management (not Crisis) */
  other:  { p:'', s:'', t:'mcandella@nycid.org' },
};
let DESIG = JSON.parse(JSON.stringify(DESIG_DEFAULTS)), desigMeta = null;
function supName(email){ const s=ROLE_ROSTER.supervisors.find(x=>x.id===String(email||'').toLowerCase()); return s ? s.name : (email||''); }
function groupForTrack(tk){ const g=DESIG_GROUPS.find(g=>g.tracks.includes(tk)); return g ? g.id : 'other'; }
function desigRender(){
  const host=$("desigRows"); if(!host) return;
  host.innerHTML = DESIG_GROUPS.map(g=>{ const d=DESIG[g.id]||{p:'',s:'',t:''}; return `<div class="rolegrid" style="padding:6px 0;border-bottom:1px solid var(--line);align-items:end"><div><label>Program group</label><div style="font:600 .9rem/1.3 system-ui;padding:6px 0">${esc(g.label)}</div></div>
    <div><label>Primary</label><input list="supList" data-g="${g.id}" data-k="p" value="${esc(supName(d.p))}" placeholder="open — hiring director picks" autocomplete="off"></div>
    <div><label>Secondary</label><input list="supList" data-g="${g.id}" data-k="s" value="${esc(supName(d.s))}" placeholder="open" autocomplete="off"></div>
    <div><label>Tertiary</label><input list="supList" data-g="${g.id}" data-k="t" value="${esc(supName(d.t))}" placeholder="open" autocomplete="off"></div></div>`; }).join('')
    + `<datalist id="supList">${ROLE_ROSTER.supervisors.map(s=>`<option value="${esc(s.name)}">${esc(s.title||'')}</option>`).join('')}</datalist>`;
  $("desigNote").textContent = desigMeta ? `Saved ${new Date(desigMeta.updatedAt).toLocaleString('en-US',{month:'short',day:'numeric',hour:'numeric',minute:'2-digit'})} by ${desigMeta.updatedBy||''} · type a name, title or program; empty = open for the hiring director.` : 'Defaults from MJ 10-19 — not saved yet. Type a name, title or program; empty = open for the hiring director.';
}
async function desigLoad(){
  try{ const snap=await getDoc(doc(db,"org_settings","onboarding_supervisors")); if(snap.exists()){ const d=snap.data()||{}; if(d.groups){ DESIG=Object.assign(JSON.parse(JSON.stringify(DESIG_DEFAULTS)), d.groups); desigMeta={updatedAt:d.updatedAt,updatedBy:d.updatedBy}; } } }
  catch(e){ console.warn('designations read', e); }
  desigRender();
}
async function desigSave(){
  const next={}; DESIG_GROUPS.forEach(g=>{ next[g.id]={}; ['p','s','t'].forEach(k=>{ const inp=$("desigRows").querySelector(`input[data-g="${g.id}"][data-k="${k}"]`); const v=(inp&&inp.value||'').trim(); const sup=supLookup(v); next[g.id][k]= sup ? sup.id : v; }); });
  const meta={updatedAt:new Date().toISOString(), updatedBy:$("whoName").value.trim()||''};
  try{ await setDoc(doc(db,"org_settings","onboarding_supervisors"), { groups:next, ...meta }, {merge:true}); DESIG=next; desigMeta=meta; desigRender(); renderAll(true); toast('Supervisor designations saved.'); }
  catch(e){ toast('Could not save designations: '+(e.code||e.message), true); }
}
$("desigHead").onclick = ()=>{ const b=$("desigBody"); const open=b.style.display==='none'; b.style.display=open?'':'none'; $("desigCnt").textContent=open?'▾':'▸'; };
$("desigSave").onclick = desigSave;
$("desigReset").onclick = ()=>{ if(!confirm('Reset the four rows to the 10-19 defaults? (Not saved until you press Save.)')) return; DESIG=JSON.parse(JSON.stringify(DESIG_DEFAULTS)); desigRender(); };
desigLoad();

/* v2.0 — save the role assignment (phase 1) */
async function saveRole(){
  if(!selectedId){ toast('Add or select a hire above first.'); return; }
  const ra = {};
  ROLE_FIELDS.forEach(k=>{ const el=$("role-"+k); ra[k] = el ? String(el.value||"").trim() : ""; });
  [['supervisor','supervisorName'],['supervisor2','supervisor2Name'],['supervisor3','supervisor3Name']].forEach(([k,nk])=>{ const sup=supLookup(ra[k]); if(sup){ ra[k]=sup.id; ra[nk]=sup.name; } else { ra[nk]=ra[k]; } });
  ra.assignedBy = $("whoName").value.trim() || "";
  ra.assignedAt = new Date().toISOString();
  if(!ra.title || !ra.program || !ra.supervisor){ toast('Role / title, Program & site and Supervisor are all required.', true); return; }
  if(!progressByApp[selectedId]) progressByApp[selectedId] = { steps:{} };
  progressByApp[selectedId].roleAssignment = ra;
  renderAll(true);
  await writeProgress();
  toast('🎯 Role assignment saved — the rest of the checklist is open.');
}

async function setTrack(tk){
  if(!TEMPLATES[tk] || !TEMPLATES[tk].live) return;
  track = tk;
  renderAll();
  await writeProgress();   // persists the track override onto the hire's doc
}

/* ---------- live subscriptions (nycid-solutions) — THREE sources merge into one roster ----------
   1) career_applications  (NYCID Careers, all departments) — hired, straight from the Live Tracker
      (SYEP Careers was retired 10-19 — NYCID Careers is the single source; its old rows were merged in)
   2) manual adds — onboarding_progress docs with source:'manual' (typed-in hires,
      so the Command Center is usable even before anyone is hired through Careers)  */
let nycidHires = [], syepHires = [], allApps = []; /* v2.2: every applicant, for the search */
let appsErr = ''; let showAll = false; /* v2.3 diagnostics */
let nycidReady = false, syepReady = true; /* v2.1: no SYEP Careers source any more */

function rebuildHires(){
  // manual hires live only in onboarding_progress (source:'manual')
  const manualHires = Object.values(progressByApp)
    .filter(p => p && p.source === 'manual' && !p.removed)
    .map(p => ({ id:p.appId, applicantName:p.applicantName||'(unnamed)', email:p.email||'', phone:p.phone||'',
                 department:p.department||'', departmentId:p.departmentId||'', program:p.program||'Manual add',
                 source:'manual', defaultTrack:p.track||'sacc' }));
  // careers hires win over a same-id manual stub (shouldn't collide — manual ids are prefixed)
  const seen = new Set();
  hires = [];
  [...nycidHires, ...syepHires, ...manualHires].forEach(h=>{ if(!seen.has(h.id)){ seen.add(h.id); hires.push(h); } });

  rosterReady = nycidReady || syepReady || progressReady;
  const n = hires.length;
  if(appsErr) setRosterLive("offline", `career_applications read failed — ${appsErr}${/permission/i.test(appsErr)?' (sign in with @nycid.org; rules v96 allow staff reads)':''}`);
  else if(nycidReady) setRosterLive("online", `live · ${n} hire${n===1?"":"s"} · ${allApps.length} application${allApps.length===1?"":"s"} read`);

  // resolve selection: keep current, else deep-link, else first
  if(selectedId && !hires.some(h=>h.id===selectedId)) selectedId = null;
  if(!selectedId && n){
    selectedId = (urlAppId && hires.some(h=>h.id===urlAppId)) ? urlAppId : hires[0].id;
  }
  if(selectedId) track = trackOf(selectedId);
  renderRoster(); renderAll();
}

// 1) NYCID Careers
/* v2.1: plain collection read — an orderBy on submittedAtSrv silently dropped offline / merged rows that lack it; sort here instead */
/* v2.3 ROOT CAUSE of "Hired on the tracker, not on the hub": these listeners used to start the moment the module ran — before the
   Google sign-in resolved — so Firestore refused them as anonymous, and a refused listener never retries. Now they start (and restart)
   only once an @nycid.org account is signed in. */
let unsubApps=null, unsubProg=null;
function startListeners(){
  if(unsubApps){ try{unsubApps();}catch(e){} } if(unsubProg){ try{unsubProg();}catch(e){} }
unsubApps = onSnapshot(collection(db,"career_applications"), snap=>{
  const ms = r => { if(r.submittedAtSrv && typeof r.submittedAtSrv.toMillis==='function') return r.submittedAtSrv.toMillis(); const t=Date.parse(r.hiredAt||r.onboardingAt||r.submittedAt||r.receivedOn||''); return isNaN(t)?0:t; };
  allApps = snap.docs.map(d=>({id:d.id, ...d.data(), source:'nycid'})).sort((a,b)=> ms(b)-ms(a));
  const low = v => String(v||'').toLowerCase();
  /* v2.3.1 (MJ 10-19 09:14, "it needs to work backwards"): the roster keys on STATUS only. The tracker sets stage:'onboarding' when a
     person is marked Hired and leaves it there when they are moved back to Interviewing, so stage can never be the test. */
  nycidHires = allApps.filter(r => low(r.status)==='hired');
  appsErr=''; nycidReady = true; rebuildHires();
}, err=>{
  appsErr = (err.code||err.message||'error'); nycidReady = true; rebuildHires();
});
  startProgress();
}

// 2) (SYEP Careers listener removed 10-19 — NYCID Careers is the single source)

// 3) onboarding_progress (state for everyone + surfaces manual hires)
/* 09-17 (MJ): EXAMPLE PERSON for learning the hub — Tom DeVito Jr. (the suite's standing demo persona).
   Lives only in this browser (localStorage flag), never written to onboarding_progress; every tick on him is local. */
const EXAMPLE_ID='example_tom';
function exampleTom(){ return { appId:EXAMPLE_ID, applicantName:'Tom DeVito Jr. (EXAMPLE)', email:'tomdevitojr@nycid.org', phone:'',
  department:'Youth & After-School', departmentId:'ya', program:'COMPASS — PS 16 (example)', programCode:'', source:'manual', track:'sacc',
  steps:{ offer_letter:'done', offer_accept:'done', paycom_hire:'done', i9:'done', resume:'done', f6001:'done', f6002:'done' },
  roleAssignment:{ title:'Group Leader (example)', program:'COMPASS — PS 16 (example)', supervisor:'tbd', supervisorName:'TBD', startDate:'2026-09-08', assignedBy:'example', assignedAt:'2026-09-01T13:00:00.000Z' },
  startedAt:'2026-09-01T13:00:00.000Z', updatedAt:new Date().toISOString(), updatedBy:'example', _example:true }; }
function injectExample(){ if(localStorage.getItem('nycid-hub-example')==='1'){ const keep=(progressByApp[EXAMPLE_ID]&&progressByApp[EXAMPLE_ID].steps)||null; progressByApp[EXAMPLE_ID]=exampleTom(); if(keep) progressByApp[EXAMPLE_ID].steps=keep; } }
function startProgress(){
unsubProg = onSnapshot(collection(db,"onboarding_progress"), snap=>{
  const keepEx = progressByApp[EXAMPLE_ID];
  progressByApp = {};
  snap.docs.forEach(d=> progressByApp[d.id] = d.data());
  if(keepEx) progressByApp[EXAMPLE_ID]=keepEx; else injectExample();
  progressReady = true;
  rebuildHires();
}, err=>{ progressReady = true; appsErr = appsErr || ('onboarding_progress: '+(err.code||err.message)); console.error("onboarding_progress listener:", err); rebuildHires(); });
}
onAuthStateChanged(getAuth(app), u=>{
  const ok = !!(u && u.email && /@nycid\.org$/i.test(u.email));
  if(ok){ setRosterLive("online", "connecting as "+u.email.toLowerCase()+"…"); startListeners(); }
  else { if(unsubApps){ try{unsubApps();}catch(e){} unsubApps=null; } if(unsubProg){ try{unsubProg();}catch(e){} unsubProg=null; } setRosterLive("offline", "sign in with your @nycid.org account to load the roster"); }
});

/* ---------- roster render ---------- */
function setRosterLive(state, txt){
  const el = $("rosterLive"); el.className = "roster-live"+(state==="offline"?" offline":"");
  el.querySelector(".t").textContent = txt;
}
$("rosterSearch").addEventListener("input", renderRoster);

function renderRoster(){
  const host = $("rosterList");
  if(!rosterReady){ return; }
  const term = ($("rosterSearch").value||"").toLowerCase().trim();
  if(showAll){
    const onRoster=new Set(hires.map(h=>h.id));
    const rows=allApps.filter(a=>!term||[a.applicantName,a.email,a.status,a.stage,a.program,a.id].filter(Boolean).join(' ').toLowerCase().includes(term));
    host.innerHTML = `<div style="grid-column:1/-1;font:600 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fbbf24;padding:6px 2px 0">All applicants the page can read — ${rows.length} of ${allApps.length}${appsErr?' · READ FAILED: '+esc(appsErr):''}</div>`+(rows.map(a=>`<div class="cand" style="border-style:dashed;cursor:default"><div class="cand-top"><div class="cand-ring" style="--p:0;opacity:.5"><div class="rn">${onRoster.has(a.id)?'✓':'—'}</div></div><div class="cand-id"><div class="nm">${esc(a.applicantName||a.name||'(no applicantName)')}</div><div class="pg">${esc(a.program||'')}${a.email?' · '+esc(a.email):''}<br><span style="font-size:.62rem;opacity:.7">${esc(a.id)}</span></div></div></div><div class="cand-foot"><span class="src" style="color:#fbbf24;border-color:#fbbf2466">STATUS: ${esc(String(a.status||'—').toUpperCase())}${a.stage?' · '+esc(String(a.stage).toUpperCase()):''}</span>${onRoster.has(a.id)?'<span class="src">ON ROSTER</span>':`<button class="addbtn" data-start="${esc(a.id)}" style="margin-left:auto;padding:4px 10px;font-size:.72rem">＋ Start onboarding</button>`}</div></div>`).join('')||'<div class="roster-empty" style="grid-column:1/-1"><b>nothing read</b>career_applications returned no records to this account.</div>');
    wireStart(host); return;
  }
  let list = hires.slice();
  if(term){ const parts=term.split(/\s+/); list = list.filter(h => { const ra=roleOf(h.id); const hay=[h.applicantName,h.email,h.phone,h.program,h.department,ra.title,ra.program,ra.supervisorName].filter(Boolean).join(" ").toLowerCase(); return parts.every(pt=>hay.includes(pt)); }); }
  /* v2.2: applicants who are NOT on the roster but match the search */
  let extra = [];
  if(term){ const parts=term.split(/\s+/); const onRoster=new Set(hires.map(h=>h.id)); extra = allApps.filter(a=>!onRoster.has(a.id)).filter(a=>{ const hay=[a.applicantName,a.email,a.phone,a.program,a.department].filter(Boolean).join(' ').toLowerCase(); return parts.every(pt=>hay.includes(pt)); }).slice(0,8); }
  const extraHtml = extra.length ? `<div style="grid-column:1/-1;font:600 .68rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fbbf24;padding:6px 2px 0">Applicants not on the roster — ${extra.length} match${extra.length>1?'es':''}</div>`+extra.map(a=>`<div class="cand" style="border-style:dashed;cursor:default"><div class="cand-top"><div class="cand-ring" style="--p:0;opacity:.5"><div class="rn">—</div></div><div class="cand-id"><div class="nm">${esc(a.applicantName||'(unnamed)')}</div><div class="pg">${esc(a.program||'')}${a.email?' · '+esc(a.email):''}</div></div></div><div class="cand-foot"><span class="src" style="color:#fbbf24;border-color:#fbbf2466">TRACKER: ${esc(String(a.status||'new').toUpperCase())}${a.stage?' · '+esc(String(a.stage).toUpperCase()):''}</span><button class="addbtn" data-start="${esc(a.id)}" style="margin-left:auto;padding:4px 10px;font-size:.72rem">＋ Start onboarding</button></div></div>`).join('') : '';
  if(list.length===0 && !extra.length){
    host.innerHTML = hires.length===0
      ? `<div class="roster-empty"><b>◌ no hires yet</b>Hires from <b style="display:inline;color:var(--cyan)">NYCID Careers</b> (marked Hired on the Live Tracker) appear here automatically — or type a name in <b style="display:inline;color:var(--txt)">+ Add a hire</b> above to start tracking anyone right now.</div>`
      : `<div class="roster-empty"><b>🔍 no matches</b>None of the ${hires.length} hire${hires.length===1?'':'s'} or ${allApps.length} applicant${allApps.length===1?'':'s'} match "${esc(term)}".</div>`;
    return;
  }
  if(list.length===0){ host.innerHTML = `<div class="roster-empty" style="grid-column:1/-1"><b>🔍 not on the roster yet</b>No hire matches "${esc(term)}" — but these applicants do. ＋ Start onboarding puts them here.</div>`+extraHtml; wireStart(host); return; }
  const SRC = { nycid:{t:'NYCID CAREERS',c:'#22d3ee'}, syep:{t:'NYCID CAREERS',c:'#22d3ee'}, manual:{t:'MANUAL',c:'#a78bfa'} };
  host.innerHTML = list.map(h=>{
    const [d,t,pct] = pctFor(h.id);
    const tk = trackOf(h.id); const tpl = TEMPLATES[tk]||{};
    const col = DEPT_COLOR[h.departmentId] || "var(--dim)";
    const complete = t>0 && d===t;
    const src = SRC[h.source] || SRC.manual;
    return `<div class="cand${h.id===selectedId?' active':''}" data-id="${esc(h.id)}">
      <div class="cand-top">
        <div class="cand-ring${complete?' done':''}" style="--p:${pct}"><div class="rn">${pct}%</div></div>
        <div class="cand-id">
          <div class="nm">${esc(h.applicantName||"—")}</div>
          <div class="pg"><span class="ddot" style="background:${col}"></span>${esc(roleOf(h.id).title || h.program || h.department || "—")}</div>
        </div>
      </div>
      <div class="cand-foot">
        <span class="src" style="color:${src.c};border-color:${src.c}55">${src.t}</span>
        <span class="tb${tpl.live?' live':''}">${esc((tpl.label||tk).replace(/&amp;/g,'&'))}</span>
        <span class="ph${complete?'':' wip'}">${complete?'✓ ready':d+'/'+t}</span>
      </div>
    </div>`;
  }).join("") + extraHtml;
  host.querySelectorAll(".cand[data-id]").forEach(c=> c.onclick=()=>{
    selectedId = c.dataset.id; track = trackOf(selectedId);
    const u = new URL(location); u.searchParams.set("appId", selectedId); history.replaceState(null,"",u);
    renderRoster(); renderAll();
  });
  wireStart(host);
}
/* v2.2: ＋ Start onboarding for an applicant the tracker never flagged Hired — an onboarding_progress record under the real application id */
function wireStart(host){
  host.querySelectorAll('[data-start]').forEach(b=> b.onclick=async (e)=>{ e.stopPropagation(); const a=allApps.find(x=>x.id===b.dataset.start); if(!a) return;
    const id=a.id, tk=DEPT_TRACK[a.departmentId]||'sacc';
    const payload={ appId:id, applicantName:a.applicantName||'', email:a.email||'', phone:a.phone||'', department:a.department||'', departmentId:a.departmentId||'', program:a.program||'', programCode:a.programCode||'',
      source:'manual', origin:'careers', trackerStatus:a.status||'', track:tk, steps:{}, startedAt:new Date().toISOString(), updatedAt:new Date().toISOString(), updatedBy:$("whoName").value.trim()||'' };
    progressByApp[id]=payload; selectedId=id; track=tk; $("rosterSearch").value=''; rebuildHires();
    try{ await setDoc(doc(db,"onboarding_progress",id), payload, {merge:true}); toast('On the roster — '+(a.applicantName||'')+' starts at Role Assignment.'); }
    catch(err){ toast('Could not save: '+(err.code||err.message), true); }
  });
}

/* ---------- tracks ---------- */
function renderTracks(){
  const el = $("tracks"); el.innerHTML="";
  const h = selHire();
  Object.entries(TEMPLATES).forEach(([k,t])=>{
    const d=document.createElement('div');
    const isAuto = h && DEPT_TRACK[h.departmentId]===k;
    d.className='track'+(t.live?' live':' locked')+(k===track?' active':'');
    d.innerHTML=`<span class="dot"></span>${t.label}${isAuto?' · auto':''}`;
    if(t.live) d.onclick=()=>setTrack(k);
    el.appendChild(d);
  });
}

function setRing(el,pct,numEl,numTxt){ if(el) el.style.setProperty('--p', pct); if(numEl) numEl.textContent = numTxt; }

/* ---------- phases ---------- */
function renderPhases(){
  const host = $("phases");
  const h = selHire();
  const tpl = TEMPLATES[track] || {};
  $("trackTag").textContent = (track.toUpperCase())+' TRACK';
  $("phasesTitle").textContent = (tpl.label||track).replace(/&amp;/g,'&')+' — Mission Phases';

  if(!tpl.live || !tpl.phases){
    $("roleHost").innerHTML='';
    host.innerHTML = `<div class="panel" style="grid-column:1/-1"><div class="locked-note"><b>⚠ Awaiting Requirements</b>The <b style="display:inline;color:var(--txt)">${esc((tpl.label||track).replace(/&amp;/g,'&'))}</b> onboarding checklist hasn't been loaded yet. Drop its steps into TEMPLATES to bring it online — or pick a live track above.</div></div>`;
    return;
  }
  const preview = !h;
  if(preview) $("phasesTitle").textContent += ' · preview';
  host.innerHTML=''; $("roleHost").innerHTML='';
  if(preview){
    const pv=document.createElement('div'); pv.className='panel'; pv.style.gridColumn='1/-1';
    pv.innerHTML=`<div class="preview-note"><b>◌ Track Preview — ${esc((tpl.label||track).replace(/&amp;/g,'&'))}</b>Showing the complete ${esc((tpl.label||track).replace(/&amp;/g,'&'))} onboarding checklist — Role Assignment first, then every document, form, clearance &amp; training (employment verification happens in Paycom). ${hires.length? 'Select a hire from the roster above' : 'Type a name into <b style="display:inline;color:var(--txt)">+ Add a hire by name</b> above'} to start tracking a real person against it.</div>`;
    host.appendChild(pv);
  }
  const roleOk = !!h && roleComplete(selectedId);
  tpl.phases.forEach(ph=>{
    const total=ph.steps.length;
    const done=ph.steps.filter(s=>getSt(s.id)==='done').length;
    const pct=Math.round(done/total*100);
    const owners=[...new Set(ph.steps.flatMap(s=>s.owner.split(',').map(o=>o.trim())).filter(o=>o&&o!=='—'))];
    const div=document.createElement('div');
    div.className='phase'+(done===total?' complete':'')+(ph.role?' role':'');
    const ra = h ? roleOf(selectedId) : {};
    const roleForm = ph.role ? `
      <div class="rolegrid">
        <div><label for="role-title">Role / title</label><input id="role-title" value="${esc(ra.title||'')}" placeholder="e.g. Group Leader · Career Developer" spellcheck="false"></div>
        <div><label for="role-program">Program &amp; site</label><input id="role-program" value="${esc(ra.program||h&&h.program||'')}" placeholder="e.g. COMPASS — PS 16 · SYEP WFI" spellcheck="false"></div>
        <div><label for="role-group">Program group (designations)</label><select id="role-group">${DESIG_GROUPS.map(g=>`<option value="${g.id}"${(ra.group||groupForTrack(track))===g.id?' selected':''}>${esc(g.label)}</option>`).join('')}</select></div>
        <div><label for="role-supervisor">Primary supervisor</label><input id="role-supervisor" list="supList" value="${esc(ra.supervisorName||ra.supervisor||supName((DESIG[ra.group||groupForTrack(track)]||{}).p))}" placeholder="open — pick a name" spellcheck="false" autocomplete="off"></div>
        <div><label for="role-supervisor2">Secondary supervisor</label><input id="role-supervisor2" list="supList" value="${esc(ra.supervisor2Name||ra.supervisor2||supName((DESIG[ra.group||groupForTrack(track)]||{}).s))}" placeholder="optional" spellcheck="false" autocomplete="off"></div>
        <div><label for="role-supervisor3">Tertiary supervisor</label><input id="role-supervisor3" list="supList" value="${esc(ra.supervisor3Name||ra.supervisor3||supName((DESIG[ra.group||groupForTrack(track)]||{}).t))}" placeholder="optional" spellcheck="false" autocomplete="off"></div>
        ${document.getElementById('supList')?'':`<datalist id="supList">${ROLE_ROSTER.supervisors.map(s=>`<option value="${esc(s.name)}">${esc(s.title||'')}</option>`).join('')}</datalist>`}
        <div><label for="role-startDate">Start date</label><input id="role-startDate" type="date" value="${esc(ra.startDate||'')}"></div>
      </div>
      <div class="roleacts">
        <button class="savebtn" id="roleSave">Save role assignment</button>
        <div class="rnote">${ra.assignedAt ? 'Saved '+esc(new Date(ra.assignedAt).toLocaleString('en-US',{month:'short',day:'numeric',hour:'numeric',minute:'2-digit'}))+(ra.assignedBy?' by '+esc(ra.assignedBy):'') : 'Item 1 for every hire — the rest of the checklist opens once this is saved.'}<br>Prefilled from the 🧭 Supervisor designations for this program group — change any box; primary is required.</div>
      </div>` : '';
    const lockNote = (!ph.role && h && !roleOk) ? `<div class="rolelock">🔒 Locked until the Role Assignment (item 1) is saved.</div>` : '';
    div.innerHTML=`
      <div class="phase-h">
        <div class="pic">${done===total?'✓':ph.icon}</div>
        <div class="pt"><div class="nm">${ph.name}</div><div class="ow">${owners.join(' · ')||'unassigned'}</div></div>
        <div class="pct">${done}/${total}</div>
        <span class="chev">▸</span>
      </div>
      <div class="pbar"><i style="width:${pct}%"></i></div>
      <div class="steps">
        ${roleForm}${lockNote}
        ${ph.steps.map(s=>{
          const st=getSt(s.id);
          const docChip = (s.kind==='doc'||s.kind==='form')
            ? `<span class="chip doc${st==='done'?' on':''}">${st==='done'?'📎 on file':'📎 doc needed'}</span>` : '';
          const formChip = s.code ? `<span class="chip form">Form ${s.code}</span>` : `<span class="chip">${s.auto?'Auto':KIND_LABEL[s.kind]}</span>`;
          const stw = st==='done'?'cleared':(st==='prog'?'in progress':'pending');
          const lockCls = (!ph.role && h && !roleOk) ? ' locked' : (s.auto ? ' auto' : '');
          return `<div class="step${lockCls}" data-st="${st}" data-step="${s.id}">
            <div class="chk">${st==='done'?'✓':(st==='prog'?'•':'')}</div>
            <div class="sl"><div class="t">${s.t}</div>
              <div class="meta"><span class="chip owner">${s.owner}</span>${formChip}${docChip}</div></div>
            <div class="stword">${stw}</div>
          </div>`;
        }).join('')}
      </div>`;
    div.querySelector('.phase-h').onclick=()=>div.classList.toggle('open');
    if(ph.role){
      if(h && !roleOk) div.classList.add('open');            /* item 1 stays open until it is saved */
      const sb=div.querySelector('#roleSave'); if(sb) sb.onclick=(e)=>{ e.stopPropagation(); saveRole(); };
      const gs=div.querySelector('#role-group'); if(gs) gs.onchange=(e)=>{ e.stopPropagation(); const d=DESIG[gs.value]||{}; [['role-supervisor','p'],['role-supervisor2','s'],['role-supervisor3','t']].forEach(([id,k])=>{ const inp=div.querySelector('#'+id); if(inp) inp.value=supName(d[k]); }); };
      div.querySelectorAll('#role-group, #role-supervisor, #role-supervisor2, #role-supervisor3').forEach(el=>{ el.addEventListener('click', e=>e.stopPropagation()); });
      div.querySelectorAll('.rolegrid input,.rolegrid select').forEach(el=>{ el.onclick=e=>e.stopPropagation(); el.onkeydown=e=>{ if(e.key==='Enter'){ e.preventDefault(); saveRole(); } }; });
    }
    div.querySelectorAll('.step').forEach(stEl=>{
      stEl.onclick=(e)=>{ e.stopPropagation();
        if(!selectedId){ toast('Add or select a hire above to track this step.'); return; }
        toggleStep(stEl.dataset.step); };
    });
    (ph.role ? $("roleHost") : host).appendChild(div);
  });
}

/* ---------- core + dials ---------- */
function renderCore(){
  const h = selHire();
  const tpl=TEMPLATES[track]||{};
  $("deck").classList.toggle("nosel", !h && !(tpl.live && tpl.phases));
  if(h){ $("candName").value = h.applicantName || "";
    const ra = roleOf(selectedId);
    { const pr=progressByApp[h.id]; $("candRemove").style.display = (pr && pr.source==='manual' && h.id!==EXAMPLE_ID) ? '' : 'none'; }
    $("candSub").textContent = [ra.title ? '🎯 '+ra.title : '', ra.supervisorName ? 'Reports to: '+[ra.supervisorName,ra.supervisor2Name,ra.supervisor3Name].filter(Boolean).join(' › ') : '', h.program, h.department, h.email].filter(Boolean).join("  ·  ") || "—";
  } else { $("candName").value=""; $("candSub").textContent = rosterReady ? (hires.length? "Select a hire above." : "No new hires yet.") : "Connecting…"; }

  if(!h || !tpl.live || !tpl.phases){
    const prev = (!h && tpl.live && tpl.phases);       // live-track preview (no hire selected)
    const all = prev ? tpl.phases.flatMap(p=>p.steps) : [];
    const nph = (tpl.phases&&tpl.phases.length)||7;
    $("core").style.setProperty('--p',0); $("corePct").textContent='0%';
    $("stDone").firstChild.textContent='0'; $("stTotal").textContent='/'+(prev?all.length:0);
    $("stPhases").firstChild.textContent='0'; document.querySelector('#stPhases small').textContent='/'+nph;
    const sw=$("statusWord"); sw.className='statusword hold';
    sw.textContent = prev ? '◌ TRACK PREVIEW' : (h?'⏳ TRACK NOT LOADED':'— AWAITING SELECTION');
    $("sysreadout").innerHTML=`SYSTEMS <b>0/${prev?nph:0}</b> ONLINE<br>STATUS: ${prev?'PREVIEW':'STANDBY'}`;
    const cnt=(kinds)=> prev ? all.filter(s=>kinds.includes(s.kind)).length : 0;
    [['dDocs','dDocsN',['doc']],['dClr','dClrN',['clear']],['dTrn','dTrnN',['train']],['dFrm','dFrmN',['form']]]
      .forEach(([r,n,k])=>setRing($(r),0,$(n),`0/${cnt(k)}`));
    const fk=$("dFrmK"); if(fk) fk.textContent = tpl.formsLabel || 'Forms';
    return;
  }
  const all=tpl.phases.flatMap(p=>p.steps);
  const done=all.filter(s=>getSt(s.id)==='done').length;
  const total=all.length;
  const pct=total?Math.round(done/total*100):0;
  const phasesDone=tpl.phases.filter(p=>p.steps.every(s=>getSt(s.id)==='done')).length;

  $("core").style.setProperty('--p',pct);
  $("corePct").textContent=pct+'%';
  $("stDone").firstChild.textContent=done;
  $("stTotal").textContent='/'+total;
  $("stPhases").firstChild.textContent=phasesDone;
  document.querySelector('#stPhases small').textContent='/'+tpl.phases.length;

  const sw=$("statusWord");
  if(pct===100){ sw.className='statusword go'; sw.textContent='✓ CLEARED FOR DUTY'; }
  else { sw.className='statusword hold'; sw.textContent='⏳ ONBOARDING IN PROGRESS'; }

  $("sysreadout").innerHTML=`SYSTEMS <b>${phasesDone}/${tpl.phases.length}</b> ONLINE<br>STATUS: ${pct===100?'READY':'STANDBY'}`;

  const byKind=(kinds)=>{ const list=all.filter(s=>kinds.includes(s.kind));
    const d=list.filter(s=>getSt(s.id)==='done').length; return [d,list.length]; };
  [['dDocs','dDocsN',['doc']],['dClr','dClrN',['clear']],['dTrn','dTrnN',['train']],['dFrm','dFrmN',['form']]]
    .forEach(([ring,num,kinds])=>{ const [d,t]=byKind(kinds);
      setRing($(ring), t?Math.round(d/t*100):0, $(num), `${d}/${t}`); });
  const fk=$("dFrmK"); if(fk) fk.textContent = tpl.formsLabel || 'Forms';
}

/* ---------- orchestration ---------- */
function renderAll(keepOpen){
  renderTracks();
  const openIds = keepOpen ? [...document.querySelectorAll('.phase.open')].map(p=>p.querySelector('.phase-h .nm')?.textContent) : null;
  renderPhases();
  renderCore();
  if(openIds){ document.querySelectorAll('.phase').forEach(p=>{ if(openIds.includes(p.querySelector('.phase-h .nm')?.textContent)) p.classList.add('open'); }); }
  else if(expanded){ document.querySelectorAll('.phase').forEach(p=>p.classList.add('open')); }
}

/* ---------- controls ---------- */
$("expandAll").onclick=()=>{ expanded=!expanded;
  $("expandAll").textContent=expanded?'Collapse':'Expand';
  document.querySelectorAll('.phase').forEach(p=>p.classList.toggle('open',expanded)); };
$("resetTrack").onclick=async ()=>{
  const h=selHire(); if(!h) return;
  if(!confirm('Clear all onboarding progress for '+(h.applicantName||'this hire')+' on the '+track.toUpperCase()+' track?')) return;
  if(!progressByApp[selectedId]) progressByApp[selectedId]={};
  progressByApp[selectedId].steps={};
  renderAll(); await writeProgress();
};

/* ---------- manual add-a-hire (restores v1 "type a name and go", now Firestore-synced) ---------- */
async function addManualHire(){
  const inp = $("addHireName"); const name = (inp.value||"").trim();
  if(!name){ inp.focus(); return; }
  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'') || 'hire';
  const id = 'manual_'+slug;
  // if this manual hire already exists, just select it
  if(progressByApp[id] || hires.some(h=>h.id===id)){ inp.value=''; selectedId=id; track=trackOf(id); renderRoster(); renderAll(); return; }
  const payload = {
    appId:id, applicantName:name, email:'', phone:'',
    department:'', departmentId:'', program:'Manual add', programCode:'',
    source:'manual', track:'sacc', steps:{},
    startedAt:new Date().toISOString(), updatedAt:new Date().toISOString(),
    updatedBy:$("whoName").value.trim()||''
  };
  progressByApp[id]=payload;            // optimistic
  selectedId=id; track='sacc';
  inp.value=''; rebuildHires();
  try{ await setDoc(doc(db,"onboarding_progress", id), payload); toast('Added '+name+' to the roster.'); }
  catch(e){ console.error("manual add write failed:", e);
    toast("Couldn't save — is the onboarding_progress rule deployed? ("+(e.code||e.message)+")", true); }
}
$("addHireBtn").onclick = addManualHire;
$("showAllBtn").onclick = ()=>{ showAll=!showAll; $("showAllBtn").style.color=showAll?'#fbbf24':'var(--dim)'; renderRoster(); };
async function removeHire(){
  const h=selHire(); if(!h) return; const p=progressByApp[h.id];
  if(!p || p.source!=='manual'){ toast('Only rows added here (manual or ＋ Start onboarding) can be removed — a Hired record from the Live Tracker leaves when its status changes there.', true); return; }
  if(!confirm('Remove '+(h.applicantName||'this row')+' from the roster? The record is kept (hidden), nothing is deleted.')) return;
  p.removed=true; p.removedBy=$("whoName").value.trim()||''; p.removedAt=new Date().toISOString();
  selectedId=null; rebuildHires();
  try{ await setDoc(doc(db,"onboarding_progress",h.id), {removed:true, removedBy:p.removedBy, removedAt:p.removedAt, updatedAt:p.removedAt}, {merge:true}); toast('Removed from the roster.'); }
  catch(e){ toast('Remove failed: '+(e.code||e.message), true); }
}
$("removeBtn").onclick = removeHire;
$("exampleTomBtn").onclick = ()=>{ localStorage.setItem('nycid-hub-example','1'); injectExample(); selectedId=EXAMPLE_ID; track='sacc'; rebuildHires(); toast('🎓 Tom DeVito Jr. loaded as an example — practice here, nothing saves.'); };
$("addHireName").addEventListener("keydown", e=>{ if(e.key==="Enter") addManualHire(); });

/* ---------- toast ---------- */
let toastEl=null, toastTimer=null;
function toast(msg, err){
  if(!toastEl){ toastEl=document.createElement('div'); toastEl.style.cssText=
    'position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:99;font-family:var(--mono);font-size:.74rem;letter-spacing:.5px;padding:11px 16px;border-radius:10px;border:1px solid var(--line-bright);background:#0c1424;color:#eaf4ff;box-shadow:0 18px 40px -18px rgba(0,0,0,.9);max-width:90vw;text-align:center;transition:opacity .25s;opacity:0';
    document.body.appendChild(toastEl); }
  toastEl.textContent=msg; toastEl.style.borderColor= err? 'rgba(251,113,133,.6)':'var(--line-bright)';
  toastEl.style.opacity='1'; clearTimeout(toastTimer); toastTimer=setTimeout(()=>toastEl.style.opacity='0', err?5200:2600);
}

renderAll();
</script>
<script src="staff-roster.js"></script>
<script src="team-hub.js"></script>
<script src="mfa-gate.js"></script>
<script src="activity.js"></script>
</body>
</html>