/* People (2026-10-15): the house console's search over every account, and a
 * person's page. Owner: console/js/people.js. It also draws with house.css's
 * pieces (.house-hero, .hseg, .org-cols, .staff-list, .choice, .wiz-review).
 *
 * Tokens only (--surface-*, --text*, --border*, --space-*, --radius*), like
 * house.css, so every theme works. Colour is never the only signal: every
 * state is a chip with an icon and a word. */

/* The header's course/student tiles are a tenant's figures, not this page's. app.js sets data-tab. */
body[data-tab="people"] #stats { display: none; }

/* --- find ----------------------------------------------------------------------- */

.people-search { position: relative; display: flex; align-items: center; gap: var(--space-2);
                 max-width: 40rem; margin: 0 0 var(--space-3); }
.people-search input { flex: 1 1 auto; min-width: 0; padding-left: 2.1rem; }
.people-search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
                      display: inline-flex; color: var(--text-dim); pointer-events: none; }
.people-roles { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.people-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
                flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* --- a person -------------------------------------------------------------------- */

.people-hero-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4);
                    flex-wrap: wrap; }
.people-hero-main > .person { min-width: 0; }
.people-hero-main .person-name { font-size: var(--fs-h2, 1.3rem); font-weight: var(--fw-bold); letter-spacing: -.015em;
                                 overflow-wrap: anywhere; }
.people-hero-main .person-sub { overflow-wrap: anywhere; }
.people-facts { margin-top: var(--space-4); }

.people-actions { list-style: none; margin: 0; padding: 0; }
.people-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
                 gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.people-action:first-child { border-top: 0; padding-top: 0; }
.people-action-text { flex: 1 1 15rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.people-action-title { font-weight: var(--fw-semibold); color: var(--text); }
.people-why { margin: var(--space-2) 0 0; padding-left: 1.1rem; }
.people-why li + li { margin-top: 2px; }

.people-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
              margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.people-add select { min-width: 0; max-width: 100%; }
[data-card="orgs"] .staff-actions select { min-width: 0; max-width: 14rem; }

.people-invite { font-size: var(--fs-small); align-self: flex-start; }

.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-list > li { padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.audit-list > li:first-child { border-top: 0; padding-top: 0; }
.audit-what { color: var(--text); overflow-wrap: anywhere; }
.audit-meta { font-size: var(--fs-caption); color: var(--text-dim); overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .people-search { max-width: none; }
  .people-action > .btn { width: 100%; }
  [data-card="orgs"] .staff-actions select { max-width: 100%; }
}