.staff-users-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.staff-users-heading .button { flex: none; }

.staff-role-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 28px;
}

.staff-role-guide > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: #e8ece2;
}

.staff-role-guide strong { font-size: .9rem; font-weight: 500; }
.staff-role-guide span { color: var(--muted); font-size: .8rem; }

.staff-user-filters {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(140px, 200px) minmax(140px, 200px) auto auto;
  align-items: end;
  gap: 12px;
  padding-bottom: 24px;
}

.staff-user-filters label { color: var(--muted); font-size: .78rem; }
.staff-user-filters input,
.staff-user-filters select { width: 100%; margin-top: 6px; }
.staff-user-filters .button { min-height: 50px; }
.staff-user-filters > a { align-self: center; font-size: .8rem; text-decoration: underline; }

.staff-user-list { border-top: 1px solid var(--line); }

.staff-user-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(190px, .55fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
}

.staff-user-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--forest);
  color: var(--white);
  font: 1.65rem var(--serif);
}

.staff-user-identity { min-width: 0; }
.staff-user-identity h2 { font: 500 1.05rem/1.3 var(--sans); letter-spacing: 0; overflow-wrap: anywhere; }
.staff-user-identity h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.staff-user-identity h2 small { margin-left: 9px; color: var(--muted); font-size: .7rem; }
.staff-user-identity p { margin-top: 4px; color: var(--muted); font-size: .77rem; overflow-wrap: anywhere; }
.staff-user-details { display: flex; flex-wrap: wrap; gap: 5px 9px; align-items: center; }
.staff-user-role,
.staff-user-state { padding: 4px 7px; background: #e3e9df; color: var(--forest); font-size: .72rem; line-height: 1.3; }
.staff-user-state { background: #dceadf; color: #285b3b; }
.staff-user-state--off { background: #ede4df; color: #845847; }
.staff-user-details small { flex-basis: 100%; color: var(--muted); font-size: .73rem; }
.staff-user-open { white-space: nowrap; font-size: .82rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.staff-user-empty { padding: 45px 0; }
.staff-user-empty h2 { font-size: 2.6rem; }
.staff-user-empty p { margin-top: 12px; color: var(--muted); }

.staff-user-edit-grid { align-items: start; }
.staff-user-edit-grid .staff-panel h2 { margin-bottom: 26px; }
.staff-user-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.staff-user-form-grid label { min-width: 0; margin: 0; font-size: .8rem; font-weight: 500; }
.staff-user-form-grid input,
.staff-user-form-grid select { width: 100%; min-width: 0; box-sizing: border-box; margin-top: 7px; }
.staff-user-form-wide { grid-column: 1 / -1; }
.staff-user-form .errorlist { margin: 7px 0 0; padding-left: 18px; color: var(--red); font-size: .78rem; }
.staff-user-password-fields { margin: 27px 0 20px; padding-top: 22px; border-top: 1px solid var(--line); }
.staff-user-password-fields h3 { margin: 0 0 8px; font: 500 .96rem var(--sans); letter-spacing: 0; }
.staff-user-password-fields p { margin-bottom: 16px; color: var(--muted); font-size: .8rem; }
.staff-user-form > .button { margin-top: 4px; }
.staff-user-note { margin: 12px 0; color: var(--muted); font-size: .78rem; }
.staff-user-access-panel > p { color: var(--muted); font-size: .86rem; }
.staff-user-access-panel > p strong { color: var(--forest); }
.staff-user-access-panel dl { margin: 24px 0 0; }
.staff-user-access-panel dl div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
.staff-user-access-panel dt { color: var(--muted); }
.staff-user-access-panel dd { margin: 0; text-align: right; }
.staff-user-access-action { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.staff-user-access-action h3 { margin: 0 0 9px; }
.staff-user-access-action p { color: var(--muted); font-size: .81rem; }
.staff-user-access-action .button { margin-top: 18px; }

@media (max-width: 1050px) {
  .staff-user-row { grid-template-columns: 45px minmax(0, 1fr) auto; gap: 14px; }
  .staff-user-avatar { width: 45px; height: 45px; }
  .staff-user-details { grid-column: 2; }
  .staff-user-open { grid-column: 3; grid-row: 1 / 3; }
  .staff-user-filters { grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(130px, 180px)); }
}

@media (max-width: 700px) {
  .staff-users-heading { align-items: flex-start; flex-direction: column; }
  .staff-users-heading .button { width: 100%; }
  .staff-role-guide { grid-template-columns: 1fr; }
  .staff-user-filters { grid-template-columns: 1fr 1fr; }
  .staff-user-filters label:first-child,
  .staff-user-filters .button { grid-column: 1 / -1; }
  .staff-user-row { grid-template-columns: 42px minmax(0, 1fr); }
  .staff-user-details { grid-column: 2; }
  .staff-user-open { grid-column: 2; grid-row: auto; }
  .staff-user-form-grid { grid-template-columns: 1fr; }
  .staff-user-form-wide { grid-column: auto; }
}