/* Employee page V2 (flag employee_page_v2): identity, tools and chat stay visible; the profile opens from the name. */
.pinv2{position:sticky;inset-block-start:0;z-index:2;background:var(--paper);padding:18px 0 10px;border-block-end:1px solid var(--hair);display:flex;flex-direction:column;gap:10px}
.pinv2__id{display:flex;align-items:center;gap:12px}
.pinv2__t{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1 1 auto;gap:2px}
.pinv2__name{all:unset;cursor:pointer;font-weight:600;color:var(--ink);padding:2px 6px;margin-inline-start:-6px;border-radius:var(--r-ctl,8px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.pinv2__name::after{content:"▾";font-size:.7em;margin-inline-start:6px;color:var(--ash)}
.pinv2__name span{font-weight:400;color:var(--ash)}
.pinv2__name:hover,.pinv2__st:hover{background:var(--hair)}
.pinv2__name:focus-visible,.pinv2__st:focus-visible,.pinv2__mb:focus-visible,.tchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pinv2__st{all:unset;cursor:pointer;color:var(--ash);font-size:.8125rem;padding:1px 6px;margin-inline-start:-6px;border-radius:var(--r-ctl,8px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinv2__mw{position:relative;margin-inline-start:auto}
.pinv2__mb{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;font-size:1.25rem;border-radius:var(--r-ctl,8px);color:var(--ash)}
.pinv2__mb:hover{background:var(--hair);color:var(--ink)}
.pinv2__menu{position:absolute;inset-block-start:100%;inset-inline-end:0;z-index:5;min-width:11rem;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r-card,12px);box-shadow:var(--shadow-soft,0 6px 24px rgba(0,0,0,.12));padding:6px;display:flex;flex-direction:column}
.pinv2__menu[hidden]{display:none}
.pinv2__menu button{all:unset;cursor:pointer;padding:10px 12px;border-radius:var(--r-ctl,8px);color:var(--ink);font-size:.9375rem}
.pinv2__menu button:hover:not([disabled]),.pinv2__menu button:focus-visible{background:var(--hair)}
.pinv2__menu button[disabled]{opacity:.5;cursor:not-allowed}
.pinv2__tools{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.tchip{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:68px;min-height:64px;padding:8px 4px 6px;border:1px solid var(--hair);border-radius:var(--r-card,12px);background:var(--paper);color:var(--ink);font-size:.6875rem;text-align:center}
span.tchip{cursor:default}
.tchip img{width:28px;height:28px;object-fit:contain}
.tchip__n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;line-height:1.2}
.tchip__m{position:absolute;inset-block-start:3px;inset-inline-end:5px;font-style:normal;font-weight:700;font-size:.75rem;color:var(--ink)}
.tchip--off{color:var(--ash);border-style:dashed}
.tchip--off img{opacity:.55;filter:grayscale(1)}
.tchip--err{border-color:var(--stop,#b3261e);border-style:solid}
.tchip--err .tchip__m{color:var(--stop,#b3261e)}
.tchip--more,.tchip--add{width:44px;min-height:64px;font-size:.9375rem;font-weight:600;color:var(--ash)}
.tchip:hover:not(span){background:var(--hair)}
.empprof{position:absolute;inset-block:0;inset-inline-end:0;z-index:8;width:var(--prof-w,clamp(300px,30%,420px));background:var(--paper);border-inline-start:1px solid var(--hair);display:flex;flex-direction:column;min-height:0}
.empprof[hidden]{display:none}
.empprof__h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-block-end:1px solid var(--hair)}
.empprof__x{all:unset;cursor:pointer;min-height:44px;padding:0 14px;display:grid;place-items:center;border-radius:var(--r-ctl,8px);color:var(--ink);border:1px solid var(--hair)}
.empprof__x:focus-visible,.empsec summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.empprof__b{overflow-y:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-height:0}
.empprof__role{display:flex;align-items:center;gap:12px}
.empprof__role p{margin:0;color:var(--ash);font-size:.875rem}
.empsec{border:1px solid var(--hair);border-radius:var(--r-card,12px);background:var(--paper)}
.empsec summary{cursor:pointer;padding:12px 14px;font-weight:600;min-height:44px;display:flex;align-items:center}
.empsec__b{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
@media (min-width:1101px){.main.has-prof>.bar,.main.has-prof>.thread,.main.has-prof>.comp{margin-inline-end:var(--prof-w,clamp(300px,30%,420px))}}
@media (max-width:1100px){.empprof{position:fixed;inset:0;width:auto;z-index:40;border:0}}
@media (max-width:420px){.tchip{width:60px}.pinv2__id{gap:8px}}
/* touch targets of at least 44px without enlarging the header: the hit area grows, the layout does not */
.pinv2__name,.pinv2__st{position:relative}
.pinv2__name::before,.pinv2__st::before{content:"";position:absolute;inset-inline:0;top:50%;height:44px;transform:translateY(-50%)}

.tchip--add{width:auto;min-height:44px;flex-direction:row;padding:0 14px;border-style:dashed;font-size:.8125rem;white-space:nowrap}
.pinv2__tools:has(.tchip--add:only-child){align-items:center}
.tchip__s{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.625rem;line-height:1.2;color:var(--ash)}
.tchip--err .tchip__s{color:var(--stop,#b3261e);font-weight:600}
.empsub{margin:6px 0 0;font-size:.8125rem;font-weight:600;color:var(--ash)}
.empform{display:flex;flex-direction:column;gap:10px}
.empf{display:flex;flex-direction:column;gap:4px;font-size:.8125rem;border:0;padding:0;margin:0;min-width:0}
.empf input[type=text],.empf input[type=time],.empf select{box-sizing:border-box;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r-ctl,8px);background:var(--paper);color:var(--ink);font:inherit}
.empf--days{flex-direction:row;flex-wrap:wrap;gap:6px}
.empf--days legend{width:100%;padding:0;margin-bottom:4px}
.empday{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:1px solid var(--hair);border-radius:var(--r-ctl,8px)}
.empday input{width:18px;height:18px}
.empform__a{display:flex;gap:16px}
.empform__a .link{min-height:44px}
/* On a wide screen the panel sits beside the header that already shows who the employee is and their status: do not say it twice. On a phone the panel covers the header, so it keeps its own. */
@media (min-width:1101px){.empprof__role,.empprof__st{display:none}}