/* jockey/staff-app.css — B66 W5: Jockey Staff in Workbook (ported from the approved samples/b66/staff.html + wb.css, scoped to #jkStaff). */

#jkStaff /* B66 samples — WORKBOOK atoms (the design system Mocca and Jockey Staff share; 066-013).
   Tokens come from the real colors_and_type.css. A domain re-colours Workbook by overriding the
   tokens on <html data-dom="…"> — the components below never change. Nothing here is shipped. */

*{box-sizing:border-box}

#jkStaff{font:400 14px/1.45 var(--mk-font-ui);color:var(--fg-1);background:var(--bg-2);-webkit-font-smoothing:antialiased}
#jkStaff button, #jkStaff input, #jkStaff select, #jkStaff textarea{font:inherit;color:inherit}
#jkStaff [hidden]{display:none!important}
#jkStaff .mi{font-family:'Material Symbols Rounded'!important;font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;flex:0 0 auto}
#jkStaff .mi.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
#jkStaff /* ── sample strip (not part of any design) ─────────────────────────── */
.sx{position:fixed;inset:auto 0 0 auto;z-index:300;display:flex;gap:6px;padding:8px;margin:0 12px 12px 0;border-radius:14px;background:color-mix(in srgb,var(--bg-1) 92%,transparent);border:1px solid var(--border);box-shadow:var(--shadow-pop);backdrop-filter:blur(10px)}
#jkStaff[dir=rtl] .sx{inset:auto auto 0 0;margin:0 0 12px 12px}
#jkStaff .sx button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg-1);font:600 12px var(--mk-font-ui);cursor:pointer;white-space:nowrap}
#jkStaff .sx button .mi{font-size:17px}
#jkStaff .sx b{font:700 11px var(--mk-font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);align-self:center;padding:0 4px}
@media (max-width:699px){
#jkStaff .sx{inset:auto 0 70px auto}
#jkStaff .sx b{display:none}}
#jkStaff /* ── shell: navbar · sidebar · main ───────────────────────────────── */
.wb{display:grid;grid-template-columns:248px 1fr;grid-template-rows:60px 1fr;height:100dvh;overflow:hidden}
#jkStaff .wb-nav{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 16px;background:color-mix(in srgb,var(--bg-1) 96%,transparent);border-bottom:1px solid var(--border);z-index:20}
#jkStaff .wb-brand{display:flex;align-items:center;gap:10px;min-width:216px;font:700 15px var(--mk-font-ui);white-space:nowrap}
#jkStaff .wb-brand img{width:34px;height:34px;border-radius:50%;display:block}
#jkStaff .wb-brand small{display:block;font:600 10.5px var(--mk-font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
#jkStaff .wb-search{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-input);color:var(--fg-3)}
#jkStaff .wb-search input{border:0;background:none;outline:0;flex:1;min-width:0;font:500 13.5px var(--mk-font-ui);color:var(--fg-1)}
#jkStaff .wb-sp{flex:1}
#jkStaff .wb-pill{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-1);font:600 13px var(--mk-font-ui);cursor:pointer;white-space:nowrap}
#jkStaff .wb-pill .mi{font-size:19px}
#jkStaff .wb-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--mk-danger);color:#fff;font:800 10.5px/18px var(--mk-font-ui);text-align:center;box-shadow:0 0 0 2px var(--bg-1)}
#jkStaff .wb-me{width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-fg);font:700 13px var(--mk-font-ui);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;background-size:cover}
#jkStaff .wb-side{background:var(--bg-1);border-inline-end:1px solid var(--border);padding:12px 10px;overflow:auto;display:flex;flex-direction:column;gap:2px}
#jkStaff .wb-sec{font:700 10.5px var(--mk-font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding:14px 10px 6px}
#jkStaff .wb-item{position:relative;display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:10px;border:0;background:none;width:100%;text-align:start;font:600 13.5px var(--mk-font-ui);color:var(--fg-2);cursor:pointer}
#jkStaff .wb-item:hover{background:var(--bg-2);color:var(--fg-1)}
#jkStaff .wb-item.on{background:var(--accent-soft);color:var(--accent-text)}
#jkStaff .wb-item .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#jkStaff .wb-item .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font:800 11px/20px var(--mk-font-ui);text-align:center}
#jkStaff .wb-main{overflow:auto;position:relative;scroll-behavior:smooth}
#jkStaff .wb-page{max-width:1280px;margin:0 auto;padding:22px 24px 120px}
#jkStaff /* page header: title at the start, #jkStaff the bar selector at the END (066-028 · 065) */
.wb-ph{display:flex;align-items:center;gap:12px;min-height:44px;margin:0 0 18px}
#jkStaff .wb-ph h1{margin:0;font:750 24px/1.15 var(--mk-font-ui);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkStaff .wb-ph .wb-sp{min-width:8px}
#jkStaff .wb-back{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--bg-1);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
#jkStaff[dir=rtl] .wb-back .mi{transform:scaleX(-1)}
#jkStaff /* bottom tabs (phone) */
.wb-tabs{display:none}
@media (max-width:1099px){
#jkStaff .wb{grid-template-columns:76px 1fr}
#jkStaff .wb-side{padding:10px 8px;align-items:stretch}
#jkStaff .wb-item{flex-direction:column;justify-content:center;height:58px;gap:3px;padding:0 4px;font-size:10.5px;text-align:center}
#jkStaff .wb-item .lbl{white-space:nowrap;max-width:60px}
#jkStaff .wb-item .cnt{position:absolute;top:4px;inset-inline-end:8px;min-width:18px;height:18px;line-height:18px;font-size:10px}
#jkStaff .wb-sec{display:none}
#jkStaff .wb-brand{min-width:0}
#jkStaff .wb-brand .wb-bt{display:none}
}
@media (max-width:699px){
#jkStaff .wb{grid-template-columns:1fr;grid-template-rows:56px 1fr 64px}
#jkStaff .wb-side{display:none}
#jkStaff .wb-search{display:none}
#jkStaff .wb-page{padding:16px 16px 110px}
#jkStaff .wb-ph h1{font-size:21px}
#jkStaff .wb-tabs{display:flex;grid-column:1/-1;border-top:1px solid var(--border);background:var(--bg-1);padding:0 4px env(safe-area-inset-bottom)}
#jkStaff .wb-tabs .wb-item{flex:1;height:64px;border-radius:0}
#jkStaff .wb-tabs .wb-item.on{background:none}
#jkStaff .wb-tabs .wb-item.on .mi{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
/* B67 R67-055 — a tab's count sat at the tab's far end (the 76px rail's corner), which on a half-screen phone tab is the middle
   of the bar, detached from its tab ("Queue … 3 … Out of stock"): it sits on the icon's corner, as every app's tab badge */
#jkStaff .wb-tabs .wb-item .cnt{inset-inline-end:auto;inset-inline-start:calc(50% + 6px);top:6px}
}
/* phone landscape: the bars become rails */
@media (max-height:520px) and (orientation:landscape){
  #jkStaff .wb{grid-template-columns:72px 1fr;grid-template-rows:1fr}
  #jkStaff .wb-nav{grid-column:1;grid-row:1;flex-direction:column;justify-content:flex-start;padding:10px 0;border-bottom:0;border-inline-end:1px solid var(--border);gap:8px}
  #jkStaff .wb-nav .wb-search,#jkStaff .wb-nav .wb-bt,#jkStaff .wb-nav .wb-sp{display:none}
  #jkStaff .wb-brand{min-width:0;justify-content:center}
  #jkStaff .wb-pill{padding:0;width:44px;justify-content:center}
  #jkStaff .wb-pill .t{display:none}
  #jkStaff .wb-side{display:none}
  #jkStaff .wb-tabs{display:flex;flex-direction:column;justify-content:flex-end;grid-column:1;grid-row:1;position:fixed;inset-block:200px 0;inset-inline-start:0;width:72px;padding-bottom:6px;border:0;background:none;z-index:21}
  #jkStaff .wb-tabs .wb-item{height:54px;flex:0 0 auto}
  #jkStaff .wb-main{grid-column:2;grid-row:1}
  #jkStaff .wb-page{padding:14px 18px 90px}
  #jkStaff .wb-ph{min-height:40px;margin-bottom:12px}
}
#jkStaff /* ── atoms ─────────────────────────────────────────────────────────── */
.wb-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--mk-radius-lg)}
#jkStaff .wb-card-h{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
#jkStaff .wb-card-h h2, #jkStaff .wb-card-h h3{margin:0;font:700 15px var(--mk-font-ui)}
#jkStaff .wb-card-b{padding:0 16px 16px}
#jkStaff .wb-grid{display:grid;gap:14px}
#jkStaff .wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 15px;border-radius:11px;border:1px solid var(--border);background:var(--bg-1);font:650 13.5px var(--mk-font-ui);cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--fg-1)}
#jkStaff .wb-btn:hover{background:var(--bg-2)}
#jkStaff .wb-btn.pri{background:var(--accent);border-color:transparent;color:var(--accent-fg)}
#jkStaff .wb-btn.pri:hover{filter:brightness(1.08)}
#jkStaff .wb-btn.ok{background:var(--mk-success);border-color:transparent;color:#fff}
#jkStaff .wb-btn.bad{color:var(--mk-danger)}
#jkStaff .wb-btn.sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
#jkStaff .wb-btn .mi{font-size:19px}
#jkStaff .wb-btn[disabled]{opacity:.45;cursor:not-allowed}
#jkStaff .wb-ic{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--bg-1);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;color:var(--fg-1)}
#jkStaff .wb-ic.sm{width:32px;height:32px;border-radius:9px}
#jkStaff .wb-ic .mi{font-size:19px}
#jkStaff .wb-seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--bg-3);border:1px solid var(--border);gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none;flex:0 1 auto}
#jkStaff .wb-seg::-webkit-scrollbar{display:none}
#jkStaff .wb-seg button{border:0;background:none;height:32px;padding:0 12px;border-radius:9px;font:650 12.5px var(--mk-font-ui);color:var(--fg-2);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
#jkStaff .wb-seg button.on{background:var(--bg-1);color:var(--fg-1);box-shadow:var(--shadow-xs)}
#jkStaff .wb-seg button .n{font:800 11px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .wb-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:var(--bg-3);font:650 11.5px var(--mk-font-ui);color:var(--fg-2);white-space:nowrap}
#jkStaff .wb-chip .mi{font-size:15px}
#jkStaff .wb-chip.acc{background:var(--accent-soft);color:var(--accent-text)}
#jkStaff .wb-chip.ok{background:color-mix(in srgb,var(--mk-success) 16%,transparent);color:color-mix(in srgb,var(--mk-success) 70%,var(--fg-1))}
#jkStaff .wb-chip.warn{background:color-mix(in srgb,var(--mk-warning) 18%,transparent);color:color-mix(in srgb,var(--mk-warning) 60%,var(--fg-1))}
#jkStaff .wb-chip.bad{background:color-mix(in srgb,var(--mk-danger) 14%,transparent);color:var(--mk-danger)}
#jkStaff .wb-av{width:32px;height:32px;border-radius:50%;background:var(--bg-3) center/cover;flex:0 0 auto;display:grid;place-items:center;font:750 11.5px var(--mk-font-ui);color:var(--fg-2)}
#jkStaff .wb-av.lg{width:44px;height:44px;font-size:14px}
#jkStaff /* one control height for every input / dropdown (066-031) */
.wb-f{display:flex;flex-direction:column;gap:6px;min-width:0}
#jkStaff .wb-f > label{font:650 12px var(--mk-font-ui);color:var(--fg-2)}
#jkStaff .wb-in, #jkStaff .wb-cs{height:44px;border-radius:11px;border:1px solid var(--border);background:var(--bg-input);padding:0 12px;font:500 14px var(--mk-font-ui);color:var(--fg-1);width:100%;outline:0;display:flex;align-items:center;gap:8px}
#jkStaff .wb-in:focus, #jkStaff .wb-cs:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#jkStaff .wb-cs{cursor:pointer;justify-content:space-between}
#jkStaff .wb-cs .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#jkStaff textarea.wb-in{height:auto;min-height:88px;padding:10px 12px;resize:vertical;line-height:1.45;word-break:normal;overflow-wrap:break-word}
#jkStaff .wb-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-top:1px solid var(--border)}
#jkStaff .wb-row:first-child{border-top:0}
#jkStaff .wb-row .t{flex:1;min-width:0}
#jkStaff .wb-row .t b{display:block;font:650 14px var(--mk-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkStaff .wb-row .t small{display:block;font:500 12.5px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkStaff .wb-num{font-variant-numeric:tabular-nums}
#jkStaff .wb-kpi{padding:14px 16px}
#jkStaff .wb-kpi small{display:block;font:650 11.5px var(--mk-font-ui);color:var(--fg-3);letter-spacing:.02em}
#jkStaff .wb-kpi b{display:block;font:750 24px/1.2 var(--mk-font-ui);letter-spacing:-.01em;margin-top:4px;font-variant-numeric:tabular-nums}
#jkStaff .wb-empty{padding:28px 16px;text-align:center;color:var(--fg-3);font:500 13px var(--mk-font-ui)}
#jkStaff /* ── panel (right sheet) with pushed slides ──────────────────────── */
.wb-scrim{position:fixed;inset:0;background:rgba(9,16,24,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
#jkStaff .wb-scrim.open{opacity:1;pointer-events:auto}
#jkStaff .wb-panel{position:fixed;top:8px;bottom:8px;inset-inline-end:8px;width:min(460px,calc(100vw - 16px));background:var(--bg-1);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);z-index:90;display:flex;flex-direction:column;overflow:hidden;transform:translateX(calc(100% + 20px));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#jkStaff[dir=rtl] .wb-panel{transform:translateX(calc(-100% - 20px))}
#jkStaff .wb-panel.open{transform:none}
#jkStaff .wb-panel.wide{width:min(620px,calc(100vw - 16px))}
#jkStaff .wb-slides{position:relative;flex:1;overflow:hidden}
#jkStaff .wb-slide{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg-1);transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
#jkStaff .wb-slide.out{transform:translateX(-24%);opacity:0;pointer-events:none}
#jkStaff .wb-slide.in{transform:translateX(100%)}
#jkStaff[dir=rtl] .wb-slide.out{transform:translateX(24%)}
#jkStaff[dir=rtl] .wb-slide.in{transform:translateX(-100%)}
#jkStaff .wb-phd{display:flex;align-items:center;gap:8px;min-height:60px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--border)}
#jkStaff .wb-phd h2{margin:0;flex:1;min-width:0;font:750 17px var(--mk-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkStaff .wb-pbd{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
#jkStaff .wb-pft{display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg-1)}
#jkStaff .wb-pft .wb-btn{flex:1}
@media (max-width:699px){
#jkStaff .wb-panel{top:auto;bottom:0;inset-inline:0;width:100%;max-height:92dvh;height:auto;min-height:50dvh;border-radius:22px 22px 0 0;transform:translateY(105%)}
#jkStaff[dir=rtl] .wb-panel{transform:translateY(105%)}
#jkStaff .wb-panel.open{transform:none}
}
/* tablet: panels size to their content (066-072) */
@media (min-width:700px) and (max-width:1099px){#jkStaff .wb-panel{bottom:auto;max-height:calc(100dvh - 16px)}#jkStaff .wb-slides{flex:0 1 auto}#jkStaff .wb-slide{position:relative}#jkStaff .wb-slide.out,#jkStaff .wb-slide.in{position:absolute;inset:0}}
#jkStaff /* toast */
.wb-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:400;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border-radius:14px;background:var(--fg-1);color:var(--bg-1);font:650 13.5px var(--mk-font-ui);box-shadow:var(--shadow-pop);transition:all .25s;pointer-events:none;max-width:calc(100vw - 32px)}
#jkStaff .wb-toast.show{transform:translate(-50%,0);opacity:1}
@media (max-width:699px){
#jkStaff .wb-toast{bottom:84px}}
#jkStaff /* tree-map boxes (Frontend's nt-box grammar) */
.tm{display:flex;flex-direction:column;gap:6px}
#jkStaff .tm-box{border:1px solid var(--border);border-radius:12px;background:var(--bg-1);transition:box-shadow .15s,border-color .15s}
#jkStaff .tm-row{display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 8px 6px 6px;cursor:pointer;border-radius:11px}
#jkStaff .tm-row:hover{background:var(--bg-2)}
#jkStaff .tm-box.sel > .tm-row{background:var(--accent-soft)}
#jkStaff .tm-tw{width:28px;height:28px;display:grid;place-items:center;border:0;background:none;color:var(--fg-3);cursor:pointer;border-radius:7px;transition:transform .18s;flex:0 0 auto}
#jkStaff .tm-tw:hover{background:var(--bg-3);color:var(--fg-1)}
#jkStaff .tm-box.open > .tm-row .tm-tw{transform:rotate(90deg)}
#jkStaff[dir=rtl] .tm-tw{transform:scaleX(-1)}
#jkStaff[dir=rtl] .tm-box.open > .tm-row .tm-tw{transform:rotate(90deg)}
#jkStaff .tm-tw.leaf{visibility:hidden}
#jkStaff .tm-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--bg-3);color:var(--fg-2);flex:0 0 auto}
#jkStaff .tm-ic .mi{font-size:18px}
#jkStaff .tm-nm{font:650 13.5px var(--mk-font-ui);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#jkStaff .tm-sub{font:500 12px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkStaff .tm-sp{flex:1;min-width:8px}
#jkStaff .tm-type{height:20px;padding:0 7px;border-radius:6px;font:650 11px var(--mk-font-ui);display:inline-flex;align-items:center;border:1px solid var(--border);color:var(--fg-2);background:var(--bg-2);white-space:nowrap;flex:0 0 auto}
#jkStaff .tm-add{width:28px;height:28px;border-radius:8px;border:1px dashed var(--border-strong);background:none;display:grid;place-items:center;color:var(--fg-2);cursor:pointer;opacity:0;transition:opacity .12s;flex:0 0 auto}
#jkStaff .tm-row:hover .tm-add, #jkStaff .tm-row:focus-within .tm-add{opacity:1}
#jkStaff .tm-add .mi{font-size:17px}
#jkStaff .tm-kids{display:none;flex-direction:column;gap:6px;padding:0 8px 8px 34px}
#jkStaff .tm-box.open > .tm-kids{display:flex}
#jkStaff[dir=rtl] .tm-kids{padding:0 34px 8px 8px}
#jkStaff /* unstyled in a design system: red outline (066-008 · 012) */
.tm-box.unstyled{border-color:var(--mk-danger);box-shadow:0 0 0 1px var(--mk-danger)}
/* the animated multi-colour outline (pick / hover link) */
@property --mk-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes mkHue{to{--mk-a:360deg}}
#jkStaff .mk-glow{position:relative}
#jkStaff .mk-glow::after{content:'';position:absolute;inset:-3px;border-radius:inherit;padding:2px;pointer-events:none;z-index:5;
  background:conic-gradient(from var(--mk-a),#03C9CB,#7C3AED,#FF4D8D,#F59E0B,#22C55E,#03C9CB);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mkHue 2.4s linear infinite}
@media (prefers-reduced-motion:reduce){
#jkStaff .mk-glow::after{animation:none}}
#jkStaff /* the shell's create button (R2-35: "the add button is on the shell not on the header") */
.wb-fab{position:fixed;inset:auto;inset-inline-end:24px;bottom:24px;z-index:70;width:58px;height:58px;border-radius:18px;border:0;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-lg)}
#jkStaff .wb-fab .mi{font-size:28px}
/* B67 R67-009 — logical sides (was a [dir=rtl] override that out-ranked the phone lift below, so in Arabic the + sat on
   the tab bar over "Charges", and its menu still opened on the right) */
@media (max-width:699px){
#jkStaff .wb-fab{bottom:82px}}
#jkStaff .wb-fabm{position:fixed;inset:auto;inset-inline-end:24px;bottom:94px;z-index:71;min-width:220px;padding:6px;border-radius:16px;background:var(--bg-1);border:1px solid var(--border);box-shadow:var(--shadow-pop)}
#jkStaff .wb-fabm button{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 12px;border:0;border-radius:11px;background:none;cursor:pointer;font:650 13.5px var(--mk-font-ui);color:var(--fg-1);text-align:start}
#jkStaff .wb-fabm button:hover{background:var(--bg-2)}
@media (max-width:699px){
#jkStaff .wb-fabm{bottom:152px}}
#jkStaff /* Mocca's section tabs under the page header (R2-29: "we should've had tabs") */
.wb-stabs{display:flex;gap:2px;margin:-6px 0 18px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
#jkStaff .wb-stabs::-webkit-scrollbar{display:none}
#jkStaff .wb-stabs button{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font:650 13.5px var(--mk-font-ui);color:var(--fg-2);white-space:nowrap;margin-bottom:-1px}
#jkStaff .wb-stabs button .mi{font-size:19px}
#jkStaff .wb-stabs button.on{color:var(--accent-text);border-bottom-color:var(--accent)}
@media (min-width:700px) and (max-width:1099px){
#jkStaff .wb-stabs button{flex-direction:column;gap:3px;height:auto;padding:8px 12px;font-size:11px}}

/* ── the staff sample ── */

#jkStaff /* Workbook re-coloured by the staff.jockeyclub.app domain: Jockey's navy / cream / brass + Archivo. Components unchanged. */
html[data-dom="staff"][data-theme]{--mk-font-ui:'Archivo','Helvetica Neue',Arial,sans-serif;--mk-radius-lg:16px}
html[data-jk-staff][data-theme="light"] #jkStaff{--bg-1:#FFFFFF;--bg-2:#FBF8F2;--bg-3:#F2EDE2;--bg-input:#FBF8F2;--border:#EAE3D5;--border-strong:#D8CFBC;--fg-1:#1C2530;--fg-2:#4E5866;--fg-3:#6E6A60;--accent:#1C2530;--accent-fg:#FBF8F2;--accent-soft:#F6EFDC;--accent-text:#7E5F14;--gold:#B7913C}
html[data-jk-staff][data-theme="dark"] #jkStaff{--bg-1:#052E4C;--bg-2:#00243F;--bg-3:#0A3050;--bg-input:#0A3050;--border:rgba(216,184,88,.22);--border-strong:rgba(216,184,88,.4);--fg-1:#EFEAE0;--fg-2:#B9C4CF;--fg-3:#8FA2B4;--accent:#D8B858;--accent-fg:#00243F;--accent-soft:rgba(216,184,88,.16);--accent-text:#E0C176;--gold:#D8B858}
#jkStaff .wb-brand img{border-radius:10px;background:#FBF8F2;border:1px solid #D8CFBC}
#jkStaff .wb-brand b{letter-spacing:.16em;text-transform:uppercase;font-size:13px}
#jkStaff /* ── sign-in (the same screen every app gets, #jkStaff W1) ──────────────────── */
.si{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:radial-gradient(1200px 600px at 20% 0%,var(--accent-soft),transparent 60%),var(--bg-2);overflow:auto}
#jkStaff .si-card{width:min(440px,100%);background:var(--bg-1);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-lg);padding:28px 24px 22px}
#jkStaff .si-mark{display:flex;align-items:center;gap:12px;margin-bottom:22px}
#jkStaff .si-mark img{width:52px;height:52px;border-radius:14px;border:1px solid #D8CFBC;background:#FBF8F2}
#jkStaff .si-mark b{display:block;font:700 15px var(--mk-font-ui);letter-spacing:.18em;text-transform:uppercase}
#jkStaff .si-mark small{display:block;font:500 12.5px var(--mk-font-ui);color:var(--fg-3);margin-top:3px}
#jkStaff .si h1{margin:0 0 4px;font:750 22px var(--mk-font-ui)}
#jkStaff .si-cap{font:700 11px var(--mk-font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:18px 0 8px}
#jkStaff .si-list{border:1px solid var(--border);border-radius:16px;overflow:hidden}
#jkStaff .si-acc{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:8px 10px 8px 12px;border:0;border-top:1px solid var(--border);background:var(--bg-1);cursor:pointer;text-align:start}
#jkStaff .si-acc:first-child{border-top:0}
#jkStaff .si-acc:hover{background:var(--bg-2)}
#jkStaff .si-acc .t{flex:1;min-width:0}
#jkStaff .si-acc .t b{display:block;font:650 14.5px var(--mk-font-ui)}
#jkStaff .si-acc .t small{display:block;font:500 12.5px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .si-acc .k{display:inline-flex;align-items:center;gap:4px;font:650 11.5px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .si-acc .k .mi{font-size:16px}
#jkStaff .si-or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--fg-3);font:600 12px var(--mk-font-ui)}
#jkStaff .si-or::before, #jkStaff .si-or::after{content:'';flex:1;height:1px;background:var(--border)}
#jkStaff .si-alt{display:grid;gap:8px}
#jkStaff .si-alt .wb-btn{width:100%;height:46px;justify-content:center}
#jkStaff .g-ic{width:18px;height:18px}
#jkStaff /* save-a-passkey sheet */
.pk{position:fixed;inset:0;z-index:210;display:grid;place-items:end center;background:rgba(9,16,24,.3)}
#jkStaff .pk-card{width:min(440px,100%);margin:0 0 16px;background:var(--bg-1);border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:var(--shadow-lg)}
#jkStaff .pk-card h3{margin:10px 0 4px;font:750 18px var(--mk-font-ui)}
#jkStaff .pk-card p{margin:0 0 16px;color:var(--fg-2)}
#jkStaff .pk-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
#jkStaff .pk-ic .mi{font-size:28px}
#jkStaff /* ── profile menu ─────────────────────────────────────────────────── */
.pm{position:fixed;top:66px;inset-inline-end:12px;z-index:120;width:300px;background:var(--bg-1);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-pop);padding:8px}
#jkStaff .pm-hd{display:flex;align-items:center;gap:10px;padding:10px}
#jkStaff .pm-hd b{display:block;font:700 14px var(--mk-font-ui)}
#jkStaff .pm-hd small{display:block;color:var(--fg-3);font:500 12px var(--mk-font-ui)}
#jkStaff .pm-row{display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 10px;border-radius:12px}
#jkStaff .pm-row > .mi{color:var(--fg-3)}
#jkStaff .pm-row .l{flex:1;font:600 13.5px var(--mk-font-ui)}
#jkStaff .pm-row select{height:34px;border-radius:9px;border:1px solid var(--border);background:var(--bg-input);padding:0 8px;font:600 12.5px var(--mk-font-ui);color:var(--fg-1)}
#jkStaff .pm-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:4px 10px;border:0;border-radius:12px;background:none;cursor:pointer;font:600 13.5px var(--mk-font-ui);text-align:start}
#jkStaff .pm-btn:hover{background:var(--bg-2)}
#jkStaff .pm-btn .mi{color:var(--fg-3)}
#jkStaff .pm hr{border:0;height:1px;background:var(--border);margin:6px 4px}
#jkStaff .np{position:fixed;top:66px;inset-inline-end:60px;z-index:120;width:340px;max-width:calc(100vw - 24px);background:var(--bg-1);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-pop);overflow:hidden}
#jkStaff .np h4{margin:0;padding:14px 16px 8px;font:750 14px var(--mk-font-ui)}
@media (max-width:699px){
#jkStaff .pm, #jkStaff .np{top:62px;inset-inline:12px;width:auto}}
#jkStaff /* ── VALET ─────────────────────────────────────────────────────────── */
.v-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:14px;align-items:start}
@media (max-width:1099px){
#jkStaff .v-grid{grid-template-columns:1fr}}
#jkStaff .car-card{overflow:hidden}
#jkStaff .car-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border)}
#jkStaff .car-stage{position:relative;height:440px;background:radial-gradient(70% 80% at 50% 60%,var(--bg-1),var(--bg-3));touch-action:none;cursor:crosshair}
#jkStaff .car-stage canvas{display:block;width:100%;height:100%}
#jkStaff .car-pin{position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 11px var(--mk-font-ui);color:#fff;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.3);pointer-events:none;transition:opacity .15s}
#jkStaff .car-pin.hid{opacity:.25}
#jkStaff .car-err{position:absolute;inset:0;display:grid;place-items:center;color:var(--fg-3);font:600 13px var(--mk-font-ui)}
@media (max-width:699px){
#jkStaff .car-stage{height:330px}}
#jkStaff .dmg{display:inline-flex;gap:6px;flex-wrap:wrap}
#jkStaff .dmg button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--border);background:var(--bg-1);font:650 12.5px var(--mk-font-ui);cursor:pointer}
#jkStaff .dmg button i{width:10px;height:10px;border-radius:50%;display:inline-block}
#jkStaff .dmg button.on{border-color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--fg-1)}
#jkStaff .swatches{display:inline-flex;gap:6px}
#jkStaff .swatches button{width:22px;height:22px;border-radius:50%;border:2px solid var(--bg-1);box-shadow:0 0 0 1px var(--border-strong);cursor:pointer}
#jkStaff .swatches button.on{box-shadow:0 0 0 2px var(--fg-1)}
#jkStaff .plate{font:800 22px var(--mk-font-ui);letter-spacing:.14em;text-transform:uppercase;text-align:center;height:56px;background:#F7D54A;color:#111;border:2px solid #111;border-radius:10px}
#jkStaff .plate::placeholder{color:rgba(0,0,0,.35)}
#jkStaff .match{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border)}
#jkStaff .match.ok{background:color-mix(in srgb,var(--mk-success) 9%,var(--bg-1));border-color:color-mix(in srgb,var(--mk-success) 35%,transparent)}
#jkStaff .match .t{flex:1;min-width:0}
#jkStaff .match .t b{display:block;font:700 14px var(--mk-font-ui)}
#jkStaff .match .t small{display:block;color:var(--fg-3);font:500 12.5px var(--mk-font-ui)}
#jkStaff .mk-list{display:flex;flex-direction:column;gap:8px}
#jkStaff .mk-row{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:12px}
#jkStaff .mk-row .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 11.5px var(--mk-font-ui);flex:0 0 auto}
#jkStaff .mk-row .t{flex:1;min-width:0}
#jkStaff .mk-row .t b{font:650 13.5px var(--mk-font-ui)}
#jkStaff .mk-row .t input{width:100%;border:0;background:none;outline:0;font:500 12.5px var(--mk-font-ui);color:var(--fg-2);padding:2px 0}
#jkStaff .mk-ph{width:46px;height:46px;border-radius:10px;border:1px dashed var(--border-strong);display:grid;place-items:center;color:var(--fg-3);cursor:pointer;background:var(--bg-2) center/cover;flex:0 0 auto;position:relative;overflow:hidden}
#jkStaff .mk-ph input{position:absolute;inset:0;opacity:0;cursor:pointer}
#jkStaff .mk-ph.has{border-style:solid}
#jkStaff .mk-ph.has .mi{display:none}
#jkStaff .spot{display:flex;gap:8px}
#jkStaff .q-card{display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap}
#jkStaff .q-card .t{flex:1;min-width:200px}
#jkStaff .q-card .t b{display:block;font:700 15px var(--mk-font-ui)}
#jkStaff .q-card .t small{display:block;font:500 12.5px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .q-plate{font:800 14px var(--mk-font-ui);letter-spacing:.12em;padding:6px 10px;border-radius:8px;background:#F7D54A;color:#111;border:1.5px solid #111}
#jkStaff .q-card.new{animation:qIn .5s ease}
@keyframes qIn{from{transform:translateY(-8px);opacity:0;box-shadow:0 0 0 3px var(--accent-soft)}}
#jkStaff table.wb-t{width:100%;border-collapse:collapse}
#jkStaff .wb-t th{font:700 11.5px var(--mk-font-ui);letter-spacing:.04em;color:var(--fg-3);text-align:start;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
#jkStaff .wb-t td{padding:10px 14px;border-bottom:1px solid var(--border);font:500 13.5px var(--mk-font-ui);white-space:nowrap}
#jkStaff .wb-t tr:last-child td{border-bottom:0}
#jkStaff .tscroll{overflow-x:auto}
#jkStaff /* ── agenda roles ──────────────────────────────────────────────────── */
.ag{position:relative;display:grid;grid-template-columns:56px 1fr;padding:6px 14px 14px 0}
#jkStaff .ag-h{font:600 11.5px var(--mk-font-ui);color:var(--fg-3);text-align:end;padding-inline-end:10px;height:56px;transform:translateY(-7px)}
#jkStaff .ag-col{position:relative;border-inline-start:1px solid var(--border)}
#jkStaff .ag-line{height:56px;border-top:1px solid var(--border)}
#jkStaff .ag-off{position:absolute;inset-inline:0;background:repeating-linear-gradient(135deg,var(--bg-3) 0 6px,transparent 6px 12px);opacity:.8}
#jkStaff .ag-ev{position:absolute;inset-inline:8px;border-radius:10px;padding:6px 10px;background:var(--accent-soft);border-inline-start:3px solid var(--accent);cursor:pointer;overflow:hidden;color:var(--fg-1)}
#jkStaff .ag-ev b{display:block;font:700 13px var(--mk-font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkStaff .ag-ev small{display:block;font:500 12px var(--mk-font-ui);color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#jkStaff[dir=rtl] .ag-ev b, #jkStaff[dir=rtl] .ag-ev small{unicode-bidi:plaintext;text-align:right}   /* B67 R25 (R67-100) — Latin booking names cut at their start in Arabic (R67-014) */
#jkStaff .ag-ev.walk{background:color-mix(in srgb,var(--mk-success) 12%,var(--bg-1));border-color:var(--mk-success)}
#jkStaff .ag-now{position:absolute;inset-inline:0;height:2px;background:var(--mk-danger)}
#jkStaff .ag-now::before{content:'';position:absolute;inset-inline-start:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--mk-danger)}
#jkStaff .wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
#jkStaff .wk-d{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--bg-1);display:flex;flex-direction:column;gap:8px;min-height:150px}
#jkStaff .wk-d.off{background:var(--bg-2)}
#jkStaff .wk-d .h{display:flex;align-items:center;justify-content:space-between;font:750 13px var(--mk-font-ui)}
#jkStaff .wk-d .rng{font:600 12.5px var(--mk-font-ui);color:var(--fg-2)}
#jkStaff .tg{position:relative;width:38px;height:22px;border-radius:999px;background:var(--border-strong);border:0;cursor:pointer;flex:0 0 auto;transition:background .15s}
#jkStaff .tg::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:inset-inline-start .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
#jkStaff .tg.on{background:var(--accent)}
#jkStaff .tg.on::after{inset-inline-start:19px}
html[data-theme="dark"] #jkStaff .tg.on::after{background:#00243F}
@media (max-width:899px){
#jkStaff .wk{grid-template-columns:1fr 1fr}
#jkStaff .wk-d{min-height:auto}}
#jkStaff /* gym */
.mach{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#jkStaff .mc{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;border:1px solid var(--border);background:var(--bg-1);cursor:pointer;text-align:start;min-height:112px;transition:transform .12s,border-color .15s,background .15s}
#jkStaff .mc:hover{transform:translateY(-1px)}
#jkStaff .mc .mi{font-size:26px;color:var(--fg-3)}
#jkStaff .mc b{font:700 14px var(--mk-font-ui)}
#jkStaff .mc small{font:600 12px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .mc.use{background:color-mix(in srgb,var(--accent) 8%,var(--bg-1));border-color:var(--accent)}
#jkStaff .mc.use .mi{color:var(--accent-text)}
#jkStaff .mc .st{position:absolute;top:12px;inset-inline-end:12px}
#jkStaff .mc .tm{font:750 13px var(--mk-font-ui);font-variant-numeric:tabular-nums;color:var(--accent-text)}
#jkStaff /* waiter + kitchen */
.ord{display:flex;flex-direction:column}
#jkStaff .ord-h{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
#jkStaff .ord-h b{font:750 15px var(--mk-font-ui)}
#jkStaff .ord-h small{color:var(--fg-3);font:500 12.5px var(--mk-font-ui)}
#jkStaff .dish{display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid var(--border)}
#jkStaff .dish .q{font:800 13px var(--mk-font-ui);width:24px;color:var(--fg-3)}
#jkStaff .dish .n{flex:1;min-width:0;font:600 13.5px var(--mk-font-ui)}
#jkStaff .ord.ready{border-color:var(--mk-success);box-shadow:0 0 0 2px color-mix(in srgb,var(--mk-success) 30%,transparent)}
#jkStaff .ord-f{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--border);align-items:center}
#jkStaff .prog{height:6px;border-radius:6px;background:var(--bg-3);overflow:hidden;flex:1}
#jkStaff .prog i{display:block;height:100%;background:var(--mk-success);transition:width .4s}
#jkStaff .tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
#jkStaff .tbl{height:72px;border-radius:14px;border:1px solid var(--border);background:var(--bg-1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font:800 17px var(--mk-font-ui)}
#jkStaff .tbl small{font:600 11px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .tbl.on{background:var(--accent);color:var(--accent-fg);border-color:transparent}
#jkStaff .tbl.on small{color:inherit;opacity:.8}
#jkStaff .tbl.busy small{color:var(--mk-warning)}
#jkStaff .menu-i{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border)}
#jkStaff .menu-i:first-child{border-top:0}
#jkStaff .menu-i .t{flex:1;min-width:0}
#jkStaff .menu-i .t b{display:block;font:650 14px var(--mk-font-ui)}
#jkStaff .menu-i .t small{display:block;color:var(--fg-3);font:500 12.5px var(--mk-font-ui)}
#jkStaff .menu-i.oos{opacity:.5}
#jkStaff .step{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:11px;overflow:hidden;flex:0 0 auto}
#jkStaff .step button{width:36px;height:36px;border:0;background:var(--bg-1);cursor:pointer;display:grid;place-items:center}
#jkStaff .step button:hover{background:var(--bg-2)}
#jkStaff .step span.v{min-width:28px;text-align:center;font:800 14px var(--mk-font-ui)}
#jkStaff .sumbar{position:sticky;bottom:12px;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;margin-top:14px;border-radius:16px;background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-lg)}
#jkStaff .sumbar b{font:750 15px var(--mk-font-ui)}
#jkStaff .sumbar .wb-btn{background:var(--bg-1);color:var(--fg-1);border:0}
#jkStaff .kds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
#jkStaff .kds-col{display:flex;flex-direction:column;gap:10px;min-width:0}
#jkStaff .kds-h{display:flex;align-items:center;gap:8px;font:750 13px var(--mk-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);padding:0 4px}
#jkStaff .tk .dish{cursor:pointer}
#jkStaff .tk .dish.done .n{text-decoration:line-through;color:var(--fg-3)}
#jkStaff .tk .dish .ck{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border-strong);display:grid;place-items:center;flex:0 0 auto}
#jkStaff .tk .dish.done .ck{background:var(--mk-success);border-color:var(--mk-success);color:#fff}
#jkStaff .tk .dish .ck .mi{font-size:16px}
#jkStaff .tk .late{color:var(--mk-danger)}
#jkStaff .tk .dish.oos .n{color:var(--fg-3)}
#jkStaff .oosw{font-style:normal;font:650 11.5px var(--mk-font-ui);color:var(--mk-warning);margin-inline-start:6px}
#jkStaff .oosb{width:28px;height:28px;margin-inline-start:auto;color:var(--fg-3)}
#jkStaff .oosb:hover{color:var(--mk-danger);border-color:var(--mk-danger)}
#jkStaff .ord.issue{border-color:var(--mk-warning)}
#jkStaff .iss{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;background:color-mix(in srgb,var(--mk-warning) 12%,var(--bg-1));border-bottom:1px solid var(--border);font:500 13px var(--mk-font-ui)}
#jkStaff .iss .mi{color:var(--mk-warning)}
@media (max-width:899px){
#jkStaff .kds{grid-template-columns:1fr}}
#jkStaff /* charge */
.opt{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid var(--border);border-radius:16px;cursor:pointer;background:var(--bg-1);text-align:start;width:100%}
#jkStaff .opt:hover{border-color:var(--border-strong)}
#jkStaff .opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#jkStaff .opt .mi{font-size:24px;color:var(--accent-text)}
#jkStaff .opt b{display:block;font:700 14.5px var(--mk-font-ui)}
#jkStaff .opt small{display:block;color:var(--fg-3);font:500 12.5px var(--mk-font-ui);margin-top:2px}
#jkStaff .amt{font:800 30px var(--mk-font-ui);letter-spacing:-.02em;height:60px;text-align:start}
#jkStaff .sig{height:180px;border-radius:14px;border:1px dashed var(--border-strong);background:var(--bg-2);touch-action:none;width:100%;display:block;cursor:crosshair}
#jkStaff .wait{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--bg-2)}
#jkStaff .spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--border-strong);border-top-color:var(--accent);animation:sp 0.9s linear infinite;flex:0 0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
#jkStaff .cols2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:699px){
#jkStaff .cols2{grid-template-columns:1fr}}
#jkStaff .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
#jkStaff .ph-sub{font:600 13px var(--mk-font-ui);color:var(--fg-3);white-space:nowrap}
#jkStaff .ac{position:relative}
#jkStaff .ac-list{position:absolute;top:calc(100% + 4px);inset-inline:0;z-index:5;background:var(--bg-1);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pop);overflow:hidden}
#jkStaff .ac-list button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:0;background:none;cursor:pointer;text-align:start}
#jkStaff .ac-list button:hover{background:var(--bg-2)}
#jkStaff .ac-list b{font:650 13.5px var(--mk-font-ui)}
#jkStaff .ac-list small{color:var(--fg-3);font:500 12px var(--mk-font-ui)}

/* ── the app inside Mocca's page (B66 W5) ── */
html:not([data-app="jockey"]) #jkStaff,
html:not([data-jk-staff]) #jkStaff,
html[data-jk-staff] #jkShell{ display:none !important; }
html[data-jk-staff] body{ background:var(--bg-2); }
#jkStaff{ position:fixed; inset:0; z-index:5; font-family:'Archivo','Helvetica Neue',Arial,sans-serif; }
#jkStaff .st-out{ position:absolute; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(1200px 600px at 20% 0%,var(--accent-soft),transparent 60%),var(--bg-2); }
#jkStaff .st-out-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:30px 28px; width:min(380px,100%); background:var(--bg-1); border:1px solid var(--border); border-radius:24px; box-shadow:0 30px 70px -30px rgba(28,37,48,.35); text-align:center; }
#jkStaff .st-out-card img{ width:68px; height:68px; border-radius:18px; border:1px solid var(--border-strong); background:#FBF8F2; margin-bottom:8px; }
#jkStaff .st-out-card b{ font:700 16px var(--mk-font-ui); letter-spacing:.18em; text-transform:uppercase; }
#jkStaff .st-out-card small{ font:500 13px var(--mk-font-ui); color:var(--fg-3); margin-bottom:14px; }
#jkStaff .st-out-card .wb-btn{ width:100%; justify-content:center; }
#shell.signed-out #jkStaff #app{ display:none !important; }
/* Mocca's own dropdown inside the staff skin */
#jkStaff .cs-btn{ min-height:44px; border-radius:11px; padding:0 12px; font:500 14px var(--mk-font-ui); color:var(--fg-1); }
#jkStaff .cs-btn .cs-arrow{ margin-inline-start:auto; font-size:20px; }
/* the shell's create button shows over the main content only (layering rule) */
#jkStaff .wb-scrim.open ~ .wb-fab, #jkStaff #app[hidden] ~ .wb-fab{ display:none; }

/* B66 W5 — page headers wrap on narrow screens; Schedule's week view */
#jkStaff .wb-ph{flex-wrap:wrap}
#jkStaff .wk-d.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
#jkStaff .wk-d .h small{font:650 12px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .wk-ev{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:7px 9px;border:0;border-inline-start:3px solid var(--accent);border-radius:8px;background:var(--accent-soft);color:var(--fg-1);cursor:pointer;text-align:start;font:600 12px var(--mk-font-ui)}
#jkStaff .wk-ev b{font:750 11.5px var(--mk-font-ui);font-variant-numeric:tabular-nums}
#jkStaff .wk-ev span,#jkStaff .wk-ev small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#jkStaff .wk-ev small{font:500 11px var(--mk-font-ui);color:var(--fg-3)}
#jkStaff .wk-ev.walk{border-inline-start-color:var(--brass,#B8862B)}
#jkStaff .sched-wk .wk-d{min-height:180px}
/* Audit A follow-up (2026-10-08) — Mocca's date-time picker in Staff's navy / cream / brass + Archivo (date-field.js opens it) */
html[data-jk-staff][data-theme="light"] .cb-date-pop{--bg-1:#FFFFFF;--bg-input:#FBF8F2;--border:#EAE3D5;--divider:#EAE3D5;--fg-1:#1C2530;--fg-2:#4E5866;--fg-3:#6E6A60;--accent:#1C2530;--accent-fg:#FBF8F2;--mk-blue-400:#B7913C;--mk-font-ui:'Archivo','Helvetica Neue',Arial,sans-serif}
html[data-jk-staff][data-theme="dark"] .cb-date-pop{--bg-1:#052E4C;--bg-input:#0A3050;--border:rgba(216,184,88,.22);--divider:rgba(216,184,88,.16);--fg-1:#EFEAE0;--fg-2:#B9C4CF;--fg-3:#8FA2B4;--accent:#D8B858;--accent-fg:#00243F;--mk-blue-400:#D8B858;--mk-font-ui:'Archivo','Helvetica Neue',Arial,sans-serif}


/* B67 R67-010 — a phone charge row squeezed the partner's name to ~6 letters ("Camila …") beside the amount and the
   status chip: below 700 px the chip takes a second line under the name (avatar · name · amount stay on the first). */
@media (max-width:699px){
  #jkStaff .wb-row:has(> .wb-num + .wb-chip){ display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; row-gap:6px; }
  #jkStaff .wb-row:has(> .wb-num + .wb-chip) > .wb-av{ grid-row:span 2; align-self:center; }
  #jkStaff .wb-row:has(> .wb-num + .wb-chip) > .wb-chip{ grid-column:2 / -1; justify-self:start; }
}

/* B67 R67-014 (Staff) — in Arabic a Latin name truncated at its START: the row title takes its direction from its own text */
#jkStaff[dir=rtl] .wb-row .t b, #jkStaff[dir=rtl] .wb-row .t small{ unicode-bidi:plaintext; text-align:right; }

/* B67 R67-032 — the navbar search showed no focus at all (input outline:0, the box unchanged): keyboard users lost their place */
#jkStaff .wb-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

/* B67 R21 (R67-079) — directional icons follow the reading direction in Arabic, as the rest of the app already does (Audit A:
   "forward points to the reading direction"; .ent-open · .pe-card-chev · .cal-period .gantt-step · .fp-back-btn …). Each was
   the only one of its kind still pointing the LTR way: "go" chevrons, forward/back arrows, prev/next steppers, crumbs, twists. */
html[dir="rtl"] #jkStaff .wb-step .mi{transform:scaleX(-1)}

/* B67 R21 (R67-084) — closed / parked layers leave the Tab order (as R67-031 · 034): each only slid or faded away, so Tab
   walked into its controls unseen. Hidden once its own exit motion ends, visible at once when it opens. */
#jkStaff .wb-panel{visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s}
#jkStaff .wb-panel.open{visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
#jkStaff .wb-slide{transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s}
#jkStaff .wb-slide.out{visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s,visibility 0s linear .28s}