/* Users (studio/users.js, migration 023): the admins' page of every login. Tokens from ds.css; parts from DS. */

body.live.team #demo button.us-q { display: inline-flex; align-items: center; gap: var(--sp-2); }
body.us-open { overflow: hidden; }

.us-page { position: fixed; inset: 0; z-index: var(--z-page); overflow-y: auto; background: var(--c-bg); padding: var(--sp-7) var(--sp-4) var(--sp-10); }
.us-wrap { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.us-top { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.us-h1 { margin-top: var(--sp-2); font-size: clamp(26px, 6vw, 44px); line-height: 1.02; overflow-wrap: normal; word-break: normal; hyphens: none; }
.us-acts { gap: var(--sp-2); align-items: center; }
.us-acts .btn svg { width: 18px; height: 18px; }

.us-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.us-switches .ds-switch { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }

.us-held { display: flex; flex-direction: column; gap: var(--sp-2); }
.us-heldlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.us-heldrow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.us-tools { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.us-tools .ds-input { max-width: 360px; }

.us-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.us-row { display: grid; grid-template-columns: auto minmax(0, 1.3fr) auto minmax(0, 1.4fr) minmax(0, .8fr); gap: var(--sp-3); align-items: center;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
.us-row:hover { border-color: var(--c-border-hover); }
.us-row:focus-visible { outline: none; box-shadow: var(--ring); }
.us-who { display: flex; flex-direction: column; min-width: 0; }
.us-who b, .us-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-who b { color: var(--c-strong); }
.us-pills { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.us-where { min-width: 0; color: var(--c-text-2); }
.us-when { text-align: right; }

.us-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.us-pager > .small.muted { margin-right: auto; }
.us-mails { gap: var(--sp-2); }

@media (max-width: 860px) {
  .us-top > .ds-grow { flex-basis: 100%; }
  .us-acts { margin-left: auto; }
  .us-h1 { font-size: clamp(24px, 7.5vw, 34px); }
  .us-switches { grid-template-columns: 1fr; }
  .us-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .us-where, .us-when { grid-column: 2 / -1; text-align: left; }
}

/* a strategist's studios (024) */
.us-pkbar { gap: var(--sp-2); align-items: center; }
.us-pklist { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 360px; overflow-y: auto; padding: var(--sp-1); }