/* Team account controls and the single-field role dialog share one inset. */
#main .team-account-access > .native-panel-heading {
  padding: 20px 20px 16px;
}
#main .team-account-access > .native-row-actions {
  padding: 0 20px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#main .team-account-access > .native-row-actions > .button {
  min-height: 40px;
}
.native-dialog:has(> form select[name="role"]) {
  width: min(480px, calc(100vw - 32px));
}
.native-dialog:has(> form select[name="role"]) > .native-dialog-heading {
  padding: 20px 24px;
  gap: 16px;
}
.native-dialog:has(> form select[name="role"]) > .native-dialog-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
}
.native-dialog:has(> form select[name="role"]) > form {
  padding: 24px;
}
.native-dialog:has(> form select[name="role"]) > form > .native-help {
  margin: 0 0 20px;
  padding: 0;
  font-size: 13px;
  line-height: 20px;
}
.native-dialog:has(> form select[name="role"]) > form > .native-form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.native-dialog:has(> form select[name="role"]) .native-field select {
  width: 100%;
}
.native-dialog:has(> form select[name="role"]) > form > .native-form-actions {
  margin: 24px 0 0;
  padding: 0;
  gap: 8px;
}
@media (max-width: 600px) {
  #main .team-account-access > .native-panel-heading {
    padding: 16px 16px 12px;
  }
  #main .team-account-access > .native-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px 16px;
    gap: 8px;
  }
  #main .team-account-access > .native-row-actions > .button {
    min-height: 44px;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  .native-dialog:has(> form select[name="role"]) > .native-dialog-heading {
    padding: 16px 20px;
  }
  .native-dialog:has(> form select[name="role"]) > form {
    padding: 20px;
  }
  .native-dialog:has(> form select[name="role"]) > form > .native-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .native-dialog:has(> form select[name="role"]) .native-field select,
  .native-dialog:has(> form select[name="role"]) .native-form-actions > button {
    min-height: 44px;
  }
}

/* Assigned members are complete rows, including their remove action. */
.assignment-options:has(> .native-row-actions) {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.assignment-options > .native-row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border, #dfe4ed);
  border-radius: 10px;
  background: #fff;
}
.assignment-options > .native-row-actions > label {
  flex: 1 1 0;
  min-width: 0;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.assignment-options > .native-row-actions > label > input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}
.assignment-options > .native-row-actions > label > span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 20px;
}
.assignment-options > .native-row-actions small {
  line-height: 18px;
}
.assignment-options > .native-row-actions > .text-button {
  flex: 0 0 auto;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.assignment-options > .native-row-actions:has(input:checked) {
  border-color: var(--connect-primary, #8b5cf6);
  background: #faf7ff;
}
@media (max-width: 600px) {
  .assignment-options > .native-row-actions {
    gap: 8px;
    padding: 12px;
  }
  .assignment-options > .native-row-actions > .text-button {
    min-height: 44px;
    padding-inline: 8px;
  }
  form:has(> .native-two-columns > .native-panel > .assignment-options) > .native-form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 64px;
  }
  form:has(> .native-two-columns > .native-panel > .assignment-options) > .native-form-actions > button {
    min-height: 44px;
    width: 100%;
  }
}