/* H21 Calendar — 28s loop: fully booked month → drag a booking to a new day → + new booking → job completes from the board → Week view → Timeline (by bay) (needs hero-graphics.css shell) */
.rcg .h21{--t:28s;--pnk:#ec4899;--tl:#0d9488;--lt:#0ea5e9}
.rcg .h21 .top{margin-bottom:0;height:28px}.rcg .h21 .lf{display:flex;gap:6px;align-items:center;min-width:0}
.rcg .h21 .nav{height:26px;border:1px solid var(--g-line,#e6e8ed);border-radius:6px;display:inline-flex;align-items:center;gap:8px;padding:0 8px;white-space:nowrap}.rcg .h21 .nav i{font-style:normal;color:var(--g-mute,#6b7280);font-weight:600;font-size:12px;line-height:1}.rcg .h21 .nav b{font-size:10.5px;font-weight:700;letter-spacing:-.01em}
.rcg .h21 .stat{height:26px;padding:0 8px;font-size:9px;gap:4px;border-radius:6px}
.rcg .h21 .srch{white-space:nowrap}.rcg .h21 .btn.plus{width:26px;padding:0;justify-content:center;font-size:0;line-height:0}.rcg .h21 .btn.plus::before,.rcg .h21 .btn.plus::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:1px;transform:translate(-50%,-50%)}.rcg .h21 .btn.plus::before{width:10px;height:1.5px}.rcg .h21 .btn.plus::after{width:1.5px;height:10px}
.rcg .h21 .sw .c{opacity:0}.rcg .h21 .v3 .a{animation:clVa var(--t) step-end infinite}.rcg .h21 .v3 .b{animation:clVb var(--t) step-end infinite}.rcg .h21 .v3 .c{animation:clVc var(--t) step-end infinite}
@keyframes clVa{0%,63%{opacity:1}63.01%,100%{opacity:0}}@keyframes clVb{0%,63%{opacity:0}63.01%,84.5%{opacity:1}84.51%,100%{opacity:0}}@keyframes clVc{0%,84.5%{opacity:0}84.51%,100%{opacity:1}}
.rcg .h21 .u1 .a{animation:clUa var(--t) step-end infinite}.rcg .h21 .u1 .b{animation:clUb var(--t) step-end infinite}
@keyframes clUa{0%,34.8%{opacity:1}34.81%,100%{opacity:0}}@keyframes clUb{0%,34.8%{opacity:0}34.81%,100%{opacity:1}}
/* views */
.rcg .h21 .vw{position:absolute;left:22px;right:22px;top:60px;bottom:18px;opacity:0}
.rcg .h21 .vw.mo{opacity:1;animation:clVmo var(--t) ease-in-out infinite}.rcg .h21 .vw.wk2{animation:clVwk var(--t) ease-in-out infinite}.rcg .h21 .vw.tl2{animation:clVtl var(--t) ease-in-out infinite}
@keyframes clVmo{0%,62%{opacity:1;transform:none}63.5%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes clVwk{0%,62.5%{opacity:0;transform:translateX(10px)}64%,83.5%{opacity:1;transform:none}85%,100%{opacity:0;transform:translateX(-10px)}}
@keyframes clVtl{0%,84%{opacity:0;transform:translateX(10px)}85.5%,100%{opacity:1;transform:none}}
/* event bars */
.rcg .h21 .pur{--ec:var(--pur)}.rcg .h21 .blu{--ec:var(--blue)}.rcg .h21 .pnk{--ec:var(--pnk)}.rcg .h21 .org{--ec:var(--org)}.rcg .h21 .grn{--ec:var(--grn)}.rcg .h21 .tl{--ec:var(--tl)}.rcg .h21 .lt{--ec:var(--lt)}
.rcg .h21 .ev{position:absolute;height:13px;border-radius:3px;display:flex;align-items:center;gap:4px;padding:0 5px 0 4px;font-size:7.5px;white-space:nowrap;overflow:hidden;border:1px solid color-mix(in srgb,var(--ec) 18%,transparent);border-left:2px solid color-mix(in srgb,var(--ec) 70%,transparent);background:color-mix(in srgb,var(--ec) 10%,var(--g-bg,#fff));left:calc(var(--c)*var(--cw) + 1px);width:calc(var(--s)*var(--cw) - 3px);top:calc(var(--r0,19px) + var(--r,0)*15.5px)}
.rcg .h21 .ev b{font-weight:700;color:var(--g-ink,#111318);flex:none}.rcg .h21 .ev span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--g-mute,#6b7280)}.rcg .h21 .ev em{margin-left:auto;font-style:normal;font-weight:700;color:var(--g-ink,#111318);flex:none;padding-left:4px}
.rcg .h21 .ev.ct{border-left-width:1px;border-left-color:color-mix(in srgb,var(--ec) 18%,transparent);border-radius:0 3px 3px 0}
.rcg .h21 .ev.dn{background:var(--g-bg,#fff);border-color:color-mix(in srgb,var(--ec) 45%,transparent);border-left-width:1.5px}.rcg .h21 .ev.dn.ct{border-left-width:1px}
.rcg .h21 .ev.dn::before,.rcg .h21 .ev.fl::before{content:"✓";color:var(--grn);font-weight:800;font-size:8px;flex:none;line-height:1}
.rcg .h21 .ev.fl::before{max-width:0;overflow:hidden;margin-right:-4px;animation:clFlk var(--t) step-end infinite}.rcg .h21 .ev.fl{animation:clFl var(--t) step-end infinite}
@keyframes clFl{0%,48%{background:color-mix(in srgb,var(--ec) 10%,var(--g-bg,#fff));border-color:color-mix(in srgb,var(--ec) 18%,transparent);border-left-color:color-mix(in srgb,var(--ec) 70%,transparent)}48.01%,100%{background:var(--g-bg,#fff);border-color:color-mix(in srgb,var(--ec) 45%,transparent);border-left-width:1.5px}}
@keyframes clFlk{0%,48%{max-width:0;margin-right:-4px}48.01%,100%{max-width:10px;margin-right:0}}
.rcg .h21 .ev.dg{z-index:5;animation:clDg var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes clDg{0%,9.6%{left:calc(6*14.2857% + 1px);box-shadow:none;transform:none}10.5%{left:calc(6*14.2857% + 1px);box-shadow:0 8px 18px -6px rgba(0,0,0,.4);transform:scale(1.05)}14.5%{left:calc(4*14.2857% + 1px);box-shadow:0 8px 18px -6px rgba(0,0,0,.4);transform:scale(1.05)}15.2%,100%{left:calc(4*14.2857% + 1px);box-shadow:none;transform:none}}
.rcg .h21 .tgt{position:absolute;top:0;bottom:0;left:calc(4*14.2857%);width:14.2857%;background:var(--g-hi,#f3f4f6);opacity:0;animation:clTg var(--t) ease-out infinite}
@keyframes clTg{0%,10.5%{opacity:0}11%,15%{opacity:1}15.6%,100%{opacity:0}}
.rcg .h21 .ev.nw{opacity:0;animation:clNw var(--t) ease-out infinite}
@keyframes clNw{0%,34.7%{opacity:0;box-shadow:0 0 0 0 rgba(27,100,243,0)}34.8%{opacity:1;box-shadow:0 0 0 0 rgba(27,100,243,.6)}40%,100%{opacity:1;box-shadow:0 0 0 7px rgba(27,100,243,0)}}
/* month */
.rcg .h21 .dh{display:grid;grid-template-columns:repeat(7,1fr);height:16px;font-size:7.5px;font-weight:700;letter-spacing:.06em;color:var(--g-mute,#6b7280);text-transform:uppercase;align-items:center;text-align:center;border-bottom:1px solid var(--g-line,#e6e8ed)}
.rcg .h21 .wk{position:relative;height:89px;border-bottom:1px solid var(--g-line,#e6e8ed);--cw:14.2857%}.rcg .h21 .wk:last-child{border-bottom:0}
.rcg .h21 .wk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(14.2857% - 1px),var(--g-line,#e6e8ed) calc(14.2857% - 1px),var(--g-line,#e6e8ed) 14.2857%);pointer-events:none}
.rcg .h21 .wk .d{display:grid;grid-template-columns:repeat(7,1fr);height:18px;position:relative}.rcg .h21 .wk .d span{font-size:9px;font-weight:700;padding:4px 0 0 6px;color:var(--g-ink,#111318)}.rcg .h21 .wk .d span.pm{color:var(--g-mute3,#d1d5db)}
.rcg .h21 .wk .d span.td i{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;margin:-2px 0 0 -3px;font-size:8.5px}
.rcg .h21 .more{position:absolute;bottom:2px;left:calc(var(--c)*var(--cw));width:var(--cw);text-align:center;font-size:7px;font-weight:600;color:var(--blue);font-style:normal}
/* week */
.rcg .h21 .vw.wk2{display:flex;flex-direction:column}
.rcg .h21 .wh{display:grid;grid-template-columns:36px repeat(7,1fr);height:34px;border-bottom:1px solid var(--g-line,#e6e8ed)}.rcg .h21 .wh span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.rcg .h21 .wh i{font-style:normal;font-size:7px;font-weight:700;letter-spacing:.06em;color:var(--g-mute,#6b7280);text-transform:uppercase}.rcg .h21 .wh b{font-size:11.5px;font-weight:700;line-height:1}.rcg .h21 .wh b.td{width:17px;height:17px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:9.5px}
.rcg .h21 .ad{display:grid;grid-template-columns:36px 1fr;border-bottom:1px solid var(--g-line,#e6e8ed);margin-top:2px}.rcg .h21 .ad>i{font-size:7px;font-weight:700;letter-spacing:.06em;color:var(--g-mute,#6b7280);text-transform:uppercase;font-style:normal;align-self:center;text-align:center}
.rcg .h21 .lane{position:relative;height:68px;--cw:14.2857%;--r0:3px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(14.2857% - 1px),var(--g-line,#e6e8ed) calc(14.2857% - 1px),var(--g-line,#e6e8ed) 14.2857%)}
.rcg .h21 .tgd{display:grid;grid-template-columns:36px 1fr;flex:1;min-height:0}.rcg .h21 .hrs{position:relative}.rcg .h21 .hrs span{position:absolute;right:6px;top:calc(var(--i)*26.6px - 3px);font-size:7.5px;color:var(--g-mute,#6b7280)}
.rcg .h21 .cols{position:relative;overflow:hidden;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 25.6px,var(--g-line,#e6e8ed) 25.6px,var(--g-line,#e6e8ed) 26.6px),repeating-linear-gradient(to right,transparent 0,transparent calc(14.2857% - 1px),var(--g-line,#e6e8ed) calc(14.2857% - 1px),var(--g-line,#e6e8ed) 14.2857%)}
.rcg .h21 .blk{position:absolute;left:calc(var(--c)*14.2857% + 2px);width:calc(14.2857% - 4px);top:calc((var(--h0) - 8)*26.6px + 1px);height:calc((var(--h1) - var(--h0))*26.6px - 2px);border-radius:4px;border:1px solid color-mix(in srgb,var(--ec) 18%,transparent);border-left:2px solid color-mix(in srgb,var(--ec) 70%,transparent);background:color-mix(in srgb,var(--ec) 10%,var(--g-bg,#fff));padding:3px 5px;font-size:7.5px;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.rcg .h21 .blk b{font-size:8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rcg .h21 .blk span{color:var(--g-mute,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rcg .h21 .blk em{margin-top:auto;font-style:normal;font-weight:700}
.rcg .h21 .blk.dn{background:var(--g-bg,#fff);border-color:color-mix(in srgb,var(--ec) 45%,transparent);border-left-width:1.5px}.rcg .h21 .blk.dn b::before{content:"✓ ";color:var(--grn)}
.rcg .h21 .now{position:absolute;left:calc(3*14.2857%);width:14.2857%;top:calc(2.7*26.6px);height:1.5px;background:var(--red)}.rcg .h21 .now::before{content:"";position:absolute;left:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--red)}
/* timeline */
.rcg .h21 .tlm{position:relative;height:14px;font-size:8.5px;font-weight:700}.rcg .h21 .tlm span{position:absolute;left:4px;top:0}.rcg .h21 .tlm .m2{left:calc(var(--mb,0)*7.1429% + 4px);display:none}.rcg .h21 .tlm.two .m2{display:block}
.rcg .h21 .tld{display:grid;grid-template-columns:repeat(14,1fr);height:24px;border-bottom:1px solid var(--g-line,#e6e8ed)}.rcg .h21 .tld span{display:flex;flex-direction:column;align-items:center;justify-content:center}.rcg .h21 .tld i{font-style:normal;font-size:7px;font-weight:700;color:var(--g-mute,#6b7280)}.rcg .h21 .tld b{font-size:9px;font-weight:700;line-height:1;margin-top:1px}.rcg .h21 .tld b.td{width:14px;height:14px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:8px;margin-top:0}
.rcg .h21 .tlb{position:relative;background:repeating-linear-gradient(to right,transparent 0,transparent calc(7.1429% - 1px),var(--g-line,#e6e8ed) calc(7.1429% - 1px),var(--g-line,#e6e8ed) 7.1429%)}.rcg .h21 .tlb::after{content:"";position:absolute;top:0;bottom:0;left:calc(3*7.1429%);width:calc(7.1429% - 1px);background:rgba(27,100,243,.06);pointer-events:none}
.rcg .h21 .gh{height:18px;display:flex;align-items:center;gap:6px;padding:0 6px;font-size:7.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink2,#3a3f4b);background:var(--g-soft,#f6f7f9);position:relative;z-index:1}.rcg .h21 .gh i{width:6px;height:6px;border-radius:50%;background:var(--ec,var(--g-mute3,#d1d5db))}.rcg .h21 .gh small{color:var(--g-mute,#6b7280);font-weight:600;font-size:7.5px}
.rcg .h21 .tr{position:relative;height:16px;border-bottom:1px solid var(--g-soft,#f1f2f5);--cw:7.1429%;--r0:1.5px}
/* popovers */
.rcg .h21 .pop.menu{right:54px;top:48px;width:104px;padding:4px;opacity:0;transform:translateY(-4px);animation:clMenu var(--t) ease-out infinite}.rcg .h21 .menu span{display:flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;font-size:9.5px;font-weight:600;color:var(--g-ink2,#3a3f4b)}
.rcg .h21 .menu .hw{animation:clHw var(--t) step-end infinite}.rcg .h21 .menu .ht{animation:clHt var(--t) step-end infinite}
@keyframes clMenu{0%,58%{opacity:0;transform:translateY(-4px)}58.4%,61.4%{opacity:1;transform:none}61.5%,80%{opacity:0;transform:translateY(-4px)}80.4%,83%{opacity:1;transform:none}83.1%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes clHw{0%,60.3%{background:transparent}60.31%,61.4%{background:var(--g-hi,#f3f4f6)}61.41%,100%{background:transparent}}@keyframes clHt{0%,81.8%{background:transparent}81.81%,83%{background:var(--g-hi,#f3f4f6)}83.01%,100%{background:transparent}}
.rcg .h21 .pop.nb{left:250px;top:96px;width:300px;opacity:0;transform:translateY(6px) scale(.97);animation:clNb var(--t) cubic-bezier(.2,.9,.3,1.1) infinite}
@keyframes clNb{0%,25%{opacity:0;transform:translateY(6px) scale(.97)}25.8%,34.2%{opacity:1;transform:none}34.8%,100%{opacity:0;transform:translateY(2px) scale(.98)}}
.rcg .h21 .pop .fr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.rcg .h21 .pop .f{display:grid;gap:3px;min-width:0}.rcg .h21 .pop .f i{font-style:normal;font-size:8.5px;color:var(--g-mute,#6b7280)}.rcg .h21 .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 .h21 .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 .h21 .pop .f b.ty{border-color:var(--blue)}.rcg .h21 .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:clTy var(--t) steps(14,end) infinite}
@keyframes clTy{0%,27.5%{max-width:0}30.5%,100%{max-width:120px}}
.rcg .h21 .pop .bt{display:flex;justify-content:flex-end;gap:6px;margin-top:12px}
/* toasts (top-right so they never cover the active week) */
.rcg .h21 .toast{bottom:auto;top:62px;right:30px}
.rcg .h21 .toast.tA{animation:clTA var(--t) ease-out infinite}.rcg .h21 .toast.tB{animation:clTB var(--t) ease-out infinite}.rcg .h21 .toast.tC{animation:clTC var(--t) ease-out infinite}
@keyframes clTA{0%,15.8%{opacity:0;transform:translateY(-8px)}17%,22%{opacity:1;transform:none}23.2%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes clTB{0%,35.5%{opacity:0;transform:translateY(-8px)}36.7%,43%{opacity:1;transform:none}44.2%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes clTC{0%,48.5%{opacity:0;transform:translateY(-8px)}49.7%,55%{opacity:1;transform:none}56.2%,100%{opacity:0;transform:translateY(-4px)}}
/* cursor */
.rcg .h21 .cur{animation:clCur var(--t) cubic-bezier(.3,.7,.3,1) infinite}
@keyframes clCur{0%,4%{opacity:0;left:640px;top:300px}9%{opacity:1;left:724px;top:415px}9.6%{left:724px;top:415px;transform:scale(1)}10.2%{transform:scale(.8)}10.5%{left:724px;top:415px;transform:scale(.8)}14.5%{left:508px;top:415px;transform:scale(.8)}15.2%{transform:scale(1)}19%{left:508px;top:415px}23.5%{left:765px;top:31px}24.5%{left:765px;top:31px;transform:scale(1)}24.9%{transform:scale(.8)}25.5%{transform:scale(1)}25.8%{left:765px;top:31px}27%{left:300px;top:170px}27.2%{transform:scale(1)}27.5%{transform:scale(.8)}28%{transform:scale(1)}31%{left:300px;top:170px}33%{left:496px;top:299px}33.5%{left:496px;top:299px;transform:scale(1)}33.9%{transform:scale(.8)}34.5%{transform:scale(1)}36%{left:496px;top:299px}40%{left:560px;top:330px}52%{left:560px;top:330px}57%{left:715px;top:31px}57.5%{left:715px;top:31px;transform:scale(1)}57.9%{transform:scale(.8)}58.5%{transform:scale(1)}59.5%{left:715px;top:31px}60.5%{left:700px;top:85px}61%{left:700px;top:85px;transform:scale(1)}61.4%{transform:scale(.8)}62%{transform:scale(1)}63%{left:700px;top:85px}66%{left:600px;top:200px}76%{left:600px;top:200px}79%{left:715px;top:31px}79.5%{left:715px;top:31px;transform:scale(1)}79.9%{transform:scale(.8)}80.5%{transform:scale(1)}81%{left:715px;top:31px}82%{left:700px;top:107px}82.5%{left:700px;top:107px;transform:scale(1)}82.9%{transform:scale(.8)}83.5%{transform:scale(1)}84.5%{left:700px;top:107px}88%{opacity:1;left:560px;top:260px}91%,100%{opacity:0;left:560px;top:260px}}