/* ═══════════════════════════════════════════════════════════════════════════════
   ADMIN · PEOPLE                                                      26 Aug 2026
   ═══════════════════════════════════════════════════════════════════════════════
   NO ARTBOARD. Plate 07 is the spec.

   THE CONVERSION THIS SCREEN NEEDED. "invite pending" was drawn as an AMBER TAG, and
   amber is now a deal state — it means "discussed, no acceptance" and nothing else.
   An account waiting on its invite is not a deal nobody agreed to. Same overload as
   the analyse output's win probability, on a screen where the colour meant a third
   thing again. Account status is drawn in ink with a shape, never in the state
   palette; the four words do not appear on this screen at all, because no fact on it
   is a deal state.

   THE OTHER THING THIS SCREEN NEEDED. Six actions per row, all the same weight, with
   "Delete all data" and "Remove" sitting between "Reset password" and the next
   person. Nothing is removed — every action a person could take before is still one
   click away — but the two irreversible ones are separated by a rule and carry the
   contradicted tone, which on this screen is not a deal state but the system's only
   red and is being used for the one thing red is for.
   ═══════════════════════════════════════════════════════════════════════════════ */

.ap-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
           box-shadow:var(--plane-card); overflow:hidden; }
.ap-head { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
           padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); }
.ap-title { font-family:var(--face-ui); font-size:var(--fs-card); line-height:var(--lh-card);
            font-weight:600; color:var(--ink); margin:0; }
.ap-meta { margin-left:auto; font-family:var(--face-ui); font-size:var(--fs-meta);
           color:var(--ink-3); font-variant-numeric:tabular-nums; }

/* ── A PERSON ─────────────────────────────────────────────────────────────────
   One grid, header and rows, so the columns cannot drift. */
.ap-cols, .ap-row {
  display:grid;
  grid-template-columns:
    minmax(180px,2fr)   /* person  */
    minmax(84px,1fr)    /* role    */
    minmax(120px,1.4fr) /* manager */
    120px               /* status  */
    minmax(0,auto);     /* actions */
  gap:var(--sp-3);
  align-items:center;
  padding:0 var(--sp-5);
}
.ap-cols { height:34px; background:var(--band); border-bottom:1px solid var(--line);
           font-family:var(--face-ui); font-size:var(--fs-eyebrow); letter-spacing:var(--tracking-eyebrow);
           text-transform:uppercase; color:var(--ink-3); }
.ap-row { padding-top:var(--sp-3); padding-bottom:var(--sp-3);
          border-bottom:1px solid var(--line); }
.ap-row:last-of-type { border-bottom:0; }
.ap-row:hover { background:var(--row-hover); }
.ap-row > * { min-width:0; }
.ap-row.is-inactive .ap-name, .ap-row.is-inactive .ap-sub { color:var(--ink-3); }

.ap-person { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.ap-av { width:28px; height:28px; flex-shrink:0; border-radius:var(--r-pill);
         display:grid; place-items:center; background:var(--recessed); color:var(--ink-2);
         font-family:var(--face-ui); font-size:var(--fs-meta); font-weight:600; }
.ap-name { display:block; font-family:var(--face-ui); font-size:var(--fs-row); font-weight:600;
           color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-sub { display:block; font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3);
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-cell { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink-2);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-notset { color:var(--ink-3); }

/* ── ACCOUNT STATUS — INK, NEVER THE STATE PALETTE ───────────────────────────
   Three account states, told apart by a shape and a word, in ink. Not agreed /
   agreed / contradicted mean what a BUYER did; nothing here is about a buyer. */
.ap-status { display:inline-flex; align-items:center; gap:6px; font-family:var(--face-ui);
             font-size:var(--fs-meta); font-weight:600; color:var(--ink-2); white-space:nowrap; }
.ap-status .ap-dot { width:7px; height:7px; border-radius:var(--r-pill); flex-shrink:0;
                     background:var(--ink-2); }
.ap-status.is-inactive { color:var(--ink-3); }
.ap-status.is-inactive .ap-dot { background:none; border:1px solid var(--ink-3); }
/* Pending is a HOLLOW dot with a rule through it — a shape, so the three read apart
   in greyscale and in print exactly as the four deal words do, without borrowing
   their colours. */
.ap-status.is-pending .ap-dot { background:none; border:1px solid var(--ink-2);
                                box-shadow:inset 0 0 0 1px var(--surface); }

.ap-sel { font-family:var(--face-ui); font-size:var(--fs-row); color:var(--ink);
          background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
          padding:5px 8px; max-width:100%; cursor:pointer; }
.ap-sel:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ap-saved { font-family:var(--face-ui); font-size:var(--fs-meta); color:var(--ink-3); margin-left:6px; }

/* ── ACTIONS ─────────────────────────────────────────────────────────────────
   ONE control object at ONE size. The old row mixed .rowact with .btn-sec carrying
   inline font-size and padding overrides, which is three sizes of button on one row.
   Nothing is removed: every action that existed still exists. The two irreversible
   ones are separated by a rule and carry the system's only red. */
.ap-acts { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; justify-content:flex-end; }
.ap-act { font-family:var(--face-ui); font-size:var(--fs-meta); font-weight:600; line-height:1;
          padding:6px 9px; border-radius:var(--r-control); border:1px solid var(--line);
          background:var(--surface); color:var(--ink-2); cursor:pointer; white-space:nowrap;
          transition:background var(--micro) var(--micro-ease), border-color var(--micro) var(--micro-ease); }
.ap-act:hover { background:var(--row-hover); border-color:var(--ink-3); color:var(--ink); }
.ap-act:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ap-sep { width:1px; align-self:stretch; background:var(--line); margin:0 2px; }
.ap-act.is-danger { color:var(--contradicted); border-color:var(--line); }
.ap-act.is-danger:hover { border-color:var(--contradicted); background:var(--surface); }

/* ── PLATE 08 ────────────────────────────────────────────────────────────────*/
.ap-empty { padding:var(--sp-8) var(--sp-5); text-align:center; }
.ap-empty-t { font-family:var(--face-ui); font-size:var(--fs-card); font-weight:600; color:var(--ink);
              margin:0; }
.ap-empty-b { font-family:var(--face-ui); font-size:var(--fs-row); line-height:var(--lh-row);
              color:var(--ink-2); margin:var(--sp-2) auto 0; max-width:52ch; }
.ap-note { font-family:var(--face-ui); font-size:var(--fs-meta); line-height:var(--lh-meta);
           color:var(--ink-3); padding:var(--sp-4) var(--sp-5); background:var(--band);
           border-top:1px solid var(--line); margin:0; }