/* The People pages' server-built part (public-worker/src/pages/people.js), on the hub's tokens (tokens.css) and the shared classes of site.css.
 * Every class here starts with ppl-. No inline styles anywhere: every look is a class here. */

.ppl-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
.ppl-tabs a { padding: 5px 14px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--muted); }
.ppl-tabs a[aria-current="page"] { background: var(--gold-fill, var(--gold)); color: var(--on-gold, var(--bg)); border-color: transparent; font-weight: 600; }

.filters .field { min-width: 0; max-width: 100%; }
.filters select, .filters input[type="search"] { max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 560px) { .filters .field { flex: 1 1 100%; } .filters select, .filters input[type="search"] { width: 100%; } }

.ppl-list { list-style: none; margin: 8px 0; padding: 0; }
.ppl-list > li { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); }
.ppl-name { font-weight: 600; }
.ppl-meta { color: var(--muted); font-size: 14px; flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.ppl-n { color: var(--muted); font-size: 14px; white-space: nowrap; }

.ppl-bills { list-style: none; margin: 8px 0 16px; padding: 0; }
.ppl-bills > li { padding: 9px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.ppl-bills > li:last-child { border-bottom: 0; }