/* ---- admin ----
   Four panels behind one segmented control. Same one-hue rule as everywhere:
   red appears only on the two genuinely destructive confirmations. */
.subnav { display: flex; flex-wrap: wrap; gap: var(--sp-35); margin-bottom: var(--sp-150); }
.admin-lede { font-size: var(--fs-84); color: var(--text-dim); margin-bottom: 1.1rem; max-width: 46rem; line-height: 1.6; }

.people { width: 100%; border-collapse: collapse; font-size: var(--fs-86); }
.people thead th { text-align: left; font-size: var(--fs-66); letter-spacing: 0.13em; color: var(--text-faint); padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.people td { padding: 0.6rem 0.7rem; vertical-align: middle; }
.people tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.people tbody tr.is-off td { opacity: 0.5; }
.p-who b { display: block; font-weight: 600; color: var(--text); }
.p-who span { display: block; font-size: var(--fs-76); color: var(--text-faint); }
.p-sel select { font-size: var(--fs-80); padding: 0.3rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel); color: var(--text); max-width: 100%; }
.p-sel select:focus { outline: none; border-color: var(--violet); }
.p-act { text-align: right; white-space: nowrap; }

.rolecard + .rolecard { margin-top: var(--sp-70); }
.rolecard { padding: 1rem 1.1rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); }
.rolecard h3 { font-size: 0.95rem; font-weight: 600; }
.rolecard .sees { font-size: var(--fs-76); color: var(--text-dim); margin-top: var(--sp-20); }
.caps { display: flex; flex-wrap: wrap; gap: var(--sp-30); margin-top: var(--sp-75); }
.cap { font-size: var(--fs-72); padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--text-faint); }
.cap.on { color: var(--violet); border-color: var(--lilac-dim); background: var(--panel-2); font-weight: 600; }

.taglist { display: flex; flex-wrap: wrap; gap: var(--sp-40); }
.tagedit { display: inline-flex; align-items: center; gap: var(--sp-30); font-size: var(--fs-78); padding: 0.28rem 0.35rem 0.28rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--panel); }
.tagedit button { color: var(--text-faint); line-height: 1; padding: 0 0.25rem; border-radius: 50%; font-size: var(--fs-90); }
.tagedit button:hover { color: var(--crit); }
.tagedit .used { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.ret-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-100); align-items: start; }
.ret-row + .ret-row { margin-top: var(--sp-120); padding-top: var(--sp-120); border-top: 1px solid var(--line-soft); }
.ret-k { font-size: var(--fs-84); font-weight: 600; color: var(--text); }
.ret-k span { display: block; font-weight: 400; font-size: var(--fs-76); color: var(--text-faint); margin-top: var(--sp-15); }
.ret-ctl { display: flex; flex-wrap: wrap; gap: var(--sp-50); align-items: center; }
.ret-ctl select { font-size: var(--fs-82); padding: 0.35rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel); color: var(--text); }
.ret-ctl select:focus { outline: none; border-color: var(--violet); }
.ret-warn { font-size: var(--fs-76); color: var(--crit); font-weight: 600; display: flex; align-items: center; gap: var(--sp-35); margin-top: var(--sp-60); }

.invite { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-60); align-items: end; }
.field label { display: block; font-size: var(--fs-68); letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: var(--sp-30); }
.field input, .field select { width: 100%; font-size: var(--fs-85); padding: 0.45rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--panel); color: var(--text); }
.field input:focus, .field select:focus { outline: none; border-color: var(--violet); }
.formnote { font-size: var(--fs-78); margin-top: var(--sp-70); display: flex; align-items: flex-start; gap: var(--sp-40); }
.formnote.bad { color: var(--crit); }
.formnote.ok { color: var(--text-dim); }

@media (max-width: 52rem) {
  .people thead { display: none; }
  .people, .people tbody, .people tr, .people td { display: block; width: 100%; }
  .people tbody tr { padding: 0.7rem 0; border-top: 1px solid var(--line-soft); }
  .people tbody tr + tr td { border-top: 0; }
  .people td { padding: 0.2rem 0; }
  .p-act { text-align: left; margin-top: var(--sp-40); }
  .ret-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-50); }
}