/* H20 Staff Profile — 26s tab tour: send portal link → Jobs (live status flip) → Timesheets (add entry) → Pay (record commission payout) (needs hero-graphics.css shell) */
.rcg .h20{--t:26s}
.rcg .h20 .top .nm{display:flex;align-items:center;gap:8px;white-space:nowrap}.rcg .h20 .top .nm>.chip{align-self:center;line-height:1;position:relative;top:0}.rcg .h20 .top .nm>b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.rcg .h20 .tabs{margin-bottom:0;gap:14px}.rcg .h20 .tabs span{font-size:10px}
.rcg .h20 .tabs .t1{animation:tmT1 var(--t) step-end infinite}.rcg .h20 .tabs .t2{animation:tmT2 var(--t) step-end infinite}.rcg .h20 .tabs .t3{animation:tmT3 var(--t) step-end infinite}.rcg .h20 .tabs .t4{animation:tmT4 var(--t) step-end infinite}
@keyframes tmT1{0%,24.5%{color:var(--blue);border-color:var(--blue)}24.51%,100%{color:var(--g-mute,#6b7280);border-color:transparent}}
@keyframes tmT2{0%,24.5%{color:var(--g-mute,#6b7280);border-color:transparent}24.51%,45.5%{color:var(--blue);border-color:var(--blue)}45.51%,100%{color:var(--g-mute,#6b7280);border-color:transparent}}
@keyframes tmT3{0%,45.5%{color:var(--g-mute,#6b7280);border-color:transparent}45.51%,69.5%{color:var(--blue);border-color:var(--blue)}69.51%,100%{color:var(--g-mute,#6b7280);border-color:transparent}}
@keyframes tmT4{0%,69.5%{color:var(--g-mute,#6b7280);border-color:transparent}69.51%,100%{color:var(--blue);border-color:var(--blue)}}
/* app-style status chips: outlined gray + coloured dot */
.rcg .hg.h20 .chip.st{color:var(--g-ink2,#3a3f4b);border-color:var(--g-line,#e6e8ed);background:var(--g-bg,#fff);border-radius:4px}.rcg .hg.h20 .chip{border-radius:4px}
.rcg .hg.h20 .chip.st.g::before{background:var(--grn)}.rcg .hg.h20 .chip.st.o::before{background:var(--org)}.rcg .hg.h20 .chip.st.b::before{background:var(--blue)}
/* views */
.rcg .h20 .vw{position:absolute;left:22px;right:22px;top:100px;bottom:0;opacity:0}
.rcg .h20 .vw.det{opacity:1;animation:tmVd var(--t) ease-in-out infinite}.rcg .h20 .vw.jb{animation:tmVj var(--t) ease-in-out infinite}.rcg .h20 .vw.ts{animation:tmVt var(--t) ease-in-out infinite}.rcg .h20 .vw.py{animation:tmVp var(--t) ease-in-out infinite}
@keyframes tmVd{0%,24.5%{opacity:1;transform:none}26.5%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes tmVj{0%,25%{opacity:0;transform:translateX(10px)}27%,45.5%{opacity:1;transform:none}47.5%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes tmVt{0%,46%{opacity:0;transform:translateX(10px)}48%,69.5%{opacity:1;transform:none}71.5%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes tmVp{0%,70%{opacity:0;transform:translateX(10px)}72%,100%{opacity:1;transform:none}}
.rcg .h20 .sec{margin-bottom:8px}
/* details */
.rcg .h20 .cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.rcg .h20 .ci{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:14px}.rcg .h20 .fld b{margin-top:3px}
.rcg .h20 .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.rcg .h20 .avl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}.rcg .h20 .avl span{height:24px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:0 9px;display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:600}.rcg .h20 .avl span i{font-style:normal;color:var(--g-mute,#6b7280);font-weight:500}
.rcg .h20 .live{display:grid;font-size:10px;font-weight:600;margin-bottom:8px;height:14px}.rcg .h20 .live>*{grid-area:1/1;display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--g-mute,#6b7280)}.rcg .h20 .live>*::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g-mute3,#d1d5db)}
.rcg .h20 .live .a{animation:tmA11 var(--t) step-end infinite}.rcg .h20 .live .b{opacity:0;color:var(--grn);animation:tmB11 var(--t) step-end infinite}.rcg .h20 .live .b::before{background:var(--grn);animation:hgblink 1.4s ease-in-out infinite}
.rcg .h20 .bts{display:flex;gap:6px}.rcg .h20 .snd .a{animation:tmA11 var(--t) step-end infinite}.rcg .h20 .snd .b{animation:tmB11 var(--t) step-end infinite}
@keyframes tmA11{0%,11.5%{opacity:1}11.51%,100%{opacity:0}}@keyframes tmB11{0%,11.5%{opacity:0}11.51%,100%{opacity:1}}
.rcg .h20 .hint{font-size:8.5px;color:var(--g-mute,#6b7280);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rcg .h20 .hint code{font-family:ui-monospace,Menlo,monospace;font-size:8px;background:var(--g-hi,#f3f4f6);padding:1px 4px;border-radius:3px}
/* tables */
.rcg .h20 .tbl{border:1px solid var(--g-line,#e6e8ed);border-radius:8px;overflow:hidden}
.rcg .h20 .tbl .hd{padding:7px 10px;background:var(--g-soft,#f6f7f9);border-bottom:1px solid var(--g-line,#e6e8ed)}
.rcg .h20 .tbl .row{height:34px;border-bottom:1px solid var(--g-line,#e6e8ed)}.rcg .h20 .tbl .row:last-child{border-bottom:0}
.rcg .h20 .tbl .row>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.rcg .h20 .tbl .row>.sw{overflow:visible}
.rcg .h20 .tbl .amt{font-weight:700}
.rcg .h20 .jb .tbl .hd,.rcg .h20 .jb .tbl .row{grid-template-columns:96px minmax(0,1fr) 64px 56px 48px 78px 80px}
.rcg .h20 .jb .row.hl::after{content:"";position:absolute;inset:0;background:var(--g-hi,#f3f4f6);opacity:0;animation:tmHl var(--t) ease-out infinite;pointer-events:none}
@keyframes tmHl{0%,33.6%{opacity:0}34%,36.5%{opacity:1}40%,100%{opacity:0}}
.rcg .h20 .stf .a{animation:tmA34 var(--t) step-end infinite}.rcg .h20 .stf .b{animation:tmB34 var(--t) step-end infinite}
.rcg .h20 .j1 .a{animation:tmA34 var(--t) step-end infinite}.rcg .h20 .j1 .b{animation:tmB34 var(--t) step-end infinite}
@keyframes tmA34{0%,34%{opacity:1}34.01%,100%{opacity:0}}@keyframes tmB34{0%,34%{opacity:0}34.01%,100%{opacity:1}}
/* timesheets */
.rcg .h20 .bar2{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rcg .h20 .kps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.rcg .h20 .kpi .v{display:inline-grid;min-height:19px}
.rcg .h20 .k1 .a{animation:tmA62 var(--t) step-end infinite}.rcg .h20 .k1 .b{animation:tmB62 var(--t) step-end infinite}
@keyframes tmA62{0%,62.5%{opacity:1}62.51%,100%{opacity:0}}@keyframes tmB62{0%,62.5%{opacity:0}62.51%,100%{opacity:1}}
.rcg .h20 .tsb,.rcg .h20 .phb{position:relative;display:grid}.rcg .h20 .tsb>*,.rcg .h20 .phb>*{grid-area:1/1}
.rcg .h20 .empty{border-radius:8px;background:var(--g-soft,#f6f7f9);display:grid;place-items:center;align-content:center;gap:3px;color:var(--g-mute,#6b7280);font-size:9px;text-align:center}.rcg .h20 .empty b{font-size:10px;font-weight:600;color:var(--g-ink2,#3a3f4b)}
.rcg .h20 .empty i{width:18px;height:18px;border:1.5px solid var(--g-mute3,#d1d5db);border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:10px;margin-bottom:3px;position:relative}
.rcg .h20 .e2{height:62px}
.rcg .h20 .ts .row.r1{animation:tmR61 var(--t) ease-out infinite}.rcg .h20 .ts .row.r1>*{animation:tmR61i var(--t) ease-out infinite}
@keyframes tmR61{0%,61.3%{height:0;border-bottom-width:0}62.3%,100%{height:34px;border-bottom-width:1px}}@keyframes tmR61i{0%,61.8%{opacity:0;transform:translateY(4px)}62.8%,100%{opacity:1;transform:none}}
.rcg .h20 .ts .tbl .hd,.rcg .h20 .ts .tbl .row{grid-template-columns:64px minmax(0,1fr) 60px 50px 80px 70px}
.rcg .h20 .pop.ae{left:250px;top:42px;width:300px;opacity:0;transform:translateY(6px) scale(.97);animation:tmAe var(--t) cubic-bezier(.2,.9,.3,1.1) infinite}
@keyframes tmAe{0%,52.3%{opacity:0;transform:translateY(6px) scale(.97)}53.1%,60.6%{opacity:1;transform:none}61.1%,100%{opacity:0;transform:translateY(2px) scale(.98)}}
.rcg .h20 .pop .fr{display:grid;gap:8px;margin-top:10px}.rcg .h20 .pop .f{display:grid;gap:3px}.rcg .h20 .pop .f i{font-style:normal;font-size:8.5px;color:var(--g-mute,#6b7280)}.rcg .h20 .pop .f b{height:24px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;padding:0 8px;display:flex;align-items:center;font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden}
.rcg .h20 .pop .f b.dd::after{content:"";margin-left:auto;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6;flex:none}
.rcg .h20 .pop .f b.ty{border-color:var(--blue)}.rcg .h20 .pop .f b.ty em{display:inline-block;overflow:hidden;max-width:0;white-space:nowrap;font-style:normal;border-right:1.5px solid var(--blue);animation:tmTy var(--t) steps(3,end) infinite}
@keyframes tmTy{0%,55%{max-width:0}57.5%,100%{max-width:28px}}
.rcg .h20 .pop .bt{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}
/* pay */
.rcg .h20 .ci3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 16px;margin-bottom:14px}
.rcg .h20 .ch{display:flex;align-items:center;gap:14px;margin-bottom:8px;min-height:20px}.rcg .h20 .ch .sec{margin:0 auto 0 0}.rcg .h20 .ch .tot{font-size:9.5px;color:var(--g-mute,#6b7280);display:inline-flex;align-items:center;gap:4px}.rcg .h20 .ch .tot b{color:var(--g-ink,#111318);font-weight:700}
.rcg .h20 .p1 .a{animation:tmA81 var(--t) step-end infinite}.rcg .h20 .p1 .b{animation:tmB81 var(--t) step-end infinite}.rcg .h20 .stp .a{animation:tmA81 var(--t) step-end infinite}.rcg .h20 .stp .b{animation:tmB81 var(--t) step-end infinite}
@keyframes tmA81{0%,81.3%{opacity:1}81.31%,100%{opacity:0}}@keyframes tmB81{0%,81.3%{opacity:0}81.31%,100%{opacity:1}}
.rcg .h20 .btn.rp{opacity:0;animation:tmRp var(--t) step-end infinite}
@keyframes tmRp{0%,76.2%{opacity:0}76.21%,80.8%{opacity:1}80.81%,81.3%{opacity:1;filter:brightness(.85)}81.31%,100%{opacity:0}}
.rcg .h20 .cm{margin-bottom:6px}.rcg .h20 .cm .hd,.rcg .h20 .cm .row{grid-template-columns:14px 62px 60px 84px minmax(0,1fr) 58px 70px 32px 70px 50px}
.rcg .h20 .cb{width:11px;height:11px;border:1.5px solid var(--g-mute3,#d1d5db);border-radius:3px;display:inline-block;position:relative;vertical-align:middle}
.rcg .h20 .cb.ck{animation:tmCb var(--t) step-end infinite}.rcg .h20 .cb.ck::after{content:"";position:absolute;left:2.5px;top:0;width:3px;height:6px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);opacity:0;animation:tmCk var(--t) step-end infinite}
@keyframes tmCb{0%,76.2%{background:transparent;border-color:var(--g-mute3,#d1d5db)}76.21%,81.3%{background:var(--blue);border-color:var(--blue)}81.31%,100%{background:transparent;border-color:var(--g-mute3,#d1d5db)}}
@keyframes tmCk{0%,76.2%{opacity:0}76.21%,81.3%{opacity:1}81.31%,100%{opacity:0}}
.rcg .h20 .py .hint{margin:0 0 12px}
.rcg .h20 .e2{animation:tmA82 var(--t) step-end infinite}.rcg .h20 .r2{opacity:0;align-self:start;animation:tmR82 var(--t) ease-out infinite}
@keyframes tmA82{0%,81.8%{opacity:1}81.81%,100%{opacity:0}}@keyframes tmR82{0%,81.8%{opacity:0;transform:translateY(5px)}82.6%,100%{opacity:1;transform:none}}
.rcg .h20 .r2 .row{grid-template-columns:64px minmax(0,1fr) 70px 80px 70px}
/* toasts */
.rcg .h20 .toast.tA{animation:tmTA var(--t) ease-out infinite}.rcg .h20 .toast.tB{animation:tmTB var(--t) ease-out infinite}.rcg .h20 .toast.tC{animation:tmTC var(--t) ease-out infinite}
@keyframes tmTA{0%,12.5%{opacity:0;transform:translateY(8px)}13.8%,22%{opacity:1;transform:none}23.3%,100%{opacity:0;transform:translateY(4px)}}
@keyframes tmTB{0%,34.5%{opacity:0;transform:translateY(8px)}35.8%,44%{opacity:1;transform:none}45.3%,100%{opacity:0;transform:translateY(4px)}}
@keyframes tmTC{0%,85.5%{opacity:0;transform:translateY(8px)}86.8%,95.5%{opacity:1;transform:none}96.8%,100%{opacity:0;transform:translateY(4px)}}
/* cursor */
.rcg .h20 .cur{animation:tmCur var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes tmCur{0%,4%{opacity:0;left:600px;top:360px}9.5%{opacity:1;left:526px;top:272px}11%{left:526px;top:272px;transform:scale(1)}11.4%{transform:scale(.8)}12%{transform:scale(1)}21%{left:526px;top:272px}24%{left:196px;top:70px}24.5%{left:196px;top:70px;transform:scale(1)}24.9%{transform:scale(.8)}25.5%{transform:scale(1)}28%{left:196px;top:70px}31%{left:600px;top:180px}42%{left:600px;top:180px}45%{left:130px;top:70px}45.5%{left:130px;top:70px;transform:scale(1)}45.9%{transform:scale(.8)}46.5%{transform:scale(1)}48.5%{left:130px;top:70px}51.5%{left:734px;top:110px}52%{left:734px;top:110px;transform:scale(1)}52.4%{transform:scale(.8)}53%{transform:scale(1)}56%{left:734px;top:110px}59.8%{left:517px;top:340px}60.5%{left:517px;top:340px;transform:scale(1)}60.9%{transform:scale(.8)}61.5%{transform:scale(1)}64%{left:517px;top:340px}69%{left:78px;top:70px}69.5%{left:78px;top:70px;transform:scale(1)}69.9%{transform:scale(.8)}70.5%{transform:scale(1)}72.5%{left:78px;top:70px}75.5%{left:37px;top:265px}76%{left:37px;top:265px;transform:scale(1)}76.4%{transform:scale(.8)}77%{transform:scale(1)}78%{left:37px;top:265px}80.3%{left:602px;top:198px}80.8%{left:602px;top:198px;transform:scale(1)}81.2%{transform:scale(.8)}81.8%{transform:scale(1)}84%{opacity:1;left:602px;top:198px}86%,100%{opacity:0;left:602px;top:198px}}