/* People (accounts and roles, 21 Oct 2026): admin People and Settings > People, built on the list-page template
   (scratchpad template/SPEC.md: head with a quiet total and one action, filters, one row anatomy, More last with Remove
   in rust, dialogs with Cancel then the confirm). Scoped to .pp so the template pass can take it over. */
.pp{--you:#9A5B13;--you-dot:#D08A2E;--neg:#A3462A}
.pp .lt-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;margin:0 0 20px}
.pp .lt-h{margin:0;display:flex;align-items:baseline;gap:10px;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.022em;color:var(--text);min-width:0}
.pp .lt-h .lt-n{font-size:15px;font-weight:500;letter-spacing:0;color:var(--text-3);font-variant-numeric:tabular-nums}
.pp h2.lt-h{font-size:17px;letter-spacing:0}
.pp h2.lt-h .lt-n{font-size:13.5px}
.pp .lt-head .lt-act{flex:none;display:flex;gap:8px}
.pp .lt-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px}
.pp .lt-sel{position:relative;display:inline-flex}
.pp .lt-sel select,.pp .lt-search{appearance:none;-webkit-appearance:none;height:36px;padding:0 34px 0 12px;border:1px solid var(--line-2);border-radius:6px;background:var(--white,#fff);font:inherit;font-size:13.5px;color:var(--text);min-width:180px;box-sizing:border-box}
.pp .lt-sel::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg);pointer-events:none}
.pp .lt-search{padding:0 12px;min-width:240px}
.pp .lt-filters .push{margin-left:auto}
.pp .lt-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);container-type:inline-size}
.pp .lt-row{--go-w:120px;display:grid;grid-template-columns:36px minmax(0,1fr) 96px var(--go-w) 32px;grid-template-areas:"ic main st go more";column-gap:16px;align-items:start;padding:14px 4px;border-bottom:1px solid var(--line);position:relative}
.pp .lt-ic{grid-area:ic;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(14,80,64,.07);box-shadow:inset 0 0 0 1px rgba(14,80,64,.16);color:var(--forest);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.pp .lt-ic.ext{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text-3)}
.pp .lt-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pp .lt-main{grid-area:main;min-width:0;padding-top:1px}
.pp .lt-t{display:block;font-size:15px;font-weight:600;line-height:22px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .lt-t .me{font-weight:400;color:var(--text-3);margin-left:6px;font-size:13.5px}
.pp .lt-m{margin-top:2px;font-size:13px;line-height:18px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .lt-m b{font-weight:500;color:var(--text-2)}
.pp .lt-st{grid-area:st;display:flex;align-items:center;height:22px;margin-top:1px}
.pp .lt-go{grid-area:go;display:flex;justify-content:flex-end;margin-top:-4px}
.pp .lt-more{grid-area:more;position:relative;margin-top:-4px}
.pp .lt-row:has(.menu.open){z-index:30}
.pp .btn-more{width:32px;min-width:32px;min-height:32px;padding:0;color:var(--text-2)}
.pp .btn-more svg{width:16px;height:16px;fill:currentColor;stroke:none}
.pp .btn-more[aria-expanded="true"]{border-color:var(--forest);color:var(--forest)}
.pp .menu.lt-menu{top:38px;right:0;min-width:208px;z-index:80}
.pp .menu.open{display:block}
.pp .menu .mi-sep{height:1px;margin:6px 4px;background:var(--line)}
.pp .menu .mi-d{color:var(--neg)}
.pp .pill.st-out{display:inline-flex;align-items:center;gap:6px;background:var(--white,#fff);color:var(--you);box-shadow:inset 0 0 0 1px #E8C9A0;border-radius:999px;padding:2px 9px 2px 8px;font-size:12px;font-weight:500;line-height:18px}
.pp .pill.st-out::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--you-dot)}
.pp .lt-empty{margin:0;padding:18px 4px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text-3)}
.pp .lt-sec{margin-top:40px}
.pp .lt-sec:first-child{margin-top:0}

/* dialogs (Invite, Edit access, Remove) */
.pp-dlg{position:fixed;inset:0;z-index:60;background:rgba(32,30,29,.42);display:grid;place-items:center;padding:16px;overflow:auto}
.pp-dlg .lt-dlg{background:var(--white,#fff);border-radius:10px;box-shadow:var(--sh-lg);width:min(520px,100%);padding:24px 24px 20px;box-sizing:border-box;max-height:calc(100vh - 32px);overflow:auto}
.pp-dlg .lt-dlg-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.pp-dlg .lt-dlg-h h2{margin:0;font-size:18px;font-weight:600;line-height:1.3}
.pp-dlg .x{width:32px;height:32px;border:0;background:none;border-radius:6px;font-size:22px;line-height:1;color:var(--text-2);cursor:pointer}
.pp-dlg label.f{display:grid;gap:6px;margin:0 0 14px;font-size:13px;font-weight:500;color:var(--text-2)}
.pp-dlg input[type=text],.pp-dlg input[type=email]{height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:6px;font:inherit;font-size:14.5px;color:var(--text);background:var(--white,#fff);box-sizing:border-box;width:100%}
.pp-dlg .sel{position:relative;display:block}
.pp-dlg select{appearance:none;-webkit-appearance:none;width:100%;height:40px;padding:0 36px 0 12px;border:1px solid var(--line-2);border-radius:6px;background:var(--white,#fff);font:inherit;font-size:14.5px;color:var(--text);box-sizing:border-box}
.pp-dlg .sel::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg);pointer-events:none}
.pp-dlg .pair{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.pp-dlg .ro{display:grid;gap:6px;margin:0 0 14px;font-size:13px;font-weight:500;color:var(--text-2)}
.pp-dlg .ro b{font-size:14.5px;font-weight:500;color:var(--text);word-break:break-all}
.pp-dlg .lt-pick{margin:0 0 14px;padding:0;border:0;min-width:0}
.pp-dlg .lt-pick legend{padding:0;margin:0 0 6px;font-size:13px;font-weight:500;color:var(--text-2)}
.pp-dlg .lt-pick ul{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:6px}
.pp-dlg .lt-pick li + li{border-top:1px solid var(--line)}
.pp-dlg .lt-pick label{display:flex;align-items:center;gap:10px;margin:0;padding:0 12px;min-height:44px;font-size:14.5px;font-weight:500;color:var(--text);cursor:pointer}
.pp-dlg .lt-pick .m{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--text-3);white-space:nowrap}
.pp-dlg .lt-pick .none{display:block;padding:12px;font-size:13.5px;color:var(--text-3)}
.pp-dlg input[type=checkbox]{width:16px;height:16px;flex:none;accent-color:var(--forest);margin:0}
.pp-dlg .chk{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:14.5px;font-weight:500;color:var(--text);cursor:pointer}
.pp-dlg .err{margin:0 0 6px;font-size:13px;color:var(--neg)}
.pp-dlg .lt-dlg-f{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:20px}
.pp-dlg .lt-dlg-f .note{margin-right:auto;font-size:12.5px;color:var(--text-3)}
.pp-dlg .btn-d.btn-a{background:var(--neg,#A3462A);border-color:var(--neg,#A3462A);color:#fff}
.pp-dlg p.q{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-2)}
/* Email <name> about this: the email as it will arrive, under the tick box */
.pp-dlg .pp-notice{margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pp-dlg .pp-notice .chk{margin:0}
.pp-dlg .pp-nv{margin:12px 0 0}
.pp-dlg .pp-nv .err{margin:0}
.pp-dlg .pp-nsubj{margin:0 0 8px}
.pp-dlg .pp-nmail{display:block;width:100%;height:320px;border:1px solid var(--line-2);border-radius:6px;background:#F3F2F2;box-sizing:border-box}
@media (max-width:820px){ .pp-dlg .pp-nmail{height:260px} }

/* phone: no sideways scroll; More stays on the title line, the pill and the action share a second line */
@container (max-width:640px){
  .pp .lt-row{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"ic main more" ". st go";column-gap:12px;row-gap:8px;padding:14px 0}
  .pp .lt-st{height:auto;margin-top:0}
  .pp .lt-st:empty{display:none}
  .pp .lt-go{margin-top:0}
  .pp .lt-go:empty{display:none}
  .pp .lt-more{justify-self:end;margin-top:-5px}
  .pp .lt-t{white-space:normal}
  .pp .lt-m{white-space:normal}
}
@media (max-width:820px){
  .pp .lt-h{font-size:24px}
  .pp h2.lt-h{font-size:17px}
  .pp .lt-filters .lt-sel{flex:1 1 0;min-width:0}
  .pp .lt-sel select,.pp .lt-search{min-width:0;width:100%;font-size:16px;height:40px}
  .pp .lt-search{flex:1 1 100%}
  .pp .lt-filters .push{margin-left:0}
  .pp-dlg .lt-dlg{padding:20px 16px 16px}
  .pp-dlg .pair{grid-template-columns:1fr}
  .pp-dlg select,.pp-dlg input[type=text],.pp-dlg input[type=email]{font-size:16px}
  .pp-dlg .lt-dlg-f{flex-wrap:wrap}
  .pp-dlg .lt-dlg-f .note{flex-basis:100%}
  .pp-dlg .lt-dlg-f .btn{flex:1 1 0;min-height:44px}
  .pp-dlg .lt-pick .m{display:none}
}

/* Studio for a reviewer (body.sx-rv, studio.js): notes, answers, page checks; no asking, sending or approving */
body.sx-rv [data-sx="askrev"],body.sx-rv [data-tka="ask"],body.sx-rv [data-sxask],body.sx-rv [data-sxasknote],body.sx-rv [data-sxtopic],body.sx-rv .sx-tp-go,body.sx-rv [data-sx="send"],body.sx-rv [data-sx="approve"]{display:none!important}
.pp.set{display:block}
/* admin People's head: the place and a quiet total */
.band.pp > div{display:flex;align-items:baseline;gap:10px}
.band.pp > div > .lt-n{font-size:15px;font-weight:500;letter-spacing:0;color:var(--text-3);font-variant-numeric:tabular-nums}
/* the second step of Invite and Edit access: who, then the two project lists */
.pp-dlg .pp-for{margin:0 0 14px;font-size:14px;font-weight:500;color:var(--text-2)}
.pp-dlg .lt-pick input[data-all] + *,.pp-dlg .lt-pick li:first-child label{font-weight:600}
.pp-dlg [data-step][hidden],.pp-dlg [data-back][hidden],.pp-dlg .lt-pick[hidden]{display:none}
/* the pick lists keep their row layout under the template's dialog label rule (system.css html.v2 .lt-dlg label) */
.pp-dlg .lt-dlg .lt-pick label{display:flex;align-items:center;gap:10px;margin:0;padding:0 12px;min-height:44px;font-size:14.5px;font-weight:500;color:var(--text)}
.pp-dlg .lt-dlg .lt-pick li:first-child label{font-weight:600}
.pp-dlg .lt-dlg label.chk{display:flex;align-items:center;gap:10px}