/* staff-profile.css – Aprikos Workspace → the staff profile (staff-profile.js).
   The profile drawer, the head of the profile menu, the avatar initials, the rail name and the Team & access button.
   Same palette and type as the rest of the site (site.css variables, workspace.css rhythm); prefix sp-. */

/* ---- the bar avatar and the profile menu (workspace.js .ws-av / .ws-menu) ---- */
#wsBar .ws-av{font-size:13px;letter-spacing:.02em}
#wsBar .ws-menu{min-width:270px;max-width:min(340px,calc(100vw - 24px))}
.ws-menu .sp-mh{display:flex;align-items:center;gap:12px;padding:2px 2px 12px;margin-bottom:4px;border-bottom:1px solid var(--line,#E3EDEC)}
.sp-mav{flex:none;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#12494B,#1B6E70);color:#fff;font-family:Jost;font-weight:600;font-size:14px;letter-spacing:.03em;box-shadow:0 0 0 3px var(--ice,#EBF5F5)}
.sp-mt{min-width:0;display:flex;flex-direction:column;gap:1px}
.ws-menu .sp-mt b{line-height:1.25;overflow-wrap:anywhere}
.ws-menu .sp-mt small{line-height:1.35}
.ws-menu .sp-mt .sp-mtitle{color:var(--deep,#1F7F81);font-weight:600}
.ws-menu a.sp-mi{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sp-todo{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 7px;border-radius:999px;background:#FDF1E0;color:#7A4A07;font-family:Jost;font-size:.7rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.sp-todo i{width:7px;height:7px;border-radius:50%;background:var(--amber,#E8A33D);box-shadow:0 0 0 3px rgba(232,163,61,.24)}
.ws-menu [hidden],.ad-me [hidden],.sp-wrap [hidden]{display:none!important}

/* ---- the rail (admin.js .ad-me): the name, the address under it ---- */
.ad-me b[data-ws-fullname]{margin-bottom:1px}
.ad-me .sp-rmail{display:block;margin:0 0 6px;color:#9FDADB;font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Team & access: the Profile button next to the name ---- */
.btn.sm.sp-tbtn{margin-left:8px;padding:4px 12px;font-size:12px;border-width:1.5px;vertical-align:middle}

/* ---- the drawer ---- */
body.sp-open{overflow:hidden}
.sp-wrap{position:fixed;inset:0;z-index:4000;display:flex;justify-content:flex-end}
.sp-scrim{position:absolute;inset:0;background:rgba(10,46,47,.46);backdrop-filter:blur(2px);animation:sp-fade .18s ease-out}
.sp-drawer{position:relative;display:flex;flex-direction:column;width:min(560px,100%);height:100%;background:var(--bg-soft,#F5FAFA);color:var(--ink,#152E2E);box-shadow:0 18px 40px rgba(10,46,47,.16),-24px 0 60px rgba(10,46,47,.22);animation:sp-in .18s cubic-bezier(.2,.8,.2,1);outline:0}
.sp-wrap :focus-visible{outline:2px solid #3AC0C3;outline-offset:2px}
.sp-drawer:focus-visible{outline:0}

/* header: the teal band of the rail */
.sp-head{flex:none;position:relative;padding:20px 24px 18px;color:#fff;background:radial-gradient(420px 220px at 110% -20%,rgba(58,192,195,.26),transparent 65%),linear-gradient(170deg,#0A2E2F,#12494B 70%,#155B5D)}
.sp-eb{display:block;margin-bottom:12px;font-family:Jost;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9FDADB}
.sp-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;transition:background .15s}
.sp-x:hover{background:rgba(255,255,255,.22)}
.sp-hrow{display:flex;align-items:center;gap:16px;min-width:0;padding-right:36px}
.sp-av{flex:none;width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--tq,#3AC0C3);color:var(--darkest,#0A2E2F);font-family:Jost;font-weight:600;font-size:1.2rem;letter-spacing:.03em;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.sp-hid{min-width:0}
.sp-head h2{margin:0;font-size:1.4rem;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.sp-head p{margin:3px 0 0;font-size:.92rem;line-height:1.35;color:#CFE8E8;overflow-wrap:anywhere}
.sp-head .sp-mail{font-size:.84rem;color:#9FDADB}
.sp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sp-tags:empty{display:none}
.sp-lvl{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;border:1px solid rgba(58,192,195,.38);background:rgba(58,192,195,.14);color:#DCF1F1;font-family:Jost;font-size:.74rem;font-weight:600;letter-spacing:.03em}
.sp-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-family:Jost;font-size:.74rem;font-weight:700;letter-spacing:.03em}
.sp-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.sp-pill.on{background:#E3F4EC;color:#1B7F5C}
.sp-pill.away{background:#FDF1E0;color:#7A4A07}

/* body: scrolls between the fixed header and footer */
.sp-form{flex:1;min-height:0;display:flex;flex-direction:column}
.sp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 28px;display:flex;flex-direction:column;gap:14px}
.sp-intro{margin:0;padding:12px 14px;border:1px solid var(--line,#E3EDEC);border-radius:12px;background:#fff;color:var(--muted,#4E6868);font-size:.88rem;line-height:1.5}
.sp-intro.warn{background:#FDF1E0;border-color:#F3D9B1;color:#7A4A07}
.sp-card{background:#fff;border:1px solid var(--line,#E3EDEC);border-radius:16px;padding:18px 18px 16px;box-shadow:0 1px 2px rgba(10,46,47,.04)}
.sp-ch{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:4px}
.sp-ch h3{display:flex;align-items:center;gap:10px;margin:0;font-size:1.04rem;line-height:1.3}
.sp-ch h3 i{flex:none;width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--ice,#EBF5F5);color:var(--deeper,#1B6E70);font-style:normal;font-family:Jost;font-size:12px;font-weight:700}
.sp-lock{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--bg-soft,#F5FAFA);color:var(--muted,#4E6868);font-size:.76rem;line-height:1.4}
.sp-lock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-lead{margin:0 0 14px;color:var(--muted,#4E6868);font-size:.84rem;line-height:1.45}
.sp-sug{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:var(--ice,#EBF5F5);color:var(--deeper,#1B6E70);font-size:.85rem;line-height:1.45}
.sp-sug.bad{background:#FBE7E5;color:#A32A22}
.sp-sug b{font-weight:700}
.sp-msb{white-space:nowrap}
.sp-msb[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}

/* fields */
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sp-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.sp-f.full{grid-column:1/-1}
.sp-f>label,.sp-lbl{font-family:Jost;font-size:.78rem;font-weight:600;color:var(--muted,#4E6868);letter-spacing:.01em}
.sp-req{color:#B03A28;font-weight:700}
.sp-f input,.sp-f select,.sp-f textarea{width:100%;height:40px;border:1px solid #D5E3E2;border-radius:10px;padding:0 12px;font:inherit;font-size:.93rem;background:#fff;color:var(--ink,#152E2E);transition:border-color .15s,box-shadow .15s}
.sp-f textarea{height:auto;min-height:104px;padding:10px 12px;line-height:1.5;resize:vertical}
.sp-f input:hover,.sp-f select:hover,.sp-f textarea:hover{border-color:#B9D0CF}
.sp-f input:focus,.sp-f select:focus,.sp-f textarea:focus{outline:0;border-color:var(--deep,#1F7F81);box-shadow:0 0 0 3px rgba(58,192,195,.2)}
.sp-f input:focus-visible,.sp-f select:focus-visible,.sp-f textarea:focus-visible{outline:2px solid #3AC0C3;outline-offset:0}
.sp-f input::placeholder,.sp-f textarea::placeholder{color:#8AA3A3}
.sp-f [aria-invalid=true]{border-color:#B03A28;background:#FFFBFA}
.sp-up{text-transform:uppercase}
.sp-hint{color:var(--muted,#4E6868);font-size:.76rem;line-height:1.4}
.sp-err{color:#B03A28;font-size:.78rem;font-weight:600;line-height:1.4}
.sp-err:empty{display:none}
.sp-val{min-height:24px;font-size:.93rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}
.sp-none{color:#8AA3A3;font-style:italic}
.sp-val code{padding:2px 7px;border-radius:6px;background:var(--bg-soft,#F5FAFA);color:var(--deeper,#1B6E70);font-size:.82rem;overflow-wrap:anywhere}
.sp-code{display:flex;align-items:center;flex-wrap:wrap;gap:10px;white-space:normal}
.sp-link{padding:0;border:0;background:none;color:var(--deep,#1F7F81);font-family:Jost;font-weight:600;font-size:.82rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sp-link:hover{color:var(--deeper,#1B6E70)}

/* chip toggles (buttons with aria-pressed) */
.sp-chips{display:flex;flex-wrap:wrap;gap:6px}
.sp-chip{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:6px 13px;border:1px solid #D5E3E2;border-radius:999px;background:#fff;color:var(--muted,#4E6868);font-family:Jost;font-weight:600;font-size:.82rem;line-height:1.2;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.sp-chip:hover{border-color:var(--deep,#1F7F81);color:var(--deeper,#1B6E70)}
.sp-chip[aria-pressed=true]{background:var(--deeper,#1B6E70);border-color:var(--deeper,#1B6E70);color:#fff}
.sp-chip[aria-pressed=true]::before{content:'\2713';font-size:.78em}
.sp-days .sp-chip{min-width:46px;padding:6px 10px}
.sp-days .sp-chip[aria-pressed=true]::before{content:none}
.sp-rochips{display:flex;flex-wrap:wrap;gap:6px;white-space:normal}
.sp-rochips span{padding:3px 10px;border-radius:999px;background:var(--ice,#EBF5F5);color:var(--deeper,#1B6E70);font-size:.8rem;font-weight:600}

/* tag inputs */
.sp-tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:42px;padding:5px 6px 5px 8px;border:1px solid #D5E3E2;border-radius:10px;background:#fff;cursor:text;transition:border-color .15s,box-shadow .15s}
.sp-tagbox:hover{border-color:#B9D0CF}
.sp-tagbox:focus-within{border-color:var(--deep,#1F7F81);box-shadow:0 0 0 3px rgba(58,192,195,.2)}
.sp-tagbox:has(input:focus-visible){outline:2px solid #3AC0C3;outline-offset:0}
.sp-tagbox.bad{border-color:#B03A28}
.sp-tagl{display:contents}
.sp-tag{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 11px;border-radius:999px;background:var(--ice,#EBF5F5);color:var(--deeper,#1B6E70);font-size:.83rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.sp-tag small{font-family:Jost;font-size:.68rem;color:var(--deep,#1F7F81);opacity:.85}
.sp-tag button{flex:none;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--deeper,#1B6E70);font-size:.95rem;line-height:1;cursor:pointer}
.sp-tag button:hover{background:#B03A28;color:#fff}
.sp-f .sp-tagbox input,.sp-f .sp-tagbox input:hover,.sp-f .sp-tagbox input:focus,.sp-f .sp-tagbox input:focus-visible{flex:1 1 140px;min-width:120px;width:auto;height:32px;padding:0 4px;border:0;outline:0;box-shadow:none;background:transparent}
.sp-add{flex:none;height:30px;padding:0 12px;border:1px solid var(--line,#E3EDEC);border-radius:999px;background:var(--bg-soft,#F5FAFA);color:var(--deeper,#1B6E70);font-family:Jost;font-weight:600;font-size:.78rem;cursor:pointer}
.sp-add:hover{border-color:var(--deep,#1F7F81);background:#fff}

/* availability state: green present / amber away */
.sp-state{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:12px;font-size:.88rem;font-weight:600;line-height:1.4}
.sp-state i{flex:none;width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(255,255,255,.65)}
.sp-state.on{background:#E3F4EC;color:#1B7F5C}
.sp-state.away{background:#FDF1E0;color:#7A4A07}

/* footer */
.sp-foot{flex:none;display:flex;align-items:center;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line,#E3EDEC);box-shadow:0 -10px 24px rgba(10,46,47,.06)}
.sp-msg{flex:1;min-width:0;margin:0;font-size:.85rem;line-height:1.4;color:var(--muted,#4E6868)}
.sp-msg.ok{color:#1B7F5C}
.sp-msg.bad{color:#B03A28;font-weight:600}
.sp-foot .btn.sm{padding:9px 20px}
.sp-foot .btn[disabled]{opacity:.65;cursor:progress;transform:none;box-shadow:none}

/* loading */
.sp-skel{display:flex;flex-direction:column;gap:14px}
.sp-skel .skel{height:150px;border-radius:16px}
.sp-skel .skel:nth-of-type(1){height:230px}

@keyframes sp-in{from{transform:translateX(32px);opacity:.35}to{transform:none;opacity:1}}
@keyframes sp-fade{from{opacity:0}to{opacity:1}}

/* ---- narrow screens: full width, one column, 16 px gutter ---- */
@media (max-width:700px){
  .sp-drawer{width:100%;box-shadow:none}
  .sp-head{padding:16px 16px 16px}
  .sp-x{top:10px;right:10px}
  .sp-hrow{gap:12px}
  .sp-av{width:48px;height:48px;font-size:1.05rem}
  .sp-head h2{font-size:1.2rem}
  .sp-body{padding:14px 16px 24px;gap:12px}
  .sp-card{padding:16px 14px 14px;border-radius:14px}
  .sp-grid{grid-template-columns:1fr;gap:12px}
  .sp-days{flex-wrap:nowrap;gap:4px}
  .sp-days .sp-chip{flex:1 1 0;min-width:0;padding:6px 0}
  .sp-foot{flex-wrap:wrap;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .sp-foot .sp-msg{flex-basis:100%;order:-1}
  .sp-foot .sp-msg:empty{display:none}
  .sp-foot .btn{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .sp-drawer,.sp-scrim{animation:none}
  .sp-x,.sp-chip,.sp-tagbox,.sp-f input,.sp-f select,.sp-f textarea{transition:none}
}