/* People ------------------------------------------------------------------ */

/* One person in the studio settings: their name, what they have spent, what
   they may spend, and the things an admin can do to the account. */
.person {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.person:last-child { border-bottom: none; }
.person input { flex: 1 1 8rem; min-width: 6rem; }
.person input.cfg-num { flex: 0 0 7rem; }
/* A select is width:100% like every other field, and without a basis of its
   own that pushes the whole row onto a second line. */
.person select { flex: 1 1 10rem; min-width: 8rem; }
.person .hint { flex: 0 0 auto; }
/* A toggle that is on: Admin, In the studio, and the password row's own
   switch. Cyan, because this is a state and cyan is the studio's own voice —
   New game, the open tab, the active row. It was gold, which is a score or a
   version and nothing else: gold that also means "active" means nothing, and
   these three are the only place in the studio it had drifted (CLAUDE.md,
   test/style.test.js). */
/* ⚠️ The background is restated because base.css's `button.quiet.on` fills a
   lit quiet button with the same cyan as this ink — which made all three read
   as blank cyan bars. */
.person button.on { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); background: transparent; }
/* What a row's button revealed, on its own line under the row: the new
   password field and the button that sets it. */
.person .person-more { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; padding: 2px 0 4px; }