/* Athena hosted build: People view (members.js). Rides the mockup's tokens; thin, re-skinnable. */
/* Settings › People: one sentence of state, the controls behind "Change ›" */
.pp-state{font-size:15px;line-height:1.45;color:var(--t1);margin:0 0 8px;max-width:70ch}
.pp-change summary{cursor:pointer;font-size:12.5px;color:var(--t1);list-style:none;display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--raised)}
.pp-change summary::-webkit-details-marker{display:none}
.pp-change summary:hover{color:var(--t1)}
.pp-change[open] summary{margin-bottom:10px}
.pp-body{display:flex;flex-direction:column;gap:14px;min-width:0}
/* inside the shell the table gets the full width; invite / waiting / access sit below it side by side */
.pp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.pp-col{min-width:0;display:flex;flex-direction:column;gap:14px}
.pp-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start;min-width:0}
/* chips: grey ink for plain states (colour law: green only for a verified proof) */
.pj-chip.plain{color:var(--t2);background:var(--elev);border-color:var(--line-2)}
.pj-chip.plain.off{color:var(--t3)}
.pj-dot.plain{background:var(--t3)}
/* one "…" menu per row */
.pp-menu-wrap{position:relative;display:inline-block}
.pp-more{padding:4px 10px;font-size:15px;line-height:1;letter-spacing:.1em;min-width:36px;justify-content:center}
.pp-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:180px;padding:6px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--raised);box-shadow:0 8px 24px -12px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.pp-menu[hidden]{display:none}
.pp-mi{font:inherit;font-size:12.5px;text-align:left;color:var(--t1);background:none;border:0;border-radius:var(--r-sm);padding:8px 10px;cursor:pointer;min-height:36px}
.pp-mi:hover,.pp-mi:focus-visible{background:var(--elev);outline:none}
.pp-mi.danger{color:var(--danger)}
.pp-mi[disabled]{opacity:.45;cursor:not-allowed}
.pp-table tr.off td.pp-acts-cell .pp-more{opacity:1}
.pp-card{min-width:0}
.pp-card .card-h{flex-wrap:wrap;gap:8px 10px}
.pp-note{font-size:12.5px;color:var(--t3);line-height:1.55}
.pp-lead{margin-bottom:12px}
.pp-sub{font-size:11.5px;color:var(--t3);letter-spacing:.03em;text-transform:uppercase;margin:14px 0 8px}
.pp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.pp-table th{text-align:left;font-size:11px;color:var(--t3);font-weight:500;letter-spacing:.03em;padding:0 10px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.pp-table td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;min-width:0}
.pp-table tr:last-child td{border-bottom:none}
.pp-table tr.off td{opacity:.55}
.pp-table tr.off td.pp-acts-cell{opacity:1}
.pp-who{display:flex;align-items:center;gap:10px;min-width:0}
.pp-av{width:28px;height:28px;border-radius:50%;background:var(--accent-dim);color:var(--accent-hover);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.pp-nm{color:var(--t1);font-weight:500;overflow-wrap:anywhere}
.pp-em{font-size:11.5px;color:var(--t3);overflow-wrap:anywhere}
.pp-why{font-size:11px;color:var(--t3);margin-top:2px;cursor:help}
/* a quiet text link in a cell ("invited, assign apps ›" opens that row's assignment box) */
.pp-link{font:inherit;font-size:inherit;color:var(--t2);background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line-strong)}
.pp-link:hover{color:var(--t1)}
.pp-table td[title]{cursor:help}
.pp-card .card-h .count{font-family:inherit;font-size:11.5px}
.pp-me{font-size:10.5px;color:var(--t3);margin-left:6px}
.pp-table .pj-chip{text-transform:none}
.pp-cell-k{display:none;font-size:11px;color:var(--t3);margin-right:6px}
.pp-acts{display:flex;gap:6px;flex-wrap:wrap}
.pp-acts .btn,.pp-form .btn,.pp-inv .btn,.pp-once .btn{padding:6px 10px;font-size:12px}
.pp-acts .btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.danger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.pp-assign{margin-top:8px;padding:10px 12px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--elev);display:flex;flex-direction:column;gap:8px}
.pp-checks{display:flex;flex-wrap:wrap;gap:6px 14px}
.pp-checks label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t1)}
.pp-checks input,.pp-radio input{accent-color:var(--accent);width:14px;height:14px}
.pp-form{display:flex;flex-direction:column;gap:10px}
.pp-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 12px}
.pp-field{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--t3);min-width:0}
.pp-in{width:100%;padding:8px 10px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg);color:var(--t1);font:inherit;font-size:13px;outline:none;transition:border-color .16s;min-width:0}
.pp-in:focus{border-color:var(--accent)}
select.pp-in{appearance:none;-webkit-appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.pp-err{min-height:16px;font-size:12px;color:var(--danger)}
.pp-row-acts{display:flex;gap:8px;flex-wrap:wrap}
/* the one-time password panel */
.pp-once{margin-top:4px;padding:14px;border-radius:var(--r-md);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-dim);display:flex;flex-direction:column;gap:10px}
.pp-once b{color:var(--t1);font-size:13.5px}
.pp-once-pw{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pp-pw{font-family:var(--mono);font-size:16px;letter-spacing:.06em;color:var(--t1);padding:8px 12px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line-2);user-select:all;overflow-wrap:anywhere}
.pp-say{font-size:12.5px;color:var(--t1);line-height:1.6;padding:10px 12px;border-radius:var(--r-md);background:var(--elev);border:1px solid var(--line)}
.pp-say-k{font-size:11px;color:var(--t3);letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px}
.pp-once .pp-note{color:var(--t2)}
/* pending invites */
.pp-inv{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pp-inv:first-of-type{border-top:none;padding-top:0}
.pp-inv-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pp-inv-tx b{color:var(--t1);font-size:12.5px;overflow-wrap:anywhere}
.pp-inv-tx span{font-size:11.5px;color:var(--t3)}
.pp-inv .btn{margin-left:auto}
/* the one setting */
.pp-radio{display:flex;flex-direction:column;gap:8px}
.pp-radio label{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--t1);cursor:pointer}
.pp-radio label input{margin-top:2px}
.pp-radio label span span{display:block;font-size:11.5px;color:var(--t3);margin-top:2px}
@media (max-width:640px){
  .pp-table thead{display:none}
  .pp-table,.pp-table tbody,.pp-table tr,.pp-table td{display:block;width:100%}
  .pp-table tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .pp-table tr:last-child{border-bottom:none}
  .pp-table td{padding:3px 0;border-bottom:none}
  .pp-cell-k{display:inline}
  .pp-acts .btn{flex:1 1 auto;justify-content:center}
  .pp-inv{flex-wrap:wrap}
  .pp-inv .btn{margin-left:0;flex:1 1 100%;justify-content:center}
  .pp-row-acts .btn{flex:1;justify-content:center}
}
/* the person column must not wrap names letter by letter in the two-column layout */
.pp-table td:first-child{min-width:230px}
.pp-who b,.pp-who .pp-mail{overflow-wrap:anywhere}
.pp-who>div{min-width:0}
@media (max-width:640px){ .pp-table td:first-child{min-width:0} }
/* phones: every control is a 44 px tap target */
@media (max-width:560px){
  .pp-acts .btn,.pp-form .btn,.pp-inv .btn,.pp-once .btn,.pp-row-acts .btn,.pp-more,.pp-mi,.pp-in,.pp-change summary,.pp-link{min-height:44px}
  .pp-radio label,.pp-checks label{min-height:44px;align-items:center}
  .pp-menu{position:static;margin-top:6px;box-shadow:none}
}
/* the members table wrapper never clips: the "…" menu hangs below it; on phones the table becomes stacked rows anyway */
.pp-scroll{overflow:visible}
/* the in-cell text link keeps the line's height on phones: the 44 px tap target is an invisible hit area, not a tall box */
.pp-link{position:relative}
@media (max-width:560px){
  .pp-table .pp-link{min-height:0}
  .pp-table .pp-link::before{content:"";position:absolute;inset:-12px -6px}
}