/* Recruitment › Onboarding (static/rec_onboarding.js).
   Built on the rec-* chrome of #view-recruitment (tokens --rfg1/2/3,
   --rstroke, --rbrand live on the view root) — board columns, cards, round
   buttons, the floating panel and its action dock are the Recruitment ones;
   onb-* only adds what onboarding has that hiring does not: a start date,
   dated steps with owners, gates and a progress ring. */

#view-recruitment{--onb-ok:#12B26E;--onb-ok-bg:#EAF8F1;--onb-warn:#C77A12;--onb-warn-bg:#FFF6E8;
  --onb-bad:#E0304A;--onb-bad-bg:#FFF1F3;--onb-info:#2F6FED;--onb-info-bg:#EEF3FE}

/* The Onboarding tab made the Recruitment topbar one tab wider: keep it on one
   row. The quiet icon tools read as one group (6px apart, not 16px), and on
   narrower screens the tabs drop their glyphs before anything wraps. */
#view-recruitment .rec-topbar .rec-btnq+.rec-btnq{margin-left:-10px}
@media (max-width:1560px){
  #view-recruitment .rec-topbar{gap:12px}
  #view-recruitment .rec-tab{padding:8px 11px}
  #view-recruitment .rec-tab>svg{display:none}
}

/* Validated card on the candidate board: onboarding gets its own line under
   "Add to roster / Add to team", with the journey's progress as a hairline. */
.rec-handoffs:has(.onb-cbtn){flex-wrap:wrap}
.rec-handoffs .rec-roster.onb-cbtn{flex:1 0 100%;position:relative;overflow:hidden;justify-content:flex-start;color:var(--rfg1)}
.rec-roster.onb-cbtn svg{color:#2F6FED}
.onb-cbtn>span{margin-left:auto;display:inline-flex;align-items:center;font-size:11px;font-weight:800;color:var(--rfg3);font-variant-numeric:tabular-nums}
/* progress: a hairline along the bottom edge, not a fill behind the label */
.onb-cbtn::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:var(--v);background:#2F6FED;border-radius:0 2px 2px 0;transition:width .3s}
.rec-handoffs .rec-roster.onb-cbtn.done{background:transparent;border-color:transparent;color:var(--rfg2);justify-content:center}
.onb-cbtn.done::after{display:none}
.rec-roster.onb-cbtn.done svg{color:#12B26E}
.rec-handoffs .rec-roster.onb-cbtn.done:hover{background:#FAFAFB;border-color:var(--rstroke)}


/* =====================================================================
   The Onboarding page. Structure from the UK-Med onboarding (KPI cards;
   People / Step library / Asks sent; joiner list + checklist by category),
   dressed in the portal's own Recruitment chrome: Lato, the --rfg / --rstroke
   tokens of #view-recruitment, rec-btn / rec-chip / rec-menu / recModal, the
   green checklist bar. Red stays a glyph except on the primary buttons.
   ===================================================================== */
.ob{--ob-sel:#F3F5FE;--ob-ind:#3D4EC2;--ob-ind-bg:#ECF0FE;
  --ob-ok:#12B26E;--ob-ok-ink:#0E8F57;--ob-ok-bg:#EAF8F1;
  --ob-warn:#C77A12;--ob-warn-bg:#FFF6E8;--ob-bad:#E0304A;--ob-bad-bg:#FFF1F3;
  --ob-line:#F0F1F3;
  color:var(--rfg2);font-size:13.5px;font-variant-numeric:tabular-nums}
.ob .muted{color:var(--rfg3)}

/* toolbar: sub-tabs, one line of context, the primary action */
.ob-bar1{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-bottom:16px}
.ob-tabs{display:inline-flex;gap:3px;background:#F5F5F5;border:1px solid var(--rstroke);padding:3px;border-radius:12px}
.ob-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:0;border-radius:9px;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--rfg3);cursor:pointer;white-space:nowrap}
.ob-tab i{font-size:12px;opacity:.8}
.ob-tab:hover{color:var(--rfg1);background:rgba(255,255,255,.65)}
.ob-tab.on{color:var(--rfg1);background:#fff;box-shadow:0 1px 1px rgba(7,9,22,.05),0 3px 10px rgba(7,9,22,.07)}
.ob-tab.on i{color:var(--rbrand);opacity:1}
.ob-tab .n{font-size:11px;font-weight:800;color:var(--rfg3);background:rgba(7,9,22,.06);padding:1px 7px;border-radius:999px}
.ob-tab.on .n{color:var(--ob-ind);background:var(--ob-ind-bg)}
.ob-intro{flex:1;min-width:220px;font-size:13px;color:var(--rfg3)}
.ob .rec-btn i{font-size:12px}
/* red is the glyph on the white buttons, never the fill */
.ob .rec-btn2 :is(i,svg){color:var(--rbrand)}
.ob .rec-btn.ob-sm{padding:6px 11px;font-size:12.5px;border-radius:9px;gap:6px}
.ob .rec-btn.ob-danger{color:var(--rbrand-acc)}
.ob .rec-btn.ob-danger:hover{background:var(--rlight-red);border-color:#f0c2c2}

/* KPI cards */
.ob-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:10px;margin-bottom:18px}
.ob-card{background:#fff;border:1px solid var(--rstroke);border-radius:14px;padding:12px 14px 11px;box-shadow:var(--rsh-sm)}
.ob-card .k{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--rfg3);white-space:nowrap}
.ob-card .k i{font-size:10.5px;color:#C3C5CB;cursor:help}
.ob-card .v{font-size:22px;font-weight:900;color:var(--rfg1);margin-top:4px;letter-spacing:-.01em}
.ob-card .v.bad{color:var(--ob-bad)}
.ob-card .v.warn{color:var(--ob-warn)}
.ob-card .v.ok{color:var(--ob-ok)}

/* filters */
.ob-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.ob-search{position:relative;width:260px}
.ob-search i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--rfg3);pointer-events:none}
.ob-search input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--rfg1);background:#fff;border:1px solid var(--rstroke);border-radius:9px;padding:8px 11px 8px 31px;outline:none}
.ob-search input:focus,.ob-in:focus,.ob-popq:focus{border-color:var(--rbrand);box-shadow:0 0 0 3px rgba(253,0,36,.12)}
.ob-count{font-size:12.5px;font-weight:700;color:var(--rfg3)}

/* pills */
.ob-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:800;white-space:nowrap;line-height:1.35;background:#F1F2F4;color:var(--rfg2)}
.ob-pill.sm{font-size:10.5px;padding:2px 8px}
.ob-pill i{font-size:.95em}
.ob-pill.ok{background:var(--ob-ok-bg);color:var(--ob-ok-ink)}
.ob-pill.warn{background:var(--ob-warn-bg);color:var(--ob-warn)}
.ob-pill.bad{background:var(--ob-bad-bg);color:var(--ob-bad)}
.ob-pill.info,.ob-pill.teal{background:var(--ob-ind-bg);color:var(--ob-ind)}
.ob-pill.grey{font-weight:700;color:var(--rfg3)}
.ob-avnone{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#F0F1F3;color:#A9ACB4;font-size:10px;flex:0 0 auto;box-shadow:inset 0 0 0 1px var(--rstroke)}

/* board: list + journey */
.ob-board{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.ob-list{background:#fff;border:1px solid var(--rstroke);border-radius:16px;box-shadow:var(--rsh-sm);overflow:hidden}
.ob-person{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--ob-line);background:#fff;padding:12px 14px 11px;cursor:pointer;font:inherit;color:inherit;position:relative;transition:background .12s}
.ob-person:last-child{border-bottom:0}
.ob-person:hover{background:#FAFAFB}
.ob-person.on{background:var(--ob-sel)}
.ob-person.on::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--ob-ind)}
.ob-person .top{display:flex;align-items:center;gap:9px}
.ob-person .nm{flex:1;min-width:0;font-weight:800;font-size:13.5px;color:var(--rfg1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-person .ind{padding-left:35px}
.ob-person .role{font-size:12px;color:var(--rfg3);margin:1px 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-bar{height:6px;border-radius:999px;background:#F0F1F3;overflow:hidden}
.ob-bar i{display:block;height:100%;border-radius:999px;background:var(--ob-ok);transition:width .25s}
.ob-bar.late i{background:var(--ob-bad)}
.ob-person .ln{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11.5px;font-weight:700;color:var(--rfg2);white-space:nowrap;min-width:0}
.ob-person .ln .when{margin-left:auto;font-weight:700;color:var(--rfg3);overflow:hidden;text-overflow:ellipsis;min-width:0}

.ob-panel{background:#fff;border:1px solid var(--rstroke);border-radius:16px;box-shadow:var(--rsh-sm);min-width:0;overflow:hidden}
.ob-empty{text-align:center;padding:48px 20px;color:var(--rfg3)}
.ob-empty i{display:block;margin:0 auto 12px;font-size:24px;color:#D5D8DE}
.ob-empty p{margin:0 auto;font-size:13px;max-width:420px;line-height:1.5}

/* journey header */
.ob-jhead{padding:20px 22px 16px}
.ob-jhead .row1{display:flex;align-items:center;gap:12px}
.ob-jhead h2{margin:0;font-size:19px;font-weight:900;color:var(--rfg1);letter-spacing:-.01em;font-family:inherit}
.ob-jhead .sub{font-size:12.5px;color:var(--rfg3);margin-top:2px}
.ob-jhead .row1 .rec-btn{margin-left:auto}
.ob-jmeta{display:flex;flex-wrap:wrap;gap:12px 28px;margin:16px 0 14px}
.ob-jmeta>div{min-width:110px}
.ob-jmeta .k{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--rfg3);margin-bottom:4px}
.ob-jmeta .v{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--rfg1)}
.ob-jmeta .v .muted{font-weight:700}
.ob-prog{display:flex;align-items:center;gap:10px}
.ob-prog .ob-bar{flex:1;height:7px}
.ob-prog b{font-size:12px;font-weight:900;color:var(--rfg1);min-width:34px;text-align:right}
.ob-prog .muted{font-size:12px;font-weight:700}
.ob-alerts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ob-opened{font-size:12px;color:var(--rfg3);margin-top:10px}
.ob-opened a{color:var(--rfg2);text-decoration:none;border-bottom:1px dashed #C3C5CB}
.ob-jacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:11px 22px;background:#FAFAFB;border-top:1px solid var(--rstroke);border-bottom:1px solid var(--rstroke)}
.ob-jacts .hint{margin-left:auto;font-size:12px;color:var(--rfg3)}

/* category groups */
.ob-grp{border-bottom:1px solid var(--rstroke)}
.ob-grp:last-child{border-bottom:0}
.ob-grph{display:flex;align-items:center;gap:10px;width:100%;padding:10px 22px;border:0;background:#fff;font:inherit;text-align:left;cursor:pointer;user-select:none}
.ob-grph:hover{background:#FAFAFB}
.ob-grph .chev{width:12px;font-size:10px;color:var(--rfg3);transition:transform .15s;display:inline-flex;justify-content:center}
.ob-grp.shut .chev{transform:rotate(-90deg)}
.ob-grp.shut .ob-steps{display:none}
.ob-tile{width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;flex:0 0 auto}
.ob-grph .lbl{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--rfg1)}
.ob-grph .cnt{margin-left:auto;font-size:11px;font-weight:800;color:var(--rfg3);background:#F5F5F5;border-radius:999px;padding:1px 8px}

/* step row */
.ob-step{border-top:1px solid var(--ob-line);transition:background .12s}
.ob-step:hover,.ob-step.open{background:#FAFAFB}
.ob-srow{display:flex;align-items:flex-start;gap:12px;padding:10px 22px 10px 24px}
.ob-tick{width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.6px solid #C9CCD3;background:#fff;color:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:0 0 auto;font-size:9px;transition:transform .12s,border-color .12s,background .12s}
.ob-tick:hover{border-color:var(--ob-ok);color:var(--ob-ok);transform:scale(1.08)}
.ob-step.prog .ob-tick{border-color:var(--ob-warn);background:var(--ob-warn-bg);color:var(--ob-warn)}
.ob-step.wait .ob-tick{border-color:var(--ob-ind);background:var(--ob-ind-bg);color:var(--ob-ind)}
.ob-step.done .ob-tick{border-color:var(--ob-ok);background:var(--ob-ok);color:#fff}
.ob-step.skip .ob-tick{border-style:dashed;color:var(--rfg3)}
.ob-st{flex:1;min-width:0}
.ob-st .t{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ob-st .task{border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:800;color:var(--rfg1);text-align:left;cursor:pointer}
.ob-st .task:hover{color:var(--rbrand-acc)}
.ob-step.done .task{color:var(--rfg3);font-weight:700;text-decoration:line-through;text-decoration-color:#C9CCD3}
.ob-step.skip .task{color:var(--rfg3);font-weight:700}
.ob-st .sub{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;margin-top:5px;font-size:12px;font-weight:700;color:var(--rfg3)}
.ob-st .sub .d{display:inline-flex;align-items:center;gap:5px}
.ob-st .sub .d i{font-size:10.5px}
.ob-st .sub .d.late{color:var(--ob-bad);font-weight:800}
.ob-st .ev{display:inline-flex;align-items:center;gap:5px;color:var(--rfg2)}
.ob-own{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:2px 9px 2px 2px;margin:-2px 0;background:#F4F5F7;font:inherit;font-size:12px;font-weight:800;color:var(--rfg2);cursor:pointer}
.ob-own:hover{background:#ECEDF0;color:var(--rfg1)}
.ob-own.none{padding:3px 10px;background:var(--ob-warn-bg);color:var(--ob-warn)}
.ob-sacts{display:flex;gap:4px;opacity:0;transition:opacity .12s;flex:0 0 auto}
.ob-step:hover .ob-sacts,.ob-step.open .ob-sacts{opacity:1}
.ob-ib{width:28px;height:28px;border-radius:8px;border:0;background:none;color:var(--rfg3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:12px;flex:0 0 auto}
.ob-ib:hover{background:#ECEDF0;color:var(--rfg1)}
.ob-ib.bad:hover{background:var(--rlight-red);color:var(--rbrand-acc)}
.ob-ib:disabled{opacity:.3;cursor:default;background:none}

/* expanded step */
.ob-expand{margin:0 22px 14px 56px;padding:14px 16px;background:#fff;border:1px solid var(--rstroke);border-radius:12px}
.ob-expand .instr{display:flex;gap:8px;margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--rfg2)}
.ob-expand .instr i{margin-top:3px;color:var(--ob-ind)}
.ob-expand .foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:14px}
.ob-expand .foot .sp{flex:1}
.ob-expand .foot .meta{font-size:11.5px;font-weight:700;color:var(--rfg3)}

/* forms (expanded step + modals) */
.ob-form{display:flex;flex-direction:column;gap:12px}
.ob-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ob-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ob-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.ob-f>label,.ob-lbl{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--rfg3)}
.ob-in{width:100%;box-sizing:border-box;font:inherit;font-size:13px;color:var(--rfg1);background:#fff;border:1px solid var(--rstroke);border-radius:9px;padding:8px 10px;outline:none}
select.ob-in{padding:7px 8px}
textarea.ob-in{resize:vertical;min-height:40px;line-height:1.45}
.ob-hint{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--rfg3)}
.ob-radio{display:flex;flex-direction:column;gap:9px}
.ob-radio label{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:700;color:var(--rfg1);cursor:pointer}
.ob-radio input{margin-top:2px;accent-color:var(--rbrand)}
.ob-mbox .ob-form{font-family:'Lato',-apple-system,sans-serif}

/* the trail */
.ob-trail{padding:2px 22px 12px}
.ob-trow{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:7px 0;border-top:1px solid var(--ob-line);font-size:12.5px;color:var(--rfg2)}
.ob-trow:first-child{border-top:0}
.ob-trow .at{font-size:11.5px;font-weight:700;color:var(--rfg3)}

/* step library */
.ob-libintro{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ob-libintro p{margin:0;font-size:13px;color:var(--rfg3);max-width:760px}
.ob-libintro .rec-btn{margin-left:auto}
.ob-lib{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.ob-libcol{display:flex;flex-direction:column;gap:12px}
.ob-prg{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--ob-line);background:#fff;padding:12px 14px;cursor:pointer;font:inherit;position:relative}
.ob-prg:last-child{border-bottom:0}
.ob-prg:hover{background:#FAFAFB}
.ob-prg.on{background:var(--ob-sel)}
.ob-prg.on::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--ob-ind)}
.ob-prg b{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px;color:var(--rfg1)}
.ob-prg small{display:block;margin-top:3px;font-size:12px;color:var(--rfg3);line-height:1.4}
.ob-cover{background:#fff;border:1px solid var(--rstroke);border-radius:16px;box-shadow:var(--rsh-sm);padding:12px 14px}
.ob-cover .r{display:flex;align-items:center;gap:8px;margin-top:9px}
.ob-cover .r span:first-child{width:58px;font-size:12.5px;font-weight:800;color:var(--rfg2)}
.ob-cover p{margin:10px 0 0;font-size:11.5px;color:var(--rfg3);line-height:1.45}
.ob-phead{padding:20px 22px 16px}
.ob-phead .row1{display:flex;align-items:flex-start;gap:10px}
.ob-phead h2{margin:0;font-size:19px;font-weight:900;color:var(--rfg1);letter-spacing:-.01em;font-family:inherit}
.ob-phead .meta{font-size:12px;font-weight:700;color:var(--rfg3);margin-top:3px}
.ob-phead .row1 .acts{margin-left:auto;display:flex;gap:6px}
.ob-phead .lede{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--rfg2);max-width:820px}
.ob-phead .ob-pill{margin-top:12px;white-space:normal}
.ob-tblwrap{overflow-x:auto}
.ob-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ob-tbl th{font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--rfg3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rstroke);white-space:nowrap;background:#FAFAFB}
.ob-tbl td{padding:10px 12px;border-bottom:1px solid var(--ob-line);vertical-align:middle;color:var(--rfg2)}
.ob-tbl tr:last-child td{border-bottom:0}
.ob-tbl tbody tr:hover td{background:#FAFAFB}
.ob-tbl .num{width:28px;font-weight:800;color:var(--rfg3)}
.ob-tbl .task b{display:block;font-weight:800;color:var(--rfg1)}
.ob-tbl .task small{display:block;max-width:420px;margin-top:2px;font-size:12px;line-height:1.4;color:var(--rfg3)}
.ob-tbl .acts{display:flex;gap:2px;justify-content:flex-end}
.ob-tbl tr.click{cursor:pointer}
.ob-tbl .who{display:flex;align-items:center;gap:7px;white-space:nowrap;font-weight:700;color:var(--rfg1)}

/* people picker (.rec-menu) */
.ob-pop{width:280px;padding:6px}
.ob-pophd{padding:6px 10px 6px;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--rfg3)}
.ob-popq{width:100%;box-sizing:border-box;margin:0 0 4px;font:inherit;font-size:13px;border:1px solid var(--rstroke);border-radius:9px;padding:7px 10px;outline:none}
.ob-poplist{max-height:300px;overflow-y:auto}
.ob-pop .stat-opt small{font-weight:700;color:var(--rfg3);font-size:11px}

@media (max-width:1100px){.ob-board,.ob-lib{grid-template-columns:1fr}}
@media (max-width:760px){.ob-grid2,.ob-grid3{grid-template-columns:1fr}.ob-expand{margin-left:22px}.ob-search{width:100%}}

/* ---- simplified model (no gates, no evidence, no categories) ---------- */
.ob-metav{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 6px 2px 2px;margin:-2px -6px -2px -2px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:var(--rfg1);cursor:pointer}
.ob-metav:hover{background:#F4F5F7}
.ob-metav .muted{font-weight:700}
.ob-grph{cursor:default}
.ob-grph:hover{background:#fff}
.ob-grph .ob-tile{background:#F4F5F7;color:var(--rfg2)}
.ob-grph .rng{font-size:12px;font-weight:700;color:var(--rfg3)}
.ob-st .task{display:block}
.ob-st .sub .role{font-size:11.5px;font-weight:700;color:var(--rfg3)}
.ob-st .sub .rem{display:inline-flex;align-items:center;gap:5px;color:var(--ob-ind)}
.ob-st .sub .rem i{font-size:10px}
.ob-step.done .ob-tick{border-color:var(--ob-ok);background:var(--ob-ok);color:#fff}
.ob-expand .instr{display:block;margin:0 0 12px;font-size:12.5px;color:var(--rfg2)}
.ob-hist{padding:10px 22px 14px;border-top:1px solid var(--rstroke)}
.ob-histbtn{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:4px 0;font:inherit;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--rfg3);cursor:pointer}
.ob-histbtn:hover{color:var(--rfg1)}
.ob-histbtn i{font-size:9px;width:10px}
.ob-hist .ob-trail{padding:6px 0 0}
.ob-names{display:flex;flex-wrap:wrap;gap:6px}
.ob-names .ob-own{cursor:default}
.ob-danger-row{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--rstroke);font-size:12.5px;color:var(--rfg3)}
.ob-danger-row span{flex:1}
.ob-when{display:flex;gap:6px}
.ob-when input{width:74px;flex:0 0 auto}
.ob-popsep{height:1px;background:var(--rstroke);margin:4px 6px}
.ob-prgnew{color:var(--rfg3);font-weight:800;display:flex;align-items:center;gap:8px}
.ob-prgnew:hover{color:var(--rfg1)}
/* Staff / Consultants sub-groups in the joiner list */
.ob-lgrp{display:flex;align-items:center;gap:7px;padding:10px 14px 6px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--rfg3);background:#FAFAFB;border-bottom:1px solid var(--ob-line)}
.ob-lgrp .n{font-size:10.5px;font-weight:800;letter-spacing:0;color:var(--rfg3);background:#F0F1F3;border-radius:999px;padding:0 7px}

/* person fields in the forms: the people popover's face, not a native select */
.ob-pf{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;background:#fff}
.ob-pf .resp-av{display:inline-flex;flex:0 0 auto}
.ob-pf-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--rfg1)}
.ob-pf-n small{font-weight:700;color:var(--rfg3);font-size:11px}
.ob-pf-none{font-weight:400;color:var(--rfg3)}
.ob-pf>i{font-size:10px;color:var(--rfg3)}
/* added roles: remove on the Who covers card, an Add a role link under it */
.ob-cover .r .ob-role-x{margin-left:auto;border:0;background:none;color:var(--rfg3);cursor:pointer;width:24px;height:24px;border-radius:7px}
.ob-cover .r .ob-role-x:hover{background:#FFF1F2;color:var(--rbrand)}
.ob-role-add{display:inline-flex;align-items:center;gap:6px;margin-top:10px;border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:800;color:var(--rfg2);cursor:pointer}
.ob-role-add:hover{color:var(--rbrand)}
.ob-pf-ic,.ob-role-ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#F1F2F4;color:var(--rfg2);font-size:10px;flex:0 0 auto}
.ob-pop .stat-opt>i.fa-check{margin-left:auto;opacity:0;color:var(--rbrand)}
.ob-pop .stat-opt.on>i.fa-check{opacity:1}
/* a done step: who ticked it and when, at the far right of the row */
.ob-doneby{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto;align-self:center;padding:3px 10px 3px 3px;border-radius:999px;background:#F2FAF6;border:1px solid #D5EFE2}
.ob-doneby>span{display:flex;flex-direction:column;line-height:1.15}
.ob-doneby b{font-size:12px;font-weight:800;color:var(--rfg1)}
.ob-doneby small{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#12925A}
.ob-doneby small i{font-size:9px}
/* drag to reorder: a grip on the left of each row, visible on hover */
.ob-grip{display:inline-flex;align-items:center;justify-content:center;width:14px;height:22px;margin:0 2px 0 -16px;color:#C3C6CD;cursor:grab;opacity:0;transition:opacity .12s;flex:0 0 auto;touch-action:none}
.ob-sortable:hover .ob-grip{opacity:1}
.ob-grip:hover{color:var(--rfg2)}
.ob-srow .ob-grip{margin-top:4px}
.ob-tbl td.num{white-space:nowrap}
.ob-tbl td.num .ob-grip{margin:0 4px 0 -6px;vertical-align:middle}
.ob-dragging{position:relative;z-index:2;background:#fff!important;box-shadow:0 10px 26px rgba(7,9,22,.16);border-radius:12px;opacity:.96}
body.ob-sorting,body.ob-sorting *{cursor:grabbing!important;user-select:none!important}